update

components/details/details-content.tsx

@@ -426,14 +426,14 @@ export default function DetailContent() {
               </div>
             </div>
           </div>
-          <div className="relative  mb-2 h-[120px] overflow-hidden flex items-center border my-8">
+          {/* <div className="relative  mb-2 h-[120px] overflow-hidden flex items-center border my-8">
             <Image
               src={"/image-kolom.png"}
               alt="Berita Utama"
               fill
               className="object-contain"
             />
-          </div>
+          </div> */}
           <div className="mt-10">
             <h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
             <p className="text-gray-600 mb-4 text-sm">

components/form/article/create-article-form.tsx

@@ -9,7 +9,7 @@ import { CloudUploadIcon, TimesIcon } from "@/components/icons";
 import Image from "next/image";
 import ReactSelect from "react-select";
 import makeAnimated from "react-select/animated";
-import { htmlToString } from "@/utils/global";
+import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
 import { close, error, loading, successToast } from "@/config/swal";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -44,6 +44,13 @@ import GenerateSingleArticleForm from "./generate-ai-single-form";
 import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
 import { Textarea } from "@/components/ui/textarea";
 import { Badge } from "@/components/ui/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import DatePicker from "react-datepicker";
 
 const CustomEditor = dynamic(
   () => {
@@ -121,8 +128,8 @@ export default function CreateArticleForm() {
     "publish"
   );
   const [isScheduled, setIsScheduled] = useState(false);
-
+  const [startDateValue, setStartDateValue] = useState<Date | undefined>();
-  const [startDateValue, setStartDateValue] = useState<any>(null);
+  const [startTimeValue, setStartTimeValue] = useState<string>("");
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
@@ -332,12 +339,34 @@ export default function CreateArticleForm() {
       }
     }
 
-    if (status === "scheduled") {
+    if (status === "scheduled" && startDateValue) {
+      // ambil waktu, default 00:00 jika belum diisi
+      const [hours, minutes] = startTimeValue
+        ? startTimeValue.split(":").map(Number)
+        : [0, 0];
+
+      // gabungkan tanggal + waktu
+      const combinedDate = new Date(startDateValue);
+      combinedDate.setHours(hours, minutes, 0, 0);
+
+      // format: 2025-10-08 14:30:00
+      const formattedDateTime = `${combinedDate.getFullYear()}-${String(
+        combinedDate.getMonth() + 1
+      ).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
+        2,
+        "0"
+      )} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
+        combinedDate.getMinutes()
+      ).padStart(2, "0")}:00`;
+
       const request = {
         id: articleId,
-        date: `${startDateValue?.year}-${startDateValue?.month}-${startDateValue?.day}`,
+        date: formattedDateTime,
       };
+
+      console.log("📤 Sending schedule request:", request);
       const res = await createArticleSchedule(request);
+      console.log("✅ Schedule response:", res);
     }
 
     close();
@@ -812,32 +841,49 @@ export default function CreateArticleForm() {
               </label>
             </div>
 
-            {/* {isScheduled && (
+            {isScheduled && (
-              <div className="flex flex-col lg:flex-row gap-3">
+              <div className="flex flex-col lg:flex-row gap-3 mt-2">
-                <div className="w-full lg:w-[140px] flex flex-col gal-2 ">
+                {/* Pilih tanggal */}
+                <div className="w-full lg:w-[140px] flex flex-col gap-2">
                   <p className="text-sm">Tanggal</p>
                   <Popover>
                     <PopoverTrigger>
                       <Button
                         type="button"
-                        className="w-full !h-[30px] lg:h-[40px] border-1 rounded-lg text-black"
+                        className="w-full !h-[37px] lg:h-[37px] border-1 rounded-lg text-black"
                         variant="outline"
                       >
                         {startDateValue
-                          ? convertDateFormatNoTime(startDateValue)
+                          ? startDateValue.toISOString().split("T")[0]
                           : "-"}
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent className="bg-transparent p-0">
-                      <Calendar
+                      <DatePicker
                         selected={startDateValue}
-                        onSelect={setStartDateValue}
+                        onChange={(date) =>
+                          setStartDateValue(date ?? undefined)
+                        }
+                        dateFormat="yyyy-MM-dd"
+                        className="w-full border rounded-lg px-2 py-1 text-black cursor-pointer h-[150px]"
+                        placeholderText="Pilih tanggal"
                       />
                     </PopoverContent>
                   </Popover>
                 </div>
+
+                {/* Pilih waktu */}
+                <div className="w-full lg:w-[140px] flex flex-col gap-2">
+                  <p className="text-sm">Waktu</p>
+                  <input
+                    type="time"
+                    value={startTimeValue}
+                    onChange={(e) => setStartTimeValue(e.target.value)}
+                    className="w-full border rounded-lg px-2 py-[6px] text-black"
+                  />
                 </div>
-            )} */}
+              </div>
+            )}
           </div>
         </div>
 

