Ajoute deux entrées au menu d’administration. Les campagnes s’affichent dans un tableau vide honnête. Les statistiques disent clairement qu’aucune mesure n’est encore branchée, sans afficher de zéro trompeur.
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { BarChart3 } from 'lucide-react'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
const SECTIONS = [
|
|
{ id: 'revenue', titleKey: 'admin.stats.sectionRevenue' },
|
|
{ id: 'subscriptions', titleKey: 'admin.stats.sectionSubscriptions' },
|
|
{ id: 'usage', titleKey: 'admin.stats.sectionUsage' },
|
|
{ id: 'campaigns', titleKey: 'admin.stats.sectionCampaigns' },
|
|
] as const
|
|
|
|
export function StatsAdminClient() {
|
|
const { t } = useLanguage()
|
|
|
|
return (
|
|
<div className="space-y-6" dir="auto">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 size={20} className="shrink-0 text-brand-accent" aria-hidden />
|
|
<h1 className="text-2xl font-bold tracking-tight text-foreground">
|
|
{t('admin.stats.title')}
|
|
</h1>
|
|
</div>
|
|
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
|
|
{t('admin.stats.description')}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{t('admin.stats.lastSyncUnknown')} · {t('admin.stats.timezoneNote')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{SECTIONS.map((section) => (
|
|
<section
|
|
key={section.id}
|
|
aria-labelledby={`stats-${section.id}`}
|
|
className="rounded-xl border border-border bg-card px-4 py-4"
|
|
>
|
|
<h2 id={`stats-${section.id}`} className="text-sm font-semibold text-foreground">
|
|
{t(section.titleKey)}
|
|
</h2>
|
|
<p className="mt-3 text-sm font-medium text-foreground">
|
|
{t('admin.stats.unavailable')}
|
|
</p>
|
|
<p className="mt-1 text-[13px] leading-relaxed text-muted-foreground">
|
|
{t('admin.stats.unavailableBody')}
|
|
</p>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|