@haiiro/docuflow 0.0.11 → 0.0.13

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

@@ -1,34 +1,69 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import { AppPath, enqueueSnackbar, openSidePanelPage } from 'twenty-sdk/front-component';
-import { IconExternalLink, IconEye, IconRestore, IconTrash } from 'twenty-ui/icon';
-import { Tag } from 'twenty-ui/primitives/data-display';
+import {
+  IconCheck,
+  IconExternalLink,
+  IconEye,
+  IconPencil,
+  IconPlayerPlay,
+  IconRestore,
+  IconTrash,
+} from 'twenty-ui/icon';
 import { useTheme } from 'twenty-ui/theme';
 
-import { createRecord, deleteRecord, getErrorMessage, listRecords } from 'src/front/api';
-import { formatDate, formatMemberName, isOverdue, TASK_STATUS_LABELS } from 'src/front/format';
+import {
+  callAppRoute,
+  countRecords,
+  createRecord,
+  deleteRecords,
+  getErrorMessage,
+  listRecords,
+  restoreRecords,
+  updateRecords,
+} from 'src/front/api';
+import {
+  describeDue,
+  formatDate,
+  formatMemberName,
+  TASK_STATUS_COLORS,
+  TASK_STATUS_LABELS,
+} from 'src/front/format';
 import { useAsync, useDebouncedValue } from 'src/front/hooks/use-async';
+import { useBulkAction } from 'src/front/hooks/use-bulk-action';
 import { useWorkspaceMembers } from 'src/front/hooks/use-workspace-members';
-import { type DocflowTask } from 'src/front/types';
+import { getTaskFieldProgress, isProcessTask } from 'src/front/tasks';
+import { type DocflowTask, type WorkspaceMember } from 'src/front/types';
 import {
   DataTable,
   DocflowRoot,
+  formatTotal,
+  ListToolbar,
   Message,
+  pluralize,
+  ProgressBar,
   SectionTitle,
   SelectField,
+  SelectionBar,
+  ShowMore,
   SplitView,
   TextAreaField,
   TextField,
+  type TableColumn,
   type TableSort,
   toRestOrderBy,
-  Toolbar,
+  useHiddenColumns,
+  useRowSelection,
 } from 'src/front/ui/components';
 import { FormFieldsBuilder } from 'src/front/ui/form-fields-builder';
