@inspirer-dev/crm-dashboard 1.0.26 → 1.0.28

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

@@ -1,6 +1,5 @@
 import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import {
-  Badge,
   Box,
   Button,
   Field,
@@ -9,8 +8,11 @@ import {
   TextInput,
   Typography,
   Tooltip,
+  Card,
+  CardContent,
+  useTheme,
 } from '@strapi/design-system';
-import { Plus, Trash, ArrowUp, ArrowDown } from '@strapi/icons';
+import { Plus, Trash, ArrowUp, ArrowDown, Link as LinkIcon } from '@strapi/icons';
 import { generateId } from '../RulesBuilder/utils';
 
 type TelegramButton = {
@@ -73,9 +75,64 @@ const isValidUrl = (url: string): boolean => {
   }
 };
 
+const useThemeColors = () => {
+  const theme = useTheme();
+  const isDark = theme.colors.neutral0 === '#212134';
+
+  return useMemo(() => ({
+    isDark,
+    emptyState: {
+      border: isDark ? '#32324d' : '#dcdce4',
+    },
+    card: {
+      border: isDark ? '#32324d' : '#eaeaef',
+      borderError: isDark ? '#ee5e52' : '#ee5e52',
+    },
+    indexBadge: {
+      background: isDark ? '#2d2d4a' : '#f0f0ff',
+    },
+    preview: {
+      background: isDark
+        ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
+        : 'linear-gradient(135deg, #1e3a5f 0%, #0e2439 100%)',
+    },
+  }), [isDark]);
+};
+
+const TelegramButtonPreview: React.FC<{ text: string; url: string }> = ({ text, url }) => (
+  <a
+    href={url || '#'}
+    target="_blank"
+    rel="noopener noreferrer"
+    onClick={(e) => !url && e.preventDefault()}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '6px',
+      padding: '8px 16px',
+      backgroundColor: '#3390ec',
+      color: '#ffffff',
+      borderRadius: '8px',
+      textDecoration: 'none',
+      fontSize: '14px',
+      fontWeight: 500,
+      cursor: url ? 'pointer' : 'default',
+      transition: 'background-color 0.15s ease',
+      minWidth: '80px',
+    }}
+    onMouseEnter={(e) => url && (e.currentTarget.style.backgroundColor = '#2b7ed8')}
+    onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#3390ec')}
+  >
+    <LinkIcon width={14} height={14} style={{ opacity: 0.9 }} />
+    <span>{text || '(empty)'}</span>
+  </a>
+);
+
 const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
     const [buttons, setButtons] = useState<TelegramButton[]>(() => parseButtons(value));
