-
Base ({formData.days} días)
-
${pricing.baseCost.toLocaleString()}
+ {pricing.extraCost > 0 && (
+
+ Recargos por texto
+ +${pricing.extraCost.toLocaleString()}
-
- {pricing.extraCost > 0 && (
-
- Excedentes
- +${pricing.extraCost.toLocaleString()}
-
- )}
-
- {pricing.surcharges > 0 && (
-
- Adicionales (Estilo)
- +${pricing.surcharges.toLocaleString()}
-
- )}
-
- {pricing.discount > 0 && (
-
-
Descuento
+ )}
+ {pricing.surcharges > 0 && (
+
+ Estilos visuales
+ +${pricing.surcharges.toLocaleString()}
+
+ )}
+ {pricing.discount > 0 && (
+
+
+ Descuento Aplicado
-${pricing.discount.toLocaleString()}
- )}
-
-
- {pricing.appliedPromotion && (
-
- ¡{pricing.appliedPromotion}!
+ {pricing.appliedPromotion}
)}
+ {/* CONTENEDOR CENTRAL SCROLLABLE (Toolbar + Preview) */}
+
- {/* Alineación */}
-
-
-
-
-
+ {/* TOOLBAR ESTILOS */}
+
+
+
+ {['left', 'center', 'right', 'justify'].map(align => (
+
+ ))}
+
+
+ {['small', 'normal', 'large'].map(size => (
+
+ ))}
+
+
+
+
+
+
+
-
-
- {/* Tamaño de Fuente */}
-
-
-
-
-
-
-
-
- {/* Vista Previa Papel */}
-
-
- Vista Previa Impresión (Papel)
-
-
- {formData.text || "(Texto vacío)"}
+ {/* VISTA PREVIA (DINÁMICA AL ALTO DEL TEXTO) */}
+
+
+
+ Previsualización Real
+
+
+
+ {formData.text || "(Aviso vacío)"}
+
+
- {/* Botones Estilo Rápido (Negrita/Recuadro) */}
-
-
-
-
-
-
+ {/* ACCIÓN PRINCIPAL (FIJO ABAJO) */}
diff --git a/frontend/counter-panel/src/pages/LoginPage.tsx b/frontend/counter-panel/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..ce4bb42
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
Acceso Mostrador
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/counter-panel/src/services/api.ts b/frontend/counter-panel/src/services/api.ts
index d72471a..1d1b022 100644
--- a/frontend/counter-panel/src/services/api.ts
+++ b/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;
\ No newline at end of file
diff --git a/frontend/counter-panel/src/services/cashRegisterService.ts b/frontend/counter-panel/src/services/cashRegisterService.ts
new file mode 100644
index 0000000..a26778a
--- /dev/null
+++ b/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();
+ }
+};
\ No newline at end of file
diff --git a/frontend/counter-panel/src/types/Category.ts b/frontend/counter-panel/src/types/Category.ts
new file mode 100644
index 0000000..1b09c7d
--- /dev/null
+++ b/frontend/counter-panel/src/types/Category.ts
@@ -0,0 +1,6 @@
+export interface Category {
+ id: number;
+ name: string;
+ parentId?: number;
+ subcategories?: Category[];
+}
\ No newline at end of file
diff --git a/frontend/counter-panel/src/utils/categoryTreeUtils.ts b/frontend/counter-panel/src/utils/categoryTreeUtils.ts
new file mode 100644
index 0000000..a6297c2
--- /dev/null
+++ b/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
();
+ 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);
+};
\ No newline at end of file
diff --git a/frontend/public-web/src/App.tsx b/frontend/public-web/src/App.tsx
index bbcf153..1583a5a 100644
--- a/frontend/public-web/src/App.tsx
+++ b/frontend/public-web/src/App.tsx
@@ -15,8 +15,9 @@ function App() {
Publicar Aviso
diff --git a/frontend/public-web/src/pages/HomePage.tsx b/frontend/public-web/src/pages/HomePage.tsx
index 9fa42c7..e3500b5 100644
--- a/frontend/public-web/src/pages/HomePage.tsx
+++ b/frontend/public-web/src/pages/HomePage.tsx
@@ -3,12 +3,23 @@ import SearchBar from '../components/SearchBar';
import ListingCard from '../components/ListingCard';
import { publicService } from '../services/publicService';
import type { Listing, Category } from '../types';
+import { Filter, X } from 'lucide-react';
+import { processCategoriesForSelect, type FlatCategory } from '../utils/categoryTreeUtils';
export default function HomePage() {
const [listings, setListings] = useState
([]);
- const [categories, setCategories] = useState([]);
+
+ // Usamos FlatCategory para el renderizado
+ const [flatCategories, setFlatCategories] = useState([]);
+ const [rawCategories, setRawCategories] = useState([]); // Guardamos raw para los botones del home
+
const [loading, setLoading] = useState(true);
+ // Estado de Búsqueda
+ const [searchText, setSearchText] = useState('');
+ const [selectedCatId, setSelectedCatId] = useState(null);
+ const [dynamicFilters, setDynamicFilters] = useState>({});
+
useEffect(() => {
loadInitialData();
}, []);
@@ -21,72 +32,136 @@ export default function HomePage() {
publicService.getCategories()
]);
setListings(latestListings);
- setCategories(cats);
- } catch (e) {
- console.error(e);
- } finally {
- setLoading(false);
- }
+ setRawCategories(cats);
+
+ // Procesamos el árbol para el select
+ const processed = processCategoriesForSelect(cats);
+ setFlatCategories(processed);
+
+ } catch (e) { console.error(e); }
+ finally { setLoading(false); }
};
- const handleSearch = async (query: string) => {
+ const performSearch = async () => {
setLoading(true);
try {
- const results = await publicService.searchListings(query);
- setListings(results);
- } catch (e) {
- console.error(e);
- } finally {
- setLoading(false);
- }
+ const response = await import('../services/api').then(m => m.default.post('/listings/search', {
+ query: searchText,
+ categoryId: selectedCatId,
+ filters: dynamicFilters
+ }));
+ setListings(response.data);
+ } catch (e) { console.error(e); }
+ finally { setLoading(false); }
};
- const mainCategories = categories.filter(c => !c.parentId);
+ useEffect(() => {
+ if (searchText || selectedCatId || Object.keys(dynamicFilters).length > 0) {
+ performSearch();
+ }
+ }, [selectedCatId, dynamicFilters]);
+
+ const handleSearchText = (q: string) => {
+ setSearchText(q);
+ performSearch();
+ };
+
+ const clearFilters = () => {
+ setDynamicFilters({});
+ setSelectedCatId(null);
+ setSearchText('');
+ publicService.getLatestListings().then(setListings); // Reset list
+ }
+
+ // Para los botones del Home, solo mostramos los Raíz
+ const rootCategories = rawCategories.filter(c => !c.parentId);
return (
- {/* Hero Section */}
-
+ {/* Hero */}
+
-
Encuentra tu próximo objetivo
-
Clasificados verificados de Autos, Propiedades y más.
+
Encuentra tu próximo objetivo
-
+
- {/* Categories Quick Links */}
-
-
- {mainCategories.map(cat => (
-
})
+ ))}
+