create-blitzpack 0.1.0

package/template/apps/web/src/components/admin/charts/user-growth-chart.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import type { UserGrowthPoint } from '@repo/packages-types/stats';
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { ChartTooltip } from './chart-tooltip';
+
+interface UserGrowthChartProps {
+  data: UserGrowthPoint[];
+}
+
+function formatDate(dateStr: string) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+export function UserGrowthChart({ data }: UserGrowthChartProps) {
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4">
+        <h3 className="text-sm font-semibold">User Growth</h3>
+        <p className="text-muted-foreground text-xs">
+          New signups and cumulative users (30 days)
+        </p>
+      </div>
+      <div className="h-[240px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={data}
+            margin={{ top: 5, right: 5, left: -20, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="colorCumulative" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#6366f1" stopOpacity={0.3} />
+                <stop offset="95%" stopColor="#6366f1" stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="colorNew" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
+                <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <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}
+              className="text-zinc-500 dark:text-zinc-400"
+            />
+            <Tooltip
+              content={<ChartTooltip labelFormatter={formatDate} />}
+              cursor={{ stroke: 'rgba(99, 102, 241, 0.3)', strokeWidth: 1 }}
+            />
+            <Area
+              type="monotone"
+              dataKey="cumulative"
+              name="Total Users"
+              stroke="#6366f1"
+              strokeWidth={2}
+              fill="url(#colorCumulative)"
+            />
+            <Area
+              type="monotone"
+              dataKey="count"
+              name="New Users"
+              stroke="#10b981"
+              strokeWidth={2}
+              fill="url(#colorNew)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export function UserGrowthChartSkeleton() {
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4 space-y-1">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-3 w-48" />
+      </div>
+      <Skeleton className="h-[240px] w-full" />
+    </div>
+  );
+}

