@haiiro/docuflow 0.0.11 → 0.0.12

package/src/front-components/docflow-documents.front-component.tsx

@@ -1,23 +1,55 @@
 import { useEffect, useMemo, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import { AppPath, enqueueSnackbar, openSidePanelPage } from 'twenty-sdk/front-component';
-import { IconExternalLink, IconFolderSymlink, IconPencil, IconRestore, IconTrash } from 'twenty-ui/icon';
+import {
+  IconExternalLink,
+  IconFileText,
+  IconFolderSymlink,
+  IconPencil,
+  IconRestore,
+  IconTrash,
+} from 'twenty-ui/icon';
 import { useTheme } from 'twenty-ui/theme';
 
-import { createRecord, deleteRecord, getErrorMessage, listRecords, updateRecord } from 'src/front/api';
-import { DOCUMENT_TYPE_LABELS, formatDate } from 'src/front/format';
+import {
+  countRecords,
+  createRecord,
+  deleteRecord,
+  deleteRecords,
+  getErrorMessage,
+  listRecords,
+  restoreRecords,
+  updateRecord,
+  updateRecords,
+} from 'src/front/api';
+import {
+  DOCUMENT_ORIGIN_LABELS,
+  DOCUMENT_STATUS_COLORS,
+  DOCUMENT_STATUS_LABELS,
+  DOCUMENT_TYPE_LABELS,
+  formatDate,
+  formatMemberName,
+} from 'src/front/format';
 import { useAsync, useDebouncedValue } from 'src/front/hooks/use-async';
+import { useBulkAction } from 'src/front/hooks/use-bulk-action';
 import { type DocflowDocument, type DocumentFolder } from 'src/front/types';
 import {
   DataTable,
   DocflowRoot,
+  formatTotal,
+  ListToolbar,
   Message,
+  pluralize,
+  SelectionBar,
+  ShowMore,
+  type TableColumn,
   type TableSort,
   toRestOrderBy,
-  Toolbar,
+  useHiddenColumns,
+  useRowSelection,
 } from 'src/front/ui/components';
-import { type FolderAppearance, FolderList } from 'src/front/ui/folders';
-import { Button, type MenuAction, PromptDialog, SearchWithFilters } from 'src/front/ui/kit';
+import { type FolderAppearance, FolderList, useFolderColor } from 'src/front/ui/folders';
+import { BulkChangeDialog, Button, type MenuAction, MenuButton, PromptDialog, StatusChip, ViewTabs } from 'src/front/ui/kit';
 import { restAnd, restEq, restIlike, restIn, restIsNotNull, restOr } from 'src/shared/api/rest-filter.util';
 import { DOCUMENT_OBJECT_NAME, PAGE_SIZE } from 'src/shared/docflow.constants';
 import { logDocflow, logDocflowError } from 'src/shared/log.util';
@@ -29,12 +61,40 @@ const SEARCH_DEBOUNCE_MS = 300;
 const FOLDERS_LIMIT = 500;
 const ALL_FOLDERS = '';
 const ANY = 'any';
-
-type DocumentFilters = { status: string; origin: string; scope: 'active' | 'deleted' };
-
-const DEFAULT_FILTERS: DocumentFilters = { status: ANY, origin: ANY, scope: 'active' };
+const DOCUMENT_NOUN: [string, string, string] = ['документ', 'документа', 'документов'];
+
+// The quick views: a status, all of them, or the trash
+type DocumentView = 'all' | 'DRAFT' | 'IN_REVIEW' | 'APPROVED' | 'ARCHIVED' | 'deleted';
+type DocumentFilters = { origin: string; type: string };
+
+const VIEWS: { value: DocumentView; label: string }[] = [
+  { value: 'all', label: 'Все' },
+  { value: 'DRAFT', label: 'Черновики' },
+  { value: 'IN_REVIEW', label: 'На согласовании' },
+  { value: 'APPROVED', label: 'Согласованные' },
+  { value: 'ARCHIVED', label: 'В архиве' },
+  { value: 'deleted', label: 'Удалённые' },
+];
+
+const DEFAULT_FILTERS: DocumentFilters = { origin: ANY, type: ANY };
 const DEFAULT_SORT: TableSort = { key: 'createdAt', direction: 'desc' };
 
+const COLUMNS: TableColumn[] = [
+  { key: 'name', label: 'Название', width: '24%', sortKey: 'name' },
+  { key: 'type', label: 'Тип', width: '10%', sortKey: 'documentType' },
+  { key: 'status', label: 'Статус', width: '13%', sortKey: 'status' },
+  { key: 'number', label: 'Номер', width: '9%', sortKey: 'number' },
+  { key: 'documentDate', label: 'Дата документа', width: '10%', sortKey: 'documentDate' },
+  { key: 'counterparty', label: 'Контрагент', width: '13%' },
+  { key: 'responsible', label: 'Ответственный', width: '12%' },
+  { key: 'folder', label: 'Папка', width: '11%' },
+  { key: 'source', label: 'Где загружен', width: '14%', sortKey: 'sourceRecordName' },
+  { key: 'file', label: 'Файл', width: '7%' },
+  { key: 'createdAt', label: 'Добавлен', sortKey: 'createdAt' },
+];
+
+const STATUS_VALUES = ['DRAFT', 'IN_REVIEW', 'APPROVED', 'ARCHIVED'];
+
 // The sandbox of a front component gets only the name and size of a chosen
 // file, never its content, so the file goes in through the standard "File"
 // field of the document's own card, opened in the side panel.
@@ -56,39 +116,45 @@ const openDocumentCard = async (documentId: string) => {
   }
 };
 
