Convert properties filters to badges

dashboard/src/components/dashboard/EventFeed.jsx

@@ -132,7 +132,7 @@ const formatShipMethod = (method) => {
 };
 
 const formatShipMethodSimple = (method) => {
-  if (!method) return "Standard";
+  if (!method) return "Digital";
   if (method.includes("usps")) return "USPS";
   if (method.includes("fedex")) return "FedEx";
   if (method.includes("ups")) return "UPS";
@@ -1141,6 +1141,7 @@ const EventFeed = ({
     hasPreorder: false,
     localPickup: false,
     isOnHold: false,
+    onHoldReleased: false,
     hasDigiItem: false,
     hasNotions: false,
     hasGiftCard: false,
@@ -1211,6 +1212,7 @@ const EventFeed = ({
         if (orderFilters.hasPreorder && !details.HasPreorder) return false;
         if (orderFilters.localPickup && !details.LocalPickup) return false;
         if (orderFilters.isOnHold && !details.IsOnHold) return false;
+        if (orderFilters.onHoldReleased && !details.OnHoldReleased) return false;
         if (orderFilters.hasDigiItem && !details.HasDigiItem) return false;
         if (orderFilters.hasNotions && !details.HasNotions) return false;
         if (orderFilters.hasGiftCard && !details.HasDigitalGC) return false;
@@ -1236,6 +1238,7 @@ const EventFeed = ({
       hasPreorder: 0,
       localPickup: 0,
       isOnHold: 0,
+      onHoldReleased: 0,
       hasDigiItem: 0,
       hasNotions: 0,
       hasGiftCard: 0,
@@ -1254,6 +1257,7 @@ const EventFeed = ({
         if (details.HasPreorder) orderPropertyCounts.hasPreorder++;
         if (details.LocalPickup) orderPropertyCounts.localPickup++;
         if (details.IsOnHold) orderPropertyCounts.isOnHold++;
+        if (details.OnHoldReleased) orderPropertyCounts.onHoldReleased++;
         if (details.HasDigiItem) orderPropertyCounts.hasDigiItem++;
         if (details.HasNotions) orderPropertyCounts.hasNotions++;
         if (details.HasDigitalGC) orderPropertyCounts.hasGiftCard++;
@@ -1275,6 +1279,7 @@ const EventFeed = ({
           hasPreorder: false,
           localPickup: false,
           isOnHold: false,
+          onHoldReleased: false,
           hasDigiItem: false,
           hasNotions: false,
           hasGiftCard: false,
@@ -1286,6 +1291,7 @@ const EventFeed = ({
         hasPreorder: property === 'hasPreorder',
         localPickup: property === 'localPickup',
         isOnHold: property === 'isOnHold',
+        onHoldReleased: property === 'onHoldReleased',
         hasDigiItem: property === 'hasDigiItem',
         hasNotions: property === 'hasNotions',
         hasGiftCard: property === 'hasGiftCard',
@@ -1467,76 +1473,94 @@ const EventFeed = ({
 
         {/* Order Property Filters */}
         <div className="flex flex-wrap gap-2 justify-center mt-4">
-          <span
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('hasPreorder')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.hasPreorder
-                ? 'bg-blue-800 text-blue-100'
+                ? 'bg-purple-800 text-purple-200 hover:bg-purple-700'
-                : 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
+                : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
             Pre-order {counts.orderProperties.hasPreorder > 0 && `(${counts.orderProperties.hasPreorder})`}
-          </span>
+          </Badge>
-          <span
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('localPickup')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.localPickup
-                ? 'bg-purple-800 text-purple-100'
+                ? 'bg-green-800 text-green-200 hover:bg-green-700'
-                : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
+                : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
             Local {counts.orderProperties.localPickup > 0 && `(${counts.orderProperties.localPickup})`}
-          </span>
+          </Badge>
-          <span
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('isOnHold')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.isOnHold
-                ? 'bg-yellow-800 text-yellow-100'
+                ? 'bg-blue-800 text-blue-200 hover:bg-blue-700'
-                : 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
+                : 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
             On Hold {counts.orderProperties.isOnHold > 0 && `(${counts.orderProperties.isOnHold})`}
-          </span>
+          </Badge>
-          <span
+          <Badge
+            variant="secondary"
+            onClick={() => handleOrderPropertyClick('onHoldReleased')}
+            className={`${
+              orderFilters.onHoldReleased
+                ? 'bg-green-800 text-green-200 hover:bg-green-700'
+                : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20'
+            } cursor-pointer`}
+          >
+            Hold Released {counts.orderProperties.onHoldReleased > 0 && `(${counts.orderProperties.onHoldReleased})`}
+          </Badge>
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('hasDigiItem')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.hasDigiItem
-                ? 'bg-green-800 text-green-100'
+                ? 'bg-indigo-800 text-indigo-200 hover:bg-indigo-700'
-                : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                : 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
             Digital {counts.orderProperties.hasDigiItem > 0 && `(${counts.orderProperties.hasDigiItem})`}
-          </span>
+          </Badge>
-          <span
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('hasNotions')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.hasNotions
-                ? 'bg-pink-800 text-pink-100'
+                ? 'bg-yellow-800 text-yellow-200 hover:bg-yellow-700'
-                : 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300'
+                : 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
             Notions {counts.orderProperties.hasNotions > 0 && `(${counts.orderProperties.hasNotions})`}
-          </span>
+          </Badge>
-          <span
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('hasGiftCard')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.hasGiftCard
-                ? 'bg-indigo-800 text-indigo-100'
+                ? 'bg-pink-800 text-pink-200 hover:bg-pink-700'
-                : 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300'
+                : 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
-            Gift Card {counts.orderProperties.hasGiftCard > 0 && `(${counts.orderProperties.hasGiftCard})`}
+            eGift Card {counts.orderProperties.hasGiftCard > 0 && `(${counts.orderProperties.hasGiftCard})`}
-          </span>
+          </Badge>
-          <span
+          <Badge
+            variant="secondary"
             onClick={() => handleOrderPropertyClick('stillOwes')}
-            className={`px-2 py-1 ${
+            className={`${
               orderFilters.stillOwes
-                ? 'bg-red-800 text-red-100'
+                ? 'bg-red-800 text-red-200 hover:bg-red-700'
-                : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+                : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/20'
-            } rounded-full text-xs font-medium cursor-help`}
+            } cursor-pointer`}
           >
             Owes {counts.orderProperties.stillOwes > 0 && `(${counts.orderProperties.stillOwes})`}
-          </span>
+          </Badge>
         </div>
       </CardHeader>