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

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>
+  );
+}