@inspirer-dev/crm-dashboard 1.0.74 → 1.0.76

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

@@ -53,15 +53,72 @@ import {
   countRules,
 } from './utils';
 
+interface StrapiTheme {
+  colors?: Record<string, string>;
+}
+
+const useThemeColors = () => {
+  const theme = useTheme() as StrapiTheme;
+  const isDark = theme?.colors?.neutral0 === '#212134';
+
+  return useMemo(
+    () => ({
+      isDark,
+      input: {
+        background: isDark ? '#181826' : '#ffffff',
+        color: isDark ? '#ffffff' : '#32324d',
+        border: isDark ? '#4a4a6a' : '#dcdce4',
+      },
+      ruleRow: {
+        background: isDark ? '#212134' : '#ffffff',
+        border: isDark ? '#32324d' : '#dcdce4',
+        hoverBorder: isDark ? '#4a4a6a' : '#b5b5c3',
+      },
+      group: {
+        rootBg: isDark
+          ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
+          : 'linear-gradient(135deg, #f8f9fa 0%, #f0f0ff 100%)',
+        nestedBg: isDark ? '#1a1a2e' : '#ffffff',
+        headerBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
+      },
+      depthBorders: {
+        0: isDark ? '#7b61ff' : '#7b61ff',
+        1: isDark ? '#5cb176' : '#328048',
+        2: isDark ? '#f29d41' : '#d9822b',
+        3: isDark ? '#ee5e52' : '#d02b20',
+      },
+      emptyState: {
+        border: isDark ? '#32324d' : '#dcdce4',
+        iconBg: isDark ? '#2d2d4a' : '#f0f0ff',
+      },
+    }),
+    [isDark]
+  );
+};
+
+interface InputColors {
+  background: string;
+  color: string;
+  border: string;
+}
+
 interface ValueInputProps {
   metric: MetricDefinition;
   value: RuleValue;
   operator: RuleOperator;
   onChange: (value: RuleValue) => void;
   disabled?: boolean;
+  inputColors: InputColors;
 }
 