-import { Button, SearchWithFilters } from 'src/front/ui/kit';
+import { BulkChangeDialog, Button, type MenuAction, MenuButton, StatusChip, ViewTabs } from 'src/front/ui/kit';
+
+import { UrgentTaskCards } from 'src/front/ui/task-cards';
 import { TaskWorkPanel } from 'src/front/ui/task-work-panel';
 import {
   restAnd,
   restEq,
+  restGte,
   restIlike,
   restIsNotNull,
   restIsNull,
@@ -41,64 +76,112 @@ import { type FormField } from 'src/shared/form/form-field.type';
 import { getFormFieldsError } from 'src/shared/form/form-fields.util';
 import { TASKS_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/universal-identifiers';
 
-type TaskFilter = 'open' | 'mine' | 'overdue' | 'done' | 'archived';
+type TaskView = 'open' | 'mine' | 'done';
+type TaskFilters = {
+  source: 'any' | 'process' | 'own';
+  due: 'any' | 'overdue' | 'week' | 'none';
+  assignee: string;
+  // Deleted = in the Twenty trash, restored from here
+  scope: 'active' | 'deleted';
+};
 type Panel = { kind: 'closed' } | { kind: 'create' } | { kind: 'task'; taskId: string };
+type BulkDialog = 'change' | undefined;
 
 const SEARCH_DEBOUNCE_MS = 300;
 const NO_ASSIGNEE = '';
+const ANY = 'any';
+const NOBODY = 'nobody';
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+// A task of mine due within this many days is a card above the table
+const URGENT_DAYS = 3;
+const URGENT_LIMIT = 30;
+const TASK_IN_PROGRESS_STATUS = 'IN_PROGRESS';
+const TASK_NOUN: [string, string, string] = ['задание', 'задания', 'заданий'];
 
-const TASK_FILTER_OPTIONS: { value: TaskFilter; label: string }[] = [
+const VIEWS: { value: TaskView; label: string }[] = [
   { value: 'open', label: 'Открытые' },
   { value: 'mine', label: 'Мои' },
-  { value: 'overdue', label: 'Просроченные' },
   { value: 'done', label: 'Выполненные' },
-  { value: 'archived', label: 'Архив (удалённые)' },
 ];
 
-const DEFAULT_SORT: TableSort = { key: 'createdAt', direction: 'desc' };
+const DEFAULT_FILTERS: TaskFilters = { source: 'any', due: 'any', assignee: ANY, scope: 'active' };
+const DEFAULT_SORT: TableSort = { key: 'dueAt', direction: 'asc' };
+
+const COLUMNS: TableColumn[] = [
+  { key: 'title', label: 'Задание', width: '30%', sortKey: 'title' },
+  { key: 'assignee', label: 'Исполнитель', width: '15%', sortKey: 'assigneeId' },
+  { key: 'dueAt', label: 'Срок', width: '15%', sortKey: 'dueAt' },
+  { key: 'fields', label: 'Поля', width: '11%' },
+  { key: 'status', label: 'Статус', width: '13%', sortKey: 'status' },
+  { key: 'source', label: 'Откуда', width: '10%' },
+  { key: 'createdAt', label: 'Создано', sortKey: 'createdAt' },
+];
 
 const OPEN_FILTER = restOr(restNeq('status', TASK_DONE_STATUS), restIsNull('status'));
 
-// An archived task opens in its standard card: Twenty shows it as deleted
-// there and offers to restore it.
 // A task opens in its standard card too; a deleted one shows "Восстановить" there
-const openArchivedTask = (taskId: string) =>
+const openTaskCard = (taskId: string) =>
   openSidePanelPage({
     to: AppPath.RecordShowPage,
     params: { objectNameSingular: 'task', objectRecordId: taskId },
     pageTitle: 'Задание',
   });
 
+// In the trash a task shows whatever its status was
+const viewFilter = (view: TaskView, currentMemberId: string | undefined, isTrash = false) =>
+  restAnd(
+    isTrash ? restIsNotNull('deletedAt') : view === 'done' ? restEq('status', TASK_DONE_STATUS) : OPEN_FILTER,
+    view === 'mine'
+      ? currentMemberId !== undefined
+        ? restEq('assigneeId', currentMemberId)
+        : restIsNull('assigneeId')
+      : undefined,
+  );
+
 // The list is filtered by the server, so a long history of tasks never
 // travels to the browser.
 const buildFilter = ({
-  taskFilter,
+  view,
+  filters,
   searchQuery,
   currentMemberId,
   now,
+  weekAhead,
 }: {
-  taskFilter: TaskFilter;
+  view: TaskView;
+  filters: TaskFilters;
   searchQuery: string;
   currentMemberId: string | undefined;
   now: string;
+  weekAhead: string;
 }) =>
   restAnd(
     restEq('smbSection', DOCFLOW_SECTION),
-    // Archived = deleted in Twenty (kept in its trash): any status
-    taskFilter === 'archived'
-      ? restIsNotNull('deletedAt')
-      : taskFilter === 'done'
-        ? restEq('status', TASK_DONE_STATUS)
-        : OPEN_FILTER,
-    taskFilter === 'mine'
-      ? currentMemberId !== undefined
-        ? restEq('assigneeId', currentMemberId)
-        : restIsNull('assigneeId')
-      : undefined,
-    taskFilter === 'overdue' ? restLt('dueAt', now) : undefined,
+    viewFilter(view, currentMemberId, filters.scope === 'deleted'),
+    filters.source === 'process' ? restIsNotNull('smbWorkflowThreadId') : undefined,
+    filters.source === 'own' ? restIsNull('smbWorkflowThreadId') : undefined,
+    filters.due === 'overdue' ? restLt('dueAt', now) : undefined,
+    filters.due === 'week' ? restAnd(restIsNotNull('dueAt'), restLt('dueAt', weekAhead)) : undefined,
+    filters.due === 'none' ? restIsNull('dueAt') : undefined,
+    filters.assignee === NOBODY
+      ? restIsNull('assigneeId')
+      : filters.assignee !== ANY
+        ? restEq('assigneeId', filters.assignee)
+        : undefined,
     searchQuery.trim().length > 0 ? restIlike('title', searchQuery) : undefined,
   );
 
+// What the cards hold: mine, open, due before the horizon
+const urgentFilter = (currentMemberId: string, horizon: string) =>
+  restAnd(restEq('assigneeId', currentMemberId), restIsNotNull('dueAt'), restLt('dueAt', horizon));
+
+// The table without the cards' tasks, so a task shows in one place only
+const notUrgentFilter = (currentMemberId: string, horizon: string) =>
+  restOr(restNeq('assigneeId', currentMemberId), restIsNull('assigneeId'), restIsNull('dueAt'), restGte('dueAt', horizon));
+
+const memberOptions = (members: WorkspaceMember[]) =>
+  members.map((member) => ({ value: member.id, label: formatMemberName(member) || member.id }));
+
 const TaskCreateForm = ({
   currentMemberId,
   onCreated,
@@ -161,10 +244,7 @@ const TaskCreateForm = ({
       <SelectField
         label="Исполнитель"
         value={assigneeId}
-        options={[
-          { value: NO_ASSIGNEE, label: 'Не назначен' },
-          ...members.map((member) => ({ value: member.id, label: formatMemberName(member) || member.id })),
-        ]}
+        options={[{ value: NO_ASSIGNEE, label: 'Не назначен' }, ...memberOptions(members)]}
         onChange={setAssigneeId}
       />
       <TextField label="Срок" type="date" value={dueAt} onChange={setDueAt} />
@@ -173,7 +253,7 @@ const TaskCreateForm = ({
       <FormFieldsBuilder fields={fields} onChange={setFields} disabled={isSaving} />
       {errorMessage !== undefined && <Message tone="danger">{errorMessage}</Message>}
       <div style={{ display: 'flex', gap: theme.spacing[2] }}>
-        <Button variant="solid" size="sm" loading={isSaving} disabled={title.trim().length === 0} onClick={() => void handleCreate()}>
+        <Button variant="solid" tone="accent" size="sm" loading={isSaving} disabled={title.trim().length === 0} onClick={() => void handleCreate()}>
           Создать
         </Button>
         <Button variant="ghost" size="sm" onClick={onCancel}>
@@ -189,34 +269,164 @@ const DocflowTasks = () => {
   const { members, currentMember } = useWorkspaceMembers();
   const [searchInput, setSearchInput] = useState('');
   const searchQuery = useDebouncedValue(searchInput, SEARCH_DEBOUNCE_MS);
-  const [taskFilter, setTaskFilter] = useState<TaskFilter>('open');
+  const [view, setView] = useState<TaskView>('open');
+  const [filters, setFilters] = useState<TaskFilters>(DEFAULT_FILTERS);
   const [sort, setSort] = useState<TableSort>(DEFAULT_SORT);
   const [panel, setPanel] = useState<Panel>({ kind: 'closed' });
   const [pages, setPages] = useState(1);
+  const [hiddenColumns, setHiddenColumns] = useHiddenColumns(['createdAt']);
+  const [bulkDialog, setBulkDialog] = useState<BulkDialog>();
   // Fixed for the life of the list, so "overdue" does not refetch by itself.
-  const [now] = useState(() => new Date().toISOString());
+  const [nowDate] = useState(() => new Date());
+  const now = nowDate.toISOString();
+  const weekAhead = new Date(nowDate.getTime() + 7 * DAY_IN_MS).toISOString();
+  // The cards take tasks due before the start of the day after the horizon
+  const horizonDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + URGENT_DAYS + 1);
+  const horizon = horizonDate.toISOString();
+  const currentMemberId = currentMember?.id;
+  const isTrash = filters.scope === 'deleted';
+  const hasCards = view !== 'done' && !isTrash && currentMemberId !== undefined;
+  const selectedTaskId = panel.kind === 'task' ? panel.taskId : undefined;
+
+  const baseFilter = useMemo(
+    () => buildFilter({ view, filters, searchQuery, currentMemberId, now, weekAhead }),
+    [view, filters, searchQuery, currentMemberId, now, weekAhead],
+  );
 
   const { data, loading, error, reload } = useAsync(
     () =>
       listRecords<DocflowTask>('tasks', {
-        filter: buildFilter({ taskFilter, searchQuery, currentMemberId: currentMember?.id, now }),
+        filter: hasCards ? restAnd(baseFilter, notUrgentFilter(currentMemberId, horizon)) : baseFilter,
         order_by: toRestOrderBy(sort),
         limit: PAGE_SIZE * pages,
       }),
-    [taskFilter, searchQuery, currentMember?.id, sort, pages, now],
+    [baseFilter, hasCards, currentMemberId, horizon, sort, pages],
+  );
+  const { data: urgent, reload: reloadUrgent } = useAsync(
+    async () =>
+      hasCards
+        ? (
+            await listRecords<DocflowTask>('tasks', {
+              filter: restAnd(baseFilter, urgentFilter(currentMemberId, horizon)),
+              order_by: 'dueAt[AscNullsLast]',
+              limit: URGENT_LIMIT,
+            })
+          ).records
+        : [],
+    [baseFilter, hasCards, currentMemberId, horizon],
+  );
+  // The counts of the views follow the search, not the other filters
+  const { data: counts, reload: reloadCounts } = useAsync(
+    async () =>
+      Object.fromEntries(
+        await Promise.all(
+          VIEWS.map(async ({ value }) => [
+            value,
+            await countRecords(
+              'tasks',
+              restAnd(
+                restEq('smbSection', DOCFLOW_SECTION),
+                viewFilter(value, currentMemberId),
+                searchQuery.trim().length > 0 ? restIlike('title', searchQuery) : undefined,
+              ),
+            ),
+          ]),
+        ),
+      ) as Record<TaskView, number>,
+    [searchQuery, currentMemberId],
   );
 
-  const handleDeleteTask = async (taskId: string) => {
-    try {
-      await deleteRecord('tasks', taskId);
-      setPanel((current) => (current.kind === 'task' && current.taskId === taskId ? { kind: 'closed' } : current));
-      await enqueueSnackbar({ message: 'Задание удалено: оно в фильтре «Архив»', variant: 'success' });
-      await reload();
-    } catch (deleteError) {
-      await enqueueSnackbar({ message: getErrorMessage(deleteError, 'Не удалось удалить задание'), variant: 'error' });
+  const tasks = data?.records ?? [];
+  const urgentTasks = urgent ?? [];
+  const selection = useRowSelection(tasks.map(({ id }) => id));
+  const selectedTasks = tasks.filter(({ id }) => selection.selectedIds.includes(id));
+  const activeFilterCount =
+    (filters.source !== ANY ? 1 : 0) +
+    (filters.due !== ANY ? 1 : 0) +
+    (filters.assignee !== ANY ? 1 : 0) +
+    (isTrash ? 1 : 0);
+
+  const reloadAll = async () => {
+    await Promise.all([reload(), reloadUrgent(), reloadCounts()]);
+  };
+
+  const bulk = useBulkAction({
+    onDone: async () => {
+      selection.clear();
+      setBulkDialog(undefined);
+      await reloadAll();
+    },
+  });
+
+  const changeView = (next: TaskView) => {
+    setView(next);
+    setPages(1);
+    selection.clear();
+  };
+
+  const changeFilters = (patch: Partial<TaskFilters>) => {
+    setFilters((current) => ({ ...current, ...patch }));
+    setPages(1);
+  };
+
+  const completeTasks = (ids: string[]) =>
+    bulk.runEach(ids, (taskId) => callAppRoute('/docflow/tasks/complete', { taskId }), {
+      done: (count) => `Выполнено: ${count}`,
+      failed: 'Не выполнены',
+    });
+
+  const setStatus = (ids: string[], status: string) =>
+    bulk.run(
+      () => updateRecords('tasks', ids, { status }),
+      `Статус изменён: ${TASK_STATUS_LABELS[status]}`,
+      'Не удалось изменить статус',
+    );
+
+  const removeTasks = (ids: string[]) =>
+    bulk.run(
+      async () => {
+        await deleteRecords('tasks', ids);
+        setPanel((current) => (current.kind === 'task' && ids.includes(current.taskId) ? { kind: 'closed' } : current));
+      },
+      ids.length === 1 ? 'Задание удалено: оно в фильтре «Удалённые»' : `Удалено заданий: ${ids.length}, они в фильтре «Удалённые»`,
+      'Не удалось удалить',
+    );
+
+  const restoreTasks = (ids: string[]) =>
+    bulk.run(() => restoreRecords('tasks', ids), `Восстановлено: ${ids.length}`, 'Не удалось восстановить');
+
+  const rowActions = (taskId: string): MenuAction[] => {
+    const task = tasks.find(({ id }) => id === taskId);
+
+    if (isTrash) {
+      return [
+        { key: 'restore', label: 'Восстановить', icon: IconRestore, onSelect: () => void restoreTasks([taskId]) },
+        { key: 'card', label: 'Открыть карточку', icon: IconExternalLink, onSelect: () => void openTaskCard(taskId) },
+      ];
     }
+
+    const isDone = task?.status === TASK_DONE_STATUS;
+
+    return [
+      { key: 'open', label: 'Открыть', icon: IconEye, onSelect: () => setPanel({ kind: 'task', taskId }) },
+      { key: 'card', label: 'Карточка задачи', icon: IconExternalLink, onSelect: () => void openTaskCard(taskId) },
+      ...(task?.status === TASK_TODO_STATUS
+        ? [{ key: 'start', label: 'Взять в работу', icon: IconPlayerPlay, onSelect: () => void setStatus([taskId], TASK_IN_PROGRESS_STATUS) }]
+        : []),
+      ...(!isDone ? [{ key: 'complete', label: 'Выполнить', icon: IconCheck, onSelect: () => void completeTasks([taskId]) }] : []),
+      {
+        key: 'delete',
+        label: 'Удалить',
+        confirmLabel: 'Точно удалить?',
+        icon: IconTrash,
+        tone: 'danger',
+        onSelect: () => void removeTasks([taskId]),
+      },
+    ];
   };
-  const tasks = data?.records ?? [];
+
+  const selectedIds = selection.selectedIds;
+  const openSelectedCount = selectedTasks.filter((task) => task.status !== TASK_DONE_STATUS).length;
 
   return (
     <DocflowRoot>
@@ -226,113 +436,260 @@ const DocflowTasks = () => {
         panel={
           panel.kind === 'create' ? (
             <TaskCreateForm
-              currentMemberId={currentMember?.id}
+              currentMemberId={currentMemberId}
               onCancel={() => setPanel({ kind: 'closed' })}
               onCreated={(taskId) => {
                 setPanel({ kind: 'task', taskId });
-                void reload();
+                void reloadAll();
               }}
             />
           ) : panel.kind === 'task' ? (
-            <TaskWorkPanel key={panel.taskId} taskId={panel.taskId} onChanged={() => void reload()} />
+            <TaskWorkPanel key={panel.taskId} taskId={panel.taskId} withChat onChanged={() => void reloadAll()} />
           ) : undefined
         }
       >
-        <Toolbar>
-          <SearchWithFilters
-            value={searchInput}
-            onChange={setSearchInput}
-            placeholder="Поиск заданий"
-            activeFilterCount={taskFilter === 'open' ? 0 : 1}
-            onResetFilters={() => {
-              setTaskFilter('open');
-              setPages(1);
-            }}
-            filters={[
+        <ListToolbar
+          search={{
+            value: searchInput,
+            onChange: setSearchInput,
+            placeholder: 'Поиск заданий',
+            activeFilterCount,
+            onResetFilters: () => changeFilters(DEFAULT_FILTERS),
+            filters: [
+              {
+                key: 'source',
+                title: 'Откуда',
+                value: filters.source,
+                options: [
+                  { value: ANY, label: 'Все' },
+                  { value: 'process', label: 'Шаги процессов' },
+                  { value: 'own', label: 'Свои задания' },
+                ],
+                onChange: (value) => changeFilters({ source: value as TaskFilters['source'] }),
+              },
+              {
+                key: 'due',
+                title: 'Срок',
+                value: filters.due,
+                options: [
+                  { value: ANY, label: 'Любой' },
+                  { value: 'overdue', label: 'Просроченные' },
+                  { value: 'week', label: 'В ближайшие 7 дней' },
+                  { value: 'none', label: 'Без срока' },
+                ],
+                onChange: (value) => changeFilters({ due: value as TaskFilters['due'] }),
+              },
+              {
+                key: 'assignee',
+                title: 'Исполнитель',
+                value: filters.assignee,
+                options: [
+                  { value: ANY, label: 'Любой' },
+                  { value: NOBODY, label: 'Не назначен' },
+                  ...memberOptions(members),
+                ],
+                onChange: (value) => changeFilters({ assignee: value }),
+              },
               {
-                key: 'tasks',
-                title: 'Показать',
-                value: taskFilter,
-                options: TASK_FILTER_OPTIONS,
+                key: 'scope',
+                title: 'Корзина',
+                value: filters.scope,
+                options: [
+                  { value: 'active', label: 'Действующие' },
+                  { value: 'deleted', label: 'Удалённые' },
+                ],
                 onChange: (value) => {
-                  setTaskFilter(value as TaskFilter);
-                  setPages(1);
+                  changeFilters({ scope: value as TaskFilters['scope'] });
+                  selection.clear();
                 },
               },
-            ]}
+            ],
+          }}
+          views={
+            <ViewTabs
+              value={view}
+              onChange={changeView}
+              options={VIEWS.map((option) => ({ ...option, count: counts?.[option.value] }))}
+            />
+          }
+          total={
+            data === undefined
+              ? undefined
+              : formatTotal(tasks.length + urgentTasks.length, (data.totalCount ?? tasks.length) + urgentTasks.length, TASK_NOUN)
+          }
+          columns={{ columns: COLUMNS, hiddenKeys: hiddenColumns, onChange: setHiddenColumns }}
+          onRefresh={() => void reloadAll()}
+          isRefreshing={loading}
+          onCreate={() => setPanel({ kind: 'create' })}
+        />
+        {hasCards && (
+          <UrgentTaskCards
+            tasks={urgentTasks}
+            members={members}
+            now={nowDate}
+            selectedTaskId={selectedTaskId}
+            onOpen={(taskId) => setPanel({ kind: 'task', taskId })}
           />
-          <div style={{ marginLeft: 'auto' }}>
-            <Button variant="solid" size="sm" onClick={() => setPanel({ kind: 'create' })}>
-              Создать
-            </Button>
-          </div>
-        </Toolbar>
+        )}
         {error !== undefined && (
           <div style={{ padding: theme.spacing[4] }}>
             <Message tone="danger">{getErrorMessage(error, 'Не удалось загрузить задания')}</Message>
           </div>
         )}
-        {loading && tasks.length === 0 && <Message>Загрузка…</Message>}
-        {!loading && error === undefined && tasks.length === 0 && <Message>Заданий нет.</Message>}
+        {loading && data === undefined && <Message>Загрузка…</Message>}
+        {!loading && error === undefined && tasks.length === 0 && (
+          <Message>{urgentTasks.length > 0 ? 'Остальных заданий нет: все срочные — в карточках выше.' : 'Заданий нет.'}</Message>
+        )}
         {tasks.length > 0 && (
-          <DataTable
-            columns={[
-              { key: 'title', label: 'Задание', width: '38%', sortKey: 'title' },
-              { key: 'assignee', label: 'Исполнитель', width: '22%' },
-              { key: 'dueAt', label: 'Срок', width: '16%', sortKey: 'dueAt' },
-              { key: 'status', label: 'Статус', sortKey: 'status' },
-            ]}
-            sort={sort}
-            onSortChange={setSort}
-            selectedRowId={panel.kind === 'task' ? panel.taskId : undefined}
-            rowActions={(taskId) =>
-              taskFilter === 'archived'
-                ? [{ key: 'open', label: 'Открыть и восстановить', icon: IconRestore, onSelect: () => void openArchivedTask(taskId) }]
-                : [
-                    { key: 'open', label: 'Открыть', icon: IconEye, onSelect: () => setPanel({ kind: 'task', taskId }) },
-                    { key: 'card', label: 'Карточка задачи', icon: IconExternalLink, onSelect: () => void openArchivedTask(taskId) },
-                    {
-                      key: 'delete',
-                      label: 'Удалить',
-                      confirmLabel: 'Точно удалить?',
-                      icon: IconTrash,
-                      tone: 'danger',
-                      onSelect: () => void handleDeleteTask(taskId),
-                    },
-                  ]
-            }
-            onRowClick={(taskId) =>
-              taskFilter === 'archived'
-                ? void openArchivedTask(taskId)
-                : setPanel({ kind: 'task', taskId })
-            }
-            rows={tasks.map((task) => ({
-              id: task.id,
-              cells: {
-                title: task.title?.trim() || 'Без названия',
-                assignee: formatMemberName(members.find((member) => member.id === task.assigneeId)),
-                dueAt: (
-                  <span style={{ color: isOverdue(task.dueAt, task.status, new Date(now)) ? theme.font.color.danger : undefined }}>
-                    {formatDate(task.dueAt)}
-                  </span>
-                ),
-                status: (
-                  <Tag color={task.status === TASK_DONE_STATUS ? 'green' : 'gray'}>
-                    {TASK_STATUS_LABELS[task.status ?? ''] ?? task.status ?? 'Без статуса'}
-                  </Tag>
-                ),
-              },
-            }))}
-          />
+          <>
+            {hasCards && urgentTasks.length > 0 && (
+              <div style={{ padding: `${theme.spacing[1]} ${theme.spacing[5]} 0` }}>
+                <SectionTitle>Остальные задания</SectionTitle>
+              </div>
+            )}
+            <DataTable
+              columns={COLUMNS}
+              hiddenColumnKeys={hiddenColumns}
+              sort={sort}
+              onSortChange={(next) => {
+                setSort(next);
+                setPages(1);
+              }}
+              selectedRowId={selectedTaskId}
+              selectedIds={selectedIds}
+              onSelectionChange={selection.setSelectedIds}
+              rowActions={rowActions}
+              onRowClick={(taskId) => (isTrash ? void openTaskCard(taskId) : setPanel({ kind: 'task', taskId }))}
+              rows={tasks.map((task) => {
+                const due = describeDue(task.dueAt, nowDate);
+                const isDone = task.status === TASK_DONE_STATUS;
+                const progress = getTaskFieldProgress(task);
+
+                return {
+                  id: task.id,
+                  isMuted: isDone && view !== 'done',
+                  cells: {
+                    title: task.title?.trim() || 'Без названия',
+                    assignee: formatMemberName(members.find((member) => member.id === task.assigneeId)) || '—',
+                    dueAt: task.dueAt ? (
+                      <span
+                        title={formatDate(task.dueAt)}
+                        style={{
+                          color: isDone
+                            ? undefined
+                            : due.tone === 'overdue'
+                              ? theme.font.color.danger
+                              : due.tone === 'today'
+                                ? theme.color.orange
+                                : undefined,
+                        }}
+                      >
+                        {isDone ? formatDate(task.dueAt) : `${formatDate(task.dueAt)} · ${due.label.toLowerCase()}`}
+                      </span>
+                    ) : (
+                      '—'
+                    ),
+                    fields:
+                      progress.total > 0 ? (
+                        <span style={{ alignItems: 'center', display: 'flex', gap: theme.spacing[2] }}>
+                          <span style={{ flex: 1, maxWidth: '48px' }}>
+                            <ProgressBar value={progress.filled} total={progress.total} tone={isDone ? 'green' : 'blue'} />
+                          </span>
+                          {progress.filled}/{progress.total}
+                        </span>
+                      ) : (
+                        '—'
+                      ),
+                    status: (
+                      <StatusChip color={TASK_STATUS_COLORS[task.status ?? ''] ?? 'gray'}>
+                        {TASK_STATUS_LABELS[task.status ?? ''] ?? task.status ?? 'Без статуса'}
+                      </StatusChip>
+                    ),
+                    source: isProcessTask(task) ? 'Процесс' : 'Своё',
+                    createdAt: formatDate(task.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={TASK_NOUN} onClear={selection.clear}>
+          {isTrash ? (
+            <Button icon={IconRestore} loading={bulk.isBusy} onClick={() => void restoreTasks(selectedIds)}>
+              Восстановить
             </Button>
-          </div>
-        )}
+          ) : (
+            <>
+              {openSelectedCount > 0 && (
+                <Button icon={IconCheck} loading={bulk.isBusy} onClick={() => void completeTasks(selectedIds)}>
+                  Выполнить
+                </Button>
+              )}
+              <Button icon={IconPencil} disabled={bulk.isBusy} onClick={() => setBulkDialog('change')}>
+                Изменить
+              </Button>
+              <MenuButton
+                label="Удалить"
+                icon={IconTrash}
+                disabled={bulk.isBusy}
+                actions={[
+                  {
+                    key: 'delete',
+                    label: `Удалить выбранные (${selectedIds.length})`,
+                    confirmLabel: 'Точно удалить?',
+                    icon: IconTrash,
+                    tone: 'danger',
+                    onSelect: () => void removeTasks(selectedIds),
+                  },
+                ]}
+              />
+            </>
+          )}
+        </SelectionBar>
       </SplitView>
+      {bulkDialog === 'change' && (
+        <BulkChangeDialog
+          title="Изменить поле"
+          hint={`Для ${selectedIds.length} ${pluralize(selectedIds.length, TASK_NOUN)}`}
+          fields={[
+            {
+              key: 'status',
+              label: 'Статус',
+              options: [TASK_TODO_STATUS, TASK_IN_PROGRESS_STATUS].map((status) => ({
+                value: status,
+                label: TASK_STATUS_LABELS[status],
+              })),
+            },
+            {
+              key: 'assignee',
+              label: 'Исполнитель',
+              options: [{ value: NO_ASSIGNEE, label: 'Не назначен' }, ...memberOptions(members)],
+            },
+            { key: 'dueAt', label: 'Срок', inputType: 'date' },
+          ]}
+          onClose={() => setBulkDialog(undefined)}
+          onSubmit={(fieldKey, value) => {
+            if (fieldKey === 'status') {
+              return setStatus(selectedIds, value);
+            }
+
+            if (fieldKey === 'assignee') {
+              return bulk.run(
+                () => updateRecords('tasks', selectedIds, { assigneeId: value === NO_ASSIGNEE ? null : value }),
+                'Исполнитель назначен',
+                'Не удалось назначить исполнителя',
+              );
+            }
+
+            return bulk.run(
+              () => updateRecords('tasks', selectedIds, { dueAt: /^\d{4}-\d{2}-\d{2}$/.test(value) ? value : null }),
+              'Срок изменён',
+              'Не удалось изменить срок',
+            );
+          }}
+        />
+      )}
     </DocflowRoot>
   );
 };