app now responsive for mobile and small devices.

2026-07-11 17:10:02 +03:30
parent 893cd5b128
commit 2f7df312c1
49 changed files with 1710 additions and 775 deletions
--- a/frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx
+++ b/frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx
@@ -10,6 +10,7 @@ import { organizationApi } from '@/lib/api/organization';
 import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
 import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
 import { Button } from '@/components/ui/shared/Button';
+import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
@@ -51,6 +52,7 @@ export function ConnectionCaseHistoryContent({
    totalPages: 1,
  });
  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
  const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
  const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
  const [loadingList, setLoadingList] = useState(false);
@@ -152,6 +154,12 @@ export function ConnectionCaseHistoryContent({
    };
  }, [selectedCaseId, connection.id, showError, setError]);

+  useEffect(() => {
+    if (!selectedCaseId) {
+      setMobileDetailOpen(false);
+    }
+  }, [selectedCaseId]);
+
  function scrollToComments() {
    document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
  }
@@ -193,7 +201,7 @@ export function ConnectionCaseHistoryContent({
      </div>

      <div>
-        <h1 className="text-2xl font-semibold text-text-primary">
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">
          {t('caseHistoryTitle', { name: connection.organizationName })}
        </h1>
        <p className="text-sm text-text-secondary mt-1">
@@ -204,7 +212,11 @@ export function ConnectionCaseHistoryContent({
      <ToastStack {...toastMessages} />

      <div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
-        <section className="rounded-lg border border-border bg-surface p-4 space-y-3 flex flex-col min-h-0">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
+            mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
+          }`}
+        >
          <SearchBar
            embedded
            value={search}
@@ -229,7 +241,10 @@ export function ConnectionCaseHistoryContent({
                    <li key={item.id}>
                      <button
                        type="button"
-                        onClick={() => setSelectedCaseId(item.id)}
+                        onClick={() => {
+                          setSelectedCaseId(item.id);
+                          setMobileDetailOpen(true);
+                        }}
                        className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
                          isActive
                            ? 'border-primary bg-primary/5'
@@ -292,7 +307,14 @@ export function ConnectionCaseHistoryContent({
          ) : null}
        </section>

-        <section className="rounded-lg border border-border bg-surface p-4 min-h-[420px]">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
+            selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
+          }`}
+        >
+          {mobileDetailOpen && selectedCaseId ? (
+            <MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
+          ) : null}
          {!selectedCaseId ? (
            <p className="text-sm text-text-muted">{tCases('selectCaseHint')}</p>
          ) : loadingDetail || !selectedCase ? (
--- a/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
+++ b/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
@@ -2,6 +2,11 @@

 import { useTranslations } from 'next-intl';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { Card } from '@/components/ui/shared/Card';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { ToastStack, type ToastMessages } from '@/components/ui/shared/Toast';
 import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
 import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shared/Badge';
@@ -51,12 +56,13 @@ export function InvitationHistoryDialog({
  if (!open) return null;

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div
-        className="w-full max-w-[min(56rem,calc(100vw-15rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+    <ResponsiveDialogOverlay onBackdropClick={onClose}>
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-4xl"
        role="dialog"
        aria-modal="true"
        aria-labelledby="invitation-history-title"
+        className="space-y-4"
      >
        <div className="flex items-start justify-between gap-3">
          <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary pr-2">
@@ -72,55 +78,86 @@ export function InvitationHistoryDialog({
        ) : items.length === 0 ? (
          <p className="text-sm text-text-secondary">{t('historyEmpty')}</p>
        ) : (
-          <Table
-            headers={
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableOrganization')}
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableOwnerEmail')}
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableDate')}
-                </th>
-                <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableStatus')}
-                </th>
-                <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableInvitationLink')}
-                </th>
-              </tr>
-            }
-            body={
-              <>
-                {items.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">
+          <>
+            <ul className="space-y-3 lg:hidden">
+              {items.map((inv) => (
+                <li key={inv.id}>
+                  <Card padding="sm" className="space-y-2">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="font-medium text-text-primary truncate">{inv.organizationName}</p>
+                        <p className="text-sm text-text-secondary truncate mt-0.5">{inv.ownerEmail}</p>
+                        <p className="text-xs text-text-muted mt-1">{formatTableDate(inv.createdAt)}</p>
+                      </div>
                      <Badge variant={organizationConnectionStatusVariant(inv.status)} fixedWidth={false}>
                        {formatInvitationStatusLabel(inv.status)}
                      </Badge>
-                    </td>
-                    <td className="px-6 py-1.5 text-right align-middle">
+                    </div>
+                    <div className="flex justify-end pt-1 border-t border-border/60">
                      <CopyInvitationLinkButton
                        invitation={inv}
                        copied={copiedId === inv.id}
                        copying={copyingInvitationId === inv.id}
                        onCopy={() => onCopy(inv)}
                      />
-                    </td>
+                    </div>
+                  </Card>
+                </li>
+              ))}
+            </ul>
+
+            <div className="hidden lg:block">
+              <Table
+                headers={
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableOrganization')}
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableOwnerEmail')}
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableDate')}
+                    </th>
+                    <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableStatus')}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableInvitationLink')}
+                    </th>
                  </tr>
-                ))}
-              </>
-            }
-          />
+                }
+                body={
+                  <>
+                    {items.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={organizationConnectionStatusVariant(inv.status)} fixedWidth={false}>
+                            {formatInvitationStatusLabel(inv.status)}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-1.5 text-right align-middle">
+                          <CopyInvitationLinkButton
+                            invitation={inv}
+                            copied={copiedId === inv.id}
+                            copying={copyingInvitationId === inv.id}
+                            onCopy={() => onCopy(inv)}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </>
+                }
+              />
+            </div>
+          </>
        )}
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
  );
 }
--- a/frontend/src/components/ui/organizations/OrganizationConnectionsMobileList.tsx
+++ b/frontend/src/components/ui/organizations/OrganizationConnectionsMobileList.tsx
@@ -0,0 +1,258 @@
+'use client';
+
+import { Check, History, Trash2, UserPlus, X } from 'lucide-react';
+import type {
+  CounterpartItemDto,
+  CounterpartSearchResultDto,
+} from '@/lib/api/organization';
+import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shared/Badge';
+import { Button } from '@/components/ui/shared/Button';
+import { Card } from '@/components/ui/shared/Card';
+import { Input } from '@/components/ui/shared/Input';
+import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
+import type { InvitationLinkTarget } from '@/components/invitations/organizationInviteLinks';
+
+type OrganizationConnectionsMobileListProps = {
+  loading: boolean;
+  mode: 'existing' | 'search';
+  existingRows: CounterpartItemDto[];
+  searchResults: CounterpartSearchResultDto[];
+  currentOrganizationId: string;
+  counterpart: string;
+  pendingConnectionRowId: string | null;
+  deleteConnectionRowId: string | null;
+  copiedId: string | null;
+  copyingInvitationId: string | null;
+  showInviteForm: boolean;
+  manualOrganizationName: string;
+  manualOwnerEmail: string;
+  inviteLoading: boolean;
+  formatConnectionStatusLabel: (row: CounterpartItemDto, orgId: string) => string;
+  formatTableDate: (value: string) => string;
+  getInvitationTarget: (row: CounterpartItemDto) => InvitationLinkTarget | null;
+  onCopyInvitation: (row: CounterpartItemDto) => void;
+  onRespond: (rowId: string, action: 'ACCEPT' | 'REJECT') => void;
+  onViewCaseHistory: (row: CounterpartItemDto) => void;
+  onDeleteConnection: (rowId: string) => void;
+  onSendConnectionRequest: (orgId: string) => void;
+  onToggleInviteForm: () => void;
+  onManualOrganizationNameChange: (value: string) => void;
+  onManualOwnerEmailChange: (value: string) => void;
+  onSendInvite: () => void;
+  labels: {
+    loading: string;
+    emptyConnections: string;
+    noDirectoryResults: string;
+    hideInvitationFields: string;
+    sendInvitationLink: string;
+    counterpartNameLabel: string;
+    ownerEmailLabel: string;
+    sendInvitation: string;
+    sendRequest: string;
+    acceptRequest: string;
+    declineRequest: string;
+    viewCaseHistory: string;
+    removeConnection: string;
+    statusToday: string;
+    statusFound: string;
+  };
+};
+
+export function OrganizationConnectionsMobileList({
+  loading,
+  mode,
+  existingRows,
+  searchResults,
+  currentOrganizationId,
+  counterpart,
+  pendingConnectionRowId,
+  deleteConnectionRowId,
+  copiedId,
+  copyingInvitationId,
+  showInviteForm,
+  manualOrganizationName,
+  manualOwnerEmail,
+  inviteLoading,
+  formatConnectionStatusLabel,
+  formatTableDate,
+  getInvitationTarget,
+  onCopyInvitation,
+  onRespond,
+  onViewCaseHistory,
+  onDeleteConnection,
+  onSendConnectionRequest,
+  onToggleInviteForm,
+  onManualOrganizationNameChange,
+  onManualOwnerEmailChange,
+  onSendInvite,
+  labels,
+}: OrganizationConnectionsMobileListProps) {
+  if (loading) {
+    return <p className="text-sm text-text-secondary lg:hidden">{labels.loading}</p>;
+  }
+
+  if (mode === 'existing') {
+    if (existingRows.length === 0) {
+      return (
+        <p className="text-sm text-text-secondary lg:hidden surface-card p-4">
+          {labels.emptyConnections}
+        </p>
+      );
+    }
+
+    return (
+      <ul className="space-y-3 lg:hidden">
+        {existingRows.map((row) => {
+          const canRespond =
+            row.status === 'PENDING' &&
+            row.requestedByOrganizationId !== null &&
+            row.requestedByOrganizationId !== currentOrganizationId;
+          const invitationTarget = getInvitationTarget(row);
+
+          return (
+            <li key={row.id}>
+              <Card padding="sm" className="space-y-3">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="font-medium text-text-primary truncate">{row.organizationName}</p>
+                    <p className="text-sm text-text-secondary truncate mt-0.5">{row.ownerEmail}</p>
+                    <p className="text-xs text-text-muted mt-1">{formatTableDate(row.createdAt)}</p>
+                  </div>
+                  <Badge variant={organizationConnectionStatusVariant(row.status)} fixedWidth={false}>
+                    {formatConnectionStatusLabel(row, currentOrganizationId)}
+                  </Badge>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-1.5 pt-1 border-t border-border/60">
+                  {invitationTarget ? (
+                    <CopyInvitationLinkButton
+                      invitation={invitationTarget}
+                      copied={copiedId === invitationTarget.id}
+                      copying={copyingInvitationId === invitationTarget.id}
+                      onCopy={() => onCopyInvitation(row)}
+                    />
+                  ) : null}
+                  {canRespond ? (
+                    <>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                        disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
+                        onClick={() => onRespond(row.id, 'ACCEPT')}
+                        aria-label={labels.acceptRequest}
+                        title={labels.acceptRequest}
+                      >
+                        <Check className="w-4 h-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
+                        disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
+                        onClick={() => onRespond(row.id, 'REJECT')}
+                        aria-label={labels.declineRequest}
+                        title={labels.declineRequest}
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </>
+                  ) : null}
+                  {row.status === 'ACTIVE' ? (
+                    <>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
+                        onClick={() => onViewCaseHistory(row)}
+                        aria-label={labels.viewCaseHistory}
+                        title={labels.viewCaseHistory}
+                      >
+                        <History className="w-4 h-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
+                        disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
+                        onClick={() => onDeleteConnection(row.id)}
+                        aria-label={labels.removeConnection}
+                        title={labels.removeConnection}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </>
+                  ) : null}
+                </div>
+              </Card>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  if (searchResults.length > 0) {
+    return (
+      <ul className="space-y-3 lg:hidden">
+        {searchResults.map((result) => (
+          <li key={result.id}>
+            <Card padding="sm" className="space-y-3">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="font-medium text-text-primary truncate">{result.name}</p>
+                  <p className="text-sm text-text-secondary truncate mt-0.5">{result.owner.email}</p>
+                  <p className="text-xs text-text-muted mt-1">{labels.statusToday}</p>
+                </div>
+                <Badge variant="default" fixedWidth={false}>
+                  {labels.statusFound}
+                </Badge>
+              </div>
+              <div className="flex justify-end pt-1 border-t border-border/60">
+                <button
+                  type="button"
+                  className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                  disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== result.id}
+                  onClick={() => onSendConnectionRequest(result.id)}
+                  aria-label={labels.sendRequest}
+                  title={labels.sendRequest}
+                >
+                  <UserPlus className="w-4 h-4" />
+                </button>
+              </div>
+            </Card>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <div className="lg:hidden surface-card p-4 space-y-3">
+      <p className="text-sm text-text-secondary">{labels.noDirectoryResults}</p>
+      <Button type="button" onClick={onToggleInviteForm} className="w-full sm:w-auto">
+        {showInviteForm ? labels.hideInvitationFields : labels.sendInvitationLink}
+      </Button>
+      {showInviteForm ? (
+        <div className="grid gap-3">
+          <Input
+            label={labels.counterpartNameLabel}
+            value={manualOrganizationName}
+            onChange={(e) => onManualOrganizationNameChange(e.target.value)}
+          />
+          <Input
+            label={labels.ownerEmailLabel}
+            type="email"
+            value={manualOwnerEmail}
+            onChange={(e) => onManualOwnerEmailChange(e.target.value)}
+          />
+          <Button
+            type="button"
+            isLoading={inviteLoading}
+            disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
+            onClick={onSendInvite}
+            className="w-full"
+          >
+            {labels.sendInvitation}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
+++ b/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
@@ -62,7 +62,7 @@ export function OrganizationSelectorContent() {
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-3xl font-semibold text-text-primary">{t('selectorTitle')}</h1>
+          <h1 className="text-2xl sm:text-3xl font-semibold text-text-primary">{t('selectorTitle')}</h1>
          <p className="text-text-secondary mt-2">
            {canCreateOrganization ? t('selectorSubtitleWithCreate') : t('selectorSubtitleSelectOnly')}
          </p>
@@ -71,6 +71,7 @@ export function OrganizationSelectorContent() {
          <Button
            type="button"
            variant={isCreateOpen ? 'outline' : 'primary'}
+            className="w-full sm:w-auto shrink-0"
            onClick={() => {
              clearError();
              setIsCreateOpen((prev) => !prev);
@@ -82,7 +83,7 @@ export function OrganizationSelectorContent() {
      </div>

      {canCreateOrganization && isCreateOpen && (
-        <div className="surface-card p-6 space-y-4">
+        <div className="surface-card p-4 sm:p-6 space-y-4">
          <Input
            label={tAuth('organizationName')}
            value={organizationName}
@@ -102,7 +103,7 @@ export function OrganizationSelectorContent() {
            <label className="block text-sm font-medium text-text-secondary mb-2">
              {tAuth('organizationType')}
            </label>
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setOrganizationType('CLINIC')}
@@ -132,13 +133,14 @@ export function OrganizationSelectorContent() {
              <p className="text-sm text-red-600">{error}</p>
            </div>
          )}
-          <div className="flex justify-end">
+          <div className="flex flex-col sm:flex-row sm:justify-end">
            <Button
              type="button"
              variant="primary"
              onClick={handleCreateOrganization}
              isLoading={isLoading}
              disabled={!organizationName.trim() || !organizationEmail.trim()}
+              className="w-full sm:w-auto"
            >
              {t('createAndContinue')}
            </Button>
@@ -158,14 +160,14 @@ export function OrganizationSelectorContent() {
            <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"
+              className="surface-card p-4 sm:p-6 transition-all text-left flex items-center gap-3 sm:gap-4 hover:border-primary/60 w-full min-w-0"
            >
-              <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
+              <div className="p-2.5 sm:p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary shrink-0">
                {getIcon(org.type)}
              </div>

-              <div className="flex-1">
-                <h3 className="text-lg font-semibold text-text-primary">
+              <div className="flex-1 min-w-0">
+                <h3 className="text-base sm:text-lg font-semibold text-text-primary truncate">
                  {org.name}
                </h3>
                <p className="text-sm text-text-secondary">
@@ -173,7 +175,7 @@ export function OrganizationSelectorContent() {
                </p>
              </div>

-              <div className="text-primary text-sm">
+              <div className="text-primary text-sm shrink-0 hidden sm:block">
                {t('continueArrow')}
              </div>
            </button>