dmolinari/SIG-CM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Cambios Varios

Browse Source
This commit is contained in:
dmolinari
2025-12-23 15:12:57 -03:00
parent 32663e6324
commit 8bc1308bc5
58 changed files with 4080 additions and 663 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/counter-panel/src/pages/CashRegisterPage.tsx
View File

@@ -1,38 +1,126 @@
import { useState, useEffect } from 'react';
import { cashRegisterService } from '../services/cashRegisterService';
import { Printer, Download, Clock, CheckCircle, RefreshCw } from 'lucide-react';
export default function CashRegisterPage() {
const [data, setData] = useState<any>(null);
const [loading, setLoading] = useState(true);
const loadData = async () => {
setLoading(true);
try {
const result = await cashRegisterService.getDailyStatus();
setData(result);
} catch (e) {
console.error(e);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadData();
}, []);
const handleCerrarCaja = async () => {
if (!confirm("¿Desea finalizar el turno y descargar el comprobante de cierre?")) return;
try {
await cashRegisterService.downloadClosurePdf();
alert("Cierre generado con éxito. Entregue el reporte junto con el efectivo.");
} catch (e) {
alert("Error al generar el PDF");
}
};
if (loading && !data) return <div className="p-10 text-center text-gray-500">Sincronizando caja...</div>;
return (
<div className="p-6 w-full">
<h2 className="text-2xl font-bold text-slate-800 mb-6">Caja Diaria</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="bg-white p-6 rounded shadow border-l-4 border-green-500">
<div className="text-gray-500 text-sm font-bold uppercase">Total Efectivo</div>
<div className="text-3xl font-mono mt-2">$ 15,400.00</div>
<div className="p-8 w-full flex flex-col gap-6 bg-gray-100 h-full overflow-y-auto">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-black text-slate-800 tracking-tight">MI CAJA DIARIA</h2>
<p className="text-gray-500 text-sm flex items-center gap-1">
<Clock size={14} /> Turno actual: {new Date().toLocaleDateString()}
</p>
</div>
<div className="bg-white p-6 rounded shadow border-l-4 border-blue-500">
<div className="text-gray-500 text-sm font-bold uppercase">Avisos Cobrados</div>
<div className="text-3xl font-mono mt-2">12</div>
<div className="flex gap-3">
<button onClick={loadData} className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
<RefreshCw size={20} className={loading ? 'animate-spin' : ''} />
</button>
<button
onClick={handleCerrarCaja}
className="bg-gray-900 text-white px-6 py-2 rounded-lg font-bold flex items-center gap-2 hover:bg-black transition-all shadow-lg active:scale-95"
>
<Printer size={20} /> FINALIZAR Y CERRAR (F4)
</button>
</div>
</div>
<div className="bg-white rounded shadow overflow-hidden">
<table className="w-full text-left text-sm">
<thead className="bg-gray-50 border-b">
<tr>
<th className="p-3">Hora</th>
<th className="p-3">Concepto</th>
<th className="p-3">Usuario</th>
<th className="p-3 text-right">Monto</th>
</tr>
</thead>
<tbody>
<tr className="border-b">
<td className="p-3 font-mono">09:15</td>
<td className="p-3">Aviso Automotores x3 días</td>
<td className="p-3">cajero1</td>
<td className="p-3 text-right font-mono">$ 4,500.00</td>
</tr>
{/* Más filas mock */}
</tbody>
</table>
{/* KPIs DE CAJA */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-white p-8 rounded-2xl shadow-sm border-b-4 border-green-500 flex justify-between items-center">
<div>
<div className="text-gray-400 text-xs font-bold uppercase tracking-widest">Efectivo a Rendir</div>
<div className="text-4xl font-black text-slate-800 mt-1">$ {data?.totalRevenue?.toLocaleString('es-AR', { minimumFractionDigits: 2 })}</div>
</div>
<div className="p-4 bg-green-50 rounded-full text-green-600">
<Download size={32} />
</div>
</div>
<div className="bg-white p-8 rounded-2xl shadow-sm border-b-4 border-blue-500 flex justify-between items-center">
<div>
<div className="text-gray-400 text-xs font-bold uppercase tracking-widest">Avisos Procesados</div>
<div className="text-4xl font-black text-slate-800 mt-1">{data?.totalAds} <span className="text-lg text-gray-300">Clasificados</span></div>
</div>
<div className="p-4 bg-blue-50 rounded-full text-blue-600">
<CheckCircle size={32} />
</div>
</div>
</div>
{/* TABLA DE MOVIMIENTOS */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden flex-1 flex flex-col">
<div className="p-4 bg-gray-50 border-b font-bold text-slate-600 text-sm uppercase tracking-wider">
Detalle de transacciones del turno
</div>
<div className="overflow-y-auto flex-1">
<table className="w-full text-left border-collapse">
<thead className="bg-gray-50 text-gray-400 text-[10px] uppercase font-bold sticky top-0 z-10">
<tr>
<th className="p-4 border-b">ID</th>
<th className="p-4 border-b">Hora</th>
<th className="p-4 border-b">Aviso / Título</th>
<th className="p-4 border-b">Rubro</th>
<th className="p-4 border-b text-right">Monto</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100 text-sm">
{data?.items.map((item: any) => (
<tr key={item.id} className="hover:bg-blue-50/50 transition-colors">
<td className="p-4 font-mono text-gray-400">#{item.id}</td>
<td className="p-4 text-gray-600">{new Date(item.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
<td className="p-4 font-bold text-slate-700">{item.title}</td>
<td className="p-4">
<span className="bg-gray-100 px-2 py-1 rounded text-[10px] font-bold text-gray-500 uppercase">{item.category}</span>
</td>
<td className="p-4 text-right font-black text-slate-900">$ {item.amount.toLocaleString()}</td>
</tr>
))}
{data?.items.length === 0 && (
<tr>
<td colSpan={5} className="p-20 text-center text-gray-400 italic">No se han registrado cobros en este turno todavía.</td>
</tr>
)}
</tbody>
</table>
</div>
{/* Footer de la tabla con el total */}
<div className="p-4 bg-slate-900 text-white flex justify-between items-center">
<span className="text-xs font-bold uppercase opacity-60">Total en Caja</span>
<span className="text-xl font-mono font-bold text-green-400">$ {data?.totalRevenue?.toLocaleString()}</span>
</div>
</div>
</div>
);

561
frontend/counter-panel/src/pages/FastEntryPage.tsx
View File

@@ -1,45 +1,37 @@
import { useState, useEffect, useRef } from 'react';
import api from '../services/api';
import { useDebounce } from '../hooks/useDebounce';
import { processCategories, type FlatCategory } from '../utils/categoryTreeUtils';
import {
Printer, Save, CheckSquare, Square, Tag,
Printer, Save,
AlignLeft, AlignCenter, AlignRight, AlignJustify,
Type
Type, Search, ChevronDown, Bold, Square as FrameIcon
} from 'lucide-react';
import clsx from 'clsx';
interface Category { id: number; name: string; }
// Interfaces
interface Operation { id: number; name: string; }
interface Client { id: number; name: string; dniOrCuit: string; }
interface PricingResult {
totalPrice: number;
baseCost: number;
extraCost: number;
surcharges: number;
discount: number;
wordCount: number;
specialCharCount: number;
details: string;
appliedPromotion: string;
totalPrice: number; baseCost: number; extraCost: number;
surcharges: number; discount: number; wordCount: number;
specialCharCount: number; details: string; appliedPromotion: string;
}
export default function FastEntryPage() {
const [categories, setCategories] = useState<Category[]>([]);
const [flatCategories, setFlatCategories] = useState<FlatCategory[]>([]);
const [operations, setOperations] = useState<Operation[]>([]);
const [categorySearch, setCategorySearch] = useState("");
const [isCatDropdownOpen, setIsCatDropdownOpen] = useState(false);
const catWrapperRef = useRef<HTMLDivElement>(null);
const [formData, setFormData] = useState({
categoryId: '',
operationId: '',
text: '',
days: 3,
clientName: '',
categoryId: '', operationId: '', text: '', days: 3, clientName: '', clientDni: '',
});
const [options, setOptions] = useState({
isBold: false,
isFrame: false,
fontSize: 'normal', // 'small', 'normal', 'large', 'extra'
alignment: 'left' // 'left', 'center', 'right', 'justify'
isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left'
});
const [pricing, setPricing] = useState<PricingResult>({
@@ -47,337 +39,386 @@ export default function FastEntryPage() {
wordCount: 0, specialCharCount: 0, details: '', appliedPromotion: ''
});
const [clientSuggestions, setClientSuggestions] = useState<Client[]>([]);
const [showSuggestions, setShowSuggestions] = useState(false);
const debouncedClientSearch = useDebounce(formData.clientName, 300);
const clientWrapperRef = useRef<HTMLDivElement>(null);
const textInputRef = useRef<HTMLTextAreaElement>(null);
const debouncedText = useDebounce(formData.text, 500);
const filteredCategories = flatCategories.filter(cat =>
cat.path.toLowerCase().includes(categorySearch.toLowerCase()) ||
cat.name.toLowerCase().includes(categorySearch.toLowerCase())
);
const selectedCategoryName = flatCategories.find(c => c.id === parseInt(formData.categoryId))?.name;
const printCourtesyTicket = (data: any, priceInfo: PricingResult) => {
const printWindow = window.open('', '_blank', 'width=300,height=600');
if (!printWindow) return;
const html = `
<html>
<body style="font-family: 'Courier New', monospace; width: 280px; padding: 10px; font-size: 12px;">
<div style="text-align: center; border-bottom: 1px dashed #000; padding-bottom: 10px; margin-bottom: 10px;">
<h2 style="margin: 0;">DIARIO EL DIA</h2>
<p>Comprobante de Recepción</p>
<p>${new Date().toLocaleString()}</p>
</div>
<div>
<b>CLIENTE:</b> ${data.clientName || 'Consumidor Final'}<br/>
<b>RUBRO:</b> ${selectedCategoryName}<br/>
<b>DÍAS:</b> ${data.days}<br/>
</div>
<div style="background: #f0f0f0; padding: 8px; margin: 10px 0; border: 1px solid #000;">
${data.text.toUpperCase()}
</div>
<div style="text-align: right; border-top: 1px dashed #000; padding-top: 5px;">
<b style="font-size: 16px;">TOTAL: $${priceInfo.totalPrice.toLocaleString()}</b>
</div>
</body>
</html>
`;
printWindow.document.write(html);
printWindow.document.close();
printWindow.focus();
setTimeout(() => { printWindow.print(); printWindow.close(); }, 250);
};
useEffect(() => {
const fetchData = async () => {
try {
const [catRes, opRes] = await Promise.all([
api.get('/categories'),
api.get('/operations')
]);
setCategories(catRes.data);
const [catRes, opRes] = await Promise.all([api.get('/categories'), api.get('/operations')]);
setFlatCategories(processCategories(catRes.data));
setOperations(opRes.data);
} catch (error) {
console.error("Error cargando datos base", error);
}
} catch (error) { console.error(error); }
};
fetchData();
}, []);
useEffect(() => {
if (!formData.categoryId || !formData.text) {
setPricing(prev => ({ ...prev, totalPrice: 0, details: '' }));
return;
}
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'F10') {
e.preventDefault();
handleSubmit();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [formData, pricing, options]);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (catWrapperRef.current && !catWrapperRef.current.contains(event.target as Node)) setIsCatDropdownOpen(false);
if (clientWrapperRef.current && !clientWrapperRef.current.contains(event.target as Node)) setShowSuggestions(false);
}
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
useEffect(() => {
if (!formData.categoryId) return;
const calculatePrice = async () => {
try {
const res = await api.post('/pricing/calculate', {
categoryId: parseInt(formData.categoryId),
text: formData.text,
text: debouncedText || "",
days: formData.days,
isBold: options.isBold,
isFrame: options.isFrame,
startDate: new Date().toISOString()
});
setPricing(res.data);
} catch (error) {
console.error("Error calculando precio", error);
}
} catch (error) { console.error(error); }
};
calculatePrice();
}, [debouncedText, formData.categoryId, formData.days, options]);
useEffect(() => {
if (debouncedClientSearch.length > 2 && showSuggestions) {
api.get(`/clients/search?q=${debouncedClientSearch}`)
.then(res => setClientSuggestions(res.data))
.catch(() => setClientSuggestions([]));
}
}, [debouncedClientSearch, showSuggestions]);
const handleSubmit = async () => {
if (!formData.categoryId || !formData.operationId || !formData.text) {
alert("Faltan datos obligatorios.");
alert("⚠️ Error: Complete Rubro, Operación y Texto.");
return;
}
if (!confirm(`¿Confirmar cobro de $${pricing.totalPrice.toLocaleString()}?`)) return;
try {
const startDate = new Date();
startDate.setDate(startDate.getDate() + 1);
const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
await api.post('/listings', {
categoryId: parseInt(formData.categoryId),
operationId: parseInt(formData.operationId),
title: formData.text.substring(0, 40) + (formData.text.length > 40 ? '...' : ''),
title: formData.text.substring(0, 40) + '...',
description: formData.text,
price: 0,
currency: 'ARS',
price: 0, adFee: pricing.totalPrice,
status: 'Published',
userId: null,
printText: formData.text,
printStartDate: startDate.toISOString(),
printStartDate: tomorrow.toISOString(),
printDaysCount: formData.days,
isBold: options.isBold,
isFrame: options.isFrame,
printFontSize: options.fontSize,
printAlignment: options.alignment
isBold: options.isBold, isFrame: options.isFrame,
printFontSize: options.fontSize, printAlignment: options.alignment,
clientName: formData.clientName, clientDni: formData.clientDni
});
alert('✅ Aviso guardado y ticket generado.');
setFormData({ ...formData, text: '', clientName: '' });
printCourtesyTicket(formData, pricing);
setFormData({ ...formData, text: '', clientName: '', clientDni: '' });
setOptions({ isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left' });
textInputRef.current?.focus();
} catch (err) {
console.error(err);
alert('❌ Error al procesar el cobro.');
}
alert('✅ Aviso procesado correctamente.');
} catch (err) { alert('❌ Error al procesar el cobro.'); }
};
// Helper para clases de Tailwind según estado
const getFontSizeClass = (size: string) => {
switch (size) {
case 'small': return 'text-xs';
case 'large': return 'text-lg';
case 'extra': return 'text-xl';
default: return 'text-sm';
}
};
const getAlignClass = (align: string) => {
switch (align) {
case 'center': return 'text-center';
case 'right': return 'text-right';
case 'justify': return 'text-justify';
default: return 'text-left';
}
const handleSelectClient = (client: Client) => {
setFormData(prev => ({ ...prev, clientName: client.name, clientDni: client.dniOrCuit }));
setShowSuggestions(false);
};
return (
<div className="w-full h-full p-4 flex gap-4 bg-gray-100">
<div className="w-full h-full p-4 flex gap-4 bg-gray-100 overflow-hidden max-h-screen">
{/* --- COLUMNA IZQUIERDA: INPUTS --- */}
<div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex flex-col">
<div className="flex justify-between items-center mb-6 border-b pb-2">
<h2 className="text-xl font-bold text-slate-800">Nueva Publicación (F2)</h2>
<span className="text-xs font-mono text-slate-400">ID TERMINAL: T-01</span>
{/* PANEL IZQUIERDO: FORMULARIO */}
<div className="flex-[7] bg-white rounded-2xl shadow-sm border border-gray-200 p-6 flex flex-col min-h-0">
<div className="flex justify-between items-center mb-6 border-b border-gray-100 pb-3">
<div>
<h2 className="text-xl font-black text-slate-800 tracking-tight uppercase">Nueva Publicación</h2>
<p className="text-[10px] text-slate-400 font-mono">ID TERMINAL: T-01 | CAJA: 01</p>
</div>
<Printer size={24} className="text-slate-300" />
</div>
<form className="flex-1 flex flex-col gap-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-bold text-slate-700 mb-1">Rubro</label>
<select
className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 bg-gray-50 outline-none"
value={formData.categoryId}
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
autoFocus
<div className="flex flex-col gap-6 flex-1 min-h-0">
<div className="grid grid-cols-2 gap-6">
<div className="relative" ref={catWrapperRef}>
<label className="block text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Rubro</label>
<div
className={clsx(
"w-full p-3 border rounded-xl bg-gray-50 flex justify-between items-center cursor-pointer transition-all",
isCatDropdownOpen ? "border-blue-500 ring-4 ring-blue-500/10" : "border-gray-200 hover:border-gray-300"
)}
onClick={() => setIsCatDropdownOpen(!isCatDropdownOpen)}
>
<option value="">-- Seleccionar --</option>
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
</select>
<span className={clsx("font-bold text-sm", !formData.categoryId && "text-gray-400")}>
{selectedCategoryName || "-- Seleccionar Rubro --"}
</span>
<ChevronDown size={18} className={clsx("text-gray-400 transition-transform", isCatDropdownOpen && "rotate-180")} />
</div>
{isCatDropdownOpen && (
<div className="absolute top-full left-0 right-0 bg-white border border-gray-200 shadow-2xl rounded-xl mt-2 z-[100] flex flex-col max-h-[300px] overflow-hidden">
<div className="p-3 bg-gray-50 border-b flex items-center gap-2">
<Search size={16} className="text-gray-400" />
<input autoFocus type="text" placeholder="Filtrar rubros..." className="bg-transparent w-full outline-none text-sm font-medium"
value={categorySearch} onChange={(e) => setCategorySearch(e.target.value)} />
</div>
<div className="overflow-y-auto flex-1 py-2">
{filteredCategories.map(cat => (
<div key={cat.id} className={clsx("px-4 py-2 text-sm cursor-pointer border-l-4 transition-all",
!cat.isSelectable ? "text-gray-400 font-bold bg-gray-50/50 italic pointer-events-none" : "hover:bg-blue-50 border-transparent hover:border-blue-600",
parseInt(formData.categoryId) === cat.id && "bg-blue-100 border-blue-600 font-bold"
)}
style={{ paddingLeft: `${(cat.level * 16) + 16}px` }}
onClick={() => { setFormData({ ...formData, categoryId: cat.id.toString() }); setIsCatDropdownOpen(false); }}
>
{cat.name}
</div>
))}
</div>
</div>
)}
</div>
<div>
<label className="block text-sm font-bold text-slate-700 mb-1">Operación</label>
<select
className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 bg-gray-50 outline-none"
value={formData.operationId}
onChange={e => setFormData({ ...formData, operationId: e.target.value })}
>
<option value="">-- Seleccionar --</option>
<label className="block text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Operación</label>
<select className="w-full p-3 border border-gray-200 rounded-xl bg-gray-50 outline-none focus:border-blue-500 font-bold text-sm"
value={formData.operationId} onChange={e => setFormData({ ...formData, operationId: e.target.value })}>
<option value="">-- Operación --</option>
{operations.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
</select>
</div>
</div>
<div className="flex-1 flex flex-col">
<label className="block text-sm font-bold text-slate-700 mb-1">Texto del Aviso</label>
{/* --- Textarea limpio sin estilos condicionales --- */}
<div className="flex flex-col flex-1 min-h-0">
<label className="block text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Cuerpo del Aviso (Texto para Imprenta)</label>
<textarea
ref={textInputRef}
className="flex-1 w-full p-4 border border-gray-300 rounded resize-none focus:ring-2 focus:ring-blue-500 outline-none font-mono text-lg text-slate-700 leading-relaxed"
className="flex-1 w-full p-5 border border-gray-300 rounded-2xl resize-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 outline-none font-mono text-xl text-slate-700 leading-relaxed shadow-inner bg-gray-50/30"
placeholder="ESCRIBA EL TEXTO AQUÍ..."
value={formData.text}
onChange={e => setFormData({ ...formData, text: e.target.value })}
></textarea>
<div className="flex justify-between items-center mt-2 text-sm text-slate-500">
<div className="flex gap-2">
<span>Palabras: <b>{pricing.wordCount}</b></span>
{pricing.specialCharCount > 0 && <span className="text-orange-600">Signos (+$$): <b>{pricing.specialCharCount}</b></span>}
<div className="flex justify-between items-center mt-3 bg-slate-50 p-2 rounded-lg border border-slate-100">
<div className="flex gap-4 text-xs font-bold uppercase tracking-widest text-slate-400">
<span className={pricing.wordCount > 0 ? "text-blue-600" : ""}>Palabras: {pricing.wordCount}</span>
{pricing.specialCharCount > 0 && <span className="text-orange-600">Signos: {pricing.specialCharCount}</span>}
</div>
<span className="text-xs uppercase">Escribir en Mayúsculas recomendado</span>
<span className="text-[10px] text-slate-300 font-bold italic uppercase">Uso de mayúsculas recomendado</span>
</div>
</div>
<div className="grid grid-cols-3 gap-4 bg-gray-50 p-4 rounded border border-gray-200">
<div>
<label className="block text-xs font-bold text-slate-500 uppercase">Días</label>
<input
type="number"
className="w-full p-2 border rounded font-mono text-center font-bold"
value={formData.days}
onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })}
min={1}
/>
<div className="grid grid-cols-4 gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-100">
<div className="col-span-1">
<label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Días</label>
<input type="number" className="w-full p-2.5 border border-gray-200 rounded-lg font-black text-center text-blue-600 outline-none"
value={formData.days} onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })} />
</div>
<div className="col-span-2">
<label className="block text-xs font-bold text-slate-500 uppercase">Cliente / Razón Social</label>
<input
type="text"
className="w-full p-2 border rounded"
placeholder="Consumidor Final"
value={formData.clientName}
onChange={e => setFormData({ ...formData, clientName: e.target.value })}
/>
<div className="col-span-2 relative" ref={clientWrapperRef}>
<label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Cliente / Razón Social</label>
<div className="relative">
<Search className="absolute left-3 top-2.5 text-gray-300" size={16} />
<input type="text" className="w-full pl-9 p-2.5 border border-gray-200 rounded-lg outline-none focus:border-blue-500 font-bold text-sm"
placeholder="Buscar o crear..." value={formData.clientName}
onFocus={() => setShowSuggestions(true)}
onChange={e => { setFormData({ ...formData, clientName: e.target.value }); setShowSuggestions(true); }}
/>
</div>
{showSuggestions && clientSuggestions.length > 0 && (
<div className="absolute bottom-full mb-2 left-0 right-0 bg-white border border-gray-200 shadow-2xl rounded-xl overflow-hidden z-[110]">
{clientSuggestions.map(client => (
<div key={client.id} className="p-3 hover:bg-blue-50 cursor-pointer border-b border-gray-50 flex justify-between items-center transition-colors"
onClick={() => handleSelectClient(client)}>
<div>
<div className="font-bold text-slate-800 text-xs">{client.name}</div>
<div className="text-[10px] text-slate-400 font-mono">{client.dniOrCuit}</div>
</div>
</div>
))}
</div>
)}
</div>
<div className="col-span-1">
<label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">DNI / CUIT</label>
<input type="text" className="w-full p-2.5 border border-gray-200 rounded-lg font-mono text-center font-bold text-sm"
placeholder="Documento" value={formData.clientDni} onChange={e => setFormData({ ...formData, clientDni: e.target.value })} />
</div>
</div>
</form>
</div>
</div>
{/* --- COLUMNA DERECHA: TOTALES Y OPCIONES --- */}
<div className="w-96 flex flex-col gap-4">
{/* PANEL DERECHO: TOTALES Y VISTA PREVIA */}
<div className="flex-[3] flex flex-col gap-4 min-h-0 overflow-hidden">
{/* Panel de Totales */}
<div className="bg-slate-900 text-white rounded-xl p-6 shadow-xl relative overflow-hidden">
<div className="relative z-10">
<div className="text-xs text-slate-400 uppercase tracking-widest mb-1 font-semibold">Total a Cobrar</div>
<div className="text-5xl font-mono font-bold text-green-400 mb-4">
${pricing.totalPrice.toLocaleString()}
{/* TOTALES (FIJO ARRIBA) */}
<div className="bg-slate-900 text-white rounded-3xl p-6 shadow-xl border-b-4 border-blue-600 flex-shrink-0">
<div className="text-[10px] text-blue-400 uppercase tracking-widest mb-1 font-black">Total a Cobrar</div>
<div className="text-5xl font-mono font-black text-green-400 flex items-start gap-1">
<span className="text-xl mt-1.5 opacity-50">$</span>
{pricing.totalPrice.toLocaleString()}
</div>
<div className="mt-4 pt-4 border-t border-slate-800 space-y-2 text-[11px] font-bold uppercase tracking-tighter">
<div className="flex justify-between text-slate-400 italic">
<span>Tarifa Base</span>
<span className="text-white">${pricing.baseCost.toLocaleString()}</span>
</div>
<div className="space-y-2 text-sm border-t border-slate-700 pt-3">
<div className="flex justify-between text-slate-300">
<span>Base ({formData.days} días)</span>
<span>${pricing.baseCost.toLocaleString()}</span>
{pricing.extraCost > 0 && (
<div className="flex justify-between text-orange-400">
<span>Recargos por texto</span>
<span>+${pricing.extraCost.toLocaleString()}</span>
</div>
{pricing.extraCost > 0 && (
<div className="flex justify-between text-yellow-300">
<span>Excedentes</span>
<span>+${pricing.extraCost.toLocaleString()}</span>
</div>
)}
{pricing.surcharges > 0 && (
<div className="flex justify-between text-blue-300">
<span>Adicionales (Estilo)</span>
<span>+${pricing.surcharges.toLocaleString()}</span>
</div>
)}
{pricing.discount > 0 && (
<div className="flex justify-between text-green-400 font-bold bg-green-900/30 p-1 rounded px-2 -mx-2">
<span className="flex items-center gap-1"><Tag size={12} /> Descuento</span>
)}
{pricing.surcharges > 0 && (
<div className="flex justify-between text-blue-400">
<span>Estilos visuales</span>
<span>+${pricing.surcharges.toLocaleString()}</span>
</div>
)}
{pricing.discount > 0 && (
<div className="mt-2 p-2 bg-green-500/10 rounded-lg text-green-400 flex flex-col border border-green-500/20 animate-pulse">
<div className="flex justify-between">
<span>Descuento Aplicado</span>
<span>-${pricing.discount.toLocaleString()}</span>
</div>
)}
</div>
{pricing.appliedPromotion && (
<div className="mt-3 text-xs text-center bg-green-600 text-white py-1 rounded">
¡{pricing.appliedPromotion}!
<span className="text-[9px] opacity-70 italic">{pricing.appliedPromotion}</span>
</div>
)}
</div>
</div>
{/* --- NUEVA BARRA DE HERRAMIENTAS (TOOLBAR) --- */}
<div className="bg-white rounded-lg border border-gray-200 p-2 flex justify-between items-center shadow-sm">
{/* CONTENEDOR CENTRAL SCROLLABLE (Toolbar + Preview) */}
<div className="flex-1 overflow-y-auto min-h-0 flex flex-col gap-4 pr-1 custom-scrollbar">
{/* Alineación */}
<div className="flex bg-gray-100 rounded p-1 gap-1">
<button onClick={() => setOptions({ ...options, alignment: 'left' })}
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'left' && "bg-white shadow text-blue-600")}>
<AlignLeft size={18} />
</button>
<button onClick={() => setOptions({ ...options, alignment: 'center' })}
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'center' && "bg-white shadow text-blue-600")}>
<AlignCenter size={18} />
</button>
<button onClick={() => setOptions({ ...options, alignment: 'right' })}
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'right' && "bg-white shadow text-blue-600")}>
<AlignRight size={18} />
</button>
<button onClick={() => setOptions({ ...options, alignment: 'justify' })}
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'justify' && "bg-white shadow text-blue-600")}>
<AlignJustify size={18} />
</button>
{/* TOOLBAR ESTILOS */}
<div className="bg-white rounded-2xl border border-gray-200 p-2 flex flex-col gap-2 shadow-sm flex-shrink-0">
<div className="flex justify-between items-center px-1">
<div className="flex bg-gray-100 rounded-lg p-1 gap-1">
{['left', 'center', 'right', 'justify'].map(align => (
<button key={align} onClick={() => setOptions({ ...options, alignment: align })}
className={clsx("p-1.5 rounded-md hover:bg-white transition-all shadow-sm", options.alignment === align && "bg-white text-blue-600")}>
{align === 'left' && <AlignLeft size={16} />}
{align === 'center' && <AlignCenter size={16} />}
{align === 'right' && <AlignRight size={16} />}
{align === 'justify' && <AlignJustify size={16} />}
</button>
))}
</div>
<div className="flex bg-gray-100 rounded-lg p-1 gap-1">
{['small', 'normal', 'large'].map(size => (
<button key={size} onClick={() => setOptions({ ...options, fontSize: size })}
className={clsx("p-1.5 rounded-md hover:bg-white transition-all flex items-end", options.fontSize === size && "bg-white shadow-sm text-blue-600")}>
<Type size={size === 'small' ? 12 : size === 'normal' ? 16 : 20} />
</button>
))}
</div>
</div>
<div className="grid grid-cols-2 gap-2 mt-1">
<button
type="button"
onClick={() => setOptions({ ...options, isBold: !options.isBold })}
className={clsx(
"p-2 rounded-lg border text-[10px] font-black transition-all flex items-center justify-center gap-2",
options.isBold ? "bg-blue-600 border-blue-600 text-white shadow-inner" : "bg-gray-50 border-gray-200 text-gray-400 hover:bg-gray-100"
)}
>
<Bold size={14} /> NEGRITA
</button>
<button
type="button"
onClick={() => setOptions({ ...options, isFrame: !options.isFrame })}
className={clsx(
"p-2 rounded-lg border text-[10px] font-black transition-all flex items-center justify-center gap-2",
options.isFrame ? "bg-slate-800 border-slate-800 text-white shadow-inner" : "bg-gray-50 border-gray-200 text-gray-400 hover:bg-gray-100"
)}
>
<FrameIcon size={14} /> RECUADRO
</button>
</div>
</div>
<div className="w-px h-6 bg-gray-300 mx-1"></div>
{/* Tamaño de Fuente */}
<div className="flex bg-gray-100 rounded p-1 gap-1">
<button onClick={() => setOptions({ ...options, fontSize: 'small' })} title="Pequeño"
className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'small' && "bg-white shadow text-blue-600")}>
<Type size={14} />
</button>
<button onClick={() => setOptions({ ...options, fontSize: 'normal' })} title="Normal"
className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'normal' && "bg-white shadow text-blue-600")}>
<Type size={18} />
</button>
<button onClick={() => setOptions({ ...options, fontSize: 'large' })} title="Grande"
className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'large' && "bg-white shadow text-blue-600")}>
<Type size={22} />
</button>
</div>
</div>
{/* Vista Previa Papel */}
<div className="flex-1 bg-[#fffdf0] border border-yellow-200 rounded-lg p-4 shadow-sm overflow-y-auto flex flex-col min-h-[150px]">
<h3 className="text-[10px] font-bold text-yellow-800 uppercase mb-2 flex items-center gap-1 opacity-70">
<Printer size={12} /> Vista Previa Impresión (Papel)
</h3>
<div className={clsx(
"font-mono leading-tight whitespace-pre-wrap break-words p-2 border-2 transition-all",
// Aplicar Clases Dinámicas
options.isBold ? "font-bold" : "font-normal",
options.isFrame ? "border-slate-900" : "border-transparent",
getFontSizeClass(options.fontSize),
getAlignClass(options.alignment)
)}>
{formData.text || "(Texto vacío)"}
{/* VISTA PREVIA (DINÁMICA AL ALTO DEL TEXTO) */}
<div className="bg-[#fffef5] border border-yellow-200 rounded-2xl p-5 shadow-sm min-h-[180px] h-auto flex flex-col relative group flex-shrink-0">
<div className="absolute top-0 left-0 w-full h-1 bg-yellow-400 opacity-20"></div>
<h3 className="text-[9px] font-black text-yellow-700 uppercase mb-4 flex items-center gap-1.5 opacity-40 tracking-widest">
<Printer size={12} /> Previsualización Real
</h3>
<div className="p-2">
<div className={clsx(
"w-full leading-tight whitespace-pre-wrap break-words transition-all duration-300",
options.isBold ? "font-bold text-gray-900" : "font-medium text-gray-700",
options.isFrame ? "border-2 border-gray-900 p-4 bg-white shadow-md" : "border-none",
options.fontSize === 'small' ? 'text-xs' : options.fontSize === 'large' ? 'text-lg' : 'text-sm',
options.alignment === 'center' ? 'text-center' : options.alignment === 'right' ? 'text-right' : options.alignment === 'justify' ? 'text-justify' : 'text-left'
)}>
{formData.text || "(Aviso vacío)"}
</div>
</div>
</div>
</div>
{/* Botones Estilo Rápido (Negrita/Recuadro) */}
<div className="grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setOptions({ ...options, isBold: !options.isBold })}
className={clsx(
"px-2 py-3 rounded-lg border flex items-center justify-center gap-2 transition-all text-sm",
options.isBold
? "border-blue-600 bg-blue-50 text-blue-700 font-bold"
: "border-gray-200 bg-white text-gray-500 hover:border-gray-300"
)}
>
{options.isBold ? <CheckSquare size={18} /> : <Square size={18} />}
Negrita
</button>
<button
type="button"
onClick={() => setOptions({ ...options, isFrame: !options.isFrame })}
className={clsx(
"px-2 py-3 rounded-lg border flex items-center justify-center gap-2 transition-all text-sm",
options.isFrame
? "border-slate-900 bg-slate-100 text-slate-900 font-bold"
: "border-gray-200 bg-white text-gray-500 hover:border-gray-300"
)}
>
{options.isFrame ? <CheckSquare size={18} /> : <Square size={18} />}
Recuadro
</button>
</div>
{/* ACCIÓN PRINCIPAL (FIJO ABAJO) */}
<button
onClick={handleSubmit}
className="bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-lg font-bold shadow-lg shadow-blue-200 flex items-center justify-center gap-2 transition-transform active:scale-95 text-lg mt-2"
className="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-black shadow-2xl flex flex-col items-center justify-center gap-0.5 transition-all active:scale-95 group relative overflow-hidden flex-shrink-0"
>
<Save size={24} />
COBRAR (F10)
<div className="absolute inset-0 bg-white/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
<div className="flex items-center gap-3 text-xl relative z-10">
<Save size={24} /> COBRAR E IMPRIMIR
</div>
<span className="text-[9px] opacity-60 tracking-[0.3em] relative z-10 font-mono">SHORTCUT: F10</span>
</button>
</div>
</div>

