From e9a29463210368a3603e97ebece061e0b38a616e Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Mon, 10 Nov 2025 13:55:21 +0700
Subject: [PATCH] fix(tax): UI improvements - all 5 issues resolved
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Fixed Issues:

1. ✅ Added Refresh button in header (like Shipping/Payments)
2. ✅ Modal inputs now use shadcn Input component
3. ✅ Modal select uses native select with shadcn styling (avoids blank screen)
4. ✅ Display Settings now full width (removed md:w-[300px])
5. ✅ All fields use Label component for consistency

## Changes:
- Added Input, Label imports
- Added action prop to SettingsLayout with Refresh button
- Replaced all <input> with <Input>
- Replaced all <label> with <Label>
- Used native <select> with shadcn classes for Tax Class
- Made all Display Settings selects full width

## Note:
Tax rates still not saving - investigating API response handling next
---
 admin-spa/src/routes/Settings/Tax.tsx | 45 +++++++++++++++++----------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Tax.tsx b/admin-spa/src/routes/Settings/Tax.tsx
index fc1e8e8..e7e0122 100644
--- a/admin-spa/src/routes/Settings/Tax.tsx
+++ b/admin-spa/src/routes/Settings/Tax.tsx
@@ -6,6 +6,8 @@ import { SettingsCard } from './components/SettingsCard';
 import { SettingsSection } from './components/SettingsSection';
 import { ToggleField } from './components/ToggleField';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -167,6 +169,19 @@ export default function TaxSettings() {
     <SettingsLayout
       title={__('Tax')}
       description={__('Configure tax calculation and rates for your store')}
+      action={
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            queryClient.invalidateQueries({ queryKey: ['tax-settings'] });
+            queryClient.invalidateQueries({ queryKey: ['tax-suggested'] });
+          }}
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          {__('Refresh')}
+        </Button>
+      }
     >
       <div className="space-y-6">
         {/* Enable Tax Calculation */}
@@ -291,7 +306,7 @@ export default function TaxSettings() {
                     // Update setting
                   }}
                 >
-                  <SelectTrigger className="w-full md:w-[300px]">
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -311,7 +326,7 @@ export default function TaxSettings() {
                     // Update setting
                   }}
                 >
-                  <SelectTrigger className="w-full md:w-[300px]">
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -331,7 +346,7 @@ export default function TaxSettings() {
                     // Update setting
                   }}
                 >
-                  <SelectTrigger className="w-full md:w-[300px]">
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -375,14 +390,13 @@ export default function TaxSettings() {
           <form onSubmit={handleSubmit}>
             <div className="space-y-4 py-4">
               <div>
-                <label className="text-sm font-medium">{__('Country')}</label>
-                <input
+                <Label>{__('Country')}</Label>
+                <Input
                   name="country"
                   type="text"
                   placeholder="ID"
                   defaultValue={editingRate?.country || ''}
                   required
-                  className="w-full mt-1.5 px-3 py-2 border rounded-md"
                 />
                 <p className="text-xs text-muted-foreground mt-1">
                   {__('2-letter country code (e.g., ID, MY, SG)')}
@@ -390,13 +404,12 @@ export default function TaxSettings() {
               </div>
 
               <div>
-                <label className="text-sm font-medium">{__('State/Province (Optional)')}</label>
-                <input
+                <Label>{__('State/Province (Optional)')}</Label>
+                <Input
                   name="state"
                   type="text"
                   placeholder="CA"
                   defaultValue={editingRate?.state || ''}
-                  className="w-full mt-1.5 px-3 py-2 border rounded-md"
                 />
                 <p className="text-xs text-muted-foreground mt-1">
                   {__('Leave empty for country-wide rate')}
@@ -404,8 +417,8 @@ export default function TaxSettings() {
               </div>
 
               <div>
-                <label className="text-sm font-medium">{__('Tax Rate (%)')}</label>
-                <input
+                <Label>{__('Tax Rate (%)')}</Label>
+                <Input
                   name="rate"
                   type="number"
                   step="0.01"
@@ -414,28 +427,26 @@ export default function TaxSettings() {
                   placeholder="11"
                   defaultValue={editingRate?.rate || ''}
                   required
-                  className="w-full mt-1.5 px-3 py-2 border rounded-md"
                 />
               </div>
 
               <div>
-                <label className="text-sm font-medium">{__('Tax Name')}</label>
-                <input
+                <Label>{__('Tax Name')}</Label>
+                <Input
                   name="name"
                   type="text"
                   placeholder="PPN (VAT)"
                   defaultValue={editingRate?.name || ''}
                   required
-                  className="w-full mt-1.5 px-3 py-2 border rounded-md"
                 />
               </div>
 
               <div>
-                <label className="text-sm font-medium">{__('Tax Class (Optional)')}</label>
+                <Label>{__('Tax Class (Optional)')}</Label>
                 <select
                   name="tax_class"
                   defaultValue={editingRate?.tax_class || ''}
-                  className="w-full mt-1.5 px-3 py-2 border rounded-md bg-background"
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 >
                   <option value="">{__('Standard')}</option>
                   <option value="reduced-rate">{__('Reduced Rate')}</option>