From a505e1aaba63fe55d57b943a11a925ce28405e7d Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 14 Jul 2025 23:07:24 +0100
Subject: [PATCH] Add OperationDisplay component to visually represent
 operation types with icons and tags

---
 .../Dashboard/common/OperationDisplay.jsx     | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/Dashboard/common/OperationDisplay.jsx

diff --git a/src/components/Dashboard/common/OperationDisplay.jsx b/src/components/Dashboard/common/OperationDisplay.jsx
new file mode 100644
index 0000000..572e8c3
--- /dev/null
+++ b/src/components/Dashboard/common/OperationDisplay.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Space, Tag } from 'antd'
+import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
+import PlusIcon from '../../Icons/PlusIcon'
+import BinIcon from '../../Icons/BinIcon'
+import EditIcon from '../../Icons/EditIcon'
+
+const OperationDisplay = ({
+  operation,
+  showIcon = true,
+  showText = true,
+  showColor = true
+}) => {
+  var tagText = 'False'
+  var tagIcon = <QuestionCircleIcon />
+  var tagColor = 'default'
+  switch (operation) {
+    case 'new':
+      tagText = 'New'
+      tagIcon = <PlusIcon />
+      tagColor = 'success'
+      break
+    case 'delete':
+      tagText = 'Delete'
+      tagIcon = <BinIcon />
+      tagColor = 'error'
+      break
+    case 'edit':
+      tagText = 'Edit'
+      tagIcon = <EditIcon />
+      tagColor = 'blue'
+      break
+    default:
+      break
+  }
+  return (
+    <Space>
+      <Tag
+        style={{ margin: 0 }}
+        color={showColor ? tagColor : 'default'}
+        icon={showIcon ? tagIcon : undefined}
+      >
+        {showText ? tagText : null}
+      </Tag>
+    </Space>
+  )
+}
+
+OperationDisplay.propTypes = {
+  operation: PropTypes.bool.isRequired,
+  showIcon: PropTypes.bool,
+  showText: PropTypes.bool,
+  showColor: PropTypes.bool
+}
+
+export default OperationDisplay