mediahub-fe/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx

import * as React from "react";
import { ColumnDef } from "@tanstack/react-table";
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { format } from "date-fns";
import { Link } from "@/components/navigation";
import { deleteTicketInternal } from "@/service/communication/communication";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useTranslations } from "next-intl";

const MySwal = withReactContent(Swal);

const useTableColumns = (onDeleteSuccess?: () => void) => {
  const t = useTranslations("Table");

  const handleDelete = async (id: any) => {
    MySwal.fire({
      title: "Delete Data?",
      text: "Apakah Anda yakin ingin menghapus data ini?",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Ya, hapus",
    }).then(async (result) => {
      if (result.isConfirmed) {
        try {
          await deleteTicketInternal(id);

          MySwal.fire("Sukses", "Data berhasil dihapus!", "success");

          if (onDeleteSuccess) onDeleteSuccess();
        } catch (error) {
          console.log(error);
          MySwal.fire("Gagal", "Terjadi kesalahan saat menghapus", "error");
        }
      }
    });
  };

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
      header: t("no", { defaultValue: "No" }),
      cell: ({ row }) => <span> {row.getValue("no")}</span>,
    },
    {
      accessorKey: "title",
      header: t("question", { defaultValue: "Question" }),
      cell: ({ row }) => (
        <span className="normal-case"> {row.getValue("title")}</span>
      ),
    },
    {
      accessorKey: "createdBy",
      header: t("sender", { defaultValue: "Sender" }),
      cell: ({ row }) => {
        const createdBy = row.original.createdBy; // Akses properti category
        return (
          <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
        );
      },
    },
    {
      accessorKey: "sendTo",
      header: t("sendto", { defaultValue: "Sendto" }),
      cell: ({ row }) => {
        const sendTo = row.original.sendTo; // Akses properti category
        return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
      },
    },
    {
      accessorKey: "createdAt",
      header: t("time", { defaultValue: "Time" }),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
          | number
          | undefined;

        const formattedDate =
          createdAt && !isNaN(new Date(createdAt).getTime())
            ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
            : "-";
        return <span className="whitespace-nowrap">{formattedDate}</span>;
      },
    },
    {
      id: "actions",
      header: t("action"),
      cell: ({ row }) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button size="icon" className="bg-transparent hover:bg-transparent">
              <MoreVertical className="h-4 w-4 text-default-800" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="p-0">
            {/* View */}
            <Link
              href={`/shared/communication/internal/detail/${row.original.id}`}
            >
              <DropdownMenuItem className="p-2 border-b cursor-pointer hover:bg-slate-100">
                <Eye className="w-4 h-4 me-1.5" />
                View
              </DropdownMenuItem>
            </Link>

            {/* Edit */}
            <Link
              href={`/shared/communication/internal/update/${row.original.id}`}
            >
              <DropdownMenuItem className="p-2 border-b cursor-pointer hover:bg-slate-100">
                <SquarePen className="w-4 h-4 me-1.5" />
                Edit
              </DropdownMenuItem>
            </Link>

            {/* Delete */}
            <DropdownMenuItem
              className="p-2 text-destructive bg-destructive/30 cursor-pointer"
              onClick={() => handleDelete(row.original.id)}
            >
              <Trash2 className="w-4 h-4 me-1.5" />
              Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  return columns;
};

export default useTableColumns;