bugfix: invitation link copy option disapearing fixed. route problem for unauthorizrd users opening invitation link fixed.

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

@@ -1,14 +1,16 @@
-'use client';
+'use client';
 
 import { useEffect, useState } from 'react';
-import { Check, Copy, Link2, Trash2, X } from 'lucide-react';
+import { Check, Link2, Trash2, X } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
+import { useOrganizationInviteLinkCopy } from '@/lib/hooks/useOrganizationInviteLinkCopy';
 import {
   organizationApi,
   type CounterpartItemDto,
   type CounterpartSearchResultDto,
   type OrganizationInvitationHistoryItemDto,
 } from '@/lib/api/organization';
+import { InvitationHistoryDialog } from '@/components/ui/organizations/InvitationHistoryDialog';
 import { Button } from '@/components/ui/common/Button';
 import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
 import { Input } from '@/components/ui/common/Input';
@@ -16,33 +18,6 @@ import { SearchBar } from '@/components/ui/common/SearchBar';
 import { Table } from '@/components/ui/common/Table';
 import type { ApiError } from '@/types/api';
 
-type StoredInviteLink = {
-  invitationId: string;
-  ownerEmail: string;
-  invitationUrl: string;
-};
-
-function inviteLinksStorageKey(orgId: string): string {
-  return `counterpartInviteLinks:${orgId}`;
-}
-
-function readStoredInviteLinks(orgId: string): Record<string, StoredInviteLink> {
-  if (typeof window === 'undefined') return {};
-  try {
-    const raw = window.localStorage.getItem(inviteLinksStorageKey(orgId));
-    if (!raw) return {};
-    const parsed = JSON.parse(raw) as Record<string, StoredInviteLink>;
-    return parsed && typeof parsed === 'object' ? parsed : {};
-  } catch {
-    return {};
-  }
-}
-
-function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInviteLink>) {
-  if (typeof window === 'undefined') return;
-  window.localStorage.setItem(inviteLinksStorageKey(orgId), JSON.stringify(links));
-}
-
 function formatOrganizationStatusLabel(status: string): string {
   if (!status) return status;
   const lower = status.toLowerCase();
@@ -56,13 +31,6 @@ function formatLinkStatusLabel(status: CounterpartItemDto['status']): string {
   return formatOrganizationStatusLabel(status);
 }
 
-function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
-  if (status === 'PENDING') return 'Invitation pending';
-  if (status === 'ACTIVE') return 'Invitation Accepted';
-  if (status === 'REJECTED') return 'Invitation rejected';
-  return formatOrganizationStatusLabel(status);
-}
-
 function formatApiMessage(err: unknown): string {
   if (!err || typeof err !== 'object') return 'Something went wrong';
   const m = (err as ApiError).message;
@@ -73,7 +41,7 @@ function formatApiMessage(err: unknown): string {
 
 function formatTableDate(value: string): string {
   const d = new Date(value);
-  if (Number.isNaN(d.getTime())) return '—';
+  if (Number.isNaN(d.getTime())) return '—';
   return d.toLocaleDateString();
 }
 
@@ -96,12 +64,20 @@ export default function OrganizationsPage() {
   const [manualOrganizationName, setManualOrganizationName] = useState('');
   const [manualOwnerEmail, setManualOwnerEmail] = useState('');
   const [inviteLoading, setInviteLoading] = useState(false);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [pendingInviteLinks, setPendingInviteLinks] = useState<Record<string, StoredInviteLink>>({});
   const [showInviteForm, setShowInviteForm] = useState(false);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [historyLoading, setHistoryLoading] = useState(false);
   const [historyItems, setHistoryItems] = useState<OrganizationInvitationHistoryItemDto[]>([]);
+  const [historyCopyError, setHistoryCopyError] = useState('');
+  const [historyCopySuccess, setHistoryCopySuccess] = useState('');
+
+  const {
+    copiedId,
+    copyingInvitationId,
+    storeInviteLink,
+    copyInvitationLink,
+    pruneAcceptedLinks,
+  } = useOrganizationInviteLinkCopy(currentOrganization?.id);
 
   const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinic' : 'Lab';
   const tabLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
@@ -121,11 +97,6 @@ export default function OrganizationsPage() {
     }
   }
 
-  useEffect(() => {
-    if (!currentOrganization?.id) return;
-    setPendingInviteLinks(readStoredInviteLinks(currentOrganization.id));
-  }, [currentOrganization?.id]);
-
   useEffect(() => {
     void loadList();
   }, []);
@@ -185,18 +156,7 @@ export default function OrganizationsPage() {
         organizationName: manualOrganizationName.trim(),
         ownerEmail: manualOwnerEmail.trim(),
       });
-      if (currentOrganization?.id) {
-        const nextLinks = {
-          ...pendingInviteLinks,
-          [res.data.invitationId]: {
-            invitationId: res.data.invitationId,
-            ownerEmail: manualOwnerEmail.trim().toLowerCase(),
-            invitationUrl: res.data.invitationUrl,
-          },
-        };
-        setPendingInviteLinks(nextLinks);
-        writeStoredInviteLinks(currentOrganization.id, nextLinks);
-      }
+      storeInviteLink(res.data.invitationId, manualOwnerEmail, res.data.invitationUrl);
       setSuccess(`Invitation link created for ${manualOwnerEmail.trim()}`);
       setManualOrganizationName('');
       setManualOwnerEmail('');
@@ -212,13 +172,21 @@ export default function OrganizationsPage() {
     }
   }
 
