@inspirer-dev/crm-dashboard 1.0.17 → 1.0.19

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

@@ -0,0 +1,483 @@
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import {
+  Box,
+  Typography,
+  Flex,
+  Button,
+  Loader,
+  SingleSelect,
+  SingleSelectOption,
+  TextInput,
+  Field,
+  Toggle,
+  IconButton,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Badge,
+} from '@strapi/design-system';
+import { Plus, Trash, Pencil } from '@strapi/icons';
+import type { CrmSegment, CrmTemplate } from '../../../../types/crm';
+import getBackendUrl from '../../../../utils/getBackendUrl';
+
+interface CampaignVariant {
+  name: string;
+  templateId: string;
+  weight: number;
+}
+
+interface Campaign {
+  id?: number;
+  documentId?: string;
+  name: string;
+  slug: string;
+  isActive: boolean;
+  triggerType: 'event' | 'scheduled' | 'segment_entry';
+  triggerEventName?: string;
+  segmentIds: string[];
+  variants: CampaignVariant[];
+  cooldownHours: number;
+  priority: number;
+  dailyCapPerUser: number;
+  ignoreQuietHours: boolean;
+  cancelConditions?: unknown;
+  startDate?: string;
+  endDate?: string;
+}
+
+const EMPTY_CAMPAIGN: Campaign = {
+  name: '',
+  slug: '',
+  isActive: false,
+  triggerType: 'event',
+  triggerEventName: '',
+  segmentIds: [],
+  variants: [{ name: 'Variant A', templateId: '', weight: 100 }],
+  cooldownHours: 24,
+  priority: 5,
+  dailyCapPerUser: 1,
+  ignoreQuietHours: false,
+};
+
+const CampaignBuilder: React.FC = () => {
+  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
+  const [segments, setSegments] = useState<CrmSegment[]>([]);
+  const [templates, setTemplates] = useState<CrmTemplate[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [editingCampaign, setEditingCampaign] = useState<Campaign | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const backendUrl = getBackendUrl();
+      const [campaignsRes, segmentsRes, templatesRes] = await Promise.all([
+        fetch(new URL('/api/crm/campaigns', backendUrl).toString()),
+        fetch(new URL('/api/crm/segments', backendUrl).toString()),
+        fetch(new URL('/api/crm/templates', backendUrl).toString()),
+      ]);
+
+      if (campaignsRes.ok) {
+        const data = await campaignsRes.json();
+        setCampaigns(Array.isArray(data) ? data : data?.data || []);
+      }
+
+      if (segmentsRes.ok) {
+        const data = await segmentsRes.json();
+        setSegments(Array.isArray(data) ? data : data?.data || []);
+      }
+
+      if (templatesRes.ok) {
+        const data = await templatesRes.json();
+        setTemplates(Array.isArray(data) ? data : data?.data || []);
+      }
+    } catch (err) {
+      console.error('Failed to fetch data:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleCreate = () => {
+    setEditingCampaign({ ...EMPTY_CAMPAIGN });
+    setIsCreating(true);
+  };
+
+  const handleEdit = (campaign: Campaign) => {
+    setEditingCampaign({ ...campaign });
+    setIsCreating(false);
+  };
+
+  const handleCancel = () => {
+    setEditingCampaign(null);
+    setIsCreating(false);
+  };
+
+  const handleSave = async () => {
+    if (!editingCampaign) return;
+    console.log('Saving campaign:', editingCampaign);
+    handleCancel();
+    fetchData();
+  };
+
+  const handleFieldChange = (field: keyof Campaign, value: unknown) => {
+    if (!editingCampaign) return;
+    setEditingCampaign({ ...editingCampaign, [field]: value });
+  };
+
+  const handleVariantChange = (index: number, field: keyof CampaignVariant, value: unknown) => {
+    if (!editingCampaign) return;
+    const newVariants = [...editingCampaign.variants];
+    newVariants[index] = { ...newVariants[index], [field]: value };
+    setEditingCampaign({ ...editingCampaign, variants: newVariants });
+  };
+
+  const handleAddVariant = () => {
+    if (!editingCampaign) return;
+    const letter = String.fromCharCode(65 + editingCampaign.variants.length);
+    setEditingCampaign({
+      ...editingCampaign,
+      variants: [...editingCampaign.variants, { name: `Variant ${letter}`, templateId: '', weight: 100 }],
+    });
+  };
+
+  const handleRemoveVariant = (index: number) => {
+    if (!editingCampaign || editingCampaign.variants.length <= 1) return;
+    const newVariants = editingCampaign.variants.filter((_, i) => i !== index);
+    setEditingCampaign({ ...editingCampaign, variants: newVariants });
+  };
+
+  if (loading) {
+    return (
+      <Box padding={8}>
+        <Flex justifyContent="center">
+          <Loader />
+        </Flex>
+      </Box>
+    );
+  }
+
+  if (editingCampaign) {
+    return (
+      <Box padding={6}>
+        <Flex justifyContent="space-between" alignItems="center" marginBottom={5}>
+          <Typography variant="delta" fontWeight="bold">
+            {isCreating ? 'Создание кампании' : 'Редактирование кампании'}
+          </Typography>
+          <Flex gap={2}>
+            <Button onClick={handleCancel} variant="tertiary">
+              Отмена
+            </Button>
+            <Button onClick={handleSave} variant="default">
+              Сохранить
+            </Button>
+          </Flex>
+        </Flex>
+
+        <Box background="neutral0" padding={6} hasRadius shadow="filterShadow">
+          <Flex direction="column" gap={4}>
+            <Flex gap={4}>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Название</Field.Label>
+                  <TextInput
+                    value={editingCampaign.name}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('name', e.target.value)
+                    }
+                  />
+                </Field.Root>
+              </Box>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Slug</Field.Label>
+                  <TextInput
+                    value={editingCampaign.slug}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('slug', e.target.value)
+                    }
+                  />
+                </Field.Root>
+              </Box>
+            </Flex>
+
+            <Flex gap={4}>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Тип триггера</Field.Label>
+                  <SingleSelect
+                    value={editingCampaign.triggerType}
+                    onChange={(val: string | number) => handleFieldChange('triggerType', val)}
+                  >
+                    <SingleSelectOption value="event">Событие</SingleSelectOption>
+                    <SingleSelectOption value="scheduled">По расписанию</SingleSelectOption>
+                    <SingleSelectOption value="segment_entry">Вход в сегмент</SingleSelectOption>
+                  </SingleSelect>
+                </Field.Root>
+              </Box>
+              {editingCampaign.triggerType === 'event' && (
+                <Box style={{ flex: 1 }}>
+                  <Field.Root>
+                    <Field.Label>Название события</Field.Label>
+                    <TextInput
+                      value={editingCampaign.triggerEventName || ''}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        handleFieldChange('triggerEventName', e.target.value)
+                      }
+                      placeholder="e.g., user_registered"
+                    />
+                  </Field.Root>
+                </Box>
+              )}
+            </Flex>
+
+            <Field.Root>
+              <Field.Label>Сегменты</Field.Label>
+              <SingleSelect
+                value={editingCampaign.segmentIds[0] || ''}
+                onChange={(val: string | number) => handleFieldChange('segmentIds', val ? [String(val)] : [])}
+                placeholder="Выберите сегмент"
+              >
+                {segments.map((s) => (
+                  <SingleSelectOption key={s.documentId} value={s.documentId}>
+                    {s.name}
+                  </SingleSelectOption>
+                ))}
+              </SingleSelect>
+            </Field.Root>
+
+            <Box>
+              <Flex justifyContent="space-between" alignItems="center" marginBottom={3}>
+                <Typography variant="omega" fontWeight="semiBold">
+                  Варианты сообщений
+                </Typography>
+                <Button size="S" variant="secondary" onClick={handleAddVariant} startIcon={<Plus />}>
+                  Добавить вариант
+                </Button>
+              </Flex>
+              {editingCampaign.variants.map((variant, idx) => (
+                <Box
+                  key={idx}
+                  padding={4}
+                  marginBottom={2}
+                  background="neutral100"
+                  hasRadius
+                  borderStyle="solid"
+                  borderWidth="1px"
+                  borderColor="neutral200"
+                >
+                  <Flex gap={3} alignItems="flex-end">
+                    <Box style={{ flex: 1 }}>
+                      <Field.Root>
+                        <Field.Label>Название</Field.Label>
+                        <TextInput
+                          value={variant.name}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleVariantChange(idx, 'name', e.target.value)
+                          }
+                        />
+                      </Field.Root>
+                    </Box>
+                    <Box style={{ flex: 2 }}>
+                      <Field.Root>
+                        <Field.Label>Шаблон</Field.Label>
+                        <SingleSelect
+                          value={variant.templateId}
+                          onChange={(val: string | number) => handleVariantChange(idx, 'templateId', String(val))}
+                          placeholder="Выберите шаблон"
+                        >
+                          {templates.map((t) => (
+                            <SingleSelectOption key={t.documentId} value={t.documentId}>
+                              {t.name}
+                            </SingleSelectOption>
+                          ))}
+                        </SingleSelect>
+                      </Field.Root>
+                    </Box>
+                    <Box style={{ width: 100 }}>
+                      <Field.Root>
+                        <Field.Label>Вес</Field.Label>
+                        <TextInput
+                          type="number"
+                          value={String(variant.weight)}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleVariantChange(idx, 'weight', parseInt(e.target.value) || 0)
+                          }
+                        />
+                      </Field.Root>
+                    </Box>
+                    {editingCampaign.variants.length > 1 && (
+                      <IconButton
+                        onClick={() => handleRemoveVariant(idx)}
+                        label="Удалить"
+                        variant="ghost"
+                      >
+                        <Trash />
+                      </IconButton>
+                    )}
+                  </Flex>
+                </Box>
+              ))}
+            </Box>
+
+            <Flex gap={4}>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Cooldown (часы)</Field.Label>
+                  <TextInput
+                    type="number"
+                    value={String(editingCampaign.cooldownHours)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('cooldownHours', parseInt(e.target.value) || 0)
+                    }
+                  />
+                </Field.Root>
+              </Box>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Приоритет</Field.Label>
+                  <TextInput
+                    type="number"
+                    value={String(editingCampaign.priority)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('priority', parseInt(e.target.value) || 5)
+                    }
+                  />
+                </Field.Root>
+              </Box>
+              <Box style={{ flex: 1 }}>
+                <Field.Root>
+                  <Field.Label>Лимит в день</Field.Label>
+                  <TextInput
+                    type="number"
+                    value={String(editingCampaign.dailyCapPerUser)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('dailyCapPerUser', parseInt(e.target.value) || 1)
+                    }
+                  />
+                </Field.Root>
+              </Box>
+            </Flex>
+
+            <Flex gap={4}>
+              <Field.Root>
+                <Flex gap={2} alignItems="center">
+                  <Toggle
+                    checked={editingCampaign.isActive}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('isActive', e.target.checked)
+                    }
+                  />
+                  <Field.Label>Активна</Field.Label>
+                </Flex>
+              </Field.Root>
+              <Field.Root>
+                <Flex gap={2} alignItems="center">
+                  <Toggle
+                    checked={editingCampaign.ignoreQuietHours}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleFieldChange('ignoreQuietHours', e.target.checked)
+                    }
+                  />
+                  <Field.Label>Игнорировать тихие часы</Field.Label>
+                </Flex>
+              </Field.Root>
+            </Flex>
+          </Flex>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box padding={6}>
+      <Flex justifyContent="space-between" alignItems="center" marginBottom={5}>
+        <Box>
+          <Typography variant="delta" fontWeight="bold">
+            Кампании
+          </Typography>
+          <Typography variant="pi" textColor="neutral600" marginTop={2} style={{ display: 'block' }}>
+            Управление CRM-кампаниями
+          </Typography>
+        </Box>
+        <Flex gap={2}>
+          <Button onClick={fetchData} loading={loading} variant="tertiary">
+            Обновить
+          </Button>
+          <Button onClick={handleCreate} variant="default" startIcon={<Plus />}>
+            Создать кампанию
+          </Button>
+        </Flex>
+      </Flex>
+
+      <Box background="neutral0" hasRadius shadow="filterShadow">
+        <Table colCount={6} rowCount={campaigns.length + 1}>
+          <Thead>
+            <Tr>
+              <Th>Название</Th>
+              <Th>Триггер</Th>
+              <Th>Сегменты</Th>
+              <Th>Варианты</Th>
+              <Th>Статус</Th>
+              <Th>Действия</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {campaigns.length === 0 ? (
+              <Tr>
+                <Td colSpan={6}>
+                  <Typography textColor="neutral600" style={{ textAlign: 'center' }}>
+                    Нет кампаний
+                  </Typography>
+                </Td>
+              </Tr>
+            ) : (
+              campaigns.map((campaign) => (
+                <Tr key={campaign.documentId || campaign.id}>
+                  <Td>
+                    <Typography fontWeight="semiBold">{campaign.name}</Typography>
+                    <Typography variant="pi" textColor="neutral500">
+                      {campaign.slug}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography>
+                      {campaign.triggerType === 'event' && `Event: ${campaign.triggerEventName || '-'}`}
+                      {campaign.triggerType === 'scheduled' && 'Scheduled'}
+                      {campaign.triggerType === 'segment_entry' && 'Segment Entry'}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography>{campaign.segmentIds?.length || 0}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography>{campaign.variants?.length || 0}</Typography>
+                  </Td>
+                  <Td>
+                    <Badge active={campaign.isActive}>
+                      {campaign.isActive ? 'Активна' : 'Неактивна'}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    <IconButton onClick={() => handleEdit(campaign)} label="Редактировать">
+                      <Pencil />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))
+            )}
+          </Tbody>
+        </Table>
+      </Box>
+    </Box>
+  );
+};
+
+export default memo(CampaignBuilder);

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

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
 import { Main, Box, Typography, Tabs, Flex, Divider } from '@strapi/design-system';
