create-blitzpack 0.1.0

package/template/apps/web/src/app/not-found.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import { FileQuestion } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+
+import { ErrorCard } from '@/components/error/error-card';
+
+export default function NotFound() {
+  return (
+    <ErrorCard
+      icon={FileQuestion}
+      title="Page not found"
+      description="The page you're looking for doesn't exist or has been moved."
+      actions={
+        <>
+          <Button variant="outline" onClick={() => window.history.back()}>
+            Go back
+          </Button>
+          <Button asChild>
+            <Link href="/">Go home</Link>
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/template/apps/web/src/app/page.tsx

@@ -0,0 +1,192 @@
+import { AnimatedThemeToggler } from '@repo/packages-ui/animated-theme-toggler';
+import { Button } from '@repo/packages-ui/button';
+import { GitHubIcon } from '@repo/packages-ui/icons/brand-icons';
+import { ArrowRight, Boxes, PackageCheck, Terminal } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
+
+import { CommandBlock } from '@/components/landing/command-block';
+import { FeatureCard } from '@/components/landing/feature-card';
+import { IncludedFeatureCard } from '@/components/landing/included-feature-card';
+import { Logo } from '@/components/landing/logo';
+import { TechBadge } from '@/components/landing/tech-badge';
+import {
+  features,
+  includedFeatures,
+  quickStartCommands,
+  techStack,
+} from '@/config/landing-data';
+import { siteConfig } from '@/config/site';
+
+export default async function Home(): Promise<React.ReactElement> {
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || '';
+  const isLocalDev =
+    apiUrl.includes('localhost') || apiUrl.includes('127.0.0.1');
+
+  const backendPort = new URL(apiUrl).port || '8080';
+
+  return (
+    <main className="bg-background relative flex flex-1 flex-col items-center justify-center p-8 pb-0">
+      <div className="absolute right-8 top-8 flex items-center gap-2">
+        <Button asChild variant="default">
+          <Link href="/login">Sign In</Link>
+        </Button>
+        <AnimatedThemeToggler />
+      </div>
+      <div className="w-full max-w-5xl space-y-12">
+        <div className="space-y-6 text-center">
+          <div className="flex justify-center">
+            <Logo className="h-20 w-auto" />
+          </div>
+          <div className="space-y-3">
+            <h1 className="text-foreground text-5xl font-semibold tracking-tight">
+              Ship production apps faster
+            </h1>
+            <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
+              Production-ready full-stack TypeScript monorepo with Next.js,
+              Fastify, Turborepo and other modern technologies.
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
+            <Button
+              asChild
+              size="lg"
+              className="group shadow-lg transition-all hover:scale-105 hover:shadow-xl"
+            >
+              <Link href="#quick-start" className="flex items-center gap-2">
+                Quick Start
+                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
+              </Link>
+            </Button>
+            <Button
+              asChild
+              size="lg"
+              variant="outline"
+              className="group transition-all hover:scale-105"
+            >
+              <a
+                href={siteConfig.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2"
+              >
+                <GitHubIcon className="size-4" />
+                GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-3">
+          {features.map((feature) => (
+            <FeatureCard
+              key={feature.title}
+              iconName={feature.iconName}
+              title={feature.title}
+              description={feature.description}
+            />
+          ))}
+        </div>
+
+        <div className="border-border bg-card rounded-lg border p-8">
+          <h2 className="text-card-foreground mb-8 flex items-center gap-2 text-xl font-medium">
+            <PackageCheck className="text-foreground h-5 w-5" />
+            <span>Out of the Box</span>
+          </h2>
+          <div className="grid gap-6 md:grid-cols-3">
+            {includedFeatures.map((feature) => (
+              <IncludedFeatureCard
+                key={feature.title}
+                iconName={feature.iconName}
+                title={feature.title}
+                pages={feature.pages}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="border-border bg-card rounded-lg border p-8">
+          <h2 className="text-card-foreground mb-8 flex items-center gap-2 text-xl font-medium">
+            <Boxes className="text-foreground h-5 w-5" />
+            <span>Tech Stack</span>
+          </h2>
+          <div className="space-y-8">
+            {Object.values(techStack).map((stack) => (
+              <div key={stack.title}>
+                <h3 className="text-card-foreground mb-4 text-sm font-medium">
+                  {stack.title}
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {stack.items.map((item) => (
+                    <TechBadge key={item}>{item}</TechBadge>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div
+          id="quick-start"
+          className="border-border bg-card border-l-primary rounded-lg border border-l-8 p-8"
+        >
+          <div className="mb-6 flex items-center gap-3">
+            <Terminal className="text-foreground h-5 w-5" />
+            <h2 className="text-foreground text-xl font-medium">Quick Start</h2>
+          </div>
+          <div className="space-y-3">
+            {quickStartCommands.map((cmd) => (
+              <CommandBlock
+                key={cmd.command}
+                command={cmd.command}
+                tooltipContent={cmd.tooltip}
+              />
+            ))}
+          </div>
+          {isLocalDev && (
+            <>
+              <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+                <span className="text-muted-foreground text-xs">Services:</span>
+                <a
+                  href="http://localhost:3000"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
+                >
+                  Web <span className="text-muted-foreground">:3000</span>
+                </a>
+                <a
+                  href={`http://localhost:${backendPort}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
+                >
+                  API{' '}
+                  <span className="text-muted-foreground">:{backendPort}</span>
+                </a>
+                <a
+                  href={`http://localhost:${backendPort}/docs`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="border-border hover:border-foreground/30 hover:bg-accent bg-background inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
+                >
+                  API Docs
+                  <span className="text-muted-foreground">
+                    :{backendPort}/docs
+                  </span>
+                </a>
+              </div>
+              <p className="text-muted-foreground mt-4 text-center text-xs">
+                See{' '}
+                <code className="bg-muted rounded px-1.5 py-0.5 font-mono">
+                  GETTING_STARTED.md
+                </code>
+                for further optional customization.
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}

package/template/apps/web/src/components/admin/activity-feed.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import type { RecentSignup } from '@repo/packages-types/stats';
+import { ScrollArea } from '@repo/packages-ui/scroll-area';
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import { UserAvatar } from '@repo/packages-ui/user-avatar';
+import { motion } from 'framer-motion';
+
+function formatRelativeTime(dateStr: string) {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays === 1) return 'Yesterday';
+  return `${diffDays}d ago`;
+}
+
+interface RecentSignupsFeedProps {
+  signups: RecentSignup[];
+}
+
+export function RecentSignupsFeed({ signups }: RecentSignupsFeedProps) {
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4">
+        <h3 className="text-sm font-semibold">Recent Signups</h3>
+        <p className="text-muted-foreground text-xs">
+          Latest user registrations
+        </p>
+      </div>
+      <ScrollArea className="h-[280px] pr-3">
+        <div className="space-y-3">
+          {signups.map((signup, index) => (
+            <motion.div
+              key={signup.id}
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="flex items-center gap-3 rounded-lg border p-3"
+            >
+              <UserAvatar
+                src={signup.image}
+                name={signup.name}
+                email={signup.email}
+                size="sm"
+              />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium">
+                  {signup.name || 'No name'}
+                </p>
+                <p className="text-muted-foreground truncate text-xs">
+                  {signup.email}
+                </p>
+              </div>
+              <span className="text-muted-foreground shrink-0 text-xs">
+                {formatRelativeTime(signup.createdAt)}
+              </span>
+            </motion.div>
+          ))}
+          {signups.length === 0 && (
+            <p className="text-muted-foreground py-8 text-center text-sm">
+              No recent signups
+            </p>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+export function ActivityFeedSkeleton() {
+  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="space-y-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div
+            key={i}
+            className="flex items-center gap-3 rounded-lg border p-3"
+          >
+            <Skeleton className="size-8 rounded-full" />
+            <div className="flex-1 space-y-1">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-2 w-32" />
+            </div>
+            <Skeleton className="h-3 w-12" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/components/admin/charts/auth-breakdown-chart.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import type { AuthBreakdown } from '@repo/packages-types/stats';
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import {
+  Bar,
+  BarChart,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { SimpleChartTooltip } from './chart-tooltip';
+
+interface AuthBreakdownChartProps {
+  data: AuthBreakdown;
+}
+
+const AUTH_CONFIG = [
+  { key: 'verified', label: 'Verified', color: '#10b981' },
+  { key: 'unverified', label: 'Unverified', color: '#f59e0b' },
+  { key: 'banned', label: 'Banned', color: '#ef4444' },
+] as const;
+
+export function AuthBreakdownChart({ data }: AuthBreakdownChartProps) {
+  const chartData = AUTH_CONFIG.map((config) => ({
+    name: config.label,
+    count: data[config.key],
+    color: config.color,
+  }));
+
+  const total = data.verified + data.unverified + data.banned;
+
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4">
+        <h3 className="text-sm font-semibold">Auth Status</h3>
+        <p className="text-muted-foreground text-xs">
+          Users by verification and ban status
+        </p>
+      </div>
+      <div className="h-[200px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={chartData}
+            layout="vertical"
+            margin={{ top: 5, right: 30, left: 0, bottom: 5 }}
+          >
+            <XAxis
+              type="number"
+              tick={{ fontSize: 11 }}
+              tickLine={false}
+              axisLine={false}
+              allowDecimals={false}
+              className="text-zinc-500 dark:text-zinc-400"
+            />
+            <YAxis
+              type="category"
+              dataKey="name"
+              tick={{ fontSize: 11 }}
+              tickLine={false}
+              axisLine={false}
+              width={75}
+              className="text-zinc-500 dark:text-zinc-400"
+            />
+            <Tooltip
+              content={
+                <SimpleChartTooltip
+                  valueFormatter={(value: number) => [
+                    `${value} (${total > 0 ? ((value / total) * 100).toFixed(1) : 0}%)`,
+                    'Users',
+                  ]}
+                />
+              }
+              cursor={{ fill: 'rgba(99, 102, 241, 0.08)' }}
+            />
+            <Bar dataKey="count" radius={[0, 4, 4, 0]} maxBarSize={28}>
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export function AuthBreakdownChartSkeleton() {
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="mb-4 space-y-1">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-3 w-44" />
+      </div>
+      <div className="space-y-3 pt-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-6 flex-1" />
+        </div>
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-6 w-2/3" />
+        </div>
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-6 w-1/4" />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { cn } from '@repo/packages-ui/lib/utils';
+
+interface TooltipPayload {
+  value?: number;
+  name?: string;
+  color?: string;
+  payload?: { color?: string };
+}
+
+interface ChartTooltipProps {
+  active?: boolean;
+  payload?: TooltipPayload[];
+  label?: string;
+  labelFormatter?: (label: string) => string;
+}
+
+export function ChartTooltip({
+  active,
+  payload,
+  label,
+  labelFormatter,
+}: ChartTooltipProps) {
+  if (!active || !payload?.length) return null;
+
+  const formattedLabel =
+    labelFormatter && label ? labelFormatter(label) : label;
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border px-3 py-2 shadow-lg',
+        'bg-white/90 dark:bg-zinc-900/90',
+        'backdrop-blur-md',
+        'border-zinc-200/50 dark:border-zinc-700/50'
+      )}
+    >
+      {formattedLabel && (
+        <p className="mb-1.5 text-xs font-semibold text-zinc-900 dark:text-zinc-100">
+          {formattedLabel}
+        </p>
+      )}
+      <div className="space-y-1">
+        {payload.map((entry: TooltipPayload, index: number) => (
+          <div key={index} className="flex items-center gap-2 text-xs">
+            <span
+              className="size-2 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span className="text-zinc-600 dark:text-zinc-400">
+              {entry.name}:
+            </span>
+            <span className="font-medium text-zinc-900 dark:text-zinc-100">
+              {typeof entry.value === 'number'
+                ? entry.value.toLocaleString()
+                : entry.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface SimpleChartTooltipProps {
+  active?: boolean;
+  payload?: TooltipPayload[];
+  label?: string;
+  labelFormatter?: (label: string) => string;
+  valueFormatter?: (value: number, name: string) => [string, string];
+}
+
+export function SimpleChartTooltip({
+  active,
+  payload,
+  label,
+  labelFormatter,
+  valueFormatter,
+}: SimpleChartTooltipProps) {
+  if (!active || !payload?.length) return null;
+
+  const formattedLabel =
+    labelFormatter && label ? labelFormatter(label) : label;
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border px-3 py-2 shadow-lg',
+        'bg-white/90 dark:bg-zinc-900/90',
+        'backdrop-blur-md',
+        'border-zinc-200/50 dark:border-zinc-700/50'
+      )}
+    >
+      {formattedLabel && (
+        <p className="mb-1.5 text-xs font-semibold text-zinc-900 dark:text-zinc-100">
+          {formattedLabel}
+        </p>
+      )}
+      <div className="space-y-1">
+        {payload.map((entry: TooltipPayload, index: number) => {
+          const [formattedValue, formattedName] = valueFormatter
+            ? valueFormatter(entry.value as number, entry.name as string)
+            : [entry.value?.toLocaleString(), entry.name];
+
+          return (
+            <div key={index} className="flex items-center gap-2 text-xs">
+              <span
+                className="size-2 rounded-full"
+                style={{ backgroundColor: entry.color || entry.payload?.color }}
+              />
+              <span className="text-zinc-600 dark:text-zinc-400">
+                {formattedName}:
+              </span>
+              <span className="font-medium text-zinc-900 dark:text-zinc-100">
+                {formattedValue}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}