130 lines
6.1 KiB
TypeScript
130 lines
6.1 KiB
TypeScript
import { Head, Link } from '@inertiajs/react';
|
|
import { PageTitle, Panel } from '@/components/procurement';
|
|
import { money, date } from '@/types/procurement';
|
|
import type { PurchaseAward, PurchaseOrder } from '@/types/purchase';
|
|
|
|
type Page<T> = {
|
|
data: T[];
|
|
prev_page_url: string | null;
|
|
next_page_url: string | null;
|
|
};
|
|
export default function Orders({
|
|
orders,
|
|
awards,
|
|
}: {
|
|
orders: Page<PurchaseOrder>;
|
|
awards: Page<PurchaseAward>;
|
|
}) {
|
|
return (
|
|
<>
|
|
<Head title="Ordens de compra" />
|
|
<div className="mx-auto flex w-full max-w-7xl flex-col gap-7 p-5 lg:p-8">
|
|
<PageTitle
|
|
eyebrow="Compras"
|
|
title="Adjudicações e ordens"
|
|
description="Acompanhe as aprovações dos valores finais e os documentos emitidos para revisão."
|
|
/>
|
|
<Panel title="Ordens emitidas">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="border-b text-muted-foreground">
|
|
<tr>
|
|
<th className="pr-4 pb-3">Ordem</th>
|
|
<th className="pr-4">Fornecedor</th>
|
|
<th className="pr-4">Emissão</th>
|
|
<th>Total com IVA</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orders.data.map((order) => (
|
|
<tr
|
|
key={order.id}
|
|
className="border-b last:border-0"
|
|
>
|
|
<td className="py-4 pr-4">
|
|
<Link
|
|
href={`/ordens/${order.id}`}
|
|
className="font-medium text-teal-700 dark:text-teal-400"
|
|
>
|
|
{order.number}
|
|
</Link>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{
|
|
order.snapshot.requisition
|
|
.number
|
|
}
|
|
</p>
|
|
</td>
|
|
<td className="pr-4">
|
|
{order.snapshot.supplier.name}
|
|
</td>
|
|
<td className="pr-4">
|
|
{date(order.issued_at)}
|
|
</td>
|
|
<td>{money(order.total_minor)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{orders.data.length === 0 && (
|
|
<p className="py-6 text-sm text-muted-foreground">
|
|
Ainda não foram emitidas ordens.
|
|
</p>
|
|
)}
|
|
<div className="mt-4 flex gap-4 text-sm">
|
|
{orders.prev_page_url && (
|
|
<Link href={orders.prev_page_url}>Anterior</Link>
|
|
)}
|
|
{orders.next_page_url && (
|
|
<Link href={orders.next_page_url}>Seguinte</Link>
|
|
)}
|
|
</div>
|
|
</Panel>
|
|
<Panel title="Adjudicações">
|
|
<div className="divide-y">
|
|
{awards.data.map((award) => (
|
|
<Link
|
|
href={`/requisicoes/${award.requisition_id}/adjudicacao`}
|
|
key={award.id}
|
|
className="flex items-center justify-between gap-4 py-4 text-sm"
|
|
>
|
|
<div>
|
|
<strong>Adjudicação #{award.id}</strong>
|
|
<p className="mt-1 text-muted-foreground">
|
|
{award.status === 'pending'
|
|
? 'Em aprovação'
|
|
: award.status === 'approved'
|
|
? 'Aprovada para emissão'
|
|
: award.status === 'cancelled'
|
|
? 'Cancelada'
|
|
: 'Rejeitada'}
|
|
</p>
|
|
</div>
|
|
<span>{money(award.total_minor)}</span>
|
|
</Link>
|
|
))}
|
|
{awards.data.length === 0 && (
|
|
<p className="py-6 text-sm text-muted-foreground">
|
|
Inicie a adjudicação a partir da comparação de
|
|
cotações.
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="mt-4 flex gap-4 text-sm">
|
|
{awards.prev_page_url && (
|
|
<Link href={awards.prev_page_url}>Anterior</Link>
|
|
)}
|
|
{awards.next_page_url && (
|
|
<Link href={awards.next_page_url}>Seguinte</Link>
|
|
)}
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
Orders.layout = {
|
|
breadcrumbs: [{ title: 'Ordens de compra', href: '/ordens' }],
|
|
};
|