update broadcast

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">
+        <Link
-                    <span className="font-weight-bold">{row.original.mediaBlastCampaign?.title}</span>
+          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">
+        <div className="text-right text-black">{row.getValue("type")}</div>
-                    {row.getValue("type")}
+      ),
-                </div>
-            )
     },
     {
       accessorKey: "status",
       header: "Status",
       cell: ({ row }) => (
-                <div className="text-right text-black">
+        <div className="text-right text-black">{row.getValue("status")}</div>
-                    {row.getValue("status")}
+      ),
-                </div>
-            )
     },
     {
       accessorKey: "sendDate",
       header: "Tanggal & Waktu",
       cell: ({ row }) => (
-                <div className="text-black">
+        <div className="text-black">{row.getValue("sendDate")}</div>
-                    {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>

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>
+  );
+}

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>
+  );
+}

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,