From 41812a66962ea58c30ec7c90a83ef354db7793a7 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Sun, 12 Oct 2025 17:21:22 +0800
Subject: [PATCH] update

---
 app/page.tsx                                  |   9 +-
 components/details/details-content.tsx        |  73 ++++++-
 .../form/article/create-article-form.tsx      |  72 +++++--
 components/landing-page/headers.tsx           |  72 ++++++-
 components/landing-page/latest-news.tsx       |  70 +++++-
 components/landing-page/news.tsx              | 204 +++++++++++++-----
 6 files changed, 403 insertions(+), 97 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 0a6cbf8..245d994 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,14 +12,7 @@ export default function Home() {
       <div className="flex-1 bg-gray-300 mt-10">
         <Header />
         <BreakingNews />
-        <div className="max-w-7xl mx-auto px-4 relative  mb-2 h-[120px] overflow-hidden flex items-center border my-8">
-          <Image
-            src={"/image-kolom.png"}
-            alt="Berita Utama"
-            fill
-            className="w-full object-cover"
-          />
-        </div>
+
         <News />
       </div>
       <Footer />
diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index e5c9864..b070192 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -6,6 +6,7 @@ import { getArticleById, getListArticle } from "@/service/article";
 import { close, loading } from "@/config/swal";
 import { useParams } from "next/navigation";
 import { Link2, MailIcon } from "lucide-react";
+import { getAdvertise } from "@/service/advertisement";
 
 type TabKey = "trending" | "comments" | "latest";
 
@@ -32,6 +33,15 @@ interface CategoryType {
   value: number;
 }
 
+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function DetailContent() {
   const params = useParams();
   const id = params?.id;
@@ -68,6 +78,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]);
@@ -519,13 +559,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
-                src={"/kolom.png"}
-                alt="Iklan"
-                width={345}
-                height={345}
-                className="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"
+                  width={1200}
+                  height={188}
+                  className="object-contain w-full h-[188px]"
+                />
+              )}
               <button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
                 Learn More
               </button>
diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx
index 4ef5c90..a8fbe78 100644
--- a/components/form/article/create-article-form.tsx
+++ b/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<any>(null);
+  const [startDateValue, setStartDateValue] = useState<Date | undefined>();
+  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 && (
-              <div className="flex flex-col lg:flex-row gap-3">
-                <div className="w-full lg:w-[140px] flex flex-col gal-2 ">
+            {isScheduled && (
+              <div className="flex flex-col lg:flex-row gap-3 mt-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>
 
diff --git a/components/landing-page/headers.tsx b/components/landing-page/headers.tsx
index ee7eaf5..4e062a8 100644
--- a/components/landing-page/headers.tsx
+++ b/components/landing-page/headers.tsx
@@ -6,6 +6,7 @@ import { Calendar, Eye, MessageSquare } from "lucide-react";
 import { useEffect, useState } from "react";
 import { getListArticle } from "@/service/article";
 import Link from "next/link";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -19,10 +20,49 @@ 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 Header() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [showData, setShowData] = useState("5");
 
+  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();
   }, [showData]);
@@ -160,12 +200,32 @@ export default function Header() {
 
           {/* Kolom PPS */}
           <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
-            <Image
-              src="/kolom.png"
-              alt="Berita Utama"
-              fill
-              className="object-contain 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"
+                width={1200}
+                height={188}
+                className="object-contain w-full h-[188px]"
+              />
+            )}
           </div>
         </aside>
       </div>
diff --git a/components/landing-page/latest-news.tsx b/components/landing-page/latest-news.tsx
index e3bbe75..53d89d7 100644
--- a/components/landing-page/latest-news.tsx
+++ b/components/landing-page/latest-news.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import { getListArticle } from "@/service/article";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { getAdvertise } from "@/service/advertisement";
 
 type Article = {
   id: number;
@@ -17,12 +18,49 @@ 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 LatestNews() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [showData, setShowData] = useState("5");
   const pathname = usePathname();
   const currentSlug = pathname.split("/")[2] || "";
+  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();
   }, []);
@@ -108,12 +146,32 @@ export default function LatestNews() {
           </p>
           <h3 className="text-center text-md font-bold mb-4">ADVERTISEMENT</h3>
           <div className="relative w-full h-[300px] bg-gray-100">
-            <Image
-              src="/adversment.png"
-              alt="Advertisement"
-              fill
-              className="object-contain"
-            />
+            {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"
+                width={1200}
+                height={188}
+                className="object-contain w-full h-[188px]"
+              />
+            )}
           </div>
           <button className="mt-4 text-xs bg-black text-white px-4 py-2 hover:bg-gray-800">
             LEARN MORE
