mediahub-fe/app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx

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";
import { validateMediaLink } from "@/service/media-tracking/media-tracking";
import toast from "react-hot-toast";

const columns: ColumnDef<any>[] = [
  {
    accessorKey: "no",
    header: "No",
    cell: ({ row }) => <span>{row.getValue("no")}</span>,
  },
  {
    accessorKey: "source",
    header: "Media Online",
    cell: ({ row }) => (
      <span className="normal-case">{row.getValue("source")}</span>
    ),
  },
  {
    accessorKey: "title",
    header: "Judul Berita",
    cell: ({ row }) => (
      <span className="normal-case">{row.getValue("title")}</span>
    ),
  },
  // {
  //   accessorKey: "link",
  //   header: "Link Berita",
  //   cell: ({ row }) => (
  //     <span className="normal-case">{row.getValue("link")}</span>
  //   ),
  // },
  {
    accessorKey: "link",
    header: "Link Berita",
    cell: ({ row }) => {
      const link = row.getValue<string>("link");

      if (!link) {
        return <span className="text-muted-foreground">-</span>;
      }

      return (
        <Link
          href={link}
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-600 underline hover:text-blue-800 break-all"
        >
          {link}
        </Link>
      );
    },
  },
  {
    id: "validation",
    header: "Validasi",
    cell: ({ row, table }) => {
      const original = row.original;

      // const isValid = original.isValid;
      const isRelevant = original.isRelevant;
      const link = original.link;

      const updateRow = (data: Partial<any>) => {
        table.options.meta?.updateData(row.index, data);
      };

      const handleValid = async () => {
        try {
          await validateMediaLink(original.id, true);
          updateRow({
            isRelevant: true,
          });
          table.options.meta?.refetchData?.();
        } catch (err: any) {
          toast.error(err.message);
        }
      };

      const handleInvalid = async () => {
        try {
          await validateMediaLink(original.id, false);

          updateRow({
            isRelevant: false,
          });
          table.options.meta?.refetchData?.();
        } catch (err: any) {
          toast.error(err.message);
        }
      };

      if (!link) {
        return <span className="text-muted-foreground">-</span>;
      }

      if (isRelevant === true) {
        return (
          <Button
            size="sm"
            className="bg-green-600 hover:bg-green-700"
            disabled
          >
            Relevan
          </Button>
        );
      }

      return (
        <div className="flex gap-2">
          <Button
            size="sm"
            variant="outline"
            onClick={handleValid}
            className="flex items-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
            >
              <path
                fill="currentColor"
                d="M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5l-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4"
              />
            </svg>
            Relevan
          </Button>
          <Button size="sm" variant="outline" onClick={handleInvalid} className="flex text-center items-center justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"
              />
            </svg>
            Tidak Relevan
          </Button>
        </div>
      );
    },
  },
];

export default columns;