feature/invoice-labels

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

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>

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 });
}
},
{

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>