Epicnabbo-Catalogus-Updated-Daily/src/app/admin/vouchers/page.tsx

import { Gift } from "lucide-react";
import { createVoucher, deleteVoucher } from "@/actions/admin-vouchers";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type VoucherRow = {
  id: bigint;
  code: string;
  amount: number;
  maxUses: number;
  useCount: number;
  expiresAt: Date | null;
  createdAt: Date | null;
};

function fmtDate(d: Date | null): string {
  if (!d) return "—";
  return d.toISOString().slice(0, 16).replace("T", " ");
}

export default async function AdminVouchers() {
  const now = Date.now();

  let vouchers: VoucherRow[] = [];
  try {
    vouchers = await prisma.websiteShopVouchers.findMany({
      select: {
        id: true,
        code: true,
        amount: true,
        maxUses: true,
        useCount: true,
        expiresAt: true,
        createdAt: true,
      },
      orderBy: { id: "desc" },
      take: 200,
    });
  } catch {
    vouchers = [];
  }

  const active = vouchers.filter((v) => {
    const expired = v.expiresAt ? v.expiresAt.getTime() <= now : false;
    const usedUp = v.maxUses > 0 && v.useCount >= v.maxUses;
    return !expired && !usedUp;
  }).length;
  const expiredCount = vouchers.filter(
    (v) => v.expiresAt && v.expiresAt.getTime() <= now,
  ).length;
  const usedUpCount = vouchers.filter(
    (v) => v.maxUses > 0 && v.useCount >= v.maxUses,
  ).length;

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Gift size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Shop Vouchers</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Codes redeemable on the website shop for a balance top-up. Each user can use a given voucher once, up to its max uses.</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="Vouchers" value={vouchers.length} icon="🎟️" />
        <StatusCard
          label="Active"
          value={active}
          state={active > 0 ? "ok" : "neutral"}
          icon="✅"
        />
        <StatusCard
          label="Used up"
          value={usedUpCount}
          state={usedUpCount > 0 ? "warn" : "neutral"}
          icon="📉"
        />
        <StatusCard
          label="Expired"
          value={expiredCount}
          state={expiredCount > 0 ? "danger" : "neutral"}
          icon="⏰"
        />
      </div>

      <form action={createVoucher} className="admin-card mb-6">
        <h3 style={{ marginTop: 0 }}>New voucher</h3>
        <div className="grid cols-2" style={{ marginBottom: "0.75rem" }}>
          <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
            <span className="text-sm text-gray-500 dark:text-gray-400">Code</span>
            <input name="code" placeholder="SUMMER2026" maxLength={255} required />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
            <span className="text-sm text-gray-500 dark:text-gray-400">Amount (balance added)</span>
            <input name="amount" type="number" min={1} placeholder="50" required />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
            <span className="text-sm text-gray-500 dark:text-gray-400">Max uses</span>
            <input name="maxUses" type="number" min={1} defaultValue={1} required />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
            <span className="text-sm text-gray-500 dark:text-gray-400">Expires at (optional)</span>
            <input name="expiresAt" type="datetime-local" />
          </label>
        </div>
        <button type="submit" className="btn btn-primary">Create voucher</button>
      </form>

      <section className="mt-6">
        <h2 className="admin-section-title">Vouchers ({vouchers.length})</h2>
        <div className="admin-card">
          <table>
            <thead>
              <tr>
                <th>Code</th>
                <th>Amount</th>
                <th>Uses</th>
                <th>Status</th>
                <th>Expires</th>
                <th>Created</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {vouchers.map((v) => {
                const expired = v.expiresAt ? v.expiresAt.getTime() <= now : false;
                const usedUp = v.maxUses > 0 && v.useCount >= v.maxUses;
                return (
                  <tr key={v.id.toString()}>
                    <td>
                      <code>{v.code}</code>
                    </td>
                    <td>{v.amount}</td>
                    <td>
                      {v.useCount} / {v.maxUses}
                    </td>
                    <td>
                      {expired ? (
                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Expired</span>
                      ) : usedUp ? (
                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">Used up</span>
                      ) : (
                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Active</span>
                      )}
                    </td>
                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{fmtDate(v.expiresAt)}</td>
                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{fmtDate(v.createdAt)}</td>
                    <td>
                      <form action={deleteVoucher}>
                        <input type="hidden" name="id" value={v.id.toString()} />
                        <button type="submit" className="btn btn-danger">
                          Delete
                        </button>
                      </form>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {vouchers.length === 0 ? <div className="admin-empty">No vouchers yet.</div> : null}
        </div>
      </section>
    </main>
  );
}