From f119c6303cf31da9972b5421fe0ec05135f850e3 Mon Sep 17 00:00:00 2001
From: poduck <poduck@smoothschedule.com>
Date: Mon, 22 Dec 2025 01:26:31 -0500
Subject: [PATCH] Fix billing page multiple item selection highlighting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Compare both id AND type when determining if an item is selected,
since plans and add-ons can have the same ID from different tables.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/billing/components/CatalogListPanel.tsx | 6 +++---
 frontend/src/pages/platform/BillingManagement.tsx    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/billing/components/CatalogListPanel.tsx b/frontend/src/billing/components/CatalogListPanel.tsx
index f2af87ea..5f58a34b 100644
--- a/frontend/src/billing/components/CatalogListPanel.tsx
+++ b/frontend/src/billing/components/CatalogListPanel.tsx
@@ -29,7 +29,7 @@ export interface CatalogItem {
 
 export interface CatalogListPanelProps {
   items: CatalogItem[];
-  selectedId: number | null;
+  selectedItem: CatalogItem | null;
   onSelect: (item: CatalogItem) => void;
   onCreatePlan: () => void;
   onCreateAddon: () => void;
@@ -47,7 +47,7 @@ type LegacyFilter = 'all' | 'current' | 'legacy';
 
 export const CatalogListPanel: React.FC<CatalogListPanelProps> = ({
   items,
-  selectedId,
+  selectedItem,
   onSelect,
   onCreatePlan,
   onCreateAddon,
@@ -219,7 +219,7 @@ export const CatalogListPanel: React.FC<CatalogListPanelProps> = ({
               <CatalogListItem
                 key={`${item.type}-${item.id}`}
                 item={item}
-                isSelected={selectedId === item.id}
+                isSelected={selectedItem?.id === item.id && selectedItem?.type === item.type}
                 onSelect={() => onSelect(item)}
                 formatPrice={formatPrice}
               />
diff --git a/frontend/src/pages/platform/BillingManagement.tsx b/frontend/src/pages/platform/BillingManagement.tsx
index 8beead38..45edf891 100644
--- a/frontend/src/pages/platform/BillingManagement.tsx
+++ b/frontend/src/pages/platform/BillingManagement.tsx
@@ -234,7 +234,7 @@ const BillingManagement: React.FC = () => {
               ) : (
                 <CatalogListPanel
                   items={catalogItems}
-                  selectedId={selectedItem?.id || null}
+                  selectedItem={selectedItem}
                   onSelect={setSelectedItem}
                   onCreatePlan={handleCreatePlan}
                   onCreateAddon={handleCreateAddon}