@hed-hog/catalog 0.0.279 → 0.0.285

package/hedhog/frontend/app/dashboard/page.tsx.ejs

@@ -1,562 +1,562 @@
-'use client';
-import {
-  catalogKpiResources,
-  catalogQuickActionResources,
-  catalogResources,
-} from '../_lib/catalog-resources';
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  Activity,
-  ArrowUpRight,
-  Boxes,
-  ChartNoAxesCombined,
-  RefreshCcw,
-  ShieldCheck,
-  Sparkles,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-
-type CatalogStats = {
-  resource: string;
-  total: number;
-  active?: number;
-};
-
-const chartPalette = [
-  '#f97316',
-  '#14b8a6',
-  '#0ea5e9',
-  '#84cc16',
-  '#f59e0b',
-  '#ef4444',
-];
-
-const chartTooltipStyle = {
-  backgroundColor: 'hsl(var(--card))',
-  border: '1px solid hsl(var(--border))',
-  borderRadius: '12px',
-  fontSize: '12px',
-};
-
-export default function CatalogDashboardPage() {
-  const t = useTranslations('catalog');
-  const { accessToken, currentLocaleCode, request } = useApp();
-  const isAppReady = accessToken.trim().length > 0;
-
-  const { data, isLoading, refetch } = useQuery<CatalogStats[]>({
-    queryKey: ['catalog-dashboard-stats', accessToken, currentLocaleCode],
-    queryFn: async () => {
-      const responses = await Promise.allSettled(
-        catalogResources.map(async (resource) => {
-          const response = await request({
-            url: `/catalog/${resource.resource}/stats`,
-          });
-          const statsData = response.data as {
-            total?: number;
-            active?: number;
-          };
-
-          return {
-            resource: resource.resource,
-            total: Number(statsData.total ?? 0),
-            active:
-              statsData.active !== undefined
-                ? Number(statsData.active)
-                : undefined,
-          } satisfies CatalogStats;
-        })
-      );
-
-      return responses.map((response, index) =>
-        response.status === 'fulfilled'
-          ? response.value
-          : {
-              resource:
-                catalogResources[index]?.resource ?? `fallback-${index}`,
-              total: 0,
-            }
-      );
-    },
-    enabled: isAppReady,
-  });
-  const dashboardStats = (data ?? []) as CatalogStats[];
-
-  const statsMap = new Map(dashboardStats.map((item) => [item.resource, item]));
-  const totalRecords = dashboardStats.reduce(
-    (sum, item) => sum + item.total,
-    0
-  );
-  const totalActive = dashboardStats.reduce(
-    (sum, item) => sum + (typeof item.active === 'number' ? item.active : 0),
-    0
-  );
-  const monitoredResources = dashboardStats.filter(
-    (item) => item.total > 0
-  ).length;
-  const statusAwareResources = dashboardStats.filter(
-    (item) => typeof item.active === 'number'
-  ).length;
-
-  const kpiCards = catalogKpiResources.map((resourceKey) => {
-    const resource = catalogResources.find(
-      (item) => item.resource === resourceKey
-    )!;
-    const stats = statsMap.get(resourceKey);
-    return { resource, total: stats?.total ?? 0, active: stats?.active };
-  });
-
-  const volumeChartData = [...catalogResources]
-    .map((resource) => ({
-      name: t(`resources.${resource.translationKey}.shortTitle`),
-      total: statsMap.get(resource.resource)?.total ?? 0,
-    }))
-    .sort((left, right) => right.total - left.total)
-    .slice(0, 6);
-
-  const statusChartData = catalogResources
-    .filter((resource) => resource.hasActiveStats)
-    .map((resource) => {
-      const stats = statsMap.get(resource.resource);
-      const active = Number(stats?.active ?? 0);
-      const total = Number(stats?.total ?? 0);
-
-      return {
-        name: t(`resources.${resource.translationKey}.shortTitle`),
-        active,
-        inactive: Math.max(total - active, 0),
-      };
-    });
-
-  const distributionChartData = volumeChartData.map((item, index) => ({
-    ...item,
-    fill: chartPalette[index % chartPalette.length],
-  }));
-
-  const leaderboard = [...catalogResources]
-    .map((resource) => ({
-      resource,
-      total: statsMap.get(resource.resource)?.total ?? 0,
-      active: statsMap.get(resource.resource)?.active,
-    }))
-    .sort((left, right) => right.total - left.total)
-    .slice(0, 5);
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('dashboard.title')}
-        description={t('dashboard.subtitle')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.catalog') },
-        ]}
-        actions={[
-          {
-            label: t('refresh'),
-            onClick: () => {
-              void refetch();
-            },
-            variant: 'outline',
-            icon: <RefreshCcw className="size-4" />,
-          },
-        ]}
-      />
-
-      <div className="min-w-0 space-y-6 overflow-x-hidden">
-        <Card className="overflow-hidden border-orange-200/70 bg-gradient-to-br from-orange-50 via-background to-amber-50 py-0">
-          <CardContent className="grid min-w-0 gap-6 px-6 py-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(280px,0.9fr)]">
-            <div className="min-w-0 space-y-4">
-              <Badge className="w-fit rounded-full bg-orange-500/10 px-3 py-1 text-orange-700 hover:bg-orange-500/10">
-                <Sparkles className="mr-2 size-3.5" />
-                {t('dashboard.heroBadge')}
-              </Badge>
-              <div className="space-y-2">
-                <h2 className="text-3xl font-semibold tracking-tight text-balance">
-                  {t('dashboard.heroTitle')}
-                </h2>
-                <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
-                  {t('dashboard.heroDescription')}
-                </p>
-              </div>
-              <div className="flex flex-wrap gap-3">
-                <Button asChild>
-                  <Link href="/catalog/products">
-                    {t('dashboard.primaryAction')}
-                  </Link>
-                </Button>
-                <Button asChild variant="outline">
-                  <Link href="/catalog/import-sources">
-                    {t('dashboard.secondaryAction')}
-                  </Link>
-                </Button>
-              </div>
-            </div>
-
-            <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
-              {[
-                {
-                  icon: Boxes,
-                  label: t('dashboard.summary.totalRecords'),
-                  value: totalRecords,
-                },
-                {
-                  icon: ShieldCheck,
-                  label: t('dashboard.summary.activeRecords'),
-                  value: totalActive,
-                },
-                {
-                  icon: Activity,
-                  label: t('dashboard.summary.monitoredResources'),
-                  value: monitoredResources,
-                },
-              ].map((item) => (
-                <div
-                  key={item.label}
-                  className="rounded-2xl border border-white/70 bg-white/80 p-4 shadow-sm backdrop-blur"
-                >
-                  <div className="mb-3 flex items-center gap-2 text-muted-foreground">
-                    <item.icon className="size-4" />
-                    <span className="text-xs uppercase tracking-[0.2em]">
-                      {item.label}
-                    </span>
-                  </div>
-                  <div className="text-3xl font-semibold tracking-tight">
-                    {item.value}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-          {kpiCards.map(({ resource, total, active }) => {
-            const Icon = resource.icon;
-
-            return (
-              <Card
-                key={resource.resource}
-                className="overflow-hidden border-border/70 py-0"
-              >
-                <div
-                  className={`h-1 w-full bg-gradient-to-r ${resource.colorClass}`}
-                />
-                <CardContent className="space-y-4 px-6 py-5">
-                  <div className="flex items-start justify-between gap-3">
-                    <div>
-                      <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                        {t(`resources.${resource.translationKey}.shortTitle`)}
-                      </p>
-                      <p className="mt-2 text-3xl font-semibold tracking-tight">
-                        {isLoading ? '-' : total}
-                      </p>
-                    </div>
-                    <div className={`rounded-2xl p-3 ${resource.glowClass}`}>
-                      <Icon className="size-5" />
-                    </div>
-                  </div>
-                  <div className="flex items-center justify-between text-sm text-muted-foreground">
-                    <span>{t('dashboard.card.totalLabel')}</span>
-                    <span>
-                      {typeof active === 'number'
-                        ? t('dashboard.card.activeLabel', { count: active })
-                        : t('dashboard.card.noActiveLabel')}
-                    </span>
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
-        </div>
-
-        <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.9fr)]">
-          <Card className="min-w-0">
-            <CardHeader>
-              <CardTitle>{t('dashboard.charts.volume.title')}</CardTitle>
-              <CardDescription>
-                {t('dashboard.charts.volume.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="h-[320px]">
-              {isLoading ? (
-                <Skeleton className="h-full w-full rounded-xl" />
-              ) : (
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={volumeChartData}>
-                    <CartesianGrid
-                      strokeDasharray="3 3"
-                      stroke="hsl(var(--border))"
-                      vertical={false}
-                    />
-                    <XAxis
-                      dataKey="name"
-                      tickLine={false}
-                      axisLine={false}
-                      fontSize={12}
-                    />
-                    <YAxis tickLine={false} axisLine={false} fontSize={12} />
-                    <Tooltip contentStyle={chartTooltipStyle} />
-                    <Bar dataKey="total" radius={[8, 8, 0, 0]}>
-                      {volumeChartData.map((entry, index) => (
-                        <Cell
-                          key={`${entry.name}-${index}`}
-                          fill={chartPalette[index % chartPalette.length]}
-                        />
-                      ))}
-                    </Bar>
-                  </BarChart>
-                </ResponsiveContainer>
-              )}
-            </CardContent>
-          </Card>
-
-          <Card className="min-w-0">
-            <CardHeader>
-              <CardTitle>{t('dashboard.ranking.title')}</CardTitle>
-              <CardDescription>
-                {t('dashboard.ranking.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {isLoading
-                ? Array.from({ length: 5 }).map((_, index) => (
-                    <Skeleton
-                      key={index}
-                      className="h-[72px] w-full rounded-2xl"
-                    />
-                  ))
-                : leaderboard.map((item, index) => {
-                    const Icon = item.resource.icon;
-
-                    return (
-                      <Link
-                        key={item.resource.resource}
-                        href={item.resource.href}
-                        className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3 transition-colors hover:bg-muted/40"
-                      >
-                        <div className="flex min-w-0 items-center gap-3">
-                          <div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-                            <Icon className="size-4" />
-                          </div>
-                          <div className="min-w-0">
-                            <p className="truncate font-medium">
-                              {index + 1}.{' '}
-                              {t(
-                                `resources.${item.resource.translationKey}.title`
-                              )}
-                            </p>
-                            <p className="truncate text-xs text-muted-foreground">
-                              {typeof item.active === 'number'
-                                ? t('dashboard.ranking.activeCount', {
-                                    count: item.active,
-                                  })
-                                : t('dashboard.card.noActiveLabel')}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="shrink-0 text-right">
-                          <p className="text-2xl font-semibold">{item.total}</p>
-                          <p className="text-xs text-muted-foreground">
-                            {t('dashboard.card.totalLabel')}
-                          </p>
-                        </div>
-                      </Link>
-                    );
-                  })}
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="grid gap-6 xl:grid-cols-2">
-          <Card className="min-w-0">
-            <CardHeader>
-              <CardTitle>{t('dashboard.charts.status.title')}</CardTitle>
-              <CardDescription>
-                {t('dashboard.charts.status.description', {
-                  count: statusAwareResources,
-                })}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="h-[320px]">
-              {isLoading ? (
-                <Skeleton className="h-full w-full rounded-xl" />
-              ) : (
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={statusChartData}>
-                    <CartesianGrid
-                      strokeDasharray="3 3"
-                      stroke="hsl(var(--border))"
-                      vertical={false}
-                    />
-                    <XAxis
-                      dataKey="name"
-                      tickLine={false}
-                      axisLine={false}
-                      fontSize={12}
-                    />
-                    <YAxis tickLine={false} axisLine={false} fontSize={12} />
-                    <Tooltip contentStyle={chartTooltipStyle} />
-                    <Bar
-                      dataKey="active"
-                      stackId="catalog-status"
-                      fill="#f97316"
-                      radius={[8, 8, 0, 0]}
-                    />
-                    <Bar
-                      dataKey="inactive"
-                      stackId="catalog-status"
-                      fill="#fed7aa"
-                      radius={[8, 8, 0, 0]}
-                    />
-                  </BarChart>
-                </ResponsiveContainer>
-              )}
-            </CardContent>
-          </Card>
-
-          <Card className="min-w-0">
-            <CardHeader>
-              <CardTitle>{t('dashboard.charts.distribution.title')}</CardTitle>
-              <CardDescription>
-                {t('dashboard.charts.distribution.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid min-w-0 h-auto gap-4 lg:h-[320px] lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1.1fr)]">
-              {isLoading ? (
-                <>
-                  <Skeleton className="h-full w-full rounded-full" />
-                  <Skeleton className="h-full w-full rounded-2xl" />
-                </>
-              ) : (
-                <>
-                  <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                      <Pie
-                        data={distributionChartData}
-                        dataKey="total"
-                        nameKey="name"
-                        innerRadius={58}
-                        outerRadius={96}
-                        paddingAngle={2}
-                      >
-                        {distributionChartData.map((entry) => (
-                          <Cell key={entry.name} fill={entry.fill} />
-                        ))}
-                      </Pie>
-                      <Tooltip contentStyle={chartTooltipStyle} />
-                    </PieChart>
-                  </ResponsiveContainer>
-                  <div className="min-w-0 space-y-3">
-                    {distributionChartData.map((item) => (
-                      <div
-                        key={item.name}
-                        className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
-                      >
-                        <div className="flex min-w-0 items-center gap-3">
-                          <span
-                            className="inline-block size-3 rounded-full"
-                            style={{ backgroundColor: item.fill }}
-                          />
-                          <span className="truncate font-medium">{item.name}</span>
-                        </div>
-                        <span className="shrink-0 text-sm text-muted-foreground">
-                          {item.total}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {catalogQuickActionResources.map((resource) => {
-            const Icon = resource.icon;
-
-            return (
-              <Card key={resource.resource} className="min-w-0 overflow-hidden py-0">
-                <div
-                  className={`h-full bg-gradient-to-br ${resource.colorClass} px-6 py-5`}
-                >
-                  <div className="min-w-0 rounded-2xl border border-white/70 bg-background/90 p-5 shadow-sm backdrop-blur">
-                    <div className="mb-4 flex items-center justify-between">
-                      <div className={`rounded-2xl p-3 ${resource.glowClass}`}>
-                        <Icon className="size-5" />
-                      </div>
-                      <ArrowUpRight className="size-4 text-muted-foreground" />
-                    </div>
-                    <h3 className="text-lg font-semibold">
-                      {t(`resources.${resource.translationKey}.title`)}
-                    </h3>
-                    <p className="mt-2 min-h-10 break-words text-sm text-muted-foreground">
-                      {t(`resources.${resource.translationKey}.description`)}
-                    </p>
-                    <div className="mt-5 flex items-center justify-between">
-                      <span className="text-sm font-medium text-muted-foreground">
-                        {t('dashboard.quickActions.itemHint')}
-                      </span>
-                      <Button asChild size="sm">
-                        <Link href={resource.href}>{t('openResource')}</Link>
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </Card>
-            );
-          })}
-        </div>
-
-        <Card className="min-w-0 border-dashed">
-          <CardContent className="flex flex-wrap items-center justify-between gap-4 px-6 py-4">
-            <div className="space-y-1">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <ChartNoAxesCombined className="size-4 text-orange-600" />
-                {t('dashboard.footer.title')}
-              </div>
-              <p className="text-sm text-muted-foreground">
-                {t('dashboard.footer.description')}
-              </p>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Badge variant="secondary">
-                {t('dashboard.footer.realData')}
-              </Badge>
-              <Badge variant="outline">{t('dashboard.footer.multiView')}</Badge>
-              <Badge variant="outline">
-                {t('dashboard.footer.resourceCount', {
-                  count: catalogResources.length,
-                })}
-              </Badge>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </Page>
-  );
-}
+'use client';
+import {
+  catalogKpiResources,
+  catalogQuickActionResources,
+  catalogResources,
+} from '../_lib/catalog-resources';
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Activity,
+  ArrowUpRight,
+  Boxes,
+  ChartNoAxesCombined,
+  RefreshCcw,
+  ShieldCheck,
+  Sparkles,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+type CatalogStats = {
+  resource: string;
+  total: number;
+  active?: number;
+};
+
+const chartPalette = [
+  '#f97316',
+  '#14b8a6',
+  '#0ea5e9',
+  '#84cc16',
+  '#f59e0b',
+  '#ef4444',
+];
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '12px',
+  fontSize: '12px',
+};
+
+export default function CatalogDashboardPage() {
+  const t = useTranslations('catalog');
+  const { accessToken, currentLocaleCode, request } = useApp();
+  const isAppReady = accessToken.trim().length > 0;
+
+  const { data, isLoading, refetch } = useQuery<CatalogStats[]>({
+    queryKey: ['catalog-dashboard-stats', accessToken, currentLocaleCode],
+    queryFn: async () => {
+      const responses = await Promise.allSettled(
+        catalogResources.map(async (resource) => {
+          const response = await request({
+            url: `/catalog/${resource.resource}/stats`,
+          });
+          const statsData = response.data as {
+            total?: number;
+            active?: number;
+          };
+
+          return {
+            resource: resource.resource,
+            total: Number(statsData.total ?? 0),
+            active:
+              statsData.active !== undefined
+                ? Number(statsData.active)
+                : undefined,
+          } satisfies CatalogStats;
+        })
+      );
+
+      return responses.map((response, index) =>
+        response.status === 'fulfilled'
+          ? response.value
+          : {
+              resource:
+                catalogResources[index]?.resource ?? `fallback-${index}`,
+              total: 0,
+            }
+      );
+    },
+    enabled: isAppReady,
+  });
+  const dashboardStats = (data ?? []) as CatalogStats[];
+
+  const statsMap = new Map(dashboardStats.map((item) => [item.resource, item]));
+  const totalRecords = dashboardStats.reduce(
+    (sum, item) => sum + item.total,
+    0
+  );
+  const totalActive = dashboardStats.reduce(
+    (sum, item) => sum + (typeof item.active === 'number' ? item.active : 0),
+    0
+  );
+  const monitoredResources = dashboardStats.filter(
+    (item) => item.total > 0
+  ).length;
+  const statusAwareResources = dashboardStats.filter(
+    (item) => typeof item.active === 'number'
+  ).length;
+
+  const kpiCards = catalogKpiResources.map((resourceKey) => {
+    const resource = catalogResources.find(
+      (item) => item.resource === resourceKey
+    )!;
+    const stats = statsMap.get(resourceKey);
+    return { resource, total: stats?.total ?? 0, active: stats?.active };
+  });
+
+  const volumeChartData = [...catalogResources]
+    .map((resource) => ({
+      name: t(`resources.${resource.translationKey}.shortTitle`),
+      total: statsMap.get(resource.resource)?.total ?? 0,
+    }))
+    .sort((left, right) => right.total - left.total)
+    .slice(0, 6);
+
+  const statusChartData = catalogResources
+    .filter((resource) => resource.hasActiveStats)
+    .map((resource) => {
+      const stats = statsMap.get(resource.resource);
+      const active = Number(stats?.active ?? 0);
+      const total = Number(stats?.total ?? 0);
+
+      return {
+        name: t(`resources.${resource.translationKey}.shortTitle`),
+        active,
+        inactive: Math.max(total - active, 0),
+      };
+    });
+
+  const distributionChartData = volumeChartData.map((item, index) => ({
+    ...item,
+    fill: chartPalette[index % chartPalette.length],
+  }));
+
+  const leaderboard = [...catalogResources]
+    .map((resource) => ({
+      resource,
+      total: statsMap.get(resource.resource)?.total ?? 0,
+      active: statsMap.get(resource.resource)?.active,
+    }))
+    .sort((left, right) => right.total - left.total)
+    .slice(0, 5);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('dashboard.title')}
+        description={t('dashboard.subtitle')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.catalog') },
+        ]}
+        actions={[
+          {
+            label: t('refresh'),
+            onClick: () => {
+              void refetch();
+            },
+            variant: 'outline',
+            icon: <RefreshCcw className="size-4" />,
+          },
+        ]}
+      />
+
+      <div className="min-w-0 space-y-6 overflow-x-hidden">
+        <Card className="overflow-hidden border-orange-200/70 bg-gradient-to-br from-orange-50 via-background to-amber-50 py-0">
+          <CardContent className="grid min-w-0 gap-6 px-6 py-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(280px,0.9fr)]">
+            <div className="min-w-0 space-y-4">
+              <Badge className="w-fit rounded-full bg-orange-500/10 px-3 py-1 text-orange-700 hover:bg-orange-500/10">
+                <Sparkles className="mr-2 size-3.5" />
+                {t('dashboard.heroBadge')}
+              </Badge>
+              <div className="space-y-2">
+                <h2 className="text-3xl font-semibold tracking-tight text-balance">
+                  {t('dashboard.heroTitle')}
+                </h2>
+                <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
+                  {t('dashboard.heroDescription')}
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-3">
+                <Button asChild>
+                  <Link href="/catalog/products">
+                    {t('dashboard.primaryAction')}
+                  </Link>
+                </Button>
+                <Button asChild variant="outline">
+                  <Link href="/catalog/import-sources">
+                    {t('dashboard.secondaryAction')}
+                  </Link>
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
+              {[
+                {
+                  icon: Boxes,
+                  label: t('dashboard.summary.totalRecords'),
+                  value: totalRecords,
+                },
+                {
+                  icon: ShieldCheck,
+                  label: t('dashboard.summary.activeRecords'),
+                  value: totalActive,
+                },
+                {
+                  icon: Activity,
+                  label: t('dashboard.summary.monitoredResources'),
+                  value: monitoredResources,
+                },
+              ].map((item) => (
+                <div
+                  key={item.label}
+                  className="rounded-2xl border border-white/70 bg-white/80 p-4 shadow-sm backdrop-blur"
+                >
+                  <div className="mb-3 flex items-center gap-2 text-muted-foreground">
+                    <item.icon className="size-4" />
+                    <span className="text-xs uppercase tracking-[0.2em]">
+                      {item.label}
+                    </span>
+                  </div>
+                  <div className="text-3xl font-semibold tracking-tight">
+                    {item.value}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          {kpiCards.map(({ resource, total, active }) => {
+            const Icon = resource.icon;
+
+            return (
+              <Card
+                key={resource.resource}
+                className="overflow-hidden border-border/70 py-0"
+              >
+                <div
+                  className={`h-1 w-full bg-gradient-to-r ${resource.colorClass}`}
+                />
+                <CardContent className="space-y-4 px-6 py-5">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                        {t(`resources.${resource.translationKey}.shortTitle`)}
+                      </p>
+                      <p className="mt-2 text-3xl font-semibold tracking-tight">
+                        {isLoading ? '-' : total}
+                      </p>
+                    </div>
+                    <div className={`rounded-2xl p-3 ${resource.glowClass}`}>
+                      <Icon className="size-5" />
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between text-sm text-muted-foreground">
+                    <span>{t('dashboard.card.totalLabel')}</span>
+                    <span>
+                      {typeof active === 'number'
+                        ? t('dashboard.card.activeLabel', { count: active })
+                        : t('dashboard.card.noActiveLabel')}
+                    </span>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+
+        <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.9fr)]">
+          <Card className="min-w-0">
+            <CardHeader>
+              <CardTitle>{t('dashboard.charts.volume.title')}</CardTitle>
+              <CardDescription>
+                {t('dashboard.charts.volume.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="h-[320px]">
+              {isLoading ? (
+                <Skeleton className="h-full w-full rounded-xl" />
+              ) : (
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={volumeChartData}>
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      stroke="hsl(var(--border))"
+                      vertical={false}
+                    />
+                    <XAxis
+                      dataKey="name"
+                      tickLine={false}
+                      axisLine={false}
+                      fontSize={12}
+                    />
+                    <YAxis tickLine={false} axisLine={false} fontSize={12} />
+                    <Tooltip contentStyle={chartTooltipStyle} />
+                    <Bar dataKey="total" radius={[8, 8, 0, 0]}>
+                      {volumeChartData.map((entry, index) => (
+                        <Cell
+                          key={`${entry.name}-${index}`}
+                          fill={chartPalette[index % chartPalette.length]}
+                        />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="min-w-0">
+            <CardHeader>
+              <CardTitle>{t('dashboard.ranking.title')}</CardTitle>
+              <CardDescription>
+                {t('dashboard.ranking.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {isLoading
+                ? Array.from({ length: 5 }).map((_, index) => (
+                    <Skeleton
+                      key={index}
+                      className="h-[72px] w-full rounded-2xl"
+                    />
+                  ))
+                : leaderboard.map((item, index) => {
+                    const Icon = item.resource.icon;
+
+                    return (
+                      <Link
+                        key={item.resource.resource}
+                        href={item.resource.href}
+                        className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3 transition-colors hover:bg-muted/40"
+                      >
+                        <div className="flex min-w-0 items-center gap-3">
+                          <div className="flex size-10 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                            <Icon className="size-4" />
+                          </div>
+                          <div className="min-w-0">
+                            <p className="truncate font-medium">
+                              {index + 1}.{' '}
+                              {t(
+                                `resources.${item.resource.translationKey}.title`
+                              )}
+                            </p>
+                            <p className="truncate text-xs text-muted-foreground">
+                              {typeof item.active === 'number'
+                                ? t('dashboard.ranking.activeCount', {
+                                    count: item.active,
+                                  })
+                                : t('dashboard.card.noActiveLabel')}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="shrink-0 text-right">
+                          <p className="text-2xl font-semibold">{item.total}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {t('dashboard.card.totalLabel')}
+                          </p>
+                        </div>
+                      </Link>
+                    );
+                  })}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-6 xl:grid-cols-2">
+          <Card className="min-w-0">
+            <CardHeader>
+              <CardTitle>{t('dashboard.charts.status.title')}</CardTitle>
+              <CardDescription>
+                {t('dashboard.charts.status.description', {
+                  count: statusAwareResources,
+                })}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="h-[320px]">
+              {isLoading ? (
+                <Skeleton className="h-full w-full rounded-xl" />
+              ) : (
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={statusChartData}>
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      stroke="hsl(var(--border))"
+                      vertical={false}
+                    />
+                    <XAxis
+                      dataKey="name"
+                      tickLine={false}
+                      axisLine={false}
+                      fontSize={12}
+                    />
+                    <YAxis tickLine={false} axisLine={false} fontSize={12} />
+                    <Tooltip contentStyle={chartTooltipStyle} />
+                    <Bar
+                      dataKey="active"
+                      stackId="catalog-status"
+                      fill="#f97316"
+                      radius={[8, 8, 0, 0]}
+                    />
+                    <Bar
+                      dataKey="inactive"
+                      stackId="catalog-status"
+                      fill="#fed7aa"
+                      radius={[8, 8, 0, 0]}
+                    />
+                  </BarChart>
+                </ResponsiveContainer>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="min-w-0">
+            <CardHeader>
+              <CardTitle>{t('dashboard.charts.distribution.title')}</CardTitle>
+              <CardDescription>
+                {t('dashboard.charts.distribution.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="grid min-w-0 h-auto gap-4 lg:h-[320px] lg:grid-cols-[minmax(220px,0.9fr)_minmax(0,1.1fr)]">
+              {isLoading ? (
+                <>
+                  <Skeleton className="h-full w-full rounded-full" />
+                  <Skeleton className="h-full w-full rounded-2xl" />
+                </>
+              ) : (
+                <>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={distributionChartData}
+                        dataKey="total"
+                        nameKey="name"
+                        innerRadius={58}
+                        outerRadius={96}
+                        paddingAngle={2}
+                      >
+                        {distributionChartData.map((entry) => (
+                          <Cell key={entry.name} fill={entry.fill} />
+                        ))}
+                      </Pie>
+                      <Tooltip contentStyle={chartTooltipStyle} />
+                    </PieChart>
+                  </ResponsiveContainer>
+                  <div className="min-w-0 space-y-3">
+                    {distributionChartData.map((item) => (
+                      <div
+                        key={item.name}
+                        className="flex min-w-0 items-center justify-between gap-3 rounded-2xl border border-border/70 px-4 py-3"
+                      >
+                        <div className="flex min-w-0 items-center gap-3">
+                          <span
+                            className="inline-block size-3 rounded-full"
+                            style={{ backgroundColor: item.fill }}
+                          />
+                          <span className="truncate font-medium">{item.name}</span>
+                        </div>
+                        <span className="shrink-0 text-sm text-muted-foreground">
+                          {item.total}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {catalogQuickActionResources.map((resource) => {
+            const Icon = resource.icon;
+
+            return (
+              <Card key={resource.resource} className="min-w-0 overflow-hidden py-0">
+                <div
+                  className={`h-full bg-gradient-to-br ${resource.colorClass} px-6 py-5`}
+                >
+                  <div className="min-w-0 rounded-2xl border border-white/70 bg-background/90 p-5 shadow-sm backdrop-blur">
+                    <div className="mb-4 flex items-center justify-between">
+                      <div className={`rounded-2xl p-3 ${resource.glowClass}`}>
+                        <Icon className="size-5" />
+                      </div>
+                      <ArrowUpRight className="size-4 text-muted-foreground" />
+                    </div>
+                    <h3 className="text-lg font-semibold">
+                      {t(`resources.${resource.translationKey}.title`)}
+                    </h3>
+                    <p className="mt-2 min-h-10 break-words text-sm text-muted-foreground">
+                      {t(`resources.${resource.translationKey}.description`)}
+                    </p>
+                    <div className="mt-5 flex items-center justify-between">
+                      <span className="text-sm font-medium text-muted-foreground">
+                        {t('dashboard.quickActions.itemHint')}
+                      </span>
+                      <Button asChild size="sm">
+                        <Link href={resource.href}>{t('openResource')}</Link>
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            );
+          })}
+        </div>
+
+        <Card className="min-w-0 border-dashed">
+          <CardContent className="flex flex-wrap items-center justify-between gap-4 px-6 py-4">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <ChartNoAxesCombined className="size-4 text-orange-600" />
+                {t('dashboard.footer.title')}
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {t('dashboard.footer.description')}
+              </p>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="secondary">
+                {t('dashboard.footer.realData')}
+              </Badge>
+              <Badge variant="outline">{t('dashboard.footer.multiView')}</Badge>
+              <Badge variant="outline">
+                {t('dashboard.footer.resourceCount', {
+                  count: catalogResources.length,
+                })}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}