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

import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

const PAID_STATUS = new Set(["completed", "paid", "success", "approved"]);

function statusState(status: string | null | undefined): "ok" | "danger" | undefined {
  if (!status) return undefined;
  const s = status.toLowerCase();
  if (PAID_STATUS.has(s)) return "ok";
  if (s === "failed" || s === "denied" || s === "refunded" || s === "cancelled" || s === "canceled")
    return "danger";
  return undefined;
}

export default async function AdminShop() {
  const t = await getTranslations("pages.admin.shop");

  let packages: Awaited<ReturnType<typeof prisma.websiteShopArticles.findMany>> = [];
  try {
    packages = await prisma.websiteShopArticles.findMany({
      orderBy: [{ position: "asc" }, { name: "asc" }],
      take: 500,
    });
  } catch {
    packages = [];
  }

  let orders: Awaited<ReturnType<typeof prisma.websitePaypalTransactions.findMany>> = [];
  try {
    orders = await prisma.websitePaypalTransactions.findMany({
      orderBy: { createdAt: "desc" },
      take: 50,
    });
  } catch {
    orders = [];
  }

  const paidOrders = orders.filter((o) => statusState(o.status) === "ok").length;

  return (
    <main>
      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
        <h1 style={{ flex: 1 }}>{t("title")}</h1>
        <Link href="/admin/shop/new" className="btn btn-primary">
          {t("newPackage")}
        </Link>
      </div>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        {t("subtitle")} (<code>website_shop_articles</code>). {t("tableHint")}
      </p>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={t("packages")} value={packages.length} icon="🛍️" />
        <StatusCard label={t("recentOrders")} value={orders.length} icon="🧾" />
        <StatusCard
          label={t("paidOrders")}
          value={paidOrders}
          state={paidOrders > 0 ? "ok" : "neutral"}
          icon="💳"
        />
      </div>

      <section className="mt-6">
        <h2>
          {t("packages")} ({packages.length})
        </h2>
        {packages.length === 0 ? (
          <p className="muted">{t("noPackages")}</p>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>{t("colName")}</th>
                  <th>{t("colPrice")}</th>
                  <th>{t("colCredits")}</th>
                  <th>{t("colDuckets")}</th>
                  <th>{t("colDiamonds")}</th>
                  <th>{t("colRank")}</th>
                  <th>{t("colPosition")}</th>
                </tr>
              </thead>
              <tbody>
                {packages.map((p) => (
                  <tr key={String(p.id)}>
                    <td className="muted">{String(p.id)}</td>
                    <td>
                      <Link href={`/admin/shop/${p.id}`}>{p.name}</Link>
                    </td>
                    <td>{p.costs}</td>
                    <td className="muted">{p.credits ?? "—"}</td>
                    <td className="muted">{p.duckets ?? "—"}</td>
                    <td className="muted">{p.diamonds ?? "—"}</td>
                    <td className="muted">{p.giveRank ?? "—"}</td>
                    <td className="muted">{p.position}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>

      <section className="mt-6">
        <h2>
          {t("recentOrders")} ({orders.length})
        </h2>
        <p className="muted" style={{ marginTop: "-0.4rem" }}>
          {t("ordersHint")} (<code>website_paypal_transactions</code>).
        </p>
        {orders.length === 0 ? (
          <p className="muted">{t("noOrders")}</p>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table>
              <thead>
                <tr>
                  <th>{t("colTransaction")}</th>
                  <th>{t("colUser")}</th>
                  <th>{t("colDescription")}</th>
                  <th>{t("colAmount")}</th>
                  <th>{t("colStatus")}</th>
                  <th>{t("colDate")}</th>
                </tr>
              </thead>
              <tbody>
                {orders.map((o) => {
                  const state = statusState(o.status);
                  return (
                    <tr key={String(o.id)}>
                      <td>
                        <code>{o.transactionId}</code>
                      </td>
                      <td className="muted">{o.userId}</td>
                      <td className="muted">{o.description ?? "—"}</td>
                      <td>
                        {o.amount} {o.currency}
                      </td>
                      <td>
                        {o.status ? (
                          <span
                            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : state === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                          >
                            {o.status}
                          </span>
                        ) : (
                          <span className="muted">—</span>
                        )}
                      </td>
                      <td className="muted">{o.createdAt ? o.createdAt.toISOString().slice(0, 10) : "—"}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}