44
frontend/counter-panel/src/pages/LoginPage.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { useState } from 'react';
import api from '../services/api';
import { useNavigate } from 'react-router-dom';
import { Monitor } from 'lucide-react';
export default function LoginPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
try {
const res = await api.post('/auth/login', { username, password });
localStorage.setItem('token', res.data.token);
localStorage.setItem('user', username); // Guardar usuario para mostrar en header
navigate('/');
} catch (e) {
alert('Credenciales inválidas');
}
};
return (
<div className="h-screen bg-slate-900 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-2xl w-96">
<div className="flex justify-center mb-4 text-slate-800">
<Monitor size={48} />
</div>
<h2 className="text-2xl font-bold text-center mb-6 text-slate-800">Acceso Mostrador</h2>
<form onSubmit={handleLogin} className="space-y-4">
<div>
<label className="block text-sm font-bold mb-1">Usuario</label>
<input type="text" value={username} onChange={e => setUsername(e.target.value)} className="w-full border p-2 rounded" autoFocus />
</div>
<div>
<label className="block text-sm font-bold mb-1">Contraseña</label>
<input type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full border p-2 rounded" />
</div>
<button type="submit" className="w-full bg-blue-600 text-white py-2 rounded font-bold hover:bg-blue-700">INGRESAR</button>
</form>
</div>
</div>
);
}