feat(F-073): completed feature

project/apps/admin/src/app/(dashboard)/tax-rates/page.tsx

@@ -11,6 +11,7 @@ export default function TaxRatesPage() {
   const [editRate, setEditRate] = useState('');
   const [editActive, setEditActive] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [toggling, setToggling] = useState<Record<string, boolean>>({});
   const [msg, setMsg] = useState('');
 
   const load = useCallback(async () => {
@@ -37,6 +38,18 @@ export default function TaxRatesPage() {
 
   const fmt = (r: TaxRate) => `${r.ratePercent}%`;
 
+  const toggleActive = async (id: string, newActive: boolean) => {
+    setToggling(prev => ({ ...prev, [id]: true }));
+    try {
+      await taxApi.update(id, { active: newActive });
+      setRates(prev => prev.map(r => r.id === id ? { ...r, active: newActive } : r));
+    } catch (er) {
+      alert(er instanceof Error ? er.message : 'Error al cambiar estado');
+    } finally {
+      setToggling(prev => ({ ...prev, [id]: false }));
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -100,9 +113,22 @@ export default function TaxRatesPage() {
                       <td className="px-6 py-4 text-sm text-gray-500 capitalize">{r.appliesTo}</td>
                       <td className="px-6 py-4 text-sm font-bold text-gray-800">{fmt(r)}</td>
                       <td className="px-6 py-4">
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${r.active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
-                          {r.active ? 'Activo' : 'Inactivo'}
-                        </span>
+                        <button
+                          onClick={() => toggleActive(r.id, !r.active)}
+                          disabled={toggling[r.id] || saving}
+                          title={r.active ? 'Desactivar' : 'Activar'}
+                          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-[#2D6A4F] focus:ring-offset-2 ${
+                            r.active ? 'bg-green-500' : 'bg-gray-300'
+                          }`}
+                        >
+                          {toggling[r.id] ? (
+                            <span className="w-full text-center text-white text-xs animate-pulse">…</span>
+                          ) : (
+                            <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
+                              r.active ? 'translate-x-6' : 'translate-x-1'
+                            }`} />
+                          )}
+                        </button>
                       </td>
                       <td className="px-6 py-4 text-right">
                         {editing === r.id ? (