From 463b0eaacf52dcbf788b8c44f0af82066cec29d3 Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Wed, 5 Mar 2025 14:53:12 +0545
Subject: [PATCH 01/10] feat: Integrate Tailwind CSS and enhance UI styling

---
 app/dashboard/page.tsx                        | 155 +++++++--
 app/globals.css                               |   4 +-
 app/layout.tsx                                |  11 +-
 app/page.tsx                                  |  95 ++++--
 client/components/ProtectedApiInteraction.tsx | 133 +++++++-
 package.json                                  |   3 +
 pnpm-lock.yaml                                | 303 +++++++++++++++++-
 postcss.config.mjs                            |   6 +
 8 files changed, 620 insertions(+), 90 deletions(-)
 create mode 100644 postcss.config.mjs

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 63f33a7..354d4e9 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { trpc } from "@/client/utils/trpc/trpc-client"
-import { ProtectedApiInteraction } from "../../client/components/ProtectedApiInteraction"
-import { useAuth } from "@/client/hooks/useAuth"
-import { supabase } from "@/client/utils/supabase/supabase-client-client"
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { ProtectedApiInteraction } from "../../client/components/ProtectedApiInteraction";
+import { useAuth } from "@/client/hooks/useAuth";
+import { supabase } from "@/client/utils/supabase/supabase-client-client";
 
 export default function DashboardPage() {
   const router = useRouter();
@@ -15,13 +15,13 @@ export default function DashboardPage() {
 
   useEffect(() => {
     if (!isAuthLoading && !user) {
-      router.push("/")
+      router.push("/");
     }
-  }, [isAuthLoading, user, router])
+  }, [isAuthLoading, user, router]);
 
   const handleRefresh = async () => {
     await supabase.auth.refreshSession();
-  }
+  };
 
   const handleLogout = async () => {
     try {
@@ -32,34 +32,123 @@ export default function DashboardPage() {
     } catch (error) {
       setIsLoading(false);
 
-      console.error("Logout failed:", error)
+      console.error("Logout failed:", error);
     }
+  };
+
+  if (isAuthLoading || !user) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="p-8 bg-white rounded-lg shadow-md">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            <p className="text-gray-600">Loading dashboard...</p>
+          </div>
+        </div>
+      </div>
+    );
   }
 
-  if (isAuthLoading || !user) return <div>Loading user data...</div>;
-  if (isLoading) return <div>Signing out...</div>;
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="p-8 bg-white rounded-lg shadow-md">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            <p className="text-gray-600">Signing out...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-3xl font-bold">Dashboard</h1>
-        <button
-          onClick={handleRefresh}
-          className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-        >
-          Refresh Session
-        </button>
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+            <div className="flex items-center space-x-4">
+              <button
+                onClick={handleRefresh}
+                className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+              >
+                <svg
+                  className="w-4 h-4 mr-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                  />
+                </svg>
+                Refresh Session
+              </button>
+              <button
+                onClick={handleLogout}
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+              >
+                <svg
+                  className="w-4 h-4 mr-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  />
+                </svg>
+                Sign Out
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
 
-        <button
-          onClick={handleLogout}
-          className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-        >
-          Logout
-        </button>
-      </div>
-      <p className="mb-4">Welcome, user with ID: {user.id}</p>
-      <ProtectedApiInteraction />
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg p-6 mb-8">
+          <div className="flex items-center space-x-4">
+            <div className="bg-blue-100 rounded-full p-3">
+              <svg
+                className="w-6 h-6 text-blue-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                />
+              </svg>
+            </div>
+            <div>
+              <h2 className="text-lg font-medium text-gray-900">
+                User Profile
+              </h2>
+              <p className="text-sm text-gray-500">ID: {user.id}</p>
+              {user.email && (
+                <p className="text-sm text-gray-500">Email: {user.email}</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-lg font-medium text-gray-900 mb-6">
+            API Interactions
+          </h2>
+          <ProtectedApiInteraction />
+        </div>
+      </main>
     </div>
-  )
+  );
 }
-
diff --git a/app/globals.css b/app/globals.css
index ce8bf91..f1d8c73 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1 @@
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
\ No newline at end of file
+@import "tailwindcss";
diff --git a/app/layout.tsx b/app/layout.tsx
index 7e8db0b..d4d2b1b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,15 @@
-"use client"
+"use client";
 
-import { trpc } from "@/client/utils/trpc/trpc-client"
+import "./globals.css";
+
+import { trpc } from "@/client/utils/trpc/trpc-client";
 
 function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
 
-export default trpc.withTRPC(RootLayout)
-
+export default trpc.withTRPC(RootLayout);
diff --git a/app/page.tsx b/app/page.tsx
index 3fce276..e2330f3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { trpc } from "@/client/utils/trpc/trpc-client"
-import { useAuth } from "@/client/hooks/useAuth"
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { useAuth } from "@/client/hooks/useAuth";
 
 export default function Login() {
   const router = useRouter();
@@ -15,44 +15,87 @@ export default function Login() {
     try {
       setIsLoading(true);
 
-      const { url } = await loginMutation.mutateAsync({ authProviderType: "GOOGLE" });
+      const { url } = await loginMutation.mutateAsync({
+        authProviderType: "GOOGLE",
+      });
 
       if (url) {
         // Redirect to Google's OAuth page
-        window.location.href = url
+        window.location.href = url;
       } else {
-        console.error("No URL returned from authenticate")
+        console.error("No URL returned from authenticate");
       }
     } catch (error) {
-      console.error("Google sign-in failed:", error)
+      console.error("Google sign-in failed:", error);
       setIsLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
     if (user) {
-      router.push("/dashboard")
+      router.push("/dashboard");
     }
-  }, [user, router])
-
+  }, [user, router]);
 
-  if (isAuthLoading || isLoading || user) return <div>Authenticating...</div>
+  if (isAuthLoading || isLoading || user) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+        <div className="p-8 bg-white rounded-lg shadow-md">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            <p className="text-gray-600">Authenticating...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <h1 className="text-4xl font-bold mb-8">Welcome to Our App</h1>
+      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+            Welcome Back
+          </h1>
+          <p className="text-gray-600 mb-8">Sign in to access your account</p>
+        </div>
 
-      <button
-        onClick={handleGoogleSignIn}
-        disabled={loginMutation.isLoading}
-        className="bg-white text-gray-700 font-semibold py-2 px-4 border border-gray-300 rounded shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-      >
-        {loginMutation.isLoading ? "Loading..." : "Sign in with Google"}
-      </button>
-
-      { loginMutation.error ? (<p>{ loginMutation.error.message }</p>) : null }
+        <button
+          onClick={handleGoogleSignIn}
+          disabled={loginMutation.isLoading}
+          className="w-full flex items-center justify-center space-x-2 bg-white text-gray-700 font-semibold py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+        >
+          <svg className="w-5 h-5" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            />
+            <path
+              fill="currentColor"
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            />
+          </svg>
+          <span>
+            {loginMutation.isLoading ? "Connecting..." : "Continue with Google"}
+          </span>
+        </button>
 
+        {loginMutation.error && (
+          <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-sm text-red-600">
+              {loginMutation.error.message}
+            </p>
+          </div>
+        )}
+      </div>
     </div>
-  )
+  );
 }
-
diff --git a/client/components/ProtectedApiInteraction.tsx b/client/components/ProtectedApiInteraction.tsx
index 70c9bd0..eb70cf6 100644
--- a/client/components/ProtectedApiInteraction.tsx
+++ b/client/components/ProtectedApiInteraction.tsx
@@ -1,34 +1,133 @@
-"use client"
+"use client";
 
-import { getAuthToken, trpc } from "@/client/utils/trpc/trpc-client"
+import { getAuthToken, trpc } from "@/client/utils/trpc/trpc-client";
 import { jwtDecode } from "jwt-decode";
