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

frontend/src/app/(dashboard)/billing/page.tsx

@@ -2,9 +2,9 @@
 'use client';
 import { useState } from 'react';
 import { Search, Filter, Plus } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
+import { Badge } from '@/components/ui/common/Badge';
 // Mock data matching your design
 const invoices = [
     { id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },

frontend/src/app/(dashboard)/layout.tsx

@@ -3,14 +3,14 @@
 import { memo, useEffect } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
-import Sidebar from '@/components/ui/Sidebar';
-import { ThemeToggle } from '@/components/ui/ThemeToggle';
-import { DashboardAccountMenu } from '@/components/ui/DashboardAccountMenu';
+import Sidebar from '@/components/ui/common/Sidebar';
+import { ThemeToggle } from '@/components/ui/common/ThemeToggle';
+import { DashboardAccountMenu } from '@/components/ui/dashboard/DashboardAccountMenu';
 import {
   firstAccessibleDashboardPath,
   getRequiredReadPermissionForPath,
   hasPermission,
-} from '@/access';
+} from '@/shared/permissions';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const { user, currentOrganization, isAuthReady } = useAuth();
@@ -77,7 +77,7 @@ const DashboardHeader = memo(function DashboardHeader({
   organizationName: string;
 }) {
   return (
-    <header className="h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
+    <header className="relative z-40 h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
       <h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
 
       <div className="flex items-center gap-3 shrink-0">

frontend/src/app/(dashboard)/patients/components/CreatePatientModal.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { CreatePatientInput } from '@/types/patient';
-
-interface CreatePatientModalProps {
-  isOpen: boolean;
-  formData: CreatePatientInput;
-  onChange: (patch: Partial<CreatePatientInput>) => void;
-  onSubmit: () => void;
-  onClose: () => void;
-  loading?: boolean;
-}
-
-export function CreatePatientModal({
-  isOpen,
-  formData,
-  onChange,
-  onSubmit,
-  onClose,
-  loading = false,
-}: CreatePatientModalProps) {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className="surface-card p-4 space-y-3">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <Input
-          label="First name"
-          value={formData.firstName || ''}
-          onChange={(e) => onChange({ firstName: e.target.value })}
-        />
-        <Input
-          label="Last name"
-          value={formData.lastName || ''}
-          onChange={(e) => onChange({ lastName: e.target.value })}
-        />
-        <Input
-          label="Phone"
-          value={formData.phone || ''}
-          onChange={(e) => onChange({ phone: e.target.value })}
-        />
-        <Input
-          label="Email"
-          type="email"
-          value={formData.email || ''}
-          onChange={(e) => onChange({ email: e.target.value })}
-        />
-      </div>
-
-      <div className="flex gap-2">
-        <Button
-          variant="primary"
-          onClick={onSubmit}
-          isLoading={loading}
-          disabled={!formData.firstName || !formData.lastName}
-        >
-          Save Patient
-        </Button>
-        <Button variant="ghost" onClick={onClose}>
-          Cancel
-        </Button>
-      </div>
-    </div>
-  );
-}

frontend/src/app/(dashboard)/patients/components/PatientSearchSelect.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import { Search } from 'lucide-react';
-import { Input } from '@/components/ui/Input';
-import { Patient } from '@/types/patient';
-
-interface PatientSearchSelectProps {
-  search: string;
-  onSearchChange: (value: string) => void;
-  patients: Patient[];
-  selectedPatientId?: string;
-  onSelectPatient: (patient: Patient) => void;
-  loading?: boolean;
-}
-
-export function PatientSearchSelect({
-  search,
-  onSearchChange,
-  patients,
-  selectedPatientId,
-  onSelectPatient,
-  loading = false,
-}: PatientSearchSelectProps) {
-  return (
-    <div className="surface-card p-4 space-y-4">
-      <Input
-        placeholder="Search patients by name, phone, email"
-        value={search}
-        onChange={(e) => onSearchChange(e.target.value)}
-        icon={<Search className="h-4 w-4 icon-flat" />}
-      />
-
-      <div className="space-y-2 max-h-80 overflow-y-auto">
-        {loading && <p className="text-sm text-text-muted">Loading patients...</p>}
-
-        {!loading && patients.length === 0 && (
-          <p className="text-sm text-text-muted">No patients found for this search.</p>
-        )}
-
-        {patients.map((patient) => {
-          const isSelected = selectedPatientId === patient.id;
-          return (
-            <button
-              key={patient.id}
-              type="button"
-              onClick={() => onSelectPatient(patient)}
-              className={`w-full text-left rounded-[var(--radius-sm)] border px-3 py-2 transition-colors ${
-                isSelected
-                  ? 'bg-primary-soft border-primary/60'
-                  : 'border-border/60 hover:bg-background-card/70'
-              }`}
-            >
-              <p className="text-sm font-medium text-text-primary">
-                {patient.firstName} {patient.lastName}
-              </p>
-              <p className="text-xs text-text-muted">{patient.phone || patient.email || 'No contact'}</p>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

frontend/src/app/(dashboard)/patients/components/PatientSummaryCard.tsx

@@ -1,28 +0,0 @@
-import { Patient } from '@/types/patient';
-
-interface PatientSummaryCardProps {
-  patient?: Patient;
-}
-
-export function PatientSummaryCard({ patient }: PatientSummaryCardProps) {
-  if (!patient) {
-    return (
-      <div className="surface-card p-4">
-        <p className="text-sm text-text-muted">Select a patient to view details.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="surface-card p-4 space-y-2">
-      <h2 className="text-lg font-semibold text-text-primary">
-        {patient.firstName} {patient.lastName}
-      </h2>
-      <p className="text-sm text-text-secondary">Phone: {patient.phone || '-'}</p>
-      <p className="text-sm text-text-secondary">Email: {patient.email || '-'}</p>
-      <p className="text-sm text-text-secondary">
-        Status: {patient.isActive ? 'Active' : 'Inactive'}
-      </p>
-    </div>
-  );
-}

frontend/src/app/(dashboard)/patients/components/TreatmentHistoryPreview.tsx

@@ -1,37 +0,0 @@
-import { TreatmentHistoryItem } from '@/types/patient';
-
-interface TreatmentHistoryPreviewProps {
-  items: TreatmentHistoryItem[];
-  loading?: boolean;
-}
-
-export function TreatmentHistoryPreview({ items, loading = false }: TreatmentHistoryPreviewProps) {
-  return (
-    <div className="surface-card p-4 space-y-3">
-      <h3 className="text-base font-semibold text-text-primary">Treatment History</h3>
-
-      {loading && <p className="text-sm text-text-muted">Loading treatment history...</p>}
-
-      {!loading && items.length === 0 && (
-        <p className="text-sm text-text-muted">No treatment history yet.</p>
-      )}
-
-      <div className="space-y-2">
-        {items.map((item) => (
-          <div key={item.id} className="border border-border/60 rounded-[var(--radius-sm)] p-3">
-            <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-text-primary">{item.title}</p>
-              <p className="text-xs text-text-muted">
-                {new Date(item.treatmentAt).toLocaleDateString()}
-              </p>
-            </div>
-            <p className="text-xs text-text-secondary mt-1">
-              Status: {item.status}
-              {item.tooth ? ` | Tooth: ${item.tooth}` : ''}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/app/(dashboard)/patients/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { Plus } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
+import { Button } from '@/components/ui/common/Button';
 import { patientsApi } from '@/lib/api/patients';
 import {
   CreatePatientInput,
@@ -10,10 +10,10 @@ import {
   Patient,
   TreatmentHistoryItem,
 } from '@/types/patient';
-import { PatientSearchSelect } from './components/PatientSearchSelect';
-import { CreatePatientModal } from './components/CreatePatientModal';
-import { PatientSummaryCard } from './components/PatientSummaryCard';
-import { TreatmentHistoryPreview } from './components/TreatmentHistoryPreview';
+import { PatientSearchSelect } from '../../../components/ui/patient/PatientSearchSelect';
+import { CreatePatientModal } from '../../../components/ui/patient/CreatePatientModal';
+import { PatientSummaryCard } from '../../../components/ui/patient/PatientSummaryCard';
+import { TreatmentHistoryPreview } from '../../../components/ui/patient/TreatmentHistoryPreview';
 
 const EMPTY_PATIENT_FORM: CreatePatientInput = {
   firstName: '',
@@ -201,7 +201,7 @@ export default function PatientsPage() {
       </div>
 
       {(errorMessage || successMessage) && (
-        <div className="absolute bottom-0 left-0 right-0 z-50 w-full">
+        <div className="absolute bottom-0 left-0 right-0 z-10 w-full">
           {errorMessage && (
             <div className="rounded-[var(--radius-sm)] border border-red-500/50 bg-red-500/10 px-3 py-2 text-sm text-red-300 shadow-lg">
               {errorMessage}

frontend/src/app/(dashboard)/settings/organizations/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import Link from 'next/link';
+import { OrganizationSelectorContent } from '@/components/ui/organization/OrganizationSelectorContent';
+
+export default function DashboardOrganizationsSettingsPage() {
+  return (
+    <div className="max-w-3xl space-y-6">
+      <div>
+        <Link
+          href="/today"
+          className="text-sm text-primary hover:opacity-90"
+        >
+          ← Back to app
+        </Link>
+      </div>
+      <OrganizationSelectorContent />
+    </div>
+  );
+}

frontend/src/app/(dashboard)/settings/subscriptions/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { authApi } from '@/lib/api/auth';
-import type { SubscriptionAlertData } from '@/types';
+import type { SubscriptionAlertData } from '@/types/subscription';
 
 export default function SubscriptionsSettingsPage() {
   const { currentOrganization } = useAuth();
@@ -39,9 +39,24 @@ export default function SubscriptionsSettingsPage() {
 
   const plan = currentOrganization.plan;
   const maxUsers = plan?.maxUsers;
+  const isUnlimited = typeof maxUsers === 'number' && maxUsers >= 999999;
+  const seatsUsed = alert?.seatsUsed;
+  const seatsRemaining =
+    typeof seatsUsed === 'number' && typeof maxUsers === 'number' && !isUnlimited
+      ? Math.max(0, maxUsers - seatsUsed)
+      : null;
+  const daysUntilPlanEnd = alert?.daysUntilPlanEnd ?? null;
+  const planDayTone =
+    daysUntilPlanEnd == null
+      ? 'text-text-primary'
+      : daysUntilPlanEnd > 20
+        ? 'text-emerald-400'
+        : daysUntilPlanEnd >= 10
+          ? 'text-amber-300'
+          : 'text-red-400';
 
   return (
-    <div className="max-w-xl space-y-6">
+    <div className="max-w-4xl space-y-6">
       <div>
         <Link
           href="/today"
@@ -59,21 +74,38 @@ export default function SubscriptionsSettingsPage() {
       </div>
 
       <div className="surface-card p-6 space-y-4">
-        <div className="flex flex-wrap gap-4 justify-between">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
           <div>
             <p className="text-xs text-text-muted uppercase tracking-wide">Current plan</p>
             <p className="text-lg font-medium text-text-primary capitalize">
               {plan?.name ?? '—'}
             </p>
           </div>
-          {typeof maxUsers === 'number' && maxUsers < 999999 && (
-            <div>
-              <p className="text-xs text-text-muted uppercase tracking-wide">Seats (this org)</p>
-              <p className="text-lg font-medium text-text-primary">
-                {alert?.seatsUsed ?? '—'} / {maxUsers}
-              </p>
-            </div>
-          )}
+          <div>
+            <p className="text-xs text-text-muted uppercase tracking-wide">Plan price</p>
+            <p className="text-lg font-medium text-text-primary">
+              {typeof plan?.price === 'number' ? `$${plan.price}` : '—'}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-text-muted uppercase tracking-wide">Seats used</p>
+            <p className="text-lg font-medium text-text-primary">
+              {typeof seatsUsed === 'number' ? seatsUsed : '—'}
+              {typeof maxUsers === 'number' ? ` / ${isUnlimited ? 'Unlimited' : maxUsers}` : ''}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-text-muted uppercase tracking-wide">Seats remaining</p>
+            <p className="text-lg font-medium text-text-primary">
+              {isUnlimited ? 'Unlimited' : seatsRemaining ?? '—'}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-text-muted uppercase tracking-wide">Days remaining</p>
+            <p className={`text-lg font-medium ${planDayTone}`}>
+              {daysUntilPlanEnd ?? '—'}
+            </p>
+          </div>
         </div>
 
         {alert?.showWarning && (

frontend/src/app/(dashboard)/staff/page.tsx

@@ -6,7 +6,7 @@ import {
   firstAccessibleDashboardPath,
   canEditStaff,
   canViewStaff,
-} from '@/access';
+} from '@/shared/permissions';
 import {
   STAFF_FEATURE_GROUPS,
   permissionNamesFromFeatureState,
@@ -18,10 +18,10 @@ import {
 import { UserPlus, Pencil, Trash2, Copy, Check, X, Clock3 } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Checkbox } from '@/components/ui/Checkbox';
-import { ApiError } from '@/types';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
+import { Checkbox } from '@/components/ui/common/Checkbox';
+import type { ApiError } from '@/types/api';
 
 function formatApiMessage(err: unknown): string {
   if (!err || typeof err !== 'object') return 'Something went wrong';

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