From 1518ef9c81d44b4f85d1e6687a1d375d52a9eb57 Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Wed, 26 Mar 2025 15:35:40 -0400
Subject: [PATCH 1/3] refactor: clean up create-organization-form component for
 improved readability and maintainability

---
 .../forms/create-organization-form.tsx        | 494 +++++++++---------
 1 file changed, 247 insertions(+), 247 deletions(-)

diff --git a/apps/app/src/components/forms/create-organization-form.tsx b/apps/app/src/components/forms/create-organization-form.tsx
index a49c1cde4d..ffc7b66540 100644
--- a/apps/app/src/components/forms/create-organization-form.tsx
+++ b/apps/app/src/components/forms/create-organization-form.tsx
@@ -5,16 +5,16 @@ import { organizationSchema } from "@/actions/schema";
 import { useI18n } from "@/locales/client";
 import { Button } from "@bubba/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@bubba/ui/form";
 import { Input } from "@bubba/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowRight, Loader2 } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useAction } from "next-safe-action/hooks";
 import { useEffect, useRef, useState } from "react";
@@ -31,265 +31,265 @@ import { useRouter } from "next/navigation";
 import { LogoSpinner } from "../logo-spinner";
 
 function RealtimeStatus({
-	runId,
-	publicAccessToken,
-	newOrganization,
+  runId,
+  publicAccessToken,
+  newOrganization,
 }: {
-	runId: string;
-	publicAccessToken: string;
-	newOrganization: Pick<Organization, "id" | "name"> | null;
+  runId: string;
+  publicAccessToken: string;
+  newOrganization: Pick<Organization, "id" | "name"> | null;
 }) {
-	const t = useI18n();
-	const router = useRouter();
+  const t = useI18n();
+  const router = useRouter();
 
-	const { run, error } = useRealtimeRun(runId, {
-		accessToken: publicAccessToken,
-		onComplete: (run, error) => {
-			if (error) {
-				toast.error(t("common.actions.error"), { duration: 5000 });
-				return;
-			}
-		},
-	});
+  const { run, error } = useRealtimeRun(runId, {
+    accessToken: publicAccessToken,
+    onComplete: (run, error) => {
+      if (error) {
+        toast.error(t("common.actions.error"), { duration: 5000 });
+        return;
+      }
+    },
+  });
 
-	useEffect(() => {
-		if (run?.status === "COMPLETED" && newOrganization) {
-			router.push(`/${newOrganization.id}`);
-		}
-	}, [run, router, newOrganization]);
+  useEffect(() => {
+    if (run?.status === "COMPLETED" && newOrganization) {
+      router.push("/");
+    }
+  }, [run, router, newOrganization]);
 
-	return (
-		<div className="flex flex-col justify-center space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
-			{run?.status !== "FAILED" && run?.status !== "COMPLETED" && (
-				<div className="flex flex-col gap-2 justify-center">
-					<LogoSpinner />
-					<h2 className="text-xl font-semibold text-center tracking-tight">
-						{t("onboarding.trigger.title")}
-					</h2>
-					<p className="text-center text-sm text-muted-foreground">
-						{t("onboarding.trigger.creating")}
-					</p>
-				</div>
-			)}
-		</div>
-	);
+  return (
+    <div className="flex flex-col justify-center space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
+      {run?.status !== "FAILED" && run?.status !== "COMPLETED" && (
+        <div className="flex flex-col gap-2 justify-center">
+          <LogoSpinner />
+          <h2 className="text-xl font-semibold text-center tracking-tight">
+            {t("onboarding.trigger.title")}
+          </h2>
+          <p className="text-center text-sm text-muted-foreground">
+            {t("onboarding.trigger.creating")}
+          </p>
+        </div>
+      )}
+    </div>
+  );
 }
 
 function OnboardingClient({ frameworks }: { frameworks: Framework[] }) {
-	const t = useI18n();
-	const { data: session } = useSession();
-	const [runId, setRunId] = useState<string | null>(null);
-	const [publicAccessToken, setPublicAccessToken] = useState<string | null>(
-		null,
-	);
-	const newOrganizationRef = useRef<Pick<Organization, "id" | "name"> | null>(
-		null,
-	);
+  const t = useI18n();
+  const { data: session } = useSession();
+  const [runId, setRunId] = useState<string | null>(null);
+  const [publicAccessToken, setPublicAccessToken] = useState<string | null>(
+    null,
+  );
+  const newOrganizationRef = useRef<Pick<Organization, "id" | "name"> | null>(
+    null,
+  );
 
-	const createOrganization = useAction(createOrganizationAction, {
-		onSuccess: async (data) => {
-			setRunId(data.data?.runId ?? null);
-			setPublicAccessToken(data.data?.publicAccessToken ?? null);
-			newOrganizationRef.current = data.data?.newOrganization ?? null;
-		},
-		onError: () => {
-			toast.error(t("common.actions.error"), { duration: 5000 });
-		},
-	});
+  const createOrganization = useAction(createOrganizationAction, {
+    onSuccess: async (data) => {
+      setRunId(data.data?.runId ?? null);
+      setPublicAccessToken(data.data?.publicAccessToken ?? null);
+      newOrganizationRef.current = data.data?.newOrganization ?? null;
+    },
+    onError: () => {
+      toast.error(t("common.actions.error"), { duration: 5000 });
+    },
+  });
 
-	const form = useForm<z.infer<typeof organizationSchema>>({
-		resolver: zodResolver(organizationSchema),
-		defaultValues: {
-			fullName: session?.user?.name ?? "",
-			name: "",
-			website: "",
-			frameworks: [],
-		},
-		mode: "onChange",
-	});
+  const form = useForm<z.infer<typeof organizationSchema>>({
+    resolver: zodResolver(organizationSchema),
+    defaultValues: {
+      fullName: session?.user?.name ?? "",
+      name: "",
+      website: "",
+      frameworks: [],
+    },
+    mode: "onChange",
+  });
 
-	const onSubmit = async (data: z.infer<typeof organizationSchema>) => {
-		createOrganization.execute(data);
-	};
+  const onSubmit = async (data: z.infer<typeof organizationSchema>) => {
+    createOrganization.execute(data);
+  };
 
-	if (runId && publicAccessToken) {
-		return (
-			<div className="flex min-h-screen items-center justify-center bg-background p-6 md:p-8">
-				<div className="relative w-full max-w-[440px] border bg-card p-8 shadow-lg">
-					<RealtimeStatus
-						runId={runId}
-						publicAccessToken={publicAccessToken}
-						newOrganization={newOrganizationRef.current}
-					/>
-				</div>
-			</div>
-		);
-	}
+  if (runId && publicAccessToken) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6 md:p-8">
+        <div className="relative w-full max-w-[440px] border bg-card p-8 shadow-lg">
+          <RealtimeStatus
+            runId={runId}
+            publicAccessToken={publicAccessToken}
+            newOrganization={newOrganizationRef.current}
+          />
+        </div>
+      </div>
+    );
+  }
 
