feat: Implementación de eliminación de productos con validación de asociaciones

frontend/admin-panel/src/pages/Products/ProductManager.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Plus, Search, Edit, Box, Layers } from 'lucide-react';
+import { Plus, Search, Edit, Box, Layers, Trash2 } from 'lucide-react';
 import { productService } from '../../../../counter-panel/src/services/productService';
 import { companyService } from '../../../../counter-panel/src/services/companyService';
 import { categoryService } from '../../services/categoryService';
@@ -57,6 +57,21 @@ export default function ProductManager() {
     if (shouldRefresh) loadData();
   };
 
+  const handleDelete = async (product: Product) => {
+    if (!window.confirm(`¿Está seguro que desea eliminar el producto "${product.name}"? Esta acción no se puede deshacer.`)) {
+      return;
+    }
+
+    try {
+      await productService.delete(product.id);
+      loadData();
+    } catch (error: any) {
+      console.error("Error eliminando producto", error);
+      const msg = error.response?.data?.message || "Ocurrió un error al intentar eliminar el producto.";
+      alert(msg);
+    }
+  };
+
   const filteredProducts = products.filter(p =>
     p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
     p.sku?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -138,12 +153,22 @@ export default function ProductManager() {
                   <span className={clsx("w-2 h-2 rounded-full inline-block", p.isActive ? "bg-emerald-500" : "bg-rose-500")}></span>
                 </td>
                 <td className="p-5 text-right">
-                  <button
-                    onClick={() => handleEdit(p)}
-                    className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
-                  >
-                    <Edit size={18} />
-                  </button>
+                  <div className="flex justify-end gap-1">
+                    <button
+                      onClick={() => handleEdit(p)}
+                      className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                      title="Editar"
+                    >
+                      <Edit size={18} />
+                    </button>
+                    <button
+                      onClick={() => handleDelete(p)}
+                      className="p-2 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors"
+                      title="Eliminar"
+                    >
+                      <Trash2 size={18} />
+                    </button>
+                  </div>
                 </td>
               </tr>
             ))}