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

Feat Varios 4

Browse Source
This commit is contained in:
dmolinari
2026-01-06 14:20:44 -03:00
parent 9fa21ebec3
commit c6496099bd
16 changed files with 613 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/counter-panel/src/components/CashClosingModal.tsx
View File

@@ -80,75 +80,78 @@ export default function CashClosingModal({ onClose, onComplete }: CashClosingMod
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
className="bg-white rounded-[2.5rem] shadow-2xl max-w-lg w-full overflow-hidden border border-white/20"
className="bg-white rounded-[2rem] shadow-2xl max-w-lg w-full overflow-hidden border border-white/20 flex flex-col max-h-[95vh]"
>
{/* Header */}
<div className="bg-slate-900 p-8 text-white relative">
<div className="bg-slate-900 px-8 py-6 text-white relative shrink-0">
<div className="flex justify-between items-center relative z-10">
<div>
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400">Finalización de Turno</span>
<h2 className="text-3xl font-black tracking-tight">Cierre de Caja</h2>
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 block mb-0.5">Control de Tesorería</span>
<h2 className="text-2xl font-black tracking-tight uppercase leading-none">Cierre de Caja</h2>
</div>
{!done && (
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors">
<X size={24} />
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors text-slate-400 hover:text-white">
<X size={20} />
</button>
)}
</div>
</div>
<div className="p-8">
<div className="p-6 md:p-8 overflow-y-auto custom-scrollbar flex-1">
<AnimatePresence mode="wait">
{!done ? (
<motion.div key="summary" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
<motion.div key="summary" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-5">
{/* Visualización de Totales del Sistema */}
<div className="space-y-3">
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Resumen de Valores en Caja</h4>
<div className="grid grid-cols-1 gap-2">
<SummaryRow label="Fondo de Apertura" value={summary.openingBalance} icon={<Banknote size={16} />} />
<SummaryRow label="Ventas Efectivo" value={summary.cashSales} icon={<Banknote size={16} />} isSale />
<SummaryRow label="Ventas Tarjetas" value={summary.cardSales} icon={<CreditCard size={16} />} isSale />
<SummaryRow label="Ventas Transferencia" value={summary.transferSales} icon={<ArrowRightLeft size={16} />} isSale />
<div className="grid grid-cols-2 gap-2">
<SummaryRow label="Apertura" value={summary.openingBalance} icon={<Banknote size={14} />} />
<SummaryRow label="Efectivo" value={summary.cashSales} icon={<Banknote size={14} />} isSale />
<SummaryRow label="Tarjetas" value={summary.cardSales} icon={<CreditCard size={14} />} isSale />
<SummaryRow label="Transferencia" value={summary.transferSales} icon={<ArrowRightLeft size={14} />} isSale />
</div>
</div>
{/* Total a Entregar */}
<div className="bg-slate-900 p-6 rounded-[2rem] flex justify-between items-center text-white shadow-xl">
<div>
<span className="text-[10px] font-black uppercase text-slate-500 block mb-1">Total Final a Entregar</span>
<span className="text-4xl font-mono font-black text-green-400">
<div className="bg-slate-900 p-5 rounded-3xl flex justify-between items-center text-white shadow-xl relative overflow-hidden group">
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-600/5 rounded-full -mr-16 -mt-16 blur-3xl"></div>
<div className="relative z-10">
<span className="text-[9px] font-black uppercase text-blue-400 block mb-0.5 tracking-widest">Total Final a Entregar</span>
<span className="text-3xl font-mono font-black text-emerald-400 leading-none">
$ {summary.totalExpected.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
</span>
</div>
<CheckCircle2 size={40} className="text-green-500 opacity-20" />
<CheckCircle2 size={32} className="text-emerald-500 opacity-20 relative z-10" />
</div>
{/* Notas opcionales */}
<div className="space-y-2">
<label className="text-[10px] font-black text-slate-400 uppercase ml-1">Notas u Observaciones</label>
<div className="space-y-1.5">
<label className="text-[10px] font-black text-slate-400 uppercase ml-1 tracking-widest">Notas u Observaciones</label>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
placeholder="Opcional: aclaraciones sobre el turno..."
className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl text-sm font-bold outline-none focus:border-blue-500 transition-all resize-none h-24"
className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl text-xs font-bold outline-none focus:border-blue-500 transition-all resize-none h-20"
/>
</div>
<div className="bg-amber-50 p-4 rounded-2xl border border-amber-100 flex gap-3">
<AlertCircle className="text-amber-500 shrink-0" size={18} />
<p className="text-[10px] text-amber-800 font-bold leading-tight uppercase opacity-80">
<div className="bg-amber-50 p-3.5 rounded-2xl border border-amber-100 flex gap-3">
<AlertCircle className="text-amber-500 shrink-0" size={16} />
<p className="text-[9px] text-amber-800 font-bold leading-snug uppercase opacity-80">
Al confirmar, declaras que el dinero físico coincide con este resumen.
</p>
</div>
<button
onClick={handleFinalClose}
disabled={isClosing}
className="w-full py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-widest rounded-2xl shadow-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95"
>
{isClosing ? 'Procesando...' : 'Confirmar y Cerrar Caja'}
</button>
<div className="pt-2">
<button
onClick={handleFinalClose}
disabled={isClosing}
className="w-full py-4 bg-blue-600 text-white font-black uppercase text-[10px] tracking-[0.2em] rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-[0.98]"
>
{isClosing ? 'Procesando...' : 'Confirmar y Cerrar Caja'}
</button>
</div>
</motion.div>
) : (
<motion.div key="done" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="text-center py-10">
@@ -187,12 +190,12 @@ interface SummaryRowProps {
function SummaryRow({ label, value, icon, isSale }: SummaryRowProps) {
return (
<div className="flex justify-between items-center p-3.5 bg-slate-50 rounded-xl border border-slate-100 group hover:bg-white hover:border-blue-100 transition-all">
<div className="flex items-center gap-3">
<div className="flex justify-between items-center p-3 bg-slate-50 rounded-xl border border-slate-100 group hover:bg-white hover:border-blue-100 transition-all">
<div className="flex items-center gap-2.5">
<div className="text-slate-400 group-hover:text-blue-500 transition-colors">{icon}</div>
<span className="text-[10px] font-black text-slate-500 uppercase tracking-tight">{label}</span>
<span className="text-[9px] font-black text-slate-500 uppercase tracking-tight">{label}</span>
</div>
<span className={clsx("font-mono font-black text-sm", isSale ? "text-slate-800" : "text-slate-400")}>
<span className={clsx("font-mono font-black text-[13px]", isSale ? "text-slate-800" : "text-slate-400")}>
$ {value.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
</span>
</div>

2
frontend/counter-panel/src/layouts/CounterLayout.tsx
View File

@@ -70,7 +70,7 @@ export default function CounterLayout() {
const menuItems = [
{ path: '/dashboard', label: 'Panel Principal', icon: LayoutDashboard, shortcut: 'F1' },
{ path: '/nuevo-aviso', label: 'Nuevo Aviso', icon: PlusCircle, shortcut: 'F2' },
{ path: '/nuevo-aviso', label: 'Operar Caja', icon: PlusCircle, shortcut: 'F2' },
{ path: '/caja', label: 'Caja Diaria', icon: Banknote, shortcut: 'F4' },
{ path: '/historial', label: 'Consultas', icon: ClipboardList, shortcut: 'F8' },
{ path: '/analitica', label: 'Analítica', icon: TrendingUp, shortcut: 'F6' },

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

@@ -7,7 +7,13 @@ import {
AlignLeft, AlignCenter, AlignRight, AlignJustify,
Type, Search, ChevronDown, Bold, Square as FrameIcon,
ArrowUpRight,
RefreshCw
RefreshCw,
Calendar,
Image as ImageIcon,
X,
UploadCloud,
MessageSquare,
Star
} from 'lucide-react';
import clsx from 'clsx';
import PaymentModal, { type Payment } from '../components/PaymentModal';
@@ -48,8 +54,13 @@ export default function FastEntryPage() {
const catWrapperRef = useRef<HTMLDivElement>(null);
const [formData, setFormData] = useState({
categoryId: '', operationId: '', text: '', days: 3, clientName: '', clientDni: '',
categoryId: '', operationId: '', text: '', title: '', price: '', days: 3, clientName: '', clientDni: '',
startDate: new Date(Date.now() + 86400000).toISOString().split('T')[0],
isFeatured: false, allowContact: false
});
const [selectedImages, setSelectedImages] = useState<File[]>([]);
const [imagePreviews, setImagePreviews] = useState<string[]>([]);
const fileInputRef = useRef<HTMLInputElement>(null);
const [options, setOptions] = useState({
isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left'
@@ -233,13 +244,13 @@ export default function FastEntryPage() {
days: formData.days,
isBold: options.isBold,
isFrame: options.isFrame,
startDate: new Date().toISOString()
startDate: formData.startDate || new Date().toISOString()
});
setPricing(res.data);
} catch (error) { console.error(error); }
};
calculatePrice();
}, [debouncedText, formData.categoryId, formData.days, options]);
}, [debouncedText, formData.categoryId, formData.days, options, formData.startDate]);
useEffect(() => {
if (debouncedClientSearch.length > 2 && showSuggestions) {
@@ -251,17 +262,17 @@ export default function FastEntryPage() {
const handlePaymentConfirm = async (payments: Payment[]) => {
try {
const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
await api.post('/listings', {
const listingRes = await api.post('/listings', {
categoryId: parseInt(formData.categoryId),
operationId: parseInt(formData.operationId),
title: formData.text.substring(0, 40) + '...',
title: formData.title || (formData.text.substring(0, 40) + '...'),
description: formData.text,
price: 0,
price: parseFloat(formData.price) || 0,
adFee: pricing.totalPrice,
status: 'Published',
origin: 'Mostrador',
printText: formData.text,
printStartDate: tomorrow.toISOString(),
printStartDate: formData.startDate,
printDaysCount: formData.days,
isBold: options.isBold,
isFrame: options.isFrame,
@@ -269,12 +280,41 @@ export default function FastEntryPage() {
printAlignment: options.alignment,
clientName: formData.clientName,
clientDni: formData.clientDni,
publicationStartDate: formData.startDate,
isFeatured: formData.isFeatured,
allowContact: formData.allowContact,
payments
});
const listingId = listingRes.data.id;
// Subir imágenes si existen
if (selectedImages.length > 0) {
for (const file of selectedImages) {
const imgFormData = new FormData();
imgFormData.append('file', file);
await api.post(`/images/upload/${listingId}`, imgFormData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
}
}
printCourtesyTicket(formData, pricing);
setTimeout(() => { printPaymentReceipt(formData, pricing, payments); }, 500);
setFormData({ ...formData, text: '', clientName: '', clientDni: '' });
setFormData({
...formData,
text: '',
title: '',
price: '',
clientName: '',
clientDni: '',
startDate: new Date(Date.now() + 86400000).toISOString().split('T')[0],
isFeatured: false,
allowContact: false
});
setOptions({ isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left' });
setSelectedImages([]);
setImagePreviews([]);
setShowPaymentModal(false);
setErrors({});
showToast('Aviso procesado correctamente.', 'success');
@@ -288,6 +328,21 @@ export default function FastEntryPage() {
setShowSuggestions(false);
};
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const files = Array.from(e.target.files);
setSelectedImages(prev => [...prev, ...files]);
const newPreviews = files.map(file => URL.createObjectURL(file));
setImagePreviews(prev => [...prev, ...newPreviews]);
}
};
const removeImage = (index: number) => {
setSelectedImages(prev => prev.filter((_, i) => i !== index));
setImagePreviews(prev => prev.filter((_, i) => i !== index));
};
if (sessionLoading) {
return (
<div className="h-full w-full flex items-center justify-center bg-slate-50">
@@ -299,12 +354,11 @@ export default function FastEntryPage() {
return (
<>
{/* BLOQUEO DE SEGURIDAD: Si no hay sesión, mostramos el modal de apertura */}
<AnimatePresence>
{!session.isOpen && (
<CashOpeningModal
onSuccess={refreshSession}
onCancel={() => navigate('/dashboard')} // Si cancela la apertura, lo sacamos de "Nuevo Aviso"
onCancel={() => navigate('/dashboard')}
/>
)}
</AnimatePresence>
@@ -314,17 +368,14 @@ export default function FastEntryPage() {
animate={{
opacity: 1,
scale: 1,
// Si no hay sesión, aplicamos un filtro de desenfoque y desaturación
filter: session.isOpen ? "blur(0px) grayscale(0)" : "blur(8px) grayscale(1)"
}}
transition={{ duration: 0.7, ease: "easeInOut" }}
className={clsx(
"w-full h-full p-5 flex gap-5 bg-slate-50/50 overflow-hidden max-h-screen",
// Bloqueamos interacciones físicas mientras el modal esté presente
!session.isOpen && "pointer-events-none select-none opacity-40"
)}
>
{/* PANEL IZQUIERDO: FORMULARIO */}
<div className="flex-[7] bg-white rounded-[2rem] shadow-xl shadow-slate-200/50 border border-slate-200 p-6 flex flex-col min-h-0 relative">
<div className="flex justify-between items-center mb-6">
<div>
@@ -337,7 +388,7 @@ export default function FastEntryPage() {
<div className="bg-slate-100 p-2 rounded-xl text-slate-400"><Printer size={18} /></div>
</div>
<div className="flex flex-col gap-6 flex-1 min-h-0">
<div className="flex flex-col gap-4 flex-1 min-h-0">
<div className="grid grid-cols-2 gap-6">
<div className="relative" ref={catWrapperRef}>
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.categoryId ? "text-rose-500" : "text-slate-500")}>
@@ -345,7 +396,7 @@ export default function FastEntryPage() {
</label>
<div
className={clsx(
"w-full p-3.5 border-2 rounded-xl flex justify-between items-center cursor-pointer transition-all duration-300",
"w-full py-2 px-4 border-2 rounded-xl flex justify-between items-center cursor-pointer transition-all duration-300",
isCatDropdownOpen ? "border-blue-500 bg-blue-50/30" : errors.categoryId ? "border-rose-200 bg-rose-50/50" : "border-slate-100 bg-slate-50/50 hover:border-slate-300"
)}
onClick={() => setIsCatDropdownOpen(!isCatDropdownOpen)}
@@ -376,42 +427,84 @@ export default function FastEntryPage() {
</div>
<div>
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.operationId ? "text-rose-500" : "text-slate-500")}>Operación {errors.operationId && "• Requerido"}</label>
<select className={clsx("w-full p-3.5 border-2 rounded-xl outline-none font-extrabold text-sm tracking-tight transition-all appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%2364748B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E')] bg-[length:18px_18px] bg-[right_1rem_center] bg-no-repeat", formData.operationId ? "border-slate-100 bg-slate-50 text-slate-800" : errors.operationId ? "border-rose-200 bg-rose-50/50 text-rose-400" : "border-slate-100 bg-slate-50 text-slate-400")} value={formData.operationId} onChange={e => { setFormData({ ...formData, operationId: e.target.value }); setErrors({ ...errors, operationId: false }); }}>
<select className={clsx("w-full py-2 px-4 border-2 rounded-xl outline-none font-extrabold text-sm tracking-tight transition-all appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%2364748B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E')] bg-[length:18px_18px] bg-[right_1rem_center] bg-no-repeat", formData.operationId ? "border-slate-100 bg-slate-50 text-slate-800" : errors.operationId ? "border-rose-200 bg-rose-50/50 text-rose-400" : "border-slate-100 bg-slate-50 text-slate-400")} value={formData.operationId} onChange={e => { setFormData({ ...formData, operationId: e.target.value }); setErrors({ ...errors, operationId: false }); }}>
<option value="">ELIJA OPERACIÓN...</option>
{operations.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
</select>
</div>
</div>
<div className="flex flex-col flex-1 min-h-0">
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.text ? "text-rose-500" : "text-slate-500")}>Cuerpo del Aviso {errors.text && "• Requerido"}</label>
<div className="relative flex-1 group">
<textarea ref={textInputRef} className={clsx("w-full h-full p-6 border-2 rounded-[1.5rem] resize-none outline-none font-mono text-xl tracking-tighter leading-snug transition-all duration-300", errors.text ? "border-rose-200 bg-rose-50/30" : "border-slate-100 bg-slate-50/30 group-focus-within:border-blue-400 group-focus-within:bg-white text-slate-800")} placeholder="ESCRIBA EL TEXTO AQUÍ PARA IMPRENTA..." value={formData.text} onChange={e => { setFormData({ ...formData, text: e.target.value }); setErrors({ ...errors, text: false }); }}></textarea>
<div className="absolute top-3 right-3"><div className="bg-white/80 backdrop-blur px-2 py-1 rounded-lg border border-slate-100 shadow-sm text-[9px] font-black text-slate-400 uppercase tracking-widest">F10 para Cobrar</div></div>
<div className="grid grid-cols-12 gap-6">
<div className="col-span-8">
<label className="block text-[10px] font-black text-slate-500 uppercase mb-1.5 tracking-widest">Título Web (Opcional)</label>
<input
type="text"
className="w-full py-2 px-4 border-2 border-slate-100 bg-slate-50/50 rounded-xl outline-none focus:border-blue-500 font-extrabold text-sm tracking-tight placeholder:text-slate-400"
placeholder="SI SE DEJA VACÍO SE GENERA DEL TEXTO..."
value={formData.title}
onChange={e => setFormData({ ...formData, title: e.target.value })}
/>
</div>
<div className="flex justify-between items-center mt-3 bg-slate-900 px-5 py-2.5 rounded-xl shadow-lg">
<div className="flex gap-6">
<div className="flex flex-col"><span className="text-[8px] text-slate-500 font-black uppercase">Palabras</span><span className={clsx("text-base font-mono font-black", pricing.wordCount > 0 ? "text-blue-400" : "text-slate-700")}>{pricing.wordCount.toString().padStart(2, '0')}</span></div>
<div className="flex flex-col"><span className="text-[8px] text-slate-500 font-black uppercase">Signos Especiales</span><span className={clsx("text-base font-mono font-black", pricing.specialCharCount > 0 ? "text-amber-400" : "text-slate-700")}>{pricing.specialCharCount.toString().padStart(2, '0')}</span></div>
<div className="col-span-4">
<label className="block text-[10px] font-black text-slate-500 uppercase mb-1.5 tracking-widest">Precio Sugerido ($)</label>
<div className="relative">
<span className="absolute left-4 top-1/2 -translate-y-1/2 font-black text-slate-400">$</span>
<input
type="number"
className="w-full py-2 pl-8 pr-4 border-2 border-slate-100 bg-slate-50/50 rounded-xl outline-none focus:border-blue-500 font-black text-sm text-blue-600"
placeholder="0.00"
value={formData.price}
onChange={e => setFormData({ ...formData, price: e.target.value })}
/>
</div>
<div className="text-right"><span className="text-[9px] text-slate-400 font-bold italic uppercase tracking-tighter">Vista optimizada para diario</span><div className="flex gap-1 mt-0.5 justify-end">{[1, 2, 3, 4, 5].map(i => <div key={i} className={clsx("h-0.5 w-2.5 rounded-full", formData.text.length > i * 15 ? "bg-blue-500" : "bg-slate-800")}></div>)}</div></div>
</div>
</div>
<div className="grid grid-cols-4 gap-4 bg-slate-50/50 p-4 rounded-[1.5rem] border-2 border-slate-100">
<div className="col-span-1">
<div className="flex flex-col min-h-0">
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.text ? "text-rose-500" : "text-slate-500")}>Cuerpo del Aviso {errors.text && "• Requerido"}</label>
<div className="relative group h-52">
<textarea ref={textInputRef} className={clsx("w-full h-full p-4 border-2 rounded-[1.2rem] resize-none outline-none font-mono text-lg tracking-tighter leading-snug transition-all duration-300", errors.text ? "border-rose-200 bg-rose-50/30" : "border-slate-100 bg-slate-50/30 group-focus-within:border-blue-400 group-focus-within:bg-white text-slate-800")} placeholder="ESCRIBA EL TEXTO AQUÍ PARA IMPRENTA..." value={formData.text} onChange={e => { setFormData({ ...formData, text: e.target.value }); setErrors({ ...errors, text: false }); }}></textarea>
</div>
<div className="flex justify-between items-center mt-2 bg-slate-900 px-5 py-2 rounded-[1rem] shadow-lg">
<div className="flex gap-6">
<div className="flex flex-col"><span className="text-[7px] text-slate-500 font-black uppercase tracking-widest">Palabras</span><span className={clsx("text-sm font-mono font-black", pricing.wordCount > 0 ? "text-blue-400" : "text-slate-700")}>{pricing.wordCount.toString().padStart(2, '0')}</span></div>
<div className="flex flex-col"><span className="text-[7px] text-slate-500 font-black uppercase tracking-widest">Signos</span><span className={clsx("text-sm font-mono font-black", pricing.specialCharCount > 0 ? "text-amber-400" : "text-slate-700")}>{pricing.specialCharCount.toString().padStart(2, '0')}</span></div>
</div>
<div className="text-right flex flex-col items-end">
<span className="text-[8px] text-slate-400 font-bold italic uppercase tracking-tighter">Vista Diario</span>
<div className="flex gap-1 mt-1 justify-end">
{[1, 2, 3, 4, 5].map(i => <div key={i} className={clsx("h-1 w-2.5 rounded-full transition-all duration-500", formData.text.length > i * 15 ? "bg-blue-500" : "bg-slate-800")}></div>)}
</div>
</div>
</div>
</div>
<div className="grid grid-cols-12 gap-4 bg-white p-3 rounded-[1.5rem] border-2 border-slate-100 mt-0">
<div className="col-span-2">
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">Inicio</label>
<div className="relative h-9 group">
<Calendar className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 group-hover:text-blue-500 transition-colors" size={14} />
<input
type="date"
className="w-full h-full pl-8 pr-2 bg-slate-50 border border-slate-200 rounded-lg outline-none focus:border-blue-500 font-bold text-[11px] text-slate-600 appearance-none"
value={formData.startDate}
onChange={e => setFormData({ ...formData, startDate: e.target.value })}
/>
</div>
</div>
<div className="col-span-2">
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">Días</label>
<div className="flex items-center bg-white rounded-lg border border-slate-200 overflow-hidden h-10">
<div className="flex items-center bg-slate-50 rounded-lg border border-slate-200 overflow-hidden h-9">
<button onClick={() => setFormData(f => ({ ...f, days: Math.max(1, f.days - 1) }))} className="px-2.5 hover:bg-slate-50 text-slate-400 font-bold transition-colors">-</button>
<input type="number" className="w-full text-center font-black text-blue-600 outline-none bg-transparent text-sm" value={formData.days} onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })} />
<button onClick={() => setFormData(f => ({ ...f, days: f.days + 1 }))} className="px-2.5 hover:bg-slate-50 text-slate-400 font-bold transition-colors">+</button>
</div>
</div>
<div className="col-span-2 relative" ref={clientWrapperRef}>
<div className="col-span-5 relative" ref={clientWrapperRef}>
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">Cliente / Razón Social</label>
<div className="relative h-10">
<div className="relative h-9">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
<input type="text" className="w-full h-full pl-10 pr-4 bg-white border border-slate-200 rounded-lg outline-none focus:border-blue-500 font-extrabold text-xs tracking-tight placeholder:text-slate-400" placeholder="NOMBRE O RAZÓN SOCIAL..." value={formData.clientName} onFocus={() => setShowSuggestions(true)} onChange={e => { setFormData({ ...formData, clientName: e.target.value }); setShowSuggestions(true); }} />
<input type="text" className="w-full h-full pl-10 pr-4 bg-slate-50 border border-slate-200 rounded-lg outline-none focus:border-blue-500 font-extrabold text-xs tracking-tight placeholder:text-slate-400" placeholder="BUSCAR O CREAR..." value={formData.clientName} onFocus={() => setShowSuggestions(true)} onChange={e => { setFormData({ ...formData, clientName: e.target.value }); setShowSuggestions(true); }} />
</div>
<AnimatePresence>{showSuggestions && clientSuggestions.length > 0 && (
<motion.div initial={{ opacity: 0, y: -5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute bottom-full mb-2 left-0 right-0 bg-white border-2 border-slate-100 shadow-2xl rounded-xl overflow-hidden z-[110]">
@@ -424,9 +517,37 @@ export default function FastEntryPage() {
</motion.div>
)}</AnimatePresence>
</div>
<div className="col-span-1">
<div className="col-span-3">
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">DNI / CUIT</label>
<input type="text" className="w-full h-10 bg-white border border-slate-200 rounded-lg font-mono text-center font-black text-xs outline-none focus:border-blue-500 placeholder:text-slate-400" placeholder="S/D" value={formData.clientDni} onChange={e => setFormData({ ...formData, clientDni: e.target.value })} />
<input type="text" className="w-full h-9 bg-slate-50 border border-slate-200 rounded-lg font-mono text-center font-black text-xs outline-none focus:border-blue-500 placeholder:text-slate-400" placeholder="S/D" value={formData.clientDni} onChange={e => setFormData({ ...formData, clientDni: e.target.value })} />
</div>
</div>
<div className="flex gap-4 p-4 bg-slate-100/50 rounded-2xl border border-slate-200 shadow-inner">
<div
className="flex flex-1 items-center gap-3 cursor-pointer group"
onClick={() => setFormData({ ...formData, isFeatured: !formData.isFeatured })}
>
<div className={clsx("w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300", formData.isFeatured ? "bg-amber-500 text-white shadow-lg scale-110" : "bg-white text-slate-400 border border-slate-200 group-hover:border-amber-300 group-hover:text-amber-500")}>
<Star className={clsx("transition-transform", formData.isFeatured && "fill-current animate-pulse")} size={18} />
</div>
<div className="flex flex-col">
<span className={clsx("text-[10px] font-black uppercase tracking-tighter leading-none transition-colors", formData.isFeatured ? "text-amber-600" : "text-slate-700")}>Aviso Destacado</span>
<span className="text-[8px] font-bold text-slate-400 uppercase mt-1">Aparece primero en la web</span>
</div>
</div>
<div className="w-px h-10 bg-slate-200"></div>
<div
className="flex flex-1 items-center gap-3 cursor-pointer group"
onClick={() => setFormData({ ...formData, allowContact: !formData.allowContact })}
>
<div className={clsx("w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300", formData.allowContact ? "bg-emerald-500 text-white shadow-lg scale-110" : "bg-white text-slate-400 border border-slate-200 group-hover:border-emerald-300 group-hover:text-emerald-500")}>
<MessageSquare size={18} />
</div>
<div className="flex flex-col">
<span className={clsx("text-[10px] font-black uppercase tracking-tighter leading-none transition-colors", formData.allowContact ? "text-emerald-600" : "text-slate-700")}>Permitir Contacto</span>
<span className="text-[8px] font-bold text-slate-400 uppercase mt-1">Habilita botón de mensajes</span>
</div>
</div>
</div>
</div>
@@ -479,18 +600,57 @@ export default function FastEntryPage() {
</div>
</div>
</div>
<div className="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm flex flex-col gap-3">
<div className="flex justify-between items-center">
<h3 className="text-[9px] font-black text-slate-500 uppercase tracking-widest flex items-center gap-2">
<ImageIcon size={12} /> Multimedia
</h3>
<span className="text-[9px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full">{selectedImages.length} fotos</span>
</div>
<div className="grid grid-cols-4 gap-2">
{imagePreviews.map((url, i) => (
<div key={url} className="relative aspect-square rounded-lg overflow-hidden group shadow-sm">
<img src={url} className="w-full h-full object-cover" alt="Preview" />
<button
onClick={() => removeImage(i)}
className="absolute top-1 right-1 p-1 bg-rose-500 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity"
>
<X size={10} />
</button>
</div>
))}
<button
onClick={() => fileInputRef.current?.click()}
className="aspect-square rounded-lg border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400 hover:border-blue-400 hover:text-blue-500 transition-all gap-1"
>
<UploadCloud size={16} />
<span className="text-[8px] font-black uppercase">Subir</span>
</button>
<input
type="file"
ref={fileInputRef}
multiple
accept="image/*"
className="hidden"
onChange={handleImageChange}
/>
</div>
</div>
</div>
<button onClick={handleSubmit} className="bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-2xl font-black shadow-xl flex flex-col items-center justify-center transition-all active:scale-95 group overflow-hidden flex-shrink-0">
<button onClick={handleSubmit} className="bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-2xl font-black shadow-xl flex flex-col items-center justify-center transition-all active:scale-95 group overflow-hidden mt-auto flex-shrink-0">
<div className="flex items-center gap-3 text-lg relative z-10"><Save size={20} /> COBRAR E IMPRIMIR</div>
<span className="text-[8px] opacity-60 tracking-[0.3em] relative z-10 font-mono mt-0.5">SHORTCUT: F10</span>
<span className="text-[10px] opacity-60 tracking-[0.3em] relative z-10 font-mono mt-0.5">ATAJO: F10</span>
</button>
</div>
{showPaymentModal && (
<PaymentModal totalAmount={pricing.totalPrice} onConfirm={handlePaymentConfirm} onCancel={() => setShowPaymentModal(false)} />
)}
</motion.div>
{showPaymentModal && (
<PaymentModal totalAmount={pricing.totalPrice} onConfirm={handlePaymentConfirm} onCancel={() => setShowPaymentModal(false)} />
)}
</>
);
}