create-blitzpack 0.1.0 → 0.1.2

package/template/apps/web/src/components/admin/charts/realtime-metrics-chart.tsx

@@ -1,511 +0,0 @@
-'use client';
-
-import type { RealtimeMetricsPoint } from '@repo/packages-types/stats';
-import { cn } from '@repo/packages-ui/lib/utils';
-import { Skeleton } from '@repo/packages-ui/skeleton';
-import { formatTime } from '@repo/packages-utils/date';
-import { AnimatePresence, motion } from 'framer-motion';
-import {
-  Activity,
-  AlertTriangle,
-  Cpu,
-  HardDrive,
-  Pause,
-  Timer,
-  Wifi,
-  WifiOff,
-} from 'lucide-react';
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import {
-  Area,
-  AreaChart,
-  CartesianGrid,
-  ReferenceDot,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-
-import { useRealtimeMetrics } from '@/hooks/use-realtime-metrics';
-
-type MetricType = 'memory' | 'cpu' | 'requests' | 'responseTime' | 'errorRate';
-
-interface MetricConfig {
-  key: MetricType;
-  label: string;
-  color: string;
-  gradientId: string;
-  icon: typeof Cpu;
-  unit: string;
-  getValue: (point: RealtimeMetricsPoint) => number;
-  format: (value: number, point?: RealtimeMetricsPoint) => string;
-}
-
-const METRICS: MetricConfig[] = [
-  {
-    key: 'memory',
-    label: 'Memory',
-    color: '#8b5cf6',
-    gradientId: 'memoryGradient',
-    icon: HardDrive,
-    unit: '%',
-    getValue: (p) => p.memory.usedPercent,
-    format: (v, p) =>
-      p
-        ? `${v.toFixed(1)}% (${p.memory.heapUsedMB.toFixed(0)} MB)`
-        : `${v.toFixed(1)}%`,
-  },
-  {
-    key: 'cpu',
-    label: 'CPU',
-    color: '#f59e0b',
-    gradientId: 'cpuGradient',
-    icon: Cpu,
-    unit: '%',
-    getValue: (p) => p.cpu.percentage,
-    format: (v) => `${v.toFixed(1)}%`,
-  },
-  {
-    key: 'requests',
-    label: 'Req/s',
-    color: '#10b981',
-    gradientId: 'requestsGradient',
-    icon: Activity,
-    unit: '/s',
-    getValue: (p) => p.requests.perSecond,
-    format: (v) => `${v.toFixed(1)}/s`,
-  },
-  {
-    key: 'responseTime',
-    label: 'Latency',
-    color: '#3b82f6',
-    gradientId: 'responseTimeGradient',
-    icon: Timer,
-    unit: 'ms',
-    getValue: (p) => p.requests.avgResponseTimeMs,
-    format: (v) => `${v.toFixed(0)}ms`,
-  },
-  {
-    key: 'errorRate',
-    label: 'Error Rate',
-    color: '#ef4444',
-    gradientId: 'errorRateGradient',
-    icon: AlertTriangle,
-    unit: '%',
-    getValue: (p) => p.errors.rate,
-    format: (v) => `${v.toFixed(2)}%`,
-  },
-];
-
-interface MetricTabProps {
-  config: MetricConfig;
-  isActive: boolean;
-  onClick: () => void;
-}
-
-function MetricTab({ config, isActive, onClick }: MetricTabProps) {
-  const Icon = config.icon;
-
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors',
-        isActive
-          ? 'text-foreground'
-          : 'text-muted-foreground hover:text-foreground'
-      )}
-    >
-      <Icon className="size-3.5" />
-      <span>{config.label}</span>
-      {isActive && (
-        <motion.div
-          layoutId="activeMetricTab"
-          className="bg-foreground absolute inset-x-0 -bottom-px h-0.5"
-          transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-        />
-      )}
-    </button>
-  );
-}
-
-interface CustomTooltipProps {
-  active?: boolean;
-  payload?: Array<{ value: number; payload: RealtimeMetricsPoint }>;
-  activeMetric: MetricConfig;
-}
-
-function CustomTooltip({ active, payload, activeMetric }: CustomTooltipProps) {
-  if (!active || !payload || payload.length === 0) return null;
-
-  const point = payload[0].payload;
-  const Icon = activeMetric.icon;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 5 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="rounded-lg border border-zinc-200 bg-white/95 px-3 py-2 shadow-lg backdrop-blur dark:border-zinc-700 dark:bg-zinc-800/95"
-    >
-      <p className="mb-1 text-[10px] text-zinc-500 dark:text-zinc-400">
-        {formatTime(point.timestamp)}
-      </p>
-      <div className="flex items-center gap-2">
-        <Icon className="size-4" style={{ color: activeMetric.color }} />
-        <span className="font-semibold" style={{ color: activeMetric.color }}>
-          {activeMetric.format(activeMetric.getValue(point), point)}
-        </span>
-      </div>
-    </motion.div>
-  );
-}
-
-export function RealtimeMetricsChart() {
-  const { data, isConnected, error, reconnect } = useRealtimeMetrics();
-  const [activeMetric, setActiveMetric] = useState<MetricType>('memory');
-  const [frozenData, setFrozenData] = useState<RealtimeMetricsPoint[] | null>(
-    null
-  );
-  const dataRef = useRef(data);
-
-  useLayoutEffect(() => {
-    dataRef.current = data;
-  }, [data]);
-
-  const handleMouseEnter = useCallback(() => {
-    const currentData = dataRef.current;
-    if (currentData.length > 0) {
-      setFrozenData(structuredClone(currentData));
-    }
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setFrozenData(null);
-  }, []);
-
-  const isPaused = frozenData !== null;
-  const displayData = frozenData ?? data;
-
-  const metricConfig = useMemo(
-    () => METRICS.find((m) => m.key === activeMetric)!,
-    [activeMetric]
-  );
-
-  const chartData = useMemo(() => {
-    return displayData.map((point) => ({
-      ...point,
-      value: metricConfig.getValue(point),
-    }));
-  }, [displayData, metricConfig]);
-
-  const displayedLatestPoint = displayData[displayData.length - 1];
-
-  const maxValue = useMemo(() => {
-    if (chartData.length === 0) return 100;
-    const max = Math.max(...chartData.map((d) => d.value));
-    return Math.ceil(max * 1.2) || 100;
-  }, [chartData]);
-
-  const stats = useMemo(() => {
-    if (chartData.length === 0) return null;
-    const values = chartData.map((d) => d.value);
-    return {
-      min: Math.min(...values),
-      max: Math.max(...values),
-      avg: values.reduce((a, b) => a + b, 0) / values.length,
-    };
-  }, [chartData]);
-
-  return (
-    <div className="bg-card col-span-2 rounded-xl border p-5">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="relative">
-            <div
-              className={cn(
-                'rounded-lg p-2',
-                isConnected ? 'bg-emerald-500/10' : 'bg-rose-500/10'
-              )}
-            >
-              {isConnected ? (
-                <Wifi className="size-5 text-emerald-500" />
-              ) : (
-                <WifiOff className="size-5 text-rose-500" />
-              )}
-            </div>
-            <AnimatePresence>
-              {isConnected && (
-                <motion.span
-                  initial={{ scale: 0 }}
-                  animate={{ scale: 1 }}
-                  exit={{ scale: 0 }}
-                  className="absolute -right-0.5 -top-0.5 flex size-2.5"
-                >
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
-                  <span className="relative inline-flex size-2.5 rounded-full bg-emerald-500" />
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </div>
-          <div>
-            <h3 className="text-sm font-semibold">Real-time Metrics</h3>
-            <p className="text-muted-foreground text-xs">
-              {isConnected ? (
-                'Live system monitoring'
-              ) : (
-                <button
-                  onClick={reconnect}
-                  className="text-rose-500 hover:underline"
-                >
-                  {error?.message || 'Disconnected. Click to reconnect'}
-                </button>
-              )}
-            </p>
-          </div>
-        </div>
-
-        {displayedLatestPoint && (
-          <div className="text-right">
-            <p className="text-muted-foreground text-[10px]">
-              {isPaused ? 'Paused at' : 'Last update'}
-            </p>
-            <p className="font-mono text-xs tabular-nums">
-              {formatTime(displayedLatestPoint.timestamp)}
-            </p>
-          </div>
-        )}
-      </div>
-
-      <div className="mb-4 flex items-center border-b">
-        {METRICS.map((metric) => (
-          <MetricTab
-            key={metric.key}
-            config={metric}
-            isActive={activeMetric === metric.key}
-            onClick={() => setActiveMetric(metric.key)}
-          />
-        ))}
-        <div className="ml-auto flex items-center gap-3 pb-1.5 text-xs">
-          {isPaused && (
-            <span className="flex items-center gap-1 text-amber-500">
-              <Pause className="size-3" />
-              Paused
-            </span>
-          )}
-          {displayedLatestPoint && (
-            <div className="flex items-center gap-1.5">
-              <span className="text-muted-foreground">
-                {metricConfig.label}:
-              </span>
-              <span className="font-semibold tabular-nums">
-                {metricConfig.format(
-                  metricConfig.getValue(displayedLatestPoint),
-                  displayedLatestPoint
-                )}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div
-        role="img"
-        aria-label={`Real-time ${metricConfig.label} chart`}
-        className="h-[280px]"
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <ResponsiveContainer width="100%" height="100%">
-          <AreaChart
-            data={chartData}
-            margin={{ top: 10, right: 10, left: -10, bottom: 0 }}
-          >
-            <defs>
-              {METRICS.map((metric) => (
-                <linearGradient
-                  key={metric.gradientId}
-                  id={metric.gradientId}
-                  x1="0"
-                  y1="0"
-                  x2="0"
-                  y2="1"
-                >
-                  <stop
-                    offset="5%"
-                    stopColor={metric.color}
-                    stopOpacity={0.3}
-                  />
-                  <stop offset="95%" stopColor={metric.color} stopOpacity={0} />
-                </linearGradient>
-              ))}
-            </defs>
-            <CartesianGrid
-              strokeDasharray="3 3"
-              vertical={false}
-              className="stroke-zinc-200 dark:stroke-zinc-700"
-            />
-            <XAxis
-              dataKey="timestamp"
-              tickFormatter={formatTime}
-              tick={{ fontSize: 10 }}
-              tickLine={false}
-              axisLine={false}
-              interval="preserveStartEnd"
-              minTickGap={50}
-              className="text-zinc-500 dark:text-zinc-400"
-            />
-            <YAxis
-              domain={[0, maxValue]}
-              tick={{ fontSize: 10 }}
-              tickLine={false}
-              axisLine={false}
-              width={40}
-              tickFormatter={(v) =>
-                `${v}${metricConfig.unit === '%' ? '%' : ''}`
-              }
-              className="text-zinc-500 dark:text-zinc-400"
-            />
-            <Tooltip
-              content={<CustomTooltip activeMetric={metricConfig} />}
-              cursor={{
-                stroke: metricConfig.color,
-                strokeWidth: 1,
-                strokeDasharray: '5 5',
-              }}
-            />
-            <Area
-              type="monotone"
-              dataKey="value"
-              stroke={metricConfig.color}
-              strokeWidth={2}
-              fill={`url(#${metricConfig.gradientId})`}
-              isAnimationActive={false}
-            />
-            {displayedLatestPoint && (
-              <ReferenceDot
-                x={displayedLatestPoint.timestamp}
-                y={metricConfig.getValue(displayedLatestPoint)}
-                r={0}
-                shape={(props) => {
-                  const { cx, cy } = props as { cx: number; cy: number };
-                  return (
-                    <g>
-                      {!isPaused && (
-                        <circle
-                          cx={cx}
-                          cy={cy}
-                          r={4}
-                          fill={metricConfig.color}
-                          opacity={0.4}
-                        >
-                          <animate
-                            attributeName="r"
-                            from="4"
-                            to="12"
-                            dur="1.5s"
-                            repeatCount="indefinite"
-                          />
-                          <animate
-                            attributeName="opacity"
-                            from="0.4"
-                            to="0"
-                            dur="1.5s"
-                            repeatCount="indefinite"
-                          />
-                        </circle>
-                      )}
-                      <circle
-                        cx={cx}
-                        cy={cy}
-                        r={4}
-                        fill={metricConfig.color}
-                        stroke="white"
-                        strokeWidth={2}
-                      />
-                    </g>
-                  );
-                }}
-              />
-            )}
-          </AreaChart>
-        </ResponsiveContainer>
-      </div>
-
-      <div className="mt-4 flex items-center justify-between border-t pt-3">
-        <div className="flex items-center gap-4 text-xs">
-          <div className="flex items-center gap-1.5">
-            <div
-              className="size-2 rounded-full"
-              style={{ backgroundColor: metricConfig.color }}
-            />
-            <span className="text-muted-foreground">{metricConfig.label}</span>
-          </div>
-          {stats && (
-            <div className="text-muted-foreground flex items-center gap-3">
-              <span>
-                Min:{' '}
-                <span className="text-foreground tabular-nums">
-                  {metricConfig.format(stats.min)}
-                </span>
-              </span>
-              <span>
-                Avg:{' '}
-                <span className="text-foreground tabular-nums">
-                  {metricConfig.format(stats.avg)}
-                </span>
-              </span>
-              <span>
-                Max:{' '}
-                <span className="text-foreground tabular-nums">
-                  {metricConfig.format(stats.max)}
-                </span>
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center gap-1.5">
-          <span
-            className={cn(
-              'size-2 rounded-full',
-              isConnected ? 'bg-emerald-500' : 'bg-rose-500'
-            )}
-          />
-          <span className="text-muted-foreground text-xs">
-            {isConnected ? 'Live' : 'Offline'}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function RealtimeMetricsChartSkeleton() {
-  return (
-    <div className="bg-card col-span-2 rounded-xl border p-5">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Skeleton className="size-9 rounded-lg" />
-          <div className="space-y-1">
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-3 w-28" />
-          </div>
-        </div>
-        <div className="space-y-1 text-right">
-          <Skeleton className="ml-auto h-3 w-16" />
-          <Skeleton className="ml-auto h-3 w-20" />
-        </div>
-      </div>
-      <div className="mb-4 flex items-center gap-4 border-b pb-1.5">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <Skeleton key={i} className="h-4 w-16" />
-        ))}
-      </div>
-      <Skeleton className="h-[280px] w-full rounded-lg" />
-      <div className="mt-4 flex items-center justify-between border-t pt-3">
-        <Skeleton className="h-3 w-40" />
-        <Skeleton className="h-3 w-16" />
-      </div>
-    </div>
-  );
-}

package/template/apps/web/src/components/admin/charts/role-distribution-chart.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import type { RoleDistributionItem } from '@repo/packages-types/stats';
-import { Skeleton } from '@repo/packages-ui/skeleton';
-import {
-  Cell,
-  Legend,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-} from 'recharts';
-
-import { SimpleChartTooltip } from './chart-tooltip';
-
-interface RoleDistributionChartProps {
-  data: RoleDistributionItem[];
-}
-
-const ROLE_COLORS: Record<string, string> = {
-  user: '#3b82f6',
-  admin: '#f59e0b',
-  super_admin: '#ef4444',
-};
-
-const ROLE_LABELS: Record<string, string> = {
-  user: 'Users',
-  admin: 'Admins',
-  super_admin: 'Super Admins',
-};
-
-export function RoleDistributionChart({ data }: RoleDistributionChartProps) {
-  const chartData = data.map((item) => ({
-    ...item,
-    name: ROLE_LABELS[item.role] || item.role,
-    color: ROLE_COLORS[item.role] || '#94a3b8',
-  }));
-
-  const total = data.reduce((sum, item) => sum + item.count, 0);
-
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4">
-        <h3 className="text-sm font-semibold">Role Distribution</h3>
-        <p className="text-muted-foreground text-xs">
-          Users by permission level
-        </p>
-      </div>
-      <div className="h-[200px]">
-        <ResponsiveContainer width="100%" height="100%">
-          <PieChart>
-            <Pie
-              data={chartData}
-              cx="50%"
-              cy="50%"
-              innerRadius={50}
-              outerRadius={75}
-              paddingAngle={2}
-              dataKey="count"
-              nameKey="name"
-            >
-              {chartData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Pie>
-            <Tooltip
-              content={
-                <SimpleChartTooltip
-                  valueFormatter={(value: number) => [
-                    `${value} (${((value / total) * 100).toFixed(1)}%)`,
-                    'Count',
-                  ]}
-                />
-              }
-            />
-            <Legend
-              verticalAlign="bottom"
-              height={36}
-              formatter={(value) => (
-                <span className="text-foreground text-xs">{value}</span>
-              )}
-            />
-          </PieChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}
-
-export function RoleDistributionChartSkeleton() {
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4 space-y-1">
-        <Skeleton className="h-4 w-28" />
-        <Skeleton className="h-3 w-36" />
-      </div>
-      <div className="flex h-[200px] items-center justify-center">
-        <Skeleton className="size-[150px] rounded-full" />
-      </div>
-    </div>
-  );
-}

package/template/apps/web/src/components/admin/charts/session-activity-chart.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import type { SessionActivityPoint } from '@repo/packages-types/stats';
-import { Skeleton } from '@repo/packages-ui/skeleton';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-
-import { ChartTooltip } from './chart-tooltip';
-
-interface SessionActivityChartProps {
-  data: SessionActivityPoint[];
-}
-
-function formatDate(dateStr: string) {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-}
-
-export function SessionActivityChart({ data }: SessionActivityChartProps) {
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4">
-        <h3 className="text-sm font-semibold">Session Activity</h3>
-        <p className="text-muted-foreground text-xs">
-          Login sessions created per day (30 days)
-        </p>
-      </div>
-      <div className="h-[240px]">
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={data}
-            margin={{ top: 5, right: 5, left: -20, bottom: 0 }}
-          >
-            <CartesianGrid
-              strokeDasharray="3 3"
-              vertical={false}
-              className="stroke-zinc-200 dark:stroke-zinc-700"
-            />
-            <XAxis
-              dataKey="date"
-              tickFormatter={formatDate}
-              tick={{ fontSize: 11 }}
-              tickLine={false}
-              axisLine={false}
-              interval="preserveStartEnd"
-              className="text-zinc-500 dark:text-zinc-400"
-            />
-            <YAxis
-              tick={{ fontSize: 11 }}
-              tickLine={false}
-              axisLine={false}
-              allowDecimals={false}
-              className="text-zinc-500 dark:text-zinc-400"
-            />
-            <Tooltip
-              content={<ChartTooltip labelFormatter={formatDate} />}
-              cursor={{ fill: 'rgba(99, 102, 241, 0.08)' }}
-            />
-            <Bar
-              dataKey="count"
-              name="Sessions"
-              fill="#3b82f6"
-              radius={[4, 4, 0, 0]}
-              maxBarSize={32}
-            />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-}
-
-export function SessionActivityChartSkeleton() {
-  return (
-    <div className="bg-card rounded-xl border p-5">
-      <div className="mb-4 space-y-1">
-        <Skeleton className="h-4 w-28" />
-        <Skeleton className="h-3 w-44" />
-      </div>
-      <Skeleton className="h-[240px] w-full" />
-    </div>
-  );
-}