+import { useState } from "react";
 
 export function ProtectedApiInteraction() {
-  const { data, isLoading, error } = trpc.debugSession.useQuery()
+  const { data, isLoading, error, refetch } = trpc.debugSession.useQuery();
+  const [activeTab, setActiveTab] = useState<"jwt" | "user" | "session">("jwt");
 
   if (isLoading) {
-    return <div>Loading...</div>
+    return (
+      <div className="flex justify-center items-center p-8">
+        <div className="w-6 h-6 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin" />
+      </div>
+    );
   }
 
   if (error) {
-    return <div>{ error.message }</div>
+    return (
+      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+        <div className="flex items-center">
+          <svg
+            className="w-5 h-5 text-red-400 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span className="text-red-700">{error.message}</span>
+        </div>
+      </div>
+    );
   }
 
+  const TabButton = ({
+    tab,
+    label,
+  }: {
+    tab: typeof activeTab;
+    label: string;
+  }) => (
+    <button
+      onClick={() => setActiveTab(tab)}
+      className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200
+        ${
+          activeTab === tab
+            ? "bg-blue-100 text-blue-700"
+            : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+        }`}
+    >
+      {label}
+    </button>
+  );
+
+  const renderContent = () => {
+    let content;
+    switch (activeTab) {
+      case "jwt":
+        content = jwtDecode(getAuthToken() || "");
+        break;
+      case "user":
+        content = data?.user;
+        break;
+      case "session":
+        content = data?.session;
+        break;
+    }
+
+    return (
+      <div className="bg-gray-50 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+        <pre className="whitespace-pre-wrap break-words">
+          {JSON.stringify(content, null, 2)}
+        </pre>
+      </div>
+    );
+  };
+
   return (
-    <div className="max-w-md mx-auto mt-10">
-      {data && (
-        <div className="bg-gray-100 p-4 rounded-md">
-          <h3>JWT Token</h3>
-          <pre>{JSON.stringify(jwtDecode(getAuthToken() || ""), null, "  ")}</pre>
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div className="flex space-x-2 bg-gray-100 p-1 rounded-md">
+          <TabButton tab="jwt" label="JWT Token" />
+          <TabButton tab="user" label="User Data" />
+          <TabButton tab="session" label="Session Info" />
+        </div>
 
-          <h3>auth.users</h3>
-          <pre>{JSON.stringify(data.user, null, "  ")}</pre>
+        <button
+          onClick={() => refetch()}
+          className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+        >
+          <svg
+            className="w-4 h-4 mr-1.5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+          Refresh
+        </button>
+      </div>
 
-          <h3>Session</h3>
-          <pre>{JSON.stringify(data.session, null, "  ")}</pre>
+      <div className="border border-gray-200 rounded-lg bg-white p-4">
+        <div className="mb-3">
+          <h3 className="text-lg font-medium text-gray-900">
+            {activeTab === "jwt" && "JWT Token Details"}
+            {activeTab === "user" && "User Information"}
+            {activeTab === "session" && "Session Details"}
+          </h3>
+          <p className="text-sm text-gray-500">
+            {activeTab === "jwt" && "Decoded JWT token content"}
+            {activeTab === "user" && "Current user data from auth.users"}
+            {activeTab === "session" && "Active session information"}
+          </p>
         </div>
-      )}
+
+        {renderContent()}
+      </div>
     </div>
-  )
+  );
 }
-
diff --git a/package.json b/package.json
index 4c65107..5da3ac9 100644
--- a/package.json
+++ b/package.json
@@ -37,13 +37,16 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.16",
+    "postcss": "^8.5.3",
     "prisma": "6.2.1",
+    "tailwindcss": "^4.0.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee97c51..a0b0a20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
         specifier: ^3.24.1
         version: 3.24.2
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@types/jsonwebtoken':
         specifier: ^9.0.7
         version: 9.0.9
@@ -78,21 +81,31 @@ importers:
       eslint-config-next:
         specifier: 14.2.16
         version: 14.2.16(eslint@8.57.1)(typescript@5.8.2)
+      postcss:
+        specifier: ^8.5.3
+        version: 8.5.3
       prisma:
         specifier: 6.2.1
         version: 6.2.1
+      tailwindcss:
+        specifier: ^4.0.9
+        version: 4.0.9
       ts-node:
         specifier: ^10.9.2
         version: 10.9.2(@types/node@20.17.23)(typescript@5.8.2)
       tsup:
         specifier: ^8.3.6
-        version: 8.4.0(postcss@8.4.31)(typescript@5.8.2)
+        version: 8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)
       typescript:
         specifier: ^5.7.3
         version: 5.8.2
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -541,6 +554,82 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tailwindcss/node@4.0.9':
+    resolution: {integrity: sha512-tOJvdI7XfJbARYhxX+0RArAhmuDcczTC46DGCEziqxzzbIaPnfYaIyRT31n4u8lROrsO7Q6u/K9bmQHL2uL1bQ==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.9':
+    resolution: {integrity: sha512-YBgy6+2flE/8dbtrdotVInhMVIxnHJPbAwa7U1gX4l2ThUIaPUp18LjB9wEH8wAGMBZUb//SzLtdXXNBHPUl6Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.9':
+    resolution: {integrity: sha512-pWdl4J2dIHXALgy2jVkwKBmtEb73kqIfMpYmcgESr7oPQ+lbcQ4+tlPeVXaSAmang+vglAfFpXQCOvs/aGSqlw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.9':
+    resolution: {integrity: sha512-4Dq3lKp0/C7vrRSkNPtBGVebEyWt9QPPlQctxJ0H3MDyiQYvzVYf8jKow7h5QkWNe8hbatEqljMj/Y0M+ERYJg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.9':
+    resolution: {integrity: sha512-k7U1RwRODta8x0uealtVt3RoWAWqA+D5FAOsvVGpYoI6ObgmnzqWW6pnVwz70tL8UZ/QXjeMyiICXyjzB6OGtQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.9':
+    resolution: {integrity: sha512-NDDjVweHz2zo4j+oS8y3KwKL5wGCZoXGA9ruJM982uVJLdsF8/1AeKvUwKRlMBpxHt1EdWJSAh8a0Mfhl28GlQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.9':
+    resolution: {integrity: sha512-jk90UZ0jzJl3Dy1BhuFfRZ2KP9wVKMXPjmCtY4U6fF2LvrjP5gWFJj5VHzfzHonJexjrGe1lMzgtjriuZkxagg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.9':
+    resolution: {integrity: sha512-3eMjyTC6HBxh9nRgOHzrc96PYh1/jWOwHZ3Kk0JN0Kl25BJ80Lj9HEvvwVDNTgPg154LdICwuFLuhfgH9DULmg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.9':
+    resolution: {integrity: sha512-v0D8WqI/c3WpWH1kq/HP0J899ATLdGZmENa2/emmNjubT0sWtEke9W9+wXeEoACuGAhF9i3PO5MeyditpDCiWQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.9':
+    resolution: {integrity: sha512-Kvp0TCkfeXyeehqLJr7otsc4hd/BUPfcIGrQiwsTVCfaMfjQZCG7DjI+9/QqPZha8YapLA9UoIcUILRYO7NE1Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.9':
+    resolution: {integrity: sha512-m3+60T/7YvWekajNq/eexjhV8z10rswcz4BC9bioJ7YaN+7K8W2AmLmG0B79H14m6UHE571qB0XsPus4n0QVgQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.9':
+    resolution: {integrity: sha512-dpc05mSlqkwVNOUjGu/ZXd5U1XNch1kHFJ4/cHkZFvaW1RzbHmRt24gvM8/HC6IirMxNarzVw4IXVtvrOoZtxA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.9':
+    resolution: {integrity: sha512-eLizHmXFqHswJONwfqi/WZjtmWZpIalpvMlNhTM99/bkHtUs6IqgI1XQ0/W5eO2HiRQcIlXUogI2ycvKhVLNcA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.9':
+    resolution: {integrity: sha512-BT/E+pdMqulavEAVM5NCpxmGEwHiLDPpkmg/c/X25ZBW+izTe+aZ+v1gf/HXTrihRoCxrUp5U4YyHsBTzspQKQ==}
+
   '@tanstack/query-core@4.36.1':
     resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==}
 
@@ -936,6 +1025,11 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -1426,6 +1520,10 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
   joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
@@ -1482,6 +1580,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1713,6 +1875,10 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -1960,6 +2126,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@4.0.9:
+    resolution: {integrity: sha512-12laZu+fv1ONDRoNR9ipTOpUD7RN9essRVkX36sjxuRUInpN7hIiHN4lBd/SIFjbISvnXzp8h/hXzmU8SQQYhw==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -2163,6 +2332,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
@@ -2499,6 +2670,68 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
+  '@tailwindcss/node@4.0.9':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.9
+
+  '@tailwindcss/oxide-android-arm64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.9':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.9':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.9
+      '@tailwindcss/oxide-darwin-arm64': 4.0.9
+      '@tailwindcss/oxide-darwin-x64': 4.0.9
+      '@tailwindcss/oxide-freebsd-x64': 4.0.9
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.9
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.9
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.9
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.9
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.9
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.9
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.9
+
+  '@tailwindcss/postcss@4.0.9':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.9
+      '@tailwindcss/oxide': 4.0.9
+      lightningcss: 1.29.1
+      postcss: 8.5.3
+      tailwindcss: 4.0.9
+
   '@tanstack/query-core@4.36.1': {}
 
   '@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -2920,6 +3153,8 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  detect-libc@1.0.3: {}
+
   diff@4.0.2: {}
 
   doctrine@2.1.0:
@@ -3610,6 +3845,8 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jiti@2.4.2: {}
+
   joycon@3.1.1: {}
 
   js-tokens@4.0.0: {}
@@ -3676,6 +3913,51 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -3869,11 +4151,12 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-load-config@6.0.1(postcss@8.4.31):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
-      postcss: 8.4.31
+      jiti: 2.4.2
+      postcss: 8.5.3
 
   postcss@8.4.31:
     dependencies:
@@ -3881,6 +4164,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.3:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prisma@6.2.1:
@@ -4188,6 +4477,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@4.0.9: {}
+
   tapable@2.2.1: {}
 
   text-table@0.2.0: {}
@@ -4252,7 +4543,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.4.0(postcss@8.4.31)(typescript@5.8.2):
+  tsup@8.4.0(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.0)
       cac: 6.7.14
@@ -4262,7 +4553,7 @@ snapshots:
       esbuild: 0.25.0
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(postcss@8.4.31)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)
       resolve-from: 5.0.0
       rollup: 4.34.9
       source-map: 0.8.0-beta.0
@@ -4271,7 +4562,7 @@ snapshots:
       tinyglobby: 0.2.12
       tree-kill: 1.2.2
     optionalDependencies:
-      postcss: 8.4.31
+      postcss: 8.5.3
       typescript: 5.8.2
     transitivePeerDependencies:
       - jiti
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..7059fe9
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;

From 410233cc4a5026969e2efddc84ac30eb4797280c Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Wed, 5 Mar 2025 17:58:59 +0545
Subject: [PATCH 02/10] feat: dashboard initial working version

---
 app/dashboard/page.tsx          | 682 ++++++++++++++++++++++++++------
 app/dashboard/settings/page.tsx |  52 +++
 app/layout.tsx                  |  71 +++-
 client/components/Header.tsx    | 107 +++++
 package.json                    |   2 +
 pnpm-lock.yaml                  |  24 ++
 server/routers/_app.ts          |   2 +
 server/routers/dashboard.ts     | 237 +++++++++++
 8 files changed, 1061 insertions(+), 116 deletions(-)
 create mode 100644 app/dashboard/settings/page.tsx
 create mode 100644 client/components/Header.tsx
 create mode 100644 server/routers/dashboard.ts

diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 354d4e9..fbf104d 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,154 +1,606 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { trpc } from "@/client/utils/trpc/trpc-client";
-import { ProtectedApiInteraction } from "../../client/components/ProtectedApiInteraction";
-import { useAuth } from "@/client/hooks/useAuth";
-import { supabase } from "@/client/utils/supabase/supabase-client-client";
+import { toast } from "sonner";
 
-export default function DashboardPage() {
-  const router = useRouter();
-  const { user, isLoading: isAuthLoading } = useAuth();
-  const logoutMutation = trpc.logout.useMutation();
-  const [isLoading, setIsLoading] = useState(false);
+type ActiveView = "teams" | "applications";
 
-  useEffect(() => {
-    if (!isAuthLoading && !user) {
-      router.push("/");
-    }
-  }, [isAuthLoading, user, router]);
+export default function DashboardPage() {
+  const [activeView, setActiveView] = useState<ActiveView>("teams");
+  const { data: stats } = trpc.getStats.useQuery();
 
-  const handleRefresh = async () => {
-    await supabase.auth.refreshSession();
-  };
+  const NavIcon = ({ children }: { children: React.ReactNode }) => (
+    <div className="w-5 h-5 flex-shrink-0">{children}</div>
+  );
 
-  const handleLogout = async () => {
-    try {
-      setIsLoading(true);
+  const SideNavItem = ({
+    view,
+    label,
+    icon,
+  }: {
+    view: ActiveView;
+    label: string;
+    icon: React.ReactNode;
+  }) => (
+    <button
+      onClick={() => setActiveView(view)}
+      className={`w-full flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200
+        ${
+          activeView === view
+            ? "bg-blue-50 text-blue-700 border border-blue-100"
+            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+        }`}
+    >
+      <NavIcon>{icon}</NavIcon>
+      <span>{label}</span>
+    </button>
+  );
 
-      await logoutMutation.mutateAsync();
-      await supabase.auth.signOut();
-    } catch (error) {
-      setIsLoading(false);
+  const renderViewHeader = () => {
+    const headers = {
+      teams: "Team Management",
+      applications: "Application Management",
+    };
 
-      console.error("Logout failed:", error);
-    }
+    return (
+      <div className="border-b border-gray-200 px-6 py-4">
+        <h1 className="text-xl font-semibold text-gray-900">
+          {headers[activeView]}
+        </h1>
+      </div>
+    );
   };
 
-  if (isAuthLoading || !user) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
-        <div className="p-8 bg-white rounded-lg shadow-md">
-          <div className="flex flex-col items-center space-y-4">
-            <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
-            <p className="text-gray-600">Loading dashboard...</p>
-          </div>
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+          {/* Sidebar Navigation */}
+          <aside className="lg:col-span-3">
+            <nav className="space-y-2 bg-white p-4 rounded-lg shadow-sm">
+              <SideNavItem
+                view="teams"
+                label="Teams"
+                icon={
+                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                    />
+                  </svg>
+                }
+              />
+              <SideNavItem
+                view="applications"
+                label="Applications"
+                icon={
+                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                    />
+                  </svg>
+                }
+              />
+            </nav>
+
+            {/* Quick Stats */}
+            <div className="mt-6 bg-white p-4 rounded-lg shadow-sm space-y-4">
+              <h3 className="text-sm font-medium text-gray-500">Quick Stats</h3>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-3 bg-gray-50 rounded-md">
+                  <p className="text-xs text-gray-500">Teams</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {stats?.teams || 0}
+                  </p>
+                </div>
+                <div className="p-3 bg-gray-50 rounded-md">
+                  <p className="text-xs text-gray-500">Applications</p>
+                  <p className="text-lg font-semibold text-gray-900">
+                    {stats?.applications || 0}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </aside>
+
+          {/* Main Content Area */}
+          <main className="mt-8 lg:mt-0 lg:col-span-9">
+            <div className="bg-white shadow rounded-lg overflow-hidden">
+              {renderViewHeader()}
+              <div className="divide-y divide-gray-200">
+                {activeView === "teams" && <TeamsView />}
+                {activeView === "applications" && <ApplicationsView />}
+              </div>
+            </div>
+          </main>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+}
+
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+const selectStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+const textareaStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+
+function TeamsView() {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const createTeamMutation = trpc.createTeam.useMutation({
+    onSuccess: () => {
+      toast.success("Team created successfully");
+      utils.listTeams.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to create team");
+    },
+  });
 
-  if (isLoading) {
+  const { data: teams, isLoading: isLoadingTeams } = trpc.listTeams.useQuery();
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newTeam, setNewTeam] = useState({
+    name: "",
+    slug: "",
+  });
+
+  const handleCreateTeam = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      // Show loading toast
+      const loadingToast = toast.loading("Creating team...");
+
+      try {
+        const slug = newTeam.name
+          .toLowerCase()
+          .replace(/[^a-z0-9-]/g, "-")
+          .replace(/-+/g, "-")
+          .replace(/^-|-$/g, "");
+
+        await createTeamMutation.mutateAsync({
+          name: newTeam.name,
+          slug: slug,
+        });
+
+        // Dismiss loading toast and show success
+        toast.dismiss(loadingToast);
+        toast.success("Team created successfully!");
+
+        setNewTeam({ name: "", slug: "" });
+        setShowCreateForm(false);
+      } catch (error) {
+        // Dismiss loading toast and show error
+        toast.dismiss(loadingToast);
+        toast.error(error.message || "Failed to create team");
+      }
+    },
+    [newTeam, createTeamMutation]
+  );
+
+  if (isLoadingTeams) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
-        <div className="p-8 bg-white rounded-lg shadow-md">
-          <div className="flex flex-col items-center space-y-4">
-            <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
-            <p className="text-gray-600">Signing out...</p>
-          </div>
-        </div>
+      <div className="p-6 flex justify-center">
+        <div className="animate-pulse text-gray-500">Loading teams...</div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <nav className="bg-white shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
-            <div className="flex items-center space-x-4">
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-xl font-semibold text-gray-900">Teams</h2>
+        <button
+          onClick={() => setShowCreateForm(true)}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+        >
+          Create Team
+        </button>
+      </div>
+
+      {showCreateForm && (
+        <form
+          onSubmit={handleCreateTeam}
+          className="mb-6 p-6 bg-gray-50 rounded-lg"
+        >
+          <div className="space-y-6">
+            <div>
+              <label
+                htmlFor="teamName"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Team Name
+              </label>
+              <input
+                type="text"
+                id="teamName"
+                value={newTeam.name}
+                onChange={(e) =>
+                  setNewTeam({ ...newTeam, name: e.target.value })
+                }
+                className={inputStyles}
+                required
+                disabled={createTeamMutation.isLoading}
+                placeholder="Enter team name"
+              />
+              <p className="mt-2 text-sm text-gray-500">
+                Slug:{" "}
+                {newTeam.name
+                  ? newTeam.name.toLowerCase().replace(/[^a-z0-9-]/g, "-")
+                  : ""}
+              </p>
+            </div>
+            <div className="flex justify-end space-x-3 pt-2">
               <button
-                onClick={handleRefresh}
-                className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+                type="button"
+                onClick={() => setShowCreateForm(false)}
+                className="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                disabled={createTeamMutation.isLoading}
               >
-                <svg
-                  className="w-4 h-4 mr-2"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                  />
-                </svg>
-                Refresh Session
+                Cancel
               </button>
               <button
-                onClick={handleLogout}
-                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+                type="submit"
+                className="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
+                disabled={createTeamMutation.isLoading}
               >
-                <svg
-                  className="w-4 h-4 mr-2"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                  />
-                </svg>
-                Sign Out
+                {createTeamMutation.isLoading ? (
+                  <>
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                    <span>Creating...</span>
+                  </>
+                ) : (
+                  "Create Team"
+                )}
               </button>
             </div>
           </div>
+        </form>
+      )}
+
+      <div className="space-y-4">
+        {teams?.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            No teams created yet. Create your first team to get started.
+          </div>
+        ) : (
+          teams?.map((team) => (
+            <div
+              key={team.id}
+              className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
+            >
+              <div>
+                <h3 className="text-lg font-medium text-gray-900">
+                  {team.name}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  Organization: {team.organization.name}
+                </p>
+              </div>
+              <button
+                onClick={() => router.push(`/dashboard/teams/${team.id}`)}
+                className="text-blue-600 hover:text-blue-800"
+              >
+                Manage →
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ApplicationsView() {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const createAppMutation = trpc.createApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application created successfully");
+      utils.listApplications.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to create application");
+    },
+  });
+
+  const { data: applications, isLoading: isLoadingApps } =
+    trpc.listApplications.useQuery();
+  const { data: teams, isLoading: isLoadingTeams } = trpc.listTeams.useQuery();
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newApp, setNewApp] = useState({
+    name: "",
+    description: "",
+    teamId: "",
+    domains: [] as string[],
+  });
+
+  const [newDomain, setNewDomain] = useState("");
+
+  const handleAddDomain = useCallback(() => {
+    if (newDomain && !newApp.domains.includes(newDomain)) {
+      setNewApp((prev) => ({
+        ...prev,
+        domains: [...prev.domains, newDomain],
+      }));
+      setNewDomain("");
+    }
+  }, [newDomain, newApp.domains]);
+
+  const handleRemoveDomain = useCallback((domain: string) => {
+    setNewApp((prev) => ({
+      ...prev,
+      domains: prev.domains.filter((d) => d !== domain),
+    }));
+  }, []);
+
+  const handleCreateApp = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      // Show loading toast
+      const loadingToast = toast.loading("Creating application...");
+
+      try {
+        await createAppMutation.mutateAsync({
+          name: newApp.name,
+          description: newApp.description || undefined,
+          teamId: newApp.teamId,
+          domains: newApp.domains,
+        });
+
+        // Dismiss loading toast and show success
+        toast.dismiss(loadingToast);
+        toast.success("Application created successfully!");
+
+        setNewApp({ name: "", description: "", teamId: "", domains: [] });
+        setShowCreateForm(false);
+      } catch (error) {
+        // Dismiss loading toast and show error
+        toast.dismiss(loadingToast);
+        toast.error(error.message || "Failed to create application");
+      }
+    },
+    [newApp, createAppMutation]
+  );
+
+  if (isLoadingApps || isLoadingTeams) {
+    return (
+      <div className="p-6 flex justify-center">
+        <div className="animate-pulse text-gray-500">
+          Loading applications...
         </div>
-      </nav>
-
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="bg-white shadow rounded-lg p-6 mb-8">
-          <div className="flex items-center space-x-4">
-            <div className="bg-blue-100 rounded-full p-3">
-              <svg
-                className="w-6 h-6 text-blue-600"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-xl font-semibold text-gray-900">Applications</h2>
+        <button
+          onClick={() => setShowCreateForm(true)}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+        >
+          Create Application
+        </button>
+      </div>
+
+      {showCreateForm && (
+        <form
+          onSubmit={handleCreateApp}
+          className="mb-6 p-6 bg-gray-50 rounded-lg"
+        >
+          <div className="space-y-6">
+            <div>
+              <label
+                htmlFor="appName"
+                className="block text-sm font-medium text-gray-700 mb-1"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                />
-              </svg>
+                Application Name
+              </label>
+              <input
+                type="text"
+                id="appName"
+                value={newApp.name}
+                onChange={(e) => setNewApp({ ...newApp, name: e.target.value })}
+                className={inputStyles}
+                required
+                placeholder="Enter application name"
+              />
             </div>
+
             <div>
-              <h2 className="text-lg font-medium text-gray-900">
-                User Profile
-              </h2>
-              <p className="text-sm text-gray-500">ID: {user.id}</p>
-              {user.email && (
-                <p className="text-sm text-gray-500">Email: {user.email}</p>
-              )}
+              <label
+                htmlFor="description"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                value={newApp.description}
+                onChange={(e) =>
+                  setNewApp({ ...newApp, description: e.target.value })
+                }
+                rows={3}
+                className={textareaStyles}
+                placeholder="Enter application description"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="teamId"
+                className="block text-sm font-medium text-gray-700 mb-1"
+              >
+                Team
+              </label>
+              <select
+                id="teamId"
+                value={newApp.teamId}
+                onChange={(e) =>
+                  setNewApp({ ...newApp, teamId: e.target.value })
+                }
+                className={selectStyles}
+                required
+              >
+                <option value="">Select a team</option>
+                {teams?.map((team) => (
+                  <option key={team.id} value={team.id}>
+                    {team.name} ({team.organization.name})
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Domains
+              </label>
+              <div className="mt-1 flex space-x-2">
+                <input
+                  type="text"
+                  value={newDomain}
+                  onChange={(e) => setNewDomain(e.target.value)}
+                  placeholder="example.com"
+                  className={inputStyles}
+                />
+                <button
+                  type="button"
+                  onClick={handleAddDomain}
+                  className="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"
+                >
+                  Add
+                </button>
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {newApp.domains.map((domain) => (
+                  <span
+                    key={domain}
+                    className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                  >
+                    {domain}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveDomain(domain)}
+                      className="ml-2 inline-flex text-blue-600 hover:text-blue-800"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end space-x-3 pt-2">
+              <button
+                type="button"
+                onClick={() => setShowCreateForm(false)}
+                className="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                disabled={createAppMutation.isLoading}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
+                disabled={createAppMutation.isLoading}
+              >
+                {createAppMutation.isLoading ? (
+                  <>
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                    <span>Creating...</span>
+                  </>
+                ) : (
+                  "Create Application"
+                )}
+              </button>
             </div>
           </div>
-        </div>
+        </form>
+      )}
 
-        <div className="bg-white shadow rounded-lg p-6">
-          <h2 className="text-lg font-medium text-gray-900 mb-6">
-            API Interactions
-          </h2>
-          <ProtectedApiInteraction />
-        </div>
-      </main>
+      <div className="space-y-4">
+        {applications?.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            No applications created yet. Create your first application to get
+            started.
+          </div>
+        ) : (
+          applications?.map((app) => (
+            <div
+              key={app.id}
+              className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
+            >
+              <div>
+                <h3 className="text-lg font-medium text-gray-900">
+                  {app.name}
+                </h3>
+                <p className="text-sm text-gray-500">Team: {app.team.name}</p>
+                {app.description && (
+                  <p className="text-sm text-gray-500 mt-1">
+                    {app.description}
+                  </p>
+                )}
+              </div>
+              <button
+                onClick={() => router.push(`/dashboard/applications/${app.id}`)}
+                className="text-blue-600 hover:text-blue-800"
+              >
+                Manage →
+              </button>
+            </div>
+          ))
+        )}
+      </div>
     </div>
   );
 }
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
new file mode 100644
index 0000000..9fa2f73
--- /dev/null
+++ b/app/dashboard/settings/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { ProtectedApiInteraction } from "@/client/components/ProtectedApiInteraction";
+import { useAuth } from "@/client/hooks/useAuth";
+
+export default function SettingsPage() {
+  const { user } = useAuth();
+
+  if (!user) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg p-6 mb-8">
+          <div className="flex items-center space-x-4">
+            <div className="bg-blue-100 rounded-full p-3">
+              <svg
+                className="w-6 h-6 text-blue-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                />
+              </svg>
+            </div>
+            <div>
+              <h2 className="text-lg font-medium text-gray-900">
+                User Profile
+              </h2>
+              <p className="text-sm text-gray-500">ID: {user.id}</p>
+              {user.email && (
+                <p className="text-sm text-gray-500">Email: {user.email}</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-lg font-medium text-gray-900 mb-6">
+            API Interactions
+          </h2>
+          <ProtectedApiInteraction />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index d4d2b1b..fe80907 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,15 +1,84 @@
 "use client";
 
+import { supabase } from "@/client/utils/supabase/supabase-client-client";
 import "./globals.css";
 
 import { trpc } from "@/client/utils/trpc/trpc-client";
+import { useAuth } from "@/client/hooks/useAuth";
+import { usePathname, useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import Header from "@/client/components/Header";
+import { Toaster } from "sonner";
 
 function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Toaster position="top-right" richColors />
+        <AuthProvider>{children}</AuthProvider>
+      </body>
     </html>
   );
 }
 
+function AuthProvider({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, isLoading: isAuthLoading } = useAuth();
+  const logoutMutation = trpc.logout.useMutation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!isAuthLoading && !user && pathname !== "/") {
+      router.push("/");
+    }
+  }, [isAuthLoading, user, router, pathname]);
+
+  const handleRefresh = async () => {
+    await supabase.auth.refreshSession();
+  };
+
+  const handleLogout = async () => {
+    try {
+      setIsLoading(true);
+      await logoutMutation.mutateAsync();
+      await supabase.auth.signOut();
+      router.push("/");
+    } catch (error) {
+      setIsLoading(false);
+      console.error("Logout failed:", error);
+    }
+  };
+
+  if (isAuthLoading) {
+    return <LoadingScreen message="Loading..." />;
+  }
+
+  if (isLoading) {
+    return <LoadingScreen message="Signing out..." />;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {user && (
+        <Header user={user} onRefresh={handleRefresh} onLogout={handleLogout} />
+      )}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
+    </div>
+  );
+}
+
+function LoadingScreen({ message }: { message: string }) {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <div className="p-8 bg-white rounded-lg shadow-md">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+          <p className="text-gray-600">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default trpc.withTRPC(RootLayout);
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
new file mode 100644
index 0000000..87f417c
--- /dev/null
+++ b/client/components/Header.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { User } from "@supabase/supabase-js";
+
+interface HeaderProps {
+  user: User;
+  onRefresh: () => void;
+  onLogout: () => void;
+}
+
+export default function Header({ user, onRefresh, onLogout }: HeaderProps) {
+  const pathname = usePathname();
+
+  const NavLink = ({
+    href,
+    children,
+  }: {
+    href: string;
+    children: React.ReactNode;
+  }) => {
+    const isActive = pathname === href;
+    return (
+      <Link
+        href={href}
+        className={`px-3 py-2 rounded-md text-sm font-medium ${
+          isActive
+            ? "bg-gray-900 text-white"
+            : "text-gray-300 hover:bg-gray-700 hover:text-white"
+        }`}
+      >
+        {children}
+      </Link>
+    );
+  };
+
+  return (
+    <nav className="bg-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center">
+            <div className="flex-shrink-0">
+              <span className="text-white font-bold">Wander Embedded</span>
+            </div>
+            <div className="hidden md:block">
+              <div className="ml-10 flex items-baseline space-x-4">
+                <NavLink href="/dashboard">Dashboard</NavLink>
+                <NavLink href="/dashboard/settings">Settings</NavLink>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-4">
+            {user.email && (
+              <div className="hidden md:block">
+                <div className="flex items-center">
+                  <span className="text-gray-300 text-sm mr-4">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            )}
+            <button
+              onClick={onRefresh}
+              className="inline-flex items-center px-3 py-1.5 border border-gray-400 text-sm font-medium rounded-md text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              Refresh
+            </button>
+            <button
+              onClick={onLogout}
+              className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-red-500"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                />
+              </svg>
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/package.json b/package.json
index 5da3ac9..73aef39 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
     "dotenv": "^16.4.7",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
+    "nanoid": "^5.1.2",
     "next": "14.2.16",
     "react": "^18",
     "react-dom": "^18",
+    "sonner": "^2.0.1",
     "superjson": "^2.2.2",
     "zod": "^3.24.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0b0a20..dba8107 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
+      nanoid:
+        specifier: ^5.1.2
+        version: 5.1.2
       next:
         specifier: 14.2.16
         version: 14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -53,6 +56,9 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
+      sonner:
+        specifier: ^2.0.1
+        version: 2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       superjson:
         specifier: ^2.2.2
         version: 2.2.2
@@ -1736,6 +1742,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.1.2:
+    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -2034,6 +2045,12 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  sonner@2.0.1:
+    resolution: {integrity: sha512-FRBphaehZ5tLdLcQ8g2WOIRE+Y7BCfWi5Zyd8bCvBjiW8TxxAyoWZIxS661Yz6TGPqFQ4VLzOF89WEYhfynSFQ==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -4027,6 +4044,8 @@ snapshots:
 
   nanoid@3.3.8: {}
 
+  nanoid@5.1.2: {}
+
   natural-compare@1.4.0: {}
 
   next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -4368,6 +4387,11 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  sonner@2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   source-map-js@1.2.1: {}
 
   source-map@0.8.0-beta.0:
diff --git a/server/routers/_app.ts b/server/routers/_app.ts
index 0d128a2..0b3db00 100644
--- a/server/routers/_app.ts
+++ b/server/routers/_app.ts
@@ -24,11 +24,13 @@ import { rotateAuthShare } from "@/server/routers/work-shares/rotateAuthShare";
 import { registerWalletExport } from "@/server/routers/backup/registerWalletExport";
 import { authenticateRouter } from "@/server/routers/authenticate";
 import { validationRouter } from "./validation";
+import { dashboardRouter } from "./dashboard";
 // import { supabase } from '@/utils/supabaseClient';
 
 export const appRouter = router({
   ...authenticateRouter,
   ...validationRouter,
+  ...dashboardRouter,
 
   // Wallets:
   fetchWallets,
diff --git a/server/routers/dashboard.ts b/server/routers/dashboard.ts
new file mode 100644
index 0000000..83587fa
--- /dev/null
+++ b/server/routers/dashboard.ts
@@ -0,0 +1,237 @@
+import { protectedProcedure } from "../trpc";
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+import { Prisma } from "@prisma/client";
+import { customAlphabet } from "nanoid";
+
+// Create a custom nanoid function that uses lowercase letters and numbers
+const generateSlug = customAlphabet("abcdefghijklmnopqrstuvwxyz0123456789", 12);
+
+export const dashboardRouter = {
+  // Teams
+  createTeam: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().min(1).max(100),
+        slug: z
+          .string()
+          .min(1)
+          .max(50)
+          .regex(/^[a-z0-9-]+$/),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      let org = await ctx.prisma.organization.findFirst({
+        where: { ownerId: ctx.user.id },
+      });
+
+      if (!org) {
+        const slug = generateSlug();
+        const orgName =
+          (ctx.user?.email?.split("@")[0] || slug) + "'s Default Org";
+        org = await ctx.prisma.organization.create({
+          data: {
+            name: orgName,
+            slug: `org-${slug}`,
+            ownerId: ctx.user.id,
+          },
+        });
+      }
+
+      try {
+        return await ctx.prisma.team.create({
+          data: {
+            name: input.name,
+            slug: input.slug,
+            organizationId: org.id,
+            members: {
+              create: {
+                userId: ctx.user.id,
+                role: "OWNER",
+                organizationId: org.id,
+              },
+            },
+          },
+          include: {
+            members: true,
+          },
+        });
+      } catch (error) {
+        if (error instanceof Prisma.PrismaClientKnownRequestError) {
+          if (error.code === "P2002") {
+            throw new TRPCError({
+              code: "CONFLICT",
+              message: "Team with this slug already exists in the organization",
+            });
+          }
+        }
+        throw error;
+      }
+    }),
+
+  listTeams: protectedProcedure
+    .input(
+      z
+        .object({
+          organizationId: z.string().uuid().optional(),
+        })
+        .optional()
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.prisma.team.findMany({
+        where: {
+          organizationId: input?.organizationId,
+          members: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+        include: {
+          organization: true,
+          _count: {
+            select: {
+              members: true,
+              applications: true,
+            },
+          },
+        },
+      });
+    }),
+
+  // Applications
+  createApplication: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().min(1).max(100),
+        description: z.string().max(255).optional(),
+        teamId: z.string().uuid(),
+        domains: z.array(z.string().max(255)).optional(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      // Verify user has permission to create application in team
+      const teamMember = await ctx.prisma.teamMember.findFirst({
+        where: {
+          userId: ctx.user.id,
+          teamId: input.teamId,
+          role: {
+            in: ["OWNER", "ADMIN"],
+          },
+        },
+      });
+
+      if (!teamMember) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message:
+            "You do not have permission to create applications in this team",
+        });
+      }
+
+      return ctx.prisma.application.create({
+        data: {
+          name: input.name,
+          description: input.description,
+          domains: input.domains || [],
+          teamId: input.teamId,
+          settings: {},
+          clientId: {
+            create: {
+              name: `${input.name} Client Id`,
+            },
+          },
+        },
+        include: {
+          team: true,
+        },
+      });
+    }),
+
+  listApplications: protectedProcedure
+    .input(
+      z
+        .object({
+          teamId: z.string().uuid().optional(),
+        })
+        .optional()
+    )
+    .query(async ({ ctx, input }) => {
+      return ctx.prisma.application.findMany({
+        where: {
+          teamId: input?.teamId,
+          team: {
+            members: {
+              some: {
+                userId: ctx.user.id,
+              },
+            },
+          },
+        },
+        include: {
+          team: true,
+          clientId: true,
+        },
+      });
+    }),
+
+  // Stats for dashboard
+  getStats: protectedProcedure.query(async ({ ctx }) => {
+    const [organizations, teams, applications, apiKeys] = await Promise.all([
+      ctx.prisma.organization.count({
+        where: {
+          OR: [
+            { ownerId: ctx.user.id },
+            {
+              TeamMember: {
+                some: {
+                  userId: ctx.user.id,
+                },
+              },
+            },
+          ],
+        },
+      }),
+      ctx.prisma.team.count({
+        where: {
+          members: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+      }),
+      ctx.prisma.application.count({
+        where: {
+          team: {
+            members: {
+              some: {
+                userId: ctx.user.id,
+              },
+            },
+          },
+        },
+      }),
+      ctx.prisma.clientId.count({
+        where: {
+          application: {
+            team: {
+              members: {
+                some: {
+                  userId: ctx.user.id,
+                },
+              },
+            },
+          },
+        },
+      }),
+    ]);
+
+    return {
+      organizations,
+      teams,
+      applications,
+      apiKeys,
+    };
+  }),
+};

From 30881012a73944f3da77d44eb4b817344314b9c0 Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Wed, 5 Mar 2025 18:19:59 +0545
Subject: [PATCH 03/10] feat: add team and application details page

---
 app/dashboard/applications/[id]/page.tsx | 344 +++++++++++++++++++++++
 app/dashboard/page.tsx                   |  30 +-
 app/dashboard/settings/page.tsx          |  54 +++-
 app/dashboard/teams/[id]/page.tsx        | 230 +++++++++++++++
 app/layout.tsx                           |   8 +-
 client/components/CopyButton.tsx         |  60 ++++
 client/components/Header.tsx             |  29 +-
 client/components/LoadingSpinner.tsx     |  43 +++
 server/routers/dashboard.ts              | 201 +++++++++++++
 9 files changed, 937 insertions(+), 62 deletions(-)
 create mode 100644 app/dashboard/applications/[id]/page.tsx
 create mode 100644 app/dashboard/teams/[id]/page.tsx
 create mode 100644 client/components/CopyButton.tsx
 create mode 100644 client/components/LoadingSpinner.tsx

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
new file mode 100644
index 0000000..8cbe135
--- /dev/null
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -0,0 +1,344 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { toast } from "sonner";
+import {
+  LoadingSpinner,
+  LoadingPage,
+} from "@/client/components/LoadingSpinner";
+import { CopyButton } from "@/client/components/CopyButton";
+
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+const textareaStyles = inputStyles;
+
+export default function ApplicationDetailsPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const { data: app, isLoading } = trpc.getApplication.useQuery({
+    id: params.id,
+  });
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [editForm, setEditForm] = useState({
+    name: "",
+    description: "",
+    domains: [] as string[],
+  });
+  const [newDomain, setNewDomain] = useState("");
+
+  const updateAppMutation = trpc.updateApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application updated successfully");
+      setIsEditing(false);
+      utils.getApplication.invalidate({ id: params.id });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to update application");
+    },
+  });
+
+  const deleteAppMutation = trpc.deleteApplication.useMutation({
+    onSuccess: () => {
+      toast.success("Application deleted successfully");
+      router.push("/dashboard");
+      utils.listApplications.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to delete application");
+    },
+  });
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (!app) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h3 className="text-lg font-medium text-gray-900">
+              Application not found
+            </h3>
+            <div className="mt-2">
+              <button
+                onClick={() => router.push("/dashboard")}
+                className="text-blue-600 hover:text-blue-800"
+              >
+                ← Back to Dashboard
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const handleEdit = () => {
+    setEditForm({
+      name: app.name,
+      description: app.description || "",
+      domains: app.domains,
+    });
+    setIsEditing(true);
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await updateAppMutation.mutateAsync({
+      id: app.id,
+      name: editForm.name,
+      description: editForm.description,
+      domains: editForm.domains,
+    });
+  };
+
+  const handleDelete = async () => {
+    await deleteAppMutation.mutateAsync({ id: app.id });
+  };
+
+  const handleAddDomain = () => {
+    if (newDomain && !editForm.domains.includes(newDomain)) {
+      setEditForm((prev) => ({
+        ...prev,
+        domains: [...prev.domains, newDomain],
+      }));
+      setNewDomain("");
+    }
+  };
+
+  const handleRemoveDomain = (domain: string) => {
+    setEditForm((prev) => ({
+      ...prev,
+      domains: prev.domains.filter((d) => d !== domain),
+    }));
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="bg-white shadow rounded-lg">
+          {/* Header */}
+          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-semibold text-gray-900">
+                {app.name}
+              </h1>
+              <p className="text-sm text-gray-500">Team: {app.team.name}</p>
+            </div>
+            <div className="flex space-x-3">
+              <button
+                onClick={handleEdit}
+                className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+              >
+                Edit
+              </button>
+              <button
+                onClick={() => setShowDeleteConfirm(true)}
+                className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="px-6 py-4">
+            {/* Application Info */}
+            {!isEditing && (
+              <div className="space-y-4">
+                {app.description && (
+                  <div>
+                    <h3 className="text-sm font-medium text-gray-700">
+                      Description
+                    </h3>
+                    <p className="mt-1 text-gray-600">{app.description}</p>
+                  </div>
+                )}
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700">
+                    Client ID
+                  </h3>
+                  <div className="mt-2">
+                    {app.clientId ? (
+                      <CopyButton
+                        text={app.clientId.id}
+                        label={app.clientId.id}
+                      />
+                    ) : (
+                      <span className="text-sm text-gray-500">
+                        No Client ID available
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700">Domains</h3>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {app.domains.map((domain) => (
+                      <span
+                        key={domain}
+                        className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                      >
+                        {domain}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Edit Form */}
+            {isEditing && (
+              <form onSubmit={handleUpdate} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="name"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Application Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    value={editForm.name}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, name: e.target.value })
+                    }
+                    className={inputStyles}
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="description"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Description
+                  </label>
+                  <textarea
+                    id="description"
+                    value={editForm.description}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, description: e.target.value })
+                    }
+                    rows={3}
+                    className={textareaStyles}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">
+                    Domains
+                  </label>
+                  <div className="mt-1 flex space-x-2">
+                    <input
+                      type="text"
+                      value={newDomain}
+                      onChange={(e) => setNewDomain(e.target.value)}
+                      placeholder="example.com"
+                      className={inputStyles}
+                    />
+                    <button
+                      type="button"
+                      onClick={handleAddDomain}
+                      className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer inline-flex items-center space-x-2"
+                    >
+                      <span>Add</span>
+                    </button>
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {editForm.domains.map((domain) => (
+                      <span
+                        key={domain}
+                        className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                      >
+                        {domain}
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveDomain(domain)}
+                          className="ml-2 inline-flex text-blue-600 hover:text-blue-800 cursor-pointer"
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    onClick={() => setIsEditing(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={updateAppMutation.isLoading}
+                  >
+                    {updateAppMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Saving...</span>
+                      </>
+                    ) : (
+                      "Save Changes"
+                    )}
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* Delete Confirmation Modal */}
+            {showDeleteConfirm && (
+              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
+                <div className="bg-white rounded-lg p-6 max-w-sm w-full">
+                  <h3 className="text-lg font-medium text-gray-900">
+                    Delete Application
+                  </h3>
+                  <p className="mt-2 text-sm text-gray-500">
+                    Are you sure you want to delete this application? This
+                    action cannot be undone.
+                  </p>
+                  <div className="mt-4 flex justify-end space-x-3">
+                    <button
+                      onClick={() => setShowDeleteConfirm(false)}
+                      className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleDelete}
+                      className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                      disabled={deleteAppMutation.isLoading}
+                    >
+                      {deleteAppMutation.isLoading ? (
+                        <>
+                          <LoadingSpinner />
+                          <span>Deleting...</span>
+                        </>
+                      ) : (
+                        "Delete"
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index fbf104d..cfa90ad 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -26,7 +26,7 @@ export default function DashboardPage() {
   }) => (
     <button
       onClick={() => setActiveView(view)}
-      className={`w-full flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200
+      className={`w-full flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200 cursor-pointer
         ${
           activeView === view
             ? "bg-blue-50 text-blue-700 border border-blue-100"
@@ -172,16 +172,12 @@ function TeamsView() {
           slug: slug,
         });
 
-        // Dismiss loading toast and show success
-        toast.dismiss(loadingToast);
-        toast.success("Team created successfully!");
-
         setNewTeam({ name: "", slug: "" });
         setShowCreateForm(false);
-      } catch (error) {
-        // Dismiss loading toast and show error
+      } catch {
+        //
+      } finally {
         toast.dismiss(loadingToast);
-        toast.error(error.message || "Failed to create team");
       }
     },
     [newTeam, createTeamMutation]
@@ -201,7 +197,7 @@ function TeamsView() {
         <h2 className="text-xl font-semibold text-gray-900">Teams</h2>
         <button
           onClick={() => setShowCreateForm(true)}
-          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 cursor-pointer"
         >
           Create Team
         </button>
@@ -307,7 +303,7 @@ function TeamsView() {
               </div>
               <button
                 onClick={() => router.push(`/dashboard/teams/${team.id}`)}
-                className="text-blue-600 hover:text-blue-800"
+                className="text-blue-600 hover:text-blue-800 cursor-pointer"
               >
                 Manage →
               </button>
@@ -377,16 +373,12 @@ function ApplicationsView() {
           domains: newApp.domains,
         });
 
-        // Dismiss loading toast and show success
-        toast.dismiss(loadingToast);
-        toast.success("Application created successfully!");
-
         setNewApp({ name: "", description: "", teamId: "", domains: [] });
         setShowCreateForm(false);
-      } catch (error) {
-        // Dismiss loading toast and show error
+      } catch {
+        //
+      } finally {
         toast.dismiss(loadingToast);
-        toast.error(error.message || "Failed to create application");
       }
     },
     [newApp, createAppMutation]
@@ -408,7 +400,7 @@ function ApplicationsView() {
         <h2 className="text-xl font-semibold text-gray-900">Applications</h2>
         <button
           onClick={() => setShowCreateForm(true)}
-          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 cursor-pointer"
         >
           Create Application
         </button>
@@ -593,7 +585,7 @@ function ApplicationsView() {
               </div>
               <button
                 onClick={() => router.push(`/dashboard/applications/${app.id}`)}
-                className="text-blue-600 hover:text-blue-800"
+                className="text-blue-600 hover:text-blue-800 cursor-pointer"
               >
                 Manage →
               </button>
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
index 9fa2f73..c41bcbf 100644
--- a/app/dashboard/settings/page.tsx
+++ b/app/dashboard/settings/page.tsx
@@ -2,20 +2,54 @@
 
 import { ProtectedApiInteraction } from "@/client/components/ProtectedApiInteraction";
 import { useAuth } from "@/client/hooks/useAuth";
+import { supabase } from "@/client/utils/supabase/supabase-client-client";
 
 export default function SettingsPage() {
   const { user } = useAuth();
 
+  const handleRefresh = async () => {
+    await supabase.auth.refreshSession();
+  };
+
   if (!user) return null;
 
   return (
     <div className="min-h-screen bg-gray-50">
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="bg-white shadow rounded-lg p-6 mb-8">
-          <div className="flex items-center space-x-4">
-            <div className="bg-blue-100 rounded-full p-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <div className="bg-blue-100 rounded-full p-3">
+                <svg
+                  className="w-6 h-6 text-blue-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <h2 className="text-lg font-medium text-gray-900">
+                  User Profile
+                </h2>
+                <p className="text-sm text-gray-500">ID: {user.id}</p>
+                {user.email && (
+                  <p className="text-sm text-gray-500">Email: {user.email}</p>
+                )}
+              </div>
+            </div>
+            <button
+              onClick={handleRefresh}
+              className="inline-flex items-center px-3 py-1.5 border border-gray-400 text-sm font-medium rounded-md text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+            >
               <svg
-                className="w-6 h-6 text-blue-600"
+                className="w-4 h-4 mr-2"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -24,19 +58,11 @@ export default function SettingsPage() {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                 />
               </svg>
-            </div>
-            <div>
-              <h2 className="text-lg font-medium text-gray-900">
-                User Profile
-              </h2>
-              <p className="text-sm text-gray-500">ID: {user.id}</p>
-              {user.email && (
-                <p className="text-sm text-gray-500">Email: {user.email}</p>
-              )}
-            </div>
+              Refresh
+            </button>
           </div>
         </div>
 
diff --git a/app/dashboard/teams/[id]/page.tsx b/app/dashboard/teams/[id]/page.tsx
new file mode 100644
index 0000000..1d30aa8
--- /dev/null
+++ b/app/dashboard/teams/[id]/page.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { toast } from "sonner";
+import {
+  LoadingSpinner,
+  LoadingPage,
+} from "@/client/components/LoadingSpinner";
+
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
+
+export default function TeamDetailsPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const { data: team, isLoading } = trpc.getTeam.useQuery({ id: params.id });
+  const [isEditing, setIsEditing] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [editForm, setEditForm] = useState({
+    name: "",
+  });
+
+  const updateTeamMutation = trpc.updateTeam.useMutation({
+    onSuccess: () => {
+      toast.success("Team updated successfully");
+      setIsEditing(false);
+      utils.getTeam.invalidate({ id: params.id });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to update team");
+    },
+  });
+
+  const deleteTeamMutation = trpc.deleteTeam.useMutation({
+    onSuccess: () => {
+      toast.success("Team deleted successfully");
+      router.push("/dashboard");
+      utils.listTeams.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to delete team");
+    },
+  });
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (!team) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h3 className="text-lg font-medium text-gray-900">
+              Team not found
+            </h3>
+            <div className="mt-2">
+              <button
+                onClick={() => router.push("/dashboard")}
+                className="text-blue-600 hover:text-blue-800"
+              >
+                ← Back to Dashboard
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const handleEdit = () => {
+    setEditForm({ name: team.name });
+    setIsEditing(true);
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await updateTeamMutation.mutateAsync({
+      id: team.id,
+      name: editForm.name,
+    });
+  };
+
+  const handleDelete = async () => {
+    await deleteTeamMutation.mutateAsync({ id: team.id });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="bg-white shadow rounded-lg">
+          {/* Header */}
+          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-semibold text-gray-900">
+                {team.name}
+              </h1>
+              <p className="text-sm text-gray-500">
+                Organization: {team.organization.name}
+              </p>
+            </div>
+            <div className="flex space-x-3">
+              <button
+                onClick={handleEdit}
+                className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+              >
+                Edit
+              </button>
+              <button
+                onClick={() => setShowDeleteConfirm(true)}
+                className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="px-6 py-4">
+            {/* Team Stats */}
+            <div className="grid grid-cols-2 gap-4 mb-6">
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <p className="text-sm text-gray-500">Members</p>
+                <p className="text-2xl font-semibold text-gray-900">
+                  {team._count.members}
+                </p>
+              </div>
+              <div className="p-4 bg-gray-50 rounded-lg">
+                <p className="text-sm text-gray-500">Applications</p>
+                <p className="text-2xl font-semibold text-gray-900">
+                  {team._count.applications}
+                </p>
+              </div>
+            </div>
+
+            {/* Edit Form */}
+            {isEditing && (
+              <form onSubmit={handleUpdate} className="space-y-4">
+                <div>
+                  <label
+                    htmlFor="name"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Team Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    value={editForm.name}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, name: e.target.value })
+                    }
+                    className={inputStyles}
+                    required
+                  />
+                </div>
+                <div className="flex justify-end space-x-3">
+                  <button
+                    type="button"
+                    onClick={() => setIsEditing(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={updateTeamMutation.isLoading}
+                  >
+                    {updateTeamMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Saving...</span>
+                      </>
+                    ) : (
+                      "Save Changes"
+                    )}
+                  </button>
+                </div>
+              </form>
+            )}
+
+            {/* Delete Confirmation Modal */}
+            {showDeleteConfirm && (
+              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
+                <div className="bg-white rounded-lg p-6 max-w-sm w-full">
+                  <h3 className="text-lg font-medium text-gray-900">
+                    Delete Team
+                  </h3>
+                  <p className="mt-2 text-sm text-gray-500">
+                    Are you sure you want to delete this team? This action
+                    cannot be undone.
+                  </p>
+                  <div className="mt-4 flex justify-end space-x-3">
+                    <button
+                      onClick={() => setShowDeleteConfirm(false)}
+                      className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleDelete}
+                      className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                      disabled={deleteTeamMutation.isLoading}
+                    >
+                      {deleteTeamMutation.isLoading ? (
+                        <>
+                          <LoadingSpinner />
+                          <span>Deleting...</span>
+                        </>
+                      ) : (
+                        "Delete"
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index fe80907..cc04802 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -34,10 +34,6 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
     }
   }, [isAuthLoading, user, router, pathname]);
 
-  const handleRefresh = async () => {
-    await supabase.auth.refreshSession();
-  };
-
   const handleLogout = async () => {
     try {
       setIsLoading(true);
@@ -60,9 +56,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {user && (
-        <Header user={user} onRefresh={handleRefresh} onLogout={handleLogout} />
-      )}
+      {user && <Header user={user} onLogout={handleLogout} />}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
     </div>
   );
diff --git a/client/components/CopyButton.tsx b/client/components/CopyButton.tsx
new file mode 100644
index 0000000..c43de01
--- /dev/null
+++ b/client/components/CopyButton.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function CopyButton({ text, label }: { text: string; label?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      toast.success("Copied to clipboard!");
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error("Failed to copy to clipboard");
+    }
+  };
+
+  return (
+    <div className="group relative inline-flex items-center gap-1 rounded-md bg-gray-50 px-3 py-2 hover:bg-gray-100">
+      <span className="text-sm text-gray-600">{label || text}</span>
+      <button
+        onClick={handleCopy}
+        className="ml-2 p-1 text-gray-500 hover:text-gray-700 cursor-pointer"
+        title="Copy to clipboard"
+      >
+        {copied ? (
+          <svg
+            className="h-4 w-4 text-green-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+            />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
index 87f417c..a91983a 100644
--- a/client/components/Header.tsx
+++ b/client/components/Header.tsx
@@ -3,14 +3,15 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { User } from "@supabase/supabase-js";
+import { useRouter } from "next/navigation";
 
 interface HeaderProps {
   user: User;
-  onRefresh: () => void;
   onLogout: () => void;
 }
 
-export default function Header({ user, onRefresh, onLogout }: HeaderProps) {
+export default function Header({ user, onLogout }: HeaderProps) {
+  const router = useRouter();
   const pathname = usePathname();
 
   const NavLink = ({
@@ -40,7 +41,10 @@ export default function Header({ user, onRefresh, onLogout }: HeaderProps) {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
-            <div className="flex-shrink-0">
+            <div
+              className="flex-shrink-0 cursor-pointer"
+              onClick={() => router.push("/dashboard")}
+            >
               <span className="text-white font-bold">Wander Embedded</span>
             </div>
             <div className="hidden md:block">
@@ -61,25 +65,6 @@ export default function Header({ user, onRefresh, onLogout }: HeaderProps) {
                 </div>
               </div>
             )}
-            <button
-              onClick={onRefresh}
-              className="inline-flex items-center px-3 py-1.5 border border-gray-400 text-sm font-medium rounded-md text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
-            >
-              <svg
-                className="w-4 h-4 mr-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                />
-              </svg>
-              Refresh
-            </button>
             <button
               onClick={onLogout}
               className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-red-500"
diff --git a/client/components/LoadingSpinner.tsx b/client/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..673ac06
--- /dev/null
+++ b/client/components/LoadingSpinner.tsx
@@ -0,0 +1,43 @@
+export function LoadingSpinner({
+  className = "h-5 w-5",
+}: {
+  className?: string;
+}) {
+  return (
+    <svg
+      className={`animate-spin text-current ${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}
+
+export function LoadingPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="bg-white shadow rounded-lg p-8">
+          <div className="flex flex-col items-center justify-center">
+            <LoadingSpinner className="h-8 w-8 text-blue-600" />
+            <p className="mt-2 text-sm text-gray-500">Loading...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/server/routers/dashboard.ts b/server/routers/dashboard.ts
index 83587fa..718b697 100644
--- a/server/routers/dashboard.ts
+++ b/server/routers/dashboard.ts
@@ -234,4 +234,205 @@ export const dashboardRouter = {
       apiKeys,
     };
   }),
+
+  getTeam: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const team = await ctx.prisma.team.findFirst({
+        where: {
+          id: input.id,
+          members: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
+        include: {
+          organization: true,
+          _count: {
+            select: {
+              members: true,
+              applications: true,
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Team not found",
+        });
+      }
+
+      return team;
+    }),
+
+  updateTeam: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+        name: z.string().min(1).max(100),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const team = await ctx.prisma.team.findFirst({
+        where: {
+          id: input.id,
+          members: {
+            some: {
+              userId: ctx.user.id,
+              role: {
+                in: ["OWNER", "ADMIN"],
+              },
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Team not found or you don't have permission to update it",
+        });
+      }
+
+      return ctx.prisma.team.update({
+        where: { id: input.id },
+        data: {
+          name: input.name,
+        },
+      });
+    }),
+
+  deleteTeam: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const team = await ctx.prisma.team.findFirst({
+        where: {
+          id: input.id,
+          members: {
+            some: {
+              userId: ctx.user.id,
+              role: "OWNER",
+            },
+          },
+        },
+      });
+
+      if (!team) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Team not found or you don't have permission to delete it",
+        });
+      }
+
+      return ctx.prisma.team.delete({ where: { id: input.id } });
+    }),
+
+  getApplication: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const application = await ctx.prisma.application.findFirst({
+        where: {
+          id: input.id,
+          team: {
+            members: {
+              some: {
+                userId: ctx.user.id,
+              },
+            },
+          },
+        },
+        include: {
+          team: true,
+          clientId: true,
+        },
+      });
+
+      if (!application) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Application not found",
+        });
+      }
+
+      return application;
+    }),
+
+  updateApplication: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+        name: z.string().min(1).max(100),
+        description: z.string().max(255).optional(),
+        domains: z.array(z.string().max(255)),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const application = await ctx.prisma.application.findFirst({
+        where: {
+          id: input.id,
+          team: {
+            members: {
+              some: {
+                userId: ctx.user.id,
+                role: {
+                  in: ["OWNER", "ADMIN"],
+                },
+              },
+            },
+          },
+        },
+      });
+
+      if (!application) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message:
+            "Application not found or you don't have permission to update it",
+        });
+      }
+
+      return ctx.prisma.application.update({
+        where: { id: input.id },
+        data: {
+          name: input.name,
+          description: input.description,
+          domains: input.domains,
+        },
+      });
+    }),
+
+  deleteApplication: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const application = await ctx.prisma.application.findFirst({
+        where: {
+          id: input.id,
+          team: {
+            members: {
+              some: {
+                userId: ctx.user.id,
+                role: {
+                  in: ["OWNER", "ADMIN"],
+                },
+              },
+            },
+          },
+        },
+      });
+
+      if (!application) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message:
+            "Application not found or you don't have permission to delete it",
+        });
+      }
+
+      return ctx.prisma.application.delete({
+        where: { id: input.id },
+      });
+    }),
 };

