@inspirer-dev/crm-dashboard 1.0.90 → 1.0.91

package/admin/src/pages/HomePage/components/ManualPushesView.tsx

@@ -0,0 +1,560 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  Loader,
+  Modal,
+  Typography,
+  Badge,
+  TextInput,
+  Field,
+  Checkbox,
+  Textarea,
+} from '@strapi/design-system';
+import {
+  useManualPushTemplates,
+  useManualPushHistory,
+  useDispatchManualPush,
+  useDispatchTestManualPush,
+} from '../../../hooks/api';
+import type {
+  ManualPushTemplate,
+  ManualPushHistoryItem,
+  DispatchPayload,
+} from '../../../hooks/api';
+
+const stripHtml = (html: string): string =>
+  html
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<\/p>/gi, '\n')
+    .replace(/<[^>]+>/g, '')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .trim();
+
+const truncate = (text: string, n: number): string =>
+  text.length > n ? `${text.slice(0, n)}…` : text;
+
+const formatDateTime = (iso: string): string =>
+  new Date(iso).toLocaleString('ru-RU', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+const parseUserIdList = (raw: string): number[] => {
+  if (!raw.trim()) return [];
+  return raw
+    .split(/[\s,]+/)
+    .map((t) => t.trim())
+    .filter(Boolean)
+    .map((t) => Number(t))
+    .filter((n) => Number.isInteger(n) && n > 0);
+};
+
+interface DispatchModalState {
+  template: ManualPushTemplate;
+  mode: 'test' | 'segment';
+}
+
+const ManualPushesView: React.FC = () => {
+  const { data: templates = [], isLoading, error, refetch } = useManualPushTemplates();
+  const { data: history = [], isLoading: historyLoading } = useManualPushHistory();
+  const [modalState, setModalState] = useState<DispatchModalState | null>(null);
+
+  const sortedTemplates = useMemo(
+    () =>
+      [...templates].sort((a, b) =>
+        a.updatedAt < b.updatedAt ? 1 : a.updatedAt > b.updatedAt ? -1 : 0
+      ),
+    [templates]
+  );
+
+  return (
+    <Box padding={4}>
+      <Flex justifyContent="space-between" alignItems="center" paddingBottom={4}>
+        <div>
+          <Typography variant="beta">Ручные рассылки</Typography>
+          <div style={{ color: 'var(--crm-text-secondary)', fontSize: 13, marginTop: 4 }}>
+            Опубликованные в Strapi шаблоны Manual Push. Отправка не происходит автоматически —
+            используйте кнопки ниже.
+          </div>
+        </div>
+        <Button variant="tertiary" onClick={() => refetch()}>
+          Обновить
+        </Button>
+      </Flex>
+
+      {isLoading && (
+        <Flex justifyContent="center" padding={8}>
+          <Loader>Загрузка шаблонов…</Loader>
+        </Flex>
+      )}
+
+      {error && (
+        <Box
+          padding={4}
+          background="danger100"
+          hasRadius
+          style={{ border: '1px solid var(--crm-danger)' }}
+        >
+          <Typography textColor="danger700">
+            Не удалось загрузить шаблоны: {(error as Error).message}
+          </Typography>
+        </Box>
+      )}
+
+      {!isLoading && !error && sortedTemplates.length === 0 && (
+        <Box padding={6} background="neutral100" hasRadius>
+          <Typography variant="omega">
+            Шаблоны не найдены. Создайте запись в Content Manager → Manual Push и опубликуйте её.
+          </Typography>
+        </Box>
+      )}
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
+          gap: 16,
+        }}
+      >
+        {sortedTemplates.map((t) => (
+          <TemplateCard
+            key={t.documentId}
+            template={t}
+            onSendTest={() => setModalState({ template: t, mode: 'test' })}
+            onDispatch={() => setModalState({ template: t, mode: 'segment' })}
+          />
+        ))}
+      </div>
+
+      <Box paddingTop={8}>
+        <Typography variant="beta">Последние отправки</Typography>
+        <Box paddingTop={3}>
+          {historyLoading ? (
+            <Flex justifyContent="center" padding={4}>
+              <Loader>Загрузка истории…</Loader>
+            </Flex>
+          ) : history.length === 0 ? (
+            <Box padding={4} background="neutral100" hasRadius>
+              <Typography variant="omega">Пока ни одной отправки.</Typography>
+            </Box>
+          ) : (
+            <HistoryTable history={history} templates={templates} />
+          )}
+        </Box>
+      </Box>
+
+      {modalState && <DispatchModal state={modalState} onClose={() => setModalState(null)} />}
+    </Box>
+  );
+};
+
+interface TemplateCardProps {
+  template: ManualPushTemplate;
+  onSendTest: () => void;
+  onDispatch: () => void;
+}
+
+const TemplateCard: React.FC<TemplateCardProps> = ({ template, onSendTest, onDispatch }) => {
+  const preview = truncate(stripHtml(template.body || ''), 220);
+  const hasTestUsers = template.testUserIds.length > 0;
+
+  return (
+    <Box
+      background="neutral0"
+      hasRadius
+      padding={4}
+      shadow="tableShadow"
+      style={{ display: 'flex', flexDirection: 'column', gap: 12 }}
+    >
+      <Flex justifyContent="space-between" alignItems="flex-start" gap={2}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="delta" ellipsis>
+            {template.name}
+          </Typography>
+          <Flex gap={1} paddingTop={1}>
+            {template.locales.map((l: string) => (
+              <Badge key={l} backgroundColor="primary200" textColor="primary600">
+                {l.toUpperCase()}
+              </Badge>
+            ))}
+            {template.image && (
+              <Badge backgroundColor="secondary200" textColor="secondary700">
+                IMG
+              </Badge>
+            )}
+            {template.buttonUrl && (
+              <Badge backgroundColor="alternative200" textColor="alternative700">
+                BTN
+              </Badge>
+            )}
+          </Flex>
+        </div>
+      </Flex>
+
+      {template.image?.url && (
+        <div
+          style={{
+            background: 'var(--crm-bg-tertiary)',
+            borderRadius: 8,
+            overflow: 'hidden',
+            maxHeight: 120,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <img
+            src={template.image.url}
+            alt={template.image.alternativeText || template.name}
+            style={{ maxWidth: '100%', maxHeight: 120, objectFit: 'cover' }}
+          />
+        </div>
+      )}
+
+      <div
+        style={{
+          color: 'var(--crm-text-secondary)',
+          fontSize: 13,
+          whiteSpace: 'pre-wrap',
+          lineHeight: 1.4,
+          minHeight: 40,
+        }}
+      >
+        {preview || <em style={{ opacity: 0.6 }}>Тело шаблона пустое</em>}
+      </div>
+
+      {template.buttonLabel && template.buttonUrl && (
+        <div style={{ fontSize: 12, color: 'var(--crm-text-muted)' }}>
+          Кнопка: <strong>{template.buttonLabel}</strong> → {truncate(template.buttonUrl, 48)}
+        </div>
+      )}
+
+      <div style={{ fontSize: 12, color: 'var(--crm-text-muted)' }}>
+        testUserIds: {hasTestUsers ? template.testUserIds.join(', ') : '—'}
+      </div>
+
+      <Flex gap={2} justifyContent="flex-end" paddingTop={1}>
+        <Button
+          variant="tertiary"
+          disabled={!hasTestUsers}
+          onClick={onSendTest}
+          title={hasTestUsers ? '' : 'Заполните testUserIds в Strapi'}
+        >
+          Тест-отправка
+        </Button>
+        <Button variant="default" onClick={onDispatch}>
+          Отправить…
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
+
+interface HistoryTableProps {
+  history: ManualPushHistoryItem[];
+  templates: ManualPushTemplate[];
+}
+
+const HistoryTable: React.FC<HistoryTableProps> = ({ history, templates }) => {
+  const nameByDocId = useMemo(() => {
+    const map = new Map<string, string>();
+    templates.forEach((t) => map.set(t.documentId, t.name));
+    return map;
+  }, [templates]);
+
+  return (
+    <Box background="neutral0" hasRadius shadow="tableShadow" style={{ overflow: 'hidden' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+        <thead>
+          <tr style={{ background: 'var(--crm-table-header-bg)', textAlign: 'left' }}>
+            <th style={{ padding: '10px 12px' }}>Отправлено</th>
+            <th style={{ padding: '10px 12px' }}>Шаблон</th>
+            <th style={{ padding: '10px 12px', textAlign: 'right' }}>В очереди</th>
+            <th style={{ padding: '10px 12px', textAlign: 'right' }}>Отпр.</th>
+            <th style={{ padding: '10px 12px', textAlign: 'right' }}>Ошибки</th>
+            <th style={{ padding: '10px 12px', textAlign: 'right' }}>Отмен.</th>
+            <th style={{ padding: '10px 12px' }}>Кем</th>
+          </tr>
+        </thead>
+        <tbody>
+          {history.map((row: ManualPushHistoryItem) => (
+            <tr key={row.manualPushId} style={{ borderTop: '1px solid var(--crm-border-light)' }}>
+              <td style={{ padding: '10px 12px', whiteSpace: 'nowrap' }}>
+                {formatDateTime(row.dispatchedAt)}
+              </td>
+              <td style={{ padding: '10px 12px' }}>
+                {nameByDocId.get(row.strapiDocumentId) || row.strapiDocumentId}
+              </td>
+              <td style={{ padding: '10px 12px', textAlign: 'right' }}>{row.totalQueued}</td>
+              <td
+                style={{
+                  padding: '10px 12px',
+                  textAlign: 'right',
+                  color: 'var(--crm-success)',
+                }}
+              >
+                {row.counts.sent}
+              </td>
+              <td
+                style={{
+                  padding: '10px 12px',
+                  textAlign: 'right',
+                  color: 'var(--crm-danger)',
+                }}
+              >
+                {row.counts.failed}
+              </td>
+              <td style={{ padding: '10px 12px', textAlign: 'right' }}>{row.counts.cancelled}</td>
+              <td
+                style={{
+                  padding: '10px 12px',
+                  color: 'var(--crm-text-muted)',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {row.dispatchedBy || '—'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Box>
+  );
+};
+
+interface DispatchModalProps {
+  state: DispatchModalState;
+  onClose: () => void;
+}
+
+const DispatchModal: React.FC<DispatchModalProps> = ({ state, onClose }) => {
+  const { template, mode } = state;
+  const isTest = mode === 'test';
+
+  const dispatchMutation = useDispatchManualPush();
+  const dispatchTestMutation = useDispatchTestManualPush();
+
+  const [dispatchedBy, setDispatchedBy] = useState('');
+  const [includeRu, setIncludeRu] = useState(false);
+  const [includeEn, setIncludeEn] = useState(false);
+  const [userIdsRaw, setUserIdsRaw] = useState('');
+  const [excludeOptedOut, setExcludeOptedOut] = useState(true);
+  const [dryRunResult, setDryRunResult] = useState<number | null>(null);
+  const [confirmed, setConfirmed] = useState(false);
+
+  const reset = () => {
+    setDispatchedBy('');
+    setIncludeRu(false);
+    setIncludeEn(false);
+    setUserIdsRaw('');
+    setExcludeOptedOut(true);
+    setDryRunResult(null);
+    setConfirmed(false);
+  };
+
+  const close = () => {
+    reset();
+    onClose();
+  };
+
+  const buildPayload = (dryRun: boolean): DispatchPayload => {
+    const userIds = parseUserIdList(userIdsRaw);
+    const languages: ('ru' | 'en')[] = [];
+    if (includeRu) languages.push('ru');
+    if (includeEn) languages.push('en');
+    return {
+      strapiDocumentId: template.documentId,
+      segment: {
+        ...(userIds.length > 0 ? { userIds } : {}),
+        ...(languages.length > 0 ? { languages } : {}),
+        excludeOptedOut,
+      },
+      dryRun,
+      ...(dispatchedBy ? { dispatchedBy } : {}),
+    };
+  };
+
+  const onDryRun = async () => {
+    setDryRunResult(null);
+    try {
+      const res = await dispatchMutation.mutateAsync(buildPayload(true));
+      setDryRunResult(res.totalQueued);
+    } catch {
+      // surfaced via mutation.error below
+    }
+  };
+
+  const onConfirm = async () => {
+    if (isTest) {
+      try {
+        await dispatchTestMutation.mutateAsync({
+          strapiDocumentId: template.documentId,
+          ...(dispatchedBy ? { dispatchedBy } : {}),
+        });
+        close();
+      } catch {
+        // surfaced via mutation.error below
+      }
+      return;
+    }
+
+    if (!confirmed) {
+      setConfirmed(true);
+      return;
+    }
+    try {
+      await dispatchMutation.mutateAsync(buildPayload(false));
+      close();
+    } catch {
+      // surfaced via mutation.error below
+    }
+  };
+
+  const mutation = isTest ? dispatchTestMutation : dispatchMutation;
+  const err = mutation.error as Error | null;
+
+  return (
+    <Modal.Root open onOpenChange={(open: boolean) => !open && close()}>
+      <Modal.Content style={{ width: 640, maxWidth: '95vw' }}>
+        <Modal.Header>
+          <Modal.Title>
+            {isTest ? 'Тест-отправка' : 'Отправка'}: {template.name}
+          </Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+          <Flex direction="column" gap={4} alignItems="stretch">
+            {isTest ? (
+              <Box padding={3} background="neutral100" hasRadius>
+                <Typography variant="omega">
+                  Будет отправлено пользователям из <code>testUserIds</code>:
+                </Typography>
+                <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 13 }}>
+                  {template.testUserIds.join(', ')}
+                </div>
+                <div style={{ marginTop: 8, fontSize: 12, color: 'var(--crm-text-muted)' }}>
+                  Anti-spam, opt-out и priority конфликты для тест-отправки пропускаются.
+                </div>
+              </Box>
+            ) : (
+              <>
+                <Field.Root>
+                  <Field.Label>Языки (опц.)</Field.Label>
+                  <Flex gap={4} paddingTop={1}>
+                    <Checkbox
+                      checked={includeRu}
+                      onCheckedChange={(v: boolean | string) => setIncludeRu(Boolean(v))}
+                    >
+                      Русский
+                    </Checkbox>
+                    <Checkbox
+                      checked={includeEn}
+                      onCheckedChange={(v: boolean | string) => setIncludeEn(Boolean(v))}
+                    >
+                      English
+                    </Checkbox>
+                  </Flex>
+                  <div style={{ fontSize: 12, color: 'var(--crm-text-muted)', marginTop: 4 }}>
+                    Пусто = все языки. Фильтр по <code>languageCode</code> Telegram-аккаунта.
+                  </div>
+                </Field.Root>
+
+                <Field.Root>
+                  <Field.Label>userIds (опц.)</Field.Label>
+                  <Textarea
+                    value={userIdsRaw}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                      setUserIdsRaw(e.target.value)
+                    }
+                    placeholder="42, 101, 202 (или с переносами)"
+                  />
+                  <div style={{ fontSize: 12, color: 'var(--crm-text-muted)', marginTop: 4 }}>
+                    Прямая адресация — если заполнено, все остальные фильтры (кроме языков)
+                    игнорируются.
+                  </div>
+                </Field.Root>
+
+                <Checkbox
+                  checked={excludeOptedOut}
+                  onCheckedChange={(v: boolean | string) => setExcludeOptedOut(Boolean(v))}
+                >
+                  Исключить отписавшихся (opted_out)
+                </Checkbox>
+              </>
+            )}
+
+            <Field.Root>
+              <Field.Label>dispatchedBy (опц.)</Field.Label>
+              <TextInput
+                value={dispatchedBy}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setDispatchedBy(e.target.value)
+                }
+                placeholder="ваш email или ник"
+              />
+            </Field.Root>
+
+            {!isTest && dryRunResult !== null && (
+              <Box padding={3} background="primary100" hasRadius>
+                <Typography variant="omega">
+                  Подойдёт пользователей: <strong>{dryRunResult}</strong>
+                </Typography>
+              </Box>
+            )}
+
+            {confirmed && !isTest && (
+              <Box padding={3} background="warning100" hasRadius>
+                <Typography textColor="warning700">
+                  Подтвердите: будет отправлено {dryRunResult ?? '?'} сообщений. Повторное нажатие
+                  «Отправить» запустит рассылку.
+                </Typography>
+              </Box>
+            )}
+
+            {err && (
+              <Box padding={3} background="danger100" hasRadius>
+                <Typography textColor="danger700">{err.message}</Typography>
+              </Box>
+            )}
+          </Flex>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="tertiary" onClick={close}>
+              Отмена
+            </Button>
+          </Modal.Close>
+          {!isTest && (
+            <Button
+              variant="secondary"
+              onClick={onDryRun}
+              loading={dispatchMutation.isPending && dryRunResult === null}
+              disabled={dispatchMutation.isPending}
+            >
+              Оценить (dry run)
+            </Button>
+          )}
+          <Button
+            variant={confirmed && !isTest ? 'danger-light' : 'default'}
+            loading={mutation.isPending}
+            onClick={onConfirm}
+            disabled={mutation.isPending}
+          >
+            {isTest ? 'Отправить тест' : confirmed ? 'Подтвердить отправку' : 'Отправить'}
+          </Button>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
+
+export default ManualPushesView;

package/admin/src/pages/HomePage/components/index.ts

@@ -7,3 +7,4 @@ export { default as CohortHeatMap } from './CohortHeatMap';
 export { default as SendTimeHeatMap } from './SendTimeHeatMap';
 export { default as ABTestCard } from './ABTestCard';
 export { default as SegmentTable } from './SegmentTable';
+export { default as ManualPushesView } from './ManualPushesView';

package/admin/src/pages/HomePage/index.tsx

@@ -1,12 +1,13 @@
 import React, { memo, useState, useMemo, useEffect } from 'react';
 import { Main, Box } from '@strapi/design-system';
-import { GridFour, Clock, Cross } from '@strapi/icons';
+import { GridFour, Clock, Cross, Message } from '@strapi/icons';
 import { useTheme } from 'styled-components';
 import { QueryProvider } from '../../lib/react-query';
 import { useDashboardStats } from '../../hooks/api';
 import LogsTable from './components/LogsTable';
 import AntiSpamLogsTable from './components/AntiSpamLogsTable';
 import StatsView from './components/StatsView';
+import ManualPushesView from './components/ManualPushesView';
 // @ts-expect-error - Vite raw import
 import homePageStyles from './HomePage.css?inline';
 // @ts-expect-error - Vite raw import
@@ -23,7 +24,7 @@ const useIsDarkTheme = (): boolean => {
   return theme?.colors?.neutral0 === '#212134';
 };
 
-type TabId = 'stats' | 'logs' | 'antispam';
+type TabId = 'stats' | 'logs' | 'antispam' | 'manual-pushes';
 
 interface TabConfig {
   id: TabId;
@@ -55,6 +56,13 @@ const tabs: TabConfig[] = [
     icon: <Cross width={20} height={20} />,
     color: '#d97706',
   },
+  {
+    id: 'manual-pushes',
+    label: 'Ручные рассылки',
+    description: 'Шаблоны Manual Push и ручная отправка',
+    icon: <Message width={20} height={20} />,
+    color: '#7b79ff',
+  },
 ];
 
 const formatNumber = (num: number): string => {
@@ -80,11 +88,12 @@ const DashboardContent: React.FC = () => {
   const { data: stats, isLoading } = useDashboardStats(defaultFilters);
 
   const badgeCounts = useMemo(() => {
-    if (!stats) return { stats: 0, logs: 0, antispam: 0 };
+    if (!stats) return { stats: 0, logs: 0, antispam: 0, 'manual-pushes': 0 };
     return {
       stats: stats.totals?.sent ?? 0,
       logs: stats.funnel?.sent ?? 0,
       antispam: stats.funnel?.blocked_total ?? 0,
+      'manual-pushes': 0,
     };
   }, [stats]);
 
@@ -96,6 +105,8 @@ const DashboardContent: React.FC = () => {
         return <LogsTable />;
       case 'antispam':
         return <AntiSpamLogsTable />;
+      case 'manual-pushes':
+        return <ManualPushesView />;
       default:
         return null;
     }