+    const colors = useThemeColors();
 
     useEffect(() => {
       setButtons(parseButtons(value));
@@ -122,133 +179,183 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
 
     return (
       <Field.Root name={name} error={error} required={required} hint={hint} ref={ref}>
-        <Flex direction="column" gap={3}>
-          <Field.Label>{intlLabel?.defaultMessage || 'Buttons'}</Field.Label>
-          <Typography variant="pi" textColor="neutral600">
-            Build Telegram inline keyboard buttons (text + URL). Stored as JSON.
-          </Typography>
-
-          <Flex direction="column" gap={2}>
-            {buttons.map((btn, idx) => {
-              const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
-              return (
-                <Flex
-                  key={btn.id}
-                  gap={2}
-                  alignItems="flex-start"
-                  padding={3}
-                  background="neutral0"
-                  hasRadius
-                  style={{ border: '1px solid #dcdce4' }}
-                >
-                  <Box style={{ flex: 2, minWidth: 180 }}>
-                    <Field.Root name={`${name}.${btn.id}.text`}>
-                      <Field.Label>Text</Field.Label>
-                      <TextInput
-                        value={btn.text}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          updateButton(btn.id, { text: e.target.value })
-                        }
-                        disabled={disabled}
-                      />
-                    </Field.Root>
-                  </Box>
+        <Flex direction="column" gap={4}>
+          <Flex justifyContent="space-between" alignItems="center">
+            <Box>
+              <Field.Label>{intlLabel?.defaultMessage || 'Buttons'}</Field.Label>
+              <Typography variant="pi" textColor="neutral500">
+                Telegram inline keyboard buttons
+              </Typography>
+            </Box>
+            <Button
+              startIcon={<Plus />}
+              onClick={addButton}
+              disabled={disabled}
+              variant="secondary"
+              size="S"
+            >
+              Add
+            </Button>
+          </Flex>
 
-                  <Box style={{ flex: 3, minWidth: 220 }}>
-                    <Field.Root name={`${name}.${btn.id}.url`}>
-                      <Field.Label>URL</Field.Label>
-                      <TextInput
-                        value={btn.url}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          updateButton(btn.id, { url: e.target.value })
-                        }
-                        disabled={disabled}
-                      />
-                      {!urlOk && (
-                        <Typography variant="pi" textColor="danger600" style={{ marginTop: 4 }}>
-                          Please enter a valid http/https URL
-                        </Typography>
-                      )}
-                    </Field.Root>
-                  </Box>
+          {buttons.length === 0 ? (
+            <Box
+              padding={6}
+              background="neutral100"
+              hasRadius
+              style={{
+                border: `2px dashed ${colors.emptyState.border}`,
+                textAlign: 'center',
+              }}
+            >
+              <Typography variant="omega" textColor="neutral500">
+                No buttons yet
+              </Typography>
+              <Typography variant="pi" textColor="neutral400" style={{ display: 'block', marginTop: 4 }}>
+                Add a button to create an inline keyboard for your Telegram message
+              </Typography>
+            </Box>
+          ) : (
+            <Flex direction="column" gap={2}>
+              {buttons.map((btn, idx) => {
+                const urlOk = btn.url.length === 0 ? true : isValidUrl(btn.url);
+                return (
+                  <Card
+                    key={btn.id}
+                    background="neutral0"
+                    style={{
+                      border: `1px solid ${urlOk ? colors.card.border : colors.card.borderError}`,
+                      transition: 'box-shadow 0.15s ease',
+                    }}
+                  >
+                    <CardContent>
+                      <Flex gap={3} alignItems="center" padding={3}>
+                        <Box
+                          style={{
+                            width: '24px',
+                            height: '24px',
+                            borderRadius: '4px',
+                            backgroundColor: colors.indexBadge.background,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            flexShrink: 0,
+                          }}
+                        >
+                          <Typography variant="sigma" textColor="primary600">
+                            {idx + 1}
+                          </Typography>
+                        </Box>
 
-                  <Box style={{ width: 90 }}>
-                    <Field.Root name={`${name}.${btn.id}.row`}>
-                      <Field.Label>Row</Field.Label>
-                      <TextInput
-                        type="number"
-                        value={String(btn.row ?? 0)}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          updateButton(btn.id, { row: parseInt(e.target.value, 10) || 0 })
-                        }
-                        disabled={disabled}
-                      />
-                    </Field.Root>
-                  </Box>
+                        <Box style={{ flex: 1, minWidth: 120 }}>
+                          <TextInput
+                            placeholder="Button text"
+                            value={btn.text}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                              updateButton(btn.id, { text: e.target.value })
+                            }
+                            disabled={disabled}
+                            size="S"
+                          />
+                        </Box>
 
-                  <Flex direction="column" gap={1} paddingTop={6}>
-                    <Tooltip label="Move up">
-                      <IconButton
-                        onClick={() => move(idx, idx - 1)}
-                        label="Move up"
-                        variant="ghost"
-                        disabled={disabled || idx === 0}
-                      >
-                        <ArrowUp />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip label="Move down">
-                      <IconButton
-                        onClick={() => move(idx, idx + 1)}
-                        label="Move down"
-                        variant="ghost"
-                        disabled={disabled || idx === buttons.length - 1}
-                      >
-                        <ArrowDown />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip label="Delete button">
-                      <IconButton
-                        onClick={() => deleteButton(btn.id)}
-                        label="Delete button"
-                        variant="ghost"
-                        disabled={disabled}
-                      >
-                        <Trash />
-                      </IconButton>
-                    </Tooltip>
-                  </Flex>
-                </Flex>
-              );
-            })}
+                        <Box style={{ flex: 2, minWidth: 180 }}>
+                          <TextInput
+                            placeholder="https://..."
+                            value={btn.url}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                              updateButton(btn.id, { url: e.target.value })
+                            }
+                            disabled={disabled}
+                            size="S"
+                            hasError={!urlOk}
+                          />
+                        </Box>
 
-            {buttons.length === 0 && (
-              <Box padding={4} background="neutral0" hasRadius style={{ border: '1px dashed #dcdce4' }}>
-                <Typography variant="omega" textColor="neutral600">
-                  No buttons. Add one to create an inline keyboard.
-                </Typography>
-              </Box>
-            )}
-          </Flex>
+                        <Box style={{ width: 60 }}>
+                          <TextInput
+                            type="number"
+                            placeholder="Row"
+                            value={String(btn.row ?? 0)}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                              updateButton(btn.id, { row: parseInt(e.target.value, 10) || 0 })
+                            }
+                            disabled={disabled}
+                            size="S"
+                          />
+                        </Box>
 
-          <Flex gap={2}>
-            <Button startIcon={<Plus />} onClick={addButton} disabled={disabled} variant="secondary">
-              Add button
-            </Button>
-          </Flex>
+                        <Flex gap={1} style={{ flexShrink: 0 }}>
+                          <Tooltip label="Move up">
+                            <IconButton
+                              onClick={() => move(idx, idx - 1)}
+                              label="Move up"
+                              variant="ghost"
+                              size="S"
+                              disabled={disabled || idx === 0}
+                            >
+                              <ArrowUp width={16} height={16} />
+                            </IconButton>
+                          </Tooltip>
+                          <Tooltip label="Move down">
+                            <IconButton
+                              onClick={() => move(idx, idx + 1)}
+                              label="Move down"
+                              variant="ghost"
+                              size="S"
+                              disabled={disabled || idx === buttons.length - 1}
+                            >
+                              <ArrowDown width={16} height={16} />
+                            </IconButton>
+                          </Tooltip>
+                          <Tooltip label="Delete">
+                            <IconButton
+                              onClick={() => deleteButton(btn.id)}
+                              label="Delete"
+                              variant="ghost"
+                              size="S"
+                              disabled={disabled}
+                              style={{ color: '#d02b20' }}
+                            >
+                              <Trash width={16} height={16} />
+                            </IconButton>
+                          </Tooltip>
+                        </Flex>
+                      </Flex>
+                      {!urlOk && (
+                        <Box paddingLeft={3} paddingBottom={2}>
+                          <Typography variant="pi" textColor="danger600">
+                            Please enter a valid http/https URL
+                          </Typography>
+                        </Box>
+                      )}
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </Flex>
+          )}
 
           {buttons.length > 0 && (
-            <Box paddingTop={2}>
-              <Typography variant="pi" textColor="neutral600" style={{ marginBottom: 8, display: 'block' }}>
-                Preview
+            <Box
+              padding={4}
+              hasRadius
+              style={{
+                backgroundImage: colors.preview.background,
+              }}
+            >
+              <Typography
+                variant="sigma"
+                textColor="neutral0"
+                style={{ display: 'block', marginBottom: 12, opacity: 0.7 }}
+              >
+                PREVIEW
               </Typography>
-              <Flex direction="column" gap={2}>
+              <Flex direction="column" gap={2} alignItems="center">
                 {previewRows.map((row) => (
-                  <Flex key={row.row} gap={1} wrap="wrap">
+                  <Flex key={row.row} gap={2} wrap="wrap" justifyContent="center">
                     {row.items.map((b) => (
-                      <Badge key={b.id} backgroundColor="primary100" textColor="primary600">
-                        {b.text || '(empty)'}
-                      </Badge>
+                      <TelegramButtonPreview key={b.id} text={b.text} url={b.url} />
                     ))}
                   </Flex>
                 ))}
@@ -267,4 +374,3 @@ const ButtonsBuilder = forwardRef<HTMLDivElement, ButtonsBuilderProps>(
 ButtonsBuilder.displayName = 'ButtonsBuilder';
 
 export default ButtonsBuilder;
-

package/admin/src/components/StepFlowBuilder/constants.ts

@@ -2,38 +2,85 @@ import type { StepType, ChannelType, DurationUnit } from './types';
 
 export const NODE_COLORS: Record<
   StepType,
-  { background: string; border: string; text: string }
+  {
+    background: string;
+    border: string;
+    text: string;
+    gradient: string;
+    glow: string;
+    icon: string;
+  }
 > = {
   entry: {
-    background: '#eef5eb',
-    border: '#5cb176',
-    text: '#297c3b',
+    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+    border: '#059669',
+    text: '#ffffff',
+    gradient: 'linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)',
+    glow: 'rgba(16, 185, 129, 0.25)',
+    icon: '#059669',
   },
   message: {
-    background: '#eef8ff',
-    border: '#0077cc',
-    text: '#0055a4',
+    background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+    border: '#2563eb',
+    text: '#ffffff',
+    gradient: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
+    glow: 'rgba(59, 130, 246, 0.25)',
+    icon: '#2563eb',
   },
   wait: {
-    background: '#fffae6',
-    border: '#e9b200',
-    text: '#a16207',
+    background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+    border: '#d97706',
+    text: '#ffffff',
+    gradient: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
+    glow: 'rgba(245, 158, 11, 0.25)',
+    icon: '#d97706',
   },
   branch: {
-    background: '#f5f0ff',
-    border: '#7b61ff',
-    text: '#5746af',
+    background: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
+    border: '#7c3aed',
+    text: '#ffffff',
+    gradient: 'linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)',
+    glow: 'rgba(139, 92, 246, 0.25)',
+    icon: '#7c3aed',
   },
   exit: {
-    background: '#fef1f0',
-    border: '#dc2626',
-    text: '#c03030',
+    background: 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)',
+    border: '#4b5563',
+    text: '#ffffff',
+    gradient: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
+    glow: 'rgba(107, 114, 128, 0.25)',
+    icon: '#4b5563',
+  },
+};
+
+export const EDGE_COLORS = {
+  default: {
+    stroke: '#94a3b8',
+    strokeWidth: 2,
+  },
+  yes: {
+    stroke: '#10b981',
+    strokeWidth: 2,
+    label: {
+      background: '#d1fae5',
+      text: '#059669',
+      border: '#a7f3d0',
+    },
+  },
+  no: {
+    stroke: '#ef4444',
+    strokeWidth: 2,
+    label: {
+      background: '#fee2e2',
+      text: '#dc2626',
+      border: '#fecaca',
+    },
   },
 };
 
 export const NODE_DIMENSIONS = {
-  width: 220,
-  height: 80,
+  width: 240,
+  height: 88,
 };
 
 export const STEP_TYPE_LABELS: Record<StepType, string> = {

package/admin/src/components/StepFlowBuilder/edges/LabeledEdge.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import {
   BaseEdge,
   EdgeLabelRenderer,
-  getBezierPath,
+  getSmoothStepPath,
   type EdgeProps,
 } from 'reactflow';
+import { EDGE_COLORS } from '../constants';
 
 interface LabeledEdgeData {
   label?: string;
 }
 
 const LabeledEdge: React.FC<EdgeProps<LabeledEdgeData>> = ({
-  id,
   sourceX,
   sourceY,
   targetX,
@@ -22,21 +22,26 @@ const LabeledEdge: React.FC<EdgeProps<LabeledEdgeData>> = ({
   style = {},
   markerEnd,
 }) => {
-  const [edgePath, labelX, labelY] = getBezierPath({
+  const [edgePath] = getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
     targetX,
     targetY,
     targetPosition,
+    borderRadius: 16,
   });
 
   const isYes = sourceHandle === 'yes';
   const isNo = sourceHandle === 'no';
-  const label = isYes ? 'Yes' : isNo ? 'No' : null;
-  const bgColor = isYes ? '#dcfce7' : isNo ? '#fef2f2' : '#fff';
-  const textColor = isYes ? '#15803d' : isNo ? '#dc2626' : '#333';
-  const borderColor = isYes ? '#86efac' : isNo ? '#fca5a5' : '#ddd';
+  const label = isYes ? 'YES' : isNo ? 'NO' : null;
+
+  const edgeStyle = isYes ? EDGE_COLORS.yes : isNo ? EDGE_COLORS.no : EDGE_COLORS.default;
+
+  const labelStyle = isYes ? EDGE_COLORS.yes.label : isNo ? EDGE_COLORS.no.label : null;
+
+  const labelPosX = sourceX;
+  const labelPosY = sourceY + 24;
 
   return (
     <>
@@ -45,23 +50,25 @@ const LabeledEdge: React.FC<EdgeProps<LabeledEdgeData>> = ({
         markerEnd={markerEnd}
         style={{
           ...style,
-          stroke: isYes ? '#5cb176' : isNo ? '#dc2626' : '#b1b1b7',
-          strokeWidth: 2,
+          stroke: edgeStyle.stroke,
+          strokeWidth: edgeStyle.strokeWidth,
         }}
       />
-      {label && (
+      {label && labelStyle && (
         <EdgeLabelRenderer>
           <div
             style={{
               position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
-              fontSize: 11,
-              fontWeight: 600,
-              background: bgColor,
-              color: textColor,
-              padding: '2px 8px',
-              borderRadius: 4,
-              border: `1px solid ${borderColor}`,
+              transform: `translate(-50%, -50%) translate(${labelPosX}px, ${labelPosY}px)`,
+              fontSize: 10,
+              fontWeight: 700,
+              letterSpacing: '0.05em',
+              background: labelStyle.background,
+              color: labelStyle.text,
+              padding: '4px 12px',
+              borderRadius: 6,
+              border: `2px solid ${labelStyle.border}`,
+              boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
               pointerEvents: 'all',
             }}
             className="nodrag nopan"

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

@@ -220,6 +220,7 @@ const FlowCanvas: React.FC<FlowCanvasProps> = ({ steps, onStepsChange, disabled,
     <Box
       style={{
         height: '100%',
+        width: '100%',
         border: error ? '1px solid #ee5e52' : '1px solid #dcdce4',
         borderRadius: 4,
         overflow: 'hidden',

package/admin/src/components/StepFlowBuilder/hooks/useFlowTheme.ts

@@ -0,0 +1,50 @@
+import { useTheme } from 'styled-components';
+
+interface StrapiTheme {
+  colors?: Record<string, string>;
+}
+
+export interface FlowThemeColors {
+  background: string;
+  surface: string;
+  surfaceHover: string;
+  border: string;
+  borderLight: string;
+  text: string;
+  textMuted: string;
+  textSubtle: string;
+  isDark: boolean;
+}
+
+export const useFlowTheme = (): FlowThemeColors => {
+  const theme = useTheme() as StrapiTheme;
+  const colors = theme?.colors;
+
+  const isDark = colors?.neutral0 === '#212134';
+
+  if (isDark) {
+    return {
+      background: '#212134',
+      surface: '#262639',
+      surfaceHover: '#32324d',
+      border: '#4a4a6a',
+      borderLight: '#3d3d57',
+      text: '#ffffff',
+      textMuted: '#a5a5ba',
+      textSubtle: '#8e8ea9',
+      isDark: true,
+    };
+  }
+
+  return {
+    background: '#ffffff',
+    surface: '#f8fafc',
+    surfaceHover: '#f1f5f9',
+    border: '#e2e8f0',
+    borderLight: '#f1f5f9',
+    text: '#1e293b',
+    textMuted: '#64748b',
+    textSubtle: '#94a3b8',
+    isDark: false,
+  };
+};