feat:add email and whatsApp blast ui

2025-02-14 10:59:56 +08:00 · 2025-02-14 10:59:56 +08:00 · 29bfb3c598
parent 4a1f767861
commit 29bfb3c598
7 changed files with 578 additions and 14 deletions
--- a/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
@ -0,0 +1,112 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  formatDateToIndonesian,
+  getOnlyDate,
+  htmlToString,
+} from "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "fileTypeName",
+    header: "Konten",
+    cell: ({ row }) => <span>{row.getValue("fileTypeName")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link href={`/admin/broadcast/email/${row.original.id}`}>
+                Email Blast
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+                Whatsapp Blast
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;
--- a/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
@ -60,13 +60,16 @@ import {
  PopoverContent,
  PopoverTrigger,
 } from "@/components/ui/popover";
-import { listDataMedia } from "@/service/broadcast/broadcast";
+import {
+  listDataMedia,
+  listDataMediaBroadCast,
+} from "@/service/broadcast/broadcast";
 import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";

-const BroadcastTable = () => {
+const BroadcastEmailTable = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [search, setSearch] = React.useState("");
@ -144,7 +147,7 @@ const BroadcastTable = () => {
  async function fetchData() {
    try {
      loading();
-      const res = await listDataMedia(
+      const res = await listDataMediaBroadCast(
        page - 1,
        showData,
        search,
@ -202,17 +205,13 @@ const BroadcastTable = () => {

  return (
    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-      <div className="flex justify-between mb-10 items-center">
-        <p className="text-xl font-medium text-default-900">Brodcast</p>
-        <Link href="/admin/broadcast/campaign-list">
+      <div className="flex justify-between ">
+        <Link href="/admin/broadcast/campaign-list" className="mr-3">
          <Button color="primary" size="md" className="text-sm">
            <UserIcon />
            Daftar Campaign
          </Button>
        </Link>
-      </div>
-
-      <div className="flex justify-between ">
        <Input
          type="text"
          placeholder="Search"
@ -401,4 +400,4 @@ const BroadcastTable = () => {
  );
 };

-export default BroadcastTable;
+export default BroadcastEmailTable;
--- a/app/[locale]/(protected)/admin/broadcast/page.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/page.tsx
@ -1,11 +1,51 @@
+"use client";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import BroadcastTable from "./component/table";
+import BroadcastTable from "./email/component/table";
+import { PlusIcon } from "lucide-react";
+
+import EscalationTable from "../../shared/communication/escalation/components/escalation-table";
+import InternalTable from "../../shared/communication/internal/components/internal-table";
+import { useState } from "react";
+import { Link } from "@/i18n/routing";
+import { Button } from "@/components/ui/button";
+import BroadcastEmailTable from "./email/component/table";
+import BroadcastWhatsAppTable from "./whatsapp/component/table";

 export default function AdminBroadcast() {
+  const [tab, setTab] = useState("Email Blast");
  return (
    <div>
      <SiteBreadcrumb />
-      <BroadcastTable />
+      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
+          <Button
+            rounded="md"
+            onClick={() => setTab("Email Blast")}
+            className={` hover:text-white
+                ${
+                  tab === "Email Blast"
+                    ? "bg-black text-white "
+                    : "bg-white text-black "
+                }`}
+          >
+            Email Blast
+          </Button>
+          <Button
+            rounded="md"
+            onClick={() => setTab("WhatsApp Blast")}
+            className={` hover:text-white
+                ${
+                  tab === "WhatsApp Blast"
+                    ? "bg-black text-white "
+                    : "bg-white text-black "
+                }`}
+          >
+            WhatsApp Blast
+          </Button>
+        </div>
+        {tab === "Email Blast" && <BroadcastEmailTable />}
+        {tab === "WhatsApp Blast" && <BroadcastWhatsAppTable />}
+      </div>
    </div>
  );
 }
--- a/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
--- a/app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx
@ -0,0 +1,403 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { paginationBlog } from "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  listDataMedia,
+  listDataMediaBroadCast,
+} from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+
+const BroadcastWhatsAppTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataMediaBroadCast(
+        page - 1,
+        showData,
+        search,
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(",")
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="flex justify-between ">
+        <Link href="/admin/broadcast/campaign-list" className="mr-3">
+          <Button color="primary" size="md" className="text-sm">
+            <UserIcon />
+            Daftar Campaign
+          </Button>
+        </Link>
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button size="md" variant="outline">
+                Filter
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 ">
+              <div className="flex flex-col gap-2 px-2">
+                <div className="flex justify-between text-sm">
+                  <p>Filter</p>
+                  <a
+                    onClick={() => fetchData()}
+                    className="cursor-pointer text-primary"
+                  >
+                    Simpan
+                  </a>
+                </div>
+                <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                  <p>Kategory</p>
+                  {categories?.map((category: any) => (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id={category.id}
+                        checked={categoryFilter.includes(category.id)}
+                        onCheckedChange={(e) =>
+                          handleChange("category", category.id, Boolean(e))
+                        }
+                      />
+                      <label
+                        htmlFor={category.id}
+                        className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))}
+                  <p className="mt-3">Status</p>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 1, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(2)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 2, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Diterima
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(3)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 3, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Minta Update{" "}
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(4)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 4, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Ditolak
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default BroadcastWhatsAppTable;
--- a/components/table/management-user/management-user-internal-table.tsx
+++ b/components/table/management-user/management-user-internal-table.tsx
@ -47,8 +47,6 @@ import {
  PopoverContent,
  PopoverTrigger,
 } from "@/components/ui/popover";
-import { listDataMedia } from "@/service/broadcast/broadcast";
-import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link, useRouter } from "@/i18n/routing";
--- a/service/broadcast/broadcast.ts
+++ b/service/broadcast/broadcast.ts
@ -16,6 +16,18 @@ export async function listDataMedia(
  return httpGetInterceptor(url);
 }

+export async function listDataMediaBroadCast(
+  page: number,
+  limit: string,
+  search: string,
+  categoryFilter: string,
+  statusFilter: string
+) {
+  const name = search || "";
+  const url = `media/list?isForAdmin=true&title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&categoryId=${categoryFilter}&statusId=${statusFilter}`;
+  return httpGetInterceptor(url);
+}
+
 export async function getMediaBlastCampaignPage(page: number) {
  const url = `media/blast/campaign/list?enablePage=1&page=${page}`;
  return httpGetInterceptor(url);