pelagia-portal/App/app/(portal)/admin/vendors/page.tsx

import { auth } from "@/auth";
import { db } from "@/lib/db";
import { hasPermission } from "@/lib/permissions";
import { redirect } from "next/navigation";
import Link from "next/link";
import { AddVendorButton, EditVendorButton } from "./vendor-form";
import { ConfirmDeleteButton } from "@/components/ui/confirm-delete-button";
import { deleteVendor } from "./actions";
import { nextId } from "@/lib/id-generators";
import type { Metadata } from "next";

export const metadata: Metadata = { title: "Vendor Registry" };

export default async function AdminVendorsPage() {
  const session = await auth();
  if (!session?.user) redirect("/login");
  if (!hasPermission(session.user.role, "manage_vendors")) redirect("/dashboard");

  const vendors = await db.vendor.findMany({
    orderBy: { name: "asc" },
    include: {
      _count: { select: { vendorPrices: true } },
      contacts: { orderBy: [{ isPrimary: "desc" }, { createdAt: "asc" }] },
    },
  });

  const suggestedVendorId = nextId("VND", vendors.map((v) => v.vendorId));

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-neutral-900">Vendor Registry</h1>
        <AddVendorButton suggestedId={suggestedVendorId} />
      </div>

      <div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-neutral-50 border-b border-neutral-200">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Vendor ID</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Name</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Contact</th>
              <th className="px-4 py-3 text-right font-medium text-neutral-600">Items</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Verified</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {vendors.map((vendor) => (
              <tr key={vendor.id} className="hover:bg-neutral-50">
                <td className="px-4 py-3 font-mono text-xs text-neutral-600">
                  {vendor.vendorId ?? <span className="text-warning-700 italic">Pending</span>}
                </td>
                <td className="px-4 py-3">
                  <Link
                    href={`/admin/vendors/${vendor.id}`}
                    className="font-medium text-primary-600 hover:underline"
                  >
                    {vendor.name}
                  </Link>
                </td>
                <td className="px-4 py-3 text-neutral-600">
                  {vendor.contacts.length > 0 ? (
                    <>
                      <span>{vendor.contacts[0].name}</span>
                      {vendor.contacts[0].email && (
                        <span className="block text-xs text-neutral-400">{vendor.contacts[0].email}</span>
                      )}
                      {vendor.contacts.length > 1 && (
                        <span className="block text-xs text-neutral-400">+{vendor.contacts.length - 1} more</span>
                      )}
                    </>
                  ) : "—"}
                </td>
                <td className="px-4 py-3 text-right text-neutral-600">
                  {vendor._count.vendorPrices > 0 ? vendor._count.vendorPrices : <span className="text-neutral-400">—</span>}
                </td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    vendor.isVerified ? "bg-success-100 text-success-700" : "bg-warning-100 text-warning-700"
                  }`}>
                    {vendor.isVerified ? "Verified" : "Unverified"}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    vendor.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"
                  }`}>
                    {vendor.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <span className="flex items-center gap-3">
                    <EditVendorButton vendor={{
                      id: vendor.id,
                      name: vendor.name,
                      vendorId: vendor.vendorId,
                      address: vendor.address ?? null,
                      pincode: vendor.pincode ?? null,
                      gstin: vendor.gstin ?? null,
                      isActive: vendor.isActive,
                      contacts: vendor.contacts.map((c) => ({
                        name: c.name, role: c.role ?? "", mobile: c.mobile ?? "",
                        email: c.email ?? "", isPrimary: c.isPrimary,
                      })),
                    }} />
                    <ConfirmDeleteButton onDelete={deleteVendor.bind(null, vendor.id)} label={vendor.name} />
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}