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

import { giveBadge } from "@/actions/admin-badges";
import { uploadBadge } from "@/actions/admin-badge-upload";
import { prisma } from "@/lib/prisma";
import { Award } from "lucide-react";

export const dynamic = "force-dynamic";

export const metadata = { title: "Badges" };

export default async function AdminBadges({
  searchParams,
}: {
  searchParams: Promise<{ uploaded?: string; error?: string }>;
}) {
  const { uploaded, error } = await searchParams;

  let badges: Awaited<ReturnType<typeof prisma.websiteBadges.findMany>> = [];
  try {
    badges = await prisma.websiteBadges.findMany({
      orderBy: { badgeName: "asc" },
      take: 500,
    });
  } catch {
    badges = [];
  }

  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">
          <Award size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Badges</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Website badge catalogue.</p>
        </div>
      </div>

      {uploaded && (
        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
          Uploaded Badge image <code>{uploaded}.gif</code> saved.
        </div>
      )}
      {error && (
        <div className="mb-4 p-3 rounded-lg bg-red-600/10 text-red-600 dark:text-red-400 text-xs">
          Error: {error}
        </div>
      )}

      <section className="mt-6">
        <h2 className="admin-section-title">Upload badge image</h2>
        <p className="text-xs text-[var(--color-text-muted)] -mt-2 mb-3">
          Saves a <code>.gif</code> badge image to the emulator badge directory.
        </p>
        <form action={uploadBadge} className="admin-card">
          <div className="flex gap-2 flex-wrap items-center">
            <input type="file" name="file" accept=".gif,.png" required />
            <input
              name="code"
              placeholder="Badge code (e.g. ADM)"
              required
              maxLength={64}
              pattern="[A-Za-z0-9_-]{1,64}"
              className="flex-1 min-w-[160px]"
            />
            <button type="submit" className="btn btn-primary">
              Upload
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">Give badge to user</h2>
        <form action={giveBadge} className="admin-card">
          <div className="flex gap-2 flex-wrap items-center">
            <input name="userId" type="number" min={1} placeholder="User ID" required />
            <input
              name="code"
              placeholder="Badge code (e.g. ADM)"
              required
              maxLength={32}
              className="flex-1 min-w-[160px]"
              list="badge-codes"
            />
            <datalist id="badge-codes">
              {badges.map((b) => (
                <option key={String(b.id)} value={b.badgeKey}>
                  {b.badgeName}
                </option>
              ))}
            </datalist>
            <button type="submit" className="btn btn-primary">
              Give badge
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">Catalogue ({badges.length})</h2>
        {badges.length === 0 ? (
          <div className="admin-empty">No badges in the catalogue.</div>
        ) : (
          <div className="overflow-x-auto">
            <table>
              <thead>
                <tr>
                  <th>Code</th>
                  <th>Name</th>
                  <th>Description</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {badges.map((b) => (
                  <tr key={String(b.id)}>
                    <td>
                      <code>{b.badgeKey}</code>
                    </td>
                    <td>{b.badgeName}</td>
                    <td className="text-sm text-gray-500 dark:text-gray-400">{b.badgeDescription}</td>
                    <td>
                      <form
                        action={giveBadge}
                        className="flex gap-2 items-center"
                      >
                        <input type="hidden" name="code" value={b.badgeKey} />
                        <input
                          name="userId"
                          type="number"
                          min={1}
                          placeholder="User ID"
                          required
                          className="w-[90px]"
                        />
                        <button type="submit" className="btn btn-outline">
                          Give
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}