components/landing-page/headers-guard.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { getListArticle } from "@/service/article";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -17,6 +18,15 @@ type Article = {
   files: { fileUrl: string; file_alt: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function HeaderGuard() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
@@ -29,6 +39,36 @@ export default function HeaderGuard() {
     endDate: null,
   });
 
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [1];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "jumbotron");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
+
   useEffect(() => {
     initState();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -160,13 +200,33 @@ export default function HeaderGuard() {
               </div>
             ))}
             <div className="relative  max-w-full h-[300px] overflow-hidden flex items-center mx-auto my-6 rounded">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
                     <Image
-                src="/earphone.png"
+                      src={bannerAd.contentFileUrl}
-                alt="Berita Utama"
+                      alt={bannerAd.title || "Iklan Banner"}
-                fill
+                      width={1200} // ukuran dasar untuk responsive
-                className="object-contain rounded"
+                      height={350}
+                      className="object-cover w-full h-full"
                     />
                   </div>
+                </a>
+              ) : (
+                <Image
+                  src="/kolom.png"
+                  alt="Berita Utama"
+                  width={1200}
+                  height={188}
+                  className="object-contain w-full h-[188px]"
+                />
+              )}
+            </div>
             <div className="border rounded-md p-4 space-y-4">
               <h4 className="text-lg font-semibold">
                 Subscribe us to get the latest news!

components/landing-page/headers-latest.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { getListArticle } from "@/service/article";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -17,6 +18,15 @@ type Article = {
   files: { fileUrl: string; file_alt: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function HeaderLatest() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
@@ -29,6 +39,36 @@ export default function HeaderLatest() {
     endDate: null,
   });
 
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [1];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "jumbotron");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
+
   useEffect(() => {
     initState();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -161,13 +201,33 @@ export default function HeaderLatest() {
               </div>
             ))}
             <div className="relative  max-w-full h-[300px] overflow-hidden flex items-center mx-auto my-6 rounded">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
                     <Image
-                src="/earphone.png"
+                      src={bannerAd.contentFileUrl}
-                alt="Berita Utama"
+                      alt={bannerAd.title || "Iklan Banner"}
-                fill
+                      width={1200} // ukuran dasar untuk responsive
-                className="object-contain rounded"
+                      height={350}
+                      className="object-cover w-full h-full"
                     />
                   </div>
+                </a>
+              ) : (
+                <Image
+                  src="/kolom.png"
+                  alt="Berita Utama"
+                  width={1200}
+                  height={188}
+                  className="object-contain w-full h-[188px]"
+                />
+              )}
+            </div>
             <div className="border rounded-md p-4 space-y-4">
               <h4 className="text-lg font-semibold">
                 Subscribe us to get the latest news!

