0e49c0922d
- Add /cfdi/emisores and /cfdi/receptores API endpoints - Search by RFC or nombre with ILIKE - Show suggestions dropdown while typing (min 2 chars) - Click suggestion to select and populate filter input - Show loading state while searching Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1518 lines
62 KiB
TypeScript
1518 lines
62 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useCallback } from 'react';
|
|
import { Header } from '@/components/layouts/header';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { useCfdis, useCreateCfdi, useDeleteCfdi } from '@/lib/hooks/use-cfdi';
|
|
import { createManyCfdis, searchEmisores, searchReceptores, type EmisorReceptor } from '@/lib/api/cfdi';
|
|
import type { CfdiFilters, TipoCfdi, Cfdi } from '@horux/shared';
|
|
import type { CreateCfdiData } from '@/lib/api/cfdi';
|
|
import { FileText, Search, ChevronLeft, ChevronRight, Plus, Upload, Trash2, X, FileUp, CheckCircle, AlertCircle, Loader2, Eye, Filter, XCircle, Calendar, User, Building2 } from 'lucide-react';
|
|
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
|
|
import { CfdiViewerModal } from '@/components/cfdi/cfdi-viewer-modal';
|
|
import { getCfdiById } from '@/lib/api/cfdi';
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
import { useTenantViewStore } from '@/stores/tenant-view-store';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
// Upload progress state
|
|
interface UploadProgress {
|
|
status: 'idle' | 'parsing' | 'uploading' | 'complete' | 'error';
|
|
totalFiles: number;
|
|
parsedFiles: number;
|
|
validFiles: number;
|
|
currentBatch: number;
|
|
totalBatches: number;
|
|
uploaded: number;
|
|
duplicates: number;
|
|
errors: number;
|
|
errorMessages: string[];
|
|
}
|
|
|
|
type CfdiTipo = 'ingreso' | 'egreso' | 'traslado' | 'nomina' | 'pago';
|
|
|
|
const initialFormData: CreateCfdiData = {
|
|
uuidFiscal: '',
|
|
tipo: 'ingreso',
|
|
serie: '',
|
|
folio: '',
|
|
fechaEmision: new Date().toISOString().split('T')[0],
|
|
fechaTimbrado: new Date().toISOString().split('T')[0],
|
|
rfcEmisor: '',
|
|
nombreEmisor: '',
|
|
rfcReceptor: '',
|
|
nombreReceptor: '',
|
|
subtotal: 0,
|
|
descuento: 0,
|
|
iva: 0,
|
|
isrRetenido: 0,
|
|
ivaRetenido: 0,
|
|
total: 0,
|
|
moneda: 'MXN',
|
|
metodoPago: 'PUE',
|
|
formaPago: '03',
|
|
usoCfdi: 'G03',
|
|
};
|
|
|
|
// Helper function to find element regardless of namespace prefix
|
|
function findElement(doc: Document, localName: string): Element | null {
|
|
// Try common prefixes first (most reliable for CFDI)
|
|
const prefixes = ['cfdi', 'tfd', 'pago20', 'pago10', 'nomina12', ''];
|
|
for (const prefix of prefixes) {
|
|
const tagName = prefix ? `${prefix}:${localName}` : localName;
|
|
const el = doc.getElementsByTagName(tagName)[0] as Element;
|
|
if (el) return el;
|
|
}
|
|
|
|
// Try with wildcard - search all elements by localName
|
|
const elements = doc.getElementsByTagName('*');
|
|
for (let i = 0; i < elements.length; i++) {
|
|
if (elements[i].localName === localName) {
|
|
return elements[i];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
// Parse CFDI XML and extract data
|
|
function parseCfdiXml(xmlString: string, tenantRfc: string): CreateCfdiData | null {
|
|
try {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(xmlString, 'text/xml');
|
|
|
|
// Check for parse errors
|
|
const parseError = doc.querySelector('parsererror');
|
|
if (parseError) {
|
|
console.error('XML parse error:', parseError.textContent);
|
|
return null;
|
|
}
|
|
|
|
// Get the Comprobante element (root)
|
|
const comprobante = findElement(doc, 'Comprobante');
|
|
if (!comprobante) {
|
|
console.error('No se encontro elemento Comprobante');
|
|
return null;
|
|
}
|
|
|
|
// Get TimbreFiscalDigital for UUID
|
|
const timbre = findElement(doc, 'TimbreFiscalDigital');
|
|
const uuid = timbre?.getAttribute('UUID') || '';
|
|
const fechaTimbradoRaw = timbre?.getAttribute('FechaTimbrado') || '';
|
|
|
|
// Get Emisor
|
|
const emisor = findElement(doc, 'Emisor');
|
|
const rfcEmisor = emisor?.getAttribute('Rfc') || emisor?.getAttribute('rfc') || '';
|
|
const nombreEmisor = emisor?.getAttribute('Nombre') || emisor?.getAttribute('nombre') || '';
|
|
|
|
// Get Receptor
|
|
const receptor = findElement(doc, 'Receptor');
|
|
const rfcReceptor = receptor?.getAttribute('Rfc') || receptor?.getAttribute('rfc') || '';
|
|
const nombreReceptor = receptor?.getAttribute('Nombre') || receptor?.getAttribute('nombre') || '';
|
|
const usoCfdi = receptor?.getAttribute('UsoCFDI') || '';
|
|
|
|
// Determine type based on tenant RFC
|
|
// If tenant is emisor -> ingreso (we issued the invoice)
|
|
// If tenant is receptor -> egreso (we received the invoice)
|
|
const tenantRfcUpper = tenantRfc.toUpperCase();
|
|
let tipoFinal: CreateCfdiData['tipo'];
|
|
if (rfcEmisor.toUpperCase() === tenantRfcUpper) {
|
|
tipoFinal = 'ingreso';
|
|
} else if (rfcReceptor.toUpperCase() === tenantRfcUpper) {
|
|
tipoFinal = 'egreso';
|
|
} else {
|
|
// Fallback: use TipoDeComprobante
|
|
const tipoComprobante = comprobante.getAttribute('TipoDeComprobante') || 'I';
|
|
tipoFinal = tipoComprobante === 'E' ? 'egreso' : 'ingreso';
|
|
}
|
|
|
|
// Get impuestos - search for the Impuestos element that is direct child of Comprobante
|
|
// (not the ones inside Conceptos)
|
|
let totalImpuestosTrasladados = 0;
|
|
let totalImpuestosRetenidos = 0;
|
|
|
|
// Try to get TotalImpuestosTrasladados from Comprobante's direct Impuestos child
|
|
const allImpuestos = doc.getElementsByTagName('*');
|
|
for (let i = 0; i < allImpuestos.length; i++) {
|
|
const el = allImpuestos[i];
|
|
if (el.localName === 'Impuestos' && el.parentElement?.localName === 'Comprobante') {
|
|
totalImpuestosTrasladados = parseFloat(el.getAttribute('TotalImpuestosTrasladados') || '0');
|
|
totalImpuestosRetenidos = parseFloat(el.getAttribute('TotalImpuestosRetenidos') || '0');
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Fallback: calculate IVA from total - subtotal if not found
|
|
const subtotal = parseFloat(comprobante.getAttribute('SubTotal') || '0');
|
|
const descuento = parseFloat(comprobante.getAttribute('Descuento') || '0');
|
|
const total = parseFloat(comprobante.getAttribute('Total') || '0');
|
|
|
|
if (totalImpuestosTrasladados === 0 && total > subtotal) {
|
|
totalImpuestosTrasladados = Math.max(0, total - subtotal + descuento + totalImpuestosRetenidos);
|
|
}
|
|
|
|
// Get retenciones breakdown
|
|
let isrRetenido = 0;
|
|
let ivaRetenido = 0;
|
|
const retenciones = doc.querySelectorAll('[localName="Retencion"], Retencion, cfdi\\:Retencion');
|
|
retenciones.forEach((ret: Element) => {
|
|
const impuesto = ret.getAttribute('Impuesto');
|
|
const importe = parseFloat(ret.getAttribute('Importe') || '0');
|
|
if (impuesto === '001') isrRetenido = importe; // ISR
|
|
if (impuesto === '002') ivaRetenido = importe; // IVA
|
|
});
|
|
|
|
// Parse dates - handle both ISO format and datetime format
|
|
const fechaEmisionRaw = comprobante.getAttribute('Fecha') || '';
|
|
const fechaEmision = fechaEmisionRaw.includes('T') ? fechaEmisionRaw.split('T')[0] : fechaEmisionRaw;
|
|
const fechaTimbrado = fechaTimbradoRaw.includes('T') ? fechaTimbradoRaw.split('T')[0] : fechaTimbradoRaw;
|
|
|
|
// Validate required fields
|
|
if (!uuid) {
|
|
console.error('UUID no encontrado en el XML');
|
|
return null;
|
|
}
|
|
if (!rfcEmisor || !rfcReceptor) {
|
|
console.error('RFC emisor o receptor no encontrado');
|
|
return null;
|
|
}
|
|
if (!fechaEmision) {
|
|
console.error('Fecha de emision no encontrada');
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
uuidFiscal: uuid.toUpperCase(),
|
|
tipo: tipoFinal,
|
|
serie: comprobante.getAttribute('Serie') || '',
|
|
folio: comprobante.getAttribute('Folio') || '',
|
|
fechaEmision,
|
|
fechaTimbrado: fechaTimbrado || fechaEmision,
|
|
rfcEmisor,
|
|
nombreEmisor: nombreEmisor || 'Sin nombre',
|
|
rfcReceptor,
|
|
nombreReceptor: nombreReceptor || 'Sin nombre',
|
|
subtotal,
|
|
descuento,
|
|
iva: totalImpuestosTrasladados,
|
|
isrRetenido,
|
|
ivaRetenido,
|
|
total,
|
|
moneda: comprobante.getAttribute('Moneda') || 'MXN',
|
|
tipoCambio: parseFloat(comprobante.getAttribute('TipoCambio') || '1'),
|
|
metodoPago: comprobante.getAttribute('MetodoPago') || '',
|
|
formaPago: comprobante.getAttribute('FormaPago') || '',
|
|
usoCfdi,
|
|
};
|
|
} catch (error) {
|
|
console.error('Error parsing XML:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Chunk size for batch uploads
|
|
const PARSE_CHUNK_SIZE = 500; // Parse 500 files at a time
|
|
const UPLOAD_CHUNK_SIZE = 200; // Upload 200 CFDIs per request
|
|
|
|
export default function CfdiPage() {
|
|
const { user } = useAuthStore();
|
|
const { viewingTenantRfc } = useTenantViewStore();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const queryClient = useQueryClient();
|
|
|
|
// Get the effective tenant RFC (viewing tenant or user's tenant)
|
|
const tenantRfc = viewingTenantRfc || user?.tenantRfc || '';
|
|
const [filters, setFilters] = useState<CfdiFilters>({
|
|
page: 1,
|
|
limit: 20,
|
|
});
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [columnFilters, setColumnFilters] = useState({
|
|
fechaInicio: '',
|
|
fechaFin: '',
|
|
emisor: '',
|
|
receptor: '',
|
|
});
|
|
const [openFilter, setOpenFilter] = useState<'fecha' | 'emisor' | 'receptor' | null>(null);
|
|
const [emisorSuggestions, setEmisorSuggestions] = useState<EmisorReceptor[]>([]);
|
|
const [receptorSuggestions, setReceptorSuggestions] = useState<EmisorReceptor[]>([]);
|
|
const [loadingSuggestions, setLoadingSuggestions] = useState(false);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [showBulkForm, setShowBulkForm] = useState(false);
|
|
const [formData, setFormData] = useState<CreateCfdiData>(initialFormData);
|
|
const [bulkData, setBulkData] = useState('');
|
|
const [uploadMode, setUploadMode] = useState<'xml' | 'json'>('xml');
|
|
const [jsonUploading, setJsonUploading] = useState(false);
|
|
|
|
// Optimized upload state
|
|
const [uploadProgress, setUploadProgress] = useState<UploadProgress>({
|
|
status: 'idle',
|
|
totalFiles: 0,
|
|
parsedFiles: 0,
|
|
validFiles: 0,
|
|
currentBatch: 0,
|
|
totalBatches: 0,
|
|
uploaded: 0,
|
|
duplicates: 0,
|
|
errors: 0,
|
|
errorMessages: []
|
|
});
|
|
const [parsedCfdis, setParsedCfdis] = useState<CreateCfdiData[]>([]);
|
|
const uploadAbortRef = useRef(false);
|
|
|
|
const { data, isLoading } = useCfdis(filters);
|
|
const createCfdi = useCreateCfdi();
|
|
const deleteCfdi = useDeleteCfdi();
|
|
|
|
// CFDI Viewer state
|
|
const [viewingCfdi, setViewingCfdi] = useState<Cfdi | null>(null);
|
|
const [loadingCfdi, setLoadingCfdi] = useState<string | null>(null);
|
|
|
|
const handleViewCfdi = async (id: string) => {
|
|
setLoadingCfdi(id);
|
|
try {
|
|
const cfdi = await getCfdiById(id);
|
|
setViewingCfdi(cfdi);
|
|
} catch (error) {
|
|
console.error('Error loading CFDI:', error);
|
|
alert('Error al cargar el CFDI');
|
|
} finally {
|
|
setLoadingCfdi(null);
|
|
}
|
|
};
|
|
|
|
const canEdit = user?.role === 'admin' || user?.role === 'contador';
|
|
|
|
const handleSearch = () => {
|
|
setFilters({ ...filters, search: searchTerm, page: 1 });
|
|
};
|
|
|
|
// Debounced search for emisor suggestions
|
|
const handleEmisorSearch = useCallback(async (value: string) => {
|
|
setColumnFilters(prev => ({ ...prev, emisor: value }));
|
|
if (value.length < 2) {
|
|
setEmisorSuggestions([]);
|
|
return;
|
|
}
|
|
setLoadingSuggestions(true);
|
|
try {
|
|
const results = await searchEmisores(value);
|
|
setEmisorSuggestions(results);
|
|
} catch {
|
|
setEmisorSuggestions([]);
|
|
} finally {
|
|
setLoadingSuggestions(false);
|
|
}
|
|
}, []);
|
|
|
|
// Debounced search for receptor suggestions
|
|
const handleReceptorSearch = useCallback(async (value: string) => {
|
|
setColumnFilters(prev => ({ ...prev, receptor: value }));
|
|
if (value.length < 2) {
|
|
setReceptorSuggestions([]);
|
|
return;
|
|
}
|
|
setLoadingSuggestions(true);
|
|
try {
|
|
const results = await searchReceptores(value);
|
|
setReceptorSuggestions(results);
|
|
} catch {
|
|
setReceptorSuggestions([]);
|
|
} finally {
|
|
setLoadingSuggestions(false);
|
|
}
|
|
}, []);
|
|
|
|
const selectEmisor = (emisor: EmisorReceptor) => {
|
|
setColumnFilters(prev => ({ ...prev, emisor: emisor.nombre }));
|
|
setEmisorSuggestions([]);
|
|
};
|
|
|
|
const selectReceptor = (receptor: EmisorReceptor) => {
|
|
setColumnFilters(prev => ({ ...prev, receptor: receptor.nombre }));
|
|
setReceptorSuggestions([]);
|
|
};
|
|
|
|
const applyDateFilter = () => {
|
|
setFilters({
|
|
...filters,
|
|
fechaInicio: columnFilters.fechaInicio || undefined,
|
|
fechaFin: columnFilters.fechaFin || undefined,
|
|
page: 1,
|
|
});
|
|
setOpenFilter(null);
|
|
};
|
|
|
|
const applyEmisorFilter = () => {
|
|
setFilters({
|
|
...filters,
|
|
emisor: columnFilters.emisor || undefined,
|
|
page: 1,
|
|
});
|
|
setOpenFilter(null);
|
|
};
|
|
|
|
const applyReceptorFilter = () => {
|
|
setFilters({
|
|
...filters,
|
|
receptor: columnFilters.receptor || undefined,
|
|
page: 1,
|
|
});
|
|
setOpenFilter(null);
|
|
};
|
|
|
|
const clearDateFilter = () => {
|
|
setColumnFilters({ ...columnFilters, fechaInicio: '', fechaFin: '' });
|
|
setFilters({ ...filters, fechaInicio: undefined, fechaFin: undefined, page: 1 });
|
|
setOpenFilter(null);
|
|
};
|
|
|
|
const clearEmisorFilter = () => {
|
|
setColumnFilters({ ...columnFilters, emisor: '' });
|
|
setFilters({ ...filters, emisor: undefined, page: 1 });
|
|
setOpenFilter(null);
|
|
};
|
|
|
|
const clearReceptorFilter = () => {
|
|
setColumnFilters({ ...columnFilters, receptor: '' });
|
|
setFilters({ ...filters, receptor: undefined, page: 1 });
|
|
setOpenFilter(null);
|
|
};
|
|
|
|
const hasDateFilter = filters.fechaInicio || filters.fechaFin;
|
|
const hasEmisorFilter = filters.emisor;
|
|
const hasReceptorFilter = filters.receptor;
|
|
const hasActiveColumnFilters = hasDateFilter || hasEmisorFilter || hasReceptorFilter;
|
|
|
|
const handleFilterType = (tipo?: TipoCfdi) => {
|
|
setFilters({ ...filters, tipo, page: 1 });
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
await createCfdi.mutateAsync(formData);
|
|
setFormData(initialFormData);
|
|
setShowForm(false);
|
|
} catch (error: any) {
|
|
alert(error.response?.data?.message || 'Error al crear CFDI');
|
|
}
|
|
};
|
|
|
|
const handleBulkSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setJsonUploading(true);
|
|
try {
|
|
const cfdis = JSON.parse(bulkData);
|
|
if (!Array.isArray(cfdis)) {
|
|
throw new Error('El formato debe ser un array de CFDIs');
|
|
}
|
|
const result = await createManyCfdis(cfdis);
|
|
alert(`Se crearon ${result.inserted} CFDIs exitosamente`);
|
|
setBulkData('');
|
|
setShowBulkForm(false);
|
|
queryClient.invalidateQueries({ queryKey: ['cfdis'] });
|
|
} catch (error: any) {
|
|
alert(error.message || 'Error al procesar CFDIs');
|
|
} finally {
|
|
setJsonUploading(false);
|
|
}
|
|
};
|
|
|
|
// Optimized: Parse files in chunks to prevent memory issues
|
|
const handleXmlFilesChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = Array.from(e.target.files || []);
|
|
if (files.length === 0) return;
|
|
|
|
uploadAbortRef.current = false;
|
|
setUploadProgress({
|
|
status: 'parsing',
|
|
totalFiles: files.length,
|
|
parsedFiles: 0,
|
|
validFiles: 0,
|
|
currentBatch: 0,
|
|
totalBatches: 0,
|
|
uploaded: 0,
|
|
duplicates: 0,
|
|
errors: 0,
|
|
errorMessages: []
|
|
});
|
|
setParsedCfdis([]);
|
|
|
|
const validCfdis: CreateCfdiData[] = [];
|
|
let parsedCount = 0;
|
|
let errorCount = 0;
|
|
|
|
// Process in chunks to prevent memory issues
|
|
for (let i = 0; i < files.length; i += PARSE_CHUNK_SIZE) {
|
|
if (uploadAbortRef.current) break;
|
|
|
|
const chunk = files.slice(i, i + PARSE_CHUNK_SIZE);
|
|
|
|
// Parse chunk in parallel
|
|
const results = await Promise.all(
|
|
chunk.map(async (file) => {
|
|
try {
|
|
const text = await file.text();
|
|
const data = parseCfdiXml(text, tenantRfc);
|
|
return data;
|
|
} catch {
|
|
return null;
|
|
}
|
|
})
|
|
);
|
|
|
|
// Collect valid results
|
|
results.forEach((data) => {
|
|
if (data && data.uuidFiscal) {
|
|
validCfdis.push(data);
|
|
} else {
|
|
errorCount++;
|
|
}
|
|
});
|
|
|
|
parsedCount += chunk.length;
|
|
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
parsedFiles: parsedCount,
|
|
validFiles: validCfdis.length,
|
|
errors: errorCount
|
|
}));
|
|
|
|
// Small delay to allow UI to update
|
|
await new Promise(r => setTimeout(r, 10));
|
|
}
|
|
|
|
setParsedCfdis(validCfdis);
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
status: uploadAbortRef.current ? 'idle' : 'idle',
|
|
totalBatches: Math.ceil(validCfdis.length / UPLOAD_CHUNK_SIZE)
|
|
}));
|
|
}, [tenantRfc]);
|
|
|
|
// Optimized: Upload in batches with progress
|
|
const handleXmlBulkSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (parsedCfdis.length === 0) {
|
|
alert('No hay CFDIs validos para cargar');
|
|
return;
|
|
}
|
|
|
|
uploadAbortRef.current = false;
|
|
const totalBatches = Math.ceil(parsedCfdis.length / UPLOAD_CHUNK_SIZE);
|
|
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
status: 'uploading',
|
|
currentBatch: 0,
|
|
totalBatches,
|
|
uploaded: 0,
|
|
duplicates: 0,
|
|
errors: 0,
|
|
errorMessages: []
|
|
}));
|
|
|
|
let totalUploaded = 0;
|
|
let totalDuplicates = 0;
|
|
let totalErrors = 0;
|
|
const allErrors: string[] = [];
|
|
|
|
// Upload in batches
|
|
for (let i = 0; i < parsedCfdis.length; i += UPLOAD_CHUNK_SIZE) {
|
|
if (uploadAbortRef.current) break;
|
|
|
|
const batchNumber = Math.floor(i / UPLOAD_CHUNK_SIZE) + 1;
|
|
const chunk = parsedCfdis.slice(i, i + UPLOAD_CHUNK_SIZE);
|
|
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
currentBatch: batchNumber
|
|
}));
|
|
|
|
try {
|
|
const result = await createManyCfdis(chunk, batchNumber, totalBatches, parsedCfdis.length);
|
|
|
|
totalUploaded += result.inserted;
|
|
totalDuplicates += result.duplicates;
|
|
totalErrors += result.errors;
|
|
if (result.errorMessages) {
|
|
allErrors.push(...result.errorMessages);
|
|
}
|
|
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
uploaded: totalUploaded,
|
|
duplicates: totalDuplicates,
|
|
errors: prev.errors + result.errors,
|
|
errorMessages: allErrors.slice(0, 20) // Limit error messages
|
|
}));
|
|
} catch (error: any) {
|
|
console.error(`Error en lote ${batchNumber}:`, error);
|
|
totalErrors += chunk.length;
|
|
allErrors.push(`Lote ${batchNumber}: ${error.message || 'Error desconocido'}`);
|
|
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
errors: prev.errors + chunk.length,
|
|
errorMessages: allErrors.slice(0, 20)
|
|
}));
|
|
}
|
|
|
|
// Small delay between batches
|
|
await new Promise(r => setTimeout(r, 100));
|
|
}
|
|
|
|
setUploadProgress(prev => ({
|
|
...prev,
|
|
status: 'complete'
|
|
}));
|
|
|
|
// Invalidate queries to refresh the list
|
|
queryClient.invalidateQueries({ queryKey: ['cfdis'] });
|
|
};
|
|
|
|
const clearXmlFiles = () => {
|
|
uploadAbortRef.current = true;
|
|
setParsedCfdis([]);
|
|
setUploadProgress({
|
|
status: 'idle',
|
|
totalFiles: 0,
|
|
parsedFiles: 0,
|
|
validFiles: 0,
|
|
currentBatch: 0,
|
|
totalBatches: 0,
|
|
uploaded: 0,
|
|
duplicates: 0,
|
|
errors: 0,
|
|
errorMessages: []
|
|
});
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
}
|
|
};
|
|
|
|
const cancelUpload = () => {
|
|
uploadAbortRef.current = true;
|
|
setUploadProgress(prev => ({ ...prev, status: 'idle' }));
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (confirm('¿Eliminar este CFDI?')) {
|
|
try {
|
|
await deleteCfdi.mutateAsync(id);
|
|
} catch (error) {
|
|
console.error('Error deleting CFDI:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const calculateTotal = () => {
|
|
const subtotal = formData.subtotal || 0;
|
|
const descuento = formData.descuento || 0;
|
|
const iva = formData.iva || 0;
|
|
const isrRetenido = formData.isrRetenido || 0;
|
|
const ivaRetenido = formData.ivaRetenido || 0;
|
|
return subtotal - descuento + iva - isrRetenido - ivaRetenido;
|
|
};
|
|
|
|
const formatCurrency = (value: number) =>
|
|
new Intl.NumberFormat('es-MX', {
|
|
style: 'currency',
|
|
currency: 'MXN',
|
|
}).format(value);
|
|
|
|
const formatDate = (dateString: string) =>
|
|
new Date(dateString).toLocaleDateString('es-MX', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
});
|
|
|
|
const generateUUID = () => {
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
|
const r = Math.random() * 16 | 0;
|
|
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
|
return v.toString(16);
|
|
}).toUpperCase();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Header title="Gestion de CFDI" />
|
|
<main className="p-6 space-y-6">
|
|
{/* Filters */}
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex flex-wrap gap-4">
|
|
<div className="flex gap-2 flex-1 min-w-[300px]">
|
|
<Input
|
|
placeholder="Buscar por UUID, RFC o nombre..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|
/>
|
|
<Button onClick={handleSearch}>
|
|
<Search className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant={filters.tipo === undefined ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => handleFilterType(undefined)}
|
|
>
|
|
Todos
|
|
</Button>
|
|
<Button
|
|
variant={filters.tipo === 'ingreso' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => handleFilterType('ingreso')}
|
|
>
|
|
Ingresos
|
|
</Button>
|
|
<Button
|
|
variant={filters.tipo === 'egreso' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => handleFilterType('egreso')}
|
|
>
|
|
Egresos
|
|
</Button>
|
|
</div>
|
|
{canEdit && (
|
|
<div className="flex gap-2">
|
|
<Button onClick={() => { setShowForm(true); setShowBulkForm(false); }}>
|
|
<Plus className="h-4 w-4 mr-1" />
|
|
Agregar
|
|
</Button>
|
|
<Button variant="outline" onClick={() => { setShowBulkForm(true); setShowForm(false); }}>
|
|
<Upload className="h-4 w-4 mr-1" />
|
|
Carga Masiva
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Add CFDI Form */}
|
|
{showForm && canEdit && (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-base">Agregar CFDI</CardTitle>
|
|
<CardDescription>Ingresa los datos del comprobante fiscal</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="icon" onClick={() => setShowForm(false)}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label>UUID Fiscal</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={formData.uuidFiscal}
|
|
onChange={(e) => setFormData({ ...formData, uuidFiscal: e.target.value.toUpperCase() })}
|
|
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
|
|
required
|
|
/>
|
|
<Button type="button" variant="outline" onClick={() => setFormData({ ...formData, uuidFiscal: generateUUID() })}>
|
|
Gen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Tipo</Label>
|
|
<Select
|
|
value={formData.tipo}
|
|
onValueChange={(v) => setFormData({ ...formData, tipo: v as CfdiTipo })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ingreso">Ingreso</SelectItem>
|
|
<SelectItem value="egreso">Egreso</SelectItem>
|
|
<SelectItem value="traslado">Traslado</SelectItem>
|
|
<SelectItem value="nomina">Nomina</SelectItem>
|
|
<SelectItem value="pago">Pago</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-2">
|
|
<Label>Serie</Label>
|
|
<Input
|
|
value={formData.serie}
|
|
onChange={(e) => setFormData({ ...formData, serie: e.target.value })}
|
|
placeholder="A"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Folio</Label>
|
|
<Input
|
|
value={formData.folio}
|
|
onChange={(e) => setFormData({ ...formData, folio: e.target.value })}
|
|
placeholder="001"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>Fecha Emision</Label>
|
|
<Input
|
|
type="date"
|
|
value={formData.fechaEmision}
|
|
onChange={(e) => setFormData({ ...formData, fechaEmision: e.target.value, fechaTimbrado: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Fecha Timbrado</Label>
|
|
<Input
|
|
type="date"
|
|
value={formData.fechaTimbrado}
|
|
onChange={(e) => setFormData({ ...formData, fechaTimbrado: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="p-4 border rounded-lg space-y-3">
|
|
<h4 className="font-medium">Emisor</h4>
|
|
<div className="space-y-2">
|
|
<Label>RFC Emisor</Label>
|
|
<Input
|
|
value={formData.rfcEmisor}
|
|
onChange={(e) => setFormData({ ...formData, rfcEmisor: e.target.value.toUpperCase() })}
|
|
placeholder="XAXX010101000"
|
|
maxLength={13}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Nombre Emisor</Label>
|
|
<Input
|
|
value={formData.nombreEmisor}
|
|
onChange={(e) => setFormData({ ...formData, nombreEmisor: e.target.value })}
|
|
placeholder="Empresa Emisora SA de CV"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 border rounded-lg space-y-3">
|
|
<h4 className="font-medium">Receptor</h4>
|
|
<div className="space-y-2">
|
|
<Label>RFC Receptor</Label>
|
|
<Input
|
|
value={formData.rfcReceptor}
|
|
onChange={(e) => setFormData({ ...formData, rfcReceptor: e.target.value.toUpperCase() })}
|
|
placeholder="XAXX010101000"
|
|
maxLength={13}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Nombre Receptor</Label>
|
|
<Input
|
|
value={formData.nombreReceptor}
|
|
onChange={(e) => setFormData({ ...formData, nombreReceptor: e.target.value })}
|
|
placeholder="Empresa Receptora SA de CV"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-6">
|
|
<div className="space-y-2">
|
|
<Label>Subtotal</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.subtotal}
|
|
onChange={(e) => setFormData({ ...formData, subtotal: parseFloat(e.target.value) || 0 })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Descuento</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.descuento}
|
|
onChange={(e) => setFormData({ ...formData, descuento: parseFloat(e.target.value) || 0 })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>IVA</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.iva}
|
|
onChange={(e) => setFormData({ ...formData, iva: parseFloat(e.target.value) || 0 })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>ISR Ret.</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.isrRetenido}
|
|
onChange={(e) => setFormData({ ...formData, isrRetenido: parseFloat(e.target.value) || 0 })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>IVA Ret.</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.ivaRetenido}
|
|
onChange={(e) => setFormData({ ...formData, ivaRetenido: parseFloat(e.target.value) || 0 })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Total</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.total || calculateTotal()}
|
|
onChange={(e) => setFormData({ ...formData, total: parseFloat(e.target.value) || 0 })}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" onClick={() => setShowForm(false)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit" disabled={createCfdi.isPending}>
|
|
{createCfdi.isPending ? 'Guardando...' : 'Guardar CFDI'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Bulk Upload Form */}
|
|
{showBulkForm && canEdit && (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-base">Carga Masiva de CFDIs</CardTitle>
|
|
<CardDescription>Sube archivos XML o pega datos en formato JSON</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="icon" onClick={() => { setShowBulkForm(false); clearXmlFiles(); }}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Mode selector */}
|
|
<div className="flex gap-2 mb-4">
|
|
<Button
|
|
type="button"
|
|
variant={uploadMode === 'xml' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => setUploadMode('xml')}
|
|
>
|
|
<FileUp className="h-4 w-4 mr-1" />
|
|
Subir XMLs
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant={uploadMode === 'json' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => setUploadMode('json')}
|
|
>
|
|
JSON
|
|
</Button>
|
|
</div>
|
|
|
|
{uploadMode === 'xml' ? (
|
|
<form onSubmit={handleXmlBulkSubmit} className="space-y-4">
|
|
{/* File input - only show when idle */}
|
|
{uploadProgress.status === 'idle' && (
|
|
<div className="space-y-2">
|
|
<Label>Archivos XML de CFDI</Label>
|
|
<div className="border-2 border-dashed rounded-lg p-6 text-center">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".xml"
|
|
multiple
|
|
onChange={handleXmlFilesChange}
|
|
className="hidden"
|
|
id="xml-upload"
|
|
/>
|
|
<label htmlFor="xml-upload" className="cursor-pointer">
|
|
<FileUp className="h-10 w-10 mx-auto text-muted-foreground mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Haz clic para seleccionar archivos XML
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Optimizado para cargas masivas (+100,000 archivos)
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Parsing progress */}
|
|
{uploadProgress.status === 'parsing' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Loader2 className="h-5 w-5 animate-spin text-primary" />
|
|
<div className="flex-1">
|
|
<p className="font-medium">Analizando archivos XML...</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{uploadProgress.parsedFiles.toLocaleString()} de {uploadProgress.totalFiles.toLocaleString()} archivos
|
|
</p>
|
|
</div>
|
|
<Button type="button" variant="outline" size="sm" onClick={cancelUpload}>
|
|
Cancelar
|
|
</Button>
|
|
</div>
|
|
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-primary transition-all duration-300"
|
|
style={{ width: `${(uploadProgress.parsedFiles / uploadProgress.totalFiles) * 100}%` }}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>{uploadProgress.validFiles.toLocaleString()} validos</span>
|
|
<span>{Math.round((uploadProgress.parsedFiles / uploadProgress.totalFiles) * 100)}%</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Upload progress */}
|
|
{uploadProgress.status === 'uploading' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Loader2 className="h-5 w-5 animate-spin text-primary" />
|
|
<div className="flex-1">
|
|
<p className="font-medium">Subiendo CFDIs al servidor...</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Lote {uploadProgress.currentBatch} de {uploadProgress.totalBatches}
|
|
</p>
|
|
</div>
|
|
<Button type="button" variant="outline" size="sm" onClick={cancelUpload}>
|
|
Cancelar
|
|
</Button>
|
|
</div>
|
|
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-primary transition-all duration-300"
|
|
style={{ width: `${(uploadProgress.currentBatch / uploadProgress.totalBatches) * 100}%` }}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4 text-center">
|
|
<div className="p-3 bg-success/10 rounded-lg">
|
|
<p className="text-2xl font-bold text-success">{uploadProgress.uploaded.toLocaleString()}</p>
|
|
<p className="text-xs text-muted-foreground">Cargados</p>
|
|
</div>
|
|
<div className="p-3 bg-warning/10 rounded-lg">
|
|
<p className="text-2xl font-bold text-warning">{uploadProgress.duplicates.toLocaleString()}</p>
|
|
<p className="text-xs text-muted-foreground">Duplicados</p>
|
|
</div>
|
|
<div className="p-3 bg-destructive/10 rounded-lg">
|
|
<p className="text-2xl font-bold text-destructive">{uploadProgress.errors.toLocaleString()}</p>
|
|
<p className="text-xs text-muted-foreground">Errores</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Upload complete */}
|
|
{uploadProgress.status === 'complete' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<CheckCircle className="h-6 w-6 text-success" />
|
|
<div className="flex-1">
|
|
<p className="font-medium text-success">Carga completada</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Se procesaron {uploadProgress.validFiles.toLocaleString()} archivos
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4 text-center">
|
|
<div className="p-3 bg-success/10 rounded-lg">
|
|
<p className="text-2xl font-bold text-success">{uploadProgress.uploaded.toLocaleString()}</p>
|
|
<p className="text-xs text-muted-foreground">Cargados</p>
|
|
</div>
|
|
<div className="p-3 bg-warning/10 rounded-lg">
|
|
<p className="text-2xl font-bold text-warning">{uploadProgress.duplicates.toLocaleString()}</p>
|
|
<p className="text-xs text-muted-foreground">Duplicados</p>
|
|
</div>
|
|
<div className="p-3 bg-destructive/10 rounded-lg">
|
|
<p className="text-2xl font-bold text-destructive">{uploadProgress.errors.toLocaleString()}</p>
|
|
<p className="text-xs text-muted-foreground">Errores</p>
|
|
</div>
|
|
</div>
|
|
{uploadProgress.errorMessages.length > 0 && (
|
|
<div className="p-3 bg-destructive/10 rounded-lg">
|
|
<p className="text-sm font-medium text-destructive mb-2">Errores:</p>
|
|
<ul className="text-xs text-destructive space-y-1 max-h-24 overflow-y-auto">
|
|
{uploadProgress.errorMessages.map((err, i) => (
|
|
<li key={i}>{err}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
<div className="flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" onClick={clearXmlFiles}>
|
|
Cargar mas archivos
|
|
</Button>
|
|
<Button type="button" onClick={() => { setShowBulkForm(false); clearXmlFiles(); }}>
|
|
Cerrar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Ready to upload - show summary and upload button */}
|
|
{uploadProgress.status === 'idle' && parsedCfdis.length > 0 && (
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-muted/50 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">{parsedCfdis.length.toLocaleString()} CFDIs listos para cargar</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Se enviaran en {Math.ceil(parsedCfdis.length / UPLOAD_CHUNK_SIZE)} lotes de {UPLOAD_CHUNK_SIZE} registros
|
|
</p>
|
|
</div>
|
|
<Button type="button" variant="ghost" size="sm" onClick={clearXmlFiles}>
|
|
Limpiar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" onClick={() => { setShowBulkForm(false); clearXmlFiles(); }}>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit">
|
|
<Upload className="h-4 w-4 mr-2" />
|
|
Iniciar carga
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Initial state - no files */}
|
|
{uploadProgress.status === 'idle' && parsedCfdis.length === 0 && uploadProgress.totalFiles === 0 && (
|
|
<div className="flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" onClick={() => setShowBulkForm(false)}>
|
|
Cancelar
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</form>
|
|
) : (
|
|
<form onSubmit={handleBulkSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Datos JSON</Label>
|
|
<textarea
|
|
className="w-full h-48 p-3 border rounded-lg font-mono text-sm bg-background"
|
|
value={bulkData}
|
|
onChange={(e) => setBulkData(e.target.value)}
|
|
placeholder={`[
|
|
{
|
|
"uuidFiscal": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
|
|
"tipo": "ingreso",
|
|
"fechaEmision": "2025-01-15",
|
|
"fechaTimbrado": "2025-01-15",
|
|
"rfcEmisor": "XAXX010101000",
|
|
"nombreEmisor": "Empresa SA de CV",
|
|
"rfcReceptor": "XAXX010101001",
|
|
"nombreReceptor": "Cliente SA de CV",
|
|
"subtotal": 10000,
|
|
"iva": 1600,
|
|
"total": 11600
|
|
}
|
|
]`}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 justify-end">
|
|
<Button type="button" variant="outline" onClick={() => setShowBulkForm(false)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button type="submit" disabled={jsonUploading}>
|
|
{jsonUploading ? 'Procesando...' : 'Cargar CFDIs'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Table */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<FileText className="h-4 w-4" />
|
|
CFDIs ({data?.total || 0})
|
|
</CardTitle>
|
|
{hasActiveColumnFilters && (
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<span>Filtros activos:</span>
|
|
{hasDateFilter && (
|
|
<span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
|
|
Fecha
|
|
<button onClick={clearDateFilter} className="hover:text-destructive">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{hasEmisorFilter && (
|
|
<span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
|
|
Emisor: {filters.emisor}
|
|
<button onClick={clearEmisorFilter} className="hover:text-destructive">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{hasReceptorFilter && (
|
|
<span className="px-2 py-0.5 bg-primary/10 text-primary rounded-full flex items-center gap-1">
|
|
Receptor: {filters.receptor}
|
|
<button onClick={clearReceptorFilter} className="hover:text-destructive">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
Cargando...
|
|
</div>
|
|
) : data?.data.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No se encontraron CFDIs
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b text-left text-sm text-muted-foreground">
|
|
<th className="pb-3 font-medium">
|
|
<div className="flex items-center gap-1">
|
|
Fecha
|
|
<Popover open={openFilter === 'fecha'} onOpenChange={(open) => setOpenFilter(open ? 'fecha' : null)}>
|
|
<PopoverTrigger asChild>
|
|
<button className={`p-1 rounded hover:bg-muted ${hasDateFilter ? 'text-primary' : ''}`}>
|
|
<Filter className="h-3.5 w-3.5" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64" align="start">
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium text-sm">Filtrar por fecha</h4>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<Label className="text-xs">Desde</Label>
|
|
<Input
|
|
type="date"
|
|
className="h-8 text-sm"
|
|
value={columnFilters.fechaInicio}
|
|
onChange={(e) => setColumnFilters({ ...columnFilters, fechaInicio: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs">Hasta</Label>
|
|
<Input
|
|
type="date"
|
|
className="h-8 text-sm"
|
|
value={columnFilters.fechaFin}
|
|
onChange={(e) => setColumnFilters({ ...columnFilters, fechaFin: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" className="flex-1" onClick={applyDateFilter}>
|
|
Aplicar
|
|
</Button>
|
|
{hasDateFilter && (
|
|
<Button size="sm" variant="outline" onClick={clearDateFilter}>
|
|
Limpiar
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</th>
|
|
<th className="pb-3 font-medium">Tipo</th>
|
|
<th className="pb-3 font-medium">Folio</th>
|
|
<th className="pb-3 font-medium">
|
|
<div className="flex items-center gap-1">
|
|
Emisor
|
|
<Popover open={openFilter === 'emisor'} onOpenChange={(open) => setOpenFilter(open ? 'emisor' : null)}>
|
|
<PopoverTrigger asChild>
|
|
<button className={`p-1 rounded hover:bg-muted ${hasEmisorFilter ? 'text-primary' : ''}`}>
|
|
<Filter className="h-3.5 w-3.5" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-72" align="start">
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium text-sm">Filtrar por emisor</h4>
|
|
<div className="relative">
|
|
<Label className="text-xs">RFC o Nombre</Label>
|
|
<Input
|
|
placeholder="Buscar emisor..."
|
|
className="h-8 text-sm"
|
|
value={columnFilters.emisor}
|
|
onChange={(e) => handleEmisorSearch(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && applyEmisorFilter()}
|
|
/>
|
|
{emisorSuggestions.length > 0 && (
|
|
<div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg max-h-48 overflow-y-auto z-50">
|
|
{emisorSuggestions.map((emisor, idx) => (
|
|
<button
|
|
key={idx}
|
|
type="button"
|
|
className="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors border-b last:border-b-0"
|
|
onClick={() => selectEmisor(emisor)}
|
|
>
|
|
<p className="font-medium truncate">{emisor.nombre}</p>
|
|
<p className="text-xs text-muted-foreground">{emisor.rfc}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{loadingSuggestions && columnFilters.emisor.length >= 2 && (
|
|
<div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg p-2 text-center text-sm text-muted-foreground">
|
|
Buscando...
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" className="flex-1" onClick={applyEmisorFilter}>
|
|
Aplicar
|
|
</Button>
|
|
{hasEmisorFilter && (
|
|
<Button size="sm" variant="outline" onClick={clearEmisorFilter}>
|
|
Limpiar
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</th>
|
|
<th className="pb-3 font-medium">
|
|
<div className="flex items-center gap-1">
|
|
Receptor
|
|
<Popover open={openFilter === 'receptor'} onOpenChange={(open) => setOpenFilter(open ? 'receptor' : null)}>
|
|
<PopoverTrigger asChild>
|
|
<button className={`p-1 rounded hover:bg-muted ${hasReceptorFilter ? 'text-primary' : ''}`}>
|
|
<Filter className="h-3.5 w-3.5" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-72" align="start">
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium text-sm">Filtrar por receptor</h4>
|
|
<div className="relative">
|
|
<Label className="text-xs">RFC o Nombre</Label>
|
|
<Input
|
|
placeholder="Buscar receptor..."
|
|
className="h-8 text-sm"
|
|
value={columnFilters.receptor}
|
|
onChange={(e) => handleReceptorSearch(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && applyReceptorFilter()}
|
|
/>
|
|
{receptorSuggestions.length > 0 && (
|
|
<div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg max-h-48 overflow-y-auto z-50">
|
|
{receptorSuggestions.map((receptor, idx) => (
|
|
<button
|
|
key={idx}
|
|
type="button"
|
|
className="w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors border-b last:border-b-0"
|
|
onClick={() => selectReceptor(receptor)}
|
|
>
|
|
<p className="font-medium truncate">{receptor.nombre}</p>
|
|
<p className="text-xs text-muted-foreground">{receptor.rfc}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
{loadingSuggestions && columnFilters.receptor.length >= 2 && (
|
|
<div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border rounded-md shadow-lg p-2 text-center text-sm text-muted-foreground">
|
|
Buscando...
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" className="flex-1" onClick={applyReceptorFilter}>
|
|
Aplicar
|
|
</Button>
|
|
{hasReceptorFilter && (
|
|
<Button size="sm" variant="outline" onClick={clearReceptorFilter}>
|
|
Limpiar
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</th>
|
|
<th className="pb-3 font-medium text-right">Total</th>
|
|
<th className="pb-3 font-medium">Estado</th>
|
|
<th className="pb-3 font-medium"></th>
|
|
{canEdit && <th className="pb-3 font-medium"></th>}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-sm">
|
|
{data?.data.map((cfdi) => (
|
|
<tr key={cfdi.id} className="border-b hover:bg-muted/50">
|
|
<td className="py-3">{formatDate(cfdi.fechaEmision)}</td>
|
|
<td className="py-3">
|
|
<span
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
cfdi.tipo === 'ingreso'
|
|
? 'bg-success/10 text-success'
|
|
: 'bg-destructive/10 text-destructive'
|
|
}`}
|
|
>
|
|
{cfdi.tipo === 'ingreso' ? 'Ingreso' : 'Egreso'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3">
|
|
{cfdi.folio || '-'}
|
|
</td>
|
|
<td className="py-3">
|
|
<div>
|
|
<p className="font-medium truncate max-w-[180px]" title={cfdi.nombreEmisor}>
|
|
{cfdi.nombreEmisor}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{cfdi.rfcEmisor}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="py-3">
|
|
<div>
|
|
<p className="font-medium truncate max-w-[180px]" title={cfdi.nombreReceptor}>
|
|
{cfdi.nombreReceptor}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{cfdi.rfcReceptor}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="py-3 text-right font-medium">
|
|
{formatCurrency(cfdi.total)}
|
|
</td>
|
|
<td className="py-3">
|
|
<span
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
cfdi.estado === 'vigente'
|
|
? 'bg-success/10 text-success'
|
|
: 'bg-muted text-muted-foreground'
|
|
}`}
|
|
>
|
|
{cfdi.estado === 'vigente' ? 'Vigente' : 'Cancelado'}
|
|
</span>
|
|
</td>
|
|
<td className="py-3">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleViewCfdi(cfdi.id)}
|
|
disabled={loadingCfdi === cfdi.id}
|
|
title="Ver factura"
|
|
>
|
|
{loadingCfdi === cfdi.id ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Eye className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</td>
|
|
{canEdit && (
|
|
<td className="py-3">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleDelete(cfdi.id)}
|
|
className="text-destructive hover:text-destructive"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{data && data.totalPages > 1 && (
|
|
<div className="flex items-center justify-between mt-4 pt-4 border-t">
|
|
<p className="text-sm text-muted-foreground">
|
|
Pagina {data.page} de {data.totalPages}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={data.page <= 1}
|
|
onClick={() =>
|
|
setFilters({ ...filters, page: (filters.page || 1) - 1 })
|
|
}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={data.page >= data.totalPages}
|
|
onClick={() =>
|
|
setFilters({ ...filters, page: (filters.page || 1) + 1 })
|
|
}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
|
|
<CfdiViewerModal
|
|
cfdi={viewingCfdi}
|
|
open={viewingCfdi !== null}
|
|
onClose={() => setViewingCfdi(null)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|