POL-124: Migrate frontend from React Native to Next.js web app

- Replace mobile/ (Expo) with web/ (Next.js 16 + Tailwind + shadcn/ui)
- Pages: login, register, pending, championships, championship detail, registrations, profile, admin
- Logic/view separated: hooks/ for data, components/ for UI, pages compose both
- Types in src/types/ (one interface per file)
- Auth: Zustand store + localStorage tokens + cookie presence flag for proxy
- API layer: axios client with JWT auto-refresh

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/app/(app)/admin/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useUsers, useUserActions } from "@/hooks/useUsers";
+import { useAuth } from "@/store/useAuth";
+import { UserCard } from "@/components/UserCard";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+type Filter = "pending" | "all";
+
+export default function AdminPage() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+  const { data, isLoading, error } = useUsers();
+  const { approve, reject } = useUserActions();
+  const [filter, setFilter] = useState<Filter>("pending");
+
+  useEffect(() => {
+    if (user && user.role !== "admin") router.replace("/championships");
+  }, [user, router]);
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error) return <p className="text-center text-red-500 py-20">Failed to load users.</p>;
+
+  const pending = data?.filter((u) => u.status === "pending") ?? [];
+  const shown = filter === "pending" ? pending : (data ?? []);
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900">User Management</h1>
+
+      <div className="mb-4 flex gap-2">
+        <button
+          onClick={() => setFilter("pending")}
+          className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
+            filter === "pending" ? "bg-violet-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+          }`}
+        >
+          Pending ({pending.length})
+        </button>
+        <button
+          onClick={() => setFilter("all")}
+          className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
+            filter === "all" ? "bg-violet-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+          }`}
+        >
+          All users ({data?.length ?? 0})
+        </button>
+      </div>
+
+      {shown.length === 0 ? (
+        <p className="text-center text-gray-400 py-12">No users in this category.</p>
+      ) : (
+        <div className="space-y-3 max-w-2xl">
+          {shown.map((u) => (
+            <UserCard
+              key={u.id}
+              user={u}
+              onApprove={(id) => approve.mutate(id)}
+              onReject={(id) => reject.mutate(id)}
+              isActing={approve.isPending || reject.isPending}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

web/src/app/(app)/championships/[id]/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { use } from "react";
+import { useChampionship } from "@/hooks/useChampionship";
+import { useMyRegistrations } from "@/hooks/useMyRegistrations";
+import { useRegisterForChampionship } from "@/hooks/useRegisterForChampionship";
+import { useAuth } from "@/store/useAuth";
+import { RegistrationTimeline } from "@/components/RegistrationTimeline";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+export default function ChampionshipDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const user = useAuth((s) => s.user);
+
+  const { data: championship, isLoading, error } = useChampionship(id);
+  const { data: myRegs } = useMyRegistrations();
+  const registerMutation = useRegisterForChampionship(id);
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error || !championship) return <p className="text-center text-red-500 py-20">Championship not found.</p>;
+
+  const myReg = myRegs?.find((r) => r.championship_id === id);
+  const canRegister = championship.status === "open" && !myReg;
+
+  const eventDate = championship.event_date
+    ? new Date(championship.event_date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })
+    : null;
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      {/* Header image */}
+      {championship.image_url ? (
+        <img src={championship.image_url} alt={championship.title} className="w-full h-56 object-cover rounded-xl" />
+      ) : (
+        <div className="w-full h-56 rounded-xl bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center text-6xl">
+          🏆
+        </div>
+      )}
+
+      {/* Title + status */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{championship.title}</h1>
+          {championship.subtitle && <p className="text-gray-500 mt-1">{championship.subtitle}</p>}
+        </div>
+        <StatusBadge status={championship.status} />
+      </div>
+
+      {/* Details */}
+      <div className="space-y-2 text-sm text-gray-600">
+        {championship.location && <p>📍 {championship.location}</p>}
+        {championship.venue && <p>🏛 {championship.venue}</p>}
+        {eventDate && <p>📅 {eventDate}</p>}
+        {championship.entry_fee != null && <p>💳 Entry fee: <strong>{championship.entry_fee} ₽</strong></p>}
+        {championship.video_max_duration != null && (
+          <p>🎬 Max video: <strong>{Math.floor(championship.video_max_duration / 60)}m {championship.video_max_duration % 60}s</strong></p>
+        )}
+      </div>
+
+      {championship.description && (
+        <>
+          <Separator />
+          <p className="text-gray-700 whitespace-pre-line">{championship.description}</p>
+        </>
+      )}
+
+      <Separator />
+
+      {/* Registration section */}
+      {myReg && <RegistrationTimeline registration={myReg} />}
+
+      {canRegister && (
+        <Button
+          className="w-full bg-violet-600 hover:bg-violet-700"
+          disabled={registerMutation.isPending}
+          onClick={() => registerMutation.mutate()}
+        >
+          {registerMutation.isPending ? "Registering…" : "Register for this championship"}
+        </Button>
+      )}
+
+      {championship.status !== "open" && !myReg && (
+        <p className="text-center text-sm text-gray-400">Registration is not open.</p>
+      )}
+
+      {championship.form_url && (
+        <a
+          href={championship.form_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block text-center text-sm text-violet-600 hover:underline"
+        >
+          Open registration form ↗
+        </a>
+      )}
+    </div>
+  );
+}

web/src/app/(app)/championships/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useChampionships } from "@/hooks/useChampionships";
+import { ChampionshipCard } from "@/components/ChampionshipCard";
+
+export default function ChampionshipsPage() {
+  const { data, isLoading, error } = useChampionships();
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error) return <p className="text-center text-red-500 py-20">Failed to load championships.</p>;
+  if (!data?.length) return <p className="text-center text-gray-400 py-20">No championships yet.</p>;
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900">Championships</h1>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {data.map((c) => (
+          <ChampionshipCard key={c.id} championship={c} />
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/app/(app)/layout.tsx

@@ -0,0 +1,10 @@
+import { Navbar } from "@/components/Navbar";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
+    </>
+  );
+}

