web-campaignpool/components/table/user-management-table.tsx

"use client";

import { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import DialogUserDetail from "../dialog/admin-detail";

export default function UserManagementTable() {
  const [selectedUser, setSelectedUser] = useState<any>(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const data = [
    {
      createdAt: "14 Januari 2025 13:00",
      fullName: "Novan Farhandi",
      email: "novanfarhandi@example.com",
      status: "Approved",
    },
    {
      createdAt: "14 Januari 2025 13:00",
      fullName: "Salma Husna",
      email: "salmahusna@example.com",
      status: "Tertunda",
    },
  ];

  const openDialog = (user: any) => {
    setSelectedUser(user);
    setIsDialogOpen(true);
  };

  const closeDialog = () => {
    setIsDialogOpen(false);
    setSelectedUser(null);
  };

  return (
    <div className="bg-white shadow rounded-lg p-4">
      <div className="overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-100">
              <TableHead className="text-gray-600">Nama Lengkap</TableHead>
              <TableHead className="text-gray-600">Email</TableHead>
              <TableHead className="text-gray-600">Tanggal Daftar</TableHead>
              <TableHead className="text-gray-600">Status</TableHead>
              <TableHead className="text-gray-600">Tindakan</TableHead>
            </TableRow>
          </TableHeader>

          <TableBody>
            {data.map((row, i) => (
              <TableRow key={i} className="hover:bg-gray-50 transition-colors">
                <TableCell>{row.fullName}</TableCell>
                <TableCell className="font-medium text-gray-800">
                  {row.email}
                </TableCell>
                <TableCell className="text-gray-700">{row.createdAt}</TableCell>

                <TableCell>
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      row.status === "Approved"
                        ? "bg-green-100 text-green-700"
                        : "bg-gray-200 text-gray-700"
                    }`}
                  >
                    {row.status}
                  </span>
                </TableCell>

                <TableCell>
                  <div className="flex flex-wrap gap-2">
                    <button
                      className="text-blue-600 hover:underline"
                      onClick={() => openDialog(row)}
                    >
                      Lihat
                    </button>
                    <button className="text-green-600 hover:underline">
                      Approve
                    </button>
                    <button className="text-red-500 hover:underline">
                      Hapus
                    </button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mt-4 text-sm text-gray-500 gap-2">
        <div className="flex items-center">
          <span>Rows per page:</span>
          <select className="ml-2 border rounded px-1 py-0.5">
            <option>6</option>
            <option>12</option>
          </select>
        </div>

        <div className="flex items-center justify-between sm:justify-end gap-2">
          <span>1–1 of 1</span>
          <div className="flex gap-1">
            <button className="text-gray-400 hover:text-gray-600">◀</button>
            <button className="text-gray-400 hover:text-gray-600">▶</button>
          </div>
        </div>
      </div>

      {/* ✅ Dialog terpisah */}
      <DialogUserDetail
        isOpen={isDialogOpen}
        onClose={closeDialog}
        user={selectedUser}
      />
    </div>
  );
}