From 52fa7df6b29d6389479957cd32d98e2c869f82de Mon Sep 17 00:00:00 2001
From: Tars919 <tars.raj@gmail.com>
Date: Fri, 17 Apr 2026 16:29:57 -0400
Subject: [PATCH 1/2] feat: connect onboarding frontend to PUT
 /users/:id/onboard endpoint

---
 clients/shared/src/index.ts                   |  1 +
 .../components/onboarding/InviteTeamStep.tsx  | 25 +++++++-----
 .../components/onboarding/OnboardingPage.tsx  | 40 ++++++++++++++++++-
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/clients/shared/src/index.ts b/clients/shared/src/index.ts
index ad2502c18..403e7fa6c 100644
--- a/clients/shared/src/index.ts
+++ b/clients/shared/src/index.ts
@@ -178,3 +178,4 @@ export {
   useMarkAllNotificationsRead,
   usePostDeviceToken,
 } from "./api/notifications";
+export { usePutUsersIdOnboard } from "./api/generated/endpoints/users/users";
\ No newline at end of file
diff --git a/clients/web/src/components/onboarding/InviteTeamStep.tsx b/clients/web/src/components/onboarding/InviteTeamStep.tsx
index 26a155aa5..75725b153 100644
--- a/clients/web/src/components/onboarding/InviteTeamStep.tsx
+++ b/clients/web/src/components/onboarding/InviteTeamStep.tsx
@@ -5,11 +5,17 @@ import type { OnboardingFormData } from "./types";
 type InviteTeamStepProps = {
   formData: OnboardingFormData;
   updateForm: (updates: Partial<OnboardingFormData>) => void;
+  onNext: () => void;
+  isSubmitting?: boolean;
 };
 