web/src/app/(app)/profile/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/store/useAuth";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+const ROLE_COLORS: Record<string, string> = {
+  admin: "bg-red-100 text-red-700",
+  organizer: "bg-violet-100 text-violet-700",
+  member: "bg-green-100 text-green-700",
+};
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const user = useAuth((s) => s.user);
+  const logout = useAuth((s) => s.logout);
+
+  if (!user) return null;
+
+  const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  const joinedDate = new Date(user.created_at).toLocaleDateString("en-GB", { month: "long", year: "numeric" });
+
+  async function handleLogout() {
+    await logout();
+    router.push("/login");
+  }
+
+  return (
+    <div className="max-w-md mx-auto space-y-6">
+      <div className="flex flex-col items-center gap-3 pt-4">
+        <Avatar className="h-20 w-20">
+          <AvatarFallback className="bg-violet-100 text-violet-700 text-2xl font-bold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+        <div className="text-center">
+          <p className="text-xl font-bold text-gray-900">{user.full_name}</p>
+          <p className="text-sm text-gray-500">{user.email}</p>
+        </div>
+        <Badge className={`${ROLE_COLORS[user.role] ?? "bg-gray-100"} border-0 capitalize`}>
+          {user.role}
+        </Badge>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-3 text-sm text-gray-700">
+        {user.phone && (
+          <div className="flex justify-between">
+            <span className="text-gray-400">Phone</span>
+            <span>{user.phone}</span>
+          </div>
+        )}
+        {user.organization_name && (
+          <div className="flex justify-between">
+            <span className="text-gray-400">Organization</span>
+            <span>{user.organization_name}</span>
+          </div>
+        )}
+        {user.instagram_handle && (
+          <div className="flex justify-between">
+            <span className="text-gray-400">Instagram</span>
+            <span>{user.instagram_handle}</span>
+          </div>
+        )}
+        <div className="flex justify-between">
+          <span className="text-gray-400">Member since</span>
+          <span>{joinedDate}</span>
+        </div>
+      </div>
+
+      <Separator />
+
+      <Button variant="destructive" className="w-full" onClick={handleLogout}>
+        Sign out
+      </Button>
+    </div>
+  );
+}