-	return (
-		<div className="flex min-h-screen items-center justify-center bg-background p-6 md:p-8">
-			<div className="relative w-full max-w-[440px] border bg-card p-8 shadow-lg">
-				<div className="mb-8 flex justify-between">
-					<Link href="/">
-						<Icons.Logo />
-					</Link>
-				</div>
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-6 md:p-8">
+      <div className="relative w-full max-w-[440px] border bg-card p-8 shadow-lg">
+        <div className="mb-8 flex justify-between">
+          <Link href="/">
+            <Icons.Logo />
+          </Link>
+        </div>
 
-				<div className="mb-8 space-y-2">
-					<h1 className="text-2xl font-semibold tracking-tight">
-						{t("onboarding.setup")}
-					</h1>
-					<p className="text-sm text-muted-foreground">
-						{t("onboarding.description")}
-					</p>
-				</div>
+        <div className="mb-8 space-y-2">
+          <h1 className="text-2xl font-semibold tracking-tight">
+            {t("onboarding.setup")}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {t("onboarding.description")}
+          </p>
+        </div>
 
-				<Form {...form}>
-					<form
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="space-y-6"
-						suppressHydrationWarning
-					>
-						<FormField
-							control={form.control}
-							name="fullName"
-							render={({ field }) => (
-								<FormItem className="space-y-2">
-									<FormLabel className="text-sm font-medium">
-										{t("onboarding.fields.fullName.label")}
-									</FormLabel>
-									<FormControl>
-										<Input
-											autoCorrect="off"
-											placeholder={t("onboarding.fields.fullName.placeholder")}
-											suppressHydrationWarning
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage className="text-xs" />
-								</FormItem>
-							)}
-						/>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-6"
+            suppressHydrationWarning
+          >
+            <FormField
+              control={form.control}
+              name="fullName"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel className="text-sm font-medium">
+                    {t("onboarding.fields.fullName.label")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      autoCorrect="off"
+                      placeholder={t("onboarding.fields.fullName.placeholder")}
+                      suppressHydrationWarning
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className="text-xs" />
+                </FormItem>
+              )}
+            />
 
