feat: implement email verification page

- Create /email/verify/[id] route with page and component
- Add share-id validation and 404 on invalid links
- Add bilingual translations (English/Croatian)
- Implement verification UI with success/error states
- Call verifyTenantEmail server action on button click

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

web-app/app/[locale]/email/verify/[id]/EmailVerifyPage.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { verifyTenantEmail } from '@/app/lib/actions/emailActions';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
+
+interface EmailVerifyPageProps {
+    shareId: string;
+}
+
+export default function EmailVerifyPage({ shareId }: EmailVerifyPageProps) {
+    const t = useTranslations('email-verify-page');
+    const [isVerifying, setIsVerifying] = useState(false);
+    const [isVerified, setIsVerified] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleVerify = async () => {
+        setIsVerifying(true);
+        setError(null);
+
+        try {
+            const result = await verifyTenantEmail(shareId);
+
+            if (result.success) {
+                setIsVerified(true);
+            } else {
+                setError(result.message || t('error.unknown'));
+            }
+        } catch (err) {
+            setError(t('error.unknown'));
+        } finally {
+            setIsVerifying(false);
+        }
+    };
+
+    if (isVerified) {
+        return (
+            <div className="card bg-base-100 shadow-xl max-w-2xl mx-auto mt-8">
+                <div className="card-body">
+                    <div className="flex justify-center mb-4">
+                        <CheckCircleIcon className="h-16 w-16 text-success" />
+                    </div>
+                    <h2 className="card-title text-center justify-center text-success">
+                        {t('success.title')}
+                    </h2>
+                    <p className="text-center">{t('success.message')}</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="card bg-base-100 shadow-xl max-w-2xl mx-auto mt-8">
+                <div className="card-body">
+                    <h2 className="card-title text-error">{t('error.title')}</h2>
+                    <p>{error}</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card bg-base-100 shadow-xl max-w-2xl mx-auto mt-8">
+            <div className="card-body">
+                <h2 className="card-title">{t('title')}</h2>
+
+                <div className="space-y-4">
+                    <div>
+                        <h3 className="font-semibold">{t('about.title')}</h3>
+                        <p>{t('about.description')}</p>
+                    </div>
+
+                    <div>
+                        <h3 className="font-semibold">{t('why.title')}</h3>
+                        <p>{t('why.description')}</p>
+                    </div>
+
+                    <div>
+                        <h3 className="font-semibold">{t('what-happens.title')}</h3>
+                        <p>{t('what-happens.description')}</p>
+                    </div>
+
+                    <div>
+                        <h3 className="font-semibold">{t('opt-out.title')}</h3>
+                        <p>{t('opt-out.description')}</p>
+                    </div>
+                </div>
+
+                <div className="card-actions justify-center mt-6">
+                    <button
+                        className="btn btn-primary"
+                        onClick={handleVerify}
+                        disabled={isVerifying}
+                    >
+                        {isVerifying ? (
+                            <>
+                                <span className="loading loading-spinner"></span>
+                                {t('button.verifying')}
+                            </>
+                        ) : (
+                            t('button.verify')
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

web-app/app/[locale]/email/verify/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from 'react';
+import EmailVerifyPage from './EmailVerifyPage';
+import { Main } from '@/app/ui/Main';
+
+export default async function Page({ params: { id } }: { params: { id: string } }) {
+    return (
+        <Main>
+            <Suspense fallback={<div className="text-center p-8">Loading...</div>}>
+                <EmailVerifyPage shareId={id} />
+            </Suspense>
+        </Main>
+    );
+}