package/template/apps/web/src/components/admin/health-indicator.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import type { SystemHealth } from '@repo/packages-types/stats';
+import { cn } from '@repo/packages-ui/lib/utils';
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import { motion } from 'framer-motion';
+import { Activity, Clock, Database } from 'lucide-react';
+
+interface HealthIndicatorProps {
+  health: SystemHealth;
+}
+
+function formatUptime(seconds: number) {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${mins}m`;
+  return `${mins}m`;
+}
+
+const STATUS_CONFIG = {
+  connected: {
+    label: 'Healthy',
+    color: 'bg-emerald-500',
+    textColor: 'text-emerald-600 dark:text-emerald-400',
+    bgColor: 'bg-emerald-500/10',
+  },
+  degraded: {
+    label: 'Degraded',
+    color: 'bg-amber-500',
+    textColor: 'text-amber-600 dark:text-amber-400',
+    bgColor: 'bg-amber-500/10',
+  },
+  disconnected: {
+    label: 'Offline',
+    color: 'bg-rose-500',
+    textColor: 'text-rose-600 dark:text-rose-400',
+    bgColor: 'bg-rose-500/10',
+  },
+};
+
+function PulseDot({
+  status,
+}: {
+  status: 'connected' | 'degraded' | 'disconnected';
+}) {
+  const config = STATUS_CONFIG[status];
+
+  return (
+    <span className="relative flex size-3">
+      <motion.span
+        className={cn(
+          'absolute inline-flex h-full w-full rounded-full opacity-75',
+          config.color
+        )}
+        animate={{ scale: [1, 1.5, 1], opacity: [0.75, 0, 0.75] }}
+        transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
+      />
+      <span
+        className={cn('relative inline-flex size-3 rounded-full', config.color)}
+      />
+    </span>
+  );
+}
+
+export function HealthIndicator({ health }: HealthIndicatorProps) {
+  const dbStatus = STATUS_CONFIG[health.database];
+
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-semibold">System Health</h3>
+          <p className="text-muted-foreground text-xs">Real-time status</p>
+        </div>
+        <div
+          className={cn(
+            'flex items-center gap-2 rounded-full px-3 py-1',
+            dbStatus.bgColor
+          )}
+        >
+          <PulseDot status={health.database} />
+          <span className={cn('text-xs font-medium', dbStatus.textColor)}>
+            {dbStatus.label}
+          </span>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between rounded-lg border p-3">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-blue-500/10 p-2">
+              <Database className="size-4 text-blue-500" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Database</p>
+              <p className="text-muted-foreground text-xs">PostgreSQL</p>
+            </div>
+          </div>
+          <div className="text-right">
+            <p className={cn('text-sm font-medium', dbStatus.textColor)}>
+              {dbStatus.label}
+            </p>
+            {health.dbLatencyMs !== undefined && (
+              <p className="text-muted-foreground text-xs">
+                {health.dbLatencyMs}ms latency
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between rounded-lg border p-3">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-violet-500/10 p-2">
+              <Clock className="size-4 text-violet-500" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Uptime</p>
+              <p className="text-muted-foreground text-xs">API Server</p>
+            </div>
+          </div>
+          <p className="text-sm font-medium">{formatUptime(health.uptime)}</p>
+        </div>
+
+        <div className="flex items-center justify-between rounded-lg border p-3">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-emerald-500/10 p-2">
+              <Activity className="size-4 text-emerald-500" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">Last Check</p>
+              <p className="text-muted-foreground text-xs">Health check</p>
+            </div>
+          </div>
+          <p className="text-muted-foreground text-xs">
+            {new Date(health.lastChecked).toLocaleTimeString()}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function HealthIndicatorSkeleton() {
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="space-y-1">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      <div className="space-y-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between rounded-lg border p-3"
+          >
+            <div className="flex items-center gap-3">
+              <Skeleton className="size-8 rounded-lg" />
+              <div className="space-y-1">
+                <Skeleton className="h-3 w-16" />
+                <Skeleton className="h-2 w-12" />
+              </div>
+            </div>
+            <Skeleton className="h-4 w-14" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/components/admin/refresh-control.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@repo/packages-ui/select';
+import { motion } from 'framer-motion';
+import { RefreshCw } from 'lucide-react';
+
+interface RefreshControlProps {
+  interval: number | null;
+  onIntervalChange: (interval: number | null) => void;
+  onRefresh: () => void;
+  isRefreshing: boolean;
+  lastUpdated: Date | null;
+}
+
+const INTERVALS = [
+  { value: '5000', label: '5s' },
+  { value: '15000', label: '15s' },
+  { value: '30000', label: '30s' },
+  { value: '60000', label: '1m' },
+  { value: 'off', label: 'Off' },
+];
+
+export function RefreshControl({
+  interval,
+  onIntervalChange,
+  onRefresh,
+  isRefreshing,
+  lastUpdated,
+}: RefreshControlProps) {
+  const handleIntervalChange = (value: string) => {
+    if (value === 'off') {
+      onIntervalChange(null);
+    } else {
+      onIntervalChange(parseInt(value, 10));
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      {lastUpdated && (
+        <span className="text-muted-foreground text-xs">
+          Updated {lastUpdated.toLocaleTimeString()}
+        </span>
+      )}
+      <div className="flex items-center gap-2">
+        <Select
+          value={interval?.toString() ?? 'off'}
+          onValueChange={handleIntervalChange}
+        >
+          <SelectTrigger className="h-8 w-[80px] text-xs">
+            <SelectValue placeholder="Auto" />
+          </SelectTrigger>
+          <SelectContent>
+            {INTERVALS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRefresh}
+          disabled={isRefreshing}
+          className="h-8 gap-1.5 px-2.5"
+        >
+          <motion.div
+            animate={isRefreshing ? { rotate: 360 } : { rotate: 0 }}
+            transition={
+              isRefreshing
+                ? { duration: 1, repeat: Infinity, ease: 'linear' }
+                : { duration: 0 }
+            }
+          >
+            <RefreshCw className="size-3.5" />
+          </motion.div>
+          <span className="text-xs">Refresh</span>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/components/admin/session-revoke-all-dialog.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@repo/packages-ui/alert-dialog';
+import { Button } from '@repo/packages-ui/button';
+import { LogOut } from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+import { useRevokeUserSessions } from '@/hooks/api/use-admin-sessions';
+
+interface SessionRevokeAllDialogProps {
+  userId: string;
+  userName: string;
+  userEmail: string;
+}
+
+export function SessionRevokeAllDialog({
+  userId,
+  userName,
+  userEmail,
+}: SessionRevokeAllDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const { mutate: revokeUserSessions, isPending } = useRevokeUserSessions();
+
+  const handleRevoke = () => {
+    revokeUserSessions(userId, {
+      onSuccess: () => {
+        toast.success('All sessions revoked successfully');
+        setOpen(false);
+      },
+      onError: (error) => {
+        toast.error(error.message || 'Failed to revoke sessions');
+      },
+    });
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline" size="sm" className="text-destructive">
+          <LogOut className="mr-2 h-4 w-4" />
+          Revoke All
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Revoke all sessions for this user?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This will immediately log out{' '}
+            <span className="font-semibold">{userName || userEmail}</span> from
+            all devices. They will need to sign in again on each device.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleRevoke}
+            disabled={isPending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isPending ? 'Revoking...' : 'Revoke All Sessions'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/template/apps/web/src/components/admin/session-revoke-dialog.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { AdminSession } from '@repo/packages-types/session';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@repo/packages-ui/alert-dialog';
+import { Button } from '@repo/packages-ui/button';
+import { LogOut } from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+import { useRevokeSession } from '@/hooks/api/use-admin-sessions';
+
+interface SessionRevokeDialogProps {
+  session: AdminSession;
+}
+
+export function SessionRevokeDialog({ session }: SessionRevokeDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const { mutate: revokeSession, isPending } = useRevokeSession();
+
+  const handleRevoke = () => {
+    revokeSession(session.id, {
+      onSuccess: () => {
+        toast.success('Session revoked successfully');
+        setOpen(false);
+      },
+      onError: (error) => {
+        toast.error(error.message || 'Failed to revoke session');
+      },
+    });
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" size="sm" className="text-destructive">
+          <LogOut className="mr-2 h-4 w-4" />
+          Revoke
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Revoke this session?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will immediately log out{' '}
+            <span className="font-semibold">
+              {session.user.name || session.user.email}
+            </span>{' '}
+            from this device. They will need to sign in again to continue.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleRevoke}
+            disabled={isPending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isPending ? 'Revoking...' : 'Revoke Session'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}