void;
+ onAdd: (productId: number) => void;
+ existingIds: number[];
+}
+
+export default function ShortcutAddModal({ catalog, onClose, onAdd, existingIds }: Props) {
+ const [searchTerm, setSearchTerm] = useState('');
+
+ // Filtrar productos que no estén ya anclados
+ const filtered = catalog.filter(p =>
+ !existingIds.includes(p.id) &&
+ p.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const getProductTypeLabel = (typeCode?: string) => {
+ switch (typeCode) {
+ case 'BUNDLE': return 'Combo / Paquete';
+ case 'CLASSIFIED_AD': return 'Aviso Clasificado';
+ case 'PHYSICAL': return 'Producto Físico';
+ case 'SERVICE': return 'Servicio';
+ case 'GRAPHIC': return 'Publicidad Gráfica';
+ case 'RADIO': return 'Publicidad Radial';
+ default: return 'Producto';
+ }
+ };
+
+ return (
+
+
+
+
+
Anclar Producto
+
Añadir a accesos rápidos
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ {filtered.length === 0 ? (
+
+
No se encontraron productos disponibles
+
+ ) : (
+ filtered.map(p => (
+
+ ))
+ )}
+
+
+
+ Selecciona un producto para anclarlo a tu grilla
+
+
+
+ );
+}
diff --git a/frontend/counter-panel/src/pages/UniversalPosPage.tsx b/frontend/counter-panel/src/pages/UniversalPosPage.tsx
index 19330f7..facfc77 100644
--- a/frontend/counter-panel/src/pages/UniversalPosPage.tsx
+++ b/frontend/counter-panel/src/pages/UniversalPosPage.tsx
@@ -3,7 +3,7 @@ import { useCartStore } from '../store/cartStore';
import { productService } from '../services/productService';
import type { Product } from '../types/Product';
import ProductSearch from '../components/POS/ProductSearch';
-import { Trash2, ShoppingCart, CreditCard, User, Box, Layers } from 'lucide-react';
+import { Trash2, ShoppingCart, CreditCard, User, Box, Layers, PlusCircle } from 'lucide-react';
import { useToast } from '../context/use-toast';
import PaymentModal, { type Payment } from '../components/PaymentModal';
import { orderService } from '../services/orderService';
@@ -12,13 +12,35 @@ import AdEditorModal from '../components/POS/AdEditorModal';
import BundleConfiguratorModal, { type ComponentConfig } from '../components/POS/BundleConfiguratorModal';
import ClientCreateModal from '../components/POS/ClientCreateModal';
import ClientSearchModal from '../components/POS/ClientSearchModal';
+import ShortcutAddModal from '../components/POS/ShortcutAddModal';
+import { DraggableShortcutCard } from '../components/POS/DraggableShortcutCard';
import { AnimatePresence } from 'framer-motion';
+// DND Kit
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ type DragEndEvent
+} from '@dnd-kit/core';
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ rectSortingStrategy,
+} from '@dnd-kit/sortable';
+
export default function UniversalPosPage() {
const { showToast } = useToast();
const { items, addItem, removeItem, clearCart, getTotal, clientId, clientName, setClient, sellerId, setSeller } = useCartStore();
const [catalog, setCatalog] = useState
([]);
+ const [shortcuts, setShortcuts] = useState([]);
+ const [loadingShortcuts, setLoadingShortcuts] = useState(true);
+ const [showShortcutAdd, setShowShortcutAdd] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [showPayment, setShowPayment] = useState(false);
@@ -33,8 +55,31 @@ export default function UniversalPosPage() {
// Estado de carga para agregar combos (puede tardar un poco en traer los hijos)
const [addingProduct, setAddingProduct] = useState(false);
+ const fetchShortcuts = async () => {
+ setLoadingShortcuts(true);
+ try {
+ const data = await productService.getShortcuts();
+ setShortcuts(data || []);
+ } catch (e) {
+ console.error(e);
+ setShortcuts([]);
+ } finally {
+ setLoadingShortcuts(false);
+ }
+ };
+
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: { distance: 8 }, // Evita disparar drag al simplemente hacer click
+ }),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ })
+ );
+
useEffect(() => {
productService.getAll().then(setCatalog).catch(console.error);
+ fetchShortcuts();
const userStr = localStorage.getItem('user');
if (userStr) {
try {
@@ -52,11 +97,23 @@ export default function UniversalPosPage() {
e.preventDefault();
handleCheckout();
}
- // F7: Cambiar Cliente (Antes F9)
+ // F7: Cambiar Cliente
if (e.key === 'F7') {
e.preventDefault();
handleChangeClient();
}
+ // F3: Buscar Producto (Buscador Global)
+ if (e.key === 'F3') {
+ e.preventDefault();
+ document.getElementById('pos-search-input')?.focus();
+ }
+ // F6: Accesos Rápidos
+ if (e.key === 'F6') {
+ e.preventDefault();
+ // Foco en el primer botón de los accesos
+ const firstShortcut = document.querySelector('.shortcut-card button');
+ (firstShortcut as HTMLElement)?.focus();
+ }
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
@@ -122,6 +179,49 @@ export default function UniversalPosPage() {
}
};
+ const handleRemoveShortcut = async (productId: number, e: React.MouseEvent) => {
+ e.stopPropagation(); // Evitar disparar la selección de producto
+ try {
+ await productService.removeShortcut(productId);
+ showToast('Acceso rápido quitado', 'success');
+ fetchShortcuts();
+ } catch (error) {
+ showToast('Error al quitar acceso rápido', 'error');
+ }
+ };
+
+ const handleAddShortcut = async (productId: number) => {
+ try {
+ await productService.addShortcut(productId);
+ showToast('Acceso rápido agregado', 'success');
+ fetchShortcuts();
+ setShowShortcutAdd(false);
+ } catch (error) {
+ showToast('Error al agregar acceso rápido', 'error');
+ }
+ };
+
+ const handleDragEnd = async (event: DragEndEvent) => {
+ const { active, over } = event;
+ if (over && active.id !== over.id) {
+ setShortcuts((items) => {
+ const oldIndex = items.findIndex(i => i.productId === active.id);
+ const newIndex = items.findIndex(i => i.productId === over.id);
+ const newOrder = arrayMove(items, oldIndex, newIndex);
+
+ // Persistir en backend
+ productService.reorderShortcuts(newOrder.map(s => s.productId))
+ .catch(e => {
+ console.error("Error persistiendo orden", e);
+ showToast("No se pudo guardar el orden", "error");
+ fetchShortcuts(); // Rollback local
+ });
+
+ return newOrder;
+ });
+ }
+ };
+
const handleCheckout = () => {
if (items.length === 0) return showToast("El carrito está vacío", "error");
if (!clientId) setClient(1005, "Consumidor Final");
@@ -212,29 +312,55 @@ export default function UniversalPosPage() {