feature: clinic & lab invitation flow added. minimal ui implemented for organizations tab.

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

@@ -0,0 +1,159 @@
+'use client';
+
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
+import { organizationApi } from '@/lib/api/organization';
+
+function AcceptOrganizationInviteContent() {
+  const params = useSearchParams();
+  const router = useRouter();
+  const token = useMemo(() => params.get('token') || '', [params]);
+
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [inviteInfo, setInviteInfo] = useState<{
+    ownerEmail: string;
+    organizationName: string;
+    organizationType: 'CLINIC' | 'LAB';
+    inviterOrganizationName: string;
+    expiresAt: string;
+    status: 'PENDING' | 'ACCEPTED';
+  } | null>(null);
+
+  const [ownerName, setOwnerName] = useState('');
+  const [organizationName, setOrganizationName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  useEffect(() => {
+    if (!token) {
+      setLoading(false);
+      setError('Invalid invitation link');
+      return;
+    }
+
+    void (async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const res = await organizationApi.previewInvite(token);
+        setInviteInfo(res.data);
+        setOrganizationName(res.data.organizationName || '');
+        if (res.data.status === 'ACCEPTED') {
+          setSuccess('This invitation is already accepted. You can log in now.');
+        }
+      } catch (e: any) {
+        setError(e?.message || 'Could not load invitation');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token]);
+
+  async function onAccept() {
+    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(),
+        organizationName: organizationName.trim(),
+        password,
+      });
+      setSuccess('Invitation accepted. Redirecting to login...');
+      setTimeout(() => router.replace('/login'), 1000);
+    } catch (e: any) {
+      setError(e?.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="w-full max-w-md surface-card p-6 space-y-5">
+        <h1 className="text-xl font-semibold text-text-primary">Accept organization invitation</h1>
+        {loading ? (
+          <p className="text-sm text-text-secondary">Loading invitation...</p>
+        ) : (
+          <>
+            {inviteInfo && (
+              <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>
+                  Invited by: <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
+                </p>
+                <p>
+                  Owner email: <span className="text-text-primary">{inviteInfo.ownerEmail}</span>
+                </p>
+              </div>
+            )}
+            {error && (
+              <div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-300">
+                {error}
+              </div>
+            )}
+            {success && (
+              <div className="rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
+                {success}
+              </div>
+            )}
+            {inviteInfo?.status !== 'ACCEPTED' && (
+              <div className="space-y-3">
+                <Input label="Owner name" value={ownerName} onChange={(e) => setOwnerName(e.target.value)} />
+                <Input
+                  label="Organization name"
+                  value={organizationName}
+                  onChange={(e) => setOrganizationName(e.target.value)}
+                />
+                <Input
+                  label="Create password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+                <Input
+                  label="Confirm password"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                />
+                <Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
+                  Activate organization
+                </Button>
+              </div>
+            )}
+            <p className="text-xs text-text-muted">
+              Already have access? <Link href="/login" className="text-primary">Go to login</Link>
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function AcceptOrganizationInvitePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen app-web-bg flex items-center justify-center">
+          <p className="text-sm text-text-secondary">Loading invitation...</p>
+        </div>
+      }
+    >
+      <AcceptOrganizationInviteContent />
+    </Suspense>
+  );
+}