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

CheckPoint: Avances Varios

Browse Source
This commit is contained in:
dmolinari
2025-12-18 13:32:50 -03:00
parent 8f535f3a6e
commit 32663e6324
92 changed files with 12629 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/counter-panel/src/pages/CashRegisterPage.tsx Normal file
View File

@@ -0,0 +1,39 @@
export default function CashRegisterPage() {
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>
<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>
</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>
</div>
</div>
);
}

385
frontend/counter-panel/src/pages/FastEntryPage.tsx Normal file
View File

@@ -0,0 +1,385 @@
import { useState, useEffect, useRef } from 'react';
import api from '../services/api';
import { useDebounce } from '../hooks/useDebounce';
import {
Printer, Save, CheckSquare, Square, Tag,
AlignLeft, AlignCenter, AlignRight, AlignJustify,
Type
} from 'lucide-react';
import clsx from 'clsx';
interface Category { id: number; name: string; }
interface Operation { id: number; name: string; }
interface PricingResult {
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 [operations, setOperations] = useState<Operation[]>([]);
const [formData, setFormData] = useState({
categoryId: '',
operationId: '',
text: '',
days: 3,
clientName: '',
});
const [options, setOptions] = useState({
isBold: false,
isFrame: false,
fontSize: 'normal', // 'small', 'normal', 'large', 'extra'
alignment: 'left' // 'left', 'center', 'right', 'justify'
});
const [pricing, setPricing] = useState<PricingResult>({
totalPrice: 0, baseCost: 0, extraCost: 0, surcharges: 0, discount: 0,
wordCount: 0, specialCharCount: 0, details: '', appliedPromotion: ''
});
const textInputRef = useRef<HTMLTextAreaElement>(null);
const debouncedText = useDebounce(formData.text, 500);
useEffect(() => {
const fetchData = async () => {
try {
const [catRes, opRes] = await Promise.all([
api.get('/categories'),
api.get('/operations')
]);
setCategories(catRes.data);
setOperations(opRes.data);
} catch (error) {
console.error("Error cargando datos base", error);
}
};
fetchData();
}, []);
useEffect(() => {
if (!formData.categoryId || !formData.text) {
setPricing(prev => ({ ...prev, totalPrice: 0, details: '' }));
return;
}
const calculatePrice = async () => {
try {
const res = await api.post('/pricing/calculate', {
categoryId: parseInt(formData.categoryId),
text: formData.text,
days: formData.days,
isBold: options.isBold,
isFrame: options.isFrame,
startDate: new Date().toISOString()
});
setPricing(res.data);
} catch (error) {
console.error("Error calculando precio", error);
}
};
calculatePrice();
}, [debouncedText, formData.categoryId, formData.days, options]);
const handleSubmit = async () => {
if (!formData.categoryId || !formData.operationId || !formData.text) {
alert("Faltan datos obligatorios.");
return;
}
if (!confirm(`¿Confirmar cobro de $${pricing.totalPrice.toLocaleString()}?`)) return;
try {
const startDate = new Date();
startDate.setDate(startDate.getDate() + 1);
await api.post('/listings', {
categoryId: parseInt(formData.categoryId),
operationId: parseInt(formData.operationId),
title: formData.text.substring(0, 40) + (formData.text.length > 40 ? '...' : ''),
description: formData.text,
price: 0,
currency: 'ARS',
status: 'Published',
userId: null,
printText: formData.text,
printStartDate: startDate.toISOString(),
printDaysCount: formData.days,
isBold: options.isBold,
isFrame: options.isFrame,
printFontSize: options.fontSize,
printAlignment: options.alignment
});
alert('✅ Aviso guardado y ticket generado.');
setFormData({ ...formData, text: '', clientName: '' });
setOptions({ isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left' });
textInputRef.current?.focus();
} catch (err) {
console.error(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';
}
};
return (
<div className="w-full h-full p-4 flex gap-4 bg-gray-100">
{/* --- 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>
</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
>
<option value="">-- Seleccionar --</option>
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
</select>
</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>
{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 --- */}
<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"
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>
<span className="text-xs uppercase">Escribir en 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>
<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>
</div>
</form>
</div>
{/* --- COLUMNA DERECHA: TOTALES Y OPCIONES --- */}
<div className="w-96 flex flex-col gap-4">
{/* 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()}
</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>
</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>
<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}!
</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">
{/* 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>
</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)"}
</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>
<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"
>
<Save size={24} />
COBRAR (F10)
</button>
</div>
</div>
);
}