From b91f715e464f7fa2796ed0cb23f6119a494eb0cb Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sat, 4 Jan 2025 04:18:22 +0700
Subject: [PATCH] feat:admin page-> broadcast, tenaga ahli, kategori

---
 .../admin/add-experts/component/column.tsx    |  91 ++++
 .../admin/add-experts/component/table.tsx     | 276 +++++++++++
 .../admin/add-experts/create/page.tsx         | 258 ++++++++++
 .../(protected)/admin/add-experts/page.tsx    |  11 +
 .../account-list/component/column.tsx         |  60 ++-
 .../account-list/component/table.tsx          | 165 +++++--
 .../account-list/create/page.tsx              | 306 ++++++++++++
 .../account-list/edit/[id]/page.tsx           | 325 +++++++++++++
 .../campaign-list/component/column.tsx        |   4 +-
 .../campaign-list/component/table.tsx         |  30 +-
 .../broadcast/campaign-list/create/page.tsx   | 198 ++++++++
 .../campaign-list/edit/[id]/page.tsx          | 227 +++++++++
 .../admin/broadcast/component/column.tsx      |   2 +-
 .../admin/broadcast/component/table.tsx       | 254 +++++-----
 .../admin/broadcast/email/[id]/page.tsx       |  11 +
 .../admin/broadcast/whatsapp/[id]/page.tsx    |  11 +
 .../settings/category/component/column.tsx    | 157 +++++++
 .../settings/category/component/create.tsx    | 430 +++++++++++++++++
 .../settings/category/component/edit.tsx      | 443 ++++++++++++++++++
 .../settings/category/component/status.tsx    |  29 ++
 .../settings/category/component/table.tsx     | 184 ++++++++
 .../admin/settings/category/page.tsx          |   2 +
 .../form/broadcast/content-blast-form.tsx     | 293 ++++++++++++
 components/icon.tsx                           |  34 ++
 messages/in.json                              |   2 +-
 .../assets/img/illust-for-broadcast-sent.png  | Bin 0 -> 11149 bytes
 .../illust-for-scheduled-broadcast-sent.png   | Bin 0 -> 16747 bytes
 service/broadcast/broadcast.ts                |  58 ++-
 .../http-config/http-interceptor-service.ts   |   2 +-
 service/settings/settings.ts                  |  30 ++
 utils/globals.tsx                             |  25 +-
 31 files changed, 3719 insertions(+), 199 deletions(-)
 create mode 100644 app/[locale]/(protected)/admin/add-experts/component/column.tsx
 create mode 100644 app/[locale]/(protected)/admin/add-experts/component/table.tsx
 create mode 100644 app/[locale]/(protected)/admin/add-experts/create/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/add-experts/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
 create mode 100644 app/[locale]/(protected)/admin/settings/category/component/column.tsx
 create mode 100644 app/[locale]/(protected)/admin/settings/category/component/create.tsx
 create mode 100644 app/[locale]/(protected)/admin/settings/category/component/edit.tsx
 create mode 100644 app/[locale]/(protected)/admin/settings/category/component/status.tsx
 create mode 100644 app/[locale]/(protected)/admin/settings/category/component/table.tsx
 create mode 100644 components/form/broadcast/content-blast-form.tsx
 create mode 100644 public/assets/img/illust-for-broadcast-sent.png
 create mode 100644 public/assets/img/illust-for-scheduled-broadcast-sent.png
 create mode 100644 service/settings/settings.ts