From 2316379dc099fe40490b5f335ed54a52aaa95f9f Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Wed, 5 Mar 2025 18:56:23 +0545
Subject: [PATCH 04/10] feat: Add Modal component and improve UI interactions
 with cursor styles

---
 app/dashboard/applications/[id]/page.tsx      | 68 +++++++++----------
 app/dashboard/page.tsx                        | 16 ++---
 app/dashboard/settings/page.tsx               |  2 +-
 app/dashboard/teams/[id]/page.tsx             | 68 +++++++++----------
 app/layout.tsx                                |  8 +--
 app/page.tsx                                  |  2 +-
 client/components/Header.tsx                  |  2 +-
 client/components/Modal.tsx                   | 55 +++++++++++++++
 client/components/ProtectedApiInteraction.tsx |  4 +-
 9 files changed, 140 insertions(+), 85 deletions(-)
 create mode 100644 client/components/Modal.tsx

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
index 8cbe135..d769d5c 100644
--- a/app/dashboard/applications/[id]/page.tsx
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -9,6 +9,7 @@ import {
   LoadingPage,
 } from "@/client/components/LoadingSpinner";
 import { CopyButton } from "@/client/components/CopyButton";
+import { Modal } from "@/client/components/Modal";
 
 const inputStyles =
   "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
