feature/invoice-labels
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 });
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user