Fix: Add payment configuration to ConfigTab

src/components/admin/ConfigTab.tsx

@@ -201,6 +201,26 @@ const ConfigTab: React.FC<ConfigTabProps> = ({ isSuperAdmin }) => {
                 <div className="flex items-center justify-center p-8">
                   <RefreshCw className="w-6 h-6 animate-spin" />
                 </div>
+              ) : paymentConfigs.length === 0 ? (
+                <div className="text-center p-8 bg-gray-50 rounded-lg">
+                  <CreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                    No hay configuraciones de pago
+                  </h3>
+                  <p className="text-gray-600 mb-4">
+                    Tu backend necesita implementar el endpoint de configuración de pagos
+                  </p>
+                  <div className="text-left bg-white p-4 rounded border max-w-2xl mx-auto">
+                    <p className="font-mono text-sm mb-2">
+                      <strong>Backend Required Endpoints:</strong>
+                    </p>
+                    <ul className="font-mono text-xs space-y-1 text-gray-700">
+                      <li>GET /config/payments - Lista de configs</li>
+                      <li>PUT /config/payments/:id - Actualizar config</li>
+                      <li>POST /config/payments/:id/test - Probar conexión</li>
+                    </ul>
+                  </div>
+                </div>
               ) : (
                 <div className="space-y-6">
                   {paymentConfigs.map((config) => (
@@ -415,6 +435,16 @@ const ConfigTab: React.FC<ConfigTabProps> = ({ isSuperAdmin }) => {
                 <div className="flex items-center justify-center p-8">
                   <RefreshCw className="w-6 h-6 animate-spin" />
                 </div>
+              ) : systemParameters.length === 0 ? (
+                <div className="text-center p-8 bg-gray-50 rounded-lg">
+                  <Settings className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                    No hay parámetros configurados
+                  </h3>
+                  <p className="text-sm text-gray-600">
+                    Endpoint requerido: GET /config/parameters
+                  </p>
+                </div>
               ) : (
                 <div className="space-y-4">
                   {systemParameters.map((param) => (

src/services/configApi.ts

@@ -187,14 +187,48 @@ export const configApi = {
           'Content-Type': 'application/json',
         },
       });
-      if (!response.ok) throw new Error('Failed to fetch payment configs');
+      if (!response.ok) {
+        // Si el backend no responde, retornar configuraciones mock
+        return this.getMockPaymentConfigs();
+      }
       return await response.json();
     } catch (error) {
       console.error('Error fetching payment configs:', error);
-      return [];
+      // Retornar configuraciones mock para desarrollo
+      return this.getMockPaymentConfigs();
     }
   },
 
+  getMockPaymentConfigs(): PaymentConfig[] {
+    return [
+      {
+        id: 'stripe-1',
+        provider: 'stripe',
+        name: 'Stripe Payment Gateway',
+        enabled: false,
+        credentials: {
+          publishableKey: '',
+          secretKey: '',
+          webhookSecret: '',
+        },
+        status: 'inactive',
+        testMode: true,
+      },
+      {
+        id: 'paypal-1',
+        provider: 'paypal',
+        name: 'PayPal Payment Gateway',
+        enabled: false,
+        credentials: {
+          clientId: '',
+          clientSecret: '',
+        },
+        status: 'inactive',
+        testMode: true,
+      },
+    ];
+  },
+
   async updatePaymentConfig(config: Partial<PaymentConfig>): Promise<PaymentConfig> {
     const response = await fetch(`${API_BASE_URL}/config/payments/${config.id}`, {
       method: 'PUT',