initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00
commit 5a824c2eee
157 changed files with 11539 additions and 0 deletions
@@ -0,0 +1,97 @@
+import * as React from 'react'
+import { Stack, Group, Title, Text, Paper, SimpleGrid } from '@mantine/core'
+
+interface MetricConfig {
+  label: string
+  value: string | number
+  delta?: { value: number; isPositive: boolean }
+  sparklineData?: number[]
+}
+
+interface ChartConfig {
+  id: string
+  title: string
+  type: 'line' | 'bar' | 'area'
+  span?: 1 | 2
+  height?: number
+  content: React.ReactNode
+}
+
+interface AnalyticsPageProps {
+  title: string
+  subtitle?: string
+  dateRange?: React.ReactNode
+  metrics: MetricConfig[]
+  charts: ChartConfig[]
+  actions?: React.ReactNode
+  className?: string
+}
+
+export function analyticsPage({
+  title,
+  subtitle,
+  dateRange,
+  metrics,
+  charts,
+  actions,
+}: AnalyticsPageProps): React.ReactElement {
+  const metricCols = metrics.length <= 2 ? { base: 1, md: 2 } : metrics.length <= 3 ? { base: 1, md: 3 } : { base: 1, md: 2, lg: 4 }
+
+  return (
+    <Stack gap="lg">
+      {/* Header */}
+      <Group justify="space-between" pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+        <Stack gap={4}>
+          <Title order={2}>{title}</Title>
+          {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+        </Stack>
+        <Group gap="xs">
+          {dateRange}
+          {actions}
+        </Group>
+      </Group>
+
+      {/* KPI Row */}
+      <SimpleGrid cols={metricCols} spacing="md">
+        {metrics.map((metric, i) => (
+          <Paper key={i} p="md" withBorder shadow="xs">
+            <Text size="sm" c="dimmed">{metric.label}</Text>
+            <Group mt="xs" justify="space-between" align="flex-end" gap="md">
+              <Stack gap={4}>
+                <Text fz={30} fw={700} lh={1}>{metric.value}</Text>
+                {metric.delta && (
+                  <Text
+                    size="sm"
+                    fw={500}
+                    c={metric.delta.value === 0 ? 'dimmed' : metric.delta.isPositive ? 'green' : 'red'}
+                  >
+                    {metric.delta.value > 0 ? '+' : ''}{metric.delta.value}%
+                  </Text>
+                )}
+              </Stack>
+            </Group>
+          </Paper>
+        ))}
+      </SimpleGrid>
+
+      {/* Charts Grid */}
+      <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
+        {charts.map((chart) => (
+          <Paper
+            key={chart.id}
+            p="md"
+            withBorder
+            shadow="xs"
+            radius="md"
+            style={chart.span === 2 ? { gridColumn: 'span 2' } : undefined}
+          >
+            <Text size="sm" fw={500} c="dimmed" mb="sm">{chart.title}</Text>
+            {chart.content}
+          </Paper>
+        ))}
+      </SimpleGrid>
+    </Stack>
+  )
+}
+
+export type { AnalyticsPageProps, MetricConfig, ChartConfig }