create-blitzpack 0.1.0

package/template/apps/api/vitest.config.ts

@@ -0,0 +1,35 @@
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import { sharedConfig } from '../../vitest.shared';
+
+export default mergeConfig(
+  sharedConfig,
+  defineConfig({
+    test: {
+      name: '@repo/api',
+      include: [
+        'src/**/*.spec.ts', // Unit tests (with mocks)
+        'test/**/*.spec.ts', // Unit tests
+        'test/**/*.integration.spec.ts', // Integration tests (with real DB)
+      ],
+      globals: true,
+      root: './',
+      setupFiles: ['./test/setup.ts'],
+      // Run tests sequentially for integration tests (shared DB)
+      fileParallelism: false, // Disable file-level parallelism
+      sequence: {
+        concurrent: false, // Disable test-level parallelism
+      },
+      coverage: {
+        thresholds: {
+          lines: 80,
+          functions: 80,
+          branches: 75,
+          statements: 80,
+        },
+      },
+    },
+    plugins: [tsconfigPaths()],
+  })
+);

package/template/apps/web/.env.local.example

@@ -0,0 +1,11 @@
+NODE_ENV=development
+
+# CRITICAL: Must include /api at the end (all API routes are under /api prefix)
+# The auth client and regular API client both use this base URL
+# Auth routes: {NEXT_PUBLIC_API_URL}/auth/*
+# Other routes: {NEXT_PUBLIC_API_URL}/*
+#
+# Examples:
+#   Local: http://localhost:8080/api
+#   Production: https://your-railway-api.up.railway.app/api
+NEXT_PUBLIC_API_URL=http://localhost:8080/api

package/template/apps/web/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
+}

package/template/apps/web/next.config.ts

@@ -0,0 +1,22 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['@repo/packages-types', '@repo/packages-utils'],
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package/template/apps/web/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@repo/web",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "test": "vitest run",
+    "test:unit": "vitest run",
+    "test:integration": "echo 'No integration tests for web'",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "vercel-build": "cd ../.. && turbo build --filter=@repo/web",
+    "vercel-ignore-build": "npx turbo-ignore --fallback=HEAD^1"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@repo/packages-types": "workspace:*",
+    "@repo/packages-ui": "workspace:*",
+    "@repo/packages-utils": "workspace:*",
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-table": "^8.21.3",
+    "better-auth": "^1.3.27",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.23.24",
+    "jotai": "^2.15.0",
+    "lucide-react": "^0.545.0",
+    "next": "16.0.3",
+    "next-themes": "^0.4.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "recharts": "^3.5.0",
+    "sonner": "^2.0.7",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@repo/tailwind-config": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@types/node": "^24.7.1",
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.18.0",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "^4.1.14",
+    "tailwindcss-debug-screens": "^3.0.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.7.2",
+    "vitest": "^3.2.4"
+  }
+}

