[0]>['variant']; icon: IconType }
+> = {
+ [StepTypeEnum.CHAT]: { variant: 'feature', icon: RiChatThreadFill },
+ [StepTypeEnum.CUSTOM]: { variant: 'stable', icon: RiRocket2Fill },
+ [StepTypeEnum.DELAY]: { variant: 'feature', icon: RiHourglassFill },
+ [StepTypeEnum.DIGEST]: { variant: 'highlighted', icon: RiShadowLine },
+ [StepTypeEnum.EMAIL]: { variant: 'information', icon: RiMailOpenFill },
+ [StepTypeEnum.IN_APP]: { variant: 'feature', icon: RiInbox2Fill },
+ [StepTypeEnum.PUSH]: { variant: 'verified', icon: RiCellphoneFill },
+ [StepTypeEnum.SMS]: { variant: 'destructive', icon: FaSms },
+ [StepTypeEnum.TRIGGER]: { variant: 'default', icon: RiFlashlightFill },
+};
+
+export const WorkflowStep = (props: WorkflowStepProps) => {
+ const { step } = props;
+ const Icon = stepRenderData[step].icon;
+
+ return (
+
+
+
+ );
+};
diff --git a/apps/dashboard/src/components/workflow-steps.tsx b/apps/dashboard/src/components/workflow-steps.tsx
new file mode 100644
index 00000000000..9d91c326247
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-steps.tsx
@@ -0,0 +1,32 @@
+import { Step } from '@/components/primitives/step';
+import { WorkflowStep } from '@/components/workflow-step';
+import { StepTypeEnum } from '@novu/shared';
+
+type WorkflowStepsProps = {
+ steps: StepTypeEnum[];
+};
+
+export const WorkflowSteps = (props: WorkflowStepsProps) => {
+ const { steps } = props;
+
+ const sliceFactor = 4;
+ let firstSteps: StepTypeEnum[] = [];
+ let restSteps: StepTypeEnum[] = [];
+ if (steps.length > sliceFactor) {
+ firstSteps = steps.slice(0, sliceFactor - 1);
+ restSteps = steps.slice(sliceFactor - 1);
+ } else {
+ firstSteps = steps;
+ }
+
+ return (
+
+ <>
+ {firstSteps.map((step) => (
+
+ ))}
+ {restSteps.length > 1 && +{restSteps.length}}
+
+
+ );
+};
diff --git a/apps/dashboard/src/components/workflow-tags.tsx b/apps/dashboard/src/components/workflow-tags.tsx
new file mode 100644
index 00000000000..28627df411e
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-tags.tsx
@@ -0,0 +1,32 @@
+import { Tag } from '@/components/primitives/tag';
+
+type WorkflowTagsProps = {
+ tags: string[];
+};
+
+export const WorkflowTags = (props: WorkflowTagsProps) => {
+ const { tags } = props;
+
+ const sliceFactor = 3;
+ let firstTags: string[] = [];
+ let restTags: string[] = [];
+ if (tags.length > sliceFactor) {
+ firstTags = tags.slice(0, sliceFactor - 1);
+ restTags = tags.slice(sliceFactor - 1);
+ } else {
+ firstTags = tags;
+ }
+
+ return (
+
+ <>
+ {firstTags.map((tag) => (
+
+ {tag}
+
+ ))}
+ {restTags.length > 0 && +{restTags.length}}
+
+
+ );
+};
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index b04b45b5ca9..40623d6e32b 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -21,33 +21,33 @@
--primary: 346 73% 50%;
--primary-foreground: 0 0% 100%;
- --secondary-0: 210 10% 100%;
- --secondary-50: 210 10% 96%;
- --secondary-100: 210 30% 96%;
- --secondary-200: 220 18% 90%;
- --secondary-300: 219 15% 82%;
- --secondary-400: 220 11% 64%;
- --secondary-500: 221 8% 48%;
- --secondary-600: 222 11% 36%;
- --secondary-700: 221 16% 20%;
- --secondary-800: 227 17% 16%;
- --secondary-900: 226 21% 12%;
- --secondary-950: 222 32% 8%;
- --secondary: 0 0 0%;
- --secondary-foreground: 0 0% 100%;
+ --neutral-0: 210 10% 100%;
+ --neutral-50: 0 0% 98%;
+ --neutral-100: 210 30% 96%;
+ --neutral-200: 220 18% 90%;
+ --neutral-300: 219 15% 82%;
+ --neutral-400: 220 11% 64%;
+ --neutral-500: 221 8% 48%;
+ --neutral-600: 222 11% 36%;
+ --neutral-700: 221 16% 20%;
+ --neutral-800: 227 17% 16%;
+ --neutral-900: 226 21% 12%;
+ --neutral-950: 222 32% 8%;
+ --neutral: 0 0 0%;
+ --neutral-foreground: 0 0% 100%;
- /* Secondary scale in alpha that looks the same on white background */
- --secondary-alpha-50: 0 0% 69% / 0.05;
- --secondary-alpha-100: 210 30% 61% / 0.1;
- --secondary-alpha-200: 220 18% 50% / 0.2;
- --secondary-alpha-300: 218 23% 40% / 0.3;
- --secondary-alpha-400: 220 100% 10% / 0.4;
- --secondary-alpha-500: 240 100% 2% / 0.5;
- --secondary-alpha-600: 0 0% 0% / 0.6;
- --secondary-alpha-700: 0 0% 0% / 0.7;
- --secondary-alpha-800: 0 0% 0% / 0.8;
- --secondary-alpha-900: 231 100% 3% / 0.9;
- --secondary-alpha-950: 219 88% 3% / 0.95;
+ /* Neutral scale in alpha that looks the same on white background */
+ --neutral-alpha-50: 0 0% 69% / 0.05;
+ --neutral-alpha-100: 210 30% 61% / 0.1;
+ --neutral-alpha-200: 220 18% 50% / 0.2;
+ --neutral-alpha-300: 218 23% 40% / 0.3;
+ --neutral-alpha-400: 220 100% 10% / 0.4;
+ --neutral-alpha-500: 240 100% 2% / 0.5;
+ --neutral-alpha-600: 0 0% 0% / 0.6;
+ --neutral-alpha-700: 0 0% 0% / 0.7;
+ --neutral-alpha-800: 0 0% 0% / 0.8;
+ --neutral-alpha-900: 231 100% 3% / 0.9;
+ --neutral-alpha-950: 219 88% 3% / 0.95;
--accent: 0 0% 96.1%;
@@ -66,10 +66,9 @@
--stable: 172 72% 48%;
- --stroke: 222 32% 8%;
+ --verified: 200 100% 64%;
- --border: 0 0% 89.8%;
- --input: 0 0% 89.8%;
+ --input: 220 18% 90%;
--ring: 222 32% 8%;
--radius: 0.5rem;
@@ -77,7 +76,7 @@
}
@layer base {
* {
- @apply border-border;
+ @apply border-neutral-alpha-200;
}
body {
@apply bg-background text-foreground-950;
diff --git a/apps/dashboard/src/pages/workflows.tsx b/apps/dashboard/src/pages/workflows.tsx
index 5f78c4bd53c..1138a259f55 100644
--- a/apps/dashboard/src/pages/workflows.tsx
+++ b/apps/dashboard/src/pages/workflows.tsx
@@ -1,3 +1,5 @@
+import { WorkflowList } from '@/components/workflow-list';
+
export const WorkflowsPage = () => {
- return Workflows
;
+ return ;
};
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 19ab710985d..a467b80b1cf 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -4,11 +4,12 @@ export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
boxShadow: {
- xs: '0px 1px 2px 0px #0A0D1408',
+ xs: '0px 1px 2px 0px rgba(10, 13, 20, 0.03)',
sm: '0px 1px 2px 0px #1018280F,0px 1px 3px 0px #1018281A',
DEFAULT: '0px 16px 32px -12px #0E121B1A',
},
colors: {
+ transparent: 'transparent',
background: 'hsl(var(--background))',
foreground: {
0: 'hsl(var(--foreground-0))',
@@ -25,35 +26,35 @@ export default {
950: 'hsl(var(--foreground-950))',
},
neutral: {
- DEFAULT: 'hsl(var(--secondary))',
- 0: 'hsl(var(--secondary-0))',
- 50: 'hsl(var(--secondary-50))',
- 100: 'hsl(var(--secondary-100))',
- 200: 'hsl(var(--secondary-200))',
- 300: 'hsl(var(--secondary-300))',
- 400: 'hsl(var(--secondary-400))',
- 500: 'hsl(var(--secondary-500))',
- 600: 'hsl(var(--secondary-600))',
- 700: 'hsl(var(--secondary-700))',
- 800: 'hsl(var(--secondary-800))',
- 900: 'hsl(var(--secondary-900))',
- 950: 'hsl(var(--secondary-950))',
- 1000: 'hsl(var(--secondary-1000))',
- foreground: 'hsl(var(--secondary-foreground))',
- },
- 'secondary-alpha': {
- 50: 'hsl(var(--secondary-alpha-50))',
- 100: 'hsl(var(--secondary-alpha-100))',
- 200: 'hsl(var(--secondary-alpha-200))',
- 300: 'hsl(var(--secondary-alpha-300))',
- 400: 'hsl(var(--secondary-alpha-400))',
- 500: 'hsl(var(--secondary-alpha-500))',
- 600: 'hsl(var(--secondary-alpha-600))',
- 700: 'hsl(var(--secondary-alpha-700))',
- 800: 'hsl(var(--secondary-alpha-800))',
- 900: 'hsl(var(--secondary-alpha-900))',
- 950: 'hsl(var(--secondary-alpha-950))',
- 1000: 'hsl(var(--secondary-alpha-1000))',
+ DEFAULT: 'hsl(var(--neutral))',
+ 0: 'hsl(var(--neutral-0))',
+ 50: 'hsl(var(--neutral-50))',
+ 100: 'hsl(var(--neutral-100))',
+ 200: 'hsl(var(--neutral-200))',
+ 300: 'hsl(var(--neutral-300))',
+ 400: 'hsl(var(--neutral-400))',
+ 500: 'hsl(var(--neutral-500))',
+ 600: 'hsl(var(--neutral-600))',
+ 700: 'hsl(var(--neutral-700))',
+ 800: 'hsl(var(--neutral-800))',
+ 900: 'hsl(var(--neutral-900))',
+ 950: 'hsl(var(--neutral-950))',
+ 1000: 'hsl(var(--neutral-1000))',
+ foreground: 'hsl(var(--neutral-foreground))',
+ },
+ 'neutral-alpha': {
+ 50: 'hsl(var(--neutral-alpha-50))',
+ 100: 'hsl(var(--neutral-alpha-100))',
+ 200: 'hsl(var(--neutral-alpha-200))',
+ 300: 'hsl(var(--neutral-alpha-300))',
+ 400: 'hsl(var(--neutral-alpha-400))',
+ 500: 'hsl(var(--neutral-alpha-500))',
+ 600: 'hsl(var(--neutral-alpha-600))',
+ 700: 'hsl(var(--neutral-alpha-700))',
+ 800: 'hsl(var(--neutral-alpha-800))',
+ 900: 'hsl(var(--neutral-alpha-900))',
+ 950: 'hsl(var(--neutral-alpha-950))',
+ 1000: 'hsl(var(--neutral-alpha-1000))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
@@ -84,14 +85,16 @@ export default {
stable: {
DEFAULT: 'hsl(var(--stable))',
},
- border: {
- DEFAULT: 'hsl(var(--border))',
- stroke: 'hsl(var(--stroke))',
+ verified: {
+ DEFAULT: 'hsl(var(--verified))',
},
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
},
extend: {
+ fontFamily: {
+ code: ['Ubuntu', 'monospace'],
+ },
opacity: {
2.5: 0.025,
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cbace5bd25..f61a11613ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -649,6 +649,9 @@ importers:
'@novu/web':
specifier: workspace:*
version: link:../web
+ '@radix-ui/react-dropdown-menu':
+ specifier: ^2.1.1
+ version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-icons':
specifier: ^1.3.0
version: 1.3.0(react@18.3.1)
@@ -661,6 +664,9 @@ importers:
'@radix-ui/react-progress':
specifier: ^1.1.0
version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@radix-ui/react-scroll-area':
+ specifier: ^1.2.0
+ version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-select':
specifier: ^2.1.2
version: 2.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -704,8 +710,8 @@ importers:
specifier: 7.43.9
version: 7.43.9(react@18.3.1)
react-icons:
- specifier: ^5.0.1
- version: 5.0.1(react@18.3.1)
+ specifier: ^5.3.0
+ version: 5.3.0(react@18.3.1)
react-router-dom:
specifier: 6.26.2
version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12436,6 +12442,19 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
+ '@radix-ui/react-scroll-area@1.2.0':
+ resolution: {integrity: sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+
'@radix-ui/react-select@1.2.2':
resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
peerDependencies:
@@ -29368,6 +29387,11 @@ packages:
peerDependencies:
react: '*'
+ react-icons@5.3.0:
+ resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
+ peerDependencies:
+ react: '*'
+
react-infinite-scroll-component@6.1.0:
resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==}
peerDependencies:
@@ -49170,6 +49194,23 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
+ '@radix-ui/react-scroll-area@1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ dependencies:
+ '@radix-ui/number': 1.1.0
+ '@radix-ui/primitive': 1.1.0
+ '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+ '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1)
+ '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+ '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+ '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ optionalDependencies:
+ '@types/react': 18.3.3
+ '@types/react-dom': 18.3.0
+
'@radix-ui/react-select@1.2.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.6
@@ -74378,6 +74419,10 @@ snapshots:
dependencies:
react: 18.3.1
+ react-icons@5.3.0(react@18.3.1):
+ dependencies:
+ react: 18.3.1
+
react-infinite-scroll-component@6.1.0(react@18.3.1):
dependencies:
react: 18.3.1