Feat: Cambios Varios

frontend/counter-panel/src/App.tsx

@@ -1,13 +1,22 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import CounterLayout from './layouts/CounterLayout';
 import FastEntryPage from './pages/FastEntryPage';
 import CashRegisterPage from './pages/CashRegisterPage';
+import LoginPage from './pages/LoginPage';
+
+// Componente simple de protección
+const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
+  const token = localStorage.getItem('token');
+  return token ? <>{children}</> : <Navigate to="/login" />;
+};
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route element={<CounterLayout />}>
+        <Route path="/login" element={<LoginPage />} />
+
+        <Route element={<PrivateRoute><CounterLayout /></PrivateRoute>}>
           <Route path="/" element={<FastEntryPage />} />
           <Route path="/cash-register" element={<CashRegisterPage />} />
         </Route>

frontend/counter-panel/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/counter-panel/src/layouts/CounterLayout.tsx

@@ -6,11 +6,16 @@ export default function CounterLayout() {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const handleLogout = () => {
+    if (confirm('¿Cerrar sesión de caja?')) {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      navigate('/login');
+    }
+  };
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      // Evitar conflictos si el usuario está escribiendo en un input, 
-      // excepto para F-Keys que suelen ser globales
-
       switch (e.key) {
         case 'F2':
           e.preventDefault();
@@ -20,8 +25,13 @@ export default function CounterLayout() {
           e.preventDefault();
           navigate('/cash-register');
           break;
+        case 'F10':
+          // F10 se maneja en el componente hijo (FastEntryPage), 
+          // pero prevenimos el default del navegador
+          e.preventDefault();
+          break;
         case 'Escape':
-          // Lógica para cancelar o volver
+          // Opcional: Cancelar o Logout rápido
           break;
       }
     };
@@ -32,7 +42,7 @@ export default function CounterLayout() {
 
   return (
     <div className="flex flex-col h-screen bg-gray-100">
-      {/* Header tipo Sistema Legacy pero moderno */}
+      {/* Header */}
       <header className="bg-slate-800 text-white p-3 flex justify-between items-center shadow-md">
         <div className="flex items-center gap-4">
           <div className="font-bold text-xl tracking-wider flex items-center gap-2">
@@ -45,7 +55,11 @@ export default function CounterLayout() {
           </div>
         </div>
 
-        <button className="text-red-400 hover:text-red-300 flex items-center gap-1 text-sm font-bold">
+        {/* BOTÓN SALIR CONECTADO */}
+        <button
+          onClick={handleLogout}
+          className="text-red-400 hover:text-red-300 flex items-center gap-1 text-sm font-bold transition-colors cursor-pointer"
+        >
           <LogOut size={16} /> SALIR
         </button>
       </header>
@@ -57,10 +71,18 @@ export default function CounterLayout() {
 
       {/* Footer con Barra de Atajos */}
       <footer className="bg-slate-900 text-white p-2 flex gap-4 text-sm font-mono border-t-4 border-blue-600">
-        <ShortcutKey k="F2" label="Nuevo Aviso" active={location.pathname === '/'} />
-        <ShortcutKey k="F4" label="Caja Diaria" active={location.pathname === '/cash-register'} />
-        <ShortcutKey k="F10" label="Cobrar/Imprimir" />
-        <ShortcutKey k="ESC" label="Cancelar" />
+        <button onClick={() => navigate('/')} className="hover:bg-slate-800 p-1 rounded transition focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
+          <ShortcutKey k="F2" label="Nuevo Aviso" active={location.pathname === '/'} />
+        </button>
+        <button onClick={() => navigate('/cash-register')} className="hover:bg-slate-800 p-1 rounded transition focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
+          <ShortcutKey k="F4" label="Caja Diaria" active={location.pathname === '/cash-register'} />
+        </button>
+        <div className="opacity-75 cursor-help" title="Presione F10 en la pantalla de carga">
+          <ShortcutKey k="F10" label="Cobrar/Imprimir" />
+        </div>
+        <div className="opacity-75">
+          <ShortcutKey k="ESC" label="Cancelar" />
+        </div>
       </footer>
     </div>
   );

frontend/counter-panel/src/pages/CashRegisterPage.tsx

@@ -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>
   );

frontend/counter-panel/src/pages/FastEntryPage.tsx

@@ -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>

frontend/counter-panel/src/pages/LoginPage.tsx

@@ -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>
+  );
+}

frontend/counter-panel/src/services/api.ts

@@ -1,9 +1,11 @@
 import axios from 'axios';
 
 const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
+  // Asegúrate de usar la variable de entorno o la URL correcta
+  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5176/api',
 });
 
