feat: Remove enabled checkbox + group payments by provider

1. Remove Enable/Disable Checkbox ✅
   - Already controlled by toggle in main UI
   - Skip rendering 'enabled' field in GenericGatewayForm
   - Cleaner form, less redundancy

2. Use Field Default as Default Value ✅
   - Already working: field.value ?? field.default
   - Backend sends current value, falls back to default
   - No changes needed

3. Group Online Payments by Provider ✅
   - Installed @radix-ui/react-accordion
   - Created accordion.tsx component
   - Group by gateway.title (provider name)
   - Show provider with method count
   - Expand to see individual methods

   Structure:
   TriPay (3 payment methods)
     ├─ BNI Virtual Account
     ├─ Mandiri Virtual Account
     └─ BCA Virtual Account

   PayPal (1 payment method)
     └─ PayPal

Benefits:
- Cleaner UI with less clutter
- Easy to find specific provider
- Shows method count at a glance
- Multiple providers can be expanded
- Better organization for many gateways

Files Modified:
- GenericGatewayForm.tsx: Skip enabled field
- Payments.tsx: Accordion grouping by provider
- accordion.tsx: New component (shadcn pattern)

Next: Dialog/Drawer responsive pattern

admin-spa/package-lock.json

@@ -8,6 +8,7 @@
             "name": "woonoow-admin-spa",
             "version": "0.0.1",
             "dependencies": {
+                "@radix-ui/react-accordion": "^1.2.12",
                 "@radix-ui/react-avatar": "^1.1.10",
                 "@radix-ui/react-checkbox": "^1.3.3",
                 "@radix-ui/react-dialog": "^1.1.15",
@@ -1158,6 +1159,37 @@
             "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
             "license": "MIT"
         },
+        "node_modules/@radix-ui/react-accordion": {
+            "version": "1.2.12",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+            "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-collapsible": "1.1.12",
+                "@radix-ui/react-collection": "1.1.7",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-direction": "1.1.1",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-arrow": {
             "version": "1.1.7",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -1238,6 +1270,36 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-collapsible": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+            "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-presence": "1.1.5",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-collection": {
             "version": "1.1.7",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",

admin-spa/package.json

@@ -10,6 +10,7 @@
         "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives"
     },
     "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",

admin-spa/src/components/settings/GenericGatewayForm.tsx

@@ -127,6 +127,11 @@ export function GenericGatewayForm({ gateway, onSave, onCancel, hideFooter = fal
 
     switch (field.type) {
       case 'checkbox':
+        // Skip "enabled" field - already controlled by toggle in main UI
+        if (field.id === 'enabled') {
+          return null;
+        }
+        
         // WooCommerce uses "yes"/"no" strings, convert to boolean
         const isChecked = value === 'yes' || value === true;
         return (

admin-spa/src/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

admin-spa/src/routes/Settings/Payments.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 import { CreditCard, Banknote, Settings, RefreshCw, ExternalLink, Loader2, AlertTriangle } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -116,6 +117,16 @@ export default function PaymentsPage() {
   // Combine provider and other into single "3rd party" category
   const thirdPartyGateways = gateways.filter((g: PaymentGateway) => g.type === 'provider' || g.type === 'other');
   
+  // Group third party gateways by provider (title)
+  const gatewaysByProvider = thirdPartyGateways.reduce((acc: Record<string, PaymentGateway[]>, gateway: PaymentGateway) => {
+    const provider = gateway.title || 'Other';
+    if (!acc[provider]) {
+      acc[provider] = [];
+    }
+    acc[provider].push(gateway);
+    return acc;
+  }, {});
+
   if (isLoading) {
     return (
       <SettingsLayout title="Payments" description="Manage how you get paid">
@@ -197,33 +208,45 @@ export default function PaymentsPage() {
           )}
         </SettingsCard>
 
-        {/* 3rd Party Payment Methods - All online payment gateways */}
+        {/* 3rd Party Payment Methods - Grouped by provider */}
-        {thirdPartyGateways.length > 0 && (
+        {Object.keys(gatewaysByProvider).length > 0 && (
           <SettingsCard
             title="Online Payment Methods"
             description="Accept credit cards, digital wallets, and other online payments"
           >
-            <div className="space-y-4">
+            <Accordion type="multiple" className="w-full">
-              {thirdPartyGateways.map((gateway: PaymentGateway) => (
+              {(Object.entries(gatewaysByProvider) as [string, PaymentGateway[]][]).map(([provider, providerGateways]) => (
+                <AccordionItem key={provider} value={provider}>
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-primary/10 rounded-lg text-primary">
+                        <CreditCard className="h-5 w-5" />
+                      </div>
+                      <div className="text-left">
+                        <h3 className="font-semibold">{provider}</h3>
+                        <p className="text-sm text-muted-foreground font-normal">
+                          {providerGateways.length} payment {providerGateways.length === 1 ? 'method' : 'methods'}
+                        </p>
+                      </div>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <div className="space-y-3 pt-2">
+                      {providerGateways.map((gateway: PaymentGateway) => (
                         <div
                           key={gateway.id}
                           className="border rounded-lg p-4 hover:border-primary/50 transition-colors"
                         >
                           <div className="flex items-start justify-between">
                             <div className="flex items-start gap-4 flex-1">
-                      <div className="p-2 bg-primary/10 rounded-lg text-primary">
+                              <div className={`p-2 rounded-lg ${gateway.enabled ? 'bg-green-500/20 text-green-500' : 'bg-muted text-muted-foreground'}`}>
-                        <CreditCard className="h-6 w-6" />
+                                <CreditCard className="h-5 w-5" />
                               </div>
                               <div className="flex-1">
                                 <div className="flex items-center gap-2 mb-1">
-                          <h3 className="font-semibold">{gateway.method_title || gateway.title}</h3>
+                                  <h4 className="font-medium">
-                          {gateway.enabled ? (
+                                    {gateway.method_title}
-                            <Badge variant="default" className="bg-green-500">
+                                  </h4>
-                              ● Enabled
-                            </Badge>
-                          ) : (
-                            <Badge variant="secondary">○ Disabled</Badge>
-                          )}
                                 </div>
                                 {gateway.method_description && (
                                   <p className="text-sm text-muted-foreground mb-2">
@@ -240,15 +263,16 @@ export default function PaymentsPage() {
                                 )}
                               </div>
                             </div>
-                    <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-0">
+                              {gateway.enabled && (
                                 <Button
-                        variant="outline"
+                                  variant="ghost"
                                   size="sm"
                                   onClick={() => handleManageGateway(gateway)}
                                 >
-                        <Settings className="h-4 w-4 mr-2" />
+                                  <Settings className="h-4 w-4" />
-                        Manage
                                 </Button>
+                              )}
                               <ToggleField
                                 id={gateway.id}
                                 label=""
@@ -261,6 +285,10 @@ export default function PaymentsPage() {
                         </div>
                       ))}
                     </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
           </SettingsCard>
         )}
       </SettingsLayout>
@@ -268,7 +296,7 @@ export default function PaymentsPage() {
       {/* Gateway Settings Modal */}
       {selectedGateway && (
         <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-          <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0 gap-0">
+          <DialogContent className="max-w-2xl max-h-[100vh] flex flex-col p-0 gap-0">
             <DialogHeader className="px-6 pt-6 pb-4 border-b shrink-0">
               <DialogTitle>{selectedGateway.title} Settings</DialogTitle>
             </DialogHeader>