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";

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>
      <section className="admin-section">
        <h2>Badges</h2>
        <p className="muted">
          Website badge catalogue (<code>website_badges</code>). Granting fires the emulator
          <code> givebadge</code> RCON command and records the badge in <code>users_badges</code>.
        </p>

        {uploaded ? (
          <p>
            <span className="admin-badge ok">Uploaded</span> Badge image{" "}
            <code>{uploaded}.gif</code> saved.
          </p>
        ) : null}
        {error ? (
          <p>
            <span className="admin-badge danger">Error</span> {error}
          </p>
        ) : null}
      </section>

      <section className="admin-section">
        <h2>Upload badge image</h2>
        <p className="muted" style={{ marginTop: "-0.4rem" }}>
          Saves a <code>.gif</code> badge image to the emulator badge directory
          (<code>BADGE_UPLOAD_DIR</code>). The file is stored as <code>&lt;code&gt;.gif</code>.
        </p>
        <form action={uploadBadge} className="card">
          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "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}"
              style={{ flex: 1, minWidth: 160 }}
            />
            <button type="submit" className="btn btn-primary">
              Upload
            </button>
          </div>
        </form>
      </section>

      <section className="admin-section">
        <h2>Give badge to user</h2>
        <form action={giveBadge} className="card">
          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
            <input name="userId" type="number" min={1} placeholder="User ID" required />
            <input
              name="code"
              placeholder="Badge code (e.g. ADM)"
              required
              maxLength={32}
              style={{ flex: 1, minWidth: 160 }}
              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="admin-section">
        <h2>Catalogue ({badges.length})</h2>
        {badges.length === 0 ? (
          <p className="muted">No badges in the catalogue.</p>
        ) : (
          <div style={{ overflowX: "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="muted">{b.badgeDescription}</td>
                    <td>
                      <form
                        action={giveBadge}
                        style={{ display: "flex", gap: "0.4rem", alignItems: "center" }}
                      >
                        <input type="hidden" name="code" value={b.badgeKey} />
                        <input
                          name="userId"
                          type="number"
                          min={1}
                          placeholder="User ID"
                          required
                          style={{ width: 90 }}
                        />
                        <button type="submit" className="btn btn-outline">
                          Give
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}