Add additional states to StateTag component

- Introduced new states: 'sent', 'acknowledged', 'ordered', 'received', 'invoiced', 'planned', 'partiallyShipped', 'shipped', 'delivered', and 'paid' with corresponding badge statuses and texts.
- Updated badge properties to handle custom colors for non-standard statuses.

src/components/Dashboard/common/StateTag.jsx

@@ -96,6 +96,46 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
         status = 'success'
         text = 'Unconsumed'
         break
+      case 'sent':
+        status = 'cyan'
+        text = 'Sent'
+        break
+      case 'acknowledged':
+        status = 'processing'
+        text = 'Acknowledged'
+        break
+      case 'ordered':
+        status = 'cyan'
+        text = 'Ordered'
+        break
+      case 'received':
+        status = 'success'
+        text = 'Received'
+        break
+      case 'invoiced':
+        status = 'warning'
+        text = 'Invoiced'
+        break
+      case 'planned':
+        status = 'warning'
+        text = 'Planned'
+        break
+      case 'partiallyShipped':
+        status = 'processing'
+        text = 'Partially Shipped'
+        break
+      case 'shipped':
+        status = 'processing'
+        text = 'Shipped'
+        break
+      case 'delivered':
+        status = 'success'
+        text = 'Delivered'
+        break
+      case 'paid':
+        status = 'success'
+        text = 'Paid'
+        break
       default:
         status = 'default'
         text = state || 'Unknown'
@@ -104,10 +144,22 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
     return { badgeStatus: status, badgeText: text }
   }, [state])
 
+  var badgeProps = {
+    status: badgeStatus
+  }
+
+  if (
+    !['success', 'warning', 'error', 'processing', 'default'].includes(
+      badgeStatus
+    )
+  ) {
+    badgeProps = { color: badgeStatus }
+  }
+
   return (
     <Tag color={badgeStatus} style={{ marginRight: 0, ...style }}>
       <Flex gap={6}>
-        {showBadge && <Badge status={badgeStatus} />}
+        {showBadge && <Badge {...badgeProps} />}
         {badgeText}
       </Flex>
     </Tag>