Update event type filters

dashboard/src/components/dashboard/EventFeed.jsx

@@ -1300,6 +1300,91 @@ const EventFeed = ({
     });
   };
 
+  const handleEventTypeClick = (metricId) => {
+    setActiveEventTypes(prev => {
+      // If clicking the only active filter, reset to all active
+      const activeCount = Object.values(prev).filter(Boolean).length;
+      if (activeCount === 1 && prev[metricId]) {
+        return {
+          [METRIC_IDS.PLACED_ORDER]: true,
+          [METRIC_IDS.SHIPPED_ORDER]: true,
+          [METRIC_IDS.ACCOUNT_CREATED]: true,
+          [METRIC_IDS.CANCELED_ORDER]: true,
+          [METRIC_IDS.PAYMENT_REFUNDED]: true,
+          [METRIC_IDS.NEW_BLOG_POST]: true,
+        };
+      }
+      // Otherwise, set only this filter to true
+      return {
+        [METRIC_IDS.PLACED_ORDER]: metricId === METRIC_IDS.PLACED_ORDER,
+        [METRIC_IDS.SHIPPED_ORDER]: metricId === METRIC_IDS.SHIPPED_ORDER,
+        [METRIC_IDS.ACCOUNT_CREATED]: metricId === METRIC_IDS.ACCOUNT_CREATED,
+        [METRIC_IDS.CANCELED_ORDER]: metricId === METRIC_IDS.CANCELED_ORDER,
+        [METRIC_IDS.PAYMENT_REFUNDED]: metricId === METRIC_IDS.PAYMENT_REFUNDED,
+        [METRIC_IDS.NEW_BLOG_POST]: metricId === METRIC_IDS.NEW_BLOG_POST,
+      };
+    });
+  };
+
+  const EventTypeTooltipContent = () => (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between gap-4">
+        <span className="flex items-center gap-2">
+          <Package className="h-4 w-4" />
+          Orders
+        </span>
+        <Badge variant="secondary" className="bg-muted">
+          {counts.eventTypes[METRIC_IDS.PLACED_ORDER].toLocaleString()}
+        </Badge>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <span className="flex items-center gap-2">
+          <Truck className="h-4 w-4" />
+          Shipments
+        </span>
+        <Badge variant="secondary" className="bg-muted">
+          {counts.eventTypes[METRIC_IDS.SHIPPED_ORDER].toLocaleString()}
+        </Badge>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <span className="flex items-center gap-2">
+          <UserPlus className="h-4 w-4" />
+          Accounts
+        </span>
+        <Badge variant="secondary" className="bg-muted">
+          {counts.eventTypes[METRIC_IDS.ACCOUNT_CREATED].toLocaleString()}
+        </Badge>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <span className="flex items-center gap-2">
+          <XCircle className="h-4 w-4" />
+          Cancellations
+        </span>
+        <Badge variant="secondary" className="bg-muted">
+          {counts.eventTypes[METRIC_IDS.CANCELED_ORDER].toLocaleString()}
+        </Badge>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <span className="flex items-center gap-2">
+          <DollarSign className="h-4 w-4" />
+          Refunds
+        </span>
+        <Badge variant="secondary" className="bg-muted">
+          {counts.eventTypes[METRIC_IDS.PAYMENT_REFUNDED].toLocaleString()}
+        </Badge>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <span className="flex items-center gap-2">
+          <FileText className="h-4 w-4" />
+          Blog Posts
+        </span>
+        <Badge variant="secondary" className="bg-muted">
+          {counts.eventTypes[METRIC_IDS.NEW_BLOG_POST].toLocaleString()}
+        </Badge>
+      </div>
+    </div>
+  );
+
   return (
     <Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
       <CardHeader className="p-6 pb-0">
@@ -1319,22 +1404,14 @@ const EventFeed = ({
                   <Button
                     variant={activeEventTypes[METRIC_IDS.PLACED_ORDER] ? "default" : "outline"}
                     size="sm"
-                    onClick={() => setActiveEventTypes(prev => ({
+                    onClick={() => handleEventTypeClick(METRIC_IDS.PLACED_ORDER)}
-                      ...prev,
-                      [METRIC_IDS.PLACED_ORDER]: !prev[METRIC_IDS.PLACED_ORDER]
-                    }))}
                     className="h-8 w-8 p-0"
                   >
                     <Package className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="flex items-center gap-2">
+                  <EventTypeTooltipContent />
-                    <span>Orders</span>
-                    <span className="text-muted-foreground">
-                      {counts.eventTypes[METRIC_IDS.PLACED_ORDER]}
-                    </span>
-                  </div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -1345,22 +1422,14 @@ const EventFeed = ({
                   <Button
                     variant={activeEventTypes[METRIC_IDS.SHIPPED_ORDER] ? "default" : "outline"}
                     size="sm"
-                    onClick={() => setActiveEventTypes(prev => ({
+                    onClick={() => handleEventTypeClick(METRIC_IDS.SHIPPED_ORDER)}
-                      ...prev,
-                      [METRIC_IDS.SHIPPED_ORDER]: !prev[METRIC_IDS.SHIPPED_ORDER]
-                    }))}
                     className="h-8 w-8 p-0"
                   >
                     <Truck className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="flex items-center gap-2">
+                  <EventTypeTooltipContent />
-                    <span>Shipments</span>
-                    <span className="text-muted-foreground">
-                      {counts.eventTypes[METRIC_IDS.SHIPPED_ORDER]}
-                    </span>
-                  </div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -1371,22 +1440,14 @@ const EventFeed = ({
                   <Button
                     variant={activeEventTypes[METRIC_IDS.ACCOUNT_CREATED] ? "default" : "outline"}
                     size="sm"
-                    onClick={() => setActiveEventTypes(prev => ({
+                    onClick={() => handleEventTypeClick(METRIC_IDS.ACCOUNT_CREATED)}
-                      ...prev,
-                      [METRIC_IDS.ACCOUNT_CREATED]: !prev[METRIC_IDS.ACCOUNT_CREATED]
-                    }))}
                     className="h-8 w-8 p-0"
                   >
                     <UserPlus className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="flex items-center gap-2">
+                  <EventTypeTooltipContent />
-                    <span>Accounts</span>
-                    <span className="text-muted-foreground">
-                      {counts.eventTypes[METRIC_IDS.ACCOUNT_CREATED]}
-                    </span>
-                  </div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -1397,22 +1458,14 @@ const EventFeed = ({
                   <Button
                     variant={activeEventTypes[METRIC_IDS.CANCELED_ORDER] ? "default" : "outline"}
                     size="sm"
-                    onClick={() => setActiveEventTypes(prev => ({
+                    onClick={() => handleEventTypeClick(METRIC_IDS.CANCELED_ORDER)}
-                      ...prev,
-                      [METRIC_IDS.CANCELED_ORDER]: !prev[METRIC_IDS.CANCELED_ORDER]
-                    }))}
                     className="h-8 w-8 p-0"
                   >
                     <XCircle className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="flex items-center gap-2">
+                  <EventTypeTooltipContent />
-                    <span>Cancellations</span>
-                    <span className="text-muted-foreground">
-                      {counts.eventTypes[METRIC_IDS.CANCELED_ORDER]}
-                    </span>
-                  </div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -1423,22 +1476,14 @@ const EventFeed = ({
                   <Button
                     variant={activeEventTypes[METRIC_IDS.PAYMENT_REFUNDED] ? "default" : "outline"}
                     size="sm"
-                    onClick={() => setActiveEventTypes(prev => ({
+                    onClick={() => handleEventTypeClick(METRIC_IDS.PAYMENT_REFUNDED)}
-                      ...prev,
-                      [METRIC_IDS.PAYMENT_REFUNDED]: !prev[METRIC_IDS.PAYMENT_REFUNDED]
-                    }))}
                     className="h-8 w-8 p-0"
                   >
                     <DollarSign className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="flex items-center gap-2">
+                  <EventTypeTooltipContent />
-                    <span>Refunds</span>
-                    <span className="text-muted-foreground">
-                      {counts.eventTypes[METRIC_IDS.PAYMENT_REFUNDED]}
-                    </span>
-                  </div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -1449,22 +1494,14 @@ const EventFeed = ({
                   <Button
                     variant={activeEventTypes[METRIC_IDS.NEW_BLOG_POST] ? "default" : "outline"}
                     size="sm"
-                    onClick={() => setActiveEventTypes(prev => ({
+                    onClick={() => handleEventTypeClick(METRIC_IDS.NEW_BLOG_POST)}
-                      ...prev,
-                      [METRIC_IDS.NEW_BLOG_POST]: !prev[METRIC_IDS.NEW_BLOG_POST]
-                    }))}
                     className="h-8 w-8 p-0"
                   >
                     <FileText className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="flex items-center gap-2">
+                  <EventTypeTooltipContent />
-                    <span>Blog Posts</span>
-                    <span className="text-muted-foreground">
-                      {counts.eventTypes[METRIC_IDS.NEW_BLOG_POST]}
-                    </span>
-                  </div>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>