arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: admin panel improvements (v0.34.0)

Browse Source 
- Signups toggle was inverted (on = disabled) — flipped so on means
  open, matching how every other on/off toggle in the app reads.
- Moved AI provider keys and default-model settings from Site
  Settings to AI Config, so all AI setup lives in one place instead
  of split across two pages with a cross-link.
- Admin overview: added new users/recipes (7d), recipes cooked (7d),
  pending reports (linked, highlighted if > 0), storage used this
  month, active webhooks, and API keys issued — previously just 4
  lifetime totals.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-14 15:40:32 +02:00
parent b330583dd3
commit bd3d8c88f0
8 changed files with 136 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/admin/ai-config/page.tsx
+34 -9
View File
@@ -2,11 +2,25 @@ import type { Metadata } from "next";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CheckCircle, XCircle, Database, Cpu } from "lucide-react";
import Link from "next/link";
import { getAllSiteSettings } from "@/lib/site-settings";
import { AdminSettingsForm } from "@/components/admin/admin-settings-form";
import { AdminDefaultModelForm } from "@/components/admin/admin-default-model-form";
export const metadata: Metadata = {};
const SETTING_GROUPS = [
{
title: "AI Provider Keys",
description: "Override the environment variable API keys at runtime. Values are encrypted at rest.",
keys: ["OPENAI_API_KEY", "ANTHROPIC_API_KEY", "OPENROUTER_API_KEY"] as const,
},
{
title: "AI Configuration",
description: "Provider routing and model defaults.",
keys: ["OPENROUTER_DEFAULT_MODEL", "OLLAMA_BASE_URL"] as const,
},
];
function resolveProvider(settings: Record<string, { value: string | null }>) {
if (settings["OPENROUTER_API_KEY"]?.value) return { provider: "OpenRouter", description: "Routes to many models via openrouter.ai" };
if (settings["OPENAI_API_KEY"]?.value) return { provider: "OpenAI", description: "Direct OpenAI API (GPT-4 etc.)" };
@@ -26,21 +40,17 @@ export default async function AdminAiConfigPage() {
];
return (
<div className="space-y-6">
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold tracking-tight">AI Configuration</h1>
<p className="text-muted-foreground text-sm mt-1">
Current AI provider settings. Override values in{" "}
<Link href="/admin/settings" className="text-primary underline-offset-4 hover:underline">
Site Settings
</Link>
.
Provider keys, routing, and default models for AI generation. DB values here take precedence over environment variables — clear a value to fall back to the env var.
</p>
</div>
<Card>
<CardHeader>
<CardTitle className="text-base">Active Provider</CardTitle>
<CardTitle className="text-base">Active Provider (fallback, no default set below)</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center gap-3">
@@ -48,7 +58,7 @@ export default async function AdminAiConfigPage() {
<span className="text-muted-foreground text-sm">{active.description}</span>
</div>
<p className="text-xs text-muted-foreground mt-3">
Priority: OpenRouter → OpenAI → Anthropic → Ollama (first configured key wins).
Priority: OpenRouter → OpenAI → Anthropic → Ollama (first configured key wins) — only when a user has no personal preference, no BYOK key, and no default is set for that use case below.
</p>
</CardContent>
</Card>
@@ -103,6 +113,21 @@ export default async function AdminAiConfigPage() {
</div>
</CardContent>
</Card>
{SETTING_GROUPS.map((group) => (
<AdminSettingsForm key={group.title} group={group} settings={settings} />
))}
<AdminDefaultModelForm
initialValues={{
DEFAULT_TEXT_PROVIDER: settings["DEFAULT_TEXT_PROVIDER"]?.value ?? null,
DEFAULT_TEXT_MODEL: settings["DEFAULT_TEXT_MODEL"]?.value ?? null,
DEFAULT_VISION_PROVIDER: settings["DEFAULT_VISION_PROVIDER"]?.value ?? null,
DEFAULT_VISION_MODEL: settings["DEFAULT_VISION_MODEL"]?.value ?? null,
DEFAULT_MEAL_PLAN_PROVIDER: settings["DEFAULT_MEAL_PLAN_PROVIDER"]?.value ?? null,
DEFAULT_MEAL_PLAN_MODEL: settings["DEFAULT_MEAL_PLAN_MODEL"]?.value ?? null,
}}
/>
</div>
);
}
apps/web/app/admin/page.tsx
+66 -17
View File
@@ -1,52 +1,101 @@
import type { Metadata } from "next";
import Link from "next/link";
import { db } from "@epicure/db";
import { users, recipes, userUsage, recipePhotos } from "@epicure/db";
import { count, eq, sql } from "@epicure/db";
import { users, recipes, userUsage, recipePhotos, reports, cookingHistory, webhooks, apiKeys } from "@epicure/db";
import { count, eq, gte, sql } from "@epicure/db";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, BookOpen, Sparkles, Image, History } from "lucide-react";
import { Users, BookOpen, Sparkles, Image, History, UserPlus, ChefHat, Flag, HardDrive, Webhook, KeyRound } from "lucide-react";
import { APP_VERSION, CHANGELOG } from "@/lib/changelog";
export const metadata: Metadata = {};
export default async function AdminPage() {
const currentMonth = new Date().toISOString().slice(0, 7);
const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
const [userCount, recipeCount, proUserCount, aiUsage, imageCount] = await Promise.all([
const [
userCount,
recipeCount,
proUserCount,
publicRecipeCount,
aiUsage,
imageCount,
storageUsage,
newUsers7d,
newRecipes7d,
cooked7d,
pendingReports,
webhookCount,
apiKeyCount,
] = await Promise.all([
db.select({ count: count() }).from(users).then((r) => r[0]),
db.select({ count: count() }).from(recipes).then((r) => r[0]),
db.select({ count: count() }).from(users).where(eq(users.tier, "pro")).then((r) => r[0]),
db.select({ count: count() }).from(recipes).where(eq(recipes.visibility, "public")).then((r) => r[0]),
db
.select({ total: sql<string>`coalesce(sum(${userUsage.aiCallsUsed}), 0)` })
.from(userUsage)
.where(eq(userUsage.month, currentMonth))
.then((r) => r[0]),
db.select({ count: count() }).from(recipePhotos).then((r) => r[0]),
db
.select({ total: sql<string>`coalesce(sum(${userUsage.storageUsedMb}), 0)` })
.from(userUsage)
.where(eq(userUsage.month, currentMonth))
.then((r) => r[0]),
db.select({ count: count() }).from(users).where(gte(users.createdAt, sevenDaysAgo)).then((r) => r[0]),
db.select({ count: count() }).from(recipes).where(gte(recipes.createdAt, sevenDaysAgo)).then((r) => r[0]),
db.select({ count: count() }).from(cookingHistory).where(gte(cookingHistory.cookedAt, sevenDaysAgo)).then((r) => r[0]),
db.select({ count: count() }).from(reports).where(eq(reports.status, "pending")).then((r) => r[0]),
db.select({ count: count() }).from(webhooks).where(eq(webhooks.active, true)).then((r) => r[0]),
db.select({ count: count() }).from(apiKeys).then((r) => r[0]),
]);
const stats = [
{ label: "Total Users", value: userCount?.count ?? 0, sub: `${proUserCount?.count ?? 0} pro`, icon: Users },
{ label: "Total Recipes", value: recipeCount?.count ?? 0, icon: BookOpen },
{ label: "New Users (7d)", value: newUsers7d?.count ?? 0, icon: UserPlus },
{ label: "Total Recipes", value: recipeCount?.count ?? 0, sub: `${publicRecipeCount?.count ?? 0} public`, icon: BookOpen },
{ label: "New Recipes (7d)", value: newRecipes7d?.count ?? 0, icon: BookOpen },
{ label: "Cooked (7d)", value: cooked7d?.count ?? 0, icon: ChefHat },
{ label: "AI Calls This Month", value: Number(aiUsage?.total ?? 0), icon: Sparkles },
{ label: "Recipe Photos", value: imageCount?.count ?? 0, icon: Image },
{ label: "Storage This Month", value: Number(storageUsage?.total ?? 0), unit: "MB", icon: HardDrive },
{
label: "Pending Reports",
value: pendingReports?.count ?? 0,
icon: Flag,
href: "/admin/reports",
highlight: (pendingReports?.count ?? 0) > 0,
},
{ label: "Active Webhooks", value: webhookCount?.count ?? 0, icon: Webhook },
{ label: "API Keys Issued", value: apiKeyCount?.count ?? 0, icon: KeyRound },
];
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold tracking-tight">Overview</h1>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
{stats.map(({ label, value, sub, icon: Icon }) => (
<Card key={label}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
<Icon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value.toLocaleString()}</div>
{sub && <p className="text-xs text-muted-foreground mt-1">{sub}</p>}
</CardContent>
</Card>
))}
{stats.map(({ label, value, sub, unit, icon: Icon, href, highlight }) => {
const card = (
<Card className={highlight ? "border-destructive/50" : undefined}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
<Icon className={highlight ? "h-4 w-4 text-destructive" : "h-4 w-4 text-muted-foreground"} />
</CardHeader>
<CardContent>
<div className={highlight ? "text-2xl font-bold text-destructive" : "text-2xl font-bold"}>
{value.toLocaleString()}{unit ? ` ${unit}` : ""}
</div>
{sub && <p className="text-xs text-muted-foreground mt-1">{sub}</p>}
</CardContent>
</Card>
);
return (
<div key={label}>
{href ? <Link href={href}>{card}</Link> : card}
</div>
);
})}
</div>
<Card>
apps/web/app/admin/settings/page.tsx
+2 -23
View File
@@ -1,22 +1,11 @@
import type { Metadata } from "next";
import { getAllSiteSettings, isSignupsDisabled } from "@/lib/site-settings";
import { AdminSettingsForm } from "@/components/admin/admin-settings-form";
import { AdminDefaultModelForm } from "@/components/admin/admin-default-model-form";
import { SignupsToggle } from "@/components/admin/signups-toggle";
export const metadata: Metadata = {};
const SETTING_GROUPS = [
{
title: "AI Provider Keys",
description: "Override the environment variable API keys at runtime. Values are encrypted at rest.",
keys: ["OPENAI_API_KEY", "ANTHROPIC_API_KEY", "OPENROUTER_API_KEY"] as const,
},
{
title: "AI Configuration",
description: "Provider routing and model defaults.",
keys: ["OPENROUTER_DEFAULT_MODEL", "OLLAMA_BASE_URL"] as const,
},
{
title: "Push Notifications (VAPID)",
description: "Keys for web push notifications. Generate with: npx web-push generate-vapid-keys",
@@ -34,7 +23,8 @@ export default async function AdminSettingsPage() {
<h1 className="text-2xl font-bold tracking-tight">Site Settings</h1>
<p className="text-muted-foreground text-sm mt-1">
Override .env values at runtime. DB values take precedence over environment variables.
Clear a value to fall back to the environment variable.
Clear a value to fall back to the environment variable. AI provider keys and model
defaults have moved to AI Config.
</p>
</div>
@@ -43,17 +33,6 @@ export default async function AdminSettingsPage() {
{SETTING_GROUPS.map((group) => (
<AdminSettingsForm key={group.title} group={group} settings={settings} />
))}
<AdminDefaultModelForm
initialValues={{
DEFAULT_TEXT_PROVIDER: settings["DEFAULT_TEXT_PROVIDER"]?.value ?? null,
DEFAULT_TEXT_MODEL: settings["DEFAULT_TEXT_MODEL"]?.value ?? null,
DEFAULT_VISION_PROVIDER: settings["DEFAULT_VISION_PROVIDER"]?.value ?? null,
DEFAULT_VISION_MODEL: settings["DEFAULT_VISION_MODEL"]?.value ?? null,
DEFAULT_MEAL_PLAN_PROVIDER: settings["DEFAULT_MEAL_PLAN_PROVIDER"]?.value ?? null,
DEFAULT_MEAL_PLAN_MODEL: settings["DEFAULT_MEAL_PLAN_MODEL"]?.value ?? null,
}}
/>
</div>
);
}