web/src/app/(app)/registrations/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useMyRegistrations } from "@/hooks/useMyRegistrations";
+import { RegistrationCard } from "@/components/RegistrationCard";
+
+export default function RegistrationsPage() {
+  const { data, isLoading, error } = useMyRegistrations();
+
+  if (isLoading) return <div className="flex justify-center py-20 text-gray-400">Loading…</div>;
+  if (error) return <p className="text-center text-red-500 py-20">Failed to load registrations.</p>;
+  if (!data?.length) return (
+    <div className="text-center py-20 text-gray-400">
+      <p className="text-4xl mb-3">📋</p>
+      <p>No registrations yet.</p>
+    </div>
+  );
+
+  return (
+    <div>
+      <h1 className="mb-6 text-2xl font-bold text-gray-900">My Registrations</h1>
+      <div className="space-y-3 max-w-2xl">
+        {data.map((r) => (
+          <RegistrationCard key={r.id} registration={r} />
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-violet-50 to-purple-100 p-4">
+      <div className="w-full max-w-md">{children}</div>
+    </div>
+  );
+}

web/src/app/(auth)/login/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { useLoginForm } from "@/hooks/useLoginForm";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function LoginPage() {
+  const { email, setEmail, password, setPassword, error, isLoading, submit } = useLoginForm();
+
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-2 text-4xl">🏆</div>
+        <CardTitle className="text-2xl">Welcome back</CardTitle>
+        <CardDescription>Sign in to your account</CardDescription>
+      </CardHeader>
+
+      <form onSubmit={submit}>
+        <CardContent className="space-y-4">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+
+          <div className="space-y-1">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="password">Password</Label>
+            <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-3">
+          <Button type="submit" className="w-full bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
+            {isLoading ? "Signing in…" : "Sign in"}
+          </Button>
+          <p className="text-center text-sm text-gray-500">
+            No account?{" "}
+            <Link href="/register" className="font-medium text-violet-600 hover:underline">
+              Register
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

web/src/app/(auth)/pending/page.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function PendingPage() {
+  return (
+    <Card className="text-center">
+      <CardHeader>
+        <div className="mx-auto mb-2 text-5xl">⏳</div>
+        <CardTitle className="text-2xl">Awaiting approval</CardTitle>
+        <CardDescription>
+          Your organizer account has been submitted. An admin will review it shortly.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="mb-6 text-sm text-gray-500">
+          Once approved you can log in and start creating championships.
+        </p>
+        <Button asChild variant="outline" className="w-full">
+          <Link href="/login">Back to login</Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

web/src/app/(auth)/register/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { useRegisterForm } from "@/hooks/useRegisterForm";
+import { MemberFields } from "@/components/auth/MemberFields";
+import { OrganizerFields } from "@/components/auth/OrganizerFields";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function RegisterPage() {
+  const { role, setRole, form, update, error, isLoading, submit } = useRegisterForm();
+
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-2 text-4xl">🏅</div>
+        <CardTitle className="text-2xl">Create account</CardTitle>
+        <CardDescription>Join the pole dance community</CardDescription>
+      </CardHeader>
+
+      <form onSubmit={submit}>
+        <CardContent className="space-y-4">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+
+          <div className="grid grid-cols-2 gap-2">
+            {(["member", "organizer"] as const).map((r) => (
+              <button
+                key={r}
+                type="button"
+                onClick={() => setRole(r)}
+                className={`rounded-lg border-2 p-3 text-sm font-medium transition-colors ${
+                  role === r ? "border-violet-600 bg-violet-50 text-violet-700" : "border-gray-200 text-gray-600 hover:border-gray-300"
+                }`}
+              >
+                {r === "member" ? "🏅 Athlete" : "🏆 Organizer"}
+              </button>
+            ))}
+          </div>
+
+          <MemberFields
+            full_name={form.full_name}
+            email={form.email}
+            password={form.password}
+            phone={form.phone}
+            onChange={update}
+          />
+
+          {role === "organizer" && (
+            <OrganizerFields
+              organization_name={form.organization_name}
+              instagram_handle={form.instagram_handle}
+              onChange={update}
+            />
+          )}
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-3">
+          <Button type="submit" className="w-full bg-violet-600 hover:bg-violet-700" disabled={isLoading}>
+            {isLoading ? "Creating…" : role === "member" ? "Create account" : "Submit for approval"}
+          </Button>
+          <p className="text-center text-sm text-gray-500">
+            Have an account?{" "}
+            <Link href="/login" className="font-medium text-violet-600 hover:underline">
+              Sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

web/src/app/globals.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

web/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+
+const geist = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
+
+export const metadata: Metadata = {
+  title: "Pole Dance Championships",
+  description: "Register and track pole dance championship events",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={`${geist.variable} font-sans antialiased bg-gray-50`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

web/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/championships");
+}

web/src/app/providers.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, useEffect } from "react";
+import { useAuth } from "@/store/useAuth";
+
+function AuthInitializer({ children }: { children: React.ReactNode }) {
+  const initialize = useAuth((s) => s.initialize);
+  const isInitialized = useAuth((s) => s.isInitialized);
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  if (!isInitialized) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-violet-600 border-t-transparent" />
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () => new QueryClient({ defaultOptions: { queries: { retry: 1, staleTime: 30_000 } } })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthInitializer>{children}</AuthInitializer>
+    </QueryClientProvider>
+  );
+}