118 lines
4.8 KiB
TypeScript
118 lines
4.8 KiB
TypeScript
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import { Plus, Search } from 'lucide-react';
|
|
import {
|
|
PageTitle,
|
|
Panel,
|
|
RequisitionTable,
|
|
controlClass,
|
|
} from '@/components/procurement';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { statusLabels } from '@/types/procurement';
|
|
import type { Requisition } from '@/types/procurement';
|
|
|
|
type Props = {
|
|
requisitions: {
|
|
data: Requisition[];
|
|
current_page: number;
|
|
last_page: number;
|
|
prev_page_url: string | null;
|
|
next_page_url: string | null;
|
|
total: number;
|
|
};
|
|
filters: { search?: string; status?: string };
|
|
};
|
|
export default function Index({ requisitions, filters }: Props) {
|
|
const form = useForm({
|
|
search: filters.search ?? '',
|
|
status: filters.status ?? '',
|
|
});
|
|
return (
|
|
<>
|
|
<Head title="Requisições" />
|
|
<div className="mx-auto flex w-full max-w-7xl flex-col gap-7 p-5 lg:p-8">
|
|
<PageTitle
|
|
eyebrow="Compras"
|
|
title="Requisições"
|
|
description="Registe necessidades e acompanhe cada pedido até à aprovação."
|
|
action={
|
|
<Button asChild>
|
|
<Link href="/requisicoes/criar">
|
|
<Plus className="size-4" />
|
|
Nova requisição
|
|
</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
<Panel title="Pedidos de compra">
|
|
<form
|
|
className="mb-6 flex flex-wrap gap-3"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.get('/requisicoes', { preserveState: true });
|
|
}}
|
|
>
|
|
<Input
|
|
className="max-w-xs"
|
|
aria-label="Pesquisar pela referência"
|
|
placeholder="Pesquisar referência…"
|
|
value={form.data.search}
|
|
onChange={(e) =>
|
|
form.setData('search', e.target.value)
|
|
}
|
|
/>
|
|
<select
|
|
className={`${controlClass} max-w-48`}
|
|
aria-label="Filtrar por estado"
|
|
value={form.data.status}
|
|
onChange={(e) =>
|
|
form.setData('status', e.target.value)
|
|
}
|
|
>
|
|
<option value="">Todos os estados</option>
|
|
{Object.entries(statusLabels).map(
|
|
([key, label]) => (
|
|
<option key={key} value={key}>
|
|
{label}
|
|
</option>
|
|
),
|
|
)}
|
|
</select>
|
|
<Button variant="outline" disabled={form.processing}>
|
|
<Search className="size-4" />
|
|
Filtrar
|
|
</Button>
|
|
</form>
|
|
<RequisitionTable rows={requisitions.data} />
|
|
<div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t pt-4 text-sm text-muted-foreground">
|
|
<p>
|
|
{requisitions.total} pedidos · Página{' '}
|
|
{requisitions.current_page} de{' '}
|
|
{requisitions.last_page}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
{requisitions.prev_page_url && (
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href={requisitions.prev_page_url}>
|
|
Anterior
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{requisitions.next_page_url && (
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href={requisitions.next_page_url}>
|
|
Seguinte
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
Index.layout = {
|
|
breadcrumbs: [{ title: 'Requisições', href: '/requisicoes' }],
|
|
};
|