+// 1. Interceptor de REQUEST: Pega el token
 api.interceptors.request.use((config) => {
   const token = localStorage.getItem('token');
   if (token) {
@@ -12,4 +14,27 @@ api.interceptors.request.use((config) => {
   return config;
 });
 
+// 2. Interceptor de RESPONSE: Maneja errores globales (como 401)
+api.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    // Si el error es 401 (Token vencido o inválido)
+    if (error.response && error.response.status === 401) {
+      console.warn("Sesión de caja expirada. Redirigiendo...");
+
+      // Limpiar almacenamiento
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+
+      // Redirigir al Login (forzado fuera de React Router para limpiar estado)
+      if (window.location.pathname !== '/login') {
+        window.location.href = '/login';
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
 export default api;

frontend/counter-panel/src/services/cashRegisterService.ts

@@ -0,0 +1,26 @@
+import api from './api';
+
+export const cashRegisterService = {
+  // Obtener resumen y lista de transacciones de hoy
+  getDailyStatus: async () => {
+    const res = await api.get('/reports/cashier-transactions');
+    return res.data; // Devuelve el GlobalReportDto
+  },
+
+  // Disparar la descarga del PDF de cierre
+  downloadClosurePdf: async () => {
+    const today = new Date().toISOString().split('T')[0];
+    const res = await api.get('/reports/export-cierre', {
+      params: { from: today, to: today },
+      responseType: 'blob'
+    });
+
+    const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `Cierre_Caja_${today}.pdf`);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+};

frontend/counter-panel/src/types/Category.ts

@@ -0,0 +1,6 @@
+export interface Category {
+  id: number;
+  name: string;
+  parentId?: number;
+  subcategories?: Category[];
+}

frontend/counter-panel/src/utils/categoryTreeUtils.ts

@@ -0,0 +1,92 @@
+import { type Category } from '../types/Category';
+
+// Interfaz para la categoría "Aplanada" y enriquecida para UI
+export interface FlatCategory {
+  id: number;
+  name: string;
+  level: number;
+  parentId: number | null;
+  path: string;        // "Vehículos > Autos"
+  isSelectable: boolean; // True si no tiene hijos (es hoja)
+  hasChildren: boolean;
+}
+
+// Interfaz auxiliar para el árbol
+interface CategoryNode extends Category {
+  children: CategoryNode[];
+}
+
+/**
+ * Convierte una lista plana de BD en un árbol recursivo
+ */
+export const buildTree = (categories: Category[]): CategoryNode[] => {
+  const map = new Map<number, CategoryNode>();
+  const roots: CategoryNode[] = [];
+
+  // 1. Inicializar nodos
+  categories.forEach(cat => {
+    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;
+};
+
+/**
+ * Aplana el árbol para usarlo en Selects/Autocompletes
+ * Calcula breadcrumbs y deshabilita padres
+ */
+export const flattenCategoriesForSelect = (
+  nodes: CategoryNode[],
+  level = 0,
+  parentPath = ""
+): FlatCategory[] => {
+  let result: FlatCategory[] = [];
+
+  // Ordenar alfabéticamente para facilitar búsqueda visual
+  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;
+
+    // Agregamos el nodo actual
+    result.push({
+      id: node.id,
+      name: node.name,
+      level: level,
+      parentId: node.parentId || null,
+      path: currentPath,
+      hasChildren: hasChildren,
+      // REGLA DE ORO: Solo seleccionable si NO tiene hijos
+      isSelectable: !hasChildren
+    });
+
+    // Recursión para los hijos
+    if (hasChildren) {
+      const childrenFlat = flattenCategoriesForSelect(node.children, level + 1, currentPath);
+      result = [...result, ...childrenFlat];
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Función Helper que hace todo el proceso desde la respuesta de la API
+ */
+export const processCategories = (rawCategories: Category[]): FlatCategory[] => {
+  const tree = buildTree(rawCategories);
+  return flattenCategoriesForSelect(tree);
+};