@hed-hog/catalog 0.0.276

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

@@ -0,0 +1,566 @@
+'use client';
+
+import { CatalogNav } from '../_components/catalog-nav';
+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 { request } = useApp();
+
+  const { data, isLoading, refetch } = useQuery<CatalogStats[]>({
+    queryKey: ['catalog-dashboard-stats'],
+    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,
+            }
+      );
+    },
+    initialData: [],
+  });
+
+  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>
+
+        <CatalogNav currentHref="/catalog/dashboard" />
+
+        <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>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function CatalogPage() {
+  redirect('/catalog/dashboard');
+}