feature: clinic & lab invitation flow added. minimal ui implemented for organizations tab.

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

@@ -1,10 +0,0 @@
-export default function LabPage() {
-  return (
-    <div className="space-y-3">
-      <h1 className="text-2xl font-semibold text-text-primary">Lab Management</h1>
-      <p className="text-sm text-text-secondary">
-        Lab management module is coming soon.
-      </p>
-    </div>
-  );
-}

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

@@ -0,0 +1,350 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { Check, Copy, Search, Send } from 'lucide-react';
+import { useAuth } from '@/lib/hooks/useAuth';
+import {
+  organizationApi,
+  type CounterpartItemDto,
+  type CounterpartSearchResultDto,
+} from '@/lib/api/organization';
+import { Button } from '@/components/ui/common/Button';
+import { Input } from '@/components/ui/common/Input';
+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 formatApiMessage(err: unknown): string {
+  if (!err || typeof err !== 'object') return 'Something went wrong';
+  const m = (err as ApiError).message;
+  if (Array.isArray(m)) return m.join(', ');
+  if (typeof m === 'string') return m;
+  return 'Something went wrong';
+}
+
+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 [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 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],
+  );
+
+  async function loadList() {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await organizationApi.list();
+      setItems(res.data.items);
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    if (!currentOrganization?.id) return;
+    setPendingInviteLinks(readStoredInviteLinks(currentOrganization.id));
+  }, [currentOrganization?.id]);
+
+  useEffect(() => {
+    void loadList();
+  }, []);
+
+  useEffect(() => {
+    if (!success) return;
+    const t = setTimeout(() => setSuccess(''), 4000);
+    return () => clearTimeout(t);
+  }, [success]);
+
+  async function runSearch() {
+    setSearchLoading(true);
+    setError('');
+    setSelectedOrgId(null);
+    try {
+      const res = await organizationApi.search(searchTerm.trim());
+      setResults(res.data);
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setSearchLoading(false);
+    }
+  }
+
+  async function createLink() {
+    if (!selectedOrgId) return;
+    setLinkLoading(true);
+    setError('');
+    try {
+      await organizationApi.createLink(selectedOrgId);
+      setSuccess(`${counterpartLabel} link request created`);
+      setResults([]);
+      setSelectedOrgId(null);
+      setSearchTerm('');
+      await loadList();
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setLinkLoading(false);
+    }
+  }
+
+  async function sendInvite() {
+    setInviteLoading(true);
+    setError('');
+    try {
+      const res = await organizationApi.invite({
+        organizationName: manualOrganizationName.trim(),
+        ownerEmail: manualOwnerEmail.trim(),
+        phone: manualPhone.trim() || undefined,
+      });
+      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);
+      }
+      setSuccess(`Invitation link created for ${manualOwnerEmail.trim()}`);
+      setManualOrganizationName('');
+      setManualOwnerEmail('');
+      setManualPhone('');
+      await loadList();
+    } catch (e) {
+      setError(formatApiMessage(e));
+    } finally {
+      setInviteLoading(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>
+
+      {error && (
+        <div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-300">
+          {error}
+        </div>
+      )}
+      {success && (
+        <div className="rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-4 py-3 text-sm text-text-primary">
+          {success}
+        </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()}>
+            <Search className="w-4 h-4 mr-2" />
+            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()}
+          >
+            <Send className="w-4 h-4 mr-2" />
+            Request link
+          </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>
+                </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">
+                      <span className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-text-primary">
+                        {item.status}
+                      </span>
+                    </td>
+                    <td className="p-3">
+                      {item.kind === 'INVITATION' &&
+                        item.status === 'PENDING' &&
+                        pendingInviteLinks[item.id]?.invitationUrl && (
+                          <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');
+                              }
+                            }}
+                          >
+                            {copiedId === item.id ? (
+                              <Check className="w-4 h-4" />
+                            ) : (
+                              <Copy className="w-4 h-4" />
+                            )}
+                            <span className="ml-1">
+                              {copiedId === item.id ? 'Copied' : 'Copy link'}
+                            </span>
+                          </Button>
+                        )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/(dashboard)/staff/components/staffPermissions.ts

@@ -2,7 +2,11 @@
 export const STAFF_FEATURE_GROUPS = [
   { label: 'Today', read: 'TAB_TODAY_READ', edit: 'TAB_TODAY_EDIT' },
   { label: 'Staff', read: 'TAB_STAFF_READ', edit: 'TAB_STAFF_EDIT' },
-  { label: 'Labs / Clinics', read: 'TAB_LAB_READ', edit: 'TAB_LAB_EDIT' },
+  {
+    label: 'Organizations',
+    read: 'TAB_ORGANIZATIONS_READ',
+    edit: 'TAB_ORGANIZATIONS_EDIT',
+  },
   { label: 'Patients', read: 'TAB_PATIENTS_READ', edit: 'TAB_PATIENTS_EDIT' },
   { label: 'Appointment', read: 'TAB_APPOINTMENTS_READ', edit: 'TAB_APPOINTMENTS_EDIT' },
   { label: 'Treatment', read: 'TAB_TREATMENT_READ', edit: 'TAB_TREATMENT_EDIT' },

frontend/src/app/(dashboard)/staff/staff-permission-form.ts

@@ -6,7 +6,7 @@
 export const STAFF_FEATURE_GROUPS = [
   { label: 'Today', read: 'TAB_TODAY_READ', edit: 'TAB_TODAY_EDIT' },
   { label: 'Staff', read: 'TAB_STAFF_READ', edit: 'TAB_STAFF_EDIT' },
-  { label: 'Labs', read: 'TAB_LAB_READ', edit: 'TAB_LAB_EDIT' },
+  { label: 'Organizations', read: 'TAB_ORGANIZATIONS_READ', edit: 'TAB_ORGANIZATIONS_EDIT' },
   { label: 'Patients', read: 'TAB_PATIENTS_READ', edit: 'TAB_PATIENTS_EDIT' },
   { label: 'Appointment', read: 'TAB_APPOINTMENTS_READ', edit: 'TAB_APPOINTMENTS_EDIT' },
   { label: 'Treatment', read: 'TAB_TREATMENT_READ', edit: 'TAB_TREATMENT_EDIT' },
@@ -21,7 +21,7 @@ export function resolveStaffFeatureLabel(
   group: (typeof STAFF_FEATURE_GROUPS)[number],
   organizationType: OrgType,
 ): string {
-  if (group.read === 'TAB_LAB_READ') {
+  if (group.read === 'TAB_ORGANIZATIONS_READ') {
     return organizationType === 'LAB' ? 'Clinics' : 'Labs';
   }
   return group.label;