From f76a545491811009e9a0d16851cdf23278d07317 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 19 Mar 2026 16:50:42 +0000 Subject: [PATCH 1/4] Add src/app/admin/page.tsx --- src/app/admin/page.tsx | 475 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 475 insertions(+) create mode 100644 src/app/admin/page.tsx diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..214bbcd --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,475 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; +import { Plus, Edit2, Trash2, Search, Image as ImageIcon, Tag as TagIcon } from "lucide-react"; + +interface Product { + id: string; + name: string; + category: string; + price: string; + description: string; + mainImage: string; + sku: string; + stockStatus: "in-stock" | "low-stock" | "out-of-stock"; + isFeatured: boolean; + offerLabel?: string; +} + +interface FormData { + name: string; + category: string; + price: string; + description: string; + mainImage: string; + sku: string; + stockStatus: "in-stock" | "low-stock" | "out-of-stock"; + isFeatured: boolean; + offerLabel: string; +} + +const initialFormData: FormData = { + name: "", category: "", price: "", description: "", mainImage: "", sku: "", stockStatus: "in-stock", isFeatured: false, + offerLabel: ""}; + +const productCategories = [ + "Telas", "Botones", "Hilos", "Velcros", "Elásticos", "Cierres", "Cintas", "Cordones", "Encajes", "Accesorios"]; + +export default function AdminPage() { + const [products, setProducts] = useState([ + { + id: "prod-001", name: "Tela de Algodón Premium", category: "Telas", price: "$8.990", description: "Tela de algodón 100% natural de alta calidad", mainImage: "http://img.b2bpic.net/free-photo/high-angle-view-colorful-cotton-textile_23-2147921793.jpg?_wi=1", sku: "TEL-ALG-001", stockStatus: "in-stock", isFeatured: true, + offerLabel: "20% OFF"}, + ]); + + const [formData, setFormData] = useState(initialFormData); + const [isEditing, setIsEditing] = useState(false); + const [editingId, setEditingId] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); + const [showForm, setShowForm] = useState(false); + + const navItems = [ + { name: "Dashboard", id: "admin" }, + { name: "Productos", id: "products" }, + { name: "Volver a Tienda", id: "home" }, + ]; + + const filteredProducts = products.filter((p) => + p.name.toLowerCase().includes(searchTerm.toLowerCase()) || + p.sku.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value, type } = e.target; + setFormData({ + ...formData, + [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value, + }); + }; + + const handleAddProduct = () => { + if (!formData.name || !formData.category || !formData.price || !formData.sku) { + alert("Por favor completa los campos requeridos"); + return; + } + + if (isEditing && editingId) { + setProducts( + products.map((p) => + p.id === editingId + ? { + ...formData, + id: editingId, + } + : p + ) + ); + setIsEditing(false); + setEditingId(null); + } else { + const newProduct: Product = { + ...formData, + id: `prod-${Date.now()}`, + }; + setProducts([...products, newProduct]); + } + + setFormData(initialFormData); + setShowForm(false); + }; + + const handleEditProduct = (product: Product) => { + setFormData(product); + setIsEditing(true); + setEditingId(product.id); + setShowForm(true); + }; + + const handleDeleteProduct = (id: string) => { + if (confirm("¿Estás seguro de que deseas eliminar este producto?")) { + setProducts(products.filter((p) => p.id !== id)); + } + }; + + const handleCancel = () => { + setFormData(initialFormData); + setIsEditing(false); + setEditingId(null); + setShowForm(false); + }; + + const getStockBadgeColor = (status: string) => { + switch (status) { + case "in-stock": + return "bg-green-100 text-green-800"; + case "low-stock": + return "bg-yellow-100 text-yellow-800"; + case "out-of-stock": + return "bg-red-100 text-red-800"; + default: + return "bg-gray-100 text-gray-800"; + } + }; + + const getStockLabel = (status: string) => { + switch (status) { + case "in-stock": + return "En Stock"; + case "low-stock": + return "Stock Bajo"; + case "out-of-stock": + return "Agotado"; + default: + return status; + } + }; + + return ( + + + +
+
+ {/* Header */} +
+

Panel de Administración

+

Gestiona tu catálogo de productos de manera fácil y rápida

+
+ + {/* Search Bar */} +
+
+ + setSearchTerm(e.target.value)} + className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + /> +
+ +
+ + {/* Form Modal */} + {showForm && ( +
+
+
+

+ {isEditing ? "Editar Producto" : "Nuevo Producto"} +

+ +
+ {/* Product Name */} +
+ + +
+ + {/* Category */} +
+ + +
+ + {/* Price */} +
+ + +
+ + {/* SKU */} +
+ + +
+ + {/* Stock Status */} +
+ + +
+ + {/* Main Image URL */} +
+ + +
+ + {/* Offer Label */} +
+ + +
+
+ + {/* Description */} +
+ +