EpicNext-Cms/src/app/admin/vouchers/page.tsx

import { createVoucher, deleteVoucher } from "@/actions/admin-vouchers";
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 = [];
  }

  return (
    <main>
      <h1>Shop Vouchers</h1>
      <p className="muted">
        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>

      <form action={createVoucher} className="card" style={{ marginBottom: "1.5rem" }}>
        <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="muted">Code</span>
            <input name="code" placeholder="SUMMER2026" maxLength={255} required />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
            <span className="muted">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="muted">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="muted">Expires at (optional)</span>
            <input name="expiresAt" type="datetime-local" />
          </label>
        </div>
        <button type="submit" className="btn btn-primary">Create voucher</button>
      </form>

      <div className="card">
        <table>
          <thead>
            <tr>
              <th>Code</th>
              <th>Amount</th>
              <th>Uses</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>
                    {expired ? (
                      <span className="muted"> · expired</span>
                    ) : usedUp ? (
                      <span className="muted"> · used up</span>
                    ) : null}
                  </td>
                  <td>{v.amount}</td>
                  <td>
                    {v.useCount} / {v.maxUses}
                  </td>
                  <td className="muted">{fmtDate(v.expiresAt)}</td>
                  <td className="muted">{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 ? <p className="muted">No vouchers yet.</p> : null}
      </div>
    </main>
  );
}