Feat: Cambios Varios
This commit is contained in:
@@ -2,12 +2,16 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import ProtectedLayout from './layouts/ProtectedLayout';
|
||||
|
||||
import CategoryManager from './pages/Categories/CategoryManager';
|
||||
import UserManager from './pages/Users/UserManager';
|
||||
import DiagramPage from './pages/Diagram/DiagramPage';
|
||||
import PricingManager from './pages/Pricing/PricingManager';
|
||||
import PromotionsManager from './pages/Pricing/PromotionsManager';
|
||||
import SalesByCategory from './pages/Reports/SalesByCategory';
|
||||
import ModerationPage from './pages/Moderation/ModerationPage';
|
||||
import ListingExplorer from './pages/Listings/ListingExplorer';
|
||||
import AuditTimeline from './pages/Audit/AuditTimeline';
|
||||
import ClientManager from './pages/Clients/ClientManager';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -17,11 +21,16 @@ function App() {
|
||||
|
||||
<Route element={<ProtectedLayout />}>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/moderation" element={<ModerationPage />} />
|
||||
<Route path="/listings" element={<ListingExplorer />} />
|
||||
<Route path="/categories" element={<CategoryManager />} />
|
||||
<Route path="/clients" element={<ClientManager />} />
|
||||
<Route path="/users" element={<UserManager />} />
|
||||
<Route path="/diagram" element={<DiagramPage />} />
|
||||
<Route path="/pricing" element={<PricingManager />} />
|
||||
<Route path="/promotions" element={<PromotionsManager />} />
|
||||
<Route path="/reports/categories" element={<SalesByCategory />} />
|
||||
<Route path="/audit" element={<AuditTimeline />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import { X, Printer, Globe, Tag, Image as ImageIcon, Info, User } from 'lucide-react';
|
||||
|
||||
export default function ListingDetailModal({ isOpen, onClose, detail }: any) {
|
||||
if (!isOpen || !detail) return null;
|
||||
const { listing, attributes, images } = detail;
|
||||
|
||||
// Helper para la URL de imagen (asegura que no haya doble barra)
|
||||
const getImageUrl = (url: string) => {
|
||||
const base = import.meta.env.VITE_API_URL.replace('/api', '');
|
||||
return `${base}${url}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200">
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="p-6 border-b flex justify-between items-center bg-gray-50">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-blue-600 uppercase mb-1">
|
||||
<Tag size={14} /> {listing.categoryName || 'Aviso Clasificado'}
|
||||
</div>
|
||||
<h2 className="text-2xl font-black text-gray-800">#{listing.id} - {listing.title}</h2>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors"><X size={24} /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
{/* COLUMNA IZQUIERDA */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
|
||||
{/* DATOS DEL CLIENTE (NUEVO) */}
|
||||
<section className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex items-center gap-6">
|
||||
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-md">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div className="flex-1 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="block text-[10px] font-bold text-blue-400 uppercase">Solicitante</span>
|
||||
<span className="font-bold text-gray-700">{listing.clientName || 'Consumidor Final'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[10px] font-bold text-blue-400 uppercase">DNI / CUIT</span>
|
||||
<span className="font-mono text-sm text-gray-600">{listing.clientDni || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FOTOS */}
|
||||
<section>
|
||||
<h3 className="text-sm font-bold text-gray-400 uppercase mb-4 flex items-center gap-2"><ImageIcon size={16} /> Galería de Fotos</h3>
|
||||
{images.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{images.map((img: any) => (
|
||||
<img
|
||||
key={img.id}
|
||||
src={getImageUrl(img.url)}
|
||||
className="w-full h-56 object-cover rounded-xl border shadow-sm hover:opacity-90 transition-opacity cursor-pointer"
|
||||
alt="Aviso"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-100 h-32 rounded-xl flex items-center justify-center text-gray-400 italic border-2 border-dashed">
|
||||
El usuario no cargó imágenes
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ATRIBUTOS */}
|
||||
<section>
|
||||
<h3 className="text-sm font-bold text-gray-400 uppercase mb-4 flex items-center gap-2"><Info size={16} /> Ficha Técnica</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{attributes.map((attr: any) => (
|
||||
<div key={attr.id} className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
|
||||
<span className="block text-[10px] font-bold text-gray-400 uppercase">{attr.attributeName}</span>
|
||||
<span className="font-bold text-gray-700">{attr.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* COLUMNA DERECHA (DATOS TÉCNICOS) */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gray-900 text-white p-6 rounded-2xl shadow-xl">
|
||||
<div className="text-xs opacity-50 uppercase font-bold mb-1">Total Cobrado</div>
|
||||
<div className="text-4xl font-black text-green-400 mb-6">${listing.adFee?.toLocaleString()}</div>
|
||||
|
||||
<div className="space-y-3 pt-4 border-t border-white/10">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="opacity-60">Valor Producto</span>
|
||||
<span className="font-bold text-blue-300">${listing.price?.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="opacity-60">Estado</span>
|
||||
<span className="font-bold uppercase text-xs tracking-widest">{listing.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IMPRESIÓN MEJORADA */}
|
||||
<div className="border border-gray-200 rounded-2xl p-6 space-y-4 bg-white shadow-sm">
|
||||
<h3 className="text-sm font-bold text-gray-800 flex items-center gap-2 border-b pb-2">
|
||||
<Printer size={18} className="text-gray-400" /> Publicación Impresa
|
||||
</h3>
|
||||
{listing.printText ? (
|
||||
<>
|
||||
<div className={`p-4 rounded-lg border-2 ${listing.isFrame ? 'border-black' : 'border-gray-100'} bg-gray-50`}>
|
||||
<p className={`text-sm leading-relaxed ${listing.isBold ? 'font-bold' : ''}`}>
|
||||
{listing.printText}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-[10px] font-bold text-gray-500 uppercase">
|
||||
<div className="bg-gray-100 p-2 rounded text-center">Días: {listing.printDaysCount}</div>
|
||||
<div className="bg-gray-100 p-2 rounded text-center">Negrita: {listing.isBold ? 'SI' : 'NO'}</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="py-4 text-center">
|
||||
<span className="text-xs font-bold text-orange-500 bg-orange-50 px-3 py-1 rounded-full uppercase">
|
||||
Aviso sólo para Web
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* TEXTO WEB */}
|
||||
<div className="bg-gray-50 rounded-2xl p-6 space-y-2 border border-gray-100">
|
||||
<h3 className="text-sm font-bold text-gray-500 flex items-center gap-2">
|
||||
<Globe size={18} /> Descripción Web
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 italic">"{listing.description || 'Sin descripción adicional.'}"</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +1,69 @@
|
||||
import { Navigate, Outlet } from 'react-router-dom';
|
||||
import { Navigate, Outlet, useLocation } from 'react-router-dom';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { LogOut, LayoutDashboard, FolderTree, Users, FileText, DollarSign, Percent } from 'lucide-react';
|
||||
import {
|
||||
LogOut, LayoutDashboard, FolderTree, Users,
|
||||
FileText, DollarSign, Eye, History, User as ClientIcon, Search
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function ProtectedLayout() {
|
||||
const { isAuthenticated, logout } = useAuthStore();
|
||||
const { isAuthenticated, role, logout } = useAuthStore();
|
||||
const location = useLocation();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
if (!isAuthenticated) return <Navigate to="/login" replace />;
|
||||
|
||||
// Definición de permisos por ruta
|
||||
const menuItems = [
|
||||
{ label: 'Dashboard', href: '/', icon: <LayoutDashboard size={20} />, roles: ['Admin', 'Cajero'] },
|
||||
{ label: 'Moderación', href: '/moderation', icon: <Eye size={20} />, roles: ['Admin', 'Moderador'] },
|
||||
{ label: 'Explorador', href: '/listings', icon: <Search size={20} />, roles: ['Admin', 'Cajero', 'Moderador'] },
|
||||
{ label: 'Clientes', href: '/clients', icon: <ClientIcon size={20} />, roles: ['Admin', 'Cajero'] },
|
||||
{ label: 'Categorías', href: '/categories', icon: <FolderTree size={20} />, roles: ['Admin'] },
|
||||
{ label: 'Usuarios', href: '/users', icon: <Users size={20} />, roles: ['Admin'] },
|
||||
{ label: 'Tarifas', href: '/pricing', icon: <DollarSign size={20} />, roles: ['Admin'] },
|
||||
{ label: 'Diagramación', href: '/diagram', icon: <FileText size={20} />, roles: ['Admin', 'Diagramador'] },
|
||||
{ label: 'Auditoría', href: '/audit', icon: <History size={20} />, roles: ['Admin'] },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 flex">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 bg-gray-900 text-white flex flex-col transition-all duration-300">
|
||||
<div className="p-4 text-xl font-bold border-b border-gray-800 flex items-center gap-2">
|
||||
<LayoutDashboard className="text-blue-500" />
|
||||
SIG-CM
|
||||
<div className="flex h-screen bg-gray-100 overflow-hidden">
|
||||
<aside className="w-64 bg-gray-900 text-white flex flex-col shadow-xl">
|
||||
<div className="p-6 text-xl font-black border-b border-gray-800 tracking-tighter italic text-blue-500">
|
||||
SIG-CM <span className="text-[10px] text-gray-500 not-italic font-medium">ADMIN</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4">
|
||||
<ul className="space-y-1">
|
||||
<li>
|
||||
<a href="/" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<LayoutDashboard size={20} />
|
||||
<span>Dashboard</span>
|
||||
<nav className="flex-1 p-4 space-y-1">
|
||||
{menuItems.map((item) => {
|
||||
// FILTRO DE SEGURIDAD UI: Solo mostrar si el rol del usuario está permitido
|
||||
if (!item.roles.includes(role || '')) return null;
|
||||
|
||||
return (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 p-3 rounded-xl transition-all ${location.pathname === item.href
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
|
||||
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium text-sm">{item.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/categories" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<FolderTree size={20} />
|
||||
<span>Categorías</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/users" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<Users size={20} />
|
||||
<span>Usuarios</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/pricing" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<DollarSign size={20} />
|
||||
<span>Tarifas y Reglas</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/promotions" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<Percent size={20} />
|
||||
<span>Promociones</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/diagram" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<FileText size={20} />
|
||||
<span>Diagramación</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-gray-800">
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full p-2 transition-colors"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>Cerrar Sesión</span>
|
||||
<div className="mb-4 px-3 py-2 bg-gray-800/50 rounded-lg">
|
||||
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Sesión actual</p>
|
||||
<p className="text-xs font-bold text-blue-400">{role}</p>
|
||||
</div>
|
||||
<button onClick={logout} className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full p-2 transition-colors text-sm font-bold">
|
||||
<LogOut size={18} /> Cerrar Sesión
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 p-8 overflow-y-auto">
|
||||
<main className="flex-1 overflow-y-auto p-8 relative">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
57
frontend/admin-panel/src/pages/Audit/AuditTimeline.tsx
Normal file
57
frontend/admin-panel/src/pages/Audit/AuditTimeline.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import { History, User as UserIcon, CheckCircle, XCircle, FileText, Clock } from 'lucide-react';
|
||||
|
||||
export default function AuditTimeline() {
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/reports/audit').then(res => {
|
||||
setLogs(res.data);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const getIcon = (action: string) => {
|
||||
if (action === 'Aprobar') return <CheckCircle className="text-green-500" size={18} />;
|
||||
if (action === 'Rechazar') return <XCircle className="text-red-500" size={18} />;
|
||||
return <FileText className="text-blue-500" size={18} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<History className="text-blue-600" />
|
||||
<h2 className="text-2xl font-bold text-gray-800">Auditoría de Actividad</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border shadow-sm overflow-hidden">
|
||||
<div className="p-4 bg-gray-50 border-b font-bold text-gray-600 text-sm">
|
||||
Últimas acciones realizadas por el equipo
|
||||
</div>
|
||||
|
||||
<div className="divide-y">
|
||||
{loading ? (
|
||||
<div className="p-10 text-center text-gray-400 italic">Cargando historial...</div>
|
||||
) : logs.map(log => (
|
||||
<div key={log.id} className="p-4 hover:bg-gray-50 transition flex items-start gap-4">
|
||||
<div className="mt-1">{getIcon(log.action)}</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-bold text-gray-800 flex items-center gap-1 italic">
|
||||
<UserIcon size={14} className="text-gray-400" /> {log.username}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 flex items-center gap-1">
|
||||
<Clock size={12} /> {new Date(log.createdAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">{log.details}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,10 +5,11 @@ import { categoryService } from '../../services/categoryService';
|
||||
import { attributeService } from '../../services/attributeService';
|
||||
import { type AttributeDefinition } from '../../types/AttributeDefinition';
|
||||
import Modal from '../../components/Modal';
|
||||
import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen, Settings, LayoutList } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen, Settings, LayoutList, GitMerge, Move, ArrowRightCircle } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import { operationService } from '../../services/operationService';
|
||||
import { type Operation } from '../../types/Operation';
|
||||
import api from '../../services/api';
|
||||
|
||||
// Type helper for the tree structure
|
||||
interface CategoryNode extends Category {
|
||||
@@ -18,9 +19,14 @@ interface CategoryNode extends Category {
|
||||
|
||||
export default function CategoryManager() {
|
||||
const [categories, setCategories] = useState<CategoryNode[]>([]);
|
||||
const [flatCategories, setFlatCategories] = useState<Category[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
// Drag & Drop State
|
||||
const [draggedNode, setDraggedNode] = useState<CategoryNode | null>(null);
|
||||
const [dragOverNodeId, setDragOverNodeId] = useState<number | null>(null);
|
||||
|
||||
// Form state
|
||||
const [editingCategory, setEditingCategory] = useState<Category | null>(null);
|
||||
const [formData, setFormData] = useState<Partial<Category>>({ name: '', slug: '', active: true, parentId: null });
|
||||
@@ -31,7 +37,7 @@ export default function CategoryManager() {
|
||||
const [configuringCategory, setConfiguringCategory] = useState<Category | null>(null);
|
||||
const [isOpsModalOpen, setIsOpsModalOpen] = useState(false);
|
||||
|
||||
// State for Attributes (ESTO FALTABA)
|
||||
// State for Attributes
|
||||
const [isAttrModalOpen, setIsAttrModalOpen] = useState(false);
|
||||
const [attributes, setAttributes] = useState<AttributeDefinition[]>([]);
|
||||
const [newAttrData, setNewAttrData] = useState({
|
||||
@@ -40,6 +46,13 @@ export default function CategoryManager() {
|
||||
required: false
|
||||
});
|
||||
|
||||
// State for Merge
|
||||
const [isMergeModalOpen, setIsMergeModalOpen] = useState(false);
|
||||
const [targetMergeId, setTargetMergeId] = useState<number>(0);
|
||||
|
||||
// State for Move Content (Nueva funcionalidad)
|
||||
const [isMoveContentModalOpen, setIsMoveContentModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadCategories();
|
||||
}, []);
|
||||
@@ -48,6 +61,7 @@ export default function CategoryManager() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await categoryService.getAll();
|
||||
setFlatCategories(data);
|
||||
const tree = buildTree(data);
|
||||
setCategories(tree);
|
||||
} catch (error) {
|
||||
@@ -67,6 +81,106 @@ export default function CategoryManager() {
|
||||
}));
|
||||
};
|
||||
|
||||
// --- LÓGICA DRAG & DROP ---
|
||||
|
||||
const handleDragStart = (e: React.DragEvent, node: CategoryNode) => {
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify(node));
|
||||
setTimeout(() => {
|
||||
setDraggedNode(node);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleDragEnd = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDraggedNode(null);
|
||||
setDragOverNodeId(null);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent, targetId: number) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!draggedNode || draggedNode.id === targetId) return;
|
||||
if (isDescendant(draggedNode, targetId)) return;
|
||||
setDragOverNodeId(targetId);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleDrop = async (e: React.DragEvent, targetNode: CategoryNode | null) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragOverNodeId(null);
|
||||
|
||||
if (!draggedNode) return;
|
||||
|
||||
const newParentId = targetNode ? targetNode.id : null;
|
||||
|
||||
// 1. Validación: No mover si es el mismo padre
|
||||
if (draggedNode.parentId === newParentId) {
|
||||
setDraggedNode(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Validación: No mover dentro de sus propios hijos (Ciclo)
|
||||
if (targetNode && isDescendant(draggedNode, targetNode.id)) {
|
||||
alert("Operación inválida: No puedes mover una categoría dentro de sus propios hijos.");
|
||||
setDraggedNode(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const actionText = targetNode ? `dentro de "${targetNode.name}"` : "al nivel Raíz";
|
||||
|
||||
if (!confirm(`¿Mover "${draggedNode.name}" ${actionText}?`)) {
|
||||
setDraggedNode(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await categoryService.update(draggedNode.id, {
|
||||
id: draggedNode.id,
|
||||
name: draggedNode.name,
|
||||
slug: draggedNode.slug,
|
||||
active: draggedNode.active,
|
||||
parentId: newParentId
|
||||
});
|
||||
|
||||
loadCategories(); // Recargar árbol si tuvo éxito
|
||||
} catch (error: any) {
|
||||
console.error("Error detallado en Drop:", error);
|
||||
|
||||
let errorMessage = "Error al mover la categoría";
|
||||
|
||||
// Caso 1: BadRequest simple (string plano desde .NET)
|
||||
if (typeof error.response?.data === 'string') {
|
||||
errorMessage = error.response.data;
|
||||
}
|
||||
// Caso 2: Objeto JSON con propiedad 'message' o 'title' (ProblemDetails)
|
||||
else if (error.response?.data) {
|
||||
errorMessage = error.response.data.message || error.response.data.title || JSON.stringify(error.response.data);
|
||||
}
|
||||
// Caso 3: Error de red sin respuesta
|
||||
else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
alert(`❌ Operación Rechazada:\n${errorMessage}`);
|
||||
} finally {
|
||||
setDraggedNode(null);
|
||||
}
|
||||
};
|
||||
|
||||
const isDescendant = (sourceNode: CategoryNode, targetId: number): boolean => {
|
||||
if (sourceNode.children.some(child => child.id === targetId)) return true;
|
||||
return sourceNode.children.some(child => isDescendant(child, targetId));
|
||||
};
|
||||
|
||||
// --- FIN LÓGICA DRAG & DROP ---
|
||||
|
||||
const handleCreate = (parentId: number | null = null) => {
|
||||
setEditingCategory(null);
|
||||
setFormData({ name: '', slug: '', active: true, parentId });
|
||||
@@ -100,21 +214,20 @@ export default function CategoryManager() {
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
loadCategories();
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('Error saving category:', error);
|
||||
// Mostrar validación del backend (ej: Padre con avisos)
|
||||
alert(error.response?.data || 'Error al guardar la categoría. Verifique las reglas.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfigureOps = async (category: Category) => {
|
||||
setConfiguringCategory(category);
|
||||
setIsOpsModalOpen(true);
|
||||
|
||||
// Load data in parallel
|
||||
const [ops, catOps] = await Promise.all([
|
||||
operationService.getAll(),
|
||||
categoryService.getOperations(category.id)
|
||||
]);
|
||||
|
||||
setAllOperations(ops);
|
||||
setSelectedCategoryOps(catOps);
|
||||
};
|
||||
@@ -133,18 +246,15 @@ export default function CategoryManager() {
|
||||
const handleCreateAttribute = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!configuringCategory || !newAttrData.name) return;
|
||||
|
||||
try {
|
||||
await attributeService.create({
|
||||
...newAttrData,
|
||||
categoryId: configuringCategory.id,
|
||||
dataType: newAttrData.dataType as any // Type assertion for simplicity
|
||||
dataType: newAttrData.dataType as any
|
||||
});
|
||||
setNewAttrData({ name: '', dataType: 'text', required: false });
|
||||
loadAttributes(configuringCategory.id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} catch (error) { console.error(error); }
|
||||
};
|
||||
|
||||
const handleDeleteAttribute = async (id: number) => {
|
||||
@@ -152,108 +262,133 @@ export default function CategoryManager() {
|
||||
try {
|
||||
await attributeService.delete(id);
|
||||
if (configuringCategory) loadAttributes(configuringCategory.id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} catch (error) { console.error(error); }
|
||||
};
|
||||
|
||||
const toggleOperation = async (opId: number, isChecked: boolean) => {
|
||||
if (!configuringCategory) return;
|
||||
|
||||
try {
|
||||
if (isChecked) {
|
||||
await categoryService.addOperation(configuringCategory.id, opId);
|
||||
// Optimistic update
|
||||
const opToAdd = allOperations.find(o => o.id === opId);
|
||||
if (opToAdd) setSelectedCategoryOps([...selectedCategoryOps, opToAdd]);
|
||||
} else {
|
||||
await categoryService.removeOperation(configuringCategory.id, opId);
|
||||
setSelectedCategoryOps(selectedCategoryOps.filter(o => o.id !== opId));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Error actualizando operación");
|
||||
}
|
||||
} catch (error) { console.error(error); alert("Error actualizando operación"); }
|
||||
};
|
||||
|
||||
// Recursive component for rendering specific tree items
|
||||
// --- MERGE LOGIC ---
|
||||
const handleOpenMerge = (cat: Category) => {
|
||||
setEditingCategory(cat);
|
||||
setTargetMergeId(0);
|
||||
setIsMergeModalOpen(true);
|
||||
}
|
||||
|
||||
const handleMerge = async () => {
|
||||
if (!editingCategory || !targetMergeId) return;
|
||||
if (confirm(`¿CONFIRMAR FUSIÓN?\n\nTodo el contenido de "${editingCategory.name}" pasará a la categoría destino.\n"${editingCategory.name}" será ELIMINADA permanentemente.`)) {
|
||||
try {
|
||||
await api.post('/categories/merge', { sourceId: editingCategory.id, targetId: targetMergeId });
|
||||
setIsMergeModalOpen(false);
|
||||
loadCategories();
|
||||
alert("Fusión completada.");
|
||||
} catch (e) { console.error(e); alert("Error al fusionar"); }
|
||||
}
|
||||
}
|
||||
|
||||
// --- MOVE CONTENT LOGIC (Nuevo) ---
|
||||
const handleOpenMoveContent = (cat: Category) => {
|
||||
setEditingCategory(cat);
|
||||
setTargetMergeId(0);
|
||||
setIsMoveContentModalOpen(true);
|
||||
}
|
||||
|
||||
const handleMoveContent = async () => {
|
||||
if (!editingCategory || !targetMergeId) return;
|
||||
try {
|
||||
// Usamos el endpoint para mover solo avisos
|
||||
await api.post('/categories/move-content', {
|
||||
sourceId: editingCategory.id,
|
||||
targetId: targetMergeId
|
||||
});
|
||||
setIsMoveContentModalOpen(false);
|
||||
alert("Avisos movidos correctamente. Ahora puede agregar subcategorías.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Error al mover avisos");
|
||||
}
|
||||
}
|
||||
|
||||
// Componente Recursivo de Nodo
|
||||
const CategoryItem = ({ node }: { node: CategoryNode }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const isDragOver = dragOverNodeId === node.id;
|
||||
const isBeingDragged = draggedNode?.id === node.id;
|
||||
|
||||
return (
|
||||
<div className="mb-1">
|
||||
<div
|
||||
className={clsx("mb-1 transition-all duration-200", isBeingDragged && "opacity-40 grayscale")}
|
||||
style={{ marginLeft: `${node.level * 20}px` }}
|
||||
>
|
||||
<div
|
||||
draggable="true"
|
||||
onDragStart={(e) => handleDragStart(e, node)}
|
||||
onDragOver={(e) => handleDragOver(e, node.id)}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={(e) => handleDrop(e, node)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={clsx(
|
||||
"flex items-center p-2 rounded hover:bg-gray-100 transition-colors group border-b border-gray-100",
|
||||
node.level === 0 && "font-semibold bg-gray-50 border-gray-200"
|
||||
"flex items-center p-2 rounded transition-all group border-b border-gray-100 cursor-grab active:cursor-grabbing select-none",
|
||||
node.level === 0 && "font-semibold bg-gray-50 border-gray-200",
|
||||
isDragOver
|
||||
? "bg-blue-100 border-2 border-blue-500 shadow-md transform scale-[1.01] z-10"
|
||||
: "hover:bg-gray-100 border-transparent"
|
||||
)}
|
||||
style={{ marginLeft: `${node.level * 20}px` }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className={clsx("mr-2 text-gray-500", node.children.length === 0 && "opacity-0")}
|
||||
>
|
||||
<div className="mr-2 text-gray-300 group-hover:text-gray-500 cursor-grab">
|
||||
<Move size={14} />
|
||||
</div>
|
||||
|
||||
<button onClick={() => setIsExpanded(!isExpanded)} className={clsx("mr-2 text-gray-500", node.children.length === 0 && "opacity-0")}>
|
||||
{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
|
||||
</button>
|
||||
|
||||
<span className="text-blue-500 mr-2">
|
||||
<span className={clsx("mr-2", isDragOver ? "text-blue-700" : "text-blue-500")}>
|
||||
{isExpanded ? <FolderOpen size={18} /> : <Folder size={18} />}
|
||||
</span>
|
||||
|
||||
<span className="flex-1">{node.name}</span>
|
||||
<span className="flex-1 font-medium text-gray-700">{node.name}</span>
|
||||
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{/* Attributes Button */}
|
||||
<button
|
||||
onClick={() => handleConfigureAttributes(node)}
|
||||
className="p-1 text-orange-600 hover:bg-orange-100 rounded"
|
||||
title="Atributos Dinámicos"
|
||||
>
|
||||
<LayoutList size={16} />
|
||||
</button>
|
||||
<button onClick={() => handleConfigureAttributes(node)} className="p-1 text-orange-600 hover:bg-orange-100 rounded" title="Atributos"><LayoutList size={16} /></button>
|
||||
<button onClick={() => handleConfigureOps(node)} className="p-1 text-purple-600 hover:bg-purple-100 rounded" title="Operaciones"><Settings size={16} /></button>
|
||||
|
||||
<button
|
||||
onClick={() => handleConfigureOps(node)}
|
||||
className="p-1 text-purple-600 hover:bg-purple-100 rounded"
|
||||
title="Configurar Operaciones"
|
||||
>
|
||||
<Settings size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCreate(node.id)}
|
||||
className="p-1 text-green-600 hover:bg-green-100 rounded"
|
||||
title="Agregar Subcategoría"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(node)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded"
|
||||
title="Editar"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(node.id)}
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded"
|
||||
title="Eliminar"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
{/* Botón Mover Contenido (Nuevo) */}
|
||||
<button onClick={() => handleOpenMoveContent(node)} className="p-1 text-teal-600 hover:bg-teal-100 rounded" title="Mover Avisos (Vaciar)"><ArrowRightCircle size={16} /></button>
|
||||
|
||||
<button onClick={() => handleOpenMerge(node)} className="p-1 text-indigo-600 hover:bg-indigo-100 rounded" title="Fusionar (Merge)"><GitMerge size={16} /></button>
|
||||
<button onClick={() => handleCreate(node.id)} className="p-1 text-green-600 hover:bg-green-100 rounded" title="Subcategoría"><Plus size={16} /></button>
|
||||
<button onClick={() => handleEdit(node)} className="p-1 text-blue-600 hover:bg-blue-100 rounded" title="Editar"><Edit size={16} /></button>
|
||||
<button onClick={() => handleDelete(node.id)} className="p-1 text-red-600 hover:bg-red-100 rounded" title="Eliminar"><Trash2 size={16} /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && node.children.length > 0 && (
|
||||
<div className="border-l border-gray-200 ml-4 py-1">
|
||||
{node.children.map(child => (
|
||||
<CategoryItem key={child.id} node={child} />
|
||||
))}
|
||||
<div className="border-l-2 border-gray-200 ml-5 pl-1 py-1">
|
||||
{node.children.map(child => <CategoryItem key={child.id} node={child} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper para saber si una categoría es padre (tiene hijos)
|
||||
const isParentCategory = (id: number) => {
|
||||
return flatCategories.some(c => c.parentId === id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
@@ -267,14 +402,22 @@ export default function CategoryManager() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Operation Manager Section */}
|
||||
<OperationManager />
|
||||
|
||||
<div className="bg-white rounded shadow p-6 min-h-[500px]">
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-white rounded shadow p-6 min-h-[500px] border-2 transition-all duration-200",
|
||||
draggedNode && dragOverNodeId === null
|
||||
? "border-dashed border-blue-400 bg-blue-50/50"
|
||||
: "border-transparent"
|
||||
)}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverNodeId(null); }}
|
||||
onDrop={(e) => handleDrop(e, null)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="text-center text-gray-500 py-10">Cargando taxonomía...</div>
|
||||
) : categories.length === 0 ? (
|
||||
<div className="text-center text-gray-400 py-10">No hay categorías definidas. Crea la primera.</div>
|
||||
<div className="text-center text-gray-400 py-10">No hay categorías definidas. Crea la primera o arrastra aquí para mover a la raíz.</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{categories.map(node => (
|
||||
@@ -282,8 +425,20 @@ export default function CategoryManager() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{draggedNode && (
|
||||
<div className={clsx(
|
||||
"mt-8 py-8 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-400 pointer-events-none transition-opacity duration-300",
|
||||
draggedNode ? "opacity-100" : "opacity-0 h-0 py-0 mt-0 overflow-hidden"
|
||||
)}>
|
||||
<Move className="mr-2" /> Soltar aquí para convertir en Categoría Raíz
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- MODALES --- */}
|
||||
|
||||
{/* Main Modal (Create/Edit) */}
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
@@ -370,7 +525,7 @@ export default function CategoryManager() {
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Attributes Configuration Modal (ESTO FALTABA EN EL JSX) */}
|
||||
{/* Attributes Configuration Modal */}
|
||||
<Modal
|
||||
isOpen={isAttrModalOpen}
|
||||
onClose={() => setIsAttrModalOpen(false)}
|
||||
@@ -439,6 +594,88 @@ export default function CategoryManager() {
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Merge Modal */}
|
||||
<Modal isOpen={isMergeModalOpen} onClose={() => setIsMergeModalOpen(false)} title="Fusionar Categorías">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600 bg-yellow-50 p-3 rounded border border-yellow-200">
|
||||
Está a punto de mover todo el contenido de <strong>{editingCategory?.name}</strong> a otra categoría.
|
||||
<br />
|
||||
<span className="text-red-600 font-bold">¡La categoría original será eliminada!</span>
|
||||
</p>
|
||||
<div>
|
||||
<label className="block text-sm font-bold mb-2">Seleccione Categoría Destino:</label>
|
||||
<select
|
||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-indigo-500 outline-none"
|
||||
onChange={e => setTargetMergeId(Number(e.target.value))}
|
||||
value={targetMergeId}
|
||||
>
|
||||
<option value="0">-- Seleccionar Destino --</option>
|
||||
{flatCategories
|
||||
.filter(c => c.id !== editingCategory?.id)
|
||||
.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button onClick={() => setIsMergeModalOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">Cancelar</button>
|
||||
<button
|
||||
onClick={handleMerge}
|
||||
disabled={!targetMergeId}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Confirmar Fusión
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* MOVE CONTENT MODAL */}
|
||||
<Modal isOpen={isMoveContentModalOpen} onClose={() => setIsMoveContentModalOpen(false)} title="Mover Avisos (Vaciar)">
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 p-3 rounded border border-blue-200 text-sm text-gray-700">
|
||||
<p className="font-bold mb-1">Mover avisos de: {editingCategory?.name}</p>
|
||||
<p>Seleccione un destino para los avisos. <br />
|
||||
<span className="text-xs text-blue-600">* Solo se permiten categorías finales (sin hijos).</span></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold mb-2">Destino de los avisos:</label>
|
||||
<select
|
||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-teal-500 outline-none"
|
||||
onChange={e => setTargetMergeId(Number(e.target.value))}
|
||||
value={targetMergeId}
|
||||
>
|
||||
<option value="0">-- Seleccionar Destino --</option>
|
||||
{flatCategories
|
||||
.filter(c =>
|
||||
c.id !== editingCategory?.id && // No el mismo
|
||||
!isParentCategory(c.id) // No permitir mover a Padres
|
||||
)
|
||||
.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{targetMergeId === 0 && (
|
||||
<p className="text-xs text-red-500 mt-1">Debe seleccionar un destino válido.</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button onClick={() => setIsMoveContentModalOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">Cancelar</button>
|
||||
<button
|
||||
onClick={handleMoveContent}
|
||||
disabled={!targetMergeId}
|
||||
className="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Mover Avisos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
frontend/admin-panel/src/pages/Clients/ClientManager.tsx
Normal file
95
frontend/admin-panel/src/pages/Clients/ClientManager.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { clientService } from '../../services/clientService';
|
||||
import { User, Search, Phone, Mail, FileText, CreditCard } from 'lucide-react';
|
||||
|
||||
export default function ClientManager() {
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
clientService.getAll().then(res => {
|
||||
setClients(res);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const filteredClients = clients.filter(c =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.dniOrCuit.includes(search)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<User className="text-blue-600" />
|
||||
Directorio de Clientes
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Buscador */}
|
||||
<div className="bg-white p-4 rounded-xl border shadow-sm relative">
|
||||
<Search className="absolute left-7 top-7 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nombre o DNI/CUIT..."
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Grid de Clientes */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{loading ? (
|
||||
<p className="col-span-full text-center text-gray-400 py-10">Cargando base de datos...</p>
|
||||
) : filteredClients.map(client => (
|
||||
<div key={client.id} className="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all overflow-hidden group">
|
||||
<div className="p-5 border-b border-gray-50 bg-gray-50/50">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="w-10 h-10 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-bold">
|
||||
{client.name.charAt(0)}
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest bg-white px-2 py-1 rounded-full border">
|
||||
ID: #{client.id}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-3 font-bold text-gray-800 text-lg line-clamp-1">{client.name}</h3>
|
||||
<div className="flex items-center gap-1.5 text-xs text-gray-500 mt-1">
|
||||
<CreditCard size={14} />
|
||||
{client.dniOrCuit}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<Mail size={16} className="text-gray-400" />
|
||||
{client.email || 'Sin correo'}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<Phone size={16} className="text-gray-400" />
|
||||
{client.phone || 'Sin teléfono'}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<div className="text-center border-r border-gray-100">
|
||||
<div className="text-xs text-gray-400 font-bold uppercase">Avisos</div>
|
||||
<div className="text-lg font-black text-gray-800">{client.totalAds}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-xs text-gray-400 font-bold uppercase">Invertido</div>
|
||||
<div className="text-lg font-black text-green-600">${client.totalSpent?.toLocaleString() || 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full py-3 bg-white text-blue-600 text-xs font-bold uppercase tracking-tighter hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center gap-2 border-t">
|
||||
<FileText size={14} /> Ver Historial Completo
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,362 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
DollarSign, FileText, Printer, TrendingUp,
|
||||
Download, PieChart as PieIcon,
|
||||
Clock, RefreshCw, UserCheck, ListChecks, ChevronRight, Users, ArrowLeft,
|
||||
History, CheckCircle, XCircle
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
LineChart, Line, XAxis, YAxis, CartesianGrid,
|
||||
Tooltip, ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import { dashboardService, type DashboardData } from '../services/dashboardService';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import api from '../services/api';
|
||||
import { reportService } from '../services/reportService';
|
||||
|
||||
const getLocalDateString = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
export default function Dashboard() {
|
||||
const { role } = useAuthStore();
|
||||
const [data, setData] = useState<DashboardData | any>(null);
|
||||
const [cashiers, setCashiers] = useState<any[]>([]);
|
||||
const [recentTransactions, setRecentTransactions] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// --- NUEVOS ESTADOS PARA MONITOR INTEGRADO ---
|
||||
const [selectedCashier, setSelectedCashier] = useState<{ id: number, name: string } | null>(null);
|
||||
const [selectedCashierLogs, setSelectedCashierLogs] = useState<any[]>([]);
|
||||
const [loadingLogs, setLoadingLogs] = useState(false);
|
||||
|
||||
const todayStr = getLocalDateString(new Date());
|
||||
const [dates, setDates] = useState({ from: todayStr, to: todayStr });
|
||||
|
||||
const loadDashboardData = async () => {
|
||||
if (new Date(dates.from) > new Date(dates.to)) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (role === 'Admin') {
|
||||
if (selectedCashier) {
|
||||
const res = await api.get(`/reports/cashier-detail/${selectedCashier.id}`, {
|
||||
params: { from: dates.from, to: dates.to }
|
||||
});
|
||||
setData(res.data);
|
||||
// Cargar logs del cajero seleccionado
|
||||
loadCashierLogs(selectedCashier.id);
|
||||
} else {
|
||||
const stats = await dashboardService.getStats(dates.from, dates.to);
|
||||
setData(stats);
|
||||
const usersRes = await api.get('/users');
|
||||
setCashiers(usersRes.data.filter((u: any) => u.role === 'Cajero'));
|
||||
}
|
||||
} else {
|
||||
const res = await api.get('/reports/cashier', {
|
||||
params: { from: dates.from, to: dates.to }
|
||||
});
|
||||
setData(res.data);
|
||||
}
|
||||
|
||||
const params: any = {};
|
||||
if (selectedCashier) params.userId = selectedCashier.id;
|
||||
const recentRes = await api.get('/listings', { params });
|
||||
setRecentTransactions(recentRes.data.slice(0, 5));
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error cargando dashboard:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCashierLogs = async (userId: number) => {
|
||||
setLoadingLogs(true);
|
||||
try {
|
||||
const res = await api.get(`/reports/audit/user/${userId}`);
|
||||
setSelectedCashierLogs(res.data);
|
||||
} catch (e) {
|
||||
console.error("Error cargando logs");
|
||||
} finally {
|
||||
setLoadingLogs(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDashboardData();
|
||||
}, [dates, role, selectedCashier]);
|
||||
|
||||
const setQuickRange = (days: number) => {
|
||||
const now = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(now.getDate() - days);
|
||||
setDates({ from: getLocalDateString(start), to: getLocalDateString(now) });
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
await reportService.exportCierre(dates.from, dates.to, selectedCashier?.id);
|
||||
} catch (e) {
|
||||
alert("Error al generar el reporte");
|
||||
}
|
||||
};
|
||||
|
||||
const getAuditIcon = (action: string) => {
|
||||
if (action === 'Aprobar') return <CheckCircle className="text-green-500" size={14} />;
|
||||
if (action === 'Rechazar') return <XCircle className="text-red-500" size={14} />;
|
||||
return <Clock className="text-blue-500" size={14} />;
|
||||
};
|
||||
|
||||
if (loading && !data) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
|
||||
<p className="font-medium">Sincronizando información...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const isInvalidRange = new Date(dates.from) > new Date(dates.to);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-4">Bienvenido al Panel de Administración</h1>
|
||||
<p className="text-gray-600">Seleccione una opción del menú para comenzar.</p>
|
||||
<div className="space-y-6">
|
||||
{/* HEADER UNIFICADO */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white p-4 rounded-xl border border-gray-200 shadow-sm transition-all">
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedCashier && (
|
||||
<button
|
||||
onClick={() => setSelectedCashier(null)}
|
||||
className="p-2 hover:bg-gray-100 rounded-full text-gray-500 transition-colors"
|
||||
title="Volver a Vista Global"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-xl font-bold text-gray-800">
|
||||
{role === 'Admin'
|
||||
? (selectedCashier ? `Auditoría: ${selectedCashier.name}` : 'Resumen Gerencial')
|
||||
: 'Mi Rendimiento'}
|
||||
</h1>
|
||||
{loading && <RefreshCw size={14} className="animate-spin text-blue-500" />}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Clock size={14} />
|
||||
<span>{new Date(dates.from).toLocaleDateString()} - {new Date(dates.to).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex bg-gray-100 p-1 rounded-lg">
|
||||
<button onClick={() => setQuickRange(0)} className={`px-3 py-1 text-xs font-bold rounded transition-all ${dates.from === todayStr ? 'bg-white shadow text-blue-600' : 'text-gray-500'}`}>HOY</button>
|
||||
<button onClick={() => setQuickRange(7)} className={`px-3 py-1 text-xs font-bold rounded transition-all ${dates.from !== todayStr ? 'bg-white shadow text-blue-600' : 'text-gray-500'}`}>7D</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 border-l pl-3 border-gray-200">
|
||||
<input type="date" value={dates.from} onChange={(e) => setDates({ ...dates, from: e.target.value })} className={`text-xs border ${isInvalidRange ? 'border-red-500 bg-red-50' : 'border-gray-300 bg-gray-50'} rounded p-1.5 outline-none focus:ring-2 focus:ring-blue-500/20`} />
|
||||
<span className="text-gray-400 text-xs">-</span>
|
||||
<input type="date" value={dates.to} onChange={(e) => setDates({ ...dates, to: e.target.value })} className={`text-xs border ${isInvalidRange ? 'border-red-500 bg-red-50' : 'border-gray-300 bg-gray-50'} rounded p-1.5 outline-none focus:ring-2 focus:ring-blue-500/20`} />
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="flex items-center gap-2 bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-gray-700 transition shadow-md"
|
||||
>
|
||||
<Download size={16} />
|
||||
{role === 'Admin' ? (selectedCashier ? 'DESCARGAR CAJA' : 'DESCARGAR CIERRE GLOBAL') : 'MI ACTIVIDAD'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPIs */}
|
||||
{(role === 'Cajero' || selectedCashier) ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<KpiCard title="Recaudación Caja" value={`$${(data.myRevenue ?? 0).toLocaleString()}`} trend="Ingresos" icon={<DollarSign />} color="bg-green-50 text-green-600" />
|
||||
<KpiCard title="Avisos Procesados" value={(data.myAdsCount ?? 0).toString()} trend="Cargas" icon={<UserCheck />} color="bg-blue-50 text-blue-700" />
|
||||
<KpiCard title="En Revisión" value={(data.myPendingAds ?? 0).toString()} trend="Pendientes" icon={<ListChecks />} color="bg-orange-50 text-orange-700" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<KpiCard title="Recaudación" value={`$${data.revenueToday.toLocaleString()}`} trend="Total" icon={<DollarSign />} color="bg-green-50 text-green-600" />
|
||||
<KpiCard title="Avisos Vendidos" value={data.adsToday.toString()} trend="Aprobados" icon={<FileText />} color="bg-blue-50 text-blue-600" />
|
||||
<KpiCard title="Ocupación Papel" value={`${Math.round(data.paperOccupation)}%`} trend="Mañana" progress={data.paperOccupation} icon={<Printer />} color="bg-orange-50 text-orange-600" />
|
||||
<KpiCard title="Ticket Promedio" value={`$${Math.round(data.ticketAverage).toLocaleString()}`} trend="Promedio" icon={<TrendingUp />} color="bg-purple-50 text-purple-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
||||
<h3 className="font-bold text-gray-700 mb-6 flex items-center gap-2"><TrendingUp size={18} className="text-blue-500" /> Evolución de Ingresos</h3>
|
||||
<div className="h-72 relative">
|
||||
{role === 'Admin' && !selectedCashier ? (
|
||||
<ResponsiveContainer width="100%" height="100%" minWidth={0} debounce={50}>
|
||||
<LineChart data={data.weeklyTrend}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F3F4F6" />
|
||||
<XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fill: '#9CA3AF', fontSize: 11 }} dy={10} />
|
||||
<YAxis axisLine={false} tickLine={false} tick={{ fill: '#9CA3AF', fontSize: 11 }} />
|
||||
<Tooltip formatter={(val: any) => [`$${Number(val).toLocaleString()}`, "Ventas"]} contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }} />
|
||||
<Line type="monotone" dataKey="amount" stroke="#3B82F6" strokeWidth={4} dot={{ r: 4, fill: '#3B82F6', strokeWidth: 2, stroke: '#fff' }} activeDot={{ r: 6, strokeWidth: 0 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-50/50 rounded-xl text-gray-400 italic text-sm">
|
||||
Gráfico de tendencia disponible en vista gerencial global
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MONITOR INTEGRADO (LISTA O AUDITORÍA) */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm flex flex-col overflow-hidden">
|
||||
{role === 'Admin' && !selectedCashier ? (
|
||||
<>
|
||||
<div className="p-4 border-b bg-gray-50/50 flex justify-between items-center">
|
||||
<h3 className="font-bold text-gray-700 flex items-center gap-2">
|
||||
<Users size={18} className="text-blue-500" /> Monitor de Cajeros
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 space-y-3 overflow-y-auto flex-1">
|
||||
{cashiers.map(c => (
|
||||
<div
|
||||
key={c.id}
|
||||
onClick={() => setSelectedCashier({ id: c.id, name: c.username })}
|
||||
className="flex items-center justify-between p-3 rounded-xl border border-gray-100 bg-white hover:bg-blue-50 hover:border-blue-200 transition-all cursor-pointer group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-xs font-bold text-gray-500 group-hover:text-blue-600 transition-colors">
|
||||
{c.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-700">{c.username}</span>
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-gray-300 group-hover:text-blue-500" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : role === 'Admin' && selectedCashier ? (
|
||||
<>
|
||||
<div className="p-4 border-b bg-blue-600 text-white flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<History size={18} />
|
||||
<h3 className="font-bold text-sm truncate">Logs: {selectedCashier.name}</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedCashier(null)}
|
||||
className="text-[10px] bg-white/20 hover:bg-white/30 px-2 py-1 rounded font-bold transition-colors"
|
||||
>
|
||||
CERRAR
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-white">
|
||||
{loadingLogs ? (
|
||||
<div className="h-full flex items-center justify-center text-gray-400 animate-pulse text-xs italic">Consultando actividad...</div>
|
||||
) : selectedCashierLogs.length === 0 ? (
|
||||
<div className="h-full flex items-center justify-center text-gray-400 text-xs italic">Sin actividad registrada</div>
|
||||
) : (
|
||||
selectedCashierLogs.map(log => (
|
||||
<div key={log.id} className="relative pl-6 pb-4 border-l border-gray-100 last:pb-0">
|
||||
<div className="absolute left-[-7px] top-1 bg-white p-0.5">
|
||||
{getAuditIcon(log.action)}
|
||||
</div>
|
||||
<div className="text-[11px] font-bold text-gray-700 flex justify-between">
|
||||
<span>{log.action}</span>
|
||||
<span className="font-normal text-gray-400 font-mono">
|
||||
{new Date(log.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500 mt-0.5 line-clamp-2 leading-relaxed">{log.details}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center space-y-4 p-6">
|
||||
<div className="p-4 bg-blue-50 rounded-full text-blue-600"><PieIcon size={32} /></div>
|
||||
<div>
|
||||
<h4 className="font-bold text-gray-700">Mi Puesto</h4>
|
||||
<p className="text-xs text-gray-400">Visualizando tus métricas de hoy.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLA DE ÚLTIMOS MOVIMIENTOS */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
|
||||
<h3 className="font-bold text-gray-700">
|
||||
{role === 'Admin' ? (selectedCashier ? `Cargas de ${selectedCashier.name}` : 'Últimos Avisos Procesados') : 'Mis Últimas Cargas'}
|
||||
</h3>
|
||||
<a href="/listings" className="text-sm text-blue-600 font-semibold hover:underline">Ver todo</a>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse text-sm">
|
||||
<thead className="text-xs font-bold text-gray-400 uppercase tracking-wider bg-gray-50/50">
|
||||
<tr>
|
||||
<th className="p-4 border-b border-gray-100">Fecha / Hora</th>
|
||||
<th className="p-4 border-b border-gray-100">Rubro / Título</th>
|
||||
<th className="p-4 border-b border-gray-100">Monto (Fee)</th>
|
||||
<th className="p-4 border-b border-gray-100">Estado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{recentTransactions.map(t => (
|
||||
<tr key={t.id} className="hover:bg-gray-50/80 transition-colors">
|
||||
<td className="p-4 text-gray-500 font-medium">
|
||||
<div>{new Date(t.createdAt).toLocaleDateString()}</div>
|
||||
<div className="text-[10px] opacity-60 font-mono">{new Date(t.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="font-bold text-gray-700">{t.title}</div>
|
||||
<div className="text-[11px] text-gray-400 uppercase tracking-tighter">{t.categoryName || 'General'}</div>
|
||||
</td>
|
||||
<td className="p-4 font-black text-blue-600">${t.adFee?.toLocaleString() || "0"}</td>
|
||||
<td className="p-4">
|
||||
<span className={`flex items-center gap-1.5 font-bold ${t.status === 'Published' ? 'text-green-600' : 'text-orange-500'}`}>
|
||||
<div className={`w-1.5 h-1.5 rounded-full ${t.status === 'Published' ? 'bg-green-600' : 'bg-orange-500'}`}></div>
|
||||
{t.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{recentTransactions.length === 0 && (
|
||||
<tr><td colSpan={4} className="p-8 text-center text-gray-400 italic">No hay transacciones para mostrar.</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KpiCard({ title, value, trend, icon, color, progress }: any) {
|
||||
return (
|
||||
<div className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all group">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className={`p-2.5 rounded-lg transition-colors ${color}`}>{icon}</div>
|
||||
<div className="text-[10px] font-black px-2 py-1 rounded-full uppercase bg-gray-100 text-gray-500 group-hover:bg-gray-200 transition-colors">
|
||||
{trend}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs font-bold text-gray-400 uppercase tracking-wider">{title}</p>
|
||||
<h4 className="text-2xl font-black text-gray-800 mt-1">{value}</h4>
|
||||
{progress !== undefined && (
|
||||
<div className="mt-4 w-full bg-gray-100 rounded-full h-2">
|
||||
<div className={`h-2 rounded-full transition-all duration-700 ${progress > 90 ? 'bg-red-500' : 'bg-orange-500'}`} style={{ width: `${progress}%` }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
174
frontend/admin-panel/src/pages/Listings/ListingExplorer.tsx
Normal file
174
frontend/admin-panel/src/pages/Listings/ListingExplorer.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import ListingDetailModal from '../../components/Listings/ListingDetailModal';
|
||||
import { listingService } from '../../services/listingService';
|
||||
import { Search, ExternalLink, Calendar, Tag, User as UserIcon } from 'lucide-react';
|
||||
|
||||
export default function ListingExplorer() {
|
||||
const [listings, setListings] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [query, setQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("");
|
||||
const [selectedDetail, setSelectedDetail] = useState<any>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleOpenDetail = async (id: number) => {
|
||||
const detail = await listingService.getById(id);
|
||||
setSelectedDetail(detail);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const loadListings = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Usamos el endpoint de búsqueda que ya tiene el backend
|
||||
const res = await api.get('/listings', {
|
||||
params: { q: query }
|
||||
});
|
||||
|
||||
let data = res.data;
|
||||
if (statusFilter) {
|
||||
data = data.filter((l: any) => l.status === statusFilter);
|
||||
}
|
||||
|
||||
setListings(data);
|
||||
} catch (error) {
|
||||
console.error("Error cargando avisos:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadListings();
|
||||
}, [statusFilter]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center text-gray-800">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Explorador de Avisos</h2>
|
||||
<p className="text-sm text-gray-500">Gestión y búsqueda histórica de publicaciones</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BARRA DE HERRAMIENTAS */}
|
||||
<div className="bg-white p-4 rounded-xl border shadow-sm flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-3 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por título, contenido o ID..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && loadListings()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="border border-gray-200 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 outline-none"
|
||||
>
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="Published">Publicados</option>
|
||||
<option value="Pending">Pendientes</option>
|
||||
<option value="Rejected">Rechazados</option>
|
||||
<option value="Draft">Borradores</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={loadListings}
|
||||
className="bg-gray-900 text-white px-6 py-2 rounded-lg font-bold hover:bg-gray-800 transition shadow-md"
|
||||
>
|
||||
BUSCAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RESULTADOS */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50 text-gray-400 text-xs uppercase font-bold tracking-wider">
|
||||
<tr>
|
||||
<th className="p-4 border-b">ID</th>
|
||||
<th className="p-4 border-b">Aviso / Título</th>
|
||||
<th className="p-4 border-b">Ingreso (Aviso)</th>
|
||||
<th className="p-4 border-b">Valor Producto</th>
|
||||
<th className="p-4 border-b">Creado</th>
|
||||
<th className="p-4 border-b">Vía</th>
|
||||
<th className="p-4 border-b text-center">Estado</th>
|
||||
<th className="p-4 border-b text-right">Detalles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 text-sm">
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="p-10 text-center text-gray-400">Buscando en la base de datos...</td></tr>
|
||||
) : listings.length === 0 ? (
|
||||
<tr><td colSpan={7} className="p-10 text-center text-gray-400 italic">No se encontraron avisos con esos criterios.</td></tr>
|
||||
) : (
|
||||
listings.map((l) => (
|
||||
<tr key={l.id} className="hover:bg-gray-50 transition-colors group">
|
||||
<td className="p-4 font-mono text-gray-400">#{l.id}</td>
|
||||
<td className="p-4">
|
||||
<div className="font-bold text-gray-800 group-hover:text-blue-600 transition-colors">{l.title}</div>
|
||||
<div className="text-xs text-gray-400 flex items-center gap-1 mt-0.5">
|
||||
<Tag size={12} /> {l.categoryName || 'Sin Rubro'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="font-bold text-green-700">
|
||||
${l.adFee?.toLocaleString() ?? "0"}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-gray-500 text-xs">${l.price?.toLocaleString()}</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-gray-600 flex items-center gap-1.5">
|
||||
<Calendar size={14} className="text-gray-300" />
|
||||
{new Date(l.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-black uppercase ${l.userId === null ? 'bg-blue-50 text-blue-600' : 'bg-green-50 text-green-600'
|
||||
}`}>
|
||||
<UserIcon size={10} />
|
||||
{l.userId === null ? 'Web' : 'Mostrador'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase border ${l.status === 'Published' ? 'bg-green-50 text-green-700 border-green-200' :
|
||||
l.status === 'Pending' ? 'bg-yellow-50 text-yellow-700 border-yellow-200' :
|
||||
'bg-gray-50 text-gray-600 border-gray-200'
|
||||
}`}>
|
||||
{l.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-right">
|
||||
<button
|
||||
onClick={() => handleOpenDetail(l.id)}
|
||||
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
||||
title="Ver Detalles"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<ListingDetailModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
detail={selectedDetail}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
frontend/admin-panel/src/pages/Moderation/ModerationPage.tsx
Normal file
130
frontend/admin-panel/src/pages/Moderation/ModerationPage.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import { Check, X, Printer, Globe, MessageSquare } from 'lucide-react';
|
||||
|
||||
interface Listing {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
price: number;
|
||||
currency: string;
|
||||
createdAt: string;
|
||||
status: string;
|
||||
printText: string;
|
||||
isBold: boolean;
|
||||
isFrame: boolean;
|
||||
printDaysCount: number;
|
||||
}
|
||||
|
||||
export default function ModerationPage() {
|
||||
const [listings, setListings] = useState<Listing[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => { loadPending(); }, []);
|
||||
|
||||
const loadPending = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Este endpoint ya lo tenemos en el ListingsController que hicimos al inicio
|
||||
const res = await api.get('/listings/pending');
|
||||
setListings(res.data);
|
||||
} catch (error) { console.error(error); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
const handleAction = async (id: number, action: 'Published' | 'Rejected') => {
|
||||
try {
|
||||
await api.put(`/listings/${id}/status`, JSON.stringify(action), {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
setListings(listings.filter(l => l.id !== id));
|
||||
} catch (e) { alert("Error al procesar el aviso"); }
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-10 text-center text-gray-500">Cargando avisos para revisar...</div>;
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800">Panel de Moderación</h2>
|
||||
<p className="text-gray-500">Revisión de avisos entrantes para Web y Diario Papel</p>
|
||||
</div>
|
||||
|
||||
{listings.length === 0 ? (
|
||||
<div className="bg-white p-12 rounded-xl border-2 border-dashed text-center">
|
||||
<Check className="mx-auto text-green-500 mb-4" size={48} />
|
||||
<h3 className="text-lg font-bold text-gray-700">¡Bandeja vacía!</h3>
|
||||
<p className="text-gray-500">No hay avisos pendientes de moderación en este momento.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{listings.map(listing => (
|
||||
<div key={listing.id} className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col md:flex-row">
|
||||
|
||||
{/* Info del Aviso */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded uppercase tracking-wider">
|
||||
ID: #{listing.id}
|
||||
</span>
|
||||
<h3 className="text-xl font-bold text-gray-900 mt-1">{listing.title}</h3>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-black text-gray-900">{listing.currency} ${listing.price.toLocaleString()}</p>
|
||||
<p className="text-xs text-gray-400">{new Date(listing.createdAt).toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Versión Web */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg border border-gray-100">
|
||||
<div className="flex items-center gap-2 mb-2 text-gray-700 font-bold text-sm">
|
||||
<Globe size={16} /> VERSIÓN WEB / MOBILE
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 italic line-clamp-3">"{listing.description}"</p>
|
||||
</div>
|
||||
|
||||
{/* Versión Impresa - CRÍTICO */}
|
||||
<div className={`p-4 rounded-lg border-2 ${listing.isFrame ? 'border-black' : 'border-gray-200'} bg-white`}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2 text-gray-700 font-bold text-sm">
|
||||
<Printer size={16} /> VERSIÓN IMPRESA
|
||||
</div>
|
||||
<span className="text-[10px] bg-gray-100 px-2 py-0.5 rounded font-bold">
|
||||
{listing.printDaysCount} DÍAS
|
||||
</span>
|
||||
</div>
|
||||
<div className={`text-sm p-2 bg-gray-50 rounded border border-dashed border-gray-300 ${listing.isBold ? 'font-bold' : ''}`}>
|
||||
{listing.printText || "Sin texto de impresión definido"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Acciones Laterales */}
|
||||
<div className="bg-gray-50 border-t md:border-t-0 md:border-l border-gray-200 p-6 flex flex-row md:flex-col gap-3 justify-center min-w-[200px]">
|
||||
<button
|
||||
onClick={() => handleAction(listing.id, 'Published')}
|
||||
className="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition shadow-sm"
|
||||
>
|
||||
<Check size={20} /> APROBAR
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAction(listing.id, 'Rejected')}
|
||||
className="flex-1 bg-white hover:bg-red-50 text-red-600 border border-red-200 font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition"
|
||||
>
|
||||
<X size={20} /> RECHAZAR
|
||||
</button>
|
||||
<button className="p-3 text-gray-400 hover:text-gray-600 flex items-center justify-center gap-2 text-xs font-medium">
|
||||
<MessageSquare size={16} /> Enviar Nota
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import { Save, DollarSign } from 'lucide-react';
|
||||
import { Save, DollarSign, FileText, Type, AlertCircle } from 'lucide-react';
|
||||
import { processCategories, type FlatCategory } from '../../utils/categoryTreeUtils';
|
||||
|
||||
interface PricingConfig {
|
||||
basePrice: number;
|
||||
@@ -12,129 +13,202 @@ interface PricingConfig {
|
||||
frameSurcharge: number;
|
||||
}
|
||||
|
||||
interface Category { id: number; name: string; }
|
||||
|
||||
export default function PricingManager() {
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [flatCategories, setFlatCategories] = useState<FlatCategory[]>([]);
|
||||
const [selectedCat, setSelectedCat] = useState<number | null>(null);
|
||||
const [config, setConfig] = useState<PricingConfig>({
|
||||
|
||||
// Configuración por defecto
|
||||
const defaultConfig: PricingConfig = {
|
||||
basePrice: 0, baseWordCount: 15, extraWordPrice: 0,
|
||||
specialChars: '!', specialCharPrice: 0, boldSurcharge: 0, frameSurcharge: 0
|
||||
});
|
||||
};
|
||||
|
||||
const [config, setConfig] = useState<PricingConfig>(defaultConfig);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Cargar categorías
|
||||
api.get('/categories').then(res => setCategories(res.data));
|
||||
// Cargar categorías y procesar árbol
|
||||
api.get('/categories').then(res => {
|
||||
const processed = processCategories(res.data);
|
||||
setFlatCategories(processed);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCat) {
|
||||
setLoading(true);
|
||||
// Cargar config existente
|
||||
api.get(`/pricing/${selectedCat}`).then(res => {
|
||||
if (res.data) setConfig(res.data);
|
||||
else setConfig({ // Default si no existe
|
||||
basePrice: 0, baseWordCount: 15, extraWordPrice: 0,
|
||||
specialChars: '!', specialCharPrice: 0, boldSurcharge: 0, frameSurcharge: 0
|
||||
});
|
||||
});
|
||||
api.get(`/pricing/${selectedCat}`)
|
||||
.then(res => {
|
||||
if (res.data) setConfig(res.data);
|
||||
else setConfig(defaultConfig); // Reset si es nuevo
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [selectedCat]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedCat) return;
|
||||
setLoading(true);
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.post('/pricing', { ...config, categoryId: selectedCat });
|
||||
alert('Configuración guardada correctamente.');
|
||||
} catch (e) {
|
||||
alert('Error al guardar.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Helper para el nombre del rubro seleccionado
|
||||
const selectedCatName = flatCategories.find(c => c.id === selectedCat)?.path;
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-2xl font-bold mb-6 flex items-center gap-2 text-gray-800">
|
||||
<DollarSign className="text-green-600" />
|
||||
Gestor de Tarifas y Reglas
|
||||
</h2>
|
||||
|
||||
<div className="bg-white p-6 rounded shadow mb-6">
|
||||
<label className="block text-sm font-medium mb-2">Seleccionar Rubro a Configurar</label>
|
||||
<select
|
||||
className="w-full border p-2 rounded"
|
||||
onChange={e => setSelectedCat(Number(e.target.value))}
|
||||
value={selectedCat || ''}
|
||||
>
|
||||
<option value="">-- Seleccione --</option>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
{/* SELECTOR DE RUBRO */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
|
||||
<label className="block text-sm font-bold text-gray-700 mb-2">Seleccionar Rubro a Configurar</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
className="w-full border border-gray-300 p-3 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-medium appearance-none bg-white"
|
||||
onChange={e => setSelectedCat(Number(e.target.value) || null)}
|
||||
value={selectedCat || ''}
|
||||
>
|
||||
<option value="">-- Seleccione un Rubro --</option>
|
||||
{flatCategories.map(cat => (
|
||||
<option
|
||||
key={cat.id}
|
||||
value={cat.id}
|
||||
disabled={!cat.isSelectable} // Bloqueamos padres para forzar config en hojas
|
||||
className={cat.isSelectable ? "text-gray-900 font-medium" : "text-gray-400 font-bold bg-gray-50"}
|
||||
>
|
||||
{'\u00A0\u00A0'.repeat(cat.level)}
|
||||
{cat.hasChildren ? `📂 ${cat.name}` : `↳ ${cat.name}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Flecha custom para estilo */}
|
||||
<div className="absolute right-4 top-3.5 pointer-events-none text-gray-500">▼</div>
|
||||
</div>
|
||||
|
||||
{selectedCat && (
|
||||
<p className="mt-2 text-sm text-blue-600 bg-blue-50 p-2 rounded inline-block">
|
||||
Editando: <strong>{selectedCatName}</strong>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedCat && (
|
||||
<div className="bg-white p-6 rounded shadow border border-gray-200">
|
||||
<h3 className="font-bold text-lg mb-4 border-b pb-2">Reglas de Precio</h3>
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* Tarifa Base */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-blue-600">Base</h4>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Precio Mínimo ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.basePrice} onChange={e => setConfig({ ...config, basePrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Palabras Incluidas (Cant.)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.baseWordCount} onChange={e => setConfig({ ...config, baseWordCount: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Costo Palabra Extra ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.extraWordPrice} onChange={e => setConfig({ ...config, extraWordPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
{/* Extras y Estilos */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-purple-600">Extras y Recargos</h4>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Caracteres Especiales (ej: !$%)</label>
|
||||
<input type="text" className="border p-2 rounded w-full"
|
||||
value={config.specialChars} onChange={e => setConfig({ ...config, specialChars: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Costo por Caracter Especial ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.specialCharPrice} onChange={e => setConfig({ ...config, specialCharPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{/* TARIFA BASE */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="font-bold text-lg mb-4 pb-2 border-b border-gray-100 flex items-center gap-2 text-gray-800">
|
||||
<FileText size={20} className="text-blue-500" /> Tarifa Base (Texto)
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Recargo Negrita ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.boldSurcharge} onChange={e => setConfig({ ...config, boldSurcharge: parseFloat(e.target.value) })} />
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Precio Mínimo ($)</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-2 text-gray-500">$</span>
|
||||
<input type="number" className="pl-6 border p-2 rounded w-full focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={config.basePrice} onChange={e => setConfig({ ...config, basePrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">Costo por el aviso básico por día.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Recargo Recuadro ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.frameSurcharge} onChange={e => setConfig({ ...config, frameSurcharge: parseFloat(e.target.value) })} />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Palabras Incluidas</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={config.baseWordCount} onChange={e => setConfig({ ...config, baseWordCount: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Costo Palabra Extra ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={config.extraWordPrice} onChange={e => setConfig({ ...config, extraWordPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CONTENIDO ESPECIAL */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="font-bold text-lg mb-4 pb-2 border-b border-gray-100 flex items-center gap-2 text-gray-800">
|
||||
<AlertCircle size={20} className="text-orange-500" /> Caracteres Especiales
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Caracteres a cobrar (ej: !$%)</label>
|
||||
<input type="text" className="border p-2 rounded w-full font-mono tracking-widest focus:ring-2 focus:ring-orange-500 outline-none"
|
||||
value={config.specialChars} onChange={e => setConfig({ ...config, specialChars: e.target.value })} />
|
||||
<p className="text-xs text-gray-400 mt-1">Cada uno de estos símbolos se cobrará aparte.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Costo por Símbolo ($)</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-2 text-gray-500">$</span>
|
||||
<input type="number" className="pl-6 border p-2 rounded w-full focus:ring-2 focus:ring-orange-500 outline-none"
|
||||
value={config.specialCharPrice} onChange={e => setConfig({ ...config, specialCharPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ESTILOS VISUALES */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 lg:col-span-2">
|
||||
<h3 className="font-bold text-lg mb-4 pb-2 border-b border-gray-100 flex items-center gap-2 text-gray-800">
|
||||
<Type size={20} className="text-purple-500" /> Estilos Visuales (Recargos)
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="flex items-center gap-4 bg-gray-50 p-4 rounded border border-gray-200">
|
||||
<div className="font-bold text-xl px-3 py-1 border-2 border-transparent bg-white shadow-sm">N</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Recargo Negrita ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-purple-500 outline-none"
|
||||
value={config.boldSurcharge} onChange={e => setConfig({ ...config, boldSurcharge: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 bg-gray-50 p-4 rounded border border-gray-200">
|
||||
<div className="font-bold text-xl px-3 py-1 border-2 border-black bg-white shadow-sm">A</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Recargo Recuadro ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-purple-500 outline-none"
|
||||
value={config.frameSurcharge} onChange={e => setConfig({ ...config, frameSurcharge: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
{/* BARRA DE ACCIÓN FLOTANTE */}
|
||||
<div className="sticky bottom-4 bg-gray-900 text-white p-4 rounded-lg shadow-lg flex justify-between items-center z-10">
|
||||
<div className="text-sm">
|
||||
Configurando tarifas para: <span className="font-bold text-green-400">{selectedCatName}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 flex items-center gap-2"
|
||||
disabled={saving}
|
||||
className="bg-green-600 text-white px-8 py-2 rounded font-bold hover:bg-green-500 disabled:opacity-50 transition flex items-center gap-2"
|
||||
>
|
||||
<Save size={18} /> Guardar Configuración
|
||||
<Save size={20} /> {saving ? 'Guardando...' : 'GUARDAR CAMBIOS'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
105
frontend/admin-panel/src/pages/Reports/SalesByCategory.tsx
Normal file
105
frontend/admin-panel/src/pages/Reports/SalesByCategory.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { reportService, type CategorySales } from '../../services/reportService';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
import { LayoutGrid, Calendar, ArrowRight } from 'lucide-react';
|
||||
|
||||
const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
|
||||
|
||||
export default function SalesByCategory() {
|
||||
const [data, setData] = useState<CategorySales[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await reportService.getSalesByCategory();
|
||||
setData(res);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<LayoutGrid className="text-blue-600" />
|
||||
Rendimiento por Rubro
|
||||
</h2>
|
||||
<div className="flex gap-2 items-center bg-white p-2 rounded-lg border text-sm">
|
||||
<Calendar size={16} className="text-gray-400" />
|
||||
<span className="text-gray-600">Últimos 30 días</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Gráfico de Barras */}
|
||||
<div className="lg:col-span-2 bg-white p-6 rounded-xl border shadow-sm">
|
||||
<h3 className="font-bold text-gray-700 mb-6">Ingresos Totales por Rubro (Consolidado)</h3>
|
||||
<div className="h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data} layout="vertical" margin={{ left: 30, right: 30 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#F3F4F6" />
|
||||
<XAxis type="number" hide />
|
||||
<YAxis
|
||||
dataKey="categoryName"
|
||||
type="category"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
width={100}
|
||||
tick={{ fill: '#4B5563', fontSize: 12, fontWeight: 600 }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number | undefined) => value ? [`$${value.toLocaleString()}`, 'Ventas'] : ['-', 'Ventas']}
|
||||
cursor={{ fill: '#F9FAFB' }}
|
||||
/>
|
||||
<Bar dataKey="totalSales" radius={[0, 4, 4, 0]} barSize={30}>
|
||||
{data.map((_, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resumen Lateral */}
|
||||
<div className="bg-white p-6 rounded-xl border shadow-sm flex flex-col">
|
||||
<h3 className="font-bold text-gray-700 mb-4">Top Participación</h3>
|
||||
<div className="space-y-4 flex-1">
|
||||
{data.map((item, index) => (
|
||||
<div key={item.categoryId} className="group cursor-default">
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="font-medium text-gray-600">{item.categoryName}</span>
|
||||
<span className="font-bold text-gray-900">{item.percentage}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-100 rounded-full h-2">
|
||||
<div
|
||||
className="h-2 rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${item.percentage}%`,
|
||||
backgroundColor: COLORS[index % COLORS.length]
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex justify-between mt-1">
|
||||
<span className="text-[10px] text-gray-400 uppercase">{item.adCount} avisos</span>
|
||||
<span className="text-[10px] font-bold text-gray-500">${item.totalSales.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-6 w-full py-2 bg-gray-50 text-gray-600 text-xs font-bold rounded-lg border border-gray-100 hover:bg-gray-100 flex items-center justify-center gap-2">
|
||||
DESCARGAR DETALLE <ArrowRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
});
|
||||
|
||||
// 1. Interceptor de Solicitud (Request): Pega el token antes de salir
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
@@ -12,4 +13,30 @@ api.interceptors.request.use((config) => {
|
||||
return config;
|
||||
});
|
||||
|
||||
// 2. Interceptor de Respuesta (Response): Atrapa errores al volver
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
// Si la respuesta es exitosa (200-299), la dejamos pasar
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
// Si hay un error de respuesta
|
||||
if (error.response && error.response.status === 401) {
|
||||
console.warn("Sesión expirada o no autorizada. Redirigiendo al login...");
|
||||
|
||||
// Borramos el token vencido/inválido
|
||||
localStorage.removeItem('token');
|
||||
|
||||
// Forzamos la redirección al Login
|
||||
// Usamos window.location.href para asegurar una recarga limpia fuera del Router de React si es necesario
|
||||
if (window.location.pathname !== '/login') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
// Rechazamos la promesa para que el componente sepa que hubo error (si necesita mostrar alerta)
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
12
frontend/admin-panel/src/services/clientService.ts
Normal file
12
frontend/admin-panel/src/services/clientService.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import api from './api';
|
||||
|
||||
export const clientService = {
|
||||
getAll: async () => {
|
||||
const res = await api.get('/clients');
|
||||
return res.data;
|
||||
},
|
||||
getHistory: async (id: number) => {
|
||||
const res = await api.get(`/clients/${id}/history`);
|
||||
return res.data;
|
||||
}
|
||||
};
|
||||
19
frontend/admin-panel/src/services/dashboardService.ts
Normal file
19
frontend/admin-panel/src/services/dashboardService.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import api from './api';
|
||||
|
||||
export interface DashboardData {
|
||||
revenueToday: number;
|
||||
adsToday: number;
|
||||
ticketAverage: number;
|
||||
paperOccupation: number;
|
||||
weeklyTrend: { day: string; amount: number }[];
|
||||
channelMix: { name: string; value: number }[];
|
||||
}
|
||||
|
||||
export const dashboardService = {
|
||||
getStats: async (from?: string, to?: string): Promise<DashboardData> => {
|
||||
const response = await api.get<DashboardData>('/reports/dashboard', {
|
||||
params: { from, to }
|
||||
});
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
12
frontend/admin-panel/src/services/listingService.ts
Normal file
12
frontend/admin-panel/src/services/listingService.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import api from './api';
|
||||
|
||||
export const listingService = {
|
||||
getPendingCount: async (): Promise<number> => {
|
||||
const response = await api.get<number>('/listings/pending/count');
|
||||
return response.data;
|
||||
},
|
||||
getById: async (id: number) => {
|
||||
const res = await api.get(`/listings/${id}`);
|
||||
return res.data;
|
||||
},
|
||||
};
|
||||
32
frontend/admin-panel/src/services/reportService.ts
Normal file
32
frontend/admin-panel/src/services/reportService.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import api from './api';
|
||||
|
||||
export interface CategorySales {
|
||||
categoryId: number;
|
||||
categoryName: string;
|
||||
totalSales: number;
|
||||
adCount: number;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
export const reportService = {
|
||||
getSalesByCategory: async (from?: string, to?: string): Promise<CategorySales[]> => {
|
||||
const response = await api.get<CategorySales[]>('/reports/sales-by-category', {
|
||||
params: { from, to }
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
exportCierre: async (from: string, to: string, userId?: number) => {
|
||||
const response = await api.get(`/reports/export-cierre`, {
|
||||
params: { from, to, userId },
|
||||
responseType: 'blob'
|
||||
});
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', userId ? `Caja_Cajero_${userId}.pdf` : `Cierre_Global.pdf`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
};
|
||||
@@ -2,20 +2,36 @@ import { create } from 'zustand';
|
||||
|
||||
interface AuthState {
|
||||
token: string | null;
|
||||
role: string | null;
|
||||
isAuthenticated: boolean;
|
||||
setToken: (token: string) => void;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
// Helper para decodificar el JWT sin librerías externas
|
||||
const parseJwt = (token: string) => {
|
||||
try {
|
||||
return JSON.parse(atob(token.split('.')[1]));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const useAuthStore = create<AuthState>((set) => ({
|
||||
token: localStorage.getItem('token'),
|
||||
role: localStorage.getItem('role'),
|
||||
isAuthenticated: !!localStorage.getItem('token'),
|
||||
setToken: (token: string) => {
|
||||
const payload = parseJwt(token);
|
||||
const role = payload["http://schemas.microsoft.com/ws/2008/06/identity/claims/role"];
|
||||
|
||||
localStorage.setItem('token', token);
|
||||
set({ token, isAuthenticated: true });
|
||||
localStorage.setItem('role', role);
|
||||
set({ token, role, isAuthenticated: true });
|
||||
},
|
||||
logout: () => {
|
||||
localStorage.removeItem('token');
|
||||
set({ token: null, isAuthenticated: false });
|
||||
localStorage.removeItem('role');
|
||||
set({ token: null, role: null, isAuthenticated: false });
|
||||
},
|
||||
}));
|
||||
}));
|
||||
75
frontend/admin-panel/src/utils/categoryTreeUtils.ts
Normal file
75
frontend/admin-panel/src/utils/categoryTreeUtils.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { type Category } from '../types/Category';
|
||||
|
||||
export interface FlatCategory {
|
||||
id: number;
|
||||
name: string;
|
||||
level: number;
|
||||
parentId: number | null;
|
||||
path: string;
|
||||
isSelectable: boolean; // True si no tiene hijos
|
||||
hasChildren: boolean;
|
||||
}
|
||||
|
||||
interface CategoryNode extends Category {
|
||||
children: CategoryNode[];
|
||||
}
|
||||
|
||||
export const buildTree = (categories: Category[]): CategoryNode[] => {
|
||||
const map = new Map<number, CategoryNode>();
|
||||
const roots: CategoryNode[] = [];
|
||||
|
||||
// 1. Inicializar nodos
|
||||
categories.forEach(cat => {
|
||||
// @ts-ignore
|
||||
map.set(cat.id, { ...cat, children: [] });
|
||||
});
|
||||
|
||||
// 2. Construir relaciones
|
||||
categories.forEach(cat => {
|
||||
const node = map.get(cat.id);
|
||||
if (node) {
|
||||
if (cat.parentId && map.has(cat.parentId)) {
|
||||
map.get(cat.parentId)!.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return roots;
|
||||
};
|
||||
|
||||
export const flattenCategoriesForSelect = (
|
||||
nodes: CategoryNode[],
|
||||
level = 0,
|
||||
parentPath = ""
|
||||
): FlatCategory[] => {
|
||||
let result: FlatCategory[] = [];
|
||||
const sortedNodes = [...nodes].sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
for (const node of sortedNodes) {
|
||||
const currentPath = parentPath ? `${parentPath} > ${node.name}` : node.name;
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
|
||||
result.push({
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
level: level,
|
||||
parentId: node.parentId || null,
|
||||
path: currentPath,
|
||||
hasChildren: hasChildren,
|
||||
isSelectable: !hasChildren
|
||||
});
|
||||
|
||||
if (hasChildren) {
|
||||
const childrenFlat = flattenCategoriesForSelect(node.children, level + 1, currentPath);
|
||||
result = [...result, ...childrenFlat];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const processCategories = (rawCategories: Category[]): FlatCategory[] => {
|
||||
const tree = buildTree(rawCategories);
|
||||
return flattenCategoriesForSelect(tree);
|
||||
};
|
||||
Reference in New Issue
Block a user