feat: establish reservation portal foundation
This commit is contained in:
275
resources/js/pages/reservations/create.tsx
Normal file
275
resources/js/pages/reservations/create.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import { Head, Link, useForm } from '@inertiajs/react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
CalendarClock,
|
||||
Check,
|
||||
MapPin,
|
||||
PackageCheck,
|
||||
} from 'lucide-react';
|
||||
import type { FormEvent } from 'react';
|
||||
import InputError from '@/components/input-error';
|
||||
import { PageHeading } from '@/components/page-heading';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import type { Asset } from '@/types';
|
||||
|
||||
export default function CreateReservation({
|
||||
assets,
|
||||
selectedAssetId,
|
||||
}: {
|
||||
assets: Asset[];
|
||||
selectedAssetId: number;
|
||||
}) {
|
||||
const form = useForm({
|
||||
purpose: '',
|
||||
usage_location: '',
|
||||
starts_at: '',
|
||||
ends_at: '',
|
||||
asset_ids: selectedAssetId ? [selectedAssetId] : ([] as number[]),
|
||||
terms_accepted: false,
|
||||
});
|
||||
function submit(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
form.post('/requisicoes');
|
||||
}
|
||||
function toggleAsset(id: number, checked: boolean) {
|
||||
form.setData(
|
||||
'asset_ids',
|
||||
checked
|
||||
? [...form.data.asset_ids, id]
|
||||
: form.data.asset_ids.filter((item) => item !== id),
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Nova requisição" />
|
||||
<main className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-7 p-5 sm:p-8">
|
||||
<PageHeading
|
||||
eyebrow="Novo pedido"
|
||||
title="Criar requisição"
|
||||
description="Selecione o período, os equipamentos e indique como serão utilizados."
|
||||
action={
|
||||
<Button asChild variant="ghost">
|
||||
<Link href="/equipamentos">
|
||||
<ArrowLeft /> Voltar ao catálogo
|
||||
</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className="grid gap-6 lg:grid-cols-[1fr_320px]"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<Card className="border-slate-200 shadow-none dark:border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CalendarClock className="size-5 text-primary" />{' '}
|
||||
Período e utilização
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-5 sm:grid-cols-2">
|
||||
<Field
|
||||
label="Início"
|
||||
error={form.errors.starts_at}
|
||||
>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={form.data.starts_at}
|
||||
onChange={(e) =>
|
||||
form.setData(
|
||||
'starts_at',
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Fim" error={form.errors.ends_at}>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={form.data.ends_at}
|
||||
onChange={(e) =>
|
||||
form.setData(
|
||||
'ends_at',
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<div className="sm:col-span-2">
|
||||
<Field
|
||||
label="Local de utilização"
|
||||
error={form.errors.usage_location}
|
||||
>
|
||||
<Input
|
||||
value={form.data.usage_location}
|
||||
onChange={(e) =>
|
||||
form.setData(
|
||||
'usage_location',
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
placeholder="Ex.: Auditório principal"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<Label htmlFor="purpose">Finalidade</Label>
|
||||
<textarea
|
||||
id="purpose"
|
||||
value={form.data.purpose}
|
||||
onChange={(e) =>
|
||||
form.setData(
|
||||
'purpose',
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
rows={4}
|
||||
placeholder="Descreva brevemente a atividade e a necessidade do equipamento…"
|
||||
className="mt-2 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
<InputError message={form.errors.purpose} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-slate-200 shadow-none dark:border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<PackageCheck className="size-5 text-primary" />{' '}
|
||||
Equipamentos
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{assets.map((asset) => {
|
||||
const checked =
|
||||
form.data.asset_ids.includes(asset.id);
|
||||
|
||||
return (
|
||||
<label
|
||||
key={asset.id}
|
||||
className={`flex cursor-pointer items-start gap-3 rounded-lg border p-4 transition ${checked ? 'border-primary bg-primary/5' : 'hover:bg-slate-50 dark:hover:bg-slate-900'}`}
|
||||
>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
onCheckedChange={(value) =>
|
||||
toggleAsset(
|
||||
asset.id,
|
||||
Boolean(value),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex justify-between gap-3">
|
||||
<span className="font-medium">
|
||||
{asset.name}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-muted-foreground">
|
||||
{asset.asset_tag}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{asset.category_name} ·{' '}
|
||||
{asset.model_name}
|
||||
</p>
|
||||
{asset.location_name && (
|
||||
<p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<MapPin className="size-3" />
|
||||
{asset.location_name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
<InputError message={form.errors.asset_ids} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<aside>
|
||||
<Card className="sticky top-6 border-slate-200 shadow-none dark:border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle>Resumo</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Equipamentos selecionados
|
||||
</p>
|
||||
<p className="mt-1 text-2xl font-semibold">
|
||||
{form.data.asset_ids.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 border-t pt-5">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
checked={form.data.terms_accepted}
|
||||
onCheckedChange={(value) =>
|
||||
form.setData(
|
||||
'terms_accepted',
|
||||
Boolean(value),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="terms"
|
||||
className="text-xs leading-5 font-normal"
|
||||
>
|
||||
Confirmo que conheço as condições de
|
||||
utilização e que entregarei os
|
||||
equipamentos no estado e prazo
|
||||
acordados.
|
||||
</Label>
|
||||
</div>
|
||||
<InputError
|
||||
message={form.errors.terms_accepted}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={form.processing}
|
||||
>
|
||||
<Check />{' '}
|
||||
{form.processing
|
||||
? 'A submeter…'
|
||||
: 'Submeter para aprovação'}
|
||||
</Button>
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
O equipamento fica pré-reservado até à
|
||||
decisão.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</form>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
error,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
error?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<Label>{label}</Label>
|
||||
<div className="mt-2">{children}</div>
|
||||
<InputError message={error} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
CreateReservation.layout = {
|
||||
breadcrumbs: [
|
||||
{ title: 'Requisições', href: '/requisicoes' },
|
||||
{ title: 'Nova', href: '/requisicoes/nova' },
|
||||
],
|
||||
};
|
||||
98
resources/js/pages/reservations/index.tsx
Normal file
98
resources/js/pages/reservations/index.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { CalendarDays, Plus } from 'lucide-react';
|
||||
import { PageHeading } from '@/components/page-heading';
|
||||
import { ReservationStatus } from '@/components/reservation-status';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { Paginated, Reservation } from '@/types';
|
||||
|
||||
export default function ReservationsIndex({
|
||||
reservations,
|
||||
}: {
|
||||
reservations: Paginated<Reservation>;
|
||||
}) {
|
||||
const format = new Intl.DateTimeFormat('pt-PT', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="As minhas requisições" />
|
||||
<main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-7 p-5 sm:p-8">
|
||||
<PageHeading
|
||||
eyebrow="Histórico"
|
||||
title="As minhas requisições"
|
||||
description="Acompanhe decisões, datas e equipamentos associados aos seus pedidos."
|
||||
action={
|
||||
<Button asChild>
|
||||
<Link href="/requisicoes/nova">
|
||||
<Plus /> Nova requisição
|
||||
</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{reservations.data.length ? (
|
||||
<div className="overflow-hidden rounded-xl border bg-card">
|
||||
<div className="hidden grid-cols-[150px_1fr_220px_170px] gap-4 border-b bg-slate-50 px-5 py-3 text-xs font-medium text-muted-foreground uppercase md:grid dark:bg-slate-900">
|
||||
<span>Referência</span>
|
||||
<span>Equipamentos</span>
|
||||
<span>Período</span>
|
||||
<span>Estado</span>
|
||||
</div>
|
||||
{reservations.data.map((reservation) => (
|
||||
<div
|
||||
key={reservation.id}
|
||||
className="grid gap-3 border-b px-5 py-4 last:border-0 md:grid-cols-[150px_1fr_220px_170px] md:items-center"
|
||||
>
|
||||
<span className="font-mono text-sm font-medium">
|
||||
{reservation.reference}
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
{reservation.items
|
||||
.map((item) => item.asset.name)
|
||||
.join(', ')}
|
||||
</p>
|
||||
<p className="mt-1 truncate text-xs text-muted-foreground">
|
||||
{reservation.purpose}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
<p>
|
||||
{format.format(
|
||||
new Date(reservation.starts_at),
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{format.format(
|
||||
new Date(reservation.ends_at),
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<ReservationStatus
|
||||
status={reservation.status}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border border-dashed py-16 text-center">
|
||||
<CalendarDays className="mx-auto size-9 text-slate-300" />
|
||||
<h2 className="mt-4 font-medium">
|
||||
Ainda não criou requisições
|
||||
</h2>
|
||||
<Button asChild variant="link">
|
||||
<Link href="/equipamentos">
|
||||
Consultar equipamentos
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ReservationsIndex.layout = {
|
||||
breadcrumbs: [{ title: 'Requisições', href: '/requisicoes' }],
|
||||
};
|
||||
Reference in New Issue
Block a user