+const viewFilter = (view: DocumentView) =>
+  // Deleted = in the Twenty trash, restored from here or the document's card
+  view === 'deleted' ? restIsNotNull('deletedAt') : view !== 'all' ? restEq('status', view) : undefined;
+
+const searchFilter = (searchQuery: string) =>
+  searchQuery.trim().length > 0
+    ? restOr(restIlike('name', searchQuery), restIlike('number', searchQuery), restIlike('sourceRecordName', searchQuery))
+    : undefined;
+
 const buildFilter = ({
   folderId,
+  view,
   filters,
   searchQuery,
 }: {
   folderId: string;
+  view: DocumentView;
   filters: DocumentFilters;
   searchQuery: string;
 }) =>
   restAnd(
     folderId !== ALL_FOLDERS ? restEq('folderId', folderId) : undefined,
-    // Deleted = in the Twenty trash, restored from the document's own card
-    filters.scope === 'deleted' ? restIsNotNull('deletedAt') : undefined,
-    filters.status !== ANY ? restEq('status', filters.status) : undefined,
+    viewFilter(view),
+    filters.type !== ANY ? restEq('documentType', filters.type) : undefined,
     filters.origin === 'collected'
       ? restIn('origin', ['RECORD', 'PROCESS'])
       : filters.origin === 'UPLOAD'
         ? restEq('origin', 'UPLOAD')
         : undefined,
-    searchQuery.trim().length > 0
-      ? restOr(
-          restIlike('name', searchQuery),
-          restIlike('number', searchQuery),
-          restIlike('sourceRecordName', searchQuery),
-        )
-      : undefined,
+    searchFilter(searchQuery),
   );
 
 const DocflowDocuments = () => {
   const theme = useTheme();
+  const folderColor = useFolderColor();
   const [searchInput, setSearchInput] = useState('');
   const searchQuery = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
   const [folderId, setFolderId] = useState(ALL_FOLDERS);
+  const [view, setView] = useState<DocumentView>('all');
   const [filters, setFilters] = useState<DocumentFilters>(DEFAULT_FILTERS);
   const [sort, setSort] = useState<TableSort>(DEFAULT_SORT);
   const [openedDocumentId, setOpenedDocumentId] = useState<string | undefined>();
@@ -96,6 +162,8 @@ const DocflowDocuments = () => {
   const [watchStartedAt, setWatchStartedAt] = useState<number | undefined>();
   const [pages, setPages] = useState(1);
   const [isCreating, setIsCreating] = useState(false);
+  const [bulkDialogOpen, setBulkDialogOpen] = useState(false);
+  const [hiddenColumns, setHiddenColumns] = useHiddenColumns(['documentDate', 'responsible', 'file']);
 
   const { data: folders, reload: reloadFolders } = useAsync(
     async () =>
@@ -109,20 +177,54 @@ const DocflowDocuments = () => {
   );
   const listQuery = useMemo(
     () => ({
-      filter: buildFilter({ folderId, filters, searchQuery }),
+      filter: buildFilter({ folderId, view, filters, searchQuery }),
       order_by: toRestOrderBy(sort),
       limit: PAGE_SIZE * pages,
       depth: 1,
     }),
-    [folderId, filters, searchQuery, sort, pages],
+    [folderId, view, filters, searchQuery, sort, pages],
   );
   const { data, setData, loading, error, reload } = useAsync(
     () => listRecords<DocflowDocument>('smbDocuments', listQuery),
     [listQuery],
   );
+  // The counts of the views follow the folder and the search
+  const { data: counts, reload: reloadCounts } = useAsync(
+    async () =>
+      Object.fromEntries(
+        await Promise.all(
+          VIEWS.map(async ({ value }) => [
+            value,
+            await countRecords(
+              'smbDocuments',
+              restAnd(
+                folderId !== ALL_FOLDERS ? restEq('folderId', folderId) : undefined,
+                viewFilter(value),
+                searchFilter(searchQuery),
+              ),
+            ),
+          ]),
+        ),
+      ) as Record<DocumentView, number>,
+    [folderId, searchQuery],
+  );
   const documents = data?.records ?? [];
-  const activeFilterCount =
-    (filters.status !== ANY ? 1 : 0) + (filters.origin !== ANY ? 1 : 0) + (filters.scope !== 'active' ? 1 : 0);
+  const selection = useRowSelection(documents.map(({ id }) => id));
+  const selectedIds = selection.selectedIds;
+  const activeFilterCount = (filters.origin !== ANY ? 1 : 0) + (filters.type !== ANY ? 1 : 0);
+  const folderName = (id: string | null | undefined) => folders?.find((folder) => folder.id === id)?.name?.trim();
+
+  const reloadAll = async () => {
+    await Promise.all([reload(), reloadCounts()]);
+  };
+
+  const bulk = useBulkAction({
+    onDone: async () => {
+      selection.clear();
+      setBulkDialogOpen(false);
+      await reloadAll();
+    },
+  });
 
   const changeFilters = (patch: Partial<DocumentFilters>) => {
     setFilters((current) => ({ ...current, ...patch }));
@@ -183,7 +285,7 @@ const DocflowDocuments = () => {
         throw new Error('документ создан, но сервер его не вернул');
       }
 
-      void reload();
+      void reloadAll();
       await openDocument(document.id);
     } catch (createError) {
       logDocflowError('documents: create failed', createError);
@@ -193,27 +295,20 @@ const DocflowDocuments = () => {
     }
   };
 
-  const handleUpdateDocument = async (documentId: string, patch: Record<string, unknown>, done: string) => {
-    try {
-      await updateRecord('smbDocuments', documentId, patch);
-      await enqueueSnackbar({ message: done, variant: 'success' });
-      await reload();
-    } catch (updateError) {
-      logDocflowError('documents: update failed', updateError, { documentId });
-      await notifyError(updateError, 'Не удалось изменить документ');
-    }
-  };
+  // One change for the given documents: a row's menu passes one id, the
+  // selection bar all checked ones.
+  const changeDocuments = (ids: string[], patch: Record<string, unknown>, done: string) =>
+    bulk.run(() => updateRecords('smbDocuments', ids, patch), done, 'Не удалось изменить документы');
 
-  const handleDeleteDocument = async (documentId: string) => {
-    try {
-      await deleteRecord('smbDocuments', documentId);
-      await enqueueSnackbar({ message: 'Документ удалён: он в фильтре «Удалённые»', variant: 'success' });
-      await reload();
-    } catch (deleteError) {
-      logDocflowError('documents: delete failed', deleteError, { documentId });
-      await notifyError(deleteError, 'Не удалось удалить документ');
-    }
-  };
+  const removeDocuments = (ids: string[]) =>
+    bulk.run(
+      () => deleteRecords('smbDocuments', ids),
+      ids.length === 1 ? 'Документ удалён: он в «Удалённых»' : `Удалено документов: ${ids.length}, они в «Удалённых»`,
+      'Не удалось удалить',
+    );
+
+  const restoreDocuments = (ids: string[]) =>
+    bulk.run(() => restoreRecords('smbDocuments', ids), `Восстановлено: ${ids.length}`, 'Не удалось восстановить');
 
   const handleCreateFolder = async (appearance: FolderAppearance) => {
     try {
@@ -257,6 +352,35 @@ const DocflowDocuments = () => {
     }
   };
 
+  // The menus that change several documents at once: status, type, folder
+  const statusActions = (ids: string[], current?: string | null): MenuAction[] =>
+    STATUS_VALUES.map((status) => ({
+      key: `status-${status}`,
+      section: 'Статус',
+      label: DOCUMENT_STATUS_LABELS[status],
+      isSelected: status === current,
+      onSelect: () => void changeDocuments(ids, { status }, `Статус: ${DOCUMENT_STATUS_LABELS[status]}`),
+    }));
+
+  const folderActions = (ids: string[], current?: string | null): MenuAction[] => [
+    ...(folders ?? []).map((folder) => ({
+      key: `folder-${folder.id}`,
+      section: 'В папку',
+      label: folder.name?.trim() || 'Без названия',
+      icon: IconFolderSymlink,
+      isSelected: folder.id === current,
+      onSelect: () =>
+        void changeDocuments(ids, { folderId: folder.id }, `Перемещено в «${folder.name?.trim() || 'Без названия'}»`),
+    })),
+    {
+      key: 'unfile',
+      section: 'В папку',
+      label: 'Без папки',
+      icon: IconFolderSymlink,
+      onSelect: () => void changeDocuments(ids, { folderId: null }, 'Убрано из папки'),
+    },
+  ];
+
   const documentActions = (documentId: string): MenuAction[] => {
     const document = documents.find(({ id }) => id === documentId);
 
@@ -264,54 +388,39 @@ const DocflowDocuments = () => {
       return [];
     }
 
-    if (filters.scope === 'deleted') {
+    if (view === 'deleted') {
       return [
-        { key: 'restore', label: 'Открыть и восстановить', icon: IconRestore, onSelect: () => void openDocument(documentId) },
+        { key: 'restore', label: 'Восстановить', icon: IconRestore, onSelect: () => void restoreDocuments([documentId]) },
+        { key: 'open', label: 'Открыть карточку', icon: IconExternalLink, onSelect: () => void openDocument(documentId) },
       ];
     }
 
     return [
       { key: 'open', label: 'Открыть карточку', icon: IconExternalLink, onSelect: () => void openDocument(documentId) },
       { key: 'rename', label: 'Переименовать', icon: IconPencil, onSelect: () => setRenamingDocument(document) },
-      ...(folders ?? [])
-        .filter((folder) => folder.id !== document.folderId)
-        .map((folder) => ({
-          key: `move-${folder.id}`,
-          label: `В папку «${folder.name?.trim() || 'Без названия'}»`,
-          icon: IconFolderSymlink,
-          onSelect: () =>
-            void handleUpdateDocument(documentId, { folderId: folder.id }, `Документ перемещён в «${folder.name ?? ''}»`),
-        })),
-      ...(typeof document.folderId === 'string' && document.folderId.length > 0
-        ? [
-            {
-              key: 'unfile',
-              label: 'Убрать из папки',
-              icon: IconFolderSymlink,
-              onSelect: () => void handleUpdateDocument(documentId, { folderId: null }, 'Документ убран из папки'),
-            },
-          ]
-        : []),
       {
         key: 'delete',
         label: 'Удалить',
         confirmLabel: 'Точно удалить?',
         icon: IconTrash,
-        tone: 'danger' as const,
-        onSelect: () => void handleDeleteDocument(documentId),
+        tone: 'danger',
+        onSelect: () => void removeDocuments([documentId]),
       },
+      ...statusActions([documentId], document.status),
+      ...folderActions([documentId], document.folderId),
     ];
   };
 
   return (
     <DocflowRoot>
       <div style={{ display: 'flex', flex: 1, flexDirection: 'column', minHeight: 0, overflowY: 'auto' }}>
-        <div style={{ display: 'flex', flex: 1, flexWrap: 'wrap', minHeight: 0 }}>
+        <div style={{ alignItems: 'flex-start', display: 'flex', flex: 1, flexWrap: 'wrap', minHeight: 0 }}>
           <div
             style={{
               boxSizing: 'border-box',
               flex: '1 1 200px',
               maxWidth: '240px',
+              minWidth: 0,
               padding: `${theme.spacing[4]} ${theme.spacing[3]} ${theme.spacing[4]} ${theme.spacing[5]}`,
             }}
           >
@@ -322,6 +431,7 @@ const DocflowDocuments = () => {
               onSelect={(id) => {
                 setFolderId(id);
                 setPages(1);
+                selection.clear();
               }}
               onCreate={handleCreateFolder}
               onUpdate={handleUpdateFolder}
@@ -329,26 +439,23 @@ const DocflowDocuments = () => {
             />
           </div>
           <div style={{ display: 'flex', flex: '999 1 420px', flexDirection: 'column', minWidth: 0 }}>
-            <Toolbar>
-              <SearchWithFilters
-                value={searchInput}
-                onChange={setSearchInput}
-                placeholder="Название, номер, где загружен"
-                activeFilterCount={activeFilterCount}
-                onResetFilters={() => changeFilters(DEFAULT_FILTERS)}
-                filters={[
+            <ListToolbar
+              search={{
+                value: searchInput,
+                onChange: setSearchInput,
+                placeholder: 'Название, номер, где загружен',
+                activeFilterCount,
+                onResetFilters: () => changeFilters(DEFAULT_FILTERS),
+                filters: [
                   {
-                    key: 'status',
-                    title: 'Статус',
-                    value: filters.status,
+                    key: 'type',
+                    title: 'Тип',
+                    value: filters.type,
                     options: [
                       { value: ANY, label: 'Любой' },
-                      { value: 'DRAFT', label: 'Черновики' },
-                      { value: 'IN_REVIEW', label: 'На согласовании' },
-                      { value: 'APPROVED', label: 'Согласованные' },
-                      { value: 'ARCHIVED', label: 'В архиве' },
+                      ...Object.entries(DOCUMENT_TYPE_LABELS).map(([value, label]) => ({ value, label })),
                     ],
-                    onChange: (value) => changeFilters({ status: value }),
+                    onChange: (value) => changeFilters({ type: value }),
                   },
                   {
                     key: 'origin',
@@ -361,70 +468,171 @@ const DocflowDocuments = () => {
                     ],
                     onChange: (value) => changeFilters({ origin: value }),
                   },
-                  {
-                    key: 'scope',
-                    title: 'Корзина',
-                    value: filters.scope,
-                    options: [
-                      { value: 'active', label: 'Действующие' },
-                      { value: 'deleted', label: 'Удалённые' },
-                    ],
-                    onChange: (value) => changeFilters({ scope: value as DocumentFilters['scope'] }),
-                  },
-                ]}
-              />
-              <div style={{ marginLeft: 'auto' }}>
-                <Button variant="solid" size="sm" loading={isCreating} onClick={() => void handleCreateDocument()}>
-                  Создать
-                </Button>
-              </div>
-            </Toolbar>
+                ],
+              }}
+              views={
+                <ViewTabs
+                  value={view}
+                  onChange={(next) => {
+                    setView(next);
+                    setPages(1);
+                    selection.clear();
+                  }}
+                  options={VIEWS.map((option) => ({ ...option, count: counts?.[option.value] }))}
+                />
+              }
+              total={data === undefined ? undefined : formatTotal(documents.length, data.totalCount, DOCUMENT_NOUN)}
+              columns={{ columns: COLUMNS, hiddenKeys: hiddenColumns, onChange: setHiddenColumns }}
+              onRefresh={() => void reloadAll()}
+              isRefreshing={loading}
+              onCreate={() => void handleCreateDocument()}
+              isCreating={isCreating}
+            />
             {error !== undefined && (
               <div style={{ padding: theme.spacing[4] }}>
                 <Message tone="danger">{getErrorMessage(error, 'Не удалось загрузить документы')}</Message>
               </div>
             )}
-            {loading && documents.length === 0 && <Message>Загрузка…</Message>}
+            {loading && data === undefined && <Message>Загрузка…</Message>}
             {!loading && error === undefined && documents.length === 0 && <Message>Документов нет.</Message>}
             {documents.length > 0 && (
               <DataTable
-                columns={[
-                  { key: 'name', label: 'Название', width: '30%', sortKey: 'name' },
-                  { key: 'type', label: 'Тип', width: '14%', sortKey: 'documentType' },
-                  { key: 'number', label: 'Номер', width: '12%', sortKey: 'number' },
-                  { key: 'source', label: 'Где загружен', width: '24%', sortKey: 'sourceRecordName' },
-                  { key: 'createdAt', label: 'Добавлен', sortKey: 'createdAt' },
-                ]}
+                columns={COLUMNS}
+                hiddenColumnKeys={hiddenColumns}
                 sort={sort}
                 onSortChange={(next) => {
                   setSort(next);
                   setPages(1);
                 }}
                 selectedRowId={openedDocumentId}
+                selectedIds={selectedIds}
+                onSelectionChange={selection.setSelectedIds}
                 onRowClick={(documentId) => void openDocument(documentId)}
                 rowActions={documentActions}
-                rows={documents.map((document) => ({
-                  id: document.id,
-                  cells: {
-                    name: document.name?.trim() || 'Без названия',
-                    type: DOCUMENT_TYPE_LABELS[document.documentType ?? ''],
-                    number: document.number,
-                    source: document.sourceRecordName,
-                    createdAt: formatDate(document.createdAt),
-                  },
-                }))}
+                rows={documents.map((document) => {
+                  const fileCount = document.file?.length ?? 0;
+                  const folder = folders?.find(({ id }) => id === document.folderId);
+
+                  return {
+                    id: document.id,
+                    cells: {
+                      name: (
+                        <span style={{ alignItems: 'center', display: 'inline-flex', gap: theme.spacing[1], maxWidth: '100%' }}>
+                          <IconFileText size={theme.icon.size.md} stroke={theme.icon.stroke.sm} color={theme.font.color.tertiary} />
+                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{document.name?.trim() || 'Без названия'}</span>
+                        </span>
+                      ),
+                      type: DOCUMENT_TYPE_LABELS[document.documentType ?? ''] ?? '—',
+                      status: document.status ? (
+                        <StatusChip color={DOCUMENT_STATUS_COLORS[document.status] ?? 'gray'}>
+                          {DOCUMENT_STATUS_LABELS[document.status] ?? document.status}
+                        </StatusChip>
+                      ) : (
+                        '—'
+                      ),
+                      number: document.number || '—',
+                      documentDate: formatDate(document.documentDate) || '—',
+                      counterparty: document.counterparty?.name || '—',
+                      responsible: formatMemberName(document.responsible ?? undefined) || '—',
+                      folder: folder ? (
+                        <span style={{ alignItems: 'center', display: 'inline-flex', gap: theme.spacing[1] }}>
+                          <span style={{ background: folderColor(folder.color), flexShrink: 0, height: '8px', width: '8px' }} />
+                          {folderName(folder.id) || 'Без названия'}
+                        </span>
+                      ) : (
+                        '—'
+                      ),
+                      source: document.sourceRecordName || DOCUMENT_ORIGIN_LABELS[document.origin ?? ''] || '—',
+                      file: fileCount > 0 ? `${fileCount} шт.` : 'нет',
+                      createdAt: formatDate(document.createdAt),
+                    },
+                  };
+                })}
               />
             )}
-            {data?.pageInfo.hasNextPage === true && (
-              <div style={{ display: 'flex', justifyContent: 'center', padding: theme.spacing[3] }}>
-                <Button variant="ghost" size="sm" loading={loading} onClick={() => setPages((current) => current + 1)}>
-                  Показать ещё
+            <ShowMore isVisible={data?.pageInfo.hasNextPage === true} loading={loading} onClick={() => setPages((current) => current + 1)} />
+            <SelectionBar count={selectedIds.length} noun={DOCUMENT_NOUN} onClear={selection.clear}>
+              {view === 'deleted' ? (
+                <Button icon={IconRestore} loading={bulk.isBusy} onClick={() => void restoreDocuments(selectedIds)}>
+                  Восстановить
                 </Button>
-              </div>
-            )}
+              ) : (
+                <>
+                  <Button icon={IconPencil} disabled={bulk.isBusy} onClick={() => setBulkDialogOpen(true)}>
+                    Изменить
+                  </Button>
+                  <MenuButton
+                    label="Удалить"
+                    icon={IconTrash}
+                    disabled={bulk.isBusy}
+                    actions={[
+                      {
+                        key: 'delete',
+                        label: `Удалить выбранные (${selectedIds.length})`,
+                        confirmLabel: 'Точно удалить?',
+                        icon: IconTrash,
+                        tone: 'danger',
+                        onSelect: () => void removeDocuments(selectedIds),
+                      },
+                    ]}
+                  />
+                </>
+              )}
+            </SelectionBar>
           </div>
         </div>
       </div>
+      {bulkDialogOpen && (
+        <BulkChangeDialog
+          title="Изменить поле"
+          hint={`Для ${selectedIds.length} ${pluralize(selectedIds.length, DOCUMENT_NOUN)}`}
+          fields={[
+            {
+              key: 'status',
+              label: 'Статус',
+              options: STATUS_VALUES.map((status) => ({ value: status, label: DOCUMENT_STATUS_LABELS[status] })),
+            },
+            {
+              key: 'documentType',
+              label: 'Тип',
+              options: Object.entries(DOCUMENT_TYPE_LABELS).map(([type, label]) => ({ value: type, label })),
+            },
+            {
+              key: 'folderId',
+              label: 'Папка',
+              options: [
+                ...(folders ?? []).map((folder) => ({
+                  value: folder.id,
+                  label: folder.name?.trim() || 'Без названия',
+                })),
+                { value: '', label: 'Без папки' },
+              ],
+            },
+          ]}
+          onClose={() => setBulkDialogOpen(false)}
+          onSubmit={(fieldKey, value) => {
+            if (fieldKey === 'status') {
+              return changeDocuments(selectedIds, { status: value }, `Статус: ${DOCUMENT_STATUS_LABELS[value]}`);
+            }
+
+            if (fieldKey === 'documentType') {
+              return changeDocuments(
+                selectedIds,
+                { documentType: value },
+                `Тип: ${DOCUMENT_TYPE_LABELS[value] ?? value}`,
+              );
+            }
+
+            return changeDocuments(
+              selectedIds,
+              { folderId: value.length > 0 ? value : null },
+              value.length > 0
+                ? `Перемещено в «${(folders ?? []).find((folder) => folder.id === value)?.name?.trim() || 'Без названия'}»`
+                : 'Убрано из папки',
+            );
+          }}
+        />
+      )}
       {renamingDocument !== undefined && (
         <PromptDialog
           title="Переименовать документ"
@@ -432,7 +640,7 @@ const DocflowDocuments = () => {
           initialValue={renamingDocument.name ?? ''}
           onClose={() => setRenamingDocument(undefined)}
           onSubmit={async (name) => {
-            await handleUpdateDocument(renamingDocument.id, { name }, 'Документ переименован');
+            await changeDocuments([renamingDocument.id], { name }, 'Документ переименован');
             setRenamingDocument(undefined);
           }}
         />