diff --git a/app/[locale]/(protected)/admin/add-experts/component/column.tsx b/app/[locale]/(protected)/admin/add-experts/component/column.tsx
new file mode 100644
index 00000000..528d9436
--- /dev/null
+++ b/app/[locale]/(protected)/admin/add-experts/component/column.tsx
@@ -0,0 +1,91 @@
+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: "name",
+    header: "Nama",
+    cell: ({ row }) => <span>{row.getValue("name")}</span>,
+  },
+  {
+    accessorKey: "region",
+    header: "Wilayah",
+    cell: ({ row }) => <span>{row.getValue("region")}</span>,
+  },
+  {
+    accessorKey: "skills",
+    header: "Bidang Keahlian",
+    cell: ({ row }) => <span>{row.getValue("skills")}</span>,
+  },
+
+  {
+    accessorKey: "experience",
+    header: "Pengalaman",
+    cell: ({ row }) => <span>{row.getValue("experience")}</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="#">Detail</Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;
diff --git a/app/[locale]/(protected)/admin/add-experts/component/table.tsx b/app/[locale]/(protected)/admin/add-experts/component/table.tsx
new file mode 100644
index 00000000..e1cee274
--- /dev/null
+++ b/app/[locale]/(protected)/admin/add-experts/component/table.tsx
@@ -0,0 +1,276 @@
+"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 { 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 } 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 dummyData = [
+  {
+    id: 1,
+    name: "Prof. Dr. Ravi",
+    region: "Nasional",
+    skills: "Komunikasi",
+    experience: "Akademisi",
+  },
+  {
+    id: 2,
+    name: "Prof. Dr. Novan",
+    region: "DKI Jakarta",
+    skills: "Hukum",
+    experience: "Akademisi + Praktisi",
+  },
+];
+
+const AddExpertTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  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);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  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 contentData = dummyData;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      setDataTable(contentData);
+      setTotalData(contentData?.length);
+      setTotalPage(1);
+      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);
+  }
+
+  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">Tenaga Ahli</p>
+        <Link href="/admin/add-experts/create">
+          <Button color="primary" size="md" className="text-sm">
+            <UserIcon />
+            Tambah Tenaga Ahli
+          </Button>
+        </Link>
+      </div>
+
+      <div className="flex justify-between ">
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          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>
+        </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 AddExpertTable;
diff --git a/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
new file mode 100644
index 00000000..abc66bc2
--- /dev/null
+++ b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
@@ -0,0 +1,258 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useRouter } from "@/i18n/routing";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const FormSchema = z.object({
+  name: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  region: z.string({
+    required_error: "Required",
+  }),
+  skills: z.string({
+    required_error: "Required",
+  }),
+  experience: z.string({
+    required_error: "Required",
+  }),
+  company: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function AddExpertForm() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+
+    //   successSubmit();
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/add-experts");
+      }
+    });
+  }
+  return (
+    <div>
+      <SiteBreadcrumb />
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Campaign</p>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. HP</FormLabel>
+                <Input
+                  type="number"
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <Input
+                  type="email"
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="region"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Wilayah</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih Region" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="nasional">Nasional</SelectItem>
+                    <SelectItem value="jakarta">DKI Jakarta</SelectItem>
+                    <SelectItem value="jabar">Jawa Barat</SelectItem>
+                  </SelectContent>
+                </Select>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="skills"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Bidang Keahlian</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih Bidang Keahlian" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="komunikasi">Komunikasi</SelectItem>
+                    <SelectItem value="hukum">Hukum</SelectItem>
+                    <SelectItem value="bahasa">Bahasa</SelectItem>
+                  </SelectContent>
+                </Select>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="experience"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Pengalaman</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih Pengalaman" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="akademisi">Akademisi</SelectItem>
+                    <SelectItem value="praktisi">Praktisi</SelectItem>
+                    <SelectItem value="akademisi+praktisi">
+                      Akademisi + Praktisi
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="company"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Institusi/Perusahaan</FormLabel>
+                <Input
+                  type="text"
+                  value={field.value}
+                  placeholder="Nama Institusi/Perusahaan"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/add-experts/page.tsx b/app/[locale]/(protected)/admin/add-experts/page.tsx
new file mode 100644
index 00000000..437a0a26
--- /dev/null
+++ b/app/[locale]/(protected)/admin/add-experts/page.tsx
@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AddExpertTable from "./component/table";
+
+export default function AddExpert() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <AddExpertTable />
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
index 53fdc8d8..e21af944 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
@@ -11,8 +11,13 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import Swal from "sweetalert2";
 
 import { Link, useRouter } from "@/i18n/routing";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { deleteMediaBlastAccount } from "@/service/broadcast/broadcast";
+import { useToast } from "@/components/ui/use-toast";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -24,22 +29,30 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "accountName",
     header: "Nama",
-    cell: ({ row }) => <span>{row.getValue("accountName")}</span>,
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("accountName")}</span>
+    ),
   },
   {
     accessorKey: "accountType",
     header: "Tipe Akun",
-    cell: ({ row }) => <span>{row.getValue("accountType")}</span>,
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("accountType")}</span>
+    ),
   },
   {
     accessorKey: "accountCategory",
     header: "Kategory",
-    cell: ({ row }) => <span>{row.getValue("accountCategory")}</span>,
+    cell: ({ row }) => (
+      <span className="uppercase">{row.getValue("accountCategory")}</span>
+    ),
   },
   {
     accessorKey: "emailAddress",
     header: "Email",
-    cell: ({ row }) => <span>{row.getValue("emailAddress")}</span>,
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("emailAddress")}</span>
+    ),
   },
   {
     accessorKey: "whatsappNumber",
@@ -52,6 +65,41 @@ const columns: ColumnDef<any>[] = [
     header: "Actions",
     enableHiding: false,
     cell: ({ row }) => {
+      const MySwal = withReactContent(Swal);
+      const { toast } = useToast();
+      const router = useRouter();
+      const handleDelete = (id: string) => {
+        MySwal.fire({
+          title: "Apakah anda ingin menghapus data?",
+          showCancelButton: true,
+          confirmButtonColor: "#dc3545",
+          confirmButtonText: "Iya",
+          cancelButtonText: "Tidak",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            doDeleteAccount(id);
+          }
+        });
+      };
+
+      async function succes() {
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        window.location.reload();
+      }
+
+      async function doDeleteAccount(id: string) {
+        loading();
+        const response = await deleteMediaBlastAccount(id);
+        close();
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        succes();
+      }
       return (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -65,13 +113,13 @@ const columns: ColumnDef<any>[] = [
           <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={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
+                href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}
               >
                 Edit
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <a>Delete</a>
+              <a onClick={() => handleDelete(row.original.id)}>Delete</a>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
index a60ae9ce..eb8b3e22 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
@@ -24,51 +24,21 @@ import {
   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 { UserIcon } from "lucide-react";
+
 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 {
-  getMediaBlastAccountPage,
-  getMediaBlastCampaignPage,
-  listDataMedia,
-} from "@/service/broadcast/broadcast";
-import { listEnableCategory } from "@/service/content/content";
+import { getMediaBlastAccountPage } from "@/service/broadcast/broadcast";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
 const AccountListTable = () => {
   const router = useRouter();
@@ -89,6 +59,7 @@ const AccountListTable = () => {
 
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
+  const [filtered, setFiltered] = React.useState<string[]>([]);
   const table = useReactTable({
     data: dataTable,
     columns,
@@ -124,15 +95,16 @@ const AccountListTable = () => {
   async function fetchData() {
     try {
       loading();
-      const res = await getMediaBlastAccountPage(page - 1, "");
+      const res = await getMediaBlastAccountPage(
+        page - 1,
+        filtered ? filtered.join(",") : ""
+      );
       const data = res.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * 10 + index + 1;
       });
 
-      console.log("contentData : ", data);
-
       setDataTable(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
@@ -142,23 +114,114 @@ const AccountListTable = () => {
     }
   }
 
+  const handleFilter = (id: string, checked: boolean) => {
+    let temp = [...filtered];
+    if (checked) {
+      temp = [...temp, id];
+    } else {
+      temp = temp.filter((a) => a !== id);
+    }
+    setFiltered(temp);
+    console.log("sss", temp);
+  };
+
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-      <div className="flex flex-row gap-3">
-        <Link href="/admin/broadcast/campaign-list/account-list">
-          <Button color="primary" size="md" className="text-sm">
-            <UserIcon />
-            Tambah Akun
-          </Button>
-        </Link>
-        <Link href="/admin/broadcast/campaign-list/create">
-          <Button color="success" size="md" className="text-sm">
-            <UserIcon />
-            Import Akun
-          </Button>
-        </Link>
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">Daftar Akun</p>
+        <div className="flex flex-row gap-3">
+          <Link href="/admin/broadcast/campaign-list/account-list/create">
+            <Button color="primary" size="md" className="text-sm">
+              <Icon icon="tdesign:user-add-filled" />
+              Tambah Akun
+            </Button>
+          </Link>
+          <Link href="/admin/broadcast/campaign-list/import">
+            <Button color="success" size="md" className="text-sm">
+              <UserIcon />
+              Import Akun
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <div className="flex justify-end">
+        <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">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="accepted"
+                    checked={filtered.includes("polri")}
+                    onCheckedChange={(e) => handleFilter("polri", Boolean(e))}
+                  />
+                  <label
+                    htmlFor="accepted"
+                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    POLRI
+                  </label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="accepted"
+                    checked={filtered.includes("jurnalis")}
+                    onCheckedChange={(e) =>
+                      handleFilter("jurnalis", Boolean(e))
+                    }
+                  />
+                  <label
+                    htmlFor="accepted"
+                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    JURNALIS
+                  </label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="accepted"
+                    checked={filtered.includes("umum")}
+                    onCheckedChange={(e) => handleFilter("umum", Boolean(e))}
+                  />
+                  <label
+                    htmlFor="accepted"
+                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    UMUM
+                  </label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="accepted"
+                    checked={filtered.includes("ksp")}
+                    onCheckedChange={(e) => handleFilter("ksp", Boolean(e))}
+                  />
+                  <label
+                    htmlFor="accepted"
+                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    KSP
+                  </label>
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
       </div>
-
       <Table className="overflow-hidden">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
new file mode 100644
index 00000000..02c28100
--- /dev/null
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
@@ -0,0 +1,306 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  saveMediaBlastAccount,
+  saveMediaBlastCampaign,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const FormSchema = z.object({
+  name: z.string({
+    required_error: "Required",
+  }),
+  accountType: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  whatsapp: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function CreateAccountForBroadcast() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { accountType: [] },
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list/account-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      accountName: data.name,
+      accountType: data.accountType.join(","),
+      accountCategory: data.accountCategory,
+      emailAddress: data.email,
+      whatsappNumber: data.whatsapp,
+    };
+    console.log("data", data);
+
+    const response = await saveMediaBlastAccount(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Account</p>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan nama"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="accountType"
+            render={() => (
+              <FormItem>
+                <FormLabel>Tipe Akun</FormLabel>
+                <div className="flex flex-row gap-2">
+                  {" "}
+                  <FormField
+                    key="wa"
+                    control={form.control}
+                    name="accountType"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key="wa"
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes("wa")}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, "wa"])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== "wa"
+                                      )
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Whatsapp
+                          </FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                  <FormField
+                    key="email"
+                    control={form.control}
+                    name="accountType"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key="email"
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes("email")}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, "email"])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== "email"
+                                      )
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">Email</FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                </div>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="accountCategory"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Kategori</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                    className="flex flex-row gap-2"
+                  >
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="polri" />
+                      </FormControl>
+                      <FormLabel className="font-normal">POLRI</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="jurnalis" />
+                      </FormControl>
+                      <FormLabel className="font-normal">JURNALIS</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="umum" />
+                      </FormControl>
+                      <FormLabel className="font-normal">UMUM</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="ksp" />
+                      </FormControl>
+                      <FormLabel className="font-normal">KSP</FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  type="email"
+                  value={field.value}
+                  placeholder="Masukkan email"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="whatsapp"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  type="number"
+                  value={field.value}
+                  placeholder="Masukkan whatsapp"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
new file mode 100644
index 00000000..1ce469af
--- /dev/null
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
@@ -0,0 +1,325 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMediaBlastAccount,
+  saveMediaBlastAccount,
+  saveMediaBlastCampaign,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+
+const FormSchema = z.object({
+  name: z.string({
+    required_error: "Required",
+  }),
+  accountType: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  whatsapp: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function EditAccountForBroadcast() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { accountType: [] },
+  });
+
+  useEffect(() => {
+    async function getDetailData() {
+      const response = await getMediaBlastAccount(String(id));
+      const details = response.data?.data;
+      console.log("new", details);
+      form.setValue("name", details.accountName);
+      form.setValue("email", details?.emailAddress);
+      form.setValue("whatsapp", details?.whatsappNumber);
+      form.setValue("accountCategory", details?.accountCategory);
+      form.setValue("accountType", details?.accountType.split(","));
+    }
+
+    getDetailData();
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list/account-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: String(id),
+      accountName: data.name,
+      accountType: data.accountType.join(","),
+      accountCategory: data.accountCategory,
+      emailAddress: data.email,
+      whatsappNumber: data.whatsapp,
+    };
+    console.log("data", data);
+
+    const response = await saveMediaBlastAccount(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Account</p>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan nama"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="accountType"
+            render={() => (
+              <FormItem>
+                <FormLabel>Tipe Akun</FormLabel>
+                <div className="flex flex-row gap-2">
+                  <FormField
+                    key="wa"
+                    control={form.control}
+                    name="accountType"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key="wa"
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes("wa")}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, "wa"])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== "wa"
+                                      )
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Whatsapp
+                          </FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                  <FormField
+                    key="email"
+                    control={form.control}
+                    name="accountType"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key="email"
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes("email")}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, "email"])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== "email"
+                                      )
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">Email</FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                </div>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="accountCategory"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Kategori</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="flex flex-row gap-2"
+                  >
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="polri" />
+                      </FormControl>
+                      <FormLabel className="font-normal">POLRI</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="jurnalis" />
+                      </FormControl>
+                      <FormLabel className="font-normal">JURNALIS</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="umum" />
+                      </FormControl>
+                      <FormLabel className="font-normal">UMUM</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="ksp" />
+                      </FormControl>
+                      <FormLabel className="font-normal">KSP</FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  type="email"
+                  value={field.value}
+                  placeholder="Masukkan email"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="whatsapp"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  type="number"
+                  value={field.value}
+                  placeholder="Masukkan whatsapp"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
index 8c269959..139090ad 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
@@ -24,7 +24,9 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Judul",
-    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("title")}</span>
+    ),
   },
   {
     accessorKey: "sendTime",
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
index 96d00a4e..f56cf0ab 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
@@ -68,6 +68,7 @@ import { listEnableCategory } from "@/service/content/content";
 import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
+import { NewCampaignIcon } from "@/components/icon";
 
 const CampaignListTable = () => {
   const router = useRouter();
@@ -143,19 +144,22 @@ const CampaignListTable = () => {
 
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-      <div className="flex flex-row gap-3">
-        <Link href="/admin/broadcast/campaign-list/account-list">
-          <Button color="primary" size="md" className="text-sm">
-            <UserIcon />
-            Daftar Akun
-          </Button>
-        </Link>
-        <Link href="/admin/broadcast/campaign-list/create">
-          <Button color="primary" size="md" className="text-sm">
-            <UserIcon />
-            Buat Campaign Baru
-          </Button>
-        </Link>
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">Daftar Campaign</p>
+        <div className="flex flex-row gap-2">
+          <Link href="/admin/broadcast/campaign-list/account-list">
+            <Button color="primary" size="md" className="text-sm">
+              <UserIcon />
+              Daftar Akun
+            </Button>
+          </Link>
+          <Link href="/admin/broadcast/campaign-list/create">
+            <Button color="primary" size="md" className="text-sm">
+              <NewCampaignIcon size={23} />
+              Buat Campaign Baru
+            </Button>
+          </Link>
+        </div>
       </div>
 
       <Table className="overflow-hidden">
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
new file mode 100644
index 00000000..210c8241
--- /dev/null
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
@@ -0,0 +1,198 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import { saveMediaBlastCampaign } from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+
+const FormSchema = z.object({
+  date: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  time: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function CreateCampaign() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const newDate = getOnlyDate(data.date).split("-");
+    const dates = `${newDate[2]}-${newDate[1]}-${newDate[0]}`;
+    const reqData = {
+      title: data.title,
+      sendTime: `${dates} ${data.time}:00`,
+      status: "waiting",
+    };
+
+    const response = await saveMediaBlastCampaign(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Campaign</p>
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Judul</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Judul"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <p className="text-sm">Jadwal Kirim</p>
+          <div className="flex flex-row gap-2">
+            <FormField
+              control={form.control}
+              name="date"
+              render={({ field }) => (
+                <FormItem>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant={"outline"}
+                        size="md"
+                        className={cn(
+                          "w-[200px] justify-start text-left font-normal border-gray-200",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {field.value ? (
+                          format(field.value, "dd-MM-yyyy")
+                        ) : (
+                          <span>Masukkan Bulan</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="time"
+              render={({ field }) => (
+                <FormItem>
+                  <Input
+                    type="time"
+                    className="max-w-[100px]"
+                    value={field.value}
+                    placeholder="Masukkan Judul Perencanaan"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
new file mode 100644
index 00000000..01064f1f
--- /dev/null
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
@@ -0,0 +1,227 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMediaBlastCampaignById,
+  saveMediaBlastCampaign,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+
+const FormSchema = z.object({
+  date: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  time: z.string({
+    required_error: "Required",
+  }),
+  status: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function EditCampaign() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  useEffect(() => {
+    async function getInitData() {
+      const response = await getMediaBlastCampaignById(String(id));
+      const date = response?.data?.data?.sendTime.split(" ");
+      const dateInput: Date = new Date(date[0]);
+
+      const time = date[1].split(":");
+
+      form.setValue("title", response?.data?.data?.title);
+      form.setValue("status", response?.data?.data?.status);
+      form.setValue("date", new Date(format(dateInput, "dd-MM-yyyy")));
+      form.setValue("time", `${time[0]}:${time[1]}`);
+    }
+
+    if (id != undefined) {
+      getInitData();
+    }
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const newDate = getOnlyDate(data.date).split("-");
+    const dates = `${newDate[2]}-${newDate[1]}-${newDate[0]}`;
+    const reqData = {
+      id: String(id),
+      title: data.title,
+      sendTime: `${dates} ${data.time}:00`,
+      status: data.status,
+    };
+
+    const response = await saveMediaBlastCampaign(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Campaign</p>
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Judul</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Judul"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <p className="text-sm">Jadwal Kirim</p>
+          <div className="flex flex-row gap-2">
+            <FormField
+              control={form.control}
+              name="date"
+              render={({ field }) => (
+                <FormItem>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant={"outline"}
+                        size="md"
+                        className={cn(
+                          "w-[200px] justify-start text-left font-normal border-gray-200",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {field.value ? (
+                          format(field.value, "dd-MM-yyyy")
+                        ) : (
+                          <span>Masukkan Bulan</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="time"
+              render={({ field }) => (
+                <FormItem>
+                  <Input
+                    type="time"
+                    className="max-w-[100px]"
+                    value={field.value}
+                    placeholder="Masukkan Judul Perencanaan"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/broadcast/component/column.tsx b/app/[locale]/(protected)/admin/broadcast/component/column.tsx
index 476b628e..a9a32f16 100644
--- a/app/[locale]/(protected)/admin/broadcast/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/component/column.tsx
@@ -93,7 +93,7 @@ const columns: ColumnDef<any>[] = [
               </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}`}>
+              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
                 Whatsapp Blast
               </Link>
             </DropdownMenuItem>
diff --git a/app/[locale]/(protected)/admin/broadcast/component/table.tsx b/app/[locale]/(protected)/admin/broadcast/component/table.tsx
index d2cb4a48..338cd31d 100644
--- a/app/[locale]/(protected)/admin/broadcast/component/table.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/component/table.tsx
@@ -135,6 +135,10 @@ const BroadcastTable = () => {
 
   React.useEffect(() => {
     fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
   }, [page, showData]);
 
   async function fetchData() {
@@ -198,147 +202,153 @@ const BroadcastTable = () => {
 
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-      <Link href="/admin/broadcast/campaign-list">
-        <Button color="primary" size="md" className="text-sm">
-          <UserIcon />
-          Daftar Campaign
-        </Button>
-      </Link>
+      <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">
+          <Button color="primary" size="md" className="text-sm">
+            <UserIcon />
+            Daftar Campaign
+          </Button>
+        </Link>
+      </div>
 
-      <div className="flex flex-row gap-4">
+      <div className="flex justify-between ">
         <Input
           type="text"
           placeholder="Search"
           onKeyUp={handleKeyUp}
           onKeyDown={handleKeyDown}
+          className="max-w-[300px]"
         />
-        <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 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={category.id}
-                      checked={categoryFilter.includes(category.id)}
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
                       onCheckedChange={(e) =>
-                        handleChange("category", category.id, Boolean(e))
+                        handleChange("status", 1, Boolean(e))
                       }
                     />
                     <label
-                      htmlFor={category.id}
+                      htmlFor="accepted"
                       className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     >
-                      {category.name}
+                      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>
-                ))}
-                <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>
+            </PopoverContent>
+          </Popover>
+        </div>
       </div>
       <Table className="overflow-hidden">
         <TableHeader>
diff --git a/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx b/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
new file mode 100644
index 00000000..73256382
--- /dev/null
+++ b/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
@@ -0,0 +1,11 @@
+import ContentBlast from "@/components/form/broadcast/content-blast-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function CreateEmailBlast() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <ContentBlast type="email" />
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx b/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
new file mode 100644
index 00000000..d1ddaa08
--- /dev/null
+++ b/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
@@ -0,0 +1,11 @@
+import ContentBlast from "@/components/form/broadcast/content-blast-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function CreateWABlast() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <ContentBlast type="wa" />
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/settings/category/component/column.tsx b/app/[locale]/(protected)/admin/settings/category/component/column.tsx
new file mode 100644
index 00000000..02fe1320
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/category/component/column.tsx
@@ -0,0 +1,157 @@
+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 { Link, useRouter } from "@/i18n/routing";
+import StatusToogle from "./status";
+import { error } from "@/config/swal";
+import { deleteCategory } from "@/service/settings/settings";
+import { useToast } from "@/components/ui/use-toast";
+import EditCategoryModal from "./edit";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarMenu,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "name",
+    header: "Nama Kategori",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("name")}</span>
+    ),
+  },
+  {
+    accessorKey: "contentType",
+    header: "Tipe Konten",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("contentType")}</span>
+    ),
+  },
+  {
+    accessorKey: "isInternational",
+    header: "Wilayah",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        {row.getValue("isInternational") ? "INT" : "ID"}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        <StatusToogle id={row.original.id} initValue={row.original.isPublish} />
+      </span>
+    ),
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const router = useRouter();
+      const { toast } = useToast();
+
+      const categoryDelete = async (id: number) => {
+        const response = await deleteCategory(id);
+        console.log(response);
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        router.push("/admin/settings/category?dataChange=true");
+      };
+      return (
+        // <Popover>
+        //   <PopoverTrigger>
+        //     <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>
+        //   </PopoverTrigger>
+        //   <PopoverContent className="w-40">
+        //     <div className="flex flex-col">
+        //       <EditCategoryModal />
+        //       <a onClick={() => categoryDelete(row.original.id)}>Delete</a>
+        //     </div>
+        //   </PopoverContent>
+        // </Popover>
+
+        // <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">
+        //       <EditCategoryModal />
+        //     </DropdownMenuItem>
+        //     <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+        //       <a onClick={() => categoryDelete(row.original.id)}>Delete</a>
+        //     </DropdownMenuItem>
+        //   </DropdownMenuContent>
+        // </DropdownMenu>
+
+        <Menubar className="border-none">
+          <MenubarMenu>
+            <MenubarTrigger>
+              <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>
+            </MenubarTrigger>
+            <MenubarContent className="flex flex-col gap-2 justify-center items-start p-4">
+              <EditCategoryModal data={row.original} />
+              <a
+                onClick={() => categoryDelete(row.original.id)}
+                className="hover:underline cursor-pointer hover:text-destructive"
+              >
+                Delete
+              </a>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      );
+    },
+  },
+];
+
+export default columns;
diff --git a/app/[locale]/(protected)/admin/settings/category/component/create.tsx b/app/[locale]/(protected)/admin/settings/category/component/create.tsx
new file mode 100644
index 00000000..cc3f6563
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/category/component/create.tsx
@@ -0,0 +1,430 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { getUserRoles, postCategory } from "@/service/settings/settings";
+import { useEffect, useState } from "react";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Textarea } from "@/components/ui/textarea";
+import { close, error, loading } from "@/config/swal";
+
+const FormSchema = z.object({
+  title: z.string({
+    required_error: "Required",
+  }),
+  description: z.string({
+    required_error: "Required",
+  }),
+  contentType: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  selectedUser: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  publishTo: z.string({
+    required_error: "Required",
+  }),
+  file: z
+    .instanceof(File, {
+      message: "Invalid file format",
+    })
+    .optional()
+    .refine((file) => file && file.size > 0, {
+      message: "File is required",
+    }),
+});
+
+const listContent = [
+  {
+    id: "1",
+    name: "Foto",
+  },
+  {
+    id: "2",
+    name: "Audio Visual",
+  },
+  {
+    id: "3",
+    name: "Teks",
+  },
+  {
+    id: "4",
+    name: "Audio",
+  },
+];
+
+export default function CreateCategoryModal() {
+  const router = useRouter();
+  const [userList, setUserList] = useState<
+    { id: string; name: string; isInternal: boolean }[]
+  >([]);
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { contentType: [], selectedUser: [], publishTo: "national" },
+  });
+
+  const contentType = form.watch("contentType");
+
+  const isAllContentChecked = listContent.every((item) =>
+    contentType?.includes(item.id)
+  );
+
+  const users = form.watch("selectedUser");
+
+  const isAllUserChecked = userList.every((item) => users?.includes(item.id));
+
+  useEffect(() => {
+    getRoles();
+  }, []);
+
+  async function getRoles() {
+    const response = await getUserRoles();
+    let dataRoles = response.data.data;
+    for (let i = 0; i < dataRoles.length; i++) {
+      dataRoles[i].id = String(dataRoles[i].id);
+    }
+    setUserList(dataRoles);
+    console.log("dasda", dataRoles);
+  }
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (data.file instanceof Blob) {
+      const formMedia = new FormData();
+
+      loading();
+
+      formMedia.append("name", data.title);
+      formMedia.append("description", data.description);
+      formMedia.append("mediaTypes", data.contentType.join(","));
+      formMedia.append("file", data.file);
+      formMedia.append("publishedFor", data.selectedUser.sort().join(","));
+      formMedia.append(
+        "isInt",
+        data.publishTo === "national" ? "false" : "true"
+      );
+      console.log(formMedia);
+      const response = await postCategory(formMedia);
+      close();
+      if (response?.error == true) {
+        error(response.message);
+        return false;
+      }
+      router.push("/admin/settings/category?dataChange=true");
+    }
+  };
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button color="primary" size="md">
+          Tambah Kategori
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Tambah Kategori</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="contentType"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Tipe Konten</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex items-center gap-3">
+                      <Checkbox
+                        id="all"
+                        checked={isAllContentChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "contentType",
+                              listContent.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("contentType", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {listContent.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="contentType"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start"
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="selectedUser"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Target Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        checked={isAllUserChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "selectedUser",
+                              userList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("selectedUser", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {userList.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="selectedUser"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start "
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="publishTo"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>Wilayah Publish</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      className="flex flex-row gap-2"
+                    >
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="national" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Nasional</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="international" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          Internasional
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Kategori</FormLabel>
+                  <Input
+                    value={field.value}
+                    placeholder="Masukkan Nama Kategori"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="file"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Kategori</FormLabel>
+                  {!field.value && (
+                    <div className="flex items-center justify-center w-full">
+                      <label
+                        htmlFor="dropzone-file"
+                        className="flex flex-col items-center justify-center w-full h-28 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+                      >
+                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                            <span className="font-semibold">Unggah Gambar</span>
+                          </p>
+                        </div>
+                        <input
+                          id="dropzone-file"
+                          type="file"
+                          className="hidden"
+                          onChange={(e) => {
+                            const file = e.target.files?.[0];
+                            if (file) {
+                              field.onChange(file);
+                            }
+                          }}
+                        />
+                      </label>
+                    </div>
+                  )}
+
+                  {field.value && (
+                    <div className="flex flex-row gap-2">
+                      <img
+                        src={URL.createObjectURL(field.value)}
+                        className="w-[30%]"
+                        alt="thumbnail"
+                      />
+                      <a onClick={() => form.setValue("file", undefined)}>
+                        <Icon icon="fa-solid:times" color="red" />
+                      </a>
+                    </div>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Deskripsi</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Deskripsi"
+                      //   className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button
+                type="submit"
+                color="primary"
+                size="md"
+                className="text-xs"
+              >
+                Tambah Kategori
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/settings/category/component/edit.tsx b/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
new file mode 100644
index 00000000..89891034
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
@@ -0,0 +1,443 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { getUserRoles, postCategory } from "@/service/settings/settings";
+import { useEffect, useState } from "react";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Textarea } from "@/components/ui/textarea";
+import { close, error, loading } from "@/config/swal";
+
+const FormSchema = z.object({
+  title: z.string({
+    required_error: "Required",
+  }),
+  description: z.string({
+    required_error: "Required",
+  }),
+  contentType: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  selectedUser: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  publishTo: z.string({
+    required_error: "Required",
+  }),
+  file: z
+    .instanceof(File, {
+      message: "Invalid file format",
+    })
+    .optional()
+    .refine((file) => file && file.size > 0, {
+      message: "File is required",
+    }),
+  id: z.string({
+    required_error: "Required",
+  }),
+});
+
+const listContent = [
+  {
+    id: "1",
+    name: "Foto",
+  },
+  {
+    id: "2",
+    name: "Audio Visual",
+  },
+  {
+    id: "3",
+    name: "Teks",
+  },
+  {
+    id: "4",
+    name: "Audio",
+  },
+];
+
+export default function EditCategoryModal(props: { data: any }) {
+  const { data } = props;
+  const router = useRouter();
+  const [openModal, setOpenModal] = useState(false);
+  const [userList, setUserList] = useState<
+    { id: string; name: string; isInternal: boolean }[]
+  >([]);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { contentType: [], selectedUser: [], publishTo: "national" },
+  });
+
+  useEffect(() => {
+    form.setValue("id", String(data?.id));
+    form.setValue("title", String(data?.name));
+    form.setValue("description", String(data?.description));
+    form.setValue("contentType", data?.mediaTypes.split(","));
+    form.setValue("selectedUser", data.publishedFor.split(","));
+    form.setValue("publishTo", data?.isInt ? "international" : "national");
+  }, [data]);
+
+  const contentType = form.watch("contentType");
+
+  const isAllContentChecked = listContent.every((item) =>
+    contentType?.includes(item.id)
+  );
+
+  const users = form.watch("selectedUser");
+
+  const isAllUserChecked = userList.every((item) => users?.includes(item.id));
+
+  useEffect(() => {
+    getRoles();
+  }, []);
+
+  async function getRoles() {
+    const response = await getUserRoles();
+    let dataRoles = response.data.data;
+    for (let i = 0; i < dataRoles.length; i++) {
+      dataRoles[i].id = String(dataRoles[i].id);
+    }
+    setUserList(dataRoles);
+    console.log("dasda", dataRoles);
+  }
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (data.file instanceof Blob) {
+      const formMedia = new FormData();
+
+      loading();
+      formMedia.append("id", data.id);
+      formMedia.append("name", data.title);
+      formMedia.append("description", data.description);
+      formMedia.append("mediaTypes", data.contentType.join(","));
+      formMedia.append("file", data.file);
+      formMedia.append("publishedFor", data.selectedUser.sort().join(","));
+      formMedia.append(
+        "isInt",
+        data.publishTo === "national" ? "false" : "true"
+      );
+      console.log(formMedia);
+      const response = await postCategory(formMedia);
+      close();
+      if (response?.error == true) {
+        error(response.message);
+        return false;
+      }
+      router.push("/admin/settings/category?dataChange=true");
+    }
+  };
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <a className="hover:underline">Edit Kategori</a>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Edit Kategori</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="contentType"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Tipe Konten</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex items-center gap-3">
+                      <Checkbox
+                        id="all"
+                        checked={isAllContentChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "contentType",
+                              listContent.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("contentType", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {listContent.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="contentType"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start"
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="selectedUser"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Target Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        checked={isAllUserChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "selectedUser",
+                              userList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("selectedUser", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {userList.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="selectedUser"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start "
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="publishTo"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>Wilayah Publish</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      className="flex flex-row gap-2"
+                    >
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="national" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Nasional</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="international" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          Internasional
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Kategori</FormLabel>
+                  <Input
+                    value={field.value}
+                    placeholder="Masukkan Nama Kategori"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="file"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Kategori</FormLabel>
+                  {!field.value && (
+                    <div className="flex items-center justify-center w-full">
+                      <label
+                        htmlFor="dropzone-file"
+                        className="flex flex-col items-center justify-center w-full h-28 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+                      >
+                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                            <span className="font-semibold">Unggah Gambar</span>
+                          </p>
+                        </div>
+                        <input
+                          id="dropzone-file"
+                          type="file"
+                          className="hidden"
+                          onChange={(e) => {
+                            const file = e.target.files?.[0];
+                            if (file) {
+                              field.onChange(file);
+                            }
+                          }}
+                        />
+                      </label>
+                    </div>
+                  )}
+
+                  {field.value && (
+                    <div className="flex flex-row gap-2">
+                      <img
+                        src={URL.createObjectURL(field.value)}
+                        className="w-[30%]"
+                        alt="thumbnail"
+                      />
+                      <a onClick={() => form.setValue("file", undefined)}>
+                        <Icon icon="fa-solid:times" color="red" />
+                      </a>
+                    </div>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Deskripsi</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Deskripsi"
+                      //   className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button
+                type="submit"
+                color="primary"
+                size="md"
+                className="text-xs"
+              >
+                Edit Kategori
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/app/[locale]/(protected)/admin/settings/category/component/status.tsx b/app/[locale]/(protected)/admin/settings/category/component/status.tsx
new file mode 100644
index 00000000..acd2489f
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/category/component/status.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { Switch } from "@/components/ui/switch";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { publishUnpublishCategory } from "@/service/settings/settings";
+
+export default function StatusToogle(props: {
+  id: number;
+  initValue: boolean;
+}) {
+  const { id, initValue } = props;
+  const router = useRouter();
+  const publishCategory = async (id: number, status: string) => {
+    const response = await publishUnpublishCategory(id, status);
+    console.log(response);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+    router.push("/admin/settings/category?dataChange=true");
+  };
+  return (
+    <Switch
+      id={String(id)}
+      checked={initValue}
+      onCheckedChange={(e) => publishCategory(id, String(e))}
+    />
+  );
+}
diff --git a/app/[locale]/(protected)/admin/settings/category/component/table.tsx b/app/[locale]/(protected)/admin/settings/category/component/table.tsx
new file mode 100644
index 00000000..25c42a59
--- /dev/null
+++ b/app/[locale]/(protected)/admin/settings/category/component/table.tsx
@@ -0,0 +1,184 @@
+"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 { useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import { NewCampaignIcon } from "@/components/icon";
+import { getCategories } from "@/service/settings/settings";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import CreateCategoryModal from "./create";
+
+const AdminCategoryTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const dataChange = searchParams?.get("dataChange");
+  const [openModal, setOpenModal] = React.useState(false);
+  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: 50,
+  });
+
+  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,
+    },
+  });
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/category");
+    }
+    fetchData();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const response = await getCategories();
+      const data = response.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * 50 + index + 1;
+      });
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(1);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  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">Kategori</p>
+        <CreateCategoryModal />
+      </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 AdminCategoryTable;
diff --git a/app/[locale]/(protected)/admin/settings/category/page.tsx b/app/[locale]/(protected)/admin/settings/category/page.tsx
index bceb2866..14039a3b 100644
--- a/app/[locale]/(protected)/admin/settings/category/page.tsx
+++ b/app/[locale]/(protected)/admin/settings/category/page.tsx
@@ -1,10 +1,12 @@
 "use client";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AdminCategoryTable from "./component/table";
 
 export default function AdminCategory() {
   return (
     <>
       <SiteBreadcrumb />
+      <AdminCategoryTable />
     </>
   );
 }
diff --git a/components/form/broadcast/content-blast-form.tsx b/components/form/broadcast/content-blast-form.tsx
new file mode 100644
index 00000000..47887d4d
--- /dev/null
+++ b/components/form/broadcast/content-blast-form.tsx
@@ -0,0 +1,293 @@
+"use client";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+import {
+  getLocaleTime,
+  getLocaleTimestamp,
+  textEllipsis,
+} from "@/utils/globals";
+import {
+  detailMediaSummary,
+  getMediaBlastCampaignList,
+  saveMediaBlastBroadcast,
+  saveMediaBlastCampaign,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import JoditEditor from "jodit-react";
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import Select from "react-select";
+import makeAnimated from "react-select/animated";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+const animatedComponent = makeAnimated();
+
+const FormSchema = z.object({
+  title: z.string({
+    required_error: "Required",
+  }),
+  url: z.string({
+    required_error: "Required",
+  }),
+  thumbnail: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+  selected: z
+    .array(
+      z.object({
+        id: z.number(),
+        label: z.string(),
+        value: z.string(),
+      })
+    )
+    .refine((value) => value.length > 0, {
+      message: "Required",
+    }),
+});
+
+export default function ContentBlast(props: { type: string }) {
+  const editor = useRef(null);
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const { type } = props;
+
+  const [dataSelectCampaign, setDataSelectCampaign] = useState([]);
+  const [openModal, setOpenModal] = useState(false);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { selected: [], detail: "" },
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      MySwal.fire({
+        title: "Simpan Data",
+        text: "Apakah Anda yakin ingin menyimpan data ini?",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const selectedCampaign = form.getValues("selected");
+
+    for (let i = 0; i < selectedCampaign.length; i++) {
+      const reqData = {
+        mediaUploadId: id,
+        mediaBlastCampaignId: selectedCampaign[i].id,
+        subject: type == "wa" ? `*${data.title}*` : data.title,
+        body: data.detail?.replace(/\n/g, ""),
+        type: type,
+        isScheduled: false,
+        thumbnail: data?.thumbnail,
+        sendDate: getLocaleTimestamp(new Date()),
+        sendTime: getLocaleTime(new Date()),
+        contentUrl: data.url,
+      };
+
+      console.log("req =>", reqData);
+      const response = await saveMediaBlastBroadcast(reqData);
+    }
+    setOpenModal(true);
+  };
+
+  useEffect(() => {
+    async function initState() {
+      const response = await detailMediaSummary(String(id));
+      const details = response.data?.data;
+      if (details != undefined) {
+        form.setValue("thumbnail", details.smallThumbnailLink);
+        let body = `<div><p>Berita hari ini !!!</p><div style='margin-top:20px;border:1px solid;border-radius:10px;width:500px;background-color:#f7f7f7'><div><img style='width:500px;height:auto;border-radius:10px;object-fit:cover' src='${
+          details?.smallThumbnailLink
+        }'></div><a style='padding:5px 20px;margin:0;text-decoration:none' href='${
+          details?.pageUrl
+        }'>${details?.pageUrl}</a><h3 style='padding:5px 20px;margin:0'>${
+          details?.title
+        }</h3><p style='padding:0 20px;margin:0;margin-bottom:10px'>
+              ${textEllipsis(details?.description, 150)}</p></div></div>`;
+        form.setValue("title", `${details?.title}`);
+        form.setValue(
+          "url",
+          details?.pageUrl || "https://mediahub.polri.go.id"
+        );
+        if (type == "wa") {
+          body = `${textEllipsis(details?.description, 150)}`;
+          form.setValue("detail", body);
+        } else {
+          form.setValue("detail", body);
+        }
+      }
+    }
+
+    async function getCampaign() {
+      const response = await getMediaBlastCampaignList();
+      const campaign = response.data?.data?.content;
+      handleLabelCampaign(campaign);
+      console.log(campaign);
+    }
+
+    initState();
+    getCampaign();
+  }, [id]);
+
+  function handleLabelCampaign(data: any) {
+    const optionArr: any = [];
+
+    data.map((option: any) => {
+      optionArr.push({
+        id: option.id,
+        label: option.title,
+        value: option.title,
+      });
+    });
+    console.log("option arr", optionArr);
+    setDataSelectCampaign(optionArr);
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-3 bg-white rounded-sm p-4"
+      >
+        <p className="fonnt-semibold">Broadcast</p>
+        <FormField
+          control={form.control}
+          name="selected"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Subject</FormLabel>
+              <Select
+                options={dataSelectCampaign}
+                closeMenuOnSelect={false}
+                components={animatedComponent}
+                onChange={field.onChange}
+                isMulti
+              />
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Subject</FormLabel>
+              <Input
+                value={field.value}
+                placeholder="Masukkan Judul"
+                onChange={field.onChange}
+              />
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="detail"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Detail Perencanaan</FormLabel>
+              {type === "wa" ? (
+                <Textarea value={field.value} onChange={field.onChange} />
+              ) : (
+                <JoditEditor
+                  ref={editor}
+                  value={field.value}
+                  className="dark:text-black"
+                  onChange={field.onChange}
+                />
+              )}
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex flex-row gap-2 mt-4 pt-4">
+          <Button
+            size="md"
+            type="button"
+            variant="outline"
+            color="destructive"
+            className="text-xs"
+          >
+            Cancel
+          </Button>
+          <Button size="md" type="submit" color="primary" className="text-xs">
+            Submit
+          </Button>
+        </div>
+        <Dialog open={openModal}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Email Terkirim</DialogTitle>
+            </DialogHeader>
+            <div className="flex flex-col justify-center items-center gap-3 mb-3 text-sm">
+              <img
+                src="/assets/img/illust-for-broadcast-sent.png"
+                className="w-[70%]"
+              />
+              Untuk melihat Email Terkirim silahkan cek menu “Sent”!
+            </div>
+            <DialogFooter className="flex justify-center">
+              <Button type="button" color="success">
+                Menu "Sent"
+              </Button>
+              <Button
+                type="button"
+                onClick={() => router.push("/admin/broadcast")}
+                color="primary"
+              >
+                Okay
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/icon.tsx b/components/icon.tsx
index d2a65f90..39f88b1f 100644
--- a/components/icon.tsx
+++ b/components/icon.tsx
@@ -128,3 +128,37 @@ export const XIcon = ({
     />
   </svg>
 );
+
+export const NewCampaignIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 18 18"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_4_200)">
+      <path
+        d="M12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3V3.75H14.25C14.6284 3.74988 14.9929 3.8928 15.2704 4.15012C15.5479 4.40744 15.7179 4.76013 15.7463 5.1375L15.75 5.25V14.25C15.7501 14.6284 15.6072 14.9929 15.3499 15.2704C15.0926 15.5479 14.7399 15.7179 14.3625 15.7463L14.25 15.75H3.75C3.37157 15.7501 3.00708 15.6072 2.72959 15.3499C2.4521 15.0926 2.28213 14.7399 2.25375 14.3625L2.25 14.25V5.25C2.24988 4.87157 2.3928 4.50708 2.65012 4.22959C2.90744 3.9521 3.26013 3.78213 3.6375 3.75375L3.75 3.75H5.25V3C5.25 2.80109 5.32902 2.61032 5.46967 2.46967C5.61032 2.32902 5.80109 2.25 6 2.25C6.19891 2.25 6.38968 2.32902 6.53033 2.46967C6.67098 2.61032 6.75 2.80109 6.75 3V3.75H11.25V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25ZM11.118 7.03425L7.9365 10.2158L6.87525 9.15525C6.7338 9.01863 6.54435 8.94304 6.3477 8.94474C6.15105 8.94645 5.96294 9.02533 5.82389 9.16439C5.68483 9.30344 5.60595 9.49155 5.60424 9.6882C5.60254 9.88485 5.67813 10.0743 5.81475 10.2158L7.40025 11.802C7.4706 11.8724 7.55414 11.9283 7.64608 11.9664C7.73803 12.0045 7.83659 12.0241 7.93612 12.0241C8.03566 12.0241 8.13422 12.0045 8.22617 11.9664C8.31811 11.9283 8.40165 11.8724 8.472 11.802L12.1785 8.09475C12.2501 8.02557 12.3073 7.94281 12.3466 7.8513C12.3859 7.7598 12.4066 7.66139 12.4074 7.5618C12.4083 7.46222 12.3893 7.36346 12.3516 7.27129C12.3139 7.17911 12.2582 7.09537 12.1878 7.02495C12.1174 6.95453 12.0336 6.89884 11.9415 6.86113C11.8493 6.82342 11.7505 6.80445 11.6509 6.80531C11.5514 6.80618 11.4529 6.82687 11.3614 6.86617C11.2699 6.90548 11.1872 6.96262 11.118 7.03425Z"
+        fill="white"
+      />
+      <rect width="10" height="10" transform="translate(4 5)" fill="white" />
+      <path
+        d="M13.2857 10.7143H9.71429V14.2857C9.71429 14.6786 9.39286 15 9 15C8.60714 15 8.28571 14.6786 8.28571 14.2857V10.7143H4.71429C4.32143 10.7143 4 10.3929 4 10C4 9.60714 4.32143 9.28571 4.71429 9.28571H8.28571V5.71429C8.28571 5.32143 8.60714 5 9 5C9.39286 5 9.71429 5.32143 9.71429 5.71429V9.28571H13.2857C13.6786 9.28571 14 9.60714 14 10C14 10.3929 13.6786 10.7143 13.2857 10.7143Z"
+        fill="#0d6efd"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4_200">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/messages/in.json b/messages/in.json
index d7d91d9b..273f8511 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -297,7 +297,7 @@
     "colors": "Colors",
     "performance-polda": "Performa Polda",
     "analysis": "Analisa",
-    "content-management": "Manajemen Konten",
+    "management-content": "Manajemen Konten",
     "add-experts": "Tambah Tenaga Ahli",
     "category": "Kategori",
     "privacy": "Kebijakan Privacy"
diff --git a/public/assets/img/illust-for-broadcast-sent.png b/public/assets/img/illust-for-broadcast-sent.png
new file mode 100644
index 0000000000000000000000000000000000000000..83964a7d4870bb2197afd9218159a7230a63c62e
GIT binary patch
literal 11149
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
Na#G5mN}y5D{{R@$f`I@4

literal 0
HcmV?d00001

diff --git a/public/assets/img/illust-for-scheduled-broadcast-sent.png b/public/assets/img/illust-for-scheduled-broadcast-sent.png
new file mode 100644
index 0000000000000000000000000000000000000000..07882b7e15e99c49d697cc11ce3f68d0d3725e5e
GIT binary patch
literal 16747
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
Du0%Uz

literal 0
HcmV?d00001

diff --git a/service/broadcast/broadcast.ts b/service/broadcast/broadcast.ts
index 2007fac9..4dd58783 100644
--- a/service/broadcast/broadcast.ts
+++ b/service/broadcast/broadcast.ts
@@ -1,4 +1,8 @@
-import { httpGetInterceptor } from "../http-config/http-interceptor-service";
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
 
 export async function listDataMedia(
   page: number,
@@ -21,3 +25,55 @@ export async function getMediaBlastAccountPage(page: number, category: string) {
   const url = `media/blast/account/list?enablePage=1&size=10&page=${page}&category=${category}`;
   return httpGetInterceptor(url);
 }
+
+export async function saveMediaBlastCampaign(data: {
+  title: string;
+  sendTime: string;
+  status: string;
+  id?: string;
+}) {
+  const url = `media/blast/campaign`;
+  return httpPostInterceptor(url, data);
+}
+
+export async function getMediaBlastCampaignById(id: string) {
+  const url = `media/blast/campaign?id=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function getMediaBlastCampaignList() {
+  const url = `media/blast/campaign/list?enablePage=0&status=waiting`;
+  return httpGetInterceptor(url);
+}
+
+export async function detailMediaSummary(id: string) {
+  const url = `media?id=${id}&isSummary=true`;
+  return httpGetInterceptor(url);
+}
+
+export async function saveMediaBlastAccount(data: {
+  accountName: string;
+  accountType: string;
+  accountCategory: string;
+  emailAddress: string;
+  whatsappNumber: string;
+  id?: string;
+}) {
+  const url = `media/blast/account`;
+  return httpPostInterceptor(url, data);
+}
+
+export async function getMediaBlastAccount(id: string) {
+  const url = `media/blast/account?id=${id}`;
+  return httpGetInterceptor(url);
+}
+
+export async function deleteMediaBlastAccount(id: string) {
+  const url = `media/blast/account?id=${id}`;
+  return httpDeleteInterceptor(url);
+}
+
+export async function saveMediaBlastBroadcast(data: any) {
+  const url = `media/blast/broadcast`;
+  return httpPostInterceptor(url, data);
+}
diff --git a/service/http-config/http-interceptor-service.ts b/service/http-config/http-interceptor-service.ts
index dddd3eb4..bfc91897 100644
--- a/service/http-config/http-interceptor-service.ts
+++ b/service/http-config/http-interceptor-service.ts
@@ -30,7 +30,7 @@ export async function httpGetInterceptor(pathUrl: any) {
 
 export async function httpPostInterceptor(
   pathUrl: any,
-  data: any,
+  data?: any,
   headers?: any
 ) {
   const response = await axiosInterceptorInstance
diff --git a/service/settings/settings.ts b/service/settings/settings.ts
new file mode 100644
index 00000000..ac84c61a
--- /dev/null
+++ b/service/settings/settings.ts
@@ -0,0 +1,30 @@
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
+
+export async function getCategories() {
+  const url = "media/categories/list?enablePage=1&size=50&sort=desc&sortBy=id";
+  return httpGetInterceptor(url);
+}
+
+export async function publishUnpublishCategory(id: number, status: string) {
+  const url = `media/categories/publish?id=${id}&status=${status}`;
+  return httpPostInterceptor(url);
+}
+
+export async function deleteCategory(id: number) {
+  const url = `media/categories/${id}`;
+  return httpDeleteInterceptor(url);
+}
+
+export async function getUserRoles() {
+  const url = "users/roles";
+  return httpGetInterceptor(url);
+}
+
+export async function postCategory(data: any) {
+  const url = "media/categories";
+  return httpPostInterceptor(url, data);
+}
diff --git a/utils/globals.tsx b/utils/globals.tsx
index aed43ec7..9493c266 100644
--- a/utils/globals.tsx
+++ b/utils/globals.tsx
@@ -8,7 +8,11 @@ export const generateLocalizedPath = (href: string, locale: string): string => {
   return `/${locale}${href}`;
 };
 
-export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) {
+export function textEllipsis(
+  str: string,
+  maxLength: number,
+  { side = "end", ellipsis = "..." } = {}
+) {
   if (str !== undefined && str?.length > maxLength) {
     switch (side) {
       case "start":
@@ -67,7 +71,10 @@ export function getOnlyMonthAndYear(d: Date) {
 
 export function getPublicLocaleTimestamp(d: any) {
   const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
-  return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${pad(d.getFullYear(), 4)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${pad(
+    d.getFullYear(),
+    4
+  )} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
 export function capitalize(s: any) {
@@ -79,3 +86,17 @@ export function capitalize(s: any) {
   return splitStr.join(" ");
 }
 
+export function getLocaleTimestamp(d: Date): string {
+  const pad = (n: number, s: number = 2): string =>
+    `${new Array(s).fill(0)}${n}`.slice(-s);
+
+  return `${pad(d.getDate())}-${pad(d.getMonth() + 1)}-${pad(
+    d.getFullYear(),
+    4
+  )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+export function getLocaleTime(d: Date) {
+  const pad = (n: number, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}