feature: Organizations form UX flow now matches the needs.

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

@@ -1,11 +1,13 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Search } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import {
   organizationApi,
   type CounterpartItemDto,
   type CounterpartSearchResultDto,
+  type OrganizationInvitationHistoryItemDto,
 } from '@/lib/api/organization';
 import { Button } from '@/components/ui/common/Button';
 import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
@@ -39,13 +41,26 @@ function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInvit
   window.localStorage.setItem(inviteLinksStorageKey(orgId), JSON.stringify(links));
 }
 
-/** First letter uppercase, rest lowercase (e.g. ACTIVE → Active). */
 function formatOrganizationStatusLabel(status: string): string {
   if (!status) return status;
   const lower = status.toLowerCase();
   return lower.charAt(0).toUpperCase() + lower.slice(1);
 }
 
+function formatLinkStatusLabel(status: CounterpartItemDto['status']): string {
+  if (status === 'PENDING') return 'Link request pending';
+  if (status === 'ACTIVE') return 'Linked';
+  if (status === 'REJECTED') return 'Link request rejected';
+  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;
@@ -54,33 +69,36 @@ function formatApiMessage(err: unknown): string {
   return 'Something went wrong';
 }
 
+type TableMode = 'existing' | 'search';
+
 export default function OrganizationsPage() {
   const { currentOrganization } = useAuth();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
-  const [searchTerm, setSearchTerm] = useState('');
-  const [searchLoading, setSearchLoading] = useState(false);
-  const [results, setResults] = useState<CounterpartSearchResultDto[]>([]);
-  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
-  const [linkLoading, setLinkLoading] = useState(false);
+  const [query, setQuery] = useState('');
+  const [mode, setMode] = useState<TableMode>('existing');
+  const [searching, setSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<CounterpartSearchResultDto[]>([]);
+  const [requestLinkRowId, setRequestLinkRowId] = useState<string | null>(null);
+  const [deleteLinkRowId, setDeleteLinkRowId] = useState<string | null>(null);
 
   const [items, setItems] = useState<CounterpartItemDto[]>([]);
   const [manualOrganizationName, setManualOrganizationName] = useState('');
   const [manualOwnerEmail, setManualOwnerEmail] = useState('');
-  const [manualPhone, setManualPhone] = 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 counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinic' : 'Lab';
   const tabLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
 
-  const selectedResult = useMemo(
-    () => results.find((r) => r.id === selectedOrgId) ?? null,
-    [results, selectedOrgId],
-  );
+  const existingRows = items;
 
   async function loadList() {
     setLoading(true);
@@ -111,34 +129,43 @@ export default function OrganizationsPage() {
   }, [success]);
 
   async function runSearch() {
-    setSearchLoading(true);
+    const q = query.trim();
+    if (!q) {
+      setMode('existing');
+      setSearchResults([]);
+      setShowInviteForm(false);
+      return;
+    }
+
+    setSearching(true);
     setError('');
-    setSelectedOrgId(null);
+    setMode('search');
+    setShowInviteForm(false);
     try {
-      const res = await organizationApi.search(searchTerm.trim());
-      setResults(res.data);
+      const res = await organizationApi.search(q);
+      setSearchResults(res.data);
     } catch (e) {
       setError(formatApiMessage(e));
+      setSearchResults([]);
     } finally {
-      setSearchLoading(false);
+      setSearching(false);
     }
   }
 
-  async function createLink() {
-    if (!selectedOrgId) return;
-    setLinkLoading(true);
+  async function submitRequestLink(targetOrganizationId: string) {
+    setRequestLinkRowId(targetOrganizationId);
     setError('');
     try {
-      await organizationApi.createLink(selectedOrgId);
-      setSuccess(`${counterpartLabel} link request created`);
-      setResults([]);
-      setSelectedOrgId(null);
-      setSearchTerm('');
+      await organizationApi.createLink(targetOrganizationId);
+      setSuccess(`${counterpartLabel} link request sent`);
+      setSearchResults([]);
+      setQuery('');
+      setMode('existing');
       await loadList();
     } catch (e) {
       setError(formatApiMessage(e));
     } finally {
-      setLinkLoading(false);
+      setRequestLinkRowId(null);
     }
   }
 
@@ -149,7 +176,6 @@ export default function OrganizationsPage() {
       const res = await organizationApi.invite({
         organizationName: manualOrganizationName.trim(),
         ownerEmail: manualOwnerEmail.trim(),
-        phone: manualPhone.trim() || undefined,
       });
       if (currentOrganization?.id) {
         const nextLinks = {
@@ -166,7 +192,10 @@ export default function OrganizationsPage() {
       setSuccess(`Invitation link created for ${manualOwnerEmail.trim()}`);
       setManualOrganizationName('');
       setManualOwnerEmail('');
-      setManualPhone('');
+      setShowInviteForm(false);
+      setMode('existing');
+      setQuery('');
+      setSearchResults([]);
       await loadList();
     } catch (e) {
       setError(formatApiMessage(e));
@@ -175,18 +204,100 @@ export default function OrganizationsPage() {
     }
   }
 
+  async function openInvitationHistory() {
+    setHistoryOpen(true);
+    setHistoryLoading(true);
+    setError('');
+    try {
+      const res = await organizationApi.listInvitations();
+      setHistoryItems(res.data.items);
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setHistoryLoading(false);
+    }
+  }
+
+  async function respondToPendingLink(linkId: string, action: 'ACCEPT' | 'REJECT') {
+    setRequestLinkRowId(linkId);
+    setError('');
+    try {
+      await organizationApi.respondLink(linkId, action);
+      setSuccess(action === 'ACCEPT' ? 'Link request accepted' : 'Link request rejected');
+      await loadList();
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setRequestLinkRowId(null);
+    }
+  }
+
+  async function deleteLinkedOrganization(linkId: string) {
+    setDeleteLinkRowId(linkId);
+    setError('');
+    try {
+      await organizationApi.deleteLink(linkId);
+      setSuccess('Linked organization removed');
+      await loadList();
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setDeleteLinkRowId(null);
+    }
+  }
+
+  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('');
+    setSearchResults([]);
+    setShowInviteForm(false);
+  }
+
   if (!currentOrganization) {
     return <p className="text-sm text-text-secondary">Loading organization...</p>;
   }
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
-        <p className="text-sm text-text-secondary mt-1">
-          Search subscribed {tabLabel.toLowerCase()}, request link access, or invite a new{' '}
-          {counterpartLabel.toLowerCase()} owner.
-        </p>
+      <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
+          <p className="text-sm text-text-secondary mt-1">
+            Search organizations and send link requests or invitation links in one place.
+          </p>
+        </div>
+        <Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
+          Invitation history
+        </Button>
       </div>
 
       {error && (
@@ -200,152 +311,256 @@ export default function OrganizationsPage() {
         </div>
       )}
 
-      <div className="rounded-[var(--radius-md)] border border-border/70 p-4 space-y-3">
-        <h2 className="text-base font-semibold text-text-primary">Search existing {tabLabel}</h2>
-        <div className="flex gap-2">
-          <Input
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder={`Search by ${counterpartLabel.toLowerCase()} name, email, or phone`}
-          />
-          <Button type="button" isLoading={searchLoading} onClick={() => void runSearch()}>
+      <div className="surface-card p-4">
+        <div className="flex gap-4 items-center">
+          <div className="flex-1">
+            <Input
+              placeholder={`Search ${counterpartLabel.toLowerCase()} by name, email, or phone...`}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') void runSearch();
+              }}
+              icon={<Search className="h-4 w-4 icon-flat" />}
+            />
+          </div>
+          <Button type="button" isLoading={searching} onClick={() => void runSearch()}>
             Search
           </Button>
-        </div>
-
-        {results.length > 0 && (
-          <div className="space-y-2 pt-1">
-            {results.map((r) => (
-              <button
-                key={r.id}
-                type="button"
-                onClick={() => setSelectedOrgId(r.id)}
-                className={`w-full text-left rounded-[var(--radius-md)] border px-3 py-2 ${
-                  selectedOrgId === r.id
-                    ? 'border-primary/70 bg-primary-soft/30'
-                    : 'border-border/60 hover:border-border-strong'
-                }`}
-              >
-                <p className="text-sm font-medium text-text-primary">{r.name}</p>
-                <p className="text-xs text-text-secondary mt-0.5">
-                  {r.email}
-                  {r.phone ? ` - ${r.phone}` : ''}
-                </p>
-                <p className="text-xs text-text-muted mt-0.5">Owner: {r.owner.email}</p>
-              </button>
-            ))}
-          </div>
-        )}
-
-        <div className="flex justify-end">
-          <Button
-            type="button"
-            isLoading={linkLoading}
-            disabled={!selectedResult}
-            onClick={() => void createLink()}
-          >
-            Request link
-          </Button>
+          {mode === 'search' && (
+            <Button type="button" variant="outline" onClick={clearSearchView}>
+              Back to list
+            </Button>
+          )}
         </div>
       </div>
 
-      <div className="rounded-[var(--radius-md)] border border-border/70 p-4 space-y-3">
-        <h2 className="text-base font-semibold text-text-primary">Invite owner (not yet subscribed)</h2>
-        <Input
-          label={`${counterpartLabel} name`}
-          value={manualOrganizationName}
-          onChange={(e) => setManualOrganizationName(e.target.value)}
-        />
-        <Input
-          label="Owner email"
-          type="email"
-          value={manualOwnerEmail}
-          onChange={(e) => setManualOwnerEmail(e.target.value)}
-        />
-        <Input
-          label="Mobile number (optional)"
-          value={manualPhone}
-          onChange={(e) => setManualPhone(e.target.value)}
-        />
-        <div className="flex justify-end">
-          <Button
-            type="button"
-            isLoading={inviteLoading}
-            disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
-            onClick={() => void sendInvite()}
-          >
-            Send invite link
-          </Button>
-        </div>
-      </div>
-
-      <div className="rounded-[var(--radius-md)] border border-border/70">
-        <div className="border-b border-border/70 px-4 py-3">
-          <h2 className="text-base font-semibold text-text-primary">Requests and invitations</h2>
-        </div>
-        {loading ? (
-          <p className="px-4 py-4 text-sm text-text-secondary">Loading list...</p>
-        ) : items.length === 0 ? (
-          <p className="px-4 py-4 text-sm text-text-secondary">No records yet.</p>
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border/70 text-left text-text-secondary">
-                  <th className="p-3 font-medium">Type</th>
-                  <th className="p-3 font-medium">Organization</th>
-                  <th className="p-3 font-medium">Owner email</th>
-                  <th className="p-3 font-medium">Status</th>
-                  <th className="p-3 font-medium">Action</th>
+      <div className="surface-card overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-background-secondary/70 border-b border-border">
+            <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">
+                Type
+              </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>
+          </thead>
+          <tbody className="divide-y divide-border/60">
+            {loading ? (
+              <tr>
+                <td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
+                  Loading...
+                </td>
+              </tr>
+            ) : mode === 'existing' ? (
+              existingRows.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
+                    No organizations linked or pending yet. Use search to find and connect.
+                  </td>
                 </tr>
-              </thead>
-              <tbody>
-                {items.map((item) => (
-                  <tr key={item.id} className="border-b border-border/40 last:border-0">
-                    <td className="p-3 text-text-secondary">
-                      {item.kind === 'LINK' ? 'Link request' : 'Invitation'}
-                    </td>
-                    <td className="p-3 text-text-primary">{item.organizationName}</td>
-                    <td className="p-3 text-text-secondary">{item.ownerEmail}</td>
-                    <td className="p-3">
-                      <Badge
-                        variant={organizationLinkStatusVariant(item.status)}
-                        fixedWidth
-                      >
-                        {formatOrganizationStatusLabel(item.status)}
-                      </Badge>
-                    </td>
-                    <td className="p-3">
-                      {item.kind === 'INVITATION' &&
-                        item.status === 'PENDING' &&
-                        pendingInviteLinks[item.id]?.invitationUrl && (
+              ) : (
+                existingRows.map((row) => {
+                  const canRespond =
+                    row.status === 'PENDING' &&
+                    row.requestedByOrganizationId !== null &&
+                    row.requestedByOrganizationId !== currentOrganization.id;
+
+                  return (
+                    <tr key={row.id} className="hover:bg-background-secondary/45">
+                      <td className="px-6 py-4 text-sm font-medium text-text-primary">
+                        {row.organizationName}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-text-secondary">{row.ownerEmail}</td>
+                      <td className="px-6 py-4 text-sm text-text-secondary">Link</td>
+                      <td className="px-6 py-4 text-center align-middle">
+                        <Badge variant={organizationLinkStatusVariant(row.status)} fixedWidth={false}>
+                          {formatLinkStatusLabel(row.status)}
+                        </Badge>
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <div className="inline-flex items-center gap-2">
+                          {canRespond && (
+                            <>
+                              <Button
+                                type="button"
+                                size="sm"
+                                isLoading={requestLinkRowId === row.id}
+                                disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
+                                onClick={() => void respondToPendingLink(row.id, 'ACCEPT')}
+                              >
+                                Accept
+                              </Button>
+                              <Button
+                                type="button"
+                                size="sm"
+                                variant="outline"
+                                isLoading={requestLinkRowId === row.id}
+                                disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
+                                onClick={() => void respondToPendingLink(row.id, 'REJECT')}
+                              >
+                                Reject
+                              </Button>
+                            </>
+                          )}
+                          {row.status === 'ACTIVE' && (
+                            <Button
+                              type="button"
+                              size="sm"
+                              variant="outline"
+                              isLoading={deleteLinkRowId === row.id}
+                              disabled={deleteLinkRowId !== null && deleteLinkRowId !== row.id}
+                              onClick={() => void deleteLinkedOrganization(row.id)}
+                            >
+                              Delete link
+                            </Button>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )
+            ) : searchResults.length > 0 ? (
+              searchResults.map((r) => (
+                <tr key={r.id} className="hover:bg-background-secondary/45">
+                  <td className="px-6 py-4 text-sm font-medium text-text-primary">{r.name}</td>
+                  <td className="px-6 py-4 text-sm text-text-secondary">{r.owner.email}</td>
+                  <td className="px-6 py-4 text-sm text-text-secondary">Directory match</td>
+                  <td className="px-6 py-4 text-center align-middle">
+                    <Badge variant="default" fixedWidth={false}>Found</Badge>
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <Button
+                      type="button"
+                      size="sm"
+                      isLoading={requestLinkRowId === r.id}
+                      disabled={requestLinkRowId !== null && requestLinkRowId !== r.id}
+                      onClick={() => void submitRequestLink(r.id)}
+                    >
+                      Send link request
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={5} className="px-6 py-6">
+                  <div className="flex flex-col gap-3">
+                    <p className="text-sm text-text-secondary">
+                      No organization found in directory search.
+                    </p>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Button type="button" onClick={() => setShowInviteForm((v) => !v)}>
+                        {showInviteForm ? 'Hide invitation fields' : 'Send invitation link'}
+                      </Button>
+                    </div>
+                    {showInviteForm && (
+                      <div className="grid gap-3 sm:grid-cols-3 mt-1">
+                        <Input
+                          label={`${counterpartLabel} name`}
+                          value={manualOrganizationName}
+                          onChange={(e) => setManualOrganizationName(e.target.value)}
+                        />
+                        <Input
+                          label="Owner email"
+                          type="email"
+                          value={manualOwnerEmail}
+                          onChange={(e) => setManualOwnerEmail(e.target.value)}
+                        />
+                        <div className="flex items-end">
                           <Button
                             type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={async () => {
-                              try {
-                                await navigator.clipboard.writeText(
-                                  pendingInviteLinks[item.id].invitationUrl,
-                                );
-                                setCopiedId(item.id);
-                                setTimeout(() => setCopiedId(null), 1500);
-                              } catch {
-                                setError('Could not copy invitation link');
-                              }
-                            }}
+                            isLoading={inviteLoading}
+                            disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
+                            onClick={() => void sendInvite()}
+                            className="w-full"
                           >
-                            {copiedId === item.id ? 'Copied' : 'Copy link'}
+                            Send invitation
                           </Button>
-                        )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
       </div>
+
+      {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>
+            ) : (
+              <div className="overflow-x-auto rounded-[var(--radius-md)] border border-border/70">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-border/70 text-left text-text-secondary">
+                      <th className="p-3 font-medium">Organization</th>
+                      <th className="p-3 font-medium">Owner email</th>
+                      <th className="p-3 font-medium">Status</th>
+                      <th className="p-3 font-medium">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {historyItems.map((inv) => (
+                      <tr key={inv.id} className="border-b border-border/40 last:border-0">
+                        <td className="p-3 text-text-primary">{inv.organizationName}</td>
+                        <td className="p-3 text-text-secondary">{inv.ownerEmail}</td>
+                        <td className="p-3">
+                          <Badge variant={organizationLinkStatusVariant(inv.status)} fixedWidth={false}>
+                            {formatInvitationStatusLabel(inv.status)}
+                          </Badge>
+                        </td>
+                        <td className="p-3">
+                          {inv.status === 'PENDING' ? (
+                            <Button
+                              type="button"
+                              size="sm"
+                              onClick={() => void copyInvitationLink(inv.id)}
+                            >
+                              {copiedId === inv.id ? 'Copied' : 'Copy link'}
+                            </Button>
+                          ) : (
+                            <span className="text-xs text-text-muted">—</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/lib/api/organization.ts

@@ -10,13 +10,21 @@ export interface CounterpartSearchResultDto {
 
 export interface CounterpartItemDto {
   id: string;
-  kind: 'LINK' | 'INVITATION';
+  requestedByOrganizationId: string | null;
   counterpartOrganizationId: string | null;
   organizationName: string;
   ownerEmail: string;
   phone: string | null;
   status: 'PENDING' | 'ACTIVE' | 'REJECTED' | 'EXPIRED';
-  invitationUrl: string | null;
+  createdAt: string;
+  acceptedAt: string | null;
+}
+
+export interface OrganizationInvitationHistoryItemDto {
+  id: string;
+  organizationName: string;
+  ownerEmail: string;
+  status: 'PENDING' | 'ACTIVE' | 'REJECTED' | 'EXPIRED';
   createdAt: string;
   acceptedAt: string | null;
 }
@@ -32,6 +40,14 @@ export const organizationApi = {
     return response.data;
   },
 
+  listInvitations: async (): Promise<{
+    success: boolean;
+    data: { items: OrganizationInvitationHistoryItemDto[] };
+  }> => {
+    const response = await apiClient.get('/organizations/invitations');
+    return response.data;
+  },
+
   createLink: async (
     targetOrganizationId: string,
   ): Promise<{ success: boolean; data: { id: string; status: 'PENDING' | 'ACTIVE' | 'REJECTED' } }> => {
@@ -39,6 +55,19 @@ export const organizationApi = {
     return response.data;
   },
 
+  respondLink: async (
+    linkId: string,
+    action: 'ACCEPT' | 'REJECT',
+  ): Promise<{ success: boolean; data: { id: string; status: 'PENDING' | 'ACTIVE' | 'REJECTED' } }> => {
+    const response = await apiClient.patch(`/organizations/links/${linkId}/respond`, { action });
+    return response.data;
+  },
+
+  deleteLink: async (linkId: string): Promise<{ success: boolean; data: { id: string }; message: string }> => {
+    const response = await apiClient.delete(`/organizations/links/${linkId}`);
+    return response.data;
+  },
+
   invite: async (body: {
     organizationName: string;
     ownerEmail: string;
@@ -48,6 +77,13 @@ export const organizationApi = {
     return response.data;
   },
 
+  getInvitationLink: async (
+    invitationId: string,
+  ): Promise<{ success: boolean; data: { invitationId: string; invitationUrl: string } }> => {
+    const response = await apiClient.post(`/organizations/invitations/${invitationId}/link`);
+    return response.data;
+  },
+
   previewInvite: async (
     token: string,
   ): Promise<{