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/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';
 
@@ -115,6 +116,16 @@ export default function PaymentsPage() {
   const manualGateways = gateways.filter((g: PaymentGateway) => g.type === 'manual');
   // 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 (
@@ -197,70 +208,87 @@ export default function PaymentsPage() {
           )}
         </SettingsCard>
 
-        {/* 3rd Party Payment Methods - All online payment gateways */}
-        {thirdPartyGateways.length > 0 && (
+        {/* 3rd Party Payment Methods - Grouped by provider */}
+        {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">
-              {thirdPartyGateways.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">
+            <Accordion type="multiple" className="w-full">
+              {(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-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>
-                          {gateway.enabled ? (
-                            <Badge variant="default" className="bg-green-500">
-                              ● Enabled
-                            </Badge>
-                          ) : (
-                            <Badge variant="secondary">○ Disabled</Badge>
-                          )}
+                      <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 rounded-lg ${gateway.enabled ? 'bg-green-500/20 text-green-500' : 'bg-muted text-muted-foreground'}`}>
+                                <CreditCard className="h-5 w-5" />
+                              </div>
+                              <div className="flex-1">
+                                <div className="flex items-center gap-2 mb-1">
+                                  <h4 className="font-medium">
+                                    {gateway.method_title}
+                                  </h4>
+                                </div>
+                                {gateway.method_description && (
+                                  <p className="text-sm text-muted-foreground mb-2">
+                                    {gateway.method_description}
+                                  </p>
+                                )}
+                                {!gateway.requirements.met && (
+                                  <Alert variant="destructive" className="mt-2">
+                                    <AlertTriangle className="h-4 w-4" />
+                                    <AlertDescription>
+                                      Requirements not met: {gateway.requirements.missing.join(', ')}
+                                    </AlertDescription>
+                                  </Alert>
+                                )}
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-0">
+                              {gateway.enabled && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => handleManageGateway(gateway)}
+                                >
+                                  <Settings className="h-4 w-4" />
+                                </Button>
+                              )}
+                              <ToggleField
+                                id={gateway.id}
+                                label=""
+                                checked={gateway.enabled}
+                                onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
+                                disabled={!gateway.requirements.met || togglingGateway === gateway.id}
+                              />
+                            </div>
+                          </div>
                         </div>
-                        {gateway.method_description && (
-                          <p className="text-sm text-muted-foreground mb-2">
-                            {gateway.method_description}
-                          </p>
-                        )}
-                        {!gateway.requirements.met && (
-                          <Alert variant="destructive" className="mt-2">
-                            <AlertTriangle className="h-4 w-4" />
-                            <AlertDescription>
-                              Requirements not met: {gateway.requirements.missing.join(', ')}
-                            </AlertDescription>
-                          </Alert>
-                        )}
-                      </div>
+                      ))}
                     </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleManageGateway(gateway)}
-                      >
-                        <Settings className="h-4 w-4 mr-2" />
-                        Manage
-                      </Button>
-                      <ToggleField
-                        id={gateway.id}
-                        label=""
-                        checked={gateway.enabled}
-                        onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
-                        disabled={!gateway.requirements.met || togglingGateway === gateway.id}
-                      />
-                    </div>
-                  </div>
-                </div>
+                  </AccordionContent>
+                </AccordionItem>
               ))}
-            </div>
+            </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>