-const ValueInput: React.FC<ValueInputProps> = ({ metric, value, operator, onChange, disabled }) => {
+const ValueInput: React.FC<ValueInputProps> = ({
+  metric,
+  value,
+  operator,
+  onChange,
+  disabled,
+  inputColors,
+}) => {
   if (operator === '$exists') {
     const boolVal = value === true || value === 'true';
     return (
@@ -109,6 +166,11 @@ const ValueInput: React.FC<ValueInputProps> = ({ metric, value, operator, onChan
             disabled={disabled}
             size="S"
             aria-label="Time amount"
+            style={{
+              color: inputColors.color,
+              background: inputColors.background,
+              borderColor: inputColors.border,
+            }}
           />
         </Box>
         <Box style={{ width: '120px' }}>
@@ -159,6 +221,11 @@ const ValueInput: React.FC<ValueInputProps> = ({ metric, value, operator, onChan
           disabled={disabled}
           size="S"
           aria-label="Value"
+          style={{
+            color: inputColors.color,
+            background: inputColors.background,
+            borderColor: inputColors.border,
+          }}
         />
       </Box>
     );
@@ -180,6 +247,11 @@ const ValueInput: React.FC<ValueInputProps> = ({ metric, value, operator, onChan
         disabled={disabled}
         size="S"
         aria-label="Values"
+        style={{
+          color: inputColors.color,
+          background: inputColors.background,
+          borderColor: inputColors.border,
+        }}
       />
     );
   }
@@ -191,6 +263,11 @@ const ValueInput: React.FC<ValueInputProps> = ({ metric, value, operator, onChan
       disabled={disabled}
       size="S"
       aria-label="Value"
+      style={{
+        color: inputColors.color,
+        background: inputColors.background,
+        borderColor: inputColors.border,
+      }}
     />
   );
 };
@@ -203,8 +280,8 @@ interface RuleRowProps {
 }
 
 const RuleRow: React.FC<RuleRowProps> = ({ rule, onUpdate, onDelete, disabled }) => {
-  const theme = useTheme();
-  const colors = (theme as Record<string, unknown>)?.colors as Record<string, string> | undefined;
+  const colors = useThemeColors();
+  const [hovered, setHovered] = useState(false);
   const metric = getMetricDefinition(rule.field);
   const availableOperators = metric?.operators || OPERATORS.map((o) => o.value);
 
@@ -236,10 +313,17 @@ const RuleRow: React.FC<RuleRowProps> = ({ rule, onUpdate, onDelete, disabled })
     <Flex
       gap={2}
       alignItems="center"
-      padding={2}
-      background="neutral0"
+      padding={3}
       hasRadius
-      style={{ border: `1px solid ${colors?.neutral200 || '#dcdce4'}` }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        width: '80%',
+        background: colors.ruleRow.background,
+        border: `1px solid ${hovered ? colors.ruleRow.hoverBorder : colors.ruleRow.border}`,
+        boxShadow: hovered ? '0 2px 8px rgba(0,0,0,0.06)' : 'none',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+      }}
     >
       <Box style={{ flex: '1 1 200px', minWidth: '180px' }}>
         <SingleSelect
@@ -286,6 +370,7 @@ const RuleRow: React.FC<RuleRowProps> = ({ rule, onUpdate, onDelete, disabled })
             operator={rule.operator}
             onChange={(val) => onUpdate({ ...rule, value: val })}
             disabled={disabled}
+            inputColors={colors.input}
           />
         )}
       </Box>
@@ -314,16 +399,9 @@ const RuleGroupComponent: React.FC<RuleGroupComponentProps> = ({
   depth = 0,
   disabled,
 }) => {
-  const theme = useTheme();
-  const colors = (theme as Record<string, unknown>)?.colors as Record<string, string> | undefined;
-
-  const borderColors: Record<number, string> = {
-    0: colors?.primary200 || '#d9d8ff',
-    1: colors?.success200 || '#c6f0c2',
-    2: colors?.warning200 || '#fae7b9',
-    3: colors?.danger200 || '#f5c0b8',
-  };
-  const borderColor = borderColors[depth % 4] || borderColors[0];
+  const colors = useThemeColors();
+  const borderColor =
+    colors.depthBorders[(depth % 4) as keyof typeof colors.depthBorders] || colors.depthBorders[0];
 
   const handleAddRule = () => {
     onUpdate(addRuleToGroup(group, group.id, createEmptyRule()));
@@ -361,15 +439,22 @@ const RuleGroupComponent: React.FC<RuleGroupComponentProps> = ({
 
   return (
     <Box
-      padding={3}
-      background={depth === 0 ? 'neutral100' : 'neutral0'}
+      padding={4}
       hasRadius
       style={{
+        background: depth === 0 ? colors.group.rootBg : colors.group.nestedBg,
         borderLeft: `3px solid ${borderColor}`,
         marginLeft: depth > 0 ? '12px' : 0,
       }}
     >
-      <Flex justifyContent="space-between" alignItems="center" marginBottom={3}>
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        marginBottom={3}
+        padding={2}
+        hasRadius
+        style={{ background: colors.group.headerBg }}
+      >
         <Flex gap={2} alignItems="center">
           <Button
             variant={group.logic === '$and' ? 'default' : 'secondary'}
@@ -380,7 +465,9 @@ const RuleGroupComponent: React.FC<RuleGroupComponentProps> = ({
             {group.logic === '$and' ? 'AND' : 'OR'}
           </Button>
           <Typography variant="pi" textColor="neutral600">
-            {group.logic === '$and' ? 'Все условия должны совпадать' : 'Любое условие может совпадать'}
+            {group.logic === '$and'
+              ? 'Все условия должны совпадать'
+              : 'Любое условие может совпадать'}
           </Typography>
         </Flex>
         {depth > 0 && onDelete && (
@@ -393,29 +480,69 @@ const RuleGroupComponent: React.FC<RuleGroupComponentProps> = ({
       </Flex>
 
       <Flex direction="column" gap={2}>
-        {group.rules.map((item, index) => {
-          if (isRuleGroup(item)) {
+        {group.rules.length === 0 ? (
+          <Box
+            padding={6}
+            hasRadius
+            style={{
+              border: `2px dashed ${colors.emptyState.border}`,
+              textAlign: 'center',
+            }}
+          >
+            <Box
+              style={{
+                width: '40px',
+                height: '40px',
+                borderRadius: '50%',
+                background: colors.emptyState.iconBg,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: '8px',
+              }}
+            >
+              <Layout />
+            </Box>
+            <Typography
+              variant="omega"
+              textColor="neutral500"
+              style={{ display: 'block', marginTop: 4 }}
+            >
+              Условий пока нет
+            </Typography>
+            <Typography
+              variant="pi"
+              textColor="neutral400"
+              style={{ display: 'block', marginTop: 4 }}
+            >
+              Добавьте условие или группу для построения сегмента
+            </Typography>
+          </Box>
+        ) : (
+          group.rules.map((item) => {
+            if (isRuleGroup(item)) {
+              return (
+                <RuleGroupComponent
+                  key={item.id}
+                  group={item}
+                  onUpdate={handleNestedGroupUpdate}
+                  onDelete={() => handleNestedGroupDelete(item.id)}
+                  depth={depth + 1}
+                  disabled={disabled}
+                />
+              );
+            }
             return (
-              <RuleGroupComponent
+              <RuleRow
                 key={item.id}
-                group={item}
-                onUpdate={handleNestedGroupUpdate}
-                onDelete={() => handleNestedGroupDelete(item.id)}
-                depth={depth + 1}
+                rule={item}
+                onUpdate={(updated) => handleRuleUpdate(item.id, updated)}
+                onDelete={() => handleRuleDelete(item.id)}
                 disabled={disabled}
               />
             );
-          }
-          return (
-            <RuleRow
-              key={item.id}
-              rule={item}
-              onUpdate={(updated) => handleRuleUpdate(item.id, updated)}
-              onDelete={() => handleRuleDelete(item.id)}
-              disabled={disabled}
-            />
-          );
-        })}
+          })
+        )}
       </Flex>
 
       <Flex gap={2} marginTop={3}>
@@ -446,6 +573,7 @@ const RuleGroupComponent: React.FC<RuleGroupComponentProps> = ({
 
 const RulesBuilder = forwardRef<HTMLDivElement, RulesBuilderProps>(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const colors = useThemeColors();
     const [config, setConfig] = useState<RulesConfig>(() => deserializeConfig(value));
 
     useEffect(() => {
@@ -478,7 +606,12 @@ const RulesBuilder = forwardRef<HTMLDivElement, RulesBuilderProps>(
         <Flex justifyContent="space-between" alignItems="center">
           <Field.Label>{displayLabel}</Field.Label>
           <Flex gap={2} alignItems="center">
-            <Badge backgroundColor="neutral100" textColor="neutral600">
+            <Badge
+              style={{
+                backgroundColor: colors.isDark ? '#2d2d4a' : '#f0f0ff',
+                color: colors.isDark ? '#a5a5ba' : '#666687',
+              }}
+            >
               {rulesCount} rule{rulesCount !== 1 ? 's' : ''}
             </Badge>
             {rulesCount > 0 && (

package/admin/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"fileNames":[],"fileInfos":[],"root":[],"options":{"esModuleInterop":true,"module":1,"noEmitOnError":true,"noImplicitThis":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"strict":false,"target":6},"errors":true,"version":"5.8.3"}
+{"program":{"fileNames":[],"fileInfos":[],"root":[],"options":{"esModuleInterop":true,"module":1,"noEmitOnError":true,"noImplicitThis":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"strict":false,"target":6},"referencedMap":[],"exportedModulesMap":[]},"version":"5.4.4"}

package/dist/_chunks/{index-OrZRTEP0.mjs → index-BMK03t54.mjs}

@@ -1,10 +1,52 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { forwardRef, useState, useEffect, useMemo, useCallback } from "react";
 import { Field, Flex, Badge, Button, Box, Typography, Tooltip, IconButton, SingleSelect, SingleSelectOption, Switch, TextInput } from "@strapi/design-system";
-import { Trash, Plus, Layout } from "@strapi/icons";
+import { Trash, Layout, Plus } from "@strapi/icons";
 import { useTheme } from "styled-components";
 import { d as deserializeConfig, c as countRules, s as serializeConfig, a as createInitialConfig, i as isRuleGroup, u as updateGroupLogic, b as deleteGroupFromParent, g as getMetricDefinition, O as OPERATORS, M as METRICS_BY_CATEGORY, C as CATEGORY_LABELS, e as deleteRuleFromGroup, f as updateRuleInGroup, h as addRuleToGroup, j as createEmptyRule, k as createEmptyGroup, p as parseTimeAgoValue, l as createTimeAgoValue, T as TIME_UNITS, L as LIFECYCLE_STAGES } from "./utils-BHneBJ7U.mjs";
-const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
+const useThemeColors = () => {
+  const theme = useTheme();
+  const isDark = theme?.colors?.neutral0 === "#212134";
+  return useMemo(
+    () => ({
+      isDark,
+      input: {
+        background: isDark ? "#181826" : "#ffffff",
+        color: isDark ? "#ffffff" : "#32324d",
+        border: isDark ? "#4a4a6a" : "#dcdce4"
+      },
+      ruleRow: {
+        background: isDark ? "#212134" : "#ffffff",
+        border: isDark ? "#32324d" : "#dcdce4",
+        hoverBorder: isDark ? "#4a4a6a" : "#b5b5c3"
+      },
+      group: {
+        rootBg: isDark ? "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)" : "linear-gradient(135deg, #f8f9fa 0%, #f0f0ff 100%)",
+        nestedBg: isDark ? "#1a1a2e" : "#ffffff",
+        headerBg: isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)"
+      },
+      depthBorders: {
+        0: isDark ? "#7b61ff" : "#7b61ff",
+        1: isDark ? "#5cb176" : "#328048",
+        2: isDark ? "#f29d41" : "#d9822b",
+        3: isDark ? "#ee5e52" : "#d02b20"
+      },
+      emptyState: {
+        border: isDark ? "#32324d" : "#dcdce4",
+        iconBg: isDark ? "#2d2d4a" : "#f0f0ff"
+      }
+    }),
+    [isDark]
+  );
+};
+const ValueInput = ({
+  metric,
+  value,
+  operator,
+  onChange,
+  disabled,
+  inputColors
+}) => {
   if (operator === "$exists") {
     const boolVal = value === true || value === "true";
     return /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
@@ -50,7 +92,12 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
           },
           disabled,
           size: "S",
-          "aria-label": "Time amount"
+          "aria-label": "Time amount",
+          style: {
+            color: inputColors.color,
+            background: inputColors.background,
+            borderColor: inputColors.border
+          }
         }
       ) }),
       /* @__PURE__ */ jsx(Box, { style: { width: "120px" }, children: /* @__PURE__ */ jsx(
@@ -89,7 +136,12 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
         },
         disabled,
         size: "S",
-        "aria-label": "Value"
+        "aria-label": "Value",
+        style: {
+          color: inputColors.color,
+          background: inputColors.background,
+          borderColor: inputColors.border
+        }
       }
     ) });
   }
@@ -106,7 +158,12 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
         placeholder: "value1, value2, ...",
         disabled,
         size: "S",
-        "aria-label": "Values"
+        "aria-label": "Values",
+        style: {
+          color: inputColors.color,
+          background: inputColors.background,
+          borderColor: inputColors.border
+        }
       }
     );
   }
@@ -117,13 +174,18 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
       onChange: (e) => onChange(e.target.value),
       disabled,
       size: "S",
-      "aria-label": "Value"
+      "aria-label": "Value",
+      style: {
+        color: inputColors.color,
+        background: inputColors.background,
+        borderColor: inputColors.border
+      }
     }
   );
 };
 const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
-  const theme = useTheme();
-  const colors = theme?.colors;
+  const colors = useThemeColors();
+  const [hovered, setHovered] = useState(false);
   const metric = getMetricDefinition(rule.field);
   const availableOperators = metric?.operators || OPERATORS.map((o) => o.value);
   const handleFieldChange = (fieldKey) => {
@@ -153,10 +215,17 @@ const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
     {
       gap: 2,
       alignItems: "center",
-      padding: 2,
-      background: "neutral0",
+      padding: 3,
       hasRadius: true,
-      style: { border: `1px solid ${colors?.neutral200 || "#dcdce4"}` },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        width: "80%",
+        background: colors.ruleRow.background,
+        border: `1px solid ${hovered ? colors.ruleRow.hoverBorder : colors.ruleRow.border}`,
+        boxShadow: hovered ? "0 2px 8px rgba(0,0,0,0.06)" : "none",
+        transition: "border-color 0.15s, box-shadow 0.15s"
+      },
       children: [
         /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px", minWidth: "180px" }, children: /* @__PURE__ */ jsx(
           SingleSelect,
@@ -188,7 +257,8 @@ const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
             value: rule.value,
             operator: rule.operator,
             onChange: (val) => onUpdate({ ...rule, value: val }),
-            disabled
+            disabled,
+            inputColors: colors.input
           }
         ) }),
         /* @__PURE__ */ jsx(Tooltip, { label: "Delete rule", children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, label: "Delete rule", variant: "ghost", disabled, children: /* @__PURE__ */ jsx(Trash, {}) }) })
@@ -203,15 +273,8 @@ const RuleGroupComponent = ({
   depth = 0,
   disabled
 }) => {
-  const theme = useTheme();
-  const colors = theme?.colors;
-  const borderColors = {
-    0: colors?.primary200 || "#d9d8ff",
-    1: colors?.success200 || "#c6f0c2",
-    2: colors?.warning200 || "#fae7b9",
-    3: colors?.danger200 || "#f5c0b8"
-  };
-  const borderColor = borderColors[depth % 4] || borderColors[0];
+  const colors = useThemeColors();
+  const borderColor = colors.depthBorders[depth % 4] || colors.depthBorders[0];
   const handleAddRule = () => {
     onUpdate(addRuleToGroup(group, group.id, createEmptyRule()));
   };
@@ -242,31 +305,88 @@ const RuleGroupComponent = ({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      padding: 3,
-      background: depth === 0 ? "neutral100" : "neutral0",
+      padding: 4,
       hasRadius: true,
       style: {
+        background: depth === 0 ? colors.group.rootBg : colors.group.nestedBg,
         borderLeft: `3px solid ${borderColor}`,
         marginLeft: depth > 0 ? "12px" : 0
       },
       children: [
-        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
-          /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: group.logic === "$and" ? "default" : "secondary",
-                size: "S",
-                onClick: handleLogicToggle,
-                disabled,
-                children: group.logic === "$and" ? "AND" : "OR"
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: group.logic === "$and" ? "Все условия должны совпадать" : "Любое условие может совпадать" })
-          ] }),
-          depth > 0 && onDelete && /* @__PURE__ */ jsx(Tooltip, { label: "Delete group", children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, label: "Delete group", variant: "ghost", disabled, children: /* @__PURE__ */ jsx(Trash, {}) }) })
-        ] }),
-        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: group.rules.map((item, index) => {
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 3,
+            padding: 2,
+            hasRadius: true,
+            style: { background: colors.group.headerBg },
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: group.logic === "$and" ? "default" : "secondary",
+                    size: "S",
+                    onClick: handleLogicToggle,
+                    disabled,
+                    children: group.logic === "$and" ? "AND" : "OR"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: group.logic === "$and" ? "Все условия должны совпадать" : "Любое условие может совпадать" })
+              ] }),
+              depth > 0 && onDelete && /* @__PURE__ */ jsx(Tooltip, { label: "Delete group", children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, label: "Delete group", variant: "ghost", disabled, children: /* @__PURE__ */ jsx(Trash, {}) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: group.rules.length === 0 ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            padding: 6,
+            hasRadius: true,
+            style: {
+              border: `2px dashed ${colors.emptyState.border}`,
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "50%",
+                    background: colors.emptyState.iconBg,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: "8px"
+                  },
+                  children: /* @__PURE__ */ jsx(Layout, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "omega",
+                  textColor: "neutral500",
+                  style: { display: "block", marginTop: 4 },
+                  children: "Условий пока нет"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "pi",
+                  textColor: "neutral400",
+                  style: { display: "block", marginTop: 4 },
+                  children: "Добавьте условие или группу для построения сегмента"
+                }
+              )
+            ]
+          }
+        ) : group.rules.map((item) => {
           if (isRuleGroup(item)) {
             return /* @__PURE__ */ jsx(
               RuleGroupComponent,
@@ -325,6 +445,7 @@ const RuleGroupComponent = ({
 };
 const RulesBuilder = forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const colors = useThemeColors();
     const [config, setConfig] = useState(() => deserializeConfig(value));
     useEffect(() => {
       setConfig(deserializeConfig(value));
@@ -350,11 +471,20 @@ const RulesBuilder = forwardRef(
       /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
         /* @__PURE__ */ jsx(Field.Label, { children: displayLabel }),
         /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-          /* @__PURE__ */ jsxs(Badge, { backgroundColor: "neutral100", textColor: "neutral600", children: [
-            rulesCount,
-            " rule",
-            rulesCount !== 1 ? "s" : ""
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              style: {
+                backgroundColor: colors.isDark ? "#2d2d4a" : "#f0f0ff",
+                color: colors.isDark ? "#a5a5ba" : "#666687"
+              },
+              children: [
+                rulesCount,
+                " rule",
+                rulesCount !== 1 ? "s" : ""
+              ]
+            }
+          ),
           rulesCount > 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: handleClear, disabled, children: "Очистить всё" })
         ] })
       ] }),

package/dist/_chunks/{index-By7yGs6Y.js → index-D4yBB_T5.js}

@@ -8,7 +8,49 @@ const styledComponents = require("styled-components");
 const utils = require("./utils-CAs_GSGv.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
-const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
+const useThemeColors = () => {
+  const theme = styledComponents.useTheme();
+  const isDark = theme?.colors?.neutral0 === "#212134";
+  return React.useMemo(
+    () => ({
+      isDark,
+      input: {
+        background: isDark ? "#181826" : "#ffffff",
+        color: isDark ? "#ffffff" : "#32324d",
+        border: isDark ? "#4a4a6a" : "#dcdce4"
+      },
+      ruleRow: {
+        background: isDark ? "#212134" : "#ffffff",
+        border: isDark ? "#32324d" : "#dcdce4",
+        hoverBorder: isDark ? "#4a4a6a" : "#b5b5c3"
+      },
+      group: {
+        rootBg: isDark ? "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)" : "linear-gradient(135deg, #f8f9fa 0%, #f0f0ff 100%)",
+        nestedBg: isDark ? "#1a1a2e" : "#ffffff",
+        headerBg: isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)"
+      },
+      depthBorders: {
+        0: isDark ? "#7b61ff" : "#7b61ff",
+        1: isDark ? "#5cb176" : "#328048",
+        2: isDark ? "#f29d41" : "#d9822b",
+        3: isDark ? "#ee5e52" : "#d02b20"
+      },
+      emptyState: {
+        border: isDark ? "#32324d" : "#dcdce4",
+        iconBg: isDark ? "#2d2d4a" : "#f0f0ff"
+      }
+    }),
+    [isDark]
+  );
+};
+const ValueInput = ({
+  metric,
+  value,
+  operator,
+  onChange,
+  disabled,
+  inputColors
+}) => {
   if (operator === "$exists") {
     const boolVal = value === true || value === "true";
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
@@ -54,7 +96,12 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
           },
           disabled,
           size: "S",
-          "aria-label": "Time amount"
+          "aria-label": "Time amount",
+          style: {
+            color: inputColors.color,
+            background: inputColors.background,
+            borderColor: inputColors.border
+          }
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "120px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -93,7 +140,12 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
         },
         disabled,
         size: "S",
-        "aria-label": "Value"
+        "aria-label": "Value",
+        style: {
+          color: inputColors.color,
+          background: inputColors.background,
+          borderColor: inputColors.border
+        }
       }
     ) });
   }