-import { Message, Clock, Cross, GridFour } from '@strapi/icons';
+import { Message, Clock, Cross, ArrowRight } from '@strapi/icons';
 import { Layouts } from '@strapi/admin/strapi-admin';
 import LogsTable from './components/LogsTable.tsx';
 import AntiSpamLogsTable from './components/AntiSpamLogsTable.tsx';
 import StatsView from './components/StatsView.tsx';
-import CampaignDiagram from './components/CampaignDiagram.tsx';
+import CampaignBuilder from './components/CampaignBuilder/index.tsx';
 
 const HomePage: React.FC = () => {
   return (
@@ -57,10 +57,10 @@ const HomePage: React.FC = () => {
                       <Typography>Антиспам-логи</Typography>
                     </Flex>
                   </Tabs.Trigger>
-                  <Tabs.Trigger value="diagram">
+                  <Tabs.Trigger value="campaigns">
                     <Flex gap={2}>
-                      <GridFour width="16px" />
-                      <Typography>Диаграмма</Typography>
+                      <ArrowRight width="16px" />
+                      <Typography>Кампании</Typography>
                     </Flex>
                   </Tabs.Trigger>
                 </Tabs.List>
@@ -75,8 +75,8 @@ const HomePage: React.FC = () => {
               <Tabs.Content value="antispam">
                 <AntiSpamLogsTable />
               </Tabs.Content>
-              <Tabs.Content value="diagram">
-                <CampaignDiagram />
+              <Tabs.Content value="campaigns">
+                <CampaignBuilder />
               </Tabs.Content>
             </Tabs.Root>
           </Box>

package/admin/src/types/crm.ts

@@ -130,3 +130,78 @@ export interface CrmGlobalSettings {
   testMode: boolean;
   testUserIds: number[];
 }
+
+export type JourneyNodeType = 'entrance' | 'message' | 'wait' | 'branch' | 'exit';
+export type JourneyBranchType = 'default' | 'yes' | 'no';
+export type JourneyWaitType = 'duration' | 'until_event' | 'until_time';
+export type JourneyConditionType = 'segment' | 'event_attribute' | 'random_split';
+export type JourneyChannel = 'telegram' | 'email' | 'push' | 'sms';
+
+export interface JourneyMessageVariant {
+  name: string;
+  templateId: string;
+  weight: number;
+}
+
+export interface JourneyMessageConfig {
+  channel: JourneyChannel;
+  variants: JourneyMessageVariant[];
+  cancelConditions?: CancelConditionsConfig;
+}
+
+export interface JourneyWaitConfig {
+  waitType: JourneyWaitType;
+  durationValue: number;
+  durationUnit: 'minutes' | 'hours' | 'days';
+  waitForEvent?: string;
+  waitUntilTime?: string;
+  timeoutDays: number;
+}
+
+export interface JourneyBranchConfig {
+  conditionType: JourneyConditionType;
+  segmentId?: string;
+  eventAttributeCondition?: Record<string, unknown>;
+  randomSplitPercentage: number;
+  evaluateAt: 'realtime' | 'at_entry';
+}
+
+export interface JourneyStep {
+  id: string;
+  stepKey: string;
+  name: string;
+  nodeType: JourneyNodeType;
+  position: { x: number; y: number };
+  messageConfig?: JourneyMessageConfig;
+  waitConfig?: JourneyWaitConfig;
+  branchConfig?: JourneyBranchConfig;
+}
+
+export interface JourneyTransition {
+  id: string;
+  sourceStepKey: string;
+  targetStepKey: string;
+  branchType: JourneyBranchType;
+  priority: number;
+}
+
+export interface CrmJourney {
+  id?: number;
+  documentId?: string;
+  name: string;
+  slug: string;
+  isActive: boolean;
+  triggerType: 'event' | 'scheduled' | 'segment_entry';
+  triggerEventName?: string;
+  entrySegmentId?: string;
+  entryOncePerUser: boolean;
+  reEntryDelayDays: number;
+  steps: JourneyStep[];
+  transitions: JourneyTransition[];
+  entranceStepId?: string;
+  priority: number;
+  dailyCapPerUser: number;
+  ignoreQuietHours: boolean;
+  startDate?: string;
+  endDate?: string;
+}

package/dist/_chunks/{index--qsi_Itg.mjs → index-CQJKdWYb.mjs}

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo } from "react";
 import { Field, Flex, Typography, Box, TextInput, Tooltip, IconButton, Button, Badge } from "@strapi/design-system";
 import { ArrowUp, ArrowDown, Trash, Plus } from "@strapi/icons";
-import { m as generateId } from "./utils-uQBqt07r.mjs";
+import { m as generateId } from "./utils-C6_ndVAZ.mjs";
 const parseButtons = (value) => {
   if (!value) return [];
   if (Array.isArray(value)) {