93 lines
3.3 KiB
Svelte
93 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { quotations, clients } from '$lib/stores';
|
|
import Button from '$lib/components/Button.svelte';
|
|
import { generateQuotationPDF } from '$lib/pdf';
|
|
|
|
$: quotation = $quotations.find((q) => q.id === $page.params.id);
|
|
$: client = quotation ? $clients.find((c) => c.id === quotation!.clientId) : undefined;
|
|
|
|
function downloadPDF() {
|
|
if (quotation) {
|
|
generateQuotationPDF(quotation, client);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-6">
|
|
{#if quotation}
|
|
<div class="overflow-hidden bg-white shadow sm:rounded-lg">
|
|
<div class="flex items-center justify-between px-4 py-5 sm:px-6">
|
|
<div>
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Detalles de la Cotización</h3>
|
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">ID: {quotation.id}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="/quotations">
|
|
<Button variant="secondary">Volver</Button>
|
|
</a>
|
|
<Button onClick={downloadPDF}>Descargar PDF</Button>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
|
|
<dl class="sm:divide-y sm:divide-gray-200">
|
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
|
<dt class="text-sm font-medium text-gray-500">Cliente</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">{quotation.clientName}</dd>
|
|
</div>
|
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
|
<dt class="text-sm font-medium text-gray-500">Fecha</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
|
{new Date(quotation.date).toLocaleDateString()}
|
|
</dd>
|
|
</div>
|
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
|
<dt class="text-sm font-medium text-gray-500">Monto Total</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
|
${quotation.total.toFixed(2)}
|
|
</dd>
|
|
</div>
|
|
{#if quotation.footer}
|
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
|
<dt class="text-sm font-medium text-gray-500">Notas</dt>
|
|
<dd class="mt-1 text-sm whitespace-pre-wrap text-gray-900 sm:col-span-2 sm:mt-0">
|
|
{quotation.footer}
|
|
</dd>
|
|
</div>
|
|
{/if}
|
|
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
|
|
<dt class="text-sm font-medium text-gray-500">Ítems</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
|
<ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
|
|
{#each quotation.items as item}
|
|
<li class="flex items-center justify-between py-3 pr-4 pl-3 text-sm">
|
|
<div class="flex w-0 flex-1 items-center">
|
|
<span class="ml-2 w-0 flex-1 truncate"
|
|
>{item.productName} (x{item.quantity})</span
|
|
>
|
|
</div>
|
|
<div class="ml-4 flex-shrink-0">
|
|
<span class="font-medium text-gray-900"
|
|
>${(item.price * item.quantity).toFixed(2)}</span
|
|
>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="py-12 text-center">
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">Cotización no encontrada</h3>
|
|
<div class="mt-6">
|
|
<a href="/quotations">
|
|
<Button>Volver a Cotizaciones</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|