From 7bbc098a8feb91d588879661ea9c939d4a7c9548 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 20 Nov 2025 14:54:25 +0700
Subject: [PATCH] fix: SelectItem empty value error in Coupons list

Fixed blank white page caused by SelectItem validation error

Problem:
- SelectItem cannot have empty string as value
- Radix UI Select requires non-empty values
- Empty value for 'All types' filter caused component crash

Solution:
- Changed empty string to 'all' value for All types option
- Updated Select to use undefined when no filter selected
- Updated query logic to ignore 'all' value (treat as no filter)
- Updated hasActiveFilters check to exclude 'all' value

Changes:
- Select value: discountType || undefined
- Select onChange: value || '' (convert back to empty string)
- Query filter: discountType !== 'all' ? discountType : undefined
- Active filters: discountType && discountType !== 'all'

Result:
- No more SelectItem validation errors
- Page loads correctly
- Filter works as expected
- Clear filters button shows/hides correctly
---
 admin-spa/src/routes/Coupons/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/admin-spa/src/routes/Coupons/index.tsx b/admin-spa/src/routes/Coupons/index.tsx
index d170091..0dc9ad1 100644
--- a/admin-spa/src/routes/Coupons/index.tsx
+++ b/admin-spa/src/routes/Coupons/index.tsx
@@ -28,7 +28,12 @@ export default function CouponsIndex() {
   // Fetch coupons
   const { data, isLoading, isError, error, refetch } = useQuery({
     queryKey: ['coupons', page, search, discountType],
-    queryFn: () => CouponsApi.list({ page, per_page: 20, search, discount_type: discountType }),
+    queryFn: () => CouponsApi.list({ 
+      page, 
+      per_page: 20, 
+      search, 
+      discount_type: discountType && discountType !== 'all' ? discountType : undefined 
+    }),
   });
 
   // Delete mutation
@@ -102,7 +107,7 @@ export default function CouponsIndex() {
   }
 
   const coupons = data?.coupons || [];
-  const hasActiveFilters = search || discountType;
+  const hasActiveFilters = search || (discountType && discountType !== 'all');
 
   return (
     <div className="space-y-4">
@@ -136,12 +141,12 @@ export default function CouponsIndex() {
         {/* Right: Filters */}
         <div className="flex gap-3 flex-wrap items-center">
           {/* Discount Type Filter */}
-          <Select value={discountType} onValueChange={setDiscountType}>
+          <Select value={discountType || undefined} onValueChange={(value) => setDiscountType(value || '')}>
             <SelectTrigger className="w-[180px]">
               <SelectValue placeholder={__('All types')} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="">{__('All types')}</SelectItem>
+              <SelectItem value="all">{__('All types')}</SelectItem>
               <SelectItem value="percent">{__('Percentage')}</SelectItem>
               <SelectItem value="fixed_cart">{__('Fixed Cart')}</SelectItem>
               <SelectItem value="fixed_product">{__('Fixed Product')}</SelectItem>