feat: Onboarding / Auth Flow Frontend

clients/web/src/components/onboarding/EmployeeRoleStep.tsx

@@ -0,0 +1,52 @@
+import { LeftPanel } from "./LeftPanel";
+import { ROLES } from "./onboardingMocks";
+import { RoleCard } from "./RoleCard";
+import type { OnboardingFormData } from "./types";
+
+type EmployeeRoleStepProps = {
+  formData: OnboardingFormData;
+  updateForm: (updates: Partial<OnboardingFormData>) => void;
+  onNext: () => void;
+  onBack: () => void;
+};
+
+export function EmployeeRoleStep({
+  formData,
+  updateForm,
+  onNext,
+}: EmployeeRoleStepProps) {
+  return (
+    <div className="flex w-screen h-screen">
+      <LeftPanel />
+      <div className="flex-1 flex justify-center items-start pt-[clamp(5rem,19.45vh,11.9375rem)] px-[clamp(2.5rem,9.6vw,8.25rem)] overflow-hidden">
+        <div className="w-full max-w-[41.4375rem] h-[clamp(25rem,66.4vh,40.75rem)] overflow-hidden rounded-[1.5rem] box-border border border-text-default bg-bg-primary flex flex-col items-center p-12 gap-12">
+          {/* Header */}
+          <div className="flex flex-col gap-2 text-center">
+            <h1 className="text-text-default text-2xl font-normal leading-8 m-0">
+              Employee Role
+            </h1>
+            <p className="text-text-subtle text-base font-normal leading-6 m-0">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+          </div>
+
+          {/* 2x2 grid */}
+          <div className="grid grid-cols-2 gap-4 w-full flex-1">
+            {ROLES.map((role) => (
+              <RoleCard
+                key={role.id}
+                label={role.label}
+                description={role.description}
+                selected={formData.employeeRole === role.id}
+                onSelect={() => {
+                  updateForm({ employeeRole: role.id });
+                  onNext();
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

clients/web/src/components/onboarding/InviteTeamStep.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { LeftPanel } from "./LeftPanel";
+import type { OnboardingFormData } from "./types";
+
+type InviteTeamStepProps = {
+  formData: OnboardingFormData;
+  updateForm: (updates: Partial<OnboardingFormData>) => void;
+};
+
+export function InviteTeamStep({ formData, updateForm }: InviteTeamStepProps) {
+  const [invited, setInvited] = useState(false);
+
+  return (
+    <div className="flex w-screen h-screen">
+      <LeftPanel />
+      <div className="flex-1 flex justify-center items-start pt-[clamp(5rem,19.45vh,11.9375rem)] px-[clamp(2.5rem,9.6vw,8.25rem)] overflow-hidden">
+        <div className="w-full max-w-[41.4375rem] h-[clamp(28.125rem,63.64vh,39.0625rem)] overflow-hidden border border-text-default rounded-[1.5rem] bg-bg-primary box-border flex items-center justify-center">
+          <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">
+                Invite your team
+              </h1>
+              <p className="font-normal text-[clamp(0.8125rem,1.6vw,1rem)] leading-6 text-text-muted m-0">
+                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">
+                <div className="w-6 h-6 rounded-full bg-bg-avatar shrink-0" />
+                <input
+                  type="email"
+                  value={formData.inviteEmail}
+                  onChange={(e) => updateForm({ inviteEmail: e.target.value })}
+                  placeholder="Enter email address..."
+                  className="flex-1 bg-transparent border-none outline-none text-sm"
+                />
+                <button
+                  onClick={() => setInvited(true)}
+                  className="text-sm font-semibold text-text-heading bg-transparent border-none"
+                >
+                  Invite
+                </button>
+              </div>
+              {invited && (
+                <p className="text-xs text-success-stroke text-center m-0">
+                  Invite sent!
+                </p>
+              )}
+              <p className="text-xs text-text-muted text-center m-0">
+                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"
+              >
+                Go to Dashboard
+              </button>
+              <button
+                onClick={() => console.log("Skip for now")}
+                className="text-sm text-text-muted bg-transparent border-none"
+              >
+                Skip for now
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

clients/web/src/components/onboarding/LeftPanel.tsx

@@ -0,0 +1,15 @@
+export function LeftPanel() {
+  return (
+    <div className="relative bg-bg-primary shrink-0 w-[36.47vw] h-screen border-r border-text-default overflow-hidden">
+      <div className="absolute bottom-[11.6vh] left-[9.8%] w-[78.8%] flex flex-col gap-2">
+        <span className="font-bold text-[1.5rem] leading-8 tracking-[-0.070625rem]">
+          SelfServe
+        </span>
+        <p className="font-medium italic text-[clamp(0.75rem,1.5vw,1.25rem)] leading-[1.6] m-0">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus
+          nunc, ullamcorper vitae risus vel, tristique vehicula lectus.
+        </p>
+      </div>
+    </div>
+  );
+}

clients/web/src/components/onboarding/OnboardingPage.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { WelcomeStep } from "./WelcomeStep";
+import { RoleSelectionStep } from "./RoleSelectionStep";
+import { EmployeeRoleStep } from "./EmployeeRoleStep";
+import { PropertyDetailsStep } from "./PropertyDetailsStep";
+import { InviteTeamStep } from "./InviteTeamStep";
+import type { OnboardingFormData } from "./types";
+
+const INITIAL_FORM_DATA: OnboardingFormData = {
+  role: null,
+  employeeRole: null,
+  hotelName: "",
+  numberOfRooms: "",
+  propertyType: "",
+  inviteEmail: "",
+};
+
+type Step =
+  | "welcome"
+  | "role"
+  | "employeeRole"
+  | "propertyDetails"
+  | "inviteTeam";
+
+export function OnboardingPage() {
+  const [currentStep, setCurrentStep] = useState<Step>("welcome");
+  const [formData, setFormData] =
+    useState<OnboardingFormData>(INITIAL_FORM_DATA);
+
+  const updateForm = (updates: Partial<OnboardingFormData>) => {
+    setFormData((prev) => ({ ...prev, ...updates }));
+  };
+
+  const handleRoleSelected = (role: string) => {
+    updateForm({ role });
+    if (role === "employee") {
+      setCurrentStep("employeeRole");
+    } else {
+      setCurrentStep("propertyDetails");
+    }
+  };
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case "welcome":
+        return <WelcomeStep onNext={() => setCurrentStep("role")} />;
+      case "role":
+        return (
+          <RoleSelectionStep
+            formData={formData}
+            updateForm={updateForm}
+            onNext={handleRoleSelected}
+          />
+        );
+      case "employeeRole":
+        return (
+          <EmployeeRoleStep
+            formData={formData}
+            updateForm={updateForm}
+            onNext={() => setCurrentStep("propertyDetails")}
+            onBack={() => setCurrentStep("role")}
+          />
+        );
+      case "propertyDetails":
+        return (
+          <PropertyDetailsStep
+            formData={formData}
+            updateForm={updateForm}
+            onNext={() => setCurrentStep("inviteTeam")}
+            onBack={() =>
+              setCurrentStep(
+                formData.role === "employee" ? "employeeRole" : "role",
+              )
+            }
+          />
+        );
+      case "inviteTeam":
+        return <InviteTeamStep formData={formData} updateForm={updateForm} />;
+    }
+  };
+
+  return <div>{renderStep()}</div>;
+}

clients/web/src/components/onboarding/PropertyDetailsStep.tsx

@@ -0,0 +1,116 @@
+import { LeftPanel } from "./LeftPanel";
+import type { OnboardingFormData } from "./types";
+
+type PropertyDetailsStepProps = {
+  formData: OnboardingFormData;
+  updateForm: (updates: Partial<OnboardingFormData>) => void;
+  onNext: () => void;
+  onBack: () => void;
+};
+
+const PROPERTY_TYPES = [
+  "Hotel",
+  "Motel",
+  "Resort",
+  "Bed & Breakfast",
+  "Hostel",
+];
+
+export function PropertyDetailsStep({
+  formData,
+  updateForm,
+  onNext,
+  onBack,
+}: PropertyDetailsStepProps) {
+  const isValid =
+    formData.hotelName && formData.numberOfRooms && formData.propertyType;
+
+  return (
+    <div className="flex w-screen h-screen">
+      <LeftPanel />
+      <div className="flex-1 flex justify-center items-start pt-[clamp(5rem,19.45vh,11.9375rem)] px-[clamp(2.5rem,9.6vw,8.25rem)] overflow-hidden">
+        <div className="w-full max-w-[41.4375rem] h-[clamp(31.25rem,71.79vh,44.0625rem)] overflow-hidden border border-[var(--color-text-default)] rounded-[1.5rem] bg-[var(--color-bg-primary)] flex flex-col items-center justify-center p-12 box-border">
+          <div className="w-[16.0425rem] flex flex-col items-center gap-8">
+            {/* Header */}
+            <div className="flex flex-col gap-1 text-center">
+              <h1 className="font-normal text-[clamp(1.25rem,2.5vw,1.5rem)] leading-8 text-[var(--color-text-heading)] m-0">
+                Property Details
+              </h1>
+              <p className="font-normal text-[clamp(0.8125rem,1.6vw,1rem)] leading-6 text-[var(--color-text-muted)] m-0">
+                Lorem ipsum dolor sit amet.
+              </p>
+            </div>
+
+            {/* Form fields */}
+            <div className="flex flex-col gap-4 w-full">
+              <div className="flex flex-col gap-1">
+                <label className="text-sm text-[var(--color-text-heading)]">
+                  Hotel Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.hotelName}
+                  onChange={(e) => updateForm({ hotelName: e.target.value })}
+                  placeholder="Lorem ipsum dolor sit amet"
+                  className="border border-[var(--color-stroke-subtle)] rounded-lg px-3 py-2 text-sm outline-none w-full box-border"
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-sm text-[var(--color-text-heading)]">
+                  Number of Rooms
+                </label>
+                <input
+                  type="number"
+                  value={formData.numberOfRooms}
+                  onChange={(e) =>
+                    updateForm({ numberOfRooms: e.target.value })
+                  }
+                  placeholder="e.g. 150"
+                  className="border border-[var(--color-stroke-subtle)] rounded-lg px-3 py-2 text-sm outline-none w-full box-border"
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-sm text-[var(--color-text-heading)]">
+                  Property Type
+                </label>
+                <select
+                  value={formData.propertyType}
+                  onChange={(e) => updateForm({ propertyType: e.target.value })}
+                  className="border border-[var(--color-stroke-subtle)] rounded-lg px-3 py-2 text-sm outline-none bg-[var(--color-bg-primary)] w-full box-border"
+                >
+                  <option value="">Select a type</option>
+                  {PROPERTY_TYPES.map((t) => (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex flex-col gap-3 items-center w-full">
+              <button
+                onClick={onNext}
+                disabled={!isValid}
+                className={`w-full h-14 rounded-[0.875rem] text-[var(--color-bg-primary)] border-none text-base ${
+                  isValid
+                    ? "bg-[var(--color-primary)] cursor-pointer"
+                    : "bg-[var(--color-primary-hover)] cursor-not-allowed"
+                }`}
+              >
+                Continue
+              </button>
+              <button
+                onClick={onBack}
+                className="text-sm text-[var(--color-text-muted)] bg-transparent border-none"
+              >
+                ‹ Back
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

clients/web/src/components/onboarding/RoleCard.tsx

@@ -0,0 +1,28 @@
+type RoleCardProps = {
+  label: string;
+  description: string;
+  selected: boolean;
+  onSelect: () => void;
+};
+
+export function RoleCard({
+  label,
+  description,
+  selected,
+  onSelect,
+}: RoleCardProps) {
+  return (
+    <button
+      onClick={onSelect}
+      className={`p-4 rounded-xl border-2 text-left transition-colors w-full bg-bg-primary
+        ${selected ? "border-primary" : "border-stroke-subtle hover:border-stroke-default"}`}
+    >
+      <p className="text-[clamp(0.75rem,1.2vw,1rem)] font-medium text-text-default m-0">
+        {label}
+      </p>
+      <p className="text-[clamp(0.625rem,1vw,0.875rem)] text-text-subtle mt-1 m-0">
+        {description}
+      </p>
+    </button>
+  );
+}