update

components/details/details-content.tsx

@@ -7,6 +7,7 @@ import { close, loading } from "@/config/swal";
 import { useParams } from "next/navigation";
 import Author from "../landing-page/author";
 import { Link2, MailIcon } from "lucide-react";
+import { getAdvertise } from "@/service/advertisement";
 
 type TabKey = "trending" | "comments" | "latest";
 
@@ -27,6 +28,15 @@ type Article = {
   }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 interface CategoryType {
   id: number;
   label: string;
@@ -69,6 +79,36 @@ export default function DetailContent() {
     { id: "latest", label: "Latest" },
   ];
 
+  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(() => {
     fetchTabArticles();
   }, [activeTab]);
@@ -520,13 +560,32 @@ export default function DetailContent() {
         <div className="md:col-span-1 space-y-6">
           <div className="sticky top-0 space-y-6">
             <div className="bg-white shadow p-4 rounded-lg">
-              <Image
+              {bannerAd ? (
-                src={"/kolom.png"}
+                <a
-                alt="Iklan"
+                  href={bannerAd.redirectLink}
-                width={345}
+                  target="_blank"
-                height={345}
+                  rel="noopener noreferrer"
-                className="rounded"
+                  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-contain w-full h-full"
+                    />
+                  </div>
+                </a>
+              ) : (
+                <Image
+                  src="/kolom.png"
+                  alt="Berita Utama"
+                  width={1200}
+                  height={188}
+                  className="object-cover w-full h-[188px]"
+                />
+              )}
               <button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
                 Learn More
               </button>

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/breaking-news.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
 import Link from "next/link";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -23,10 +24,47 @@ type Article = {
   }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function BreakingNews() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [popular, setPopular] = useState<Article[]>([]);
+  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();
     fetchPopular();
@@ -204,13 +242,32 @@ export default function BreakingNews() {
 
         {/* Advert */}
         <div className="mt-6">
-          <Image
+          {bannerAd ? (
-            src="/adversment.png"
+            <a
-            alt="Advertisement"
+              href={bannerAd.redirectLink}
-            width={300}
+              target="_blank"
-            height={250}
+              rel="noopener noreferrer"
-            className="mx-auto"
+              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-contain 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>
     </section>

components/landing-page/headers.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
 import Link from "next/link";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -16,9 +17,48 @@ type Article = {
   categories: { title: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function HeaderNews() {
   const [articles, setArticles] = useState<Article[]>([]);
 
+  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(() => {
     fetchArticles();
   }, []);
@@ -168,13 +208,33 @@ export default function HeaderNews() {
       </div>
 
       {/* Banner bawah */}
-      <div className="w-full relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
+      <div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
-        <Image
+        {bannerAd ? (
-          src={"/image-kolom.png"}
+          <a
-          alt="Kolom PPS"
+            href={bannerAd.redirectLink}
-          fill
+            target="_blank"
-          className="max-w-7xl mx-auto object-cover"
+            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}
+                height={350}
+                className="object-contain w-full h-full"
+              />
+            </div>
+          </a>
+        ) : (
+          <Image
+            src="/image-kolom.png"
+            alt="Berita Utama"
+            width={1200}
+            height={188}
+            className="object-contain w-full h-[188px]"
+          />
+        )}
       </div>
     </div>
   );

components/landing-page/story.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
 import Link from "next/link";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -15,9 +16,46 @@ type Article = {
   categories: { title: string }[];
 };
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function Story() {
   const [articles, setArticles] = useState<Article[]>([]);
+  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(() => {
     fetchArticles();
   }, []);
@@ -75,13 +113,33 @@ export default function Story() {
             </div>
           ))}
         </div>
-        <div className="w-full relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
+        <div className="relative mt-10 mb-2 flex justify-center mx-8 border my-8 h-[350px] overflow-hidden bg-white">
-          <Image
+          {bannerAd ? (
-            src={"/image-kolom.png"}
+            <a
-            alt="Kolom PPS"
+              href={bannerAd.redirectLink}
-            fill
+              target="_blank"
-            className="max-w-7xl mx-auto object-cover"
+              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-contain w-full h-full"
+                />
+              </div>
+            </a>
+          ) : (
+            <Image
+              src="/image-kolom.png"
+              alt="Berita Utama"
+              width={1200}
+              height={188}
+              className="object-contain w-full h-[188px]"
+            />
+          )}
         </div>
       </div>
     </div>