Refactor StatsDisplay component to use Tag and Badge for visual indicators

- Replaced Alert with Tag for displaying stat colors.
- Updated color mapping function to return Tag colors instead of Alert types.
- Enhanced layout and styling for better visual representation of stats.
- Introduced Badge component for status indication alongside stat labels.

src/components/Dashboard/common/StatsDisplay.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useContext, useRef } from 'react'
-import { Flex, Alert, Card, Typography, Skeleton } from 'antd'
+import { Flex, Tag, Card, Typography, Skeleton, Badge } from 'antd'
 import PropTypes from 'prop-types'
 import { getModelByName } from '../../../database/ObjectModels'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -9,9 +9,9 @@ import { round } from '../utils/Utils'
 const { Text } = Typography
 
 /**
- * Maps stat names to Alert types for visual indication
+ * Maps stat names to Tag colors for visual indication
  */
-const getAlertType = (statName) => {
+const getTagColor = (statName) => {
   const name = statName.toLowerCase()
 
   // Success states
@@ -43,14 +43,14 @@ const getAlertType = (statName) => {
   }
 
   if (name.includes('printing')) {
-    return 'info'
+    return 'processing'
   }
 
   // Default states
   return 'default'
 }
 
-/**
+/*i*
  * Gets a nested value from an object using dot notation
  * e.g., getNestedValue(obj, 'states.ready') -> obj.states.ready
  */
@@ -255,18 +255,41 @@ const StatsDisplay = ({ objectType, stats: statsProp }) => {
       {modelStats.map((statDef) => {
         const baseStatName = extractBaseStatName(statDef.name)
         var statValue = getStatValue(stats, baseStatName, statDef)
-        const alertType = getAlertType(statDef.name)
+        const tagColor = statDef.color || getTagColor(statDef.name)
         const label = statDef.label || statDef.name
 
         if (statDef?.roundNumber) {
           statValue = round(statValue, statDef?.roundNumber)
         }
 
+        const statusColors = [
+          'success',
+          'warning',
+          'error',
+          'processing',
+          'default'
+        ]
+
+        var badgeProps = {
+          status: tagColor
+        }
+
+        if (!statusColors.includes(tagColor)) {
+          badgeProps = { color: tagColor }
+        }
+
         const content = (
-          <Flex vertical>
-            <Text type='secondary'>{label}</Text>
-            <Flex gap={'small'}>
-              {Icon && <Icon style={{ fontSize: 26 }} />}
+          <Flex vertical gap='3px'>
+            <Flex gap={'12px'} align='center'>
+              <Badge {...badgeProps} />
+              <Text>{label}</Text>
+            </Flex>
+            <Flex gap={'12px'} align='center'>
+              {Icon && (
+                <Text>
+                  <Icon style={{ fontSize: 26 }} />
+                </Text>
+              )}
               {loading ? (
                 <Flex justify='center' align='center' style={{ height: 44 }}>
                   <Skeleton.Button
@@ -286,12 +309,12 @@ const StatsDisplay = ({ objectType, stats: statsProp }) => {
           </Flex>
         )
 
-        if (alertType === 'default') {
+        if (tagColor === 'default') {
           return (
             <Card
               key={statDef.name}
               style={{ minWidth: statDef?.cardWidth || 175 }}
-              styles={{ body: { padding: '20px 24px' } }}
+              styles={{ body: { padding: '16px 24px' } }}
             >
               {content}
             </Card>
@@ -299,12 +322,17 @@ const StatsDisplay = ({ objectType, stats: statsProp }) => {
         }
 
         return (
-          <Alert
+          <Tag
             key={statDef.name}
-            type={alertType}
-            style={{ minWidth: statDef?.cardWidth || 175 }}
-            description={content}
-          />
+            color={tagColor}
+            style={{
+              minWidth: statDef?.cardWidth || 175,
+              padding: '16px 24px',
+              margin: 0
+            }}
+          >
+            {content}
+          </Tag>
         )
       })}
     </Flex>