initial commit

Signed-off-by: ale <ale@manalejandro.com>

src/components/FirewallStatusCard.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react'
+import { useCSFApi } from '@/hooks/use-csf-api'
+
+interface FirewallStatusCardProps {
+  className?: string
+}
+
+export function FirewallStatusCard({ className = '' }: FirewallStatusCardProps) {
+  const { 
+    status, 
+    getStatus, 
+    startFirewall, 
+    stopFirewall, 
+    restartFirewall,
+    loading,
+    error 
+  } = useCSFApi()
+  
+  const [actionLoading, setActionLoading] = useState(false)
+  
+  useEffect(() => {
+    getStatus()
+  }, [getStatus])
+  
+  const handleAction = async (action: () => Promise<boolean>) => {
+    setActionLoading(true)
+    try {
+      await action()
+    } finally {
+      setActionLoading(false)
+    }
+  }
+  
+  const getStatusColor = () => {
+    if (!status) return 'bg-gray-500'
+    return status.running ? 'bg-green-500' : 'bg-red-500'
+  }
+  
+  const getStatusText = () => {
+    if (!status) return 'Desconocido'
+    return status.running ? 'Activo' : 'Inactivo'
+  }
+  
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-gray-900">Estado del Firewall</h3>
+        <div className={`w-3 h-3 rounded-full ${getStatusColor()}`}></div>
+      </div>
+      
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-md p-3 mb-4">
+          <p className="text-red-600 text-sm">{error}</p>
+        </div>
+      )}
+      
+      <div className="space-y-3">
+        <div className="flex justify-between">
+          <span className="text-gray-600">Estado:</span>
+          <span className={`font-medium ${status?.running ? 'text-green-600' : 'text-red-600'}`}>
+            {getStatusText()}
+          </span>
+        </div>
+        
+        {status && (
+          <>
+            <div className="flex justify-between">
+              <span className="text-gray-600">Versión:</span>
+              <span className="font-medium">{status.version}</span>
+            </div>
+            
+            <div className="flex justify-between">
+              <span className="text-gray-600">IPv4:</span>
+              <span className={`font-medium ${status.ipv4_active ? 'text-green-600' : 'text-red-600'}`}>
+                {status.ipv4_active ? 'Activo' : 'Inactivo'}
+              </span>
+            </div>
+            
+            <div className="flex justify-between">
+              <span className="text-gray-600">IPv6:</span>
+              <span className={`font-medium ${status.ipv6_active ? 'text-green-600' : 'text-red-600'}`}>
+                {status.ipv6_active ? 'Activo' : 'Inactivo'}
+              </span>
+            </div>
+            
+            {status.testing_mode && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3">
+                <p className="text-yellow-700 text-sm font-medium">
+                  ⚠️ Modo de prueba activado
+                </p>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      
+      <div className="mt-6 space-y-2">
+        <div className="flex gap-2">
+          <button
+            onClick={() => handleAction(startFirewall)}
+            disabled={loading || actionLoading || status?.running}
+            className="flex-1 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {actionLoading ? 'Procesando...' : 'Iniciar'}
+          </button>
+          
+          <button
+            onClick={() => handleAction(stopFirewall)}
+            disabled={loading || actionLoading || !status?.running}
+            className="flex-1 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {actionLoading ? 'Procesando...' : 'Detener'}
+          </button>
+        </div>
+        
+        <button
+          onClick={() => handleAction(restartFirewall)}
+          disabled={loading || actionLoading}
+          className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {actionLoading ? 'Reiniciando...' : 'Reiniciar'}
+        </button>
+      </div>
+    </div>
+  )
+}