+
Hi There!
+
+ It seems like you already completed the onboarding process.
+
+
+ {/* Back to App */}
+
+
+
+
+);
+export default CompletedOnboarding;
diff --git a/src/components/dashboard/onboarding/onboarding-form.tsx b/src/components/dashboard/onboarding/onboarding-form.tsx
new file mode 100644
index 0000000..df8f5b3
--- /dev/null
+++ b/src/components/dashboard/onboarding/onboarding-form.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { ReactElement, useState } from "react";
+import { BriefcaseIcon, ClipboardIcon } from "@heroicons/react/24/outline";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { motion } from "framer-motion";
+import { apiRequest } from "@/lib/api";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store-props";
+import { Session } from "@/app/types/user/session";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { User } from "@/app/types/user/user";
+
+/**
+ * Define the various stages of onboarding.
+ */
+const organizationName = z.string().min(2, "You need a longer org name!!!");
+const stages: OnboardingStage[] = [
+ {
+ name: "Onboarding",
+ description:
+ "Welcome to Pulse App! To get started, first create your organization!",
+ schema: z.object({
+ organizationName,
+ }),
+ },
+ {
+ name: "Status Page",
+ description:
+ "Next, create your status page and jump right into the app!",
+ schema: z.object({
+ organizationName,
+ statusPageName: z
+ .string()
+ .min(2, "You need a longer status page name!!!"),
+ }),
+ },
+];
+
+/**
+ * The form to complete the
+ * onboarding process for a user.
+ *
+ * @return the form jsx
+ */
+const OnboardingForm = (): ReactElement => {
+ const session: Session | undefined = useUserContext(
+ (state: UserState) => state.session
+ );
+ const user: User | undefined = useUserContext(
+ (state: UserState) => state.user
+ );
+ const [stage, setStage] = useState