feature: dashboard settings and invite activation flow consistency fixed. frontend warnings fixed

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

@@ -4,8 +4,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { Suspense } from 'react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
 import { staffApi } from '@/lib/api/staff';
 
 function AcceptInviteContent() {

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

@@ -116,8 +116,8 @@ import Link from 'next/link';
 import { Mail, Lock } from 'lucide-react';
 
 import { useAuth } from '@/lib/hooks/useAuth';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
 
 const loginSchema = z.object({
   email: z.string().email('Please enter a valid email address'),

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

@@ -2,8 +2,8 @@
 
 import Link from 'next/link';
 import { useAuth } from '@/lib/hooks/useAuth';
-import { Button } from '@/components/ui/Button';
-import { ThemeToggle } from '@/components/ui/ThemeToggle';
+import { Button } from '@/components/ui/common/Button';
+import { ThemeToggle } from '@/components/ui/common/ThemeToggle';
 import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';
 
 export default function HomePage() {

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

@@ -7,8 +7,8 @@ import * as z from 'zod';
 import Link from 'next/link';
 import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
 const registerSchema = z.object({
     name: z.string().min(2, 'Name must be at least 2 characters'),
     email: z.string().email('Please enter a valid email address'),

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

@@ -1,170 +1,12 @@
 'use client';
 
-import { useState } from 'react';
-import { useAuth } from '@/lib/hooks/useAuth';
-import { Building2, Beaker, Mail, Plus } from 'lucide-react';
-import { Input } from '@/components/ui/Input';
-import { Button } from '@/components/ui/Button';
+import { OrganizationSelectorContent } from '@/components/ui/organization/OrganizationSelectorContent';
 
 export default function SelectOrganizationPage() {
-  const { organizations, selectOrganization, createOrganization, isLoading, error, clearError } = useAuth();
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [organizationName, setOrganizationName] = useState('');
-  const [organizationEmail, setOrganizationEmail] = useState('');
-  const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
-
-  const getIcon = (type: string) => {
-    return type === 'CLINIC'
-      ? <Building2 className="h-8 w-8 icon-flat" />
-      : <Beaker className="h-8 w-8 icon-flat" />;
-  };
-
-  const handleCreateOrganization = async () => {
-    try {
-      clearError();
-      const createdId = await createOrganization(
-        organizationName.trim(),
-        organizationEmail.trim(),
-        organizationType,
-      );
-      setOrganizationName('');
-      setOrganizationEmail('');
-      setOrganizationType('CLINIC');
-      setIsCreateOpen(false);
-      await selectOrganization(createdId);
-    } catch {
-      // Error is already handled in auth context.
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen app-web-bg flex items-center justify-center">
-        <p className="text-text-secondary">Loading...</p>
-      </div>
-    );
-  }
-
   return (
     <div className="min-h-screen app-web-bg p-4 sm:p-8">
       <div className="max-w-3xl mx-auto">
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
-          <div>
-            <h1 className="text-3xl font-semibold text-text-primary">Organizations</h1>
-            <p className="text-text-secondary mt-2">
-              Select an organization to continue, or create a new one.
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant={isCreateOpen ? 'outline' : 'primary'}
-            onClick={() => {
-              clearError();
-              setIsCreateOpen(prev => !prev);
-            }}
-          >
-            <Plus className="h-4 w-4 mr-2 icon-flat" />
-            {isCreateOpen ? 'Cancel' : 'Create Organization'}
-          </Button>
-        </div>
-
-        {isCreateOpen && (
-          <div className="surface-card p-6 mb-6 space-y-4">
-            <Input
-              label="Organization name"
-              value={organizationName}
-              onChange={(event) => setOrganizationName(event.target.value)}
-              placeholder="Sunshine Dental Clinic"
-              icon={<Building2 className="h-5 w-5 icon-flat" />}
-            />
-            <Input
-              label="Organization email"
-              value={organizationEmail}
-              onChange={(event) => setOrganizationEmail(event.target.value)}
-              placeholder="contact@sunshineclinic.com"
-              type="email"
-              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>
-              <div className="grid grid-cols-2 gap-3">
-                <button
-                  type="button"
-                  onClick={() => setOrganizationType('CLINIC')}
-                  className={`p-3 border rounded-[var(--radius-md)] text-sm ${
-                    organizationType === 'CLINIC'
-                      ? 'border-primary/60 bg-primary-soft text-text-primary'
-                      : 'border-border text-text-secondary hover:border-border-strong'
-                  }`}
-                >
-                  Dental Clinic
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setOrganizationType('LAB')}
-                  className={`p-3 border rounded-[var(--radius-md)] text-sm ${
-                    organizationType === 'LAB'
-                      ? 'border-primary/60 bg-primary-soft text-text-primary'
-                      : 'border-border text-text-secondary hover:border-border-strong'
-                  }`}
-                >
-                  Dental Lab
-                </button>
-              </div>
-            </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>
-              </div>
-            )}
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="primary"
-                onClick={handleCreateOrganization}
-                isLoading={isLoading}
-                disabled={!organizationName.trim() || !organizationEmail.trim()}
-              >
-                Create and Continue
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {!organizations.length ? (
-          <div className="surface-card p-8 text-center">
-            <p className="text-text-secondary">No organizations found. Create your first one to continue.</p>
-          </div>
-        ) : (
-          <div className="grid gap-4">
-            {organizations.map((org) => (
-              <button
-                key={org.id}
-                onClick={() => selectOrganization(org.id)}
-                className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
-              >
-                <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
-                  {getIcon(org.type)}
-                </div>
-
-                <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-text-primary">
-                    {org.name}
-                  </h3>
-                  <p className="text-sm text-text-secondary">
-                    {org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
-                  </p>
-                </div>
-
-                <div className="text-primary text-sm">
-                  Continue →
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
+        <OrganizationSelectorContent />
       </div>
     </div>
   );