-						<FormField
-							control={form.control}
-							name="name"
-							render={({ field }) => (
-								<FormItem className="space-y-2">
-									<FormLabel className="text-sm font-medium">
-										{t("onboarding.fields.name.label")}
-									</FormLabel>
-									<FormControl>
-										<Input
-											autoCorrect="off"
-											placeholder={t("onboarding.fields.name.placeholder")}
-											suppressHydrationWarning
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage className="text-xs" />
-								</FormItem>
-							)}
-						/>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel className="text-sm font-medium">
+                    {t("onboarding.fields.name.label")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      autoCorrect="off"
+                      placeholder={t("onboarding.fields.name.placeholder")}
+                      suppressHydrationWarning
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className="text-xs" />
+                </FormItem>
+              )}
+            />
 
-						<FormField
-							control={form.control}
-							name="website"
-							render={({ field }) => (
-								<FormItem className="space-y-2">
-									<FormLabel className="text-sm font-medium">
-										{t("onboarding.fields.website.label")}
-									</FormLabel>
-									<FormControl>
-										<Input
-											autoCorrect="off"
-											placeholder={t("onboarding.fields.website.placeholder")}
-											suppressHydrationWarning
-											{...field}
-										/>
-									</FormControl>
-									<FormMessage className="text-xs" />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="frameworks"
-							render={({ field }) => (
-								<FormItem className="space-y-2">
-									<FormLabel className="text-sm font-medium">
-										{t("frameworks.overview.grid.title")}
-									</FormLabel>
-									<FormControl>
-										<fieldset className="flex flex-col gap-2 select-none">
-											<legend className="sr-only">
-												{t("frameworks.overview.grid.title")}
-											</legend>
-											{frameworks.map((framework) => (
-												<label
-													key={framework.id}
-													htmlFor={`framework-${framework.id}`}
-													className={cn(
-														"relative flex flex-col p-4 border cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 w-full text-left",
-														field.value.includes(framework.id) &&
-															"border-primary bg-primary/5",
-													)}
-												>
-													<div className="flex items-start justify-between">
-														<div>
-															<h3 className="font-semibold">
-																{framework.name}
-															</h3>
-															<p className="text-sm text-muted-foreground mt-1">
-																{framework.description}
-															</p>
-															<p className="text-xs text-muted-foreground/75 mt-2">
-																{`${t("frameworks.overview.grid.version")}: ${framework.version}`}
-															</p>
-														</div>
-														<div>
-															<Checkbox
-																id={`framework-${framework.id}`}
-																checked={field.value.includes(framework.id)}
-																className="mt-1"
-																onCheckedChange={(checked) => {
-																	const newValue = checked
-																		? [...field.value, framework.id]
-																		: field.value.filter(
-																				(id) => id !== framework.id,
-																			);
-																	field.onChange(newValue);
-																}}
-															/>
-														</div>
-													</div>
-												</label>
-											))}
-										</fieldset>
-									</FormControl>
-									<FormMessage className="text-xs" />
-								</FormItem>
-							)}
-						/>
+            <FormField
+              control={form.control}
+              name="website"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel className="text-sm font-medium">
+                    {t("onboarding.fields.website.label")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      autoCorrect="off"
+                      placeholder={t("onboarding.fields.website.placeholder")}
+                      suppressHydrationWarning
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className="text-xs" />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="frameworks"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel className="text-sm font-medium">
+                    {t("frameworks.overview.grid.title")}
+                  </FormLabel>
+                  <FormControl>
+                    <fieldset className="flex flex-col gap-2 select-none">
+                      <legend className="sr-only">
+                        {t("frameworks.overview.grid.title")}
+                      </legend>
+                      {frameworks.map((framework) => (
+                        <label
+                          key={framework.id}
+                          htmlFor={`framework-${framework.id}`}
+                          className={cn(
+                            "relative flex flex-col p-4 border cursor-pointer transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 w-full text-left",
+                            field.value.includes(framework.id) &&
+                            "border-primary bg-primary/5",
+                          )}
+                        >
+                          <div className="flex items-start justify-between">
+                            <div>
+                              <h3 className="font-semibold">
+                                {framework.name}
+                              </h3>
+                              <p className="text-sm text-muted-foreground mt-1">
+                                {framework.description}
+                              </p>
+                              <p className="text-xs text-muted-foreground/75 mt-2">
+                                {`${t("frameworks.overview.grid.version")}: ${framework.version}`}
+                              </p>
+                            </div>
+                            <div>
+                              <Checkbox
+                                id={`framework-${framework.id}`}
+                                checked={field.value.includes(framework.id)}
+                                className="mt-1"
+                                onCheckedChange={(checked) => {
+                                  const newValue = checked
+                                    ? [...field.value, framework.id]
+                                    : field.value.filter(
+                                      (id) => id !== framework.id,
+                                    );
+                                  field.onChange(newValue);
+                                }}
+                              />
+                            </div>
+                          </div>
+                        </label>
+                      ))}
+                    </fieldset>
+                  </FormControl>
+                  <FormMessage className="text-xs" />
+                </FormItem>
+              )}
+            />
 
-						<Button
-							type="submit"
-							className="w-full"
-							disabled={createOrganization.status === "executing"}
-							suppressHydrationWarning
-						>
-							{createOrganization.status === "executing" && (
-								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-							)}
-							{t("onboarding.submit")}
-						</Button>
-					</form>
-				</Form>
-			</div>
-		</div>
-	);
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={createOrganization.status === "executing"}
+              suppressHydrationWarning
+            >
+              {createOrganization.status === "executing" && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              {t("onboarding.submit")}
+            </Button>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
 }
 
 export function Onboarding({ frameworks }: { frameworks: Framework[] }) {
-	return <OnboardingClient frameworks={frameworks} />;
+  return <OnboardingClient frameworks={frameworks} />;
 }