@@ -70,7 +71,7 @@ export default function ApplicationDetailsPage({
             <div className="mt-2">
               <button
                 onClick={() => router.push("/dashboard")}
-                className="text-blue-600 hover:text-blue-800"
+                className="cursor-pointer text-blue-600 hover:text-blue-800"
               >
                 ← Back to Dashboard
               </button>
@@ -301,41 +302,40 @@ export default function ApplicationDetailsPage({
             )}
 
             {/* Delete Confirmation Modal */}
-            {showDeleteConfirm && (
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
-                <div className="bg-white rounded-lg p-6 max-w-sm w-full">
-                  <h3 className="text-lg font-medium text-gray-900">
-                    Delete Application
-                  </h3>
-                  <p className="mt-2 text-sm text-gray-500">
-                    Are you sure you want to delete this application? This
-                    action cannot be undone.
-                  </p>
-                  <div className="mt-4 flex justify-end space-x-3">
-                    <button
-                      onClick={() => setShowDeleteConfirm(false)}
-                      className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={handleDelete}
-                      className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
-                      disabled={deleteAppMutation.isLoading}
-                    >
-                      {deleteAppMutation.isLoading ? (
-                        <>
-                          <LoadingSpinner />
-                          <span>Deleting...</span>
-                        </>
-                      ) : (
-                        "Delete"
-                      )}
-                    </button>
-                  </div>
+            <Modal
+              isOpen={showDeleteConfirm}
+              onClose={() => setShowDeleteConfirm(false)}
+              title="Delete Application"
+            >
+              <div>
+                <p className="text-sm text-gray-500">
+                  Are you sure you want to delete this application? This action
+                  cannot be undone.
+                </p>
+                <div className="mt-4 flex justify-end space-x-3">
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={deleteAppMutation.isLoading}
+                  >
+                    {deleteAppMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Deleting...</span>
+                      </>
+                    ) : (
+                      "Delete"
+                    )}
+                  </button>
                 </div>
               </div>
-            )}
+            </Modal>
           </div>
         </div>
       </div>
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index cfa90ad..cb8461a 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -26,7 +26,7 @@ export default function DashboardPage() {
   }) => (
     <button
       onClick={() => setActiveView(view)}
-      className={`w-full flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200 cursor-pointer
+      className={`cursor-pointer w-full flex items-center space-x-3 px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200
         ${
           activeView === view
             ? "bg-blue-50 text-blue-700 border border-blue-100"
@@ -197,7 +197,7 @@ function TeamsView() {
         <h2 className="text-xl font-semibold text-gray-900">Teams</h2>
         <button
           onClick={() => setShowCreateForm(true)}
-          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 cursor-pointer"
+          className="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
         >
           Create Team
         </button>
@@ -239,14 +239,14 @@ function TeamsView() {
               <button
                 type="button"
                 onClick={() => setShowCreateForm(false)}
-                className="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                className="cursor-pointer px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
                 disabled={createTeamMutation.isLoading}
               >
                 Cancel
               </button>
               <button
                 type="submit"
-                className="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
+                className="cursor-pointer px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
                 disabled={createTeamMutation.isLoading}
               >
                 {createTeamMutation.isLoading ? (
@@ -489,7 +489,7 @@ function ApplicationsView() {
                 <button
                   type="button"
                   onClick={handleAddDomain}
-                  className="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"
+                  className="cursor-pointer px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors"
                 >
                   Add
                 </button>
@@ -504,7 +504,7 @@ function ApplicationsView() {
                     <button
                       type="button"
                       onClick={() => handleRemoveDomain(domain)}
-                      className="ml-2 inline-flex text-blue-600 hover:text-blue-800"
+                      className="ml-2 inline-flex text-blue-600 hover:text-blue-800 cursor-pointer"
                     >
                       ×
                     </button>
@@ -517,14 +517,14 @@ function ApplicationsView() {
               <button
                 type="button"
                 onClick={() => setShowCreateForm(false)}
-                className="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                className="cursor-pointer px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
                 disabled={createAppMutation.isLoading}
               >
                 Cancel
               </button>
               <button
                 type="submit"
-                className="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
+                className="cursor-pointer px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center space-x-2"
                 disabled={createAppMutation.isLoading}
               >
                 {createAppMutation.isLoading ? (
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
index c41bcbf..0a366e6 100644
--- a/app/dashboard/settings/page.tsx
+++ b/app/dashboard/settings/page.tsx
@@ -46,7 +46,7 @@ export default function SettingsPage() {
             </div>
             <button
               onClick={handleRefresh}
-              className="inline-flex items-center px-3 py-1.5 border border-gray-400 text-sm font-medium rounded-md text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+              className="cursor-pointer inline-flex items-center px-3 py-1.5 border border-gray-400 text-sm font-medium rounded-md text-gray-200 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
             >
               <svg
                 className="w-4 h-4 mr-2"
diff --git a/app/dashboard/teams/[id]/page.tsx b/app/dashboard/teams/[id]/page.tsx
index 1d30aa8..06ec9bb 100644
--- a/app/dashboard/teams/[id]/page.tsx
+++ b/app/dashboard/teams/[id]/page.tsx
@@ -8,6 +8,7 @@ import {
   LoadingSpinner,
   LoadingPage,
 } from "@/client/components/LoadingSpinner";
+import { Modal } from "@/client/components/Modal";
 
 const inputStyles =
   "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
@@ -63,7 +64,7 @@ export default function TeamDetailsPage({
             <div className="mt-2">
               <button
                 onClick={() => router.push("/dashboard")}
-                className="text-blue-600 hover:text-blue-800"
+                className="cursor-pointer text-blue-600 hover:text-blue-800"
               >
                 ← Back to Dashboard
               </button>
@@ -187,41 +188,40 @@ export default function TeamDetailsPage({
             )}
 
             {/* Delete Confirmation Modal */}
-            {showDeleteConfirm && (
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
-                <div className="bg-white rounded-lg p-6 max-w-sm w-full">
-                  <h3 className="text-lg font-medium text-gray-900">
-                    Delete Team
-                  </h3>
-                  <p className="mt-2 text-sm text-gray-500">
-                    Are you sure you want to delete this team? This action
-                    cannot be undone.
-                  </p>
-                  <div className="mt-4 flex justify-end space-x-3">
-                    <button
-                      onClick={() => setShowDeleteConfirm(false)}
-                      className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={handleDelete}
-                      className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
-                      disabled={deleteTeamMutation.isLoading}
-                    >
-                      {deleteTeamMutation.isLoading ? (
-                        <>
-                          <LoadingSpinner />
-                          <span>Deleting...</span>
-                        </>
-                      ) : (
-                        "Delete"
-                      )}
-                    </button>
-                  </div>
+            <Modal
+              isOpen={showDeleteConfirm}
+              onClose={() => setShowDeleteConfirm(false)}
+              title="Delete Team"
+            >
+              <div>
+                <p className="text-sm text-gray-500">
+                  Are you sure you want to delete this team? This action cannot
+                  be undone.
+                </p>
+                <div className="mt-4 flex justify-end space-x-3">
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed inline-flex items-center space-x-2"
+                    disabled={deleteTeamMutation.isLoading}
+                  >
+                    {deleteTeamMutation.isLoading ? (
+                      <>
+                        <LoadingSpinner />
+                        <span>Deleting...</span>
+                      </>
+                    ) : (
+                      "Delete"
+                    )}
+                  </button>
                 </div>
               </div>
-            )}
+            </Modal>
           </div>
         </div>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index cc04802..1c9eb88 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,7 +5,7 @@ import "./globals.css";
 
 import { trpc } from "@/client/utils/trpc/trpc-client";
 import { useAuth } from "@/client/hooks/useAuth";
-import { usePathname, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import Header from "@/client/components/Header";
 import { Toaster } from "sonner";
@@ -23,22 +23,22 @@ function RootLayout({ children }: { children: React.ReactNode }) {
 
 function AuthProvider({ children }: { children: React.ReactNode }) {
   const router = useRouter();
-  const pathname = usePathname();
   const { user, isLoading: isAuthLoading } = useAuth();
   const logoutMutation = trpc.logout.useMutation();
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (!isAuthLoading && !user && pathname !== "/") {
+    if (!isAuthLoading && !user) {
       router.push("/");
     }
-  }, [isAuthLoading, user, router, pathname]);
+  }, [isAuthLoading, user, router]);
 
   const handleLogout = async () => {
     try {
       setIsLoading(true);
       await logoutMutation.mutateAsync();
       await supabase.auth.signOut();
+      setIsLoading(false);
       router.push("/");
     } catch (error) {
       setIsLoading(false);
diff --git a/app/page.tsx b/app/page.tsx
index e2330f3..26083f4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -63,7 +63,7 @@ export default function Login() {
         <button
           onClick={handleGoogleSignIn}
           disabled={loginMutation.isLoading}
-          className="w-full flex items-center justify-center space-x-2 bg-white text-gray-700 font-semibold py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+          className="cursor-pointer w-full flex items-center justify-center space-x-2 bg-white text-gray-700 font-semibold py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
         >
           <svg className="w-5 h-5" viewBox="0 0 24 24">
             <path
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
index a91983a..964ded0 100644
--- a/client/components/Header.tsx
+++ b/client/components/Header.tsx
@@ -67,7 +67,7 @@ export default function Header({ user, onLogout }: HeaderProps) {
             )}
             <button
               onClick={onLogout}
-              className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-red-500"
+              className="cursor-pointer inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-red-500"
             >
               <svg
                 className="w-4 h-4 mr-2"
diff --git a/client/components/Modal.tsx b/client/components/Modal.tsx
new file mode 100644
index 0000000..76c0158
--- /dev/null
+++ b/client/components/Modal.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export function Modal({ isOpen, onClose, title, children }: ModalProps) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 backdrop-blur-sm bg-black/30 transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div
+          className="bg-white rounded-lg shadow-xl max-w-sm w-full transform transition-all"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h3 className="text-lg font-medium text-gray-900">{title}</h3>
+          </div>
+          <div className="px-6 py-4">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/ProtectedApiInteraction.tsx b/client/components/ProtectedApiInteraction.tsx
index eb70cf6..4453195 100644
--- a/client/components/ProtectedApiInteraction.tsx
+++ b/client/components/ProtectedApiInteraction.tsx
@@ -48,7 +48,7 @@ export function ProtectedApiInteraction() {
   }) => (
     <button
       onClick={() => setActiveTab(tab)}
-      className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200
+      className={`cursor-pointer px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200
         ${
           activeTab === tab
             ? "bg-blue-100 text-blue-700"
@@ -93,7 +93,7 @@ export function ProtectedApiInteraction() {
 
         <button
           onClick={() => refetch()}
-          className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+          className="cursor-pointer inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
         >
           <svg
             className="w-4 h-4 mr-1.5"

From 153516f054253f8e15dc94cbeee0ee0634c0580b Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Wed, 5 Mar 2025 20:45:06 +0545
Subject: [PATCH 05/10] refactor: Optimize dashboard router queries by using
 select instead of include

---
 app/dashboard/applications/[id]/page.tsx |   8 ++
 server/routers/dashboard.ts              | 103 +++++++++++++----------
 2 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
index d769d5c..7f88126 100644
--- a/app/dashboard/applications/[id]/page.tsx
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -155,6 +155,14 @@ export default function ApplicationDetailsPage({
             {/* Application Info */}
             {!isEditing && (
               <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700">
+                    ApplicationID
+                  </h3>
+                  <div className="mt-2">
+                    <CopyButton text={app.id} label={app.id} />
+                  </div>
+                </div>
                 {app.description && (
                   <div>
                     <h3 className="text-sm font-medium text-gray-700">
diff --git a/server/routers/dashboard.ts b/server/routers/dashboard.ts
index 718b697..217b697 100644
--- a/server/routers/dashboard.ts
+++ b/server/routers/dashboard.ts
@@ -23,6 +23,7 @@ export const dashboardRouter = {
     .mutation(async ({ ctx, input }) => {
       let org = await ctx.prisma.organization.findFirst({
         where: { ownerId: ctx.user.id },
+        select: { id: true },
       });
 
       if (!org) {
@@ -35,6 +36,7 @@ export const dashboardRouter = {
             slug: `org-${slug}`,
             ownerId: ctx.user.id,
           },
+          select: { id: true },
         });
       }
 
@@ -52,7 +54,8 @@ export const dashboardRouter = {
               },
             },
           },
-          include: {
+          select: {
+            id: true,
             members: true,
           },
         });
@@ -87,8 +90,14 @@ export const dashboardRouter = {
             },
           },
         },
-        include: {
-          organization: true,
+        select: {
+          id: true,
+          name: true,
+          organization: {
+            select: {
+              name: true,
+            },
+          },
           _count: {
             select: {
               members: true,
@@ -110,7 +119,6 @@ export const dashboardRouter = {
       })
     )
     .mutation(async ({ ctx, input }) => {
-      // Verify user has permission to create application in team
       const teamMember = await ctx.prisma.teamMember.findFirst({
         where: {
           userId: ctx.user.id,
@@ -119,6 +127,7 @@ export const dashboardRouter = {
             in: ["OWNER", "ADMIN"],
           },
         },
+        select: { id: true },
       });
 
       if (!teamMember) {
@@ -142,8 +151,14 @@ export const dashboardRouter = {
             },
           },
         },
-        include: {
-          team: true,
+        select: {
+          id: true,
+          name: true,
+          team: {
+            select: {
+              name: true,
+            },
+          },
         },
       });
     }),
@@ -168,30 +183,27 @@ export const dashboardRouter = {
             },
           },
         },
-        include: {
-          team: true,
-          clientId: true,
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          team: {
+            select: {
+              name: true,
+            },
+          },
+          clientId: {
+            select: {
+              id: true,
+            },
+          },
         },
       });
     }),
 
   // Stats for dashboard
   getStats: protectedProcedure.query(async ({ ctx }) => {
-    const [organizations, teams, applications, apiKeys] = await Promise.all([
-      ctx.prisma.organization.count({
-        where: {
-          OR: [
-            { ownerId: ctx.user.id },
-            {
-              TeamMember: {
-                some: {
-                  userId: ctx.user.id,
-                },
-              },
-            },
-          ],
-        },
-      }),
+    const [teams, applications] = await Promise.all([
       ctx.prisma.team.count({
         where: {
           members: {
@@ -212,26 +224,11 @@ export const dashboardRouter = {
           },
         },
       }),
-      ctx.prisma.clientId.count({
-        where: {
-          application: {
-            team: {
-              members: {
-                some: {
-                  userId: ctx.user.id,
-                },
-              },
-            },
-          },
-        },
-      }),
     ]);
 
     return {
-      organizations,
       teams,
       applications,
-      apiKeys,
     };
   }),
 
@@ -247,8 +244,14 @@ export const dashboardRouter = {
             },
           },
         },
-        include: {
-          organization: true,
+        select: {
+          id: true,
+          name: true,
+          organization: {
+            select: {
+              name: true,
+            },
+          },
           _count: {
             select: {
               members: true,
@@ -344,9 +347,21 @@ export const dashboardRouter = {
             },
           },
         },
-        include: {
-          team: true,
-          clientId: true,
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          domains: true,
+          team: {
+            select: {
+              name: true,
+            },
+          },
+          clientId: {
+            select: {
+              id: true,
+            },
+          },
         },
       });
 

From 120c88401c0af1fbe8d60c1ba76b792ef75a90ac Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Thu, 6 Mar 2025 00:14:00 +0545
Subject: [PATCH 06/10] refactor: Update dashboard router and UI components to
 use new Membership model

---
 app/dashboard/applications/[id]/page.tsx |   5 +-
 app/dashboard/teams/[id]/page.tsx        |   2 +-
 app/layout.tsx                           |   2 +-
 server/routers/dashboard.ts              | 102 +++++++++++++++--------
 4 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
index 7f88126..268ac33 100644
--- a/app/dashboard/applications/[id]/page.tsx
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -177,10 +177,7 @@ export default function ApplicationDetailsPage({
                   </h3>
                   <div className="mt-2">
                     {app.clientId ? (
-                      <CopyButton
-                        text={app.clientId.id}
-                        label={app.clientId.id}
-                      />
+                      <CopyButton text={app.clientId} label={app.clientId} />
                     ) : (
                       <span className="text-sm text-gray-500">
                         No Client ID available
diff --git a/app/dashboard/teams/[id]/page.tsx b/app/dashboard/teams/[id]/page.tsx
index 06ec9bb..d971b9d 100644
--- a/app/dashboard/teams/[id]/page.tsx
+++ b/app/dashboard/teams/[id]/page.tsx
@@ -129,7 +129,7 @@ export default function TeamDetailsPage({
               <div className="p-4 bg-gray-50 rounded-lg">
                 <p className="text-sm text-gray-500">Members</p>
                 <p className="text-2xl font-semibold text-gray-900">
-                  {team._count.members}
+                  {team._count.memberships}
                 </p>
               </div>
               <div className="p-4 bg-gray-50 rounded-lg">
diff --git a/app/layout.tsx b/app/layout.tsx
index 1c9eb88..efc9ceb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -57,7 +57,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen bg-gray-50">
       {user && <Header user={user} onLogout={handleLogout} />}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">{children}</div>
+      {children}
     </div>
   );
 }
diff --git a/server/routers/dashboard.ts b/server/routers/dashboard.ts
index 217b697..8cf5ad5 100644
--- a/server/routers/dashboard.ts
+++ b/server/routers/dashboard.ts
@@ -21,20 +21,27 @@ export const dashboardRouter = {
       })
     )
     .mutation(async ({ ctx, input }) => {
+      // Find or create default organization for the user
       let org = await ctx.prisma.organization.findFirst({
-        where: { ownerId: ctx.user.id },
+        where: {
+          memberships: {
+            some: {
+              userId: ctx.user.id,
+            },
+          },
+        },
         select: { id: true },
       });
 
       if (!org) {
         const slug = generateSlug();
         const orgName =
-          (ctx.user?.email?.split("@")[0] || slug) + "'s Default Org";
+          (ctx.user?.email?.split("@")[0] || slug) + "'s Organization";
+
         org = await ctx.prisma.organization.create({
           data: {
             name: orgName,
             slug: `org-${slug}`,
-            ownerId: ctx.user.id,
           },
           select: { id: true },
         });
@@ -46,7 +53,7 @@ export const dashboardRouter = {
             name: input.name,
             slug: input.slug,
             organizationId: org.id,
-            members: {
+            memberships: {
               create: {
                 userId: ctx.user.id,
                 role: "OWNER",
@@ -56,7 +63,7 @@ export const dashboardRouter = {
           },
           select: {
             id: true,
-            members: true,
+            memberships: true,
           },
         });
       } catch (error) {
@@ -84,7 +91,7 @@ export const dashboardRouter = {
       return ctx.prisma.team.findMany({
         where: {
           organizationId: input?.organizationId,
-          members: {
+          memberships: {
             some: {
               userId: ctx.user.id,
             },
@@ -100,7 +107,7 @@ export const dashboardRouter = {
           },
           _count: {
             select: {
-              members: true,
+              memberships: true,
               applications: true,
             },
           },
@@ -119,7 +126,7 @@ export const dashboardRouter = {
       })
     )
     .mutation(async ({ ctx, input }) => {
-      const teamMember = await ctx.prisma.teamMember.findFirst({
+      const membership = await ctx.prisma.membership.findFirst({
         where: {
           userId: ctx.user.id,
           teamId: input.teamId,
@@ -127,14 +134,13 @@ export const dashboardRouter = {
             in: ["OWNER", "ADMIN"],
           },
         },
-        select: { id: true },
       });
 
-      if (!teamMember) {
+      if (!membership) {
         throw new TRPCError({
           code: "FORBIDDEN",
           message:
-            "You do not have permission to create applications in this team",
+            "You don't have permission to create applications in this team",
         });
       }
 
@@ -145,11 +151,6 @@ export const dashboardRouter = {
           domains: input.domains || [],
           teamId: input.teamId,
           settings: {},
-          clientId: {
-            create: {
-              name: `${input.name} Client Id`,
-            },
-          },
         },
         select: {
           id: true,
@@ -176,7 +177,7 @@ export const dashboardRouter = {
         where: {
           teamId: input?.teamId,
           team: {
-            members: {
+            memberships: {
               some: {
                 userId: ctx.user.id,
               },
@@ -187,16 +188,12 @@ export const dashboardRouter = {
           id: true,
           name: true,
           description: true,
+          clientId: true,
           team: {
             select: {
               name: true,
             },
           },
-          clientId: {
-            select: {
-              id: true,
-            },
-          },
         },
       });
     }),
@@ -206,7 +203,7 @@ export const dashboardRouter = {
     const [teams, applications] = await Promise.all([
       ctx.prisma.team.count({
         where: {
-          members: {
+          memberships: {
             some: {
               userId: ctx.user.id,
             },
@@ -216,7 +213,7 @@ export const dashboardRouter = {
       ctx.prisma.application.count({
         where: {
           team: {
-            members: {
+            memberships: {
               some: {
                 userId: ctx.user.id,
               },
@@ -238,7 +235,7 @@ export const dashboardRouter = {
       const team = await ctx.prisma.team.findFirst({
         where: {
           id: input.id,
-          members: {
+          memberships: {
             some: {
               userId: ctx.user.id,
             },
@@ -254,7 +251,7 @@ export const dashboardRouter = {
           },
           _count: {
             select: {
-              members: true,
+              memberships: true,
               applications: true,
             },
           },
@@ -282,7 +279,7 @@ export const dashboardRouter = {
       const team = await ctx.prisma.team.findFirst({
         where: {
           id: input.id,
-          members: {
+          memberships: {
             some: {
               userId: ctx.user.id,
               role: {
@@ -314,19 +311,54 @@ export const dashboardRouter = {
       const team = await ctx.prisma.team.findFirst({
         where: {
           id: input.id,
-          members: {
+          memberships: {
             some: {
               userId: ctx.user.id,
               role: "OWNER",
             },
           },
         },
+        include: {
+          organization: {
+            select: {
+              name: true,
+              teams: {
+                select: {
+                  id: true,
+                },
+              },
+            },
+          },
+        },
       });
 
       if (!team) {
         throw new TRPCError({
           code: "NOT_FOUND",
-          message: "Team not found or you don't have permission to delete it",
+          message: "Team not found or insufficient permissions",
+        });
+      }
+
+      if (team.organization.teams.length === 1) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Cannot delete the organization's only team",
+        });
+      }
+
+      const otherMemberships = await ctx.prisma.membership.findFirst({
+        where: {
+          userId: ctx.user.id,
+          teamId: {
+            not: input.id,
+          },
+        },
+      });
+
+      if (!otherMemberships) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Cannot delete your only team membership",
         });
       }
 
@@ -340,7 +372,7 @@ export const dashboardRouter = {
         where: {
           id: input.id,
           team: {
-            members: {
+            memberships: {
               some: {
                 userId: ctx.user.id,
               },
@@ -357,11 +389,7 @@ export const dashboardRouter = {
               name: true,
             },
           },
-          clientId: {
-            select: {
-              id: true,
-            },
-          },
+          clientId: true,
         },
       });
 
@@ -389,7 +417,7 @@ export const dashboardRouter = {
         where: {
           id: input.id,
           team: {
-            members: {
+            memberships: {
               some: {
                 userId: ctx.user.id,
                 role: {
@@ -426,7 +454,7 @@ export const dashboardRouter = {
         where: {
           id: input.id,
           team: {
-            members: {
+            memberships: {
               some: {
                 userId: ctx.user.id,
                 role: {

From d75a105613353b2bec2535111e8b64bcfaaaa448 Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Thu, 6 Mar 2025 00:44:06 +0545
Subject: [PATCH 07/10] feat: Add domain validation for applications

---
 app/dashboard/applications/[id]/page.tsx | 11 +++-
 app/dashboard/page.tsx                   |  8 +++
 app/dashboard/settings/page.tsx          |  5 +-
 server/routers/dashboard.ts              |  5 +-
 shared/validators/domains.ts             | 71 ++++++++++++++++++++++++
 5 files changed, 93 insertions(+), 7 deletions(-)
 create mode 100644 shared/validators/domains.ts

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
index 268ac33..8997dc5 100644
--- a/app/dashboard/applications/[id]/page.tsx
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/client/components/LoadingSpinner";
 import { CopyButton } from "@/client/components/CopyButton";
 import { Modal } from "@/client/components/Modal";
+import { validateDomains } from "@/shared/validators/domains";
 
 const inputStyles =
   "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
@@ -107,9 +108,17 @@ export default function ApplicationDetailsPage({
 
   const handleAddDomain = () => {
     if (newDomain && !editForm.domains.includes(newDomain)) {
+      const updatedDomains = [...editForm.domains, newDomain];
+      const validationResult = validateDomains(updatedDomains);
+
+      if (!validationResult.valid) {
+        toast.error(validationResult.error);
+        return;
+      }
+
       setEditForm((prev) => ({
         ...prev,
-        domains: [...prev.domains, newDomain],
+        domains: updatedDomains,
       }));
       setNewDomain("");
     }
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index cb8461a..4df2596 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -4,6 +4,7 @@ import { useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { trpc } from "@/client/utils/trpc/trpc-client";
 import { toast } from "sonner";
+import { validateDomains } from "@/shared/validators/domains";
 
 type ActiveView = "teams" | "applications";
 
@@ -343,6 +344,13 @@ function ApplicationsView() {
 
   const handleAddDomain = useCallback(() => {
     if (newDomain && !newApp.domains.includes(newDomain)) {
+      const validationResult = validateDomains([...newApp.domains, newDomain]);
+
+      if (!validationResult.valid) {
+        toast.error(validationResult.error);
+        return;
+      }
+
       setNewApp((prev) => ({
         ...prev,
         domains: [...prev.domains, newDomain],
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
index 0a366e6..70bb3da 100644
--- a/app/dashboard/settings/page.tsx
+++ b/app/dashboard/settings/page.tsx
@@ -61,15 +61,12 @@ export default function SettingsPage() {
                   d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                 />
               </svg>
-              Refresh
+              Refresh Session
             </button>
           </div>
         </div>
 
         <div className="bg-white shadow rounded-lg p-6">
-          <h2 className="text-lg font-medium text-gray-900 mb-6">
-            API Interactions
-          </h2>
           <ProtectedApiInteraction />
         </div>
       </main>
diff --git a/server/routers/dashboard.ts b/server/routers/dashboard.ts
index 8cf5ad5..22ab46d 100644
--- a/server/routers/dashboard.ts
+++ b/server/routers/dashboard.ts
@@ -3,6 +3,7 @@ import { z } from "zod";
 import { TRPCError } from "@trpc/server";
 import { Prisma } from "@prisma/client";
 import { customAlphabet } from "nanoid";
+import { domainValidator } from "@/shared/validators/domains";
 
 // Create a custom nanoid function that uses lowercase letters and numbers
 const generateSlug = customAlphabet("abcdefghijklmnopqrstuvwxyz0123456789", 12);
@@ -122,7 +123,7 @@ export const dashboardRouter = {
         name: z.string().min(1).max(100),
         description: z.string().max(255).optional(),
         teamId: z.string().uuid(),
-        domains: z.array(z.string().max(255)).optional(),
+        domains: domainValidator,
       })
     )
     .mutation(async ({ ctx, input }) => {
@@ -409,7 +410,7 @@ export const dashboardRouter = {
         id: z.string().uuid(),
         name: z.string().min(1).max(100),
         description: z.string().max(255).optional(),
-        domains: z.array(z.string().max(255)),
+        domains: domainValidator,
       })
     )
     .mutation(async ({ ctx, input }) => {
diff --git a/shared/validators/domains.ts b/shared/validators/domains.ts
new file mode 100644
index 0000000..3612682
--- /dev/null
+++ b/shared/validators/domains.ts
@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { TRPCError } from "@trpc/server";
+
+export function getBaseDomain(url: string): string {
+  try {
+    let normalizedUrl = url;
+    if (!url.includes("://")) {
+      normalizedUrl = `http://${url}`;
+    }
+    const urlObj = new URL(normalizedUrl);
+    return urlObj.hostname;
+  } catch {
+    throw new Error(`Invalid domain format: ${url}`);
+  }
+}
+
+export function areDomainsRelated(domain1: string, domain2: string): boolean {
+  try {
+    const base1 = getBaseDomain(domain1);
+    const base2 = getBaseDomain(domain2);
+
+    if (base1 === base2) return true;
+    return base1.endsWith(`.${base2}`) || base2.endsWith(`.${base1}`);
+  } catch {
+    return false;
+  }
+}
+
+export function validateDomains(domains: string[]): {
+  valid: boolean;
+  error?: string;
+} {
+  if (domains.length === 0) return { valid: true };
+
+  try {
+    const firstDomain = domains[0];
+    const isValid = domains.every((domain) =>
+      areDomainsRelated(firstDomain, domain)
+    );
+
+    return {
+      valid: isValid,
+      error: isValid
+        ? undefined
+        : "All domains must be subdomains or ports of the same base domain",
+    };
+  } catch {
+    return {
+      valid: false,
+      error: "Invalid domain format provided",
+    };
+  }
+}
+
+// For backend TRPC validation
+export const domainValidator = z
+  .array(z.string().max(255))
+  .superRefine((domains, ctx) => {
+    const result = validateDomains(domains);
+
+    if (!result.valid) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: result.error!,
+      });
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: result.error!,
+      });
+    }
+  });

From 2bdb7792fb6d462fc9ab55ed41282dde32c472dd Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Thu, 6 Mar 2025 12:31:34 +0545
Subject: [PATCH 08/10] feat: Enhance authentication and UI with new components
 and styling

---
 app/dashboard/applications/[id]/page.tsx |  84 ++++---
 app/dashboard/page.tsx                   |  17 +-
 app/dashboard/teams/[id]/page.tsx        |  76 +++----
 app/favicon.ico                          | Bin 25931 -> 0 bytes
 app/globals.css                          |  21 ++
 app/layout.tsx                           |  87 ++-----
 app/page.tsx                             | 277 ++++++++++++++++++-----
 client/components/AuthGuard.tsx          |  62 +++++
 client/components/AuthHeader.tsx         |  28 +++
 client/components/Header.tsx             |   4 +-
 client/components/PageHeader.tsx         |  41 ++++
 client/components/Providers.tsx          |  16 ++
 client/utils/trpc/trpc-client.ts         |   2 +-
 package.json                             |   1 +
 pnpm-lock.yaml                           |  28 ++-
 public/favicon.png                       | Bin 0 -> 1011 bytes
 public/icon.png                          | Bin 0 -> 44880 bytes
 17 files changed, 514 insertions(+), 230 deletions(-)
 delete mode 100644 app/favicon.ico
 create mode 100644 client/components/AuthGuard.tsx
 create mode 100644 client/components/AuthHeader.tsx
 create mode 100644 client/components/PageHeader.tsx
 create mode 100644 client/components/Providers.tsx
 create mode 100644 public/favicon.png
 create mode 100644 public/icon.png

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
index 8997dc5..6516f87 100644
--- a/app/dashboard/applications/[id]/page.tsx
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/client/components/LoadingSpinner";
 import { CopyButton } from "@/client/components/CopyButton";
 import { Modal } from "@/client/components/Modal";
+import { PageHeader } from "@/client/components/PageHeader";
 import { validateDomains } from "@/shared/validators/domains";
 
 const inputStyles =
@@ -63,22 +64,11 @@ export default function ApplicationDetailsPage({
 
   if (!app) {
     return (
-      <div className="min-h-screen bg-gray-50 py-8">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center">
-            <h3 className="text-lg font-medium text-gray-900">
-              Application not found
-            </h3>
-            <div className="mt-2">
-              <button
-                onClick={() => router.push("/dashboard")}
-                className="cursor-pointer text-blue-600 hover:text-blue-800"
-              >
-                ← Back to Dashboard
-              </button>
-            </div>
-          </div>
-        </div>
+      <div className="min-h-screen bg-gray-50">
+        <PageHeader
+          title="Application not found"
+          backUrl="/dashboard?tab=applications"
+        />
       </div>
     );
   }
@@ -131,47 +121,49 @@ export default function ApplicationDetailsPage({
     }));
   };
 
+  const headerActions = (
+    <>
+      <button
+        onClick={handleEdit}
+        className="cursor-pointer px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+      >
+        Edit
+      </button>
+      <button
+        onClick={() => setShowDeleteConfirm(true)}
+        className="cursor-pointer px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700"
+      >
+        Delete
+      </button>
+    </>
+  );
+
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="bg-white shadow rounded-lg">
-          {/* Header */}
-          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-semibold text-gray-900">
-                {app.name}
-              </h1>
-              <p className="text-sm text-gray-500">Team: {app.team.name}</p>
-            </div>
-            <div className="flex space-x-3">
-              <button
-                onClick={handleEdit}
-                className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
-              >
-                Edit
-              </button>
-              <button
-                onClick={() => setShowDeleteConfirm(true)}
-                className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
+        <PageHeader
+          title={app.name}
+          subtitle={`Team: ${app.team.name}`}
+          actions={headerActions}
+          backUrl="/dashboard?tab=applications"
+        />
+      </div>
 
-          {/* Content */}
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg">
           <div className="px-6 py-4">
             {/* Application Info */}
             {!isEditing && (
-              <div className="space-y-4">
+              <div className="space-y-6">
                 <div>
                   <h3 className="text-sm font-medium text-gray-700">
-                    ApplicationID
+                    Application ID
                   </h3>
                   <div className="mt-2">
                     <CopyButton text={app.id} label={app.id} />
                   </div>
                 </div>
+
                 {app.description && (
                   <div>
                     <h3 className="text-sm font-medium text-gray-700">
@@ -180,6 +172,7 @@ export default function ApplicationDetailsPage({
                     <p className="mt-1 text-gray-600">{app.description}</p>
                   </div>
                 )}
+
                 <div>
                   <h3 className="text-sm font-medium text-gray-700">
                     Client ID
@@ -194,6 +187,7 @@ export default function ApplicationDetailsPage({
                     )}
                   </div>
                 </div>
+
                 <div>
                   <h3 className="text-sm font-medium text-gray-700">Domains</h3>
                   <div className="mt-2 flex flex-wrap gap-2">
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 4df2596..22c99fb 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useState, useCallback, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { trpc } from "@/client/utils/trpc/trpc-client";
 import { toast } from "sonner";
 import { validateDomains } from "@/shared/validators/domains";
@@ -9,8 +9,10 @@ import { validateDomains } from "@/shared/validators/domains";
 type ActiveView = "teams" | "applications";
 
 export default function DashboardPage() {
+  const params = useSearchParams();
   const [activeView, setActiveView] = useState<ActiveView>("teams");
   const { data: stats } = trpc.getStats.useQuery();
+  const router = useRouter();
 
   const NavIcon = ({ children }: { children: React.ReactNode }) => (
     <div className="w-5 h-5 flex-shrink-0">{children}</div>
@@ -54,6 +56,17 @@ export default function DashboardPage() {
     );
   };
 
+  useEffect(() => {
+    const viewType = params.get("tab");
+    if (viewType === "applications" || viewType === "teams") {
+      setActiveView(viewType);
+    }
+  }, [params]);
+
+  useEffect(() => {
+    router.push(`/dashboard?tab=${activeView}`);
+  }, [activeView, router]);
+
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
diff --git a/app/dashboard/teams/[id]/page.tsx b/app/dashboard/teams/[id]/page.tsx
index d971b9d..827359b 100644
--- a/app/dashboard/teams/[id]/page.tsx
+++ b/app/dashboard/teams/[id]/page.tsx
@@ -9,6 +9,7 @@ import {
   LoadingPage,
 } from "@/client/components/LoadingSpinner";
 import { Modal } from "@/client/components/Modal";
+import { PageHeader } from "@/client/components/PageHeader";
 
 const inputStyles =
   "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3";
@@ -55,21 +56,9 @@ export default function TeamDetailsPage({
 
   if (!team) {
     return (
-      <div className="min-h-screen bg-gray-50 py-8">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center">
-            <h3 className="text-lg font-medium text-gray-900">
-              Team not found
-            </h3>
-            <div className="mt-2">
-              <button
-                onClick={() => router.push("/dashboard")}
-                className="cursor-pointer text-blue-600 hover:text-blue-800"
-              >
-                ← Back to Dashboard
-              </button>
-            </div>
-          </div>
+      <div className="min-h-screen bg-gray-50">
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
+          <PageHeader title="Team not found" backUrl="/dashboard?tab=teams" />
         </div>
       </div>
     );
@@ -92,37 +81,36 @@ export default function TeamDetailsPage({
     await deleteTeamMutation.mutateAsync({ id: team.id });
   };
 
+  const headerActions = (
+    <>
+      <button
+        onClick={handleEdit}
+        className="cursor-pointer px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+      >
+        Edit
+      </button>
+      <button
+        onClick={() => setShowDeleteConfirm(true)}
+        className="cursor-pointer px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700"
+      >
+        Delete
+      </button>
+    </>
+  );
+
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="bg-white shadow rounded-lg">
-          {/* Header */}
-          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-semibold text-gray-900">
-                {team.name}
-              </h1>
-              <p className="text-sm text-gray-500">
-                Organization: {team.organization.name}
-              </p>
-            </div>
-            <div className="flex space-x-3">
-              <button
-                onClick={handleEdit}
-                className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 cursor-pointer"
-              >
-                Edit
-              </button>
-              <button
-                onClick={() => setShowDeleteConfirm(true)}
-                className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 cursor-pointer"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
+        <PageHeader
+          title={team.name}
+          subtitle={`Organization: ${team.organization.name}`}
+          actions={headerActions}
+          backUrl="/dashboard?tab=teams"
+        />
+      </div>
 
-          {/* Content */}
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white shadow rounded-lg">
           <div className="px-6 py-4">
             {/* Team Stats */}
             <div className="grid grid-cols-2 gap-4 mb-6">
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
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
LrJugUA?W`A8`#=m

diff --git a/app/globals.css b/app/globals.css
index f1d8c73..f3f7c18 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1 +1,22 @@
 @import "tailwindcss";
+
+html {
+  scrollbar-gutter: stable;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index efc9ceb..4ffd94a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,78 +1,25 @@
-"use client";
-
-import { supabase } from "@/client/utils/supabase/supabase-client-client";
 import "./globals.css";
-
-import { trpc } from "@/client/utils/trpc/trpc-client";
-import { useAuth } from "@/client/hooks/useAuth";
-import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
-import Header from "@/client/components/Header";
-import { Toaster } from "sonner";
-
-function RootLayout({ children }: { children: React.ReactNode }) {
+import { Metadata } from "next";
+import Providers from "@/client/components/Providers";
+
+export const metadata: Metadata = {
+  title: "Wander Embedded",
+  description: "Set up teams and apps for your embedded wallet",
+  icons: {
+    icon: "favicon.png",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html lang="en">
       <body>
-        <Toaster position="top-right" richColors />
-        <AuthProvider>{children}</AuthProvider>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
 }
-
-function AuthProvider({ children }: { children: React.ReactNode }) {
-  const router = useRouter();
-  const { user, isLoading: isAuthLoading } = useAuth();
-  const logoutMutation = trpc.logout.useMutation();
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (!isAuthLoading && !user) {
-      router.push("/");
-    }
-  }, [isAuthLoading, user, router]);
-
-  const handleLogout = async () => {
-    try {
-      setIsLoading(true);
-      await logoutMutation.mutateAsync();
-      await supabase.auth.signOut();
-      setIsLoading(false);
-      router.push("/");
-    } catch (error) {
-      setIsLoading(false);
-      console.error("Logout failed:", error);
-    }
-  };
-
-  if (isAuthLoading) {
-    return <LoadingScreen message="Loading..." />;
-  }
-
-  if (isLoading) {
-    return <LoadingScreen message="Signing out..." />;
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {user && <Header user={user} onLogout={handleLogout} />}
-      {children}
-    </div>
-  );
-}
-
-function LoadingScreen({ message }: { message: string }) {
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-50">
-      <div className="p-8 bg-white rounded-lg shadow-md">
-        <div className="flex flex-col items-center space-y-4">
-          <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
-          <p className="text-gray-600">{message}</p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default trpc.withTRPC(RootLayout);
diff --git a/app/page.tsx b/app/page.tsx
index 26083f4..a9e7e1b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,29 +4,74 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { trpc } from "@/client/utils/trpc/trpc-client";
 import { useAuth } from "@/client/hooks/useAuth";
+import { AuthHeader } from "@/client/components/AuthHeader";
+import { FcGoogle } from "react-icons/fc";
+import { FaFacebook, FaApple, FaTwitter } from "react-icons/fa";
+import { MdEmail, MdArrowBack, MdExpandMore } from "react-icons/md";
+
+type AuthProvider = "GOOGLE" | "FACEBOOK" | "X" | "APPLE" | "EMAIL_N_PASSWORD";
+
+const initialProviders = [
+  {
+    id: "GOOGLE" as AuthProvider,
+    name: "Google",
+    icon: <FcGoogle className="w-5 h-5" />,
+  },
+];
+
+const additionalProviders = [
+  {
+    id: "FACEBOOK" as AuthProvider,
+    name: "Facebook",
+    icon: <FaFacebook className="w-5 h-5 text-[#1877F2]" />,
+  },
+  {
+    id: "X" as AuthProvider,
+    name: "X",
+    icon: <FaTwitter className="w-5 h-5" />,
+  },
+  {
+    id: "APPLE" as AuthProvider,
+    name: "Apple",
+    icon: <FaApple className="w-5 h-5" />,
+  },
+];
 
 export default function Login() {
   const router = useRouter();
   const { user, isLoading: isAuthLoading } = useAuth();
   const loginMutation = trpc.authenticate.useMutation();
   const [isLoading, setIsLoading] = useState(false);
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showAllProviders, setShowAllProviders] = useState(false);
 
-  const handleGoogleSignIn = async () => {
+  const handleProviderSignIn = async (provider: AuthProvider) => {
     try {
       setIsLoading(true);
-
       const { url } = await loginMutation.mutateAsync({
-        authProviderType: "GOOGLE",
+        authProviderType: provider,
       });
+      if (url) window.location.href = url;
+      else console.error("No URL returned from authenticate");
+    } catch (error) {
+      console.error(`${provider} sign-in failed:`, error);
+      setIsLoading(false);
+    }
+  };
 
-      if (url) {
-        // Redirect to Google's OAuth page
-        window.location.href = url;
-      } else {
-        console.error("No URL returned from authenticate");
-      }
+  const handleEmailSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setIsLoading(true);
+      // await loginMutation.mutateAsync({
+      //   authProviderType: "EMAIL_N_PASSWORD",
+      //   email,
+      //   password,
+      // });
     } catch (error) {
-      console.error("Google sign-in failed:", error);
+      console.error("Email sign-in failed:", error);
       setIsLoading(false);
     }
   };
@@ -39,63 +84,177 @@ export default function Login() {
 
   if (isAuthLoading || isLoading || user) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-        <div className="p-8 bg-white rounded-lg shadow-md">
-          <div className="flex flex-col items-center space-y-4">
-            <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
-            <p className="text-gray-600">Authenticating...</p>
+      <>
+        <AuthHeader />
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-gray-50 to-white">
+          <div className="p-8 bg-white rounded-lg shadow-md">
+            <div className="flex flex-col items-center space-y-4">
+              <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+              <p className="text-gray-600">Authenticating...</p>
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
-            Welcome Back
-          </h1>
-          <p className="text-gray-600 mb-8">Sign in to access your account</p>
-        </div>
+    <>
+      <AuthHeader />
+      <div className="flex min-h-screen bg-gradient-to-b from-gray-50 to-white pt-16">
+        <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
+          <div className="w-full max-w-md">
+            <div className="bg-white rounded-xl shadow-xl p-8">
+              <div className="text-center">
+                <h1 className="text-2xl font-bold text-gray-900 mb-2">
+                  Welcome to Wander Embedded
+                </h1>
+                <p className="text-gray-600 mb-8">
+                  Set up teams and apps for your embedded wallet
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                {!showEmailForm ? (
+                  <>
+                    {initialProviders.map((provider) => (
+                      <button
+                        key={provider.id}
+                        onClick={() => handleProviderSignIn(provider.id)}
+                        disabled={loginMutation.isLoading}
+                        className="cursor-pointer w-full flex items-center justify-center space-x-3 bg-white text-gray-700 font-medium py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 h-12"
+                      >
+                        {provider.icon}
+                        <span>Continue with {provider.name}</span>
+                      </button>
+                    ))}
+
+                    {!showAllProviders ? (
+                      <button
+                        onClick={() => setShowAllProviders(true)}
+                        className="cursor-pointer w-full flex items-center justify-center space-x-2 text-gray-600 hover:text-gray-800 py-2 h-10"
+                      >
+                        <span>More options</span>
+                        <MdExpandMore className="w-5 h-5" />
+                      </button>
+                    ) : (
+                      <>
+                        {additionalProviders.map((provider) => (
+                          <button
+                            key={provider.id}
+                            onClick={() => handleProviderSignIn(provider.id)}
+                            disabled={loginMutation.isLoading}
+                            className="cursor-pointer w-full flex items-center justify-center space-x-3 bg-white text-gray-700 font-medium py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 h-12"
+                          >
+                            {provider.icon}
+                            <span>Continue with {provider.name}</span>
+                          </button>
+                        ))}
+                      </>
+                    )}
 
-        <button
-          onClick={handleGoogleSignIn}
-          disabled={loginMutation.isLoading}
-          className="cursor-pointer w-full flex items-center justify-center space-x-2 bg-white text-gray-700 font-semibold py-3 px-4 border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
-        >
-          <svg className="w-5 h-5" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-            />
-            <path
-              fill="currentColor"
-              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-            />
-            <path
-              fill="currentColor"
-              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-            />
-            <path
-              fill="currentColor"
-              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-            />
-          </svg>
-          <span>
-            {loginMutation.isLoading ? "Connecting..." : "Continue with Google"}
-          </span>
-        </button>
-
-        {loginMutation.error && (
-          <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
-            <p className="text-sm text-red-600">
-              {loginMutation.error.message}
-            </p>
+                    <div className="relative my-6">
+                      <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-gray-300" />
+                      </div>
+                      <div className="relative flex justify-center text-sm">
+                        <span className="px-2 bg-white text-gray-500">Or</span>
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={() => setShowEmailForm(true)}
+                      className="cursor-pointer w-full flex items-center justify-center space-x-3 bg-gray-900 text-white font-medium py-3 px-4 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all duration-200 h-12"
+                    >
+                      <MdEmail className="w-5 h-5" />
+                      <span>Continue with Email</span>
+                    </button>
+                  </>
+                ) : (
+                  <form onSubmit={handleEmailSignIn} className="space-y-4">
+                    <div>
+                      <label
+                        htmlFor="email"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        Email
+                      </label>
+                      <input
+                        type="email"
+                        id="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        required
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="password"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        Password
+                      </label>
+                      <input
+                        type="password"
+                        id="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        required
+                      />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <button
+                        type="button"
+                        onClick={() => setShowEmailForm(false)}
+                        className="cursor-pointer text-sm text-gray-600 hover:text-gray-800 flex items-center justify-center space-x-2 h-10"
+                      >
+                        <MdArrowBack className="w-4 h-4" />
+                        <span>Back to all options</span>
+                      </button>
+                      <button
+                        type="submit"
+                        disabled={loginMutation.isLoading}
+                        className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 h-10"
+                      >
+                        Sign In
+                      </button>
+                    </div>
+                  </form>
+                )}
+
+                {loginMutation.error && (
+                  <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-sm text-red-600">
+                      {loginMutation.error.message}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="mt-6 text-center">
+              <p className="text-xs text-gray-500">
+                By continuing, you agree to our{" "}
+                <a
+                  href="#"
+                  className="text-blue-600 hover:text-blue-800 underline"
+                >
+                  Terms of Service
+                </a>{" "}
+                and{" "}
+                <a
+                  href="#"
+                  className="text-blue-600 hover:text-blue-800 underline"
+                >
+                  Privacy Policy
+                </a>
+              </p>
+            </div>
           </div>
-        )}
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/client/components/AuthGuard.tsx b/client/components/AuthGuard.tsx
new file mode 100644
index 0000000..606a701
--- /dev/null
+++ b/client/components/AuthGuard.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import { useAuth } from "../hooks/useAuth";
+import { supabase } from "../utils/supabase/supabase-client-client";
+import { trpc } from "../utils/trpc/trpc-client";
+import Header from "./Header";
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const { user, isLoading: isAuthLoading } = useAuth();
+  const logoutMutation = trpc.logout.useMutation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!isAuthLoading && !user) {
+      router.push("/");
+    }
+  }, [isAuthLoading, user, router]);
+
+  const handleLogout = async () => {
+    try {
+      setIsLoading(true);
+      await logoutMutation.mutateAsync();
+      await supabase.auth.signOut();
+      setIsLoading(false);
+      router.push("/");
+    } catch (error) {
+      setIsLoading(false);
+      console.error("Logout failed:", error);
+    }
+  };
+
+  if (isAuthLoading) {
+    return <LoadingScreen message="Loading..." />;
+  }
+
+  if (isLoading) {
+    return <LoadingScreen message="Signing out..." />;
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {user && <Header user={user} onLogout={handleLogout} />}
+      {children}
+    </div>
+  );
+}
+
+function LoadingScreen({ message }: { message: string }) {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <div className="p-8 bg-white rounded-lg shadow-md">
+        <div className="flex flex-col items-center space-y-4">
+          <div className="w-8 h-8 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+          <p className="text-gray-600">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/AuthHeader.tsx b/client/components/AuthHeader.tsx
new file mode 100644
index 0000000..f772455
--- /dev/null
+++ b/client/components/AuthHeader.tsx
@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+export function AuthHeader() {
+  return (
+    <div className="fixed top-0 left-0 right-0 bg-white shadow-sm z-10">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-2">
+            <Image src="/icon.png" alt="Wander Logo" width={40} height={40} />
+            <span className="text-xl font-bold text-gray-900">
+              Wander Embedded
+            </span>
+          </div>
+          <div>
+            <a
+              href="https://wander.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-gray-500 font-bold hover:text-gray-700"
+            >
+              Docs
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
index 964ded0..954f38c 100644
--- a/client/components/Header.tsx
+++ b/client/components/Header.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { User } from "@supabase/supabase-js";
 import { useRouter } from "next/navigation";
+import Image from "next/image";
 
 interface HeaderProps {
   user: User;
@@ -40,7 +41,8 @@ export default function Header({ user, onLogout }: HeaderProps) {
     <nav className="bg-gray-800">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
+          <div className="flex items-center gap-2">
+            <Image src="/icon.png" alt="Wander Logo" width={40} height={40} />
             <div
               className="flex-shrink-0 cursor-pointer"
               onClick={() => router.push("/dashboard")}
diff --git a/client/components/PageHeader.tsx b/client/components/PageHeader.tsx
new file mode 100644
index 0000000..4f869ba
--- /dev/null
+++ b/client/components/PageHeader.tsx
@@ -0,0 +1,41 @@
+import { MdArrowBack } from "react-icons/md";
+import Link from "next/link";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  backUrl?: string;
+}
+
+export function PageHeader({
+  title,
+  subtitle,
+  actions,
+  backUrl,
+}: PageHeaderProps) {
+  return (
+    <div className="bg-white shadow">
+      <div className="px-6 py-4 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <div>
+            {backUrl && (
+              <Link
+                href={backUrl}
+                className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-flex items-center gap-1"
+              >
+                <MdArrowBack className="w-4 h-4" />
+                Back
+              </Link>
+            )}
+            <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
+            {subtitle && (
+              <p className="mt-1 text-sm text-gray-500">{subtitle}</p>
+            )}
+          </div>
+          {actions && <div className="flex space-x-3">{actions}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/components/Providers.tsx b/client/components/Providers.tsx
new file mode 100644
index 0000000..fc30d00
--- /dev/null
+++ b/client/components/Providers.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { trpc } from "@/client/utils/trpc/trpc-client";
+import { Toaster } from "sonner";
+import AuthGuard from "@/client/components/AuthGuard";
+
+function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Toaster position="top-right" richColors />
+      <AuthGuard>{children}</AuthGuard>
+    </>
+  );
+}
+
+export default trpc.withTRPC(Providers);
diff --git a/client/utils/trpc/trpc-client.ts b/client/utils/trpc/trpc-client.ts
index 74854fb..2e19192 100644
--- a/client/utils/trpc/trpc-client.ts
+++ b/client/utils/trpc/trpc-client.ts
@@ -59,5 +59,5 @@ export const trpc = createTRPCNext<AppRouter>({
       ],
     };
   },
-  ssr: false,
+  ssr: true,
 });
diff --git a/package.json b/package.json
index 73aef39..ed51cf3 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "next": "14.2.16",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.5.0",
     "sonner": "^2.0.1",
     "superjson": "^2.2.2",
     "zod": "^3.24.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dba8107..a658a31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@18.3.1)
       sonner:
         specifier: ^2.0.1
         version: 2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1914,6 +1917,11 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3341,8 +3349,8 @@ snapshots:
       '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.8.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -3361,7 +3369,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -3372,22 +3380,22 @@ snapshots:
       stable-hash: 0.0.4
       tinyglobby: 0.2.12
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.26.0(eslint@8.57.1)(typescript@5.8.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -3398,7 +3406,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.8.3(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -4213,6 +4221,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-icons@5.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-ssr-prepass@1.6.0(react@18.3.1):
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4b51b63a36690be9ba2c49a653c4fdeea18ff70
GIT binary patch
literal 1011
zcmV<P0}T9$P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1BgjPK~#7F?NnWE
z6G;%Rs_sd`?gQQv;GAG{gB|t)WN(nH_F=VJh>iA#2f$-RkVpu{{0MjpydfS)ZeVkQ
z_ylA)0fYEUJkwo#-D3yjh#$cdl1nc4Oiy=xUwu{GL^GS&%x3mI+ubYLxpP&w=o^gb
zEA3WS*OatJ%!=3Z=Pq-PzQXwWMZY5zx7(YXf9a;JOq=9&4+Mym3#4(fs`%IcuJZ6p
zV_dtSsTevVLOiTk_c#7^+Z!ze{)}y0&}Mn4eOJ**SMhW2h+L&VG3nzh)5hoahc%o3
zyKQCPC-Ds-OE-+A0&G^i@q6nn?R+W#d$;ABHmgcGItWx%aKAYJT6aDQ+|tH+%XREa
zw~xB77!egCU1?`ru<))36G$|aT-G`3_AmWatxN~Ga^7_SwhUkj4kCFu@_GGE<emPq
zjy2Q!F8*1j-nl(Ic8qWXI3(g906ULO7;36cpOz&uDk%mJBi;vO?CRz{&a=O(WfI!K
z21U)GIH@u{5lnjZ>3F*SbM#ww+wT7JN0}xJ(1cTKi4wfnq#oJu;t_#hy^ilAi`12*
zC8Py-E$v7{X03%Ec^S)6G#x-R5I{Y6fU&^SnR>4Nrb@$uHw0CwlgtrY3t&r{%n6%B
zDY0_D)#cTID-#0B+zryOA;w06R4O=PVGcmOx3B#ZD3ez%)SfhuLnG$SQ86xo*8RYF
z00)sQN<DUCkhN$WLA5)<Jt6=(2Izx<nQXG)VidKiNvO)&=up}K9l{y)4+Nl)3(t&`
z5PUc~q&BM4s`oL4W(&!%!4L0fwLy^n7=fq)Q8#8^FATug1dqYA;ho<`udE{L-Jk$U
zRg{j4u^NMs)89Q#31T#GvLHRQ18@Y7U0*BxA?C50@Mfm{(rJp?Yi!Dp<xykC=FG_@
zr^%Kr?-lh&V8;F7To>u~jg?b2QGkmk2}mTYHi=}=e3Gway!auWohHCR1t#25%+{ly
zJen|+#K+PwdphN`+>uww>CwVLV}bDDV4?6QbPq~3V+p|s<>OF-v5I7kV8V5$@nm}9
zY!>=}^GV%804whs3Bg`4SeEmLEB79r$b0Z=Zj|CK$?>g->q7rno~#dqLUTVmciG;b
z#yh4!WW{s?f!2)Yp%;ComU8QLXn(N7jUE@%>u*1r-^CC--gv0j5<q_jcoQdS3F8v;
h@$6?dvzg5-*gG>I;*%dClq3KE002ovPDHLkV1fj0*be{z

literal 0
HcmV?d00001

diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa8b1e913bb0786d02c7316ba88f3e91e2aed40c
GIT binary patch
literal 44880
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
CW0@xa

literal 0
HcmV?d00001


From ab9bf16b5d778e179ac6109a641a9d24c952fdf7 Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Thu, 6 Mar 2025 13:11:49 +0545
Subject: [PATCH 09/10] refactor: Improve authentication flow and routing with
 new AuthProvider

---
 app/layout.tsx                     |  7 ++-
 app/page.tsx                       | 11 +++-
 client/components/AuthGuard.tsx    | 16 ++---
 client/components/AuthHeader.tsx   |  4 +-
 client/components/AuthProvider.tsx | 96 ++++++++++++++++++++++++++++++
 client/components/Providers.tsx    | 16 -----
 client/hooks/useAuth.ts            | 78 ++++++------------------
 7 files changed, 132 insertions(+), 96 deletions(-)
 create mode 100644 client/components/AuthProvider.tsx
 delete mode 100644 client/components/Providers.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 4ffd94a..da1a2f9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import "./globals.css";
 import { Metadata } from "next";
-import Providers from "@/client/components/Providers";
+import AuthProvider from "@/client/components/AuthProvider";
+import AuthGuard from "@/client/components/AuthGuard";
 
 export const metadata: Metadata = {
   title: "Wander Embedded",
@@ -18,7 +19,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <Providers>{children}</Providers>
+        <AuthProvider>
+          <AuthGuard>{children}</AuthGuard>
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index a9e7e1b..221a702 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -37,6 +37,9 @@ const additionalProviders = [
   },
 ];
 
+const inputStyles =
+  "mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-base py-2.5 px-3 h-[42px]";
+
 export default function Login() {
   const router = useRouter();
   const { user, isLoading: isAuthLoading } = useAuth();
@@ -101,7 +104,7 @@ export default function Login() {
   return (
     <>
       <AuthHeader />
-      <div className="flex min-h-screen bg-gradient-to-b from-gray-50 to-white pt-16">
+      <div className="flex min-h-screen bg-gradient-to-b from-gray-50 to-white pt-8">
         <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
           <div className="w-full max-w-md">
             <div className="bg-white rounded-xl shadow-xl p-8">
@@ -184,7 +187,8 @@ export default function Login() {
                         id="email"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
-                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        className={inputStyles}
+                        placeholder="you@example.com"
                         required
                       />
                     </div>
@@ -200,7 +204,8 @@ export default function Login() {
                         id="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
-                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        className={inputStyles}
+                        placeholder="••••••••"
                         required
                       />
                     </div>
diff --git a/client/components/AuthGuard.tsx b/client/components/AuthGuard.tsx
index 606a701..3516d29 100644
--- a/client/components/AuthGuard.tsx
+++ b/client/components/AuthGuard.tsx
@@ -1,34 +1,26 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useAuth } from "../hooks/useAuth";
 import { supabase } from "../utils/supabase/supabase-client-client";
 import { trpc } from "../utils/trpc/trpc-client";
 import Header from "./Header";
 
 export default function AuthGuard({ children }: { children: React.ReactNode }) {
-  const router = useRouter();
   const { user, isLoading: isAuthLoading } = useAuth();
   const logoutMutation = trpc.logout.useMutation();
   const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    if (!isAuthLoading && !user) {
-      router.push("/");
-    }
-  }, [isAuthLoading, user, router]);
-
   const handleLogout = async () => {
     try {
       setIsLoading(true);
       await logoutMutation.mutateAsync();
       await supabase.auth.signOut();
-      setIsLoading(false);
-      router.push("/");
+      window.location.href = "/";
     } catch (error) {
-      setIsLoading(false);
       console.error("Logout failed:", error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
diff --git a/client/components/AuthHeader.tsx b/client/components/AuthHeader.tsx
index f772455..ead8209 100644
--- a/client/components/AuthHeader.tsx
+++ b/client/components/AuthHeader.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export function AuthHeader() {
   return (
-    <div className="fixed top-0 left-0 right-0 bg-white shadow-sm z-10">
+    <header className="fixed top-0 left-0 right-0 bg-white shadow-sm z-10">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           <div className="flex items-center gap-2">
@@ -23,6 +23,6 @@ export function AuthHeader() {
           </div>
         </div>
       </div>
-    </div>
+    </header>
   );
 }
diff --git a/client/components/AuthProvider.tsx b/client/components/AuthProvider.tsx
new file mode 100644
index 0000000..b646423
--- /dev/null
+++ b/client/components/AuthProvider.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { setAuthToken, trpc } from "@/client/utils/trpc/trpc-client";
+import { User } from "@supabase/supabase-js";
+import { supabase } from "@/client/utils/supabase/supabase-client-client";
+import { useRouter, usePathname } from "next/navigation";
+import { AuthContext, AuthContextType } from "../hooks/useAuth";
+import { Toaster } from "sonner";
+
+type AuthProviderProps = {
+  children: React.ReactNode;
+};
+
+const AuthProvider = ({ children }: AuthProviderProps) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [token, setToken] = useState<string | null>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+
+      const accessToken = session?.access_token ?? null;
+
+      setToken(accessToken);
+      setAuthToken(accessToken);
+      setIsLoading(false);
+
+      if (!session && pathname !== "/") {
+        router.replace("/");
+      }
+    };
+
+    checkSession();
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      const accessToken = session?.access_token ?? null;
+
+      setToken(accessToken);
+      setAuthToken(accessToken);
+      setIsLoading(false);
+
+      if (!session && pathname !== "/") {
+        router.replace("/");
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [router, pathname]);
+
+  const {
+    data,
+    isLoading: isUserLoading,
+    error: userError,
+  } = trpc.getUser.useQuery(undefined, {
+    enabled: !!token,
+    retry: false,
+  });
+
+  const user: User | null = data?.user || null;
+
+  useEffect(() => {
+    if (!isLoading && !user && pathname !== "/") {
+      router.replace("/");
+    }
+  }, [isLoading, user, router, pathname]);
+
+  const value = token
+    ? {
+        token,
+        user,
+        isLoading: isLoading || isUserLoading,
+        error: userError,
+      }
+    : {
+        token: null,
+        user: null,
+        isLoading,
+        error: null,
+      };
+
+  return (
+    <AuthContext.Provider value={value as AuthContextType}>
+      <Toaster position="top-right" richColors />
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default trpc.withTRPC(AuthProvider);
diff --git a/client/components/Providers.tsx b/client/components/Providers.tsx
deleted file mode 100644
index fc30d00..0000000
--- a/client/components/Providers.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { trpc } from "@/client/utils/trpc/trpc-client";
-import { Toaster } from "sonner";
-import AuthGuard from "@/client/components/AuthGuard";
-
-function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <Toaster position="top-right" richColors />
-      <AuthGuard>{children}</AuthGuard>
-    </>
-  );
-}
-
-export default trpc.withTRPC(Providers);
diff --git a/client/hooks/useAuth.ts b/client/hooks/useAuth.ts
index 5503ffd..0d3d319 100644
--- a/client/hooks/useAuth.ts
+++ b/client/hooks/useAuth.ts
@@ -1,65 +1,21 @@
-import { useState, useEffect } from "react"
-import { setAuthToken, trpc } from "@/client/utils/trpc/trpc-client"
-import { User } from "@supabase/supabase-js"
-import { supabase } from "@/client/utils/supabase/supabase-client-client"
-
-export function useAuth() {
-  const [isLoading, setIsLoading] = useState(true)
-  const [token, setToken] = useState<string | null>(null)
-
-  useEffect(() => {
-    const checkSession = async () => {
-      const {
-        data: { session },
-      } = await supabase.auth.getSession();
-
-      console.log("Session init =", session);
-
-      const accessToken = session?.access_token ?? null;
-
-      setToken(accessToken);
-      setAuthToken(accessToken);
-      setIsLoading(false)
-    }
-
-    checkSession()
-
-    const {
-      data: { subscription },
-    } = supabase.auth.onAuthStateChange((_event, session) => {
-      console.log("Session change =", session);
-
-      const accessToken = session?.access_token ?? null;
-
-      setToken(accessToken);
-      setAuthToken(accessToken);
-      setIsLoading(false)
-    });
-
-    return () => subscription.unsubscribe()
-  }, [])
-
-  const {
-    data,
-    isLoading: isUserLoading,
-    error: userError,
-  } = trpc.getUser.useQuery(undefined, {
-    enabled: !!token,
-    retry: false,
-  });
+import { User } from "@supabase/supabase-js";
+import { createContext, useContext } from "react";
+
+export interface AuthContextType {
+  token: string | null;
+  user: User | null;
+  isLoading: boolean;
+  error: Error | null;
+}
 
-  const user: User | null = data?.user || null;
+export const AuthContext = createContext<AuthContextType | undefined>(
+  undefined
+);
 
-  return token ? {
-    token,
-    user,
-    isLoading: isLoading || isUserLoading,
-    error: userError,
-  } : {
-    token: null,
-    user: null,
-    isLoading,
-    error: null,
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
   }
+  return context;
 }
-

From e323fb3df7f764d6780acb3cd542448d1aacfa4b Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Thu, 6 Mar 2025 13:43:20 +0545
Subject: [PATCH 10/10] feat: add enter key support for domain input

---
 app/dashboard/applications/[id]/page.tsx | 34 ++++++++++++++++--------
 app/dashboard/page.tsx                   |  6 +++++
 app/dashboard/teams/[id]/page.tsx        |  2 +-
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/app/dashboard/applications/[id]/page.tsx b/app/dashboard/applications/[id]/page.tsx
index 6516f87..c3bd6c9 100644
--- a/app/dashboard/applications/[id]/page.tsx
+++ b/app/dashboard/applications/[id]/page.tsx
@@ -50,7 +50,7 @@ export default function ApplicationDetailsPage({
   const deleteAppMutation = trpc.deleteApplication.useMutation({
     onSuccess: () => {
       toast.success("Application deleted successfully");
-      router.push("/dashboard");
+      router.push("/dashboard?tab=applications");
       utils.listApplications.invalidate();
     },
     onError: (error) => {
@@ -190,16 +190,22 @@ export default function ApplicationDetailsPage({
 
                 <div>
                   <h3 className="text-sm font-medium text-gray-700">Domains</h3>
-                  <div className="mt-2 flex flex-wrap gap-2">
-                    {app.domains.map((domain) => (
-                      <span
-                        key={domain}
-                        className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
-                      >
-                        {domain}
-                      </span>
-                    ))}
-                  </div>
+                  {app.domains.length > 0 ? (
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {app.domains.map((domain) => (
+                        <span
+                          key={domain}
+                          className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-100 text-blue-800"
+                        >
+                          {domain}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-500">
+                      No domains added
+                    </span>
+                  )}
                 </div>
               </div>
             )}
@@ -253,6 +259,12 @@ export default function ApplicationDetailsPage({
                       type="text"
                       value={newDomain}
                       onChange={(e) => setNewDomain(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleAddDomain();
+                        }
+                      }}
                       placeholder="example.com"
                       className={inputStyles}
                     />
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 22c99fb..0a00f03 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -504,6 +504,12 @@ function ApplicationsView() {
                   type="text"
                   value={newDomain}
                   onChange={(e) => setNewDomain(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleAddDomain();
+                    }
+                  }}
                   placeholder="example.com"
                   className={inputStyles}
                 />
diff --git a/app/dashboard/teams/[id]/page.tsx b/app/dashboard/teams/[id]/page.tsx
index 827359b..cac1b35 100644
--- a/app/dashboard/teams/[id]/page.tsx
+++ b/app/dashboard/teams/[id]/page.tsx
@@ -42,7 +42,7 @@ export default function TeamDetailsPage({
   const deleteTeamMutation = trpc.deleteTeam.useMutation({
     onSuccess: () => {
       toast.success("Team deleted successfully");
-      router.push("/dashboard");
+      router.push("/dashboard?tab=teams");
       utils.listTeams.invalidate();
     },
     onError: (error) => {