package/template/apps/web/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/template/apps/web/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/template/apps/web/src/app/(admin)/admin/layout.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { AnimatedThemeToggler } from '@repo/packages-ui/animated-theme-toggler';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@repo/packages-ui/dropdown-menu';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@repo/packages-ui/sidebar';
+import { UserAvatar } from '@repo/packages-ui/user-avatar';
+import { motion } from 'framer-motion';
+import {
+  ChevronsUpDown,
+  KeyRound,
+  LogOut,
+  MonitorCheck,
+  ShieldCheck,
+  Users,
+} from 'lucide-react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { type ReactNode } from 'react';
+
+import { ProtectedRoute } from '@/components/auth/protected-route';
+import { authClient } from '@/lib/auth';
+
+const adminNavItems = [
+  {
+    title: 'System Monitoring',
+    href: '/admin',
+    icon: MonitorCheck,
+  },
+  {
+    title: 'Users',
+    href: '/admin/users',
+    icon: Users,
+  },
+  {
+    title: 'Sessions',
+    href: '/admin/sessions',
+    icon: KeyRound,
+  },
+];
+
+function AdminLayoutContent({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { data: session } = authClient.useSession();
+
+  const handleSignOut = async () => {
+    await authClient.signOut();
+    router.push('/');
+  };
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <div className="bg-primary text-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <ShieldCheck className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Admin Panel</span>
+                  <span className="truncate text-xs">Manage App</span>
+                </div>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {adminNavItems.map((item) => {
+                  const Icon = item.icon;
+                  const isActive = pathname === item.href;
+
+                  return (
+                    <SidebarMenuItem key={item.href}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={isActive}
+                        tooltip={item.title}
+                        className="hover:bg-sidebar-accent/50 relative overflow-visible data-[active=true]:bg-transparent"
+                      >
+                        <Link href={item.href} className="relative z-20">
+                          {isActive && (
+                            <motion.div
+                              layoutId="active-nav-item"
+                              className="bg-sidebar-primary absolute inset-0 -z-10 rounded-md"
+                              transition={{
+                                type: 'spring',
+                                stiffness: 300,
+                                damping: 30,
+                              }}
+                            />
+                          )}
+                          <motion.span
+                            animate={{
+                              color: isActive
+                                ? 'var(--sidebar-primary-foreground)'
+                                : 'var(--sidebar-foreground)',
+                            }}
+                            transition={{
+                              duration: 0.2,
+                              delay: isActive ? 0.1 : 0,
+                            }}
+                            className="flex items-center justify-center"
+                          >
+                            <Icon className="size-4" />
+                          </motion.span>
+                          <motion.span
+                            animate={{
+                              color: isActive
+                                ? 'var(--sidebar-primary-foreground)'
+                                : 'var(--sidebar-foreground)',
+                            }}
+                            transition={{
+                              duration: 0.2,
+                              delay: isActive ? 0.1 : 0,
+                            }}
+                            className="truncate"
+                          >
+                            {item.title}
+                          </motion.span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <SidebarMenuButton
+                    size="lg"
+                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                  >
+                    <UserAvatar
+                      src={session?.user.image}
+                      name={session?.user.name}
+                      email={session?.user.email}
+                      size="sm"
+                      className="rounded-lg"
+                    />
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-semibold">
+                        {session?.user.name || 'Admin'}
+                      </span>
+                      <span className="truncate text-xs">
+                        {session?.user.email}
+                      </span>
+                    </div>
+                    <ChevronsUpDown className="ml-auto size-4" />
+                  </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                  side="bottom"
+                  align="end"
+                  sideOffset={4}
+                >
+                  <DropdownMenuItem onClick={handleSignOut}>
+                    <LogOut className="mr-2 size-4" />
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <div className="flex-1" />
+          <AnimatedThemeToggler />
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ProtectedRoute requiredRole="admin" redirectTo="/dashboard">
+      <AdminLayoutContent>{children}</AdminLayoutContent>
+    </ProtectedRoute>
+  );
+}

package/template/apps/web/src/app/(admin)/admin/page.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { Activity, CalendarDays, UserPlus, Users } from 'lucide-react';
+import { useCallback, useState } from 'react';
+
+import {
+  ActivityFeedSkeleton,
+  RecentSignupsFeed,
+} from '@/components/admin/activity-feed';
+import {
+  AuthBreakdownChart,
+  AuthBreakdownChartSkeleton,
+} from '@/components/admin/charts/auth-breakdown-chart';
+import {
+  RealtimeMetricsChart,
+  RealtimeMetricsChartSkeleton,
+} from '@/components/admin/charts/realtime-metrics-chart';
+import {
+  RoleDistributionChart,
+  RoleDistributionChartSkeleton,
+} from '@/components/admin/charts/role-distribution-chart';
+import {
+  SessionActivityChart,
+  SessionActivityChartSkeleton,
+} from '@/components/admin/charts/session-activity-chart';
+import {
+  UserGrowthChart,
+  UserGrowthChartSkeleton,
+} from '@/components/admin/charts/user-growth-chart';
+import {
+  HealthIndicator,
+  HealthIndicatorSkeleton,
+} from '@/components/admin/health-indicator';
+import { RefreshControl } from '@/components/admin/refresh-control';
+import { StatCard, StatCardSkeleton } from '@/components/admin/stat-card';
+import { useFetchSystemStats } from '@/hooks/api/use-admin-stats';
+
+export default function AdminDashboardPage() {
+  const [refreshInterval, setRefreshInterval] = useState<number | null>(15000);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+  const { data, isLoading, isFetching, refetch } = useFetchSystemStats({
+    refetchInterval: refreshInterval ?? false,
+    refetchOnWindowFocus: false,
+  });
+
+  const handleRefresh = useCallback(() => {
+    refetch().then(() => setLastUpdated(new Date()));
+  }, [refetch]);
+
+  if (data && !lastUpdated) {
+    setLastUpdated(new Date());
+  }
+
+  return (
+    <div className="container mx-auto space-y-6 px-6 py-8">
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="mb-2 text-3xl font-bold">System Monitoring</h1>
+          <p className="text-muted-foreground">
+            Real-time application metrics and health status
+          </p>
+        </div>
+        <RefreshControl
+          interval={refreshInterval}
+          onIntervalChange={setRefreshInterval}
+          onRefresh={handleRefresh}
+          isRefreshing={isFetching}
+          lastUpdated={lastUpdated}
+        />
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {isLoading ? (
+          Array.from({ length: 4 }).map((_, i) => <StatCardSkeleton key={i} />)
+        ) : data ? (
+          <>
+            <StatCard
+              title="Total Users"
+              value={data.overview.totalUsers}
+              icon={Users}
+              accentColor="blue"
+            />
+            <StatCard
+              title="Active Sessions (24h)"
+              value={data.overview.activeSessionsLast24h}
+              icon={Activity}
+              accentColor="emerald"
+            />
+            <StatCard
+              title="New Today"
+              value={data.overview.newUsersToday}
+              icon={UserPlus}
+              accentColor="cyan"
+            />
+            <StatCard
+              title="New This Week"
+              value={data.overview.newUsersThisWeek}
+              icon={CalendarDays}
+              accentColor="amber"
+            />
+          </>
+        ) : null}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {isLoading ? (
+          <RealtimeMetricsChartSkeleton />
+        ) : (
+          <RealtimeMetricsChart />
+        )}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {isLoading ? (
+          <>
+            <UserGrowthChartSkeleton />
+            <SessionActivityChartSkeleton />
+          </>
+        ) : data ? (
+          <>
+            <UserGrowthChart data={data.userGrowth} />
+            <SessionActivityChart data={data.sessionActivity} />
+          </>
+        ) : null}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {isLoading ? (
+          <>
+            <RoleDistributionChartSkeleton />
+            <AuthBreakdownChartSkeleton />
+          </>
+        ) : data ? (
+          <>
+            <RoleDistributionChart data={data.roleDistribution} />
+            <AuthBreakdownChart data={data.authBreakdown} />
+          </>
+        ) : null}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {isLoading ? (
+          <>
+            <ActivityFeedSkeleton />
+            <HealthIndicatorSkeleton />
+          </>
+        ) : data ? (
+          <>
+            <RecentSignupsFeed signups={data.recentSignups} />
+            <HealthIndicator health={data.systemHealth} />
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/app/(admin)/admin/sessions/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { SessionsManagementTable } from '@/components/admin/sessions-management-table';
+
+export default function AdminSessionsPage() {
+  return (
+    <div className="container mx-auto space-y-6 px-6 py-8">
+      <div className="mb-8">
+        <h1 className="mb-2 text-3xl font-bold">Session Management</h1>
+        <p className="text-muted-foreground">
+          Monitor and manage user sessions across all devices
+        </p>
+      </div>
+
+      <SessionsManagementTable />
+    </div>
+  );
+}

package/template/apps/web/src/app/(admin)/admin/users/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from 'react';
+
+import { UsersManagementTable } from '@/components/admin/users-management-table';
+
+export default function AdminUsersPage() {
+  return (
+    <div className="container mx-auto px-6 py-8">
+      <div className="mb-8">
+        <h1 className="mb-2 text-3xl font-bold">User Management</h1>
+        <p className="text-muted-foreground">
+          Manage user accounts, roles, and permissions
+        </p>
+      </div>
+
+      <UsersManagementTable />
+    </div>
+  );
+}