From 8708cecaa12e7ab32e34e180c2c5f423011e539e Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Wed, 26 Mar 2025 15:36:41 -0400
Subject: [PATCH 2/3] fix: update create-organization-form to simplify status
 check logic

---
 apps/app/src/components/forms/create-organization-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/forms/create-organization-form.tsx b/apps/app/src/components/forms/create-organization-form.tsx
index ffc7b66540..fa045dcff1 100644
--- a/apps/app/src/components/forms/create-organization-form.tsx
+++ b/apps/app/src/components/forms/create-organization-form.tsx
@@ -60,7 +60,7 @@ function RealtimeStatus({
 
   return (
     <div className="flex flex-col justify-center space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
-      {run?.status !== "FAILED" && run?.status !== "COMPLETED" && (
+      {run?.status !== "FAILED" && (
         <div className="flex flex-col gap-2 justify-center">
           <LogoSpinner />
           <h2 className="text-xl font-semibold text-center tracking-tight">

From 624c43a5aa51780b5eb293bc3b72d4b08b2984dd Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Wed, 26 Mar 2025 15:36:55 -0400
Subject: [PATCH 3/3] fix

---
 yarn.lock | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9b8f2ddcb7..b8229c2c31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1223,14 +1223,14 @@
     formdata-node "^4.3.2"
     node-fetch "^2.6.7"
 
-"@bubba/analytics@packages/analytics":
+"@bubba/analytics@^workspace:packages/analytics":
   version "workspace:packages/analytics"
   resolved "workspace:packages/analytics"
   dependencies:
     posthog-js "^1.215.3"
     posthog-node "^4.4.1"
 
-"@bubba/app@apps/app", "@bubba/app@workspace:*":
+"@bubba/app@^workspace:apps/app", "@bubba/app@workspace:*":
   version "workspace:apps/app"
   resolved "workspace:apps/app"
   devDependencies:
@@ -1321,11 +1321,11 @@
     yarn "^1.22.22"
     zustand "^5.0.3"
 
-"@bubba/data@packages/data":
+"@bubba/data@^workspace:packages/data":
   version "workspace:packages/data"
   resolved "workspace:packages/data"
 
-"@bubba/db@packages/db", "@bubba/db@workspace:*":
+"@bubba/db@^workspace:packages/db", "@bubba/db@workspace:*":
   version "workspace:packages/db"
   resolved "workspace:packages/db"
   devDependencies:
@@ -1340,7 +1340,7 @@
     "@prisma/extension-accelerate" "^1.2.2"
     prisma "^6.5.0"
 
-"@bubba/email@packages/email":
+"@bubba/email@^workspace:packages/email":
   version "workspace:packages/email"
   resolved "workspace:packages/email"
   devDependencies:
@@ -1360,7 +1360,7 @@
     react-email "3.0.4"
     responsive-react-email "^0.0.5"
 
-"@bubba/integrations@packages/integrations":
+"@bubba/integrations@^workspace:packages/integrations":
   version "workspace:packages/integrations"
   resolved "workspace:packages/integrations"
   devDependencies:
@@ -1382,14 +1382,14 @@
     sharp "^0.33.5"
     zod "^3.24.2"
 
-"@bubba/kv@packages/kv":
+"@bubba/kv@^workspace:packages/kv":
   version "workspace:packages/kv"
   resolved "workspace:packages/kv"
   dependencies:
     "@upstash/redis" "^1.34.2"
     server-only "0.0.1"
 
-"@bubba/notifications@packages/notifications", "@bubba/notifications@workspace:*":
+"@bubba/notifications@^workspace:packages/notifications", "@bubba/notifications@workspace:*":
   version "workspace:packages/notifications"
   resolved "workspace:packages/notifications"
   devDependencies:
@@ -1398,11 +1398,11 @@
     "@novu/node" "^2.0.1"
     nanoid "5.1.0"
 
-"@bubba/tsconfig@packages/tsconfig", "@bubba/tsconfig@workspace:*":
+"@bubba/tsconfig@^workspace:packages/tsconfig", "@bubba/tsconfig@workspace:*":
   version "workspace:packages/tsconfig"
   resolved "workspace:packages/tsconfig"
 
-"@bubba/ui@packages/ui", "@bubba/ui@workspace:*":
+"@bubba/ui@^workspace:packages/ui", "@bubba/ui@workspace:*":
   version "workspace:packages/ui"
   resolved "workspace:packages/ui"
   devDependencies:
@@ -1466,7 +1466,7 @@
     use-callback-ref "^1.3.3"
     vaul "^1.0.0"
 
-"@bubba/utils@packages/utils", "@bubba/utils@workspace:*":
+"@bubba/utils@^workspace:packages/utils", "@bubba/utils@workspace:*":
   version "workspace:packages/utils"
   resolved "workspace:packages/utils"
   devDependencies:
@@ -11325,7 +11325,7 @@ plist@^3.1.0:
     base64-js "^1.5.1"
     xmlbuilder "^15.1.1"
 
-"portal@apps/portal":
+portal@^workspace:apps/portal:
   version "workspace:apps/portal"
   resolved "workspace:apps/portal"
   devDependencies: