Fix organization setup flow: redirect to onboarding for incomplete setup

2025-08-18 10:33:45 -07:00
commit 557b113196
60 changed files with 16246 additions and 0 deletions
--- a/components/figma/FigmaProgress.tsx
+++ b/components/figma/FigmaProgress.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+interface ProgressStepProps {
+    number: number;
+    title: string;
+    isActive?: boolean;
+    isCompleted?: boolean;
+}
+
+interface FigmaProgressProps {
+    steps: ProgressStepProps[];
+    currentStep?: number;
+    className?: string;
+}
+
+const ProgressStep: React.FC<ProgressStepProps> = ({ number, title, isActive = false, isCompleted = false }) => {
+    const stepClasses = isActive
+        ? "p-2 bg-Main-BG-Gray-50 rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
+        : "p-2 bg-Other-White rounded-[10px]";
+
+    const numberClasses = isActive || isCompleted
+        ? "h-5 p-0.5 bg-Brand-Orange rounded-[999px]"
+        : "h-5 p-0.5 bg-bg-white-0 rounded-[999px] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200";
+
+    const numberTextClasses = isActive || isCompleted
+        ? "w-4 text-center justify-start text-Neutrals-NeutralSlate0 text-xs font-medium font-['Inter'] leading-none"
+        : "w-4 text-center justify-start text-Neutrals-NeutralSlate600 text-xs font-medium font-['Inter'] leading-none";
+
+    const titleClasses = isActive
+        ? "flex-1 justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight"
+        : "flex-1 justify-start text-Neutrals-NeutralSlate600 text-sm font-normal font-['Inter'] leading-tight";
+
+    return (
+        <div className={`self-stretch inline-flex justify-start items-center gap-2.5 overflow-hidden ${stepClasses}`}>
+            <div className={`inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${numberClasses}`}>
+                <div className={numberTextClasses}>{number}</div>
+            </div>
+            <div className={titleClasses}>{title}</div>
+        </div>
+    );
+};
+
+export const FigmaProgress: React.FC<FigmaProgressProps> = ({ steps, currentStep = 1, className = '' }) => {
+    return (
+        <div className={`self-stretch inline-flex flex-col justify-start items-start gap-2 ${className}`}>
+            {steps.map((step, index) => (
+                <ProgressStep
+                    key={index}
+                    number={step.number}
+                    title={step.title}
+                    isActive={step.number === currentStep}
+                    isCompleted={step.number < currentStep}
+                />
+            ))}
+        </div>
+    );
+};
+
+// Default onboarding steps as shown in Figma
+export const defaultOnboardingSteps: ProgressStepProps[] = [
+    { number: 1, title: "Company Overview & Vision" },
+    { number: 2, title: "Leadership & Organizational Structure" },
+    { number: 3, title: "Operations & Execution" },
+    { number: 4, title: "Culture & Team Health" },
+    { number: 5, title: "Sales, Marketing & Growth" },
+    { number: 6, title: "Financial Health & Metrics" },
+    { number: 7, title: "Innovation & Product/Service Strategy" },
+    { number: 8, title: "Personal Leadership & Risk" }
+];
+
+export default FigmaProgress;