update

2025-10-12 20:45:30 +08:00 · 2025-10-12 20:45:30 +08:00 · a36f2297ea
parent 788c1e0071
commit a36f2297ea
6 changed files with 387 additions and 57 deletions
--- a/components/details/details-content.tsx
+++ b/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";

@ -33,6 +34,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;
@ -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]);
@ -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>
--- 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>

--- a/components/landing-page/breaking-news.tsx
+++ b/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;
@ -22,10 +23,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();
@ -199,13 +237,32 @@ export default function BreakingNews() {

        {/* Advert */}
        <div className="mt-6">
-          <Image
-            src="/adversment.png"
-            alt="Advertisement"
-            width={300}
-            height={250}
-            className="mx-auto"
-          />
+          {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>
      </div>
    </section>
--- a/components/landing-page/news.tsx
+++ b/components/landing-page/news.tsx
@ -13,6 +13,7 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { getListArticle } from "@/service/article";
 import Link from "next/link";
+import { getAdvertise } from "@/service/advertisement";

 type Article = {
  id: number;
@ -31,6 +32,15 @@ type Article = {
  }[];
 };

+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function News() {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
@ -43,6 +53,36 @@ export default function News() {
    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]);
@ -167,14 +207,14 @@ export default function News() {
          </div>

          {/* Banner */}
-          <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> */}
        </div>

        {/* Right Sidebar */}
@ -237,20 +277,32 @@ export default function News() {

          {/* Sidebar banners */}
          <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"
-            />
-          </div>
-          <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>
--- a/components/landing-page/opini.tsx
+++ b/components/landing-page/opini.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;
@ -22,12 +23,49 @@ type Article = {
  }[];
 };

+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function Opini() {
  const [opini, setOpini] = useState<Article[]>([]);
  const [jagaNegeri, setJagaNegeri] = useState<Article[]>([]);
  const [showDataOpini, setShowDataOpini] = useState("4");
  const [showData, setShowData] = useState("3");
+  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 === "banner");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
  useEffect(() => {
    fetchOpini();
    fetchJagaNegeri();
@ -197,13 +235,33 @@ export default function Opini() {
        </div>
      </div>

-      <div className="relative my-5 max-w-screen-xl h-[125px] overflow-hidden flex items-center mx-auto border">
-        <Image
-          src="/image-kolom.png"
-          alt="Berita Utama"
-          fill
-          className="object-cover"
-        />
+      <div className="relative my-5 max-w-screen-xl h-[400px] 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-[400px] flex justify-center">
+              <Image
+                src={bannerAd.contentFileUrl}
+                alt={bannerAd.title || "Iklan Banner"}
+                width={1200} // ukuran dasar untuk responsive
+                height={400}
+                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>
    </section>
  );
--- a/components/landing-page/popular-news.tsx
+++ b/components/landing-page/popular-news.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;
@ -22,10 +23,47 @@ type Article = {
  }[];
 };

+type Advertise = {
+  id: number;
+  title: string;
+  description: string;
+  placement: string;
+  contentFileUrl: string;
+  redirectLink: string;
+};
+
 export default function PopularNews() {
  const [popularNews, setPopularNews] = 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 === "banner");
+
+      if (banner) {
+        setBannerAd(banner);
+      }
+    } catch (err) {
+      console.error("Error fetching advertisement:", err);
+    }
+  }
  useEffect(() => {
    fetchPopularNews();
  }, []);
@ -107,13 +145,33 @@ export default function PopularNews() {
      </div>

      {/* Banner */}
-      <div className="relative mt-5 mb-14 max-w-screen-xl h-[125px] overflow-hidden flex items-center mx-auto border">
-        <Image
-          src="/image-kolom.png"
-          alt="Berita Utama"
-          fill
-          className="object-cover"
-        />
+      <div className="relative mt-5 mb-14 max-w-screen-xl h-[400px] 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-[400px] flex justify-center">
+              <Image
+                src={bannerAd.contentFileUrl}
+                alt={bannerAd.title || "Iklan Banner"}
+                width={1200} // ukuran dasar untuk responsive
+                height={400}
+                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>
    </section>
  );