diff --git a/components/landing-page/news.tsx b/components/landing-page/news.tsx
index 455d41c..b623176 100644
--- a/components/landing-page/news.tsx
+++ b/components/landing-page/news.tsx
@@ -3,6 +3,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 dari API
 type Article = {
@@ -17,13 +18,50 @@ 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 News() {
   const [articlesByCategory, setArticlesByCategory] = useState<
     Record<string, Article[]>
   >({});
   const [loading, setLoading] = useState(true);
   const [visiblePosts, setVisiblePosts] = useState<Record<string, number>>({});
+  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();
   }, []);
@@ -67,64 +105,116 @@ export default function News() {
   }
 
   return (
-    <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
-      {loading && <p className="text-center">Memuat data...</p>}
-
-      {!loading &&
-        Object.keys(articlesByCategory).map((category) => {
-          const posts = articlesByCategory[category];
-          if (!posts?.length) return null;
-
-          const postsTop = posts.slice(0, 2); // 2 atas
-          const postsBottom = posts.slice(2); // sisanya
-
-          return (
-            <div key={category} className="border p-4 bg-white">
-              {/* Header kategori */}
-              <div className="bg-[#3677A8] text-white px-3 py-1 text-sm font-bold inline-block mb-4">
-                {category}
-              </div>
-
-              {/* Posts atas */}
-              {postsTop.map((post) => (
-                <PostItem key={post.id} post={post} />
-              ))}
-
-              {/* Banner Kolom PPS */}
-              <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
-                <Image
-                  src={"/image-kolom.png"}
-                  alt="Kolom PPS"
-                  fill
-                  className="w-full object-cover"
-                />
-              </div>
-
-              {/* Posts bawah (pakai visiblePosts[category]) */}
-              {postsBottom.slice(0, visiblePosts[category] || 2).map((post) => (
-                <PostItem key={post.id} post={post} />
-              ))}
-
-              {/* Tombol Load More */}
-              {(visiblePosts[category] || 2) < postsBottom.length && (
-                <div className="flex justify-center">
-                  <button
-                    onClick={() =>
-                      setVisiblePosts((prev) => ({
-                        ...prev,
-                        [category]: (prev[category] || 2) + 2,
-                      }))
-                    }
-                    className="bg-black text-white text-xs px-4 py-2 hover:bg-gray-800 mt-4"
-                  >
-                    LOAD MORE POSTS
-                  </button>
-                </div>
-              )}
+    <>
+      <div className="max-w-7xl mx-auto  relative  mb-2 h-[120px] overflow-hidden flex items-center border my-8">
+        {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>
-          );
-        })}
-    </div>
+          </a>
+        ) : (
+          <Image
+            src="/image-kolom.png"
+            alt="Berita Utama"
+            width={1200}
+            height={188}
+            className="object-contain w-full h-[188px]"
+          />
+        )}
+      </div>
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
+        {loading && <p className="text-center">Memuat data...</p>}
+
+        {!loading &&
+          Object.keys(articlesByCategory).map((category) => {
+            const posts = articlesByCategory[category];
+            if (!posts?.length) return null;
+
+            const postsTop = posts.slice(0, 2); // 2 atas
+            const postsBottom = posts.slice(2); // sisanya
+
+            return (
+              <div key={category} className="border p-4 bg-white">
+                {/* Header kategori */}
+                <div className="bg-[#3677A8] text-white px-3 py-1 text-sm font-bold inline-block mb-4">
+                  {category}
+                </div>
+
+                {/* Posts atas */}
+                {postsTop.map((post) => (
+                  <PostItem key={post.id} post={post} />
+                ))}
+
+                {/* Banner Kolom PPS */}
+                <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
+                  {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="/image-kolom.png"
+                      alt="Berita Utama"
+                      width={1200}
+                      height={188}
+                      className="object-contain w-full h-[188px]"
+                    />
+                  )}
+                </div>
+
+                {/* Posts bawah (pakai visiblePosts[category]) */}
+                {postsBottom
+                  .slice(0, visiblePosts[category] || 2)
+                  .map((post) => (
+                    <PostItem key={post.id} post={post} />
+                  ))}
+
+                {/* Tombol Load More */}
+                {(visiblePosts[category] || 2) < postsBottom.length && (
+                  <div className="flex justify-center">
+                    <button
+                      onClick={() =>
+                        setVisiblePosts((prev) => ({
+                          ...prev,
+                          [category]: (prev[category] || 2) + 2,
+                        }))
+                      }
+                      className="bg-black text-white text-xs px-4 py-2 hover:bg-gray-800 mt-4"
+                    >
+                      LOAD MORE POSTS
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </>
   );
 }