@inspirer-dev/crm-dashboard 1.0.43 → 1.0.44

package/admin/src/components/StepFlowBuilder/flow-canvas/FlowCanvas.tsx

@@ -490,6 +490,12 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({
             .react-flow__edge.temp {
               pointer-events: none;
             }
+            .react-flow__node {
+              overflow: visible !important;
+            }
+            .react-flow__handle {
+              z-index: 100 !important;
+            }
           `}
         </style>
         <ReactFlow

package/admin/src/components/StepFlowBuilder/index.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useState, useRef }
 import { ReactFlowProvider } from 'reactflow';
 import 'reactflow/dist/style.css';
 import { Box, Field, Flex, Typography, Badge } from '@strapi/design-system';
-import { useForm, unstable_useContentManagerContext as useContentManagerContext } from '@strapi/strapi/admin';
+import { useForm, unstable_useContentManagerContext as useContentManagerContext, useFetchClient } from '@strapi/strapi/admin';
 
 import type { StepFlowBuilderProps, FlowStep, CampaignContext, EntrySegment } from './types';
 import type { ValidationResult } from './validation';
@@ -22,6 +22,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
     const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     const form = useForm('StepFlowBuilder', (state) => state);
+    const { get } = useFetchClient();
 
     let documentId: string | undefined;
     let model: string | undefined;
@@ -40,11 +41,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
 
       const fetchCampaignData = async () => {
         try {
-          const { useFetchClient } = await import('@strapi/strapi/admin');
-          const { get } = useFetchClient();
-
           const url = `/content-manager/collection-types/${model}/${documentId}`;
-
           const response = await get(url, { params: { populate: 'entrySegment' } });
 
           const data = response?.data as { entrySegment?: { id: number; name: string } } | undefined;
@@ -63,7 +60,7 @@ const StepFlowBuilderInner = forwardRef<HTMLDivElement, StepFlowBuilderProps>(
       };
 
       fetchCampaignData();
-    }, [documentId, model, hasFetched]);
+    }, [documentId, model, hasFetched, get]);
 
     const currentSegment = useMemo<EntrySegment | null>(() => {
       const values = form?.values as Record<string, unknown> | undefined;

package/admin/src/components/StepFlowBuilder/nodes/BranchNode.tsx

@@ -43,6 +43,7 @@ const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          top: -8,
         }}
       />
       <div
@@ -145,6 +146,7 @@ const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
           left: '30%',
+          bottom: -8,
         }}
       />
       <Handle
@@ -158,6 +160,7 @@ const BranchNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
           left: '70%',
+          bottom: -8,
         }}
       />
     </>

package/admin/src/components/StepFlowBuilder/nodes/EntryNode.tsx

@@ -124,6 +124,7 @@ const EntryNode: React.FC<NodeProps<FlowNodeData>> = ({ selected }) => {
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          bottom: -8,
         }}
       />
     </>

package/admin/src/components/StepFlowBuilder/nodes/ExitNode.tsx

@@ -42,6 +42,7 @@ const ExitNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =>
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          top: -8,
         }}
       />
       <div

package/admin/src/components/StepFlowBuilder/nodes/MessageNode.tsx

@@ -45,6 +45,7 @@ const MessageNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected })
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          top: -8,
         }}
       />
       <div
@@ -167,6 +168,7 @@ const MessageNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected })
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          bottom: -8,
         }}
       />
     </>

package/admin/src/components/StepFlowBuilder/nodes/WaitNode.tsx

@@ -45,6 +45,7 @@ const WaitNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =>
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          top: -8,
         }}
       />
       <div
@@ -147,6 +148,7 @@ const WaitNode: React.FC<NodeProps<FlowNodeData>> = ({ id, data, selected }) =>
           height: HANDLE_SIZE,
           border: '3px solid white',
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          bottom: -8,
         }}
       />
     </>

package/admin/src/components/StepFlowBuilder/panels/BranchConfig.tsx

@@ -8,6 +8,7 @@ import {
   Loader,
   NumberInput,
 } from '@strapi/design-system';
+import { useFetchClient } from '@strapi/strapi/admin';
 import type { FlowNodeData, SegmentOption } from '../types';
 import { useFlowTheme } from '../hooks/useFlowTheme';
 
@@ -19,6 +20,7 @@ interface BranchConfigProps {
 
 const BranchConfig: React.FC<BranchConfigProps> = ({ data, onUpdate, disabled }) => {
   const theme = useFlowTheme();
+  const { get } = useFetchClient();
   const [segments, setSegments] = useState<SegmentOption[]>([]);
   const [loading, setLoading] = useState(true);
   const [fetchError, setFetchError] = useState(false);
@@ -28,9 +30,6 @@ const BranchConfig: React.FC<BranchConfigProps> = ({ data, onUpdate, disabled })
   useEffect(() => {
     const fetchSegments = async () => {
       try {
-        const { useFetchClient } = await import('@strapi/strapi/admin');
-        const { get } = useFetchClient();
-
         const response = await get('/content-manager/collection-types/api::crm-segment.crm-segment', {
           params: {
             pageSize: 100,
@@ -52,10 +51,10 @@ const BranchConfig: React.FC<BranchConfigProps> = ({ data, onUpdate, disabled })
       }
     };
     fetchSegments();
-  }, []);
+  }, [get]);
 
-  const handleSegmentChange = (value: string) => {
-    const segment = segments.find((s) => s.id.toString() === value);
+  const handleSegmentChange = (value: string | number) => {
+    const segment = segments.find((s) => s.id.toString() === value.toString());
     onUpdate({
       config: {
         ...data.config,

package/admin/src/components/StepFlowBuilder/panels/MessageConfig.tsx

@@ -10,6 +10,7 @@ import {
   Loader,
 } from '@strapi/design-system';
 import { Plus, Trash } from '@strapi/icons';
+import { useFetchClient } from '@strapi/strapi/admin';
 import type { FlowNodeData, CampaignVariant, ChannelType, TemplateOption } from '../types';
 import { CHANNEL_OPTIONS } from '../constants';
 import { useFlowTheme } from '../hooks/useFlowTheme';
@@ -22,6 +23,7 @@ interface MessageConfigProps {
 
 const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled }) => {
   const theme = useFlowTheme();
+  const { get } = useFetchClient();
   const [variants, setVariants] = useState<CampaignVariant[]>(data.config.variants || []);
   const [templates, setTemplates] = useState<TemplateOption[]>([]);
   const [loadingTemplates, setLoadingTemplates] = useState(true);
@@ -35,9 +37,6 @@ const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled
   useEffect(() => {
     const fetchTemplates = async () => {
       try {
-        const { useFetchClient } = await import('@strapi/strapi/admin');
-        const { get } = useFetchClient();
-
         const response = await get(
           '/content-manager/collection-types/api::crm-template.crm-template',
           {
@@ -64,13 +63,13 @@ const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled
       }
     };
     fetchTemplates();
-  }, [channel]);
+  }, [channel, get]);
 
-  const handleChannelChange = (value: string) => {
+  const handleChannelChange = (value: string | number) => {
     onUpdate({
       config: {
         ...data.config,
-        channel: value as ChannelType,
+        channel: value.toString() as ChannelType,
       },
     });
   };
@@ -343,7 +342,7 @@ const MessageConfig: React.FC<MessageConfigProps> = ({ data, onUpdate, disabled
                   ) : (
                     <SingleSelect
                       value={variant.template?.id?.toString() || ''}
-                      onChange={(value: string) => handleTemplateChange(index, value)}
+                      onChange={(value: string | number) => handleTemplateChange(index, value.toString())}
                       disabled={disabled}
                       placeholder="Select template..."
                       size="S"

package/admin/src/components/TriggerConfigField/index.tsx

@@ -353,6 +353,7 @@ const SectionHeader: React.FC<{
 const TriggerConfigField = forwardRef<HTMLDivElement, TriggerConfigFieldProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const [config, setConfig] = useState<TriggerConfig>(() => parseConfig(value));
+    const [eventSearchText, setEventSearchText] = useState('');
     const colors = useThemeColors();
 
     useEffect(() => {
@@ -463,27 +464,47 @@ const TriggerConfigField = forwardRef<HTMLDivElement, TriggerConfigFieldProps>(
                     placeholder="Search events..."
                     value={config.eventName || ''}
                     textValue={config.eventName ? getEventLabel(config.eventName) : ''}
-                    onChange={(val: string) => handleUpdate({ eventName: val })}
-                    onClear={() => handleUpdate({ eventName: '' })}
+                    onChange={(val: string) => {
+                      handleUpdate({ eventName: val });
+                      setEventSearchText('');
+                    }}
+                    onTextValueChange={(text: string) => setEventSearchText(text)}
+                    onClear={() => {
+                      handleUpdate({ eventName: '' });
+                      setEventSearchText('');
+                    }}
                     disabled={disabled}
                     creatable
                     createMessage={(v: string) => `Use custom event: "${v}"`}
-                    onCreateOption={(v: string) => handleUpdate({ eventName: v })}
+                    onCreateOption={(v: string) => {
+                      handleUpdate({ eventName: v });
+                      setEventSearchText('');
+                    }}
                   >
                     {Object.entries(ANALYTICS_EVENTS).flatMap(([category, events]) =>
-                      events.map((event) => (
-                        <ComboboxOption key={event.value} value={event.value}>
-                          <Flex gap={2} alignItems="center">
-                            <Badge size="S" backgroundColor="neutral150" textColor="neutral600">
-                              {category}
-                            </Badge>
-                            <span>{event.label}</span>
-                            <Typography variant="pi" textColor="neutral400">
-                              {event.value}
-                            </Typography>
-                          </Flex>
-                        </ComboboxOption>
-                      ))
+                      events
+                        .filter((event) => {
+                          if (!eventSearchText) return true;
+                          const search = eventSearchText.toLowerCase();
+                          return (
+                            event.label.toLowerCase().includes(search) ||
+                            event.value.toLowerCase().includes(search) ||
+                            category.toLowerCase().includes(search)
+                          );
+                        })
+                        .map((event) => (
+                          <ComboboxOption key={event.value} value={event.value}>
+                            <Flex gap={2} alignItems="center">
+                              <Badge size="S" backgroundColor="neutral150" textColor="neutral600">
+                                {category}
+                              </Badge>
+                              <span>{event.label}</span>
+                              <Typography variant="pi" textColor="neutral400">
+                                {event.value}
+                              </Typography>
+                            </Flex>
+                          </ComboboxOption>
+                        ))
                     )}
                   </Combobox>
                   <Typography

package/admin/src/hooks/api/index.ts

@@ -0,0 +1,7 @@
+export * from './types';
+export { useFilterOptions } from './use-filter-options';
+export { useDashboardStats } from './use-dashboard-stats';
+export { useCrmLogs } from './use-crm-logs';
+export { useAntiSpamLogs } from './use-anti-spam-logs';
+export { useCampaigns, useSegments, useTemplates } from './use-campaigns';
+export { useCreateCampaign, useUpdateCampaign, useDeleteCampaign } from './use-campaign-mutations';

package/admin/src/hooks/api/types.ts

@@ -0,0 +1,127 @@
+export interface FilterOption {
+  id: string;
+  name: string;
+}
+
+export interface FilterOptions {
+  campaigns: FilterOption[];
+  segments: FilterOption[];
+  statuses?: string[];
+}
+
+export interface StatsFilters {
+  dateFrom: Date | undefined;
+  dateTo: Date | undefined;
+  campaigns: string[];
+  segments: string[];
+}
+
+export interface LogsFilters {
+  search: string;
+  statuses: string[];
+  campaigns: string[];
+  segments: string[];
+  scheduledFrom: Date | undefined;
+  scheduledTo: Date | undefined;
+  sentFrom: Date | undefined;
+  sentTo: Date | undefined;
+}
+
+export interface DashboardTotals {
+  sent: number;
+  clicks: number;
+  unique_clickers: number;
+  click_rate: number;
+  deposits_1h: number;
+  deposit_sum_1h: number;
+  deposit_rate: number;
+}
+
+export interface CampaignMetrics {
+  campaign_id: string;
+  campaign_name: string;
+  sent: number;
+  clicks: number;
+  unique_clickers: number;
+  click_rate: number;
+  deposits_1h: number;
+  deposit_sum_1h: number;
+  deposit_rate: number;
+}
+
+export interface VariantMetrics {
+  campaign_id: string;
+  campaign_name: string;
+  variant_id: string | null;
+  variant_name: string;
+  sent: number;
+  clicks: number;
+  unique_clickers: number;
+  click_rate: number;
+  deposits_1h: number;
+  deposit_sum_1h: number;
+  deposit_rate: number;
+}
+
+export interface DashboardStats {
+  period: { from: string; to: string };
+  totals: DashboardTotals;
+  by_campaign: CampaignMetrics[];
+  by_variant: VariantMetrics[];
+}
+
+export interface CrmLog {
+  timestamp: string;
+  user_id: string;
+  campaign_id: string;
+  campaign_name: string;
+  segment_id?: string;
+  segment_name?: string;
+  status: string;
+  error_reason?: string;
+  scheduled_at?: string;
+  sent_at?: string;
+}
+
+export interface CrmLogsResponse {
+  data: CrmLog[];
+  total: number;
+}
+
+export interface AntiSpamLog {
+  timestamp: string;
+  user_id: string;
+  campaign_id: string;
+  campaign_name?: string;
+  reason: string;
+}
+
+export interface AntiSpamLogsResponse {
+  data: AntiSpamLog[];
+  total: number;
+}
+
+export interface CampaignVariant {
+  name: string;
+  templateId: string;
+  weight: number;
+}
+
+export 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;
+}

package/admin/src/hooks/api/use-anti-spam-logs.ts

@@ -0,0 +1,35 @@
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { crmKeys } from '../../lib/react-query';
+import getBackendUrl from '../../utils/getBackendUrl';
+import type { AntiSpamLogsResponse } from './types';
+
+const fetchAntiSpamLogs = async (search: string, page: number): Promise<AntiSpamLogsResponse> => {
+  const params = new URLSearchParams({
+    page: String(page),
+    pageSize: '20',
+  });
+
+  if (search) params.set('search', search);
+
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL(`/api/crm/anti-spam-logs?${params}`, backendUrl).toString());
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch anti-spam logs');
+  }
+
+  const data = await res.json();
+  return {
+    data: data.data || [],
+    total: data.total || 0,
+  };
+};
+
+export const useAntiSpamLogs = (search: string, page: number) => {
+  return useQuery({
+    queryKey: crmKeys.antiSpamLogsList(search, page),
+    queryFn: () => fetchAntiSpamLogs(search, page),
+    staleTime: 30 * 1000,
+    placeholderData: keepPreviousData,
+  });
+};

package/admin/src/hooks/api/use-campaign-mutations.ts

@@ -0,0 +1,82 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { crmKeys } from '../../lib/react-query';
+import getBackendUrl from '../../utils/getBackendUrl';
+import type { Campaign } from './types';
+
+type CreateCampaignInput = Omit<Campaign, 'id' | 'documentId'>;
+type UpdateCampaignInput = Partial<Campaign> & { documentId: string };
+
+const createCampaign = async (input: CreateCampaignInput): Promise<Campaign> => {
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL('/api/crm/campaigns', backendUrl).toString(), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  });
+
+  if (!res.ok) {
+    throw new Error('Failed to create campaign');
+  }
+
+  return res.json();
+};
+
+const updateCampaign = async (input: UpdateCampaignInput): Promise<Campaign> => {
+  const { documentId, ...data } = input;
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL(`/api/crm/campaigns/${documentId}`, backendUrl).toString(), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+
+  if (!res.ok) {
+    throw new Error('Failed to update campaign');
+  }
+
+  return res.json();
+};
+
+const deleteCampaign = async (documentId: string): Promise<void> => {
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL(`/api/crm/campaigns/${documentId}`, backendUrl).toString(), {
+    method: 'DELETE',
+  });
+
+  if (!res.ok) {
+    throw new Error('Failed to delete campaign');
+  }
+};
+
+export const useCreateCampaign = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createCampaign,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: crmKeys.campaigns() });
+    },
+  });
+};
+
+export const useUpdateCampaign = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateCampaign,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: crmKeys.campaigns() });
+    },
+  });
+};
+
+export const useDeleteCampaign = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteCampaign,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: crmKeys.campaigns() });
+    },
+  });
+};

package/admin/src/hooks/api/use-campaigns.ts

@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query';
+import { crmKeys } from '../../lib/react-query';
+import getBackendUrl from '../../utils/getBackendUrl';
+import type { Campaign } from './types';
+import type { CrmSegment, CrmTemplate } from '../../types/crm';
+
+const fetchCampaigns = async (): Promise<Campaign[]> => {
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL('/api/crm/campaigns', backendUrl).toString());
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch campaigns');
+  }
+
+  const data = await res.json();
+  return Array.isArray(data) ? data : data?.data || [];
+};
+
+const fetchSegments = async (): Promise<CrmSegment[]> => {
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL('/api/crm/segments', backendUrl).toString());
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch segments');
+  }
+
+  const data = await res.json();
+  return Array.isArray(data) ? data : data?.data || [];
+};
+
+const fetchTemplates = async (): Promise<CrmTemplate[]> => {
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL('/api/crm/templates', backendUrl).toString());
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch templates');
+  }
+
+  const data = await res.json();
+  return Array.isArray(data) ? data : data?.data || [];
+};
+
+export const useCampaigns = () => {
+  return useQuery({
+    queryKey: crmKeys.campaigns(),
+    queryFn: fetchCampaigns,
+    staleTime: 2 * 60 * 1000,
+  });
+};
+
+export const useSegments = () => {
+  return useQuery({
+    queryKey: crmKeys.segments(),
+    queryFn: fetchSegments,
+    staleTime: 2 * 60 * 1000,
+  });
+};
+
+export const useTemplates = () => {
+  return useQuery({
+    queryKey: crmKeys.templates(),
+    queryFn: fetchTemplates,
+    staleTime: 2 * 60 * 1000,
+  });
+};

package/admin/src/hooks/api/use-crm-logs.ts

@@ -0,0 +1,42 @@
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { crmKeys } from '../../lib/react-query';
+import getBackendUrl from '../../utils/getBackendUrl';
+import type { LogsFilters, CrmLogsResponse } from './types';
+
+const fetchCrmLogs = async (filters: LogsFilters, page: number): Promise<CrmLogsResponse> => {
+  const params = new URLSearchParams({
+    page: String(page),
+    pageSize: '20',
+  });
+
+  if (filters.search) params.set('search', filters.search.trim());
+  if (filters.statuses.length > 0) params.set('status', filters.statuses.join(','));
+  if (filters.campaigns.length > 0) params.set('campaignIds', filters.campaigns.join(','));
+  if (filters.segments.length > 0) params.set('segmentIds', filters.segments.join(','));
+  if (filters.scheduledFrom) params.set('scheduledFrom', filters.scheduledFrom.toISOString());
+  if (filters.scheduledTo) params.set('scheduledTo', filters.scheduledTo.toISOString());
+  if (filters.sentFrom) params.set('sentFrom', filters.sentFrom.toISOString());
+  if (filters.sentTo) params.set('sentTo', filters.sentTo.toISOString());
+
+  const backendUrl = getBackendUrl();
+  const res = await fetch(new URL(`/api/crm/logs?${params}`, backendUrl).toString());
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch CRM logs');
+  }
+
+  const data = await res.json();
+  return {
+    data: data.data || [],
+    total: data.total || 0,
+  };
+};
+
+export const useCrmLogs = (filters: LogsFilters, page: number) => {
+  return useQuery({
+    queryKey: crmKeys.logsList(filters, page),
+    queryFn: () => fetchCrmLogs(filters, page),
+    staleTime: 30 * 1000,
+    placeholderData: keepPreviousData,
+  });
+};