update broadcast

2025-07-28 14:05:59 +08:00 · 2025-07-28 14:05:59 +08:00 · f5477357e6
parent 4f20e4be57
commit f5477357e6
6 changed files with 455 additions and 320 deletions
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx
@ -1,4 +1,4 @@
-'use client'
+"use client";

 import "react-datepicker/dist/react-datepicker.css";
 import { Icon } from "@iconify/react";
@ -35,7 +35,7 @@ import { Button } from "@/components/ui/button";
 import TablePagination from "@/components/table/table-pagination";
 import {
  getMediaBlastCampaignById,
-  getMediaBlastBroadcastList 
+  getMediaBlastBroadcastList,
 } from "@/service/broadcast/broadcast";

 // Types
@ -69,19 +69,27 @@ interface PageProps {
  };
 }

-export default function BroadcastCampaignDetail({ params, searchParams }: PageProps) {
+export default function BroadcastCampaignDetail({
+  params,
+  searchParams,
+}: PageProps) {
  const router = useRouter();
  const pathname = usePathname();
  const { id, locale } = params;
  const [getData, setGetData] = useState<CampaignData[]>([]);
  const [totalPage, setTotalPage] = useState<number>(0);
  const [totalData, setTotalData] = useState<number>(0);
-    const [activeTab, setActiveTab] = useState<"sent" | "schedule" | "account-list">("sent");
+  const [activeTab, setActiveTab] = useState<
+    "sent" | "schedule" | "account-list"
+  >("sent");
  const { page, size } = searchParams;

  const [calenderState, setCalenderState] = useState<boolean>(false);
  const [typeFilter, setTypeFilter] = useState<string>("email");
-    const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);
+  const [dateRange, setDateRange] = useState<[Date, Date]>([
+    new Date(),
+    new Date(),
+  ]);
  const [startDate, endDate] = dateRange;

  const [startDateString, setStartDateString] = useState<string | undefined>();
@ -107,7 +115,7 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr

  const setCurrentPage = (pageNumber: number) => {
    const params = new URLSearchParams(searchParams);
-        params.set('page', pageNumber.toString());
+    params.set("page", pageNumber.toString());
    router.push(`${pathname}?${params.toString()}`);
  };

@ -138,7 +146,14 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr

  useEffect(() => {
    getListPaginationData();
-    }, [currentPage, pageSize, activeTab, endDateString, startDateString, typeFilter]);
+  }, [
+    currentPage,
+    pageSize,
+    activeTab,
+    endDateString,
+    startDateString,
+    typeFilter,
+  ]);

  function setupData(rawData: PaginatedResponse) {
    console.log("raw", rawData);
@ -167,8 +182,13 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
      accessorKey: "mediaBlastCampaign.title",
      header: "Campaign",
      cell: ({ row }) => (
-                <Link href={`/${locale}/admin/broadcast/campaign-list/detail/${row.original.mediaBlastCampaignId}`} className="text-dark">
-                    <span className="font-weight-bold">{row.original.mediaBlastCampaign?.title}</span>
+        <Link
+          href={`/${locale}/admin/broadcast/campaign-list/detail/${row.original.mediaBlastCampaignId}`}
+          className="text-dark"
+        >
+          <span className="font-weight-bold">
+            {row.original.mediaBlastCampaign?.title}
+          </span>
        </Link>
      ),
    },
@ -176,7 +196,10 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
      accessorKey: "subject",
      header: "Judul",
      cell: ({ row }) => (
-                <Link href={`/${locale}/admin/broadcast/content/detail/${row.original.id}`} className="text-dark">
+        <Link
+          href={`/${locale}/admin/broadcast/content/detail/${row.original.id}`}
+          className="text-dark"
+        >
          <span className="font-weight-bold">{row.getValue("subject")}</span>
        </Link>
      ),
@ -185,29 +208,23 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
      accessorKey: "type",
      header: "Tipe",
      cell: ({ row }) => (
-                <div className="text-right text-black">
-                    {row.getValue("type")}
-                </div>
-            )
+        <div className="text-right text-black">{row.getValue("type")}</div>
+      ),
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
-                <div className="text-right text-black">
-                    {row.getValue("status")}
-                </div>
-            )
+        <div className="text-right text-black">{row.getValue("status")}</div>
+      ),
    },
    {
      accessorKey: "sendDate",
      header: "Tanggal & Waktu",
      cell: ({ row }) => (
-                <div className="text-black">
-                    {row.getValue("sendDate")}
-                </div>
-            )
-        }
+        <div className="text-black">{row.getValue("sendDate")}</div>
+      ),
+    },
  ];

  const table = useReactTable({
@ -238,7 +255,7 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
        setEndDateString(getOnlyDate(endDate));
      }
    }
