web-campaignpool/components/table/approver-table.tsx

"use client";

import { useState, useMemo } from "react";
import { Eye } from "lucide-react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import Link from "next/link";

export default function ApproverTable() {
  const [activeCategory, setActiveCategory] = useState("Semua");

  const categories = [
    "Semua",
    "Online Media",
    "Social Media",
    "Videotron",
    "Radio Polri",
    "TV Polri",
    "Majalah Digital",
  ];

  const data = [
    {
      id: 1,
      no: 1,
      media: "Online Media",
      title:
        "Lorem ipsum dolor sit amet consectetur. Tempor mi scelerisque enim semper sed nibh. Eget sit molestie.",
      status: "Tertunda",
    },
    {
      id: 2,
      no: 2,
      media: "Social Media",
      title:
        "Lorem ipsum dolor sit amet consectetur. Ultricies pellentesque ullamcorper mattis pellentesque. Amet eu ut.",
      status: "Tertunda",
    },
    {
      id: 3,
      no: 3,
      media: "Videotron",
      title:
        "Lorem ipsum dolor sit amet consectetur. Nisl orci magna ridiculus egestas. Eu sit ut vitae interdum. Aenean.",
      status: "Tertunda",
    },
    {
      id: 4,
      no: 4,
      media: "Radio Polri",
      title:
        "Lorem ipsum dolor sit amet consectetur. Tincidunt sem tellus interdum pharetra pharetra arcu. Sapien varius.",
      status: "Tertunda",
    },
    {
      id: 5,
      no: 5,
      media: "TV Polri",
      title:
        "Lorem ipsum dolor sit amet consectetur. Ac purus diam eget nulla turpis elementum. Est vestibulum nibh.",
      status: "Selesai",
    },
    {
      id: 6,
      no: 6,
      media: "Majalah Digital",
      title:
        "Lorem ipsum dolor sit amet consectetur. Eget odio magna id velit lacus tellus. Fermentum molestie viverra.",
      status: "Selesai",
    },
  ];

  // ✅ Filter data berdasarkan kategori aktif
  const filteredData = useMemo(() => {
    if (activeCategory === "Semua") return data;
    return data.filter(
      (item) => item.media.toLowerCase() === activeCategory.toLowerCase(),
    );
  }, [activeCategory]);

  return (
    <div className="p-4 sm:p-6 space-y-4">
      {/* ✅ Tabs Navigation */}
      <Tabs
        defaultValue={activeCategory}
        onValueChange={setActiveCategory}
        className="max-w-4xl"
      >
        <TabsList className="w-full justify-start bg-black rounded-lg overflow-x-auto flex-nowrap p-1">
          {categories.map((cat) => (
            <TabsTrigger
              key={cat}
              value={cat}
              className={cn(
                "data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:font-semibold text-gray-300 rounded-lg text-sm sm:text-base transition-all px-4 py-2 whitespace-nowrap",
              )}
            >
              {cat}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* ✅ Table from shadcn/ui */}
      <div className="bg-white border rounded-xl shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="bg-[#f9f9f9] border-b">
                <TableHead className="w-10 sm:w-12 text-left">No</TableHead>
                <TableHead className="w-28 sm:w-40 text-left">Media</TableHead>
                <TableHead className="min-w-[200px] text-left">
                  Judul Campaign
                </TableHead>
                <TableHead className="w-28 sm:w-32 text-left">Status</TableHead>
                <TableHead className="w-20 sm:w-24 text-left">
                  Tindakan
                </TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {filteredData.length > 0 ? (
                filteredData.map((item, index) => (
                  <TableRow
                    key={index}
                    className="hover:bg-gray-50 border-b last:border-none"
                  >
                    {/* ✅ Nomor selalu mulai dari 1 sesuai hasil filter */}
                    <TableCell className="p-3">{index + 1}</TableCell>
                    <TableCell className="p-3 font-semibold">
                      {item.media}
                    </TableCell>
                    <TableCell className="p-3">{item.title}</TableCell>
                    <TableCell className="p-3">
                      <span
                        className={cn(
                          "px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-medium whitespace-nowrap",
                          item.status === "Tertunda"
                            ? "bg-gray-200 text-gray-600"
                            : "bg-green-100 text-green-800",
                        )}
                      >
                        {item.status}
                      </span>
                    </TableCell>
                    <TableCell>
                      <Link href={`/dashboard/approver/detail/${item.id}`}>
                        <button className="text-blue-600 flex items-center gap-1 text-xs sm:text-sm hover:underline">
                          <Eye className="w-3 h-3 sm:w-4 sm:h-4" />
                          Lihat
                        </button>
                      </Link>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell
                    colSpan={5}
                    className="text-center py-4 text-gray-500"
                  >
                    Tidak ada data untuk kategori ini
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        {/* ✅ Pagination */}
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center px-4 py-3 text-xs sm:text-sm text-gray-500 gap-2 sm:gap-0">
          <span>Rows per page: {filteredData.length}</span>
          <div className="flex items-center justify-between w-full sm:w-auto">
            <span>
              {filteredData.length > 0
                ? `1–${filteredData.length} of ${filteredData.length}`
                : "0 of 0"}
            </span>
            <div className="flex gap-2 ml-4">
              <button className="text-gray-400 cursor-not-allowed">‹</button>
              <button className="text-gray-400 cursor-not-allowed">›</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}