ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/invoice-labels

Browse Source
This commit is contained in:
hreyes
2026-02-09 16:39:36 -06:00
parent adc5ab5cae
commit 8fe7f28713
4 changed files with 85 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/dashboard/export/manifest/invoice-selection-table.svelte
View File

@@ -6,6 +6,7 @@
import { Plus, Minus, Search, Loader2, Ghost } from 'lucide-svelte';
import type { Invoice } from '$lib/api/dashboard/a76/invoices';
import { fly } from 'svelte/transition';
import { getInvoiceTypeColor } from '$lib/utils';
let {
title = '',
@@ -101,7 +102,8 @@
)}
</Table.Cell>
<Table.Cell class="text-xs"
><Badge variant="outline" class="bg-background">{invoice.invoice_type}</Badge
><Badge variant="outline" class={getInvoiceTypeColor(invoice.invoice_type)}
>{invoice.invoice_type}</Badge
></Table.Cell
>
<Table.Cell>

12
frontend/src/lib/components/dashboard/invoices/columns.ts
View File

@@ -3,6 +3,7 @@ import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/in
import { createRawSnippet } from "svelte";
import DataTableActions from "./data-table-actions.svelte";
import type { Invoice } from '$lib/api/dashboard/a76/invoices';
import { getInvoiceTypeColor } from "$lib/utils";
function formatDate(date?: string | null): string {
if (!date) return '-';
@@ -70,15 +71,18 @@ export function createColumns(
header: "Tipo Factura",
cell: ({ row }) => {
const invoiceType = row.original.invoice_type;
const colorClass = getInvoiceTypeColor(invoiceType);
const typeSnippet = createRawSnippet<[{ type?: string | null }]>((getType) => {
const { type } = getType();
const typeSnippet = createRawSnippet<[{ type?: string | null; colorClass: string }]>((getProps) => {
const { type, colorClass } = getProps();
return {
render: () =>
`<div class="text-sm font-medium">${type || '-'}</div>`
`<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}">
${type || '-'}
</span>`
};
});
return renderSnippet(typeSnippet, { type: invoiceType });
return renderSnippet(typeSnippet, { type: invoiceType, colorClass });
}
},
{

52
frontend/src/lib/components/dashboard/invoices/details-dialog.svelte
View File

@@ -4,6 +4,7 @@
import * as Tabs from '$lib/components/ui/tabs';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
import { getInvoiceTypeColor } from '$lib/utils';
interface Props {
invoice: Invoice;
@@ -32,13 +33,17 @@
}
</script>
<Dialog.Root {open} onOpenChange={(v) => { open = v; if (!v) onClose(); }}>
<Dialog.Root
{open}
onOpenChange={(v) => {
open = v;
if (!v) onClose();
}}
>
<Dialog.Content class="max-w-5xl max-h-[90vh] overflow-y-auto">
<Dialog.Header>
<Dialog.Title>Detalles de Factura #{invoice?.id}</Dialog.Title>
<Dialog.Description>
Información completa de la factura
</Dialog.Description>
<Dialog.Description>Información completa de la factura</Dialog.Description>
</Dialog.Header>
{#if invoice}
@@ -74,7 +79,15 @@
<div>
<p class="text-sm font-medium text-muted-foreground">Tipo de Factura</p>
<p class="text-base">{invoice.invoice_type || '-'}</p>
<p class="text-base">
{#if invoice.invoice_type}
<Badge variant="outline" class={getInvoiceTypeColor(invoice.invoice_type)}
>{invoice.invoice_type}</Badge
>
{:else}
-
{/if}
</p>
</div>
<div>
@@ -102,10 +115,11 @@
<p class="text-base">{invoice.traffic_light_status || '-'}</p>
</div>
<div>
<p class="text-sm font-medium text-muted-foreground">CFDI UUID</p>
<p class="text-xs break-all">{invoice.cfdi_uuid || '-'}</p>
</div> <div>
<div>
<p class="text-sm font-medium text-muted-foreground">CFDI UUID</p>
<p class="text-xs break-all">{invoice.cfdi_uuid || '-'}</p>
</div>
<div>
<p class="text-sm font-medium text-muted-foreground">Actualizado</p>
<p class="text-base">{invoice.is_updated ? 'Sí' : 'No'}</p>
</div>
@@ -196,11 +210,11 @@
<p class="text-base">{invoice.compliance_mx.edocument || '-'}</p>
</div>
<div class="col-span-2">
<p class="text-sm font-medium text-muted-foreground">Firma Electrónica</p>
<p class="text-xs break-all">{invoice.compliance_mx.electronic_signature || '-'}</p>
<div class="col-span-2">
<p class="text-sm font-medium text-muted-foreground">Firma Electrónica</p>
<p class="text-xs break-all">{invoice.compliance_mx.electronic_signature || '-'}</p>
</div>
</div>
</div>
{:else}
<p class="text-muted-foreground">No hay información de cumplimiento disponible.</p>
{/if}
@@ -362,7 +376,9 @@
</div>
<div>
<p class="text-sm font-medium text-muted-foreground">Descripción de Colores</p>
<p class="text-sm font-medium text-muted-foreground">
Descripción de Colores
</p>
<p class="text-base">{detail.colors_description || '-'}</p>
</div>
@@ -399,7 +415,9 @@
</div>
<div>
<p class="text-sm font-medium text-muted-foreground">Fecha de Cobranza</p>
<p class="text-sm font-medium text-muted-foreground">
Fecha de Cobranza
</p>
<p class="text-base">{formatDate(collection.collection_date)}</p>
</div>
@@ -427,9 +445,7 @@
{/if}
<Dialog.Footer>
<Button variant="outline" onclick={() => (open = false)}>
Cerrar
</Button>
<Button variant="outline" onclick={() => (open = false)}>Cerrar</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>

44
frontend/src/lib/utils.ts
View File

@@ -12,19 +12,19 @@ export function cn(...inputs: ClassValue[]) {
*/
export function getBackendAssetUrl(path: string | null | undefined): string {
if (!path) return '';
// Si ya es una URL completa, retornarla tal cual
if (path.startsWith('http://') || path.startsWith('https://')) {
return path;
}
// Eliminar la / inicial si existe para evitar //
const cleanPath = path.startsWith('/') ? path.slice(1) : path;
// Obtener la base URL del API y limpiar el / final si existe
let baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000';
baseUrl = baseUrl.replace(/\/+$/, ''); // Eliminar todas las / del final
return `${baseUrl}/${cleanPath}`;
}
@@ -34,3 +34,39 @@ export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
/**
* Obtiene el color del badge según el tipo de factura (SCAII Standards)
*/
export function getInvoiceTypeColor(type?: string | null): string {
if (!type) return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
const normalizedType = type.toLowerCase().trim();
// Impo tem (Rojo)
if (normalizedType.includes('impo tem') || normalizedType === 'tem') {
return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
}
// Impo Def (Verde)
if (normalizedType.includes('impo def') || normalizedType === 'def') {
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
}
// Comp Mex (Morado)
if (normalizedType.includes('comp mex') || normalizedType === 'mex') {
return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
}
// Cam. Reg. (Azul)
if (normalizedType.includes('cam. reg.') || normalizedType.includes('cam reg') || normalizedType === 'cr') {
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
}
// Expo. (Azul)
if (normalizedType.includes('expo') || normalizedType === 'exdef' || normalizedType === 'pterm') {
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
}
// Imp. Rep. (Azul Claro)
if (normalizedType.includes('imp. rep.') || normalizedType.includes('imp rep') || normalizedType === 'repar') {
return 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-200';
}
return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
}