+  async function loadInvitationHistory() {
+    const res = await organizationApi.listInvitations();
+    setHistoryItems(res.data.items);
+    pruneAcceptedLinks(res.data.items);
+    return res.data.items;
+  }
+
   async function openInvitationHistory() {
     setHistoryOpen(true);
     setHistoryLoading(true);
+    setHistoryCopyError('');
+    setHistoryCopySuccess('');
     setError('');
     try {
-      const res = await organizationApi.listInvitations();
-      setHistoryItems(res.data.items);
+      await loadInvitationHistory();
     } catch (e) {
       setError(formatApiMessage(e));
     } finally {
@@ -226,6 +194,22 @@ export default function OrganizationsPage() {
     }
   }
 
+  async function handleHistoryCopy(invitation: OrganizationInvitationHistoryItemDto) {
+    setHistoryCopyError('');
+    setHistoryCopySuccess('');
+    try {
+      await copyInvitationLink(invitation, {
+        onRegenerated: async () => {
+          await loadInvitationHistory();
+        },
+      });
+      setHistoryCopySuccess('Invitation link copied to clipboard.');
+      setTimeout(() => setHistoryCopySuccess(''), 3000);
+    } catch (e) {
+      setHistoryCopyError(formatApiMessage(e));
+    }
+  }
+
   async function respondToPendingLink(linkId: string, action: 'ACCEPT' | 'REJECT') {
     setRequestLinkRowId(linkId);
     setError('');
@@ -254,35 +238,6 @@ export default function OrganizationsPage() {
     }
   }
 
-  async function copyInvitationLink(invitationId: string) {
-    setError('');
-    try {
-      let invitationUrl = pendingInviteLinks[invitationId]?.invitationUrl;
-      if (!invitationUrl) {
-        const res = await organizationApi.getInvitationLink(invitationId);
-        invitationUrl = res.data.invitationUrl;
-        if (currentOrganization?.id) {
-          const nextLinks = {
-            ...pendingInviteLinks,
-            [invitationId]: {
-              invitationId,
-              ownerEmail:
-                historyItems.find((item) => item.id === invitationId)?.ownerEmail?.toLowerCase() ?? '',
-              invitationUrl,
-            },
-          };
-          setPendingInviteLinks(nextLinks);
-          writeStoredInviteLinks(currentOrganization.id, nextLinks);
-        }
-      }
-      await navigator.clipboard.writeText(invitationUrl);
-      setCopiedId(invitationId);
-      setTimeout(() => setCopiedId(null), 1500);
-    } catch {
-      setError('Could not copy invitation link');
-    }
-  }
-
   function clearSearchView() {
     setMode('existing');
     setQuery('');
@@ -516,87 +471,21 @@ export default function OrganizationsPage() {
         }
       />
 
-      {historyOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-          <div
-            className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
-            role="dialog"
-            aria-modal="true"
-          >
-            <div className="flex items-center justify-between">
-              <h2 className="text-lg font-semibold text-text-primary">Invitation History</h2>
-              <Button type="button" size="sm" onClick={() => setHistoryOpen(false)}>
-                Close
-              </Button>
-            </div>
-
-            {historyLoading ? (
-              <p className="text-sm text-text-secondary">Loading invitation history...</p>
-            ) : historyItems.length === 0 ? (
-              <p className="text-sm text-text-secondary">No invitations yet.</p>
-            ) : (
-              <Table
-                headers={
-                  <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                      Organization
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                      Owner email
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                      Date
-                    </th>
-                    <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
-                      Status
-                    </th>
-                    <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
-                      Action
-                    </th>
-                  </tr>
-                }
-                body={
-                  <>
-                    {historyItems.map((inv) => (
-                      <tr key={inv.id} className="hover:bg-background-secondary/45">
-                        <td className="px-6 py-1.5 text-sm text-text-primary">{inv.organizationName}</td>
-                        <td className="px-6 py-1.5 text-sm text-text-secondary">{inv.ownerEmail}</td>
-                        <td className="px-6 py-1.5 text-sm text-text-secondary">
-                          {formatTableDate(inv.createdAt)}
-                        </td>
-                        <td className="px-6 py-1.5 text-center align-middle">
-                          <Badge variant={organizationLinkStatusVariant(inv.status)} fixedWidth={false}>
-                            {formatInvitationStatusLabel(inv.status)}
-                          </Badge>
-                        </td>
-                        <td className="px-6 py-1.5 text-right">
-                          {inv.status === 'PENDING' ? (
-                            <button
-                              type="button"
-                              className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
-                              onClick={() => void copyInvitationLink(inv.id)}
-                              aria-label="Copy invitation link"
-                              title="Copy invitation link"
-                            >
-                              {copiedId === inv.id ? (
-                                <Check className="w-4 h-4" />
-                              ) : (
-                                <Copy className="w-4 h-4" />
-                              )}
-                            </button>
-                          ) : (
-                            <span className="text-xs text-text-muted">—</span>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
-                  </>
-                }
-              />
-            )}
-          </div>
-        </div>
-      )}
+      <InvitationHistoryDialog
+        open={historyOpen}
+        onClose={() => {
+          setHistoryOpen(false);
+          setHistoryCopyError('');
+          setHistoryCopySuccess('');
+        }}
+        loading={historyLoading}
+        items={historyItems}
+        copiedId={copiedId}
+        copyingInvitationId={copyingInvitationId}
+        onCopy={(invitation) => void handleHistoryCopy(invitation)}
+        copyError={historyCopyError}
+        copySuccess={historyCopySuccess}
+      />
     </div>
   );
 }

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

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { OrganizationSelectorContent } from '@/components/ui/organization/OrganizationSelectorContent';
+import { OrganizationSelectorContent } from '@/components/ui/organizations/OrganizationSelectorContent';
 
 export default function DashboardOrganizationsSettingsPage() {
   return (

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

@@ -61,6 +61,10 @@ function formatApiMessage(err: unknown): string {
   return 'Something went wrong';
 }
 
+function canShareStaffInviteLink(member: StaffMemberDto): boolean {
+  return !member.isOwner && member.invitationStatus !== 'ACTIVE';
+}
+
 function PermissionGrid({
   state,
   onChange,
@@ -140,6 +144,7 @@ export default function StaffPage() {
   const [invitePerms, setInvitePerms] = useState(() => emptyFeaturePermissionState());
   const [inviteLoading, setInviteLoading] = useState(false);
   const [copiedInviteMembershipId, setCopiedInviteMembershipId] = useState<string | null>(null);
+  const [copyingInviteMembershipId, setCopyingInviteMembershipId] = useState<string | null>(null);
   const [lastInviteInfo, setLastInviteInfo] = useState<{
     membershipId: string;
     name: string;
@@ -221,6 +226,42 @@ export default function StaffPage() {
     return () => clearTimeout(t);
   }, [success]);
 
+  async function copyStaffInviteLink(member: StaffMemberDto) {
+    if (!canShareStaffInviteLink(member)) return;
+
+    setCopyingInviteMembershipId(member.id);
+    setError('');
+    try {
+      let invitationUrl = pendingInviteLinks[member.id]?.invitationUrl;
+      if (!invitationUrl || member.invitationStatus === 'EXPIRED') {
+        const res = await staffApi.getInvitationLink(member.id);
+        invitationUrl = res.data.invitationUrl;
+        if (currentOrganization?.id) {
+          const nextLinks = {
+            ...pendingInviteLinks,
+            [member.id]: {
+              membershipId: member.id,
+              email: member.email,
+              invitationUrl,
+            },
+          };
+          setPendingInviteLinks(nextLinks);
+          writeStoredInviteLinks(currentOrganization.id, nextLinks);
+        }
+      }
+      await navigator.clipboard.writeText(invitationUrl);
+      setCopiedInviteMembershipId(member.id);
+      setTimeout(() => setCopiedInviteMembershipId(null), 1500);
+      if (member.invitationStatus === 'EXPIRED') {
+        await load();
+      }
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setCopyingInviteMembershipId(null);
+    }
+  }
+
   async function submitInvite() {
     setInviteLoading(true);
     setError('');
@@ -388,34 +429,60 @@ export default function StaffPage() {
               ? ' Invitation is pending until they open the link, set a password, and log in.'
               : ' Invitation was accepted immediately.'}
           </p>
-          {lastInviteInfo.invitationUrl && (
+          {lastInviteInfo.invitationStatus === 'PENDING' && (
             <div className="space-y-2 pt-1 border-t border-border/60">
               <p className="text-xs font-medium text-text-secondary uppercase tracking-wide">
                 Invite link
               </p>
-              <div className="flex flex-wrap items-center gap-2">
-                <code className="text-sm px-2 py-1.5 rounded-[var(--radius-sm)] bg-background-card border border-border font-mono break-all">
+              {lastInviteInfo.invitationUrl && (
+                <code className="block text-sm px-2 py-1.5 rounded-[var(--radius-sm)] bg-background-card border border-border font-mono break-all">
                   {lastInviteInfo.invitationUrl}
                 </code>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={async () => {
+              )}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                isLoading={copyingInviteMembershipId === lastInviteInfo.membershipId}
+                onClick={() => {
+                  const member = members.find((item) => item.id === lastInviteInfo.membershipId);
+                  if (member) {
+                    void copyStaffInviteLink(member);
+                    return;
+                  }
+                  void (async () => {
+                    setCopyingInviteMembershipId(lastInviteInfo.membershipId);
+                    setError('');
                     try {
-                      await navigator.clipboard.writeText(lastInviteInfo.invitationUrl as string);
+                      const res = await staffApi.getInvitationLink(lastInviteInfo.membershipId);
+                      if (currentOrganization?.id) {
+                        const nextLinks = {
+                          ...pendingInviteLinks,
+                          [lastInviteInfo.membershipId]: {
+                            membershipId: lastInviteInfo.membershipId,
+                            email: lastInviteInfo.email,
+                            invitationUrl: res.data.invitationUrl,
+                          },
+                        };
+                        setPendingInviteLinks(nextLinks);
+                        writeStoredInviteLinks(currentOrganization.id, nextLinks);
+                      }
+                      setLastInviteInfo({ ...lastInviteInfo, invitationUrl: res.data.invitationUrl });
+                      await navigator.clipboard.writeText(res.data.invitationUrl);
                       setCopiedInviteMembershipId(lastInviteInfo.membershipId);
                       setTimeout(() => setCopiedInviteMembershipId(null), 1500);
-                    } catch {
-                      setError('Could not copy invitation link');
+                    } catch (e) {
+                      setError(formatApiMessage(e));
+                    } finally {
+                      setCopyingInviteMembershipId(null);
                     }
-                  }}
-                >
-                  {copiedInviteMembershipId === lastInviteInfo.membershipId ? 'Copied' : 'Copy link'}
-                </Button>
-              </div>
+                  })();
+                }}
+              >
+                {copiedInviteMembershipId === lastInviteInfo.membershipId ? 'Copied' : 'Copy link'}
+              </Button>
               <p className="text-xs text-text-muted">
-                Share this link manually via SMS or email. They must set password first.
+                Share this link manually via SMS or email. A new link is generated if the previous one expired or was lost.
               </p>
             </div>
           )}
@@ -470,21 +537,14 @@ export default function StaffPage() {
                   <td className="px-6 py-1.5 align-middle">
                     {!m.isOwner && (
                       <div className="flex min-h-[36px] items-center justify-end gap-1">
-                        {m.invitationStatus === 'PENDING' && pendingInviteLinks[m.id]?.invitationUrl && (
+                        {canShareStaffInviteLink(m) && (
                           <button
                             type="button"
-                            className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
-                            onClick={async () => {
-                              try {
-                                await navigator.clipboard.writeText(pendingInviteLinks[m.id].invitationUrl);
-                                setCopiedInviteMembershipId(m.id);
-                                setTimeout(() => setCopiedInviteMembershipId(null), 1500);
-                              } catch {
-                                setError('Could not copy invitation link');
-                              }
-                            }}
-                            aria-label="Copy invite link"
-                            title="Copy invite link"
+                            className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                            disabled={copyingInviteMembershipId === m.id}
+                            onClick={() => void copyStaffInviteLink(m)}
+                            aria-label="Copy invitation link"
+                            title="Copy invitation link (generates a new link if needed)"
                           >
                             {copiedInviteMembershipId === m.id ? (
                               <Check className="w-4 h-4" />

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { OrganizationSelectorContent } from '@/components/ui/organization/OrganizationSelectorContent';
+import { OrganizationSelectorContent } from '@/components/ui/organizations/OrganizationSelectorContent';
 
 export default function SelectOrganizationPage() {
   return (