From db51b3a5f4b861a1a41dcb49d352b7d8864e9e2f Mon Sep 17 00:00:00 2001
From: Michael Kret <michael.k@radency.com>
Date: Wed, 30 Oct 2024 12:29:28 +0200
Subject: [PATCH] component setup

---
 .../editor-ui/src/components/WorkflowCard.vue |  1 +
 .../src/components/WorkflowStatistic.vue      | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 packages/editor-ui/src/components/WorkflowStatistic.vue

diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index cc0713e2b2..0ce8a92f17 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -267,6 +267,7 @@ function moveResource() {
 		</div>
 		<template #append>
 			<div :class="$style.cardActions" @click.stop>
+				<WorkflowStatistic />
 				<ProjectCardBadge
 					:resource="data"
 					:resource-type="ResourceType.Workflow"
diff --git a/packages/editor-ui/src/components/WorkflowStatistic.vue b/packages/editor-ui/src/components/WorkflowStatistic.vue
new file mode 100644
index 0000000000..6e1296591f
--- /dev/null
+++ b/packages/editor-ui/src/components/WorkflowStatistic.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts"></script>
+
+<template>
+	<n8n-tooltip placement="top">
+		<div class="statusText">
+			<n8n-icon icon="play-circle" color="info" />
+			<n8n-text color="text-base" size="small" bold> 40 | </n8n-text>
+			<n8n-icon icon="check-circle" color="success" />
+			<n8n-text color="text-base" size="small" bold> 26 | </n8n-text>
+			<n8n-icon icon="exclamation-triangle" color="danger" />
+			<n8n-text color="text-base" size="small" bold> 14 </n8n-text>
+		</div>
+		<template #content> statistic details </template>
+	</n8n-tooltip>
+</template>
+
+<style lang="scss" scoped>
+.statusText {
+	padding-right: var(--spacing-s);
+	box-sizing: border-box;
+	display: inline-block;
+	text-align: right;
+}
+
+.icon {
+	font-size: var(--font-size-2xs);
+	width: 12px;
+}
+</style>