Refactor/org flow

src/app/create-org/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { CreateOrg } from "@/components/organization/create-org";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { authClient } from "@/lib/auth-client";
+
+export default function CreateOrgPage() {
+  const router = useRouter();
+  const { useActiveOrganization } = authClient;
+  const { data: activeOrganization } = useActiveOrganization();
+
+  const onSuccess = () => {
+    toast.success("Organization created successfully");
+    router.push(`/${activeOrganization?.slug}/localhost/query`);
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <CreateOrg title="Create your organization" onSuccess={onSuccess} />
+    </div>
+  );
+}

src/app/onboarding/create-org/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { CreateOrg } from "@/components/organization/create-org";
+import { authClient } from "@/lib/auth-client";
+
+export default function OnboardingCreateOrgPage() {
+  const { useActiveOrganization } = authClient;
+  const { data: activeOrganization } = useActiveOrganization();
+  const router = useRouter();
+
+  const onSuccess = () => {
+    toast.success("Organization created successfully");
+    router.push(`/${activeOrganization?.slug}/localhost/query`);
+
+    // TODO
+    // router.push("/onboarding/pricing");
+  };
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <CreateOrg title="Create your first organization" onSuccess={onSuccess} />
+    </div>
+  );
+}

src/app/onboarding/page.tsx → src/app/onboarding/pricing/page.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import { useSearchParams } from "next/navigation";
 import OnboardingPricing from "@/components/onboarding/pricing";
 
 export default function OnboardingPage() {
-  const searchParams = useSearchParams();
-  const step = searchParams.get("step");
-
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-black/50 dark:bg-black/70" />

src/app/settings/org/org-setting-form.tsx

@@ -36,6 +36,7 @@ import {
 } from "@/components/ui/select";
 import { Member, Invitation, Organization } from "better-auth/plugins";
 import { User } from "better-auth";
+import { useRouter } from "next/navigation";
 
 interface Role {
   value: "owner" | "admin" | "member";
@@ -74,7 +75,13 @@ export const OrgSettingForm = ({
   activeOrganization,
   user,
 }: OrgSettingFormProps) => {
-  const { organization } = authClient;
+  const router = useRouter();
+  const { organization, useListOrganizations } = authClient;
+  const { data: allOrganizations } = useListOrganizations();
+
+  const isLastOrganization = !!(
+    allOrganizations && allOrganizations.length <= 1
+  );
 
   const [email, setEmail] = useState("");
   const [orgName, setOrgName] = useState("");
@@ -208,14 +215,33 @@ export const OrgSettingForm = ({
   };
 
   const handleDeleteOrg = async () => {
+    if (isLastOrganization) {
+      toast.error(
+        "Cannot delete your last organization. Create a new organization before deleting this one.",
+      );
+      return;
+    }
     setIsDeletingOrg(true);
     await organization.delete(
       {
         organizationId: activeOrganization?.id,
       },
       {
-        onSuccess: () => {
+        onSuccess: async () => {
           toast.success("Organization deleted successfully");
+
+          const remainingOrgs = allOrganizations?.filter(
+            (org) => org.id !== activeOrganization?.id,
+          );
+
+          if (!remainingOrgs || remainingOrgs.length === 0) return;
+
+          await organization.setActive({
+            organizationId: remainingOrgs[0].id,
+          });
+          toast.info(`Switched to ${remainingOrgs[0].name}`);
+          router.refresh();
+
           setIsDeletingOrg(false);
         },
         onError: (error) => {
@@ -534,28 +560,6 @@ export const OrgSettingForm = ({
         </>
       }
 
-      {/* Create New Organization */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Create New Organization</CardTitle>
-          <CardDescription>
-            Create a new organization and become its owner
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex gap-3">
-            <Input
-              placeholder="New organization name"
-              value={orgName}
-              onChange={(e) => setOrgName(e.target.value)}
-            />
-            <Button onClick={handleCreateOrg} disabled={!orgName.trim()}>
-              Create Organization
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
       {/* Danger Zone */}
       {
         <Card className="border-red-200">
@@ -573,14 +577,16 @@ export const OrgSettingForm = ({
                     Delete Organization
                   </p>
                   <p className="text-muted-foreground text-sm">
-                    Permanently delete this organization and all its data
+                    {isLastOrganization
+                      ? "You must have at least one organization. Create another organization before deleting this one."
+                      : "Permanently delete this organization and all its data"}
                   </p>
                 </div>
                 <Button
                   variant="destructive"
                   size="sm"
                   onClick={handleDeleteOrg}
-                  disabled={isDeletingOrg}
+                  disabled={isDeletingOrg || isLastOrganization}
                   className="w-24"
                 >
                   {isDeletingOrg ? (

src/app/settings/org/page.tsx

@@ -1,56 +1,25 @@
 "use client";
 
-import { useMemo } from "react";
 import { authClient } from "@/lib/auth-client";
 import LoadingIndicator from "@/components/loading-indicator";
-import { CreateOrg } from "@/app/settings/org/create-org";
 import { OrgSettingForm } from "@/app/settings/org/org-setting-form";
-import { OrgSwitcher } from "@/components/header/org-switcher";
 
 export default function OrgSettingsPage() {
-  const { useSession, useActiveOrganization, useListOrganizations } =
-    authClient;
+  const { useSession, useActiveOrganization } = authClient;
   const { data: session } = useSession();
   const { data: activeOrganization, isPending: isActiveOrganizationPending } =
     useActiveOrganization();
-  const { data: listOrganizations, isPending: isListOrganizationsPending } =
-    useListOrganizations();
 
-  const render = useMemo(() => {
-    if (!session) return;
+  if (isActiveOrganizationPending) {
+    return <LoadingIndicator />;
+  }
 
-    if (isActiveOrganizationPending || isListOrganizationsPending)
-      return <LoadingIndicator />;
-    if (!activeOrganization) {
-      if (listOrganizations && listOrganizations.length > 0) {
-        return (
-          <div className="flex h-full w-full items-center justify-center">
-            <div className="w-full">
-              <p className="font-semibold">Select an organization first</p>
-              <OrgSwitcher user={session?.user} />
-            </div>
-          </div>
-        );
-      } else {
-        return (
-          <div className="flex h-full w-full items-center justify-center">
-            <CreateOrg />
-          </div>
-        );
-      }
-    }
-    return (
-      <OrgSettingForm
-        activeOrganization={activeOrganization}
-        user={session.user}
-      />
-    );
-  }, [
-    isActiveOrganizationPending,
-    activeOrganization,
-    listOrganizations,
-    session,
-  ]);
+  if (!activeOrganization || !session?.user) return;
 
-  return render;
+  return (
+    <OrgSettingForm
+      activeOrganization={activeOrganization}
+      user={session?.user}
+    />
+  );
 }

src/app/sign-up/page.tsx

@@ -120,7 +120,7 @@ export default function SignUpPage() {
         password,
         name: username,
         username,
-        callbackURL: "/sign-up/success",
+        callbackURL: "/onboarding/create-org",
       },
       {
         onRequest: (ctx) => {

src/components/header/index.tsx

@@ -12,6 +12,8 @@ import { EnvSwitcher } from "@/components/header/env-switcher";
 import { BetaBadge } from "@/components/beta-badge";
 import { Logo } from "@/components/header/logo";
 import { authClient } from "@/lib/auth-client";
+import { useOrganizationStore } from "@/stores/organization-store";
+import { useEffect } from "react";
 
 const navItems = [
   {
@@ -30,11 +32,27 @@ const navItems = [
 ];
 
 export const Header = () => {
-  const { useSession, useActiveOrganization } = authClient;
+  const { useSession, useActiveOrganization, organization } = authClient;
   const { data: session, isPending: isPendingSession } = useSession();
   const { data: activeOrganization } = useActiveOrganization();
   const user = session?.user;
 
+  const { lastActiveOrgId, setLastActiveOrgId } = useOrganizationStore();
+
+  useEffect(() => {
+    if (lastActiveOrgId) {
+      organization.setActive({
+        organizationId: lastActiveOrgId,
+      });
+    }
+  }, [lastActiveOrgId]);
+
+  useEffect(() => {
+    if (activeOrganization) {
+      setLastActiveOrgId(activeOrganization.id);
+    }
+  }, [activeOrganization]);
+
   return (
     <NavigationMenu>
       <NavigationMenuList className="fixed top-0 z-20 flex h-12 w-full items-center justify-between border-b bg-neutral-50 px-5 dark:bg-neutral-950">