-        console.log('date range', dateRange);
+    console.log("date range", dateRange);
    initState();
  }, [calenderState, startDate, endDate]);

@ -247,7 +264,7 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
  };

  return (
-        <div className="bg-white container-fluid rounded rounded-xl">
+    <div className="bg-white container-fluid rounded ">
      <div className="mt-1 p-4">
        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-4">
          <Button
@ -298,7 +315,7 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
                      ? "bg-black text-white "
                      : "bg-white text-black "
                  }`}
-                                    size='sm'
+                  size="sm"
                >
                  Email Blast
                </Button>
@ -309,7 +326,7 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
                      ? "bg-black text-white "
                      : "bg-white text-black "
                  }`}
-                                    size='sm'
+                  size="sm"
                >
                  WhatsApp Blast
                </Button>
@ -359,14 +376,20 @@ export default function BroadcastCampaignDetail({ params, searchParams }: PagePr
                      >
                        {row.getVisibleCells().map((cell) => (
                          <TableCell key={cell.id}>
-                                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
                          </TableCell>
                        ))}
                      </TableRow>
                    ))
                  ) : (
                    <TableRow>
-                                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
                        No results.
                      </TableCell>
                    </TableRow>
--- a/app/[locale]/(protected)/admin/broadcast/content/detail/[id]/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/content/detail/[id]/page.tsx
@ -0,0 +1,11 @@
+import DetailContentBlast from "@/components/form/broadcast/content-blast--detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function DetailEmailBlast() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <DetailContentBlast />
+    </div>
+  );
+}
--- a/components/form/broadcast/content-blast--detail-form.tsx
+++ b/components/form/broadcast/content-blast--detail-form.tsx
@ -0,0 +1,96 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { getMediaBlastBroadCast } from "@/service/broadcast/broadcast";
+import { loading, close } from "@/config/swal";
+
+interface BroadcastDetail {
+  id: number;
+  body: string;
+  subject: string;
+  sendTime: string;
+  thumbnail: string;
+  contentUrl: string;
+}
+
+export default function DetailContentBlast() {
+  const params = useParams();
+  const { id } = params as { id: string };
+
+  const [detail, setDetail] = useState<BroadcastDetail | null>(null);
+  const [notFound, setNotFound] = useState(false);
+
+  useEffect(() => {
+    fetchDetailData();
+  }, [id]);
+
+  async function fetchDetailData() {
+    loading();
+    try {
+      const res = await getMediaBlastBroadCast(id);
+      close();
+
+      const detailData = res?.data?.data;
+
+      if (detailData && detailData.id === Number(id)) {
+        setDetail({
+          id: detailData.id,
+          body: detailData.body,
+          subject: detailData.subject,
+          sendTime: detailData.sendTime,
+          thumbnail: detailData.thumbnail,
+          contentUrl: detailData.contentUrl,
+        });
+      } else {
+        setNotFound(true);
+      }
+    } catch (error) {
+      close();
+      console.error("Failed to fetch broadcast detail:", error);
+      setNotFound(true);
+    }
+  }
+
+  if (notFound) {
+    return <div className="text-red-500 p-4">Data tidak ditemukan.</div>;
+  }
+
+  if (!detail) {
+    return <div className="text-gray-500 p-4">Loading preview...</div>;
+  }
+
+  return (
+    <div className="bg-white rounded-md w-full p-4">
+      <p className="text-xl font-semibold py-1">Preview</p>
+      <div className="bg-[#ddf7c8] p-4 rounded-xl mx-auto space-y-4">
+        <div className="flex gap-4">
+          <Image
+            src={detail.thumbnail}
+            alt="Media Thumbnail"
+            width={250}
+            height={200}
+            className="rounded-md object-cover"
+          />
+        </div>
+
+        <div className="text-sm text-black font-bold">{detail.subject}</div>
+        <p>
+          Selengkapnya silakan cek di sini:{" "}
+          <a
+            href={detail.contentUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 underline"
+          >
+            {detail.contentUrl}
+          </a>
+        </p>
+        <div className="text-right text-xs text-gray-500">
+          {detail.sendTime}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/service/broadcast/broadcast.ts
+++ b/service/broadcast/broadcast.ts
@ -112,6 +112,11 @@ export async function getMediaBlastBroadcastList(
  return httpGetInterceptor(url);
 }

+export async function getMediaBlastBroadCast(id: string) {
+  const url = `media/blast/broadcast?id=${id}`;
+  return httpGetInterceptor(url);
+}
+
 export async function listDataPopUp(
  page: number,
  limit: string,