create-blitzpack 0.1.0 → 0.1.1

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

@@ -1,108 +0,0 @@
-'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

@@ -1,175 +0,0 @@
-'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

@@ -1,90 +0,0 @@
-'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

@@ -1,79 +0,0 @@
-'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

@@ -1,74 +0,0 @@
-'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>
-  );
-}