bugfix: org invitation flow updated so that the invited org follows the exact steps of free trial registration.

backend/src/modules/organization/dto/accept-organization-invite.dto.ts

@@ -1,4 +1,4 @@
-import { IsString, MinLength } from 'class-validator';
+import { IsEmail, IsEnum, IsString, MinLength } from 'class-validator';
 
 export class AcceptOrganizationInviteDto {
   @IsString()
@@ -9,6 +9,12 @@ export class AcceptOrganizationInviteDto {
   @MinLength(1)
   organizationName: string;
 
+  @IsEmail()
+  organizationEmail: string;
+
+  @IsEnum(['CLINIC', 'LAB'])
+  organizationType: 'CLINIC' | 'LAB';
+
   @IsString()
   @MinLength(1)
   ownerName: string;

backend/src/modules/organization/organization.service.ts

@@ -424,12 +424,23 @@ export class OrganizationService {
 
   async previewInvite(token: string) {
     const invitation = await this.findValidInvitation(token);
+    let organizationEmail = '';
+    if (invitation.invitedOrganizationId) {
+      const invitedOrg = await this.prisma.organization.findUnique({
+        where: { id: invitation.invitedOrganizationId },
+        select: { email: true },
+      });
+      if (invitedOrg?.email && !invitedOrg.email.includes('@dyolink.local')) {
+        organizationEmail = invitedOrg.email;
+      }
+    }
     return {
       success: true,
       data: {
         ownerEmail: invitation.invitedOwnerEmail,
         organizationName: invitation.invitedOrganizationName,
         organizationType: invitation.invitedOrganizationType,
+        organizationEmail,
         inviterOrganizationName: invitation.inviterOrganization.name,
         expiresAt: invitation.expiresAt.toISOString(),
         status: invitation.acceptedAt ? 'ACCEPTED' : 'PENDING',
@@ -443,6 +454,14 @@ export class OrganizationService {
       throw new BadRequestException('This invitation has already been accepted');
     }
 
+    if (dto.organizationType !== invitation.invitedOrganizationType) {
+      throw new BadRequestException(
+        `Organization type must be ${invitation.invitedOrganizationType} for this invitation`,
+      );
+    }
+
+    const organizationEmail = dto.organizationEmail.trim().toLowerCase();
+
     const organization = await this.prisma.$transaction(async (tx) => {
       const passwordHash = await bcrypt.hash(dto.password, 10);
       const ownerEmail = invitation.invitedOwnerEmail;
@@ -470,8 +489,9 @@ export class OrganizationService {
           where: { id: targetOrganizationId },
           data: {
             name: dto.organizationName.trim(),
-            email: ownerEmail,
+            email: organizationEmail,
             owner: { connect: { id: owner.id } },
+            type: { connect: { name: dto.organizationType } },
             plan: { connect: { name: 'trial' } },
           },
         });
@@ -479,9 +499,9 @@ export class OrganizationService {
         const createdOrg = await tx.organization.create({
           data: {
             name: dto.organizationName.trim(),
-            email: ownerEmail,
+            email: organizationEmail,
             owner: { connect: { id: owner.id } },
-            type: { connect: { name: invitation.invitedOrganizationType } },
+            type: { connect: { name: dto.organizationType } },
             plan: { connect: { name: 'trial' } },
           },
         });

frontend/src/app/(public)/accept-organization-invite/page.tsx

@@ -3,15 +3,45 @@
 import { Suspense, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useForm, type FieldErrors, type UseFormRegister, type UseFormSetValue } from 'react-hook-form';
+import type { OrganizationDetailsFormValues } from '@/components/ui/auth/OrganizationDetailsFields';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Lock, Mail, User } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
 import { Input } from '@/components/ui/common/Input';
+import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
+import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
 import { organizationApi } from '@/lib/api/organization';
 
+const acceptOrganizationInviteSchema = z
+  .object({
+    ownerName: z.string().min(2, 'Name must be at least 2 characters'),
+    password: z
+      .string()
+      .min(8, 'Password must be at least 8 characters')
+      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+      .regex(/[0-9]/, 'Password must contain at least one number'),
+    confirmPassword: z.string(),
+    organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
+    organizationEmail: z.string().email('Please enter a valid organization email'),
+    organizationType: z.enum(['CLINIC', 'LAB'], {
+      message: 'Please select organization type',
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
+
+type AcceptOrganizationInviteForm = z.infer<typeof acceptOrganizationInviteSchema>;
+
 function AcceptOrganizationInviteContent() {
   const params = useSearchParams();
   const router = useRouter();
   const token = useMemo(() => params.get('token') || '', [params]);
 
+  const [step, setStep] = useState(1);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
@@ -20,15 +50,29 @@ function AcceptOrganizationInviteContent() {
     ownerEmail: string;
     organizationName: string;
     organizationType: 'CLINIC' | 'LAB';
+    organizationEmail?: string;
     inviterOrganizationName: string;
     expiresAt: string;
     status: 'PENDING' | 'ACCEPTED';
   } | null>(null);
 
-  const [ownerName, setOwnerName] = useState('');
+  const {
-  const [organizationName, setOrganizationName] = useState('');
+    register,
-  const [password, setPassword] = useState('');
+    handleSubmit,
-  const [confirmPassword, setConfirmPassword] = useState('');
+    watch,
+    trigger,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<AcceptOrganizationInviteForm>({
+    resolver: zodResolver(acceptOrganizationInviteSchema),
+    mode: 'onChange',
+    defaultValues: {
+      organizationType: undefined,
+    },
+  });
+
+  const organizationType = watch('organizationType');
 
   useEffect(() => {
     if (!token) {
@@ -43,102 +87,168 @@ function AcceptOrganizationInviteContent() {
       try {
         const res = await organizationApi.previewInvite(token);
         setInviteInfo(res.data);
-        setOrganizationName(res.data.organizationName || '');
+        reset({
+          ownerName: '',
+          password: '',
+          confirmPassword: '',
+          organizationName: res.data.organizationName || '',
+          organizationEmail: res.data.organizationEmail || '',
+          organizationType: res.data.organizationType,
+        });
         if (res.data.status === 'ACCEPTED') {
           setSuccess('This invitation is already accepted. You can log in now.');
         }
-      } catch (e: any) {
+      } catch (e: unknown) {
-        setError(e?.message || 'Could not load invitation');
+        const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
+        setError(message || 'Could not load invitation');
       } finally {
         setLoading(false);
       }
     })();
-  }, [token]);
+  }, [token, reset]);
 
-  async function onAccept() {
+  const handleNext = async () => {
+    const isValid = await trigger(['ownerName', 'password', 'confirmPassword']);
+    if (isValid) {
+      setStep(2);
+      setError('');
+    }
+  };
+
+  const onSubmit = async (data: AcceptOrganizationInviteForm) => {
     if (!token) return;
     setError('');
     setSuccess('');
-    if (!ownerName.trim()) return setError('Owner name is required');
-    if (!organizationName.trim()) return setError('Organization name is required');
-    if (password.length < 8) return setError('Password must be at least 8 characters');
-    if (password !== confirmPassword) return setError('Passwords do not match');
-
     setSubmitting(true);
     try {
       await organizationApi.acceptInvite({
         token,
-        ownerName: ownerName.trim(),
+        ownerName: data.ownerName.trim(),
-        organizationName: organizationName.trim(),
+        password: data.password,
-        password,
+        organizationName: data.organizationName.trim(),
+        organizationEmail: data.organizationEmail.trim(),
+        organizationType: data.organizationType,
       });
-      setSuccess('Invitation Accepted. Redirecting to login...');
+      setSuccess('Invitation accepted. Redirecting to login...');
       setTimeout(() => router.replace('/login'), 1000);
-    } catch (e: any) {
+    } catch (e: unknown) {
-      setError(e?.message || 'Could not accept invitation');
+      const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
+      setError(message || 'Could not accept invitation');
     } finally {
       setSubmitting(false);
     }
-  }
+  };
 
   return (
-    <div className="min-h-screen app-web-bg flex items-center justify-center p-4">
+    <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="w-full max-w-md surface-card p-6 space-y-5">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h1 className="text-xl font-semibold text-text-primary">Accept organization invitation</h1>
+        <Link href="/" className="flex justify-center">
-        {loading ? (
+          <span className="text-3xl font-semibold text-text-primary">DyoLink</span>
-          <p className="text-sm text-text-secondary">Loading invitation...</p>
+        </Link>
-        ) : (
+        <h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
-          <>
+          Accept organization invitation
-            {inviteInfo && (
+        </h2>
-              <div className="rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
+        <p className="mt-2 text-center text-sm text-text-secondary">
-                <p>
+          Already have an account?{' '}
-                  Invited by: <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
+          <Link href="/login" className="font-medium text-primary hover:opacity-90">
-                </p>
+            Sign in
-                <p>
+          </Link>
-                  Owner email: <span className="text-text-primary">{inviteInfo.ownerEmail}</span>
+        </p>
-                </p>
+      </div>
-              </div>
+
-            )}
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-            {error && (
+        <div className="surface-card py-8 px-4 sm:px-10">
-              <div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-300">
+          {loading ? (
-                {error}
+            <p className="text-sm text-text-secondary">Loading invitation...</p>
-              </div>
+          ) : (
-            )}
+            <>
-            {success && (
+              {inviteInfo && (
-              <div className="rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
+                <div className="mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
-                {success}
+                  <p>
-              </div>
+                    Invited by:{' '}
-            )}
+                    <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
-            {inviteInfo?.status !== 'ACCEPTED' && (
+                  </p>
-              <div className="space-y-3">
+                </div>
-                <Input label="Owner name" value={ownerName} onChange={(e) => setOwnerName(e.target.value)} />
+              )}
-                <Input
+
-                  label="Organization name"
+              {inviteInfo?.status !== 'ACCEPTED' && (
-                  value={organizationName}
+                <RegistrationProgressSteps step={step} />
-                  onChange={(e) => setOrganizationName(e.target.value)}
+              )}
-                />
+
-                <Input
+              {error && (
-                  label="Create password"
+                <div className="mb-4 p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
-                  type="password"
+                  <p className="text-sm text-red-600">{error}</p>
-                  value={password}
+                </div>
-                  onChange={(e) => setPassword(e.target.value)}
+              )}
-                />
+              {success && (
-                <Input
+                <div className="mb-4 rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
-                  label="Confirm password"
+                  {success}
-                  type="password"
+                </div>
-                  value={confirmPassword}
+              )}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
+
-                />
+              {inviteInfo?.status !== 'ACCEPTED' && (
-                <Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
+                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-                  Activate organization
+                  {step === 1 && (
-                </Button>
+                    <>
-              </div>
+                      <Input
-            )}
+                        label="Owner email"
-            <p className="text-xs text-text-muted">
+                        value={inviteInfo?.ownerEmail ?? ''}
-              Already have access? <Link href="/login" className="text-primary">Go to login</Link>
+                        readOnly
-            </p>
+                        disabled
-          </>
+                        icon={<Mail className="h-5 w-5 icon-flat" />}
-        )}
+                      />
+                      <Input
+                        label="Full name"
+                        {...register('ownerName')}
+                        placeholder="John Doe"
+                        error={errors.ownerName?.message}
+                        icon={<User className="h-5 w-5 icon-flat" />}
+                      />
+                      <Input
+                        label="Password"
+                        {...register('password')}
+                        type="password"
+                        placeholder="••••••••"
+                        error={errors.password?.message}
+                        icon={<Lock className="h-5 w-5 icon-flat" />}
+                      />
+                      <Input
+                        label="Confirm password"
+                        {...register('confirmPassword')}
+                        type="password"
+                        placeholder="••••••••"
+                        error={errors.confirmPassword?.message}
+                        icon={<Lock className="h-5 w-5 icon-flat" />}
+                      />
+                      <Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
+                        Continue
+                      </Button>
+                    </>
+                  )}
+
+                  {step === 2 && (
+                    <>
+                      <OrganizationDetailsFields
+                        register={register as unknown as UseFormRegister<OrganizationDetailsFormValues>}
+                        errors={errors as FieldErrors<OrganizationDetailsFormValues>}
+                        organizationType={organizationType}
+                        setValue={setValue as unknown as UseFormSetValue<OrganizationDetailsFormValues>}
+                      />
+                      <div className="flex gap-3">
+                        <Button type="button" variant="outline" onClick={() => setStep(1)}>
+                          Back
+                        </Button>
+                        <Button type="submit" variant="primary" isLoading={submitting} fullWidth>
+                          Activate organization
+                        </Button>
+                      </div>
+                    </>
+                  )}
+                </form>
+              )}
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

frontend/src/app/(public)/register/page.tsx

@@ -5,8 +5,10 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import Link from 'next/link';
-import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
+import { Mail, Lock, User } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
+import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
+import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
 import { Button } from '@/components/ui/common/Button';
 import { Input } from '@/components/ui/common/Input';
 const registerSchema = z.object({
@@ -89,31 +91,7 @@ export default function RegisterPage() {
             </div>
             <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
                 <div className="surface-card py-8 px-4 sm:px-10">
-                    {/* Progress Steps */}
+                    <RegistrationProgressSteps step={step} />
-                    <div className="mb-8">
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-center">
-                                <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 1 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
-                                    1
-                                </div>
-                                <div className={`ml-2 text-sm font-medium ${step >= 1 ? 'text-primary' : 'text-text-muted'
-                                    }`}>
-                                    Account
-                                </div>
-                            </div>
-                            <ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
-                            <div className="flex items-center">
-                                <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 2 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
-
-                                    2
-                                </div>
-                                <div className={`ml-2 text-sm font-medium ${step >= 2 ? 'text-primary' : 'text-text-muted'
-                                    }`}>
-                                    Organization
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                     {/* Trial Info Banner */}
                     <div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
                         <h3 className="text-sm font-medium text-text-primary mb-2">Your trial
@@ -177,57 +155,12 @@ export default function RegisterPage() {
                         )}
                         {step === 2 && (
                             <>
-                                <Input
+                                <OrganizationDetailsFields
-                                    label="Organization name"
+                                    register={register as never}
-                                    {...register('organizationName')}
+                                    errors={errors as never}
-                                    placeholder="Sunshine Dental Clinic"
+                                    organizationType={organizationType}
-                                    error={errors.organizationName?.message}
+                                    setValue={setValue as never}
-                                    icon={<Building2 className="h-5 w-5 icon-flat" />}
                                 />
-                                <Input
-                                    label="Organization email"
-                                    {...register('organizationEmail')}
-                                    type="email"
-                                    placeholder="contact@sunshineclinic.com"
-                                    error={errors.organizationEmail?.message}
-                                    icon={<Mail className="h-5 w-5 icon-flat" />}
-                                />
-                                <div>
-                                    <label className="block text-sm font-medium text-text-secondary mb-2">
-                                        Organization type
-                                    </label>
-                                    <input type="hidden" {...register('organizationType')} />
-                                    <div className="grid grid-cols-2 gap-4">
-                                        <button
-                                            type="button"
-                                            onClick={() => {
-                                                setValue('organizationType', 'CLINIC', { shouldValidate: true });
-                                            }}
-                                            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'CLINIC' ? 'border-primary/60 bg-primary-soft text-text-primary'
-                                                : 'border-border text-text-secondary hover:border-border-strong'
-                                                }`}
-                                        >
-                                            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
-                                            <span className="text-sm font-medium">Dental Clinic</span>
-                                        </button>
-                                        <button
-                                            type="button"
-                                            onClick={() => {
-                                                setValue('organizationType', 'LAB', { shouldValidate: true });
-                                            }}
-                                            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'LAB'
-                                                ? 'border-primary/60 bg-primary-soft text-text-primary'
-                                                : 'border-border text-text-secondary hover:border-border-strong'
-                                                }`}
-                                        >
-                                            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
-                                            <span className="text-sm font-medium">Dental Lab</span>
-                                        </button>
-                                    </div>
-                                    {errors.organizationType && (
-                                        <p className="mt-2 text-sm text-red-600">{errors.organizationType.message}</p>
-                                    )}
-                                </div>
                                 {error && (
                                     <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
                                         <p className="text-sm text-red-600">{error}</p>

frontend/src/components/ui/auth/OrganizationDetailsFields.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Building2, Mail } from 'lucide-react';
+import type { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { Input } from '@/components/ui/common/Input';
+
+export type OrganizationDetailsFormValues = {
+  organizationName: string;
+  organizationEmail: string;
+  organizationType: 'CLINIC' | 'LAB';
+};
+
+type OrganizationDetailsFieldsProps = {
+  register: UseFormRegister<OrganizationDetailsFormValues>;
+  errors: FieldErrors<OrganizationDetailsFormValues>;
+  organizationType: 'CLINIC' | 'LAB' | undefined;
+  setValue: UseFormSetValue<OrganizationDetailsFormValues>;
+};
+
+export function OrganizationDetailsFields({
+  register,
+  errors,
+  organizationType,
+  setValue,
+}: OrganizationDetailsFieldsProps) {
+  return (
+    <>
+      <Input
+        label="Organization name"
+        {...register('organizationName')}
+        placeholder="Sunshine Dental Clinic"
+        error={errors.organizationName?.message}
+        icon={<Building2 className="h-5 w-5 icon-flat" />}
+      />
+      <Input
+        label="Organization email"
+        {...register('organizationEmail')}
+        type="email"
+        placeholder="contact@sunshineclinic.com"
+        error={errors.organizationEmail?.message}
+        icon={<Mail className="h-5 w-5 icon-flat" />}
+      />
+      <div>
+        <label className="block text-sm font-medium text-text-secondary mb-2">
+          Organization type
+        </label>
+        <input type="hidden" {...register('organizationType')} />
+        <div className="grid grid-cols-2 gap-4">
+          <button
+            type="button"
+            onClick={() => {
+              setValue('organizationType', 'CLINIC', { shouldValidate: true });
+            }}
+            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${
+              organizationType === 'CLINIC'
+                ? 'border-primary/60 bg-primary-soft text-text-primary'
+                : 'border-border text-text-secondary hover:border-border-strong'
+            }`}
+          >
+            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
+            <span className="text-sm font-medium">Dental Clinic</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setValue('organizationType', 'LAB', { shouldValidate: true });
+            }}
+            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${
+              organizationType === 'LAB'
+                ? 'border-primary/60 bg-primary-soft text-text-primary'
+                : 'border-border text-text-secondary hover:border-border-strong'
+            }`}
+          >
+            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
+            <span className="text-sm font-medium">Dental Lab</span>
+          </button>
+        </div>
+        {errors.organizationType && (
+          <p className="mt-2 text-sm text-red-600">{errors.organizationType.message}</p>
+        )}
+      </div>
+    </>
+  );
+}

frontend/src/components/ui/auth/RegistrationProgressSteps.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { ChevronRight } from 'lucide-react';
+
+type RegistrationProgressStepsProps = {
+  step: number;
+  firstLabel?: string;
+  secondLabel?: string;
+};
+
+export function RegistrationProgressSteps({
+  step,
+  firstLabel = 'Account',
+  secondLabel = 'Organization',
+}: RegistrationProgressStepsProps) {
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center ${
+              step >= 1
+                ? 'bg-primary text-primary-contrast'
+                : 'bg-background-secondary text-text-secondary border border-border'
+            }`}
+          >
+            1
+          </div>
+          <div
+            className={`ml-2 text-sm font-medium ${
+              step >= 1 ? 'text-primary' : 'text-text-muted'
+            }`}
+          >
+            {firstLabel}
+          </div>
+        </div>
+        <ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
+        <div className="flex items-center">
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center ${
+              step >= 2
+                ? 'bg-primary text-primary-contrast'
+                : 'bg-background-secondary text-text-secondary border border-border'
+            }`}
+          >
+            2
+          </div>
+          <div
+            className={`ml-2 text-sm font-medium ${
+              step >= 2 ? 'text-primary' : 'text-text-muted'
+            }`}
+          >
+            {secondLabel}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/lib/api/organization.ts

@@ -92,6 +92,7 @@ export const organizationApi = {
       ownerEmail: string;
       organizationName: string;
       organizationType: 'CLINIC' | 'LAB';
+      organizationEmail?: string;
       inviterOrganizationName: string;
       expiresAt: string;
       status: 'PENDING' | 'ACCEPTED';
@@ -106,6 +107,8 @@ export const organizationApi = {
   acceptInvite: async (body: {
     token: string;
     organizationName: string;
+    organizationEmail: string;
+    organizationType: 'CLINIC' | 'LAB';
     ownerName: string;
     password: string;
   }): Promise<{ success: boolean; message: string; data: { organizationId: string } }> => {