-export function InviteTeamStep({ formData, updateForm }: InviteTeamStepProps) {
+export function InviteTeamStep({
+  formData,
+  updateForm,
+  onNext,
+  isSubmitting,
+}: InviteTeamStepProps) {
   const [invited, setInvited] = useState(false);
-
   return (
     <div className="flex w-screen h-screen">
       <LeftPanel />
@@ -18,7 +24,6 @@ export function InviteTeamStep({ formData, updateForm }: InviteTeamStepProps) {
           <div className="w-[90%] max-w-[35.4375rem] flex flex-col items-center gap-6">
             {/* Logo */}
             <div className="w-20 h-20 border border-text-default rounded-lg bg-bg-primary shrink-0" />
-
             {/* Header */}
             <div className="flex flex-col items-center gap-2 text-center">
               <h1 className="font-normal text-[clamp(1.25rem,2.5vw,1.5rem)] leading-8 text-text-heading m-0">
@@ -28,7 +33,6 @@ export function InviteTeamStep({ formData, updateForm }: InviteTeamStepProps) {
                 SelfServe is better when the whole staff is connected.
               </p>
             </div>
-
             {/* Email input */}
             <div className="flex flex-col gap-2 w-full">
               <div className="w-full flex items-center gap-2 bg-bg-input rounded-lg px-3 py-2 box-border">
@@ -56,17 +60,18 @@ export function InviteTeamStep({ formData, updateForm }: InviteTeamStepProps) {
                 You can also do this later from your settings.
               </p>
             </div>
-
             {/* Actions */}
             <div className="flex flex-col gap-3 items-center w-full">
               <button
-                onClick={() => console.log("Go to dashboard")}
-                className="w-full h-14 rounded-[0.875rem] bg-primary text-bg-primary border-none text-base"
+                onClick={onNext}
+                disabled={isSubmitting}
+                className="w-full h-14 rounded-[0.875rem] bg-primary text-bg-primary border-none text-base disabled:opacity-50"
               >
-                Go to Dashboard
+                {isSubmitting ? "Setting up..." : "Go to Dashboard"}
               </button>
               <button
-                onClick={() => console.log("Skip for now")}
+                onClick={onNext}
+                disabled={isSubmitting}
                 className="text-sm text-text-muted bg-transparent border-none"
               >
                 Skip for now
@@ -77,4 +82,4 @@ export function InviteTeamStep({ formData, updateForm }: InviteTeamStepProps) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/clients/web/src/components/onboarding/OnboardingPage.tsx b/clients/web/src/components/onboarding/OnboardingPage.tsx
index 3fe2be050..94c5cbc01 100644
--- a/clients/web/src/components/onboarding/OnboardingPage.tsx
+++ b/clients/web/src/components/onboarding/OnboardingPage.tsx
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { useAuth } from "@clerk/clerk-react";
+import { useNavigate } from "@tanstack/react-router";
 import { WelcomeStep } from "./WelcomeStep";
 import { RoleSelectionStep } from "./RoleSelectionStep";
 import { EmployeeRoleStep } from "./EmployeeRoleStep";
@@ -26,6 +28,10 @@ export function OnboardingPage() {
   const [currentStep, setCurrentStep] = useState<Step>("welcome");
   const [formData, setFormData] =
     useState<OnboardingFormData>(INITIAL_FORM_DATA);
+  const [isPending, setIsPending] = useState(false);
+
+  const { userId, getToken } = useAuth();
+  const navigate = useNavigate();
 
   const updateForm = (updates: Partial<OnboardingFormData>) => {
     setFormData((prev) => ({ ...prev, ...updates }));
@@ -40,6 +46,29 @@ export function OnboardingPage() {
     }
   };
 
+  const handleSubmit = async () => {
+    if (!userId) return;
+    setIsPending(true);
+    try {
+      const token = await getToken();
+      await fetch(`${process.env.API_BASE_URL}/users/${userId}/onboard`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          role: formData.role ?? undefined,
+          hotel_name: formData.hotelName || undefined,
+          department: formData.employeeRole ?? undefined,
+        }),
+      });
+      navigate({ to: "/" });
+    } finally {
+      setIsPending(false);
+    }
+  };
+
   const renderStep = () => {
     switch (currentStep) {
       case "welcome":
@@ -75,9 +104,16 @@ export function OnboardingPage() {
           />
         );
       case "inviteTeam":
-        return <InviteTeamStep formData={formData} updateForm={updateForm} />;
+        return (
+          <InviteTeamStep
+            formData={formData}
+            updateForm={updateForm}
+            onNext={handleSubmit}
+            isSubmitting={isPending}
+          />
+        );
     }
   };
 
   return <div>{renderStep()}</div>;
-}
+}
\ No newline at end of file

From d53f6c29b3af3c0f90a9da716d52ccd0e9310eb3 Mon Sep 17 00:00:00 2001
From: Tars919 <tars.raj@gmail.com>
Date: Fri, 17 Apr 2026 16:47:53 -0400
Subject: [PATCH 2/2] fix: prettier formatting

---
 clients/web/src/components/onboarding/InviteTeamStep.tsx | 2 +-
 clients/web/src/components/onboarding/OnboardingPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/clients/web/src/components/onboarding/InviteTeamStep.tsx b/clients/web/src/components/onboarding/InviteTeamStep.tsx
index 75725b153..6b90fe5f0 100644
--- a/clients/web/src/components/onboarding/InviteTeamStep.tsx
+++ b/clients/web/src/components/onboarding/InviteTeamStep.tsx
@@ -82,4 +82,4 @@ export function InviteTeamStep({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/clients/web/src/components/onboarding/OnboardingPage.tsx b/clients/web/src/components/onboarding/OnboardingPage.tsx
index 94c5cbc01..c31f45144 100644
--- a/clients/web/src/components/onboarding/OnboardingPage.tsx
+++ b/clients/web/src/components/onboarding/OnboardingPage.tsx
@@ -116,4 +116,4 @@ export function OnboardingPage() {
   };
 
   return <div>{renderStep()}</div>;
-}
\ No newline at end of file
+}