components/landing-page/headers-opinion.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { getListArticle } from "@/service/article";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -17,6 +18,15 @@ type Article = {
   files: { fileUrl: string; file_alt: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function HeaderOpinion() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
@@ -29,6 +39,36 @@ export default function HeaderOpinion() {
     endDate: null,
   });
 
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [1];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "jumbotron");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
+
   useEffect(() => {
     initState();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -160,13 +200,33 @@ export default function HeaderOpinion() {
               </div>
             ))}
             <div className="relative  max-w-full h-[300px] overflow-hidden flex items-center mx-auto my-6 rounded">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
                     <Image
-                src="/earphone.png"
+                      src={bannerAd.contentFileUrl}
-                alt="Berita Utama"
+                      alt={bannerAd.title || "Iklan Banner"}
-                fill
+                      width={1200} // ukuran dasar untuk responsive
-                className="object-contain rounded"
+                      height={350}
+                      className="object-cover w-full h-full"
                     />
                   </div>
+                </a>
+              ) : (
+                <Image
+                  src="/kolom.png"
+                  alt="Berita Utama"
+                  width={1200}
+                  height={188}
+                  className="object-contain w-full h-[188px]"
+                />
+              )}
+            </div>
             <div className="border rounded-md p-4 space-y-4">
               <h4 className="text-lg font-semibold">
                 Subscribe us to get the latest news!

components/landing-page/headers-peace.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { getListArticle } from "@/service/article";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -17,6 +18,15 @@ type Article = {
   files: { fileUrl: string; file_alt: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function HeaderPeace() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
@@ -29,6 +39,36 @@ export default function HeaderPeace() {
     endDate: null,
   });
 
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [1];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "jumbotron");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
+
   useEffect(() => {
     initState();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -160,13 +200,33 @@ export default function HeaderPeace() {
               </div>
             ))}
             <div className="relative  max-w-full h-[300px] overflow-hidden flex items-center mx-auto my-6 rounded">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
                     <Image
-                src="/earphone.png"
+                      src={bannerAd.contentFileUrl}
-                alt="Berita Utama"
+                      alt={bannerAd.title || "Iklan Banner"}
-                fill
+                      width={1200} // ukuran dasar untuk responsive
-                className="object-contain rounded"
+                      height={350}
+                      className="object-cover w-full h-full"
                     />
                   </div>
+                </a>
+              ) : (
+                <Image
+                  src="/kolom.png"
+                  alt="Berita Utama"
+                  width={1200}
+                  height={188}
+                  className="object-contain w-full h-[188px]"
+                />
+              )}
+            </div>
             <div className="border rounded-md p-4 space-y-4">
               <h4 className="text-lg font-semibold">
                 Subscribe us to get the latest news!

components/landing-page/headers-popular.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { getListArticle } from "@/service/article";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -17,6 +18,15 @@ type Article = {
   files: { fileUrl: string; file_alt: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function HeaderPopular() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
@@ -29,6 +39,36 @@ export default function HeaderPopular() {
     endDate: null,
   });
 
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [1];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "jumbotron");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
+
   useEffect(() => {
     initState();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -160,13 +200,33 @@ export default function HeaderPopular() {
               </div>
             ))}
             <div className="relative  max-w-full h-[300px] overflow-hidden flex items-center mx-auto my-6 rounded">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
                     <Image
-                src="/earphone.png"
+                      src={bannerAd.contentFileUrl}
-                alt="Berita Utama"
+                      alt={bannerAd.title || "Iklan Banner"}
-                fill
+                      width={1200} // ukuran dasar untuk responsive
-                className="object-contain rounded"
+                      height={350}
+                      className="object-cover w-full h-full"
                     />
                   </div>
+                </a>
+              ) : (
+                <Image
+                  src="/kolom.png"
+                  alt="Berita Utama"
+                  width={1200}
+                  height={188}
+                  className="object-contain w-full h-[188px]"
+                />
+              )}
+            </div>
             <div className="border rounded-md p-4 space-y-4">
               <h4 className="text-lg font-semibold">
                 Subscribe us to get the latest news!

components/landing-page/headers.tsx

@@ -12,6 +12,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  customCreatorName: string;
   thumbnailUrl: string;
   categories: {
     title: string;
@@ -87,7 +88,7 @@ export default function Beranda() {
                 {item.title}
               </h2>
               <p className="text-sm mt-1 flex items-center">
-                {item.createdByName}
+                {item.createdByName || item?.customCreatorName}
                 <span className="ml-2 w-2 h-[2px] bg-yellow-500 inline-block mr-3"></span>
                 {new Date(item.createdAt).toLocaleDateString("en-US", {
                   month: "long",

components/landing-page/lifestyle.tsx

@@ -7,6 +7,7 @@ import { getListArticle } from "@/service/article";
 import { CommentIcon } from "../icons/sidebar-icon";
 import { Button } from "../ui/button";
 import { MessageCircle } from "lucide-react";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -15,10 +16,20 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  customCreatorName: string;
   thumbnailUrl: string;
   categories: { title: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function Lifestyle() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
@@ -32,6 +43,36 @@ export default function Lifestyle() {
     endDate: null,
   });
 
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [1];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "jumbotron");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
+
   useEffect(() => {
     fetchArticles();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -84,7 +125,9 @@ export default function Lifestyle() {
                     {item.title}
                   </h3>
                   <div className="flex items-center gap-2 mt-2 text-sm text-gray-600">
-                    <span className="font-semibold">{item.createdByName}</span>
+                    <span className="font-semibold">
+                      {item.createdByName || item?.customCreatorName}
+                    </span>
                     <span>•</span>
                     <span>
                       {new Date(item.createdAt).toLocaleDateString("id-ID", {
@@ -139,12 +182,32 @@ export default function Lifestyle() {
             </div>
 
             <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
+                    <Image
+                      src={bannerAd.contentFileUrl}
+                      alt={bannerAd.title || "Iklan Banner"}
+                      width={1200} // ukuran dasar untuk responsive
+                      height={350}
+                      className="object-cover w-full h-full"
+                    />
+                  </div>
+                </a>
+              ) : (
                 <Image
                   src="/kolom.png"
                   alt="Berita Utama"
-                fill
+                  width={1200}
-                className="object-contain rounded"
+                  height={188}
+                  className="object-contain w-full h-[188px]"
                 />
+              )}
             </div>
           </div>
         </div>
@@ -273,7 +336,9 @@ export default function Lifestyle() {
                     {item.title}
                   </h3>
                   <div className="flex items-center gap-2 mt-2 text-xs text-gray-600 flex-wrap">
-                    <span className="font-semibold">{item.createdByName}</span>
+                    <span className="font-semibold">
+                      {item.createdByName || item?.customCreatorName}
+                    </span>
                     <span>-</span>
                     <span>
                       {new Date(item.createdAt).toLocaleDateString("id-ID", {
@@ -303,12 +368,32 @@ export default function Lifestyle() {
 
           <div className="space-y-8">
             <div className="relative w-full h-[200px] overflow-hidden flex items-center justify-center border rounded-lg">
+              {bannerAd ? (
+                <a
+                  href={bannerAd.redirectLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full"
+                >
+                  <div className="relative w-full h-[350px] flex justify-center">
+                    <Image
+                      src={bannerAd.contentFileUrl}
+                      alt={bannerAd.title || "Iklan Banner"}
+                      width={1200} // ukuran dasar untuk responsive
+                      height={350}
+                      className="object-cover w-full h-full"
+                    />
+                  </div>
+                </a>
+              ) : (
                 <Image
                   src="/kolom.png"
-                alt="Kolom Iklan"
+                  alt="Berita Utama"
-                fill
+                  width={1200}
-                className="object-contain rounded"
+                  height={188}
+                  className="object-contain w-full h-[188px]"
                 />
+              )}
             </div>
 
             <div>
@@ -382,7 +467,9 @@ export default function Lifestyle() {
                   {item.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-2 text-xs text-gray-600 flex-wrap">
-                  <span className="font-semibold">{item.createdByName}</span>
+                  <span className="font-semibold">
+                    {item.createdByName || item?.customCreatorName}
+                  </span>
                   <span>-</span>
                   <span>
                     {new Date(item.createdAt).toLocaleDateString("id-ID", {
@@ -400,14 +487,14 @@ export default function Lifestyle() {
             ))}
           </div>
 
-          <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
+          {/* <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
             <Image
               src="/image-kolom.png"
               alt="Berita Utama"
               fill
               className="object-cover"
             />
-          </div>
+          </div> */}
 
           {visibleCount < articles.length && (
             <div className="flex justify-center mt-10">
@@ -454,7 +541,7 @@ export default function Lifestyle() {
                     </p>
                     <div className="flex items-center gap-2 mt-3 text-sm text-gray-600">
                       <span className="font-semibold">
-                        {item.createdByName}
+                        {item.createdByName || item?.customCreatorName}
                       </span>
                       <span>-</span>
                       <span>
@@ -473,14 +560,14 @@ export default function Lifestyle() {
               ))}
             </div>
 
-            <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
+            {/* <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
               <Image
                 src="/image-kolom.png"
                 alt="Berita Utama"
                 fill
                 className="object-cover"
               />
-            </div>
+            </div> */}
 
             {visibleCount < articles.length && (
               <div className="flex justify-center mt-6">

components/landing-page/on-the-spot.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { getListArticle } from "@/service/article";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -12,6 +13,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  customCreatorName: string;
   thumbnailUrl: string;
   categories: {
     title: string;
@@ -22,6 +24,15 @@ type Article = {
   }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function OnTheSpot() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
@@ -33,6 +44,35 @@ export default function OnTheSpot() {
     startDate: null,
     endDate: null,
   });
+  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
+
+  useEffect(() => {
+    initStateAdver();
+  }, []);
+
+  async function initStateAdver() {
+    const req = {
+      limit: 100,
+      page: 1,
+      sort: "desc",
+      sortBy: "created_at",
+      isPublish: true,
+    };
+
+    try {
+      const res = await getAdvertise(req);
+      const data: Advertise[] = res?.data?.data || [];
+
+      // filter iklan dengan placement = "banner"
+      const banner = data.find((ad) => ad.placement === "banner");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
 
   useEffect(() => {
     initState();
@@ -93,7 +133,7 @@ export default function OnTheSpot() {
                   {item.title}
                 </h3>
                 <p className="text-sm text-gray-700 mt-1 flex items-center">
-                  {item.createdByName}
+                  {item.createdByName || item?.customCreatorName}
                   <span className="ml-2 w-2 h-[2px] bg-yellow-500 inline-block mr-3"></span>
                   {new Date(item.createdAt).toLocaleDateString("en-US", {
                     month: "long",
@@ -105,13 +145,33 @@ export default function OnTheSpot() {
             </Link>
           ))}
         </div>
-        <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
+        <div className="relative my-5 max-w-full h-[450px] overflow-hidden flex items-center mx-auto border">
+          {bannerAd ? (
+            <a
+              href={bannerAd.redirectLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block w-full"
+            >
+              <div className="relative w-full h-[450px] flex justify-center">
+                <Image
+                  src={bannerAd.contentFileUrl}
+                  alt={bannerAd.title || "Iklan Banner"}
+                  width={1200} // ukuran dasar untuk responsive
+                  height={450}
+                  className="object-cover w-full h-full"
+                />
+              </div>
+            </a>
+          ) : (
             <Image
               src="/image-kolom.png"
               alt="Berita Utama"
-            fill
+              width={1200}
-            className="object-cover"
+              height={188}
+              className="object-contain w-full h-[188px]"
             />
+          )}
         </div>
       </div>
     </section>