Enhance API with OIDC support, including login and callback endpoints. Update environment variables for OIDC configuration in .env.example. Add new features to the catalog service for listing software families, Minecraft versions, and deployment regions. Implement server management actions such as kill, delete, and update in the servers module. Integrate feature flags for maintenance mode in server operations. Update pnpm-lock.yaml with new dependencies and versions.

apps/web/src/components/account/billing-content.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { getWallet } from "@/lib/api/billing";
+
+export function BillingContent() {
+  const t = useTranslations("account.billing");
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["wallet"],
+    queryFn: getWallet,
+  });
+
+  if (isLoading) {
+    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
+  }
+
+  if (isError || !data) {
+    return <p className="text-sm text-red-600 dark:text-red-400">{t("loadError")}</p>;
+  }
+
+  const transactions = data.transactions ?? [];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
+          {t("title")}
+        </h1>
+        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("balanceTitle")}</CardTitle>
+          <CardDescription>
+            {t("periodStart", {
+              date: new Date(data.periodStart).toLocaleDateString(),
+            })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="font-mono text-3xl font-semibold text-zinc-900 dark:text-zinc-50">
+            {data.balance}
+          </p>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("creditsLabel")}</p>
+        </CardContent>
+      </Card>
+
+      <section>
+        <h2 className="mb-4 text-lg font-medium text-zinc-900 dark:text-zinc-50">
+          {t("transactionsTitle")}
+        </h2>
+        {transactions.length === 0 ? (
+          <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("transactionsEmpty")}</p>
+        ) : (
+          <div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800">
+            <table className="min-w-full text-left text-sm">
+              <thead className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
+                <tr>
+                  <th className="px-4 py-3 font-medium">{t("columns.date")}</th>
+                  <th className="px-4 py-3 font-medium">{t("columns.type")}</th>
+                  <th className="px-4 py-3 font-medium">{t("columns.amount")}</th>
+                  <th className="px-4 py-3 font-medium">{t("columns.reference")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {transactions.map((tx) => (
+                  <tr
+                    key={tx.id}
+                    className="border-b border-zinc-100 last:border-0 dark:border-zinc-800"
+                  >
+                    <td className="px-4 py-3 font-mono text-xs">
+                      {new Date(tx.createdAt).toLocaleString()}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs">{tx.type}</td>
+                    <td className="px-4 py-3 font-mono">{tx.amount}</td>
+                    <td className="px-4 py-3 font-mono text-xs">
+                      {tx.referenceType ?? "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}