MineGeo/app/dashboard/page.tsx

import { getI18n } from "@/lib/i18n";
import { Header, Footer } from "@/components/Shell";
import { SignIn } from "@/components/SignIn";
import { Dashboard } from "@/components/Dashboard";
import { admin, user, required } from "@/lib/supabase";
import Link from "next/link";
import { accountProfile } from "@/lib/profile";
import { Username } from "@/components/Username";
export const dynamic = "force-dynamic";
export default async function DashboardPage() {
  const { t, formatDate } = await getI18n();
  const account = await user();
  const profile = account ? await accountProfile(account) : null;
  const historyCutoff = new Date(
    Date.now() - 30 * 24 * 60 * 60 * 1000,
  ).toISOString();
  const history = account
    ? required(
        await admin()
          .from("game_sessions")
          .select("id,difficulty,difficulty_settings,created_at,current_round")
          .eq("owner_id", account.id)
          .gte("created_at", historyCutoff)
          .order("created_at", { ascending: false })
          .limit(5),
      )
    : [];
  return (
    <>
      <Header />
      <main className="section page-content">
        {account ? (
          <>
            <span className="eyebrow">{t("THE CARTOGRAPHER’S DESK")}</span>
            <h1>{t("My expedition.")}</h1>
            <p className="lead">
              {t("Welcome back,")}{" "}
              <Username
                name={profile?.display_name ?? "Explorer"}
                appearance={profile ?? undefined}
              />
              .
            </p>
            <Dashboard />
            <div className="inline-actions dashboard-profile-actions">
              <Link className="button primary" href="/cosmetics">
                {t("Browse profile cosmetics")}
              </Link>
              <Link className="button" href={"/players/" + account.id}>
                {t("View public profile")}
              </Link>
            </div>
            {history.length > 0 && (
              <section className="token-box">
                <h2>{t("Recent journeys")}</h2>
                <p className="muted">
                  {t("Your five latest journeys from the past 30 days.")}
                </p>
                {history.map((s) => (
                  <div className="draft-row" key={s.id}>
                    <span>
                      {formatDate(s.created_at)} ·{" "}
                      {s.difficulty_settings &&
                      typeof s.difficulty_settings === "object" &&
                      !Array.isArray(s.difficulty_settings) &&
                      typeof s.difficulty_settings.name === "string"
                        ? ["easy", "normal", "hard"].includes(s.difficulty)
                          ? t(s.difficulty_settings.name)
                          : s.difficulty_settings.name
                        : t(
                            s.difficulty[0].toUpperCase() +
                              s.difficulty.slice(1),
                          )}{" "}
                      · {s.current_round}
                      {t("/5 rounds")}
                    </span>
                    <Link
                      className="button"
                      href={`/${s.current_round >= 5 ? "results" : "play"}/${s.id}`}
                    >
                      {t("Open →")}
                    </Link>
                  </div>
                ))}
              </section>
            )}
          </>
        ) : (
          <SignIn />
        )}
      </main>
      <Footer />
    </>
  );
}