@@ -110,7 +162,12 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
         placeholder: "value1, value2, ...",
         disabled,
         size: "S",
-        "aria-label": "Values"
+        "aria-label": "Values",
+        style: {
+          color: inputColors.color,
+          background: inputColors.background,
+          borderColor: inputColors.border
+        }
       }
     );
   }
@@ -121,13 +178,18 @@ const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
       onChange: (e) => onChange(e.target.value),
       disabled,
       size: "S",
-      "aria-label": "Value"
+      "aria-label": "Value",
+      style: {
+        color: inputColors.color,
+        background: inputColors.background,
+        borderColor: inputColors.border
+      }
     }
   );
 };
 const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
-  const theme = styledComponents.useTheme();
-  const colors = theme?.colors;
+  const colors = useThemeColors();
+  const [hovered, setHovered] = React.useState(false);
   const metric = utils.getMetricDefinition(rule.field);
   const availableOperators = metric?.operators || utils.OPERATORS.map((o) => o.value);
   const handleFieldChange = (fieldKey) => {
@@ -157,10 +219,17 @@ const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
     {
       gap: 2,
       alignItems: "center",
-      padding: 2,
-      background: "neutral0",
+      padding: 3,
       hasRadius: true,
-      style: { border: `1px solid ${colors?.neutral200 || "#dcdce4"}` },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        width: "80%",
+        background: colors.ruleRow.background,
+        border: `1px solid ${hovered ? colors.ruleRow.hoverBorder : colors.ruleRow.border}`,
+        boxShadow: hovered ? "0 2px 8px rgba(0,0,0,0.06)" : "none",
+        transition: "border-color 0.15s, box-shadow 0.15s"
+      },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 200px", minWidth: "180px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.SingleSelect,
@@ -192,7 +261,8 @@ const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
             value: rule.value,
             operator: rule.operator,
             onChange: (val) => onUpdate({ ...rule, value: val }),
-            disabled
+            disabled,
+            inputColors: colors.input
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Delete rule", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: onDelete, label: "Delete rule", variant: "ghost", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) }) })
@@ -207,15 +277,8 @@ const RuleGroupComponent = ({
   depth = 0,
   disabled
 }) => {
-  const theme = styledComponents.useTheme();
-  const colors = theme?.colors;
-  const borderColors = {
-    0: colors?.primary200 || "#d9d8ff",
-    1: colors?.success200 || "#c6f0c2",
-    2: colors?.warning200 || "#fae7b9",
-    3: colors?.danger200 || "#f5c0b8"
-  };
-  const borderColor = borderColors[depth % 4] || borderColors[0];
+  const colors = useThemeColors();
+  const borderColor = colors.depthBorders[depth % 4] || colors.depthBorders[0];
   const handleAddRule = () => {
     onUpdate(utils.addRuleToGroup(group, group.id, utils.createEmptyRule()));
   };
@@ -246,31 +309,88 @@ const RuleGroupComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     designSystem.Box,
     {
-      padding: 3,
-      background: depth === 0 ? "neutral100" : "neutral0",
+      padding: 4,
       hasRadius: true,
       style: {
+        background: depth === 0 ? colors.group.rootBg : colors.group.nestedBg,
         borderLeft: `3px solid ${borderColor}`,
         marginLeft: depth > 0 ? "12px" : 0
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
-              {
-                variant: group.logic === "$and" ? "default" : "secondary",
-                size: "S",
-                onClick: handleLogicToggle,
-                disabled,
-                children: group.logic === "$and" ? "AND" : "OR"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: group.logic === "$and" ? "Все условия должны совпадать" : "Любое условие может совпадать" })
-          ] }),
-          depth > 0 && onDelete && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Delete group", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: onDelete, label: "Delete group", variant: "ghost", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: group.rules.map((item, index) => {
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Flex,
+          {
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 3,
+            padding: 2,
+            hasRadius: true,
+            style: { background: colors.group.headerBg },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: group.logic === "$and" ? "default" : "secondary",
+                    size: "S",
+                    onClick: handleLogicToggle,
+                    disabled,
+                    children: group.logic === "$and" ? "AND" : "OR"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: group.logic === "$and" ? "Все условия должны совпадать" : "Любое условие может совпадать" })
+              ] }),
+              depth > 0 && onDelete && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Delete group", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: onDelete, label: "Delete group", variant: "ghost", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: group.rules.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Box,
+          {
+            padding: 6,
+            hasRadius: true,
+            style: {
+              border: `2px dashed ${colors.emptyState.border}`,
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Box,
+                {
+                  style: {
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "50%",
+                    background: colors.emptyState.iconBg,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginBottom: "8px"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Layout, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Typography,
+                {
+                  variant: "omega",
+                  textColor: "neutral500",
+                  style: { display: "block", marginTop: 4 },
+                  children: "Условий пока нет"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Typography,
+                {
+                  variant: "pi",
+                  textColor: "neutral400",
+                  style: { display: "block", marginTop: 4 },
+                  children: "Добавьте условие или группу для построения сегмента"
+                }
+              )
+            ]
+          }
+        ) : group.rules.map((item) => {
           if (utils.isRuleGroup(item)) {
             return /* @__PURE__ */ jsxRuntime.jsx(
               RuleGroupComponent,
@@ -329,6 +449,7 @@ const RuleGroupComponent = ({
 };
 const RulesBuilder = React.forwardRef(
   ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const colors = useThemeColors();
     const [config, setConfig] = React.useState(() => utils.deserializeConfig(value));
     React.useEffect(() => {
       setConfig(utils.deserializeConfig(value));
@@ -354,11 +475,20 @@ const RulesBuilder = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: displayLabel }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { backgroundColor: "neutral100", textColor: "neutral600", children: [
-            rulesCount,
-            " rule",
-            rulesCount !== 1 ? "s" : ""
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Badge,
+            {
+              style: {
+                backgroundColor: colors.isDark ? "#2d2d4a" : "#f0f0ff",
+                color: colors.isDark ? "#a5a5ba" : "#666687"
+              },
+              children: [
+                rulesCount,
+                " rule",
+                rulesCount !== 1 ? "s" : ""
+              ]
+            }
+          ),
           rulesCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "ghost", size: "S", onClick: handleClear, disabled, children: "Очистить всё" })
         ] })
       ] }),

package/dist/admin/index.js

@@ -35,7 +35,7 @@ const index = {
       components: {
         Input: async () => Promise.resolve().then(() => require(
           /* webpackChunkName: "crm-rules-builder" */
-          "../_chunks/index-By7yGs6Y.js"
+          "../_chunks/index-D4yBB_T5.js"
         ))
       },
       options: {

package/dist/admin/index.mjs

@@ -34,7 +34,7 @@ const index = {
       components: {
         Input: async () => import(
           /* webpackChunkName: "crm-rules-builder" */
-          "../_chunks/index-OrZRTEP0.mjs"
+          "../_chunks/index-BMK03t54.mjs"
         )
       },
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inspirer-dev/crm-dashboard",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "description": "CRM Dashboard and Tools",
   "strapi": {
     "name": "crm-dashboard",