feat:curated-content

app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Link } from "@/components/navigation";
+import { Card } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -30,14 +31,6 @@ const AudioSliderPage = () => {
     initFetch();
   }, [page, limit, search]);
 
-  // useEffect(() => {
-  //   if (audioData?.length > 0) {
-  //     shuffleAndSetVideos();
-  //     const interval = setInterval(shuffleAndSetVideos, 5000);
-  //     return () => clearInterval(interval); // Cleanup interval on unmount
-  //   }
-  // }, [audioData]);
-
   const initFetch = async () => {
     const response = await listCuratedContent(search, limit, page - 1, 4, "1");
     console.log(response);
@@ -48,11 +41,6 @@ const AudioSliderPage = () => {
     setDisplayAudio(contentData);
   };
 
-  // const shuffleAndSetVideos = () => {
-  //   const shuffled = shuffleArray([...audioData]);
-  //   setDisplayAudio(shuffled.slice(0, 3));
-  // };
-
   const shuffleArray = (array: any[]) => {
     for (let i = array.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -62,18 +50,29 @@ const AudioSliderPage = () => {
   };
 
   return (
-    <Carousel className="w-full pr-3">
+    <div className="w-full px-2">
-      <CarouselContent>
+      {displayAudio.length > 0 && (
-        {Array.from({ length: 5 }).map((_, index) => (
+        <div>
-          <CarouselItem key={index}>
+          <div className="flex justify-between items-center mb-2">
-            <div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/2 gap-3">
+            <h2 className="text-xl font-semibold">Audio</h2>
-              {displayAudio?.map((audio: any) => (
             <Link
-                  href={`/shared/curated-content//giat-routine/audio/detail/${audio.id}`}
+              href={"/shared/curated-content/giat-routine/video/all"}
-                  key={audio?.id}
+              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
-                  className="flex flex-col sm:flex-row items-center hover:scale-100 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-12 h-12">
+              Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
+            </Link>
+          </div>
+          <Carousel className="w-full">
+            <CarouselContent>
+              {displayAudio.map((audio, index) => (
+                <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
+                  <div className="p-2">
+                    <Card className=" shadow-md rounded-lg overflow-hidden">
+                      <Link
+                        href={`/shared/curated-content/giat-routine/audio/detail/${audio.id}`}
+                      >
+                        <div className="flex flex-row items-center gap-3">
+                          <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-12 h-12 mx-3 my-3">
                             <svg
                               width="28"
                               height="28"
@@ -93,8 +92,9 @@ const AudioSliderPage = () => {
                               {audio?.title}
                             </div>
                           </div>
+                        </div>
                       </Link>
-              ))}
+                    </Card>
                   </div>
                 </CarouselItem>
               ))}
@@ -102,6 +102,9 @@ const AudioSliderPage = () => {
             <CarouselPrevious />
             <CarouselNext />
           </Carousel>
+        </div>
+      )}
+    </div>
   );
 };
 

app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx

@@ -574,35 +574,36 @@ export default function DetailAudio() {
                           key={data.id}
                           className="flex items-center gap-3 mt-2"
                         >
-                          {/* <img
-                            className="object-cover w-20 h-20"
-                            src={data.thumbnailUrl} // Assuming `thumbnailUrl` is the property that contains the URL for the thumbnail image
-                            alt={`Thumbnail ${index}`}
-                          /> */}
                           <Music className="object-cover w-32 h-32" />
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
                             {/* Mabes Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "mabes"} // Automatically checks if placement matches
+                                checked={data.placements === "mabes"}
-                                disabled // To reflect read-only behavior
+                                disabled
                               />
                               <span>Nasional</span>
                             </label>
 
-                            {/* Polda Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "polda"} // Automatically checks if placement matches
+                                checked={data.placements === "polda"}
                                 disabled
                               />
                               <span>Wilayah</span>
                             </label>
 
-                            {/* International Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "international"} // Automatically checks if placement matches
+                                checked={data.placements === "satker"}
+                                disabled
+                              />
+                              <span>Satker</span>
+                            </label>
+
+                            <label className=" cursor-pointer flex items-center gap-2">
+                              <Checkbox
+                                checked={data.placements === "international"}
                                 disabled
                               />
                               <span>International</span>

app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx

@@ -580,28 +580,33 @@ export default function DetailDocument() {
                             alt={data.fileName}
                           />
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
-                            {/* Mabes Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "mabes"} // Automatically checks if placement matches
+                                checked={data.placements === "mabes"}
-                                disabled // To reflect read-only behavior
+                                disabled
                               />
                               <span>Nasional</span>
                             </label>
 
-                            {/* Polda Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "polda"} // Automatically checks if placement matches
+                                checked={data.placements === "polda"}
                                 disabled
                               />
                               <span>Wilayah</span>
                             </label>
 
-                            {/* International Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "international"} // Automatically checks if placement matches
+                                checked={data.placements === "satker"}
+                                disabled
+                              />
+                              <span>Satker</span>
+                            </label>
+
+                            <label className=" cursor-pointer flex items-center gap-2">
+                              <Checkbox
+                                checked={data.placements === "international"}
                                 disabled
                               />
                               <span>International</span>

app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Link } from "@/components/navigation";
+import { Card } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -30,14 +31,6 @@ const TeksSliderPage = () => {
     initFetch();
   }, [page, limit, search]);
 
-  // useEffect(() => {
-  //   if (documentData?.length > 0) {
-  //     shuffleAndSetVideos();
-  //     const interval = setInterval(shuffleAndSetVideos, 5000);
-  //     return () => clearInterval(interval); // Cleanup interval on unmount
-  //   }
-  // }, [documentData]);
-
   const initFetch = async () => {
     const response = await listCuratedContent(search, limit, page - 1, 3, "1");
     console.log(response);
@@ -47,25 +40,26 @@ const TeksSliderPage = () => {
     setHasData(displayDocument && displayDocument.length > 0);
     setDisplayDocument(contentData);
   };
-  // const shuffleAndSetVideos = () => {
-  //   const shuffled = shuffleArray([...documentData]);
-  //   setDisplayDocument(shuffled.slice(0, 2));
-  // };
-
-  // const shuffleArray = (array: any[]) => {
-  //   for (let i = array.length - 1; i > 0; i--) {
-  //     const j = Math.floor(Math.random() * (i + 1));
-  //     [array[i], array[j]] = [array[j], array[i]];
-  //   }
-  //   return array;
-  // };
 
   return (
-    <Carousel className="w-full pr-3">
+    <div className="w-full px-2">
+      {displayDocument.length > 0 && (
+        <div>
+          <div className="flex justify-between items-center mb-2">
+            <h2 className="text-xl font-semibold">Teks</h2>
+            <Link
+              href={"/shared/curated-content/giat-routine/video/all"}
+              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
+            >
+              Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
+            </Link>
+          </div>
+          <Carousel className="w-full">
             <CarouselContent>
-        <CarouselItem>
+              {displayDocument.map((document, index) => (
-          <div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/3 gap-3">
+                <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
-            {displayDocument?.map((document: any) => (
+                  <div className="p-2">
+                    <Card className=" shadow-md rounded-lg overflow-hidden">
                       <Link
                         href={`/shared/curated-content/giat-routine/document/detail/${document.id}`}
                         key={document?.id}
@@ -88,9 +82,12 @@ const TeksSliderPage = () => {
 
                         <div className="flex flex-col flex-1">
                           <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                    {formatDateToIndonesian(new Date(document?.createdAt))}{" "}
+                            {formatDateToIndonesian(
+                              new Date(document?.createdAt)
+                            )}{" "}
                             {document?.timezone ? document?.timezone : "WIB"} |{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" /> 518
+                            <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                            518
                           </div>
                           <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
                             {document?.title}
@@ -111,13 +108,17 @@ const TeksSliderPage = () => {
                           </div>
                         </div>
                       </Link>
-            ))}
+                    </Card>
                   </div>
                 </CarouselItem>
+              ))}
             </CarouselContent>
             <CarouselPrevious />
             <CarouselNext />
           </Carousel>
+        </div>
+      )}
+    </div>
   );
 };
 

app/[locale]/(protected)/shared/curated-content/giat-routine/image/all/page.tsx

@@ -52,9 +52,7 @@ const ImageAllPage = () => {
                     </div>
                   </div>
                   <div className="ml-5 pb-3">
-                    <div className="flex justify-between items-center mx-3">
+                    <div className="flex justify-between items-center mx-3"></div>
-                      <Label className="text-base">Image</Label>
-                    </div>
                     <div className="px-5 my-5">
                       <ImageSliderPage />
                     </div>

app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx

@@ -540,13 +540,12 @@ export default function DetailImage() {
                             {/* Mabes Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "mabes"} // Automatically checks if placement matches
+                                checked={data.placements === "mabes"}
-                                disabled // To reflect read-only behavior
+                                disabled
                               />
                               <span>Nasional</span>
                             </label>
 
-                            {/* Polda Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
                                 checked={data.placements === "polda"}
@@ -555,7 +554,6 @@ export default function DetailImage() {
                               <span>Wilayah</span>
                             </label>
 
-                            {/* Satker Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
                                 checked={data.placements === "satker"}
@@ -564,7 +562,6 @@ export default function DetailImage() {
                               <span>Satker</span>
                             </label>
 
-                            {/* International Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
                                 checked={data.placements === "international"}

app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx

@@ -10,111 +10,85 @@ import {
 } from "@/components/ui/carousel";
 import { listCuratedContent } from "@/service/curated-content/curated-content";
 
-import {
+import { formatDateToIndonesian } from "@/utils/globals";
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/utils/globals";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import {
+import { useRouter } from "next/navigation";
-  SortingState,
+import React, { useEffect, useState } from "react";
-  ColumnFiltersState,
+
-  VisibilityState,
+type ImageData = {
-  PaginationState,
+  id: string;
-} from "@tanstack/react-table";
+  title: string;
-import {
+  createdAt: string;
-  useParams,
+  timezone: string;
-  usePathname,
+  thumbnailLink: string;
-  useRouter,
+  clickCount: string;
-  useSearchParams,
+};
-} from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const ImageSliderPage = () => {
   const router = useRouter();
-  const searchParams = useSearchParams();
+  const [imageData, setImageData] = useState<ImageData[]>([]);
-  const [imageData, setImageData] = useState<any>();
-  const [displayImage, setDisplayImage] = useState<any[]>([]);
   const [page, setPage] = useState(1);
-  const [limit, setLimit] = React.useState(10);
+  const [limit] = useState(10);
-  const [search, setSearch] = React.useState("");
 
   useEffect(() => {
     fetchData();
-  }, [page, limit, search]);
+  }, [page]);
-
-  // useEffect(() => {
-  //   if (imageData?.length > 0) {
-  //     shuffleAndSetVideos();
-  //     const interval = setInterval(shuffleAndSetVideos, 5000);
-  //     return () => clearInterval(interval); // Cleanup interval on unmount
-  //   }
-  // }, [imageData]);
 
   const fetchData = async () => {
-    const response = await listCuratedContent(search, limit, page - 1, 1, "1");
+    const response = await listCuratedContent("", limit, page - 1, 1, "1");
-    console.log(response);
+    const data = response?.data?.data?.content || [];
-
+    setImageData(data);
-    const data = response?.data?.data;
-    const contentData = data?.content;
-    setImageData(contentData);
   };
 
-  // const shuffleAndSetVideos = () => {
-  //   const shuffled = shuffleArray([...imageData]);
-  //   setDisplayImage(shuffled.slice(0, 3));
-  // };
-
-  // const shuffleArray = (array: any[]) => {
-  //   for (let i = array.length - 1; i > 0; i--) {
-  //     const j = Math.floor(Math.random() * (i + 1));
-  //     [array[i], array[j]] = [array[j], array[i]];
-  //   }
-  //   return array;
-  // };
   return (
-    <Carousel className="w-full pr-3">
+    <div className="w-full px-2">
-      <CarouselContent>
+      {imageData.length > 0 && (
-        {Array.from({ length: 5 }).map((_, index) => (
+        <div>
-          <CarouselItem key={index}>
+          <div className="flex justify-between items-center mb-2">
-            <div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/2 gap-3">
+            <h2 className="text-xl font-semibold">Foto</h2>
-              {imageData?.map((image: any) => (
-                <Card
-                  key={image?.id}
-                  className="hover:sc ale-110 transition-transform duration-300"
-                >
             <Link
-                    href={`/shared/curated-content//giat-routine/image/detail/${image.id}`}
+              href={"/shared/curated-content/giat-routine/image/all"}
+              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
             >
-                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
+              Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
+            </Link>
+          </div>
+          <Carousel className="w-full">
+            <CarouselContent>
+              {imageData.map((image, index) => (
+                <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
+                  <div className="p-2">
+                    <Card className="shadow-md rounded-lg overflow-hidden">
+                      <Link
+                        href={`/shared/curated-content/giat-routine/image/detail/${image.id}`}
+                      >
+                        <CardContent className="p-0">
                           <img
                             src={image?.thumbnailLink}
-                        className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
+                            alt={image?.title}
+                            className="w-full h-56 object-cover rounded-t-lg"
                           />
-                      <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                          <div className="p-3">
-                        {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
+                            <p className="text-xs text-gray-500">
-                        {image?.timezone ? image?.timezone : "WIB"}|{" "}
+                              {formatDateToIndonesian(
-                        <Icon icon="formkit:eye" width="15" height="15" />
+                                new Date(image?.createdAt)
-                        {image?.clickCount}{" "}
+                              )}{" "}
-                        <svg
+                              {image?.timezone || "WIB"} |
-                          xmlns="http://www.w3.org/2000/svg"
+                              <Icon
-                          width="1em"
+                                icon="formkit:eye"
-                          height="1em"
+                                width="15"
-                          viewBox="0 0 20 20"
+                                height="15"
-                        >
+                                className="inline ml-1"
-                          <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>{" "}
+                              {image?.clickCount}
-                      </div>
+                            </p>
-                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                            <h3 className="font-semibold text-sm truncate">
                               {image?.title}
+                            </h3>
                           </div>
                         </CardContent>
                       </Link>
                     </Card>
-              ))}
                   </div>
                 </CarouselItem>
               ))}
@@ -122,11 +96,9 @@ const ImageSliderPage = () => {
             <CarouselPrevious />
             <CarouselNext />
           </Carousel>
-    // <div className="mx-3 px-5">
+        </div>
-    //   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      )}
-
+    </div>
-    //   </div>
-    // </div>
   );
 };
 

app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx

@@ -8,6 +8,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
+import { Label } from "@/components/ui/label";
 import { listCuratedContent } from "@/service/curated-content/curated-content";
 import { getListContent } from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
@@ -15,9 +16,18 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import image from "next/image";
 import React, { useEffect, useState } from "react";
 
+type VideoData = {
+  id: string;
+  title: string;
+  createdAt: string;
+  timezone: string;
+  thumbnailLink: string;
+  clickCount: string;
+};
+
 const VideoSliderPage = () => {
   const [allVideoData, setAllVideoData] = useState<any[]>([]);
-  const [displayVideos, setDisplayVideos] = useState<any[]>([]);
+  const [videoData, setVideoData] = useState<VideoData[]>([]);
   const [page, setPage] = useState(1);
   const [limit, setLimit] = React.useState(10);
   const [search, setSearch] = React.useState("");
@@ -26,79 +36,64 @@ const VideoSliderPage = () => {
     fetchData();
   }, [page, limit, search]);
 
-  // useEffect(() => {
-  //   if (allVideoData?.length > 0) {
-  //     shuffleAndSetVideos();
-  //     const interval = setInterval(shuffleAndSetVideos, 5000);
-  //     return () => clearInterval(interval); // Cleanup interval on unmount
-  //   }
-  // }, [allVideoData]);
-
   const fetchData = async () => {
     const response = await listCuratedContent(search, limit, page - 1, 2, "1");
     console.log(response);
 
     const data = response?.data?.data;
     const contentData = data?.content;
-    setAllVideoData(contentData);
+    setVideoData(contentData);
   };
 
-  // const shuffleAndSetVideos = () => {
-  //   const shuffled = shuffleArray([...allVideoData]);
-  //   setDisplayVideos(shuffled.slice(0, 3));
-  // };
-
-  // const shuffleArray = (array: any[]) => {
-  //   for (let i = array.length - 1; i > 0; i--) {
-  //     const j = Math.floor(Math.random() * (i + 1));
-  //     [array[i], array[j]] = [array[j], array[i]];
-  //   }
-  //   return array;
-  // };
-
   return (
-    <Carousel className="w-full pr-3">
+    <div className="w-full px-2">
-      <CarouselContent>
+      {videoData.length > 0 && (
-        {Array.from({ length: 5 }).map((_, index) => (
+        <div>
-          <CarouselItem key={index}>
+          <div className="flex justify-between items-center mb-2">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <h2 className="text-xl font-semibold">Video</h2>
-              {allVideoData.map((video: any) => (
+            <Link
-                <Card
+              href={"/shared/curated-content/giat-routine/video/all"}
-                  key={video?.id}
+              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
-                  className="hover:scale-110 transition-transform duration-300"
             >
+              Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
+            </Link>
+          </div>
+          <Carousel className="w-full">
+            <CarouselContent>
+              {videoData.map((video, index) => (
+                <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
+                  <div className="p-2">
+                    <Card className="shadow-md rounded-lg overflow-hidden">
                       <Link
                         href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
                       >
-                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
+                        <CardContent className="p-0">
                           <img
                             src={video?.thumbnailLink}
-                        className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
+                            alt={video?.title}
+                            className="w-full h-56 object-cover rounded-t-lg"
                           />
-                      <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                          <div className="p-3">
-                        {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
+                            <p className="text-xs text-gray-500">
+                              {formatDateToIndonesian(
+                                new Date(video?.createdAt)
+                              )}{" "}
                               {video?.timezone || "WIB"} |
-                        <Icon icon="formkit:eye" width="15" height="15" />
+                              <Icon
-                        {video?.clickCount}
+                                icon="formkit:eye"
-                        <svg
+                                width="15"
-                          xmlns="http://www.w3.org/2000/svg"
+                                height="15"
-                          width="1em"
+                                className="inline ml-1"
-                          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>
+                              {video?.clickCount}
-                      </div>
+                            </p>
-                      <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                            <h3 className="font-semibold text-sm truncate">
                               {video?.title}
+                            </h3>
                           </div>
                         </CardContent>
                       </Link>
                     </Card>
-              ))}
                   </div>
                 </CarouselItem>
               ))}
@@ -106,6 +101,9 @@ const VideoSliderPage = () => {
             <CarouselPrevious />
             <CarouselNext />
           </Carousel>
+        </div>
+      )}
+    </div>
   );
 };
 

app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx

@@ -523,39 +523,39 @@ export default function DetailImage() {
                           key={data.id}
                           className="flex items-center gap-3 mt-2"
                         >
-                          {/* <img
-                            className="object-cover w-20 h-20"
-                            src={data.thumbnailUrl} // Assuming `thumbnailUrl` is the property that contains the URL for the thumbnail image
-                            alt={`Thumbnail ${index}`}
-                          /> */}
                           <img
                             className="object-cover w-20 h-20 lg:w-32 lg:h-32"
                             src={"/assets/video-icon.webp"}
                             alt={` ${data.id}`}
                           />
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
-                            {/* Mabes Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "mabes"} // Automatically checks if placement matches
+                                checked={data.placements === "mabes"}
-                                disabled // To reflect read-only behavior
+                                disabled
                               />
                               <span>Nasional</span>
                             </label>
 
-                            {/* Polda Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "polda"} // Automatically checks if placement matches
+                                checked={data.placements === "polda"}
                                 disabled
                               />
                               <span>Wilayah</span>
                             </label>
 
-                            {/* International Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
                               <Checkbox
-                                checked={data.placements === "international"} // Automatically checks if placement matches
+                                checked={data.placements === "satker"}
+                                disabled
+                              />
+                              <span>Satker</span>
+                            </label>
+
+                            <label className=" cursor-pointer flex items-center gap-2">
+                              <Checkbox
+                                checked={data.placements === "international"}
                                 disabled
                               />
                               <span>International</span>

app/[locale]/(protected)/shared/curated-content/page.tsx

@@ -73,80 +73,15 @@ const CuratedContentPage = () => {
                     </div>
                   </div>
                   <div className="ml-5 pb-3">
-                    <div className="flex justify-between items-center mx-3">
-                      <Label className="text-base">Audio Visual</Label>
-
-                      <div className="flex items-center">
-                        <Label>
-                          {" "}
-                          <Link
-                            href={
-                              "/shared/curated-content/giat-routine/video/all"
-                            }
-                          >
-                            Lihat Semua
-                          </Link>
-                        </Label>
-                        <ArrowRight size={18} className="text-slate-600" />
-                      </div>
-                    </div>
                     <div className="px-5 my-5">
                       <VideoSliderPage />
                     </div>
-                    <div className="flex justify-between items-center mx-3">
-                      <Label className="text-base">Audio</Label>
-                      <div className="flex items-center">
-                        <Label>
-                          {" "}
-                          <Link
-                            href={
-                              "/shared/curated-content/giat-routine/audio/all"
-                            }
-                          >
-                            Lihat Semua
-                          </Link>
-                        </Label>
-                        <ArrowRight size={18} className="text-slate-600" />
-                      </div>
-                    </div>
                     <div className="px-5 my-5">
                       <AudioSliderPage />
                     </div>
-                    <div className="flex justify-between items-center mx-3">
-                      <Label className="text-base">Foto</Label>
-                      <div className="flex items-center">
-                        <Label>
-                          {" "}
-                          <Link
-                            href={
-                              "/shared/curated-content/giat-routine/image/all"
-                            }
-                          >
-                            Lihat Semua
-                          </Link>
-                        </Label>
-                        <ArrowRight size={18} className="text-slate-600" />
-                      </div>
-                    </div>
                     <div className="px-5 my-5">
                       <ImageSliderPage />
                     </div>
-                    <div className="flex justify-between items-center mx-3">
-                      <Label className="text-base">Teks</Label>
-                      <div className="flex items-center">
-                        <Label>
-                          {" "}
-                          <Link
-                            href={
-                              "/shared/curated-content/giat-routine/document/all"
-                            }
-                          >
-                            Lihat Semua
-                          </Link>
-                        </Label>
-                        <ArrowRight size={18} className="text-slate-600" />
-                      </div>
-                    </div>
                     <div className="px-5 my-5">
                       <TeksSliderPage />
                     </div>