290 lines
11 KiB
TypeScript
290 lines
11 KiB
TypeScript
import { Head, Link, router } from '@inertiajs/react';
|
|
import {
|
|
Boxes,
|
|
CalendarClock,
|
|
MapPin,
|
|
PackageCheck,
|
|
Search,
|
|
SlidersHorizontal,
|
|
} from 'lucide-react';
|
|
import type { FormEvent } from 'react';
|
|
import { useState } from 'react';
|
|
import { PageHeading } from '@/components/page-heading';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import type { Asset, Paginated } from '@/types';
|
|
|
|
type Props = {
|
|
assets: Paginated<Asset>;
|
|
filters: {
|
|
search?: string;
|
|
category?: string;
|
|
location?: string;
|
|
starts_at?: string;
|
|
ends_at?: string;
|
|
};
|
|
periodSelected: boolean;
|
|
categories: string[];
|
|
locations: string[];
|
|
lastSyncedAt: string | null;
|
|
};
|
|
|
|
export default function AssetsIndex({
|
|
assets,
|
|
filters,
|
|
categories,
|
|
locations,
|
|
lastSyncedAt,
|
|
periodSelected,
|
|
}: Props) {
|
|
const [search, setSearch] = useState(filters.search ?? '');
|
|
const [category, setCategory] = useState(filters.category ?? 'all');
|
|
const [location, setLocation] = useState(filters.location ?? 'all');
|
|
const [startsAt, setStartsAt] = useState(filters.starts_at ?? '');
|
|
const [endsAt, setEndsAt] = useState(filters.ends_at ?? '');
|
|
|
|
function submit(event: FormEvent) {
|
|
event.preventDefault();
|
|
router.get(
|
|
'/equipamentos',
|
|
{
|
|
search: search || undefined,
|
|
category: category === 'all' ? undefined : category,
|
|
location: location === 'all' ? undefined : location,
|
|
starts_at: startsAt || undefined,
|
|
ends_at: endsAt || undefined,
|
|
},
|
|
{ preserveState: true },
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head title="Equipamentos" />
|
|
<main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-7 p-5 sm:p-8">
|
|
<PageHeading
|
|
eyebrow="Inventário sincronizado"
|
|
title="Equipamentos disponíveis"
|
|
description="Consulte os equipamentos requisitáveis registados no Snipe-IT e inicie uma requisição."
|
|
/>
|
|
|
|
<form
|
|
onSubmit={submit}
|
|
className="grid gap-3 rounded-xl border bg-card p-4 lg:grid-cols-6"
|
|
>
|
|
<div className="relative lg:col-span-2">
|
|
<Search className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
|
|
<Input
|
|
value={search}
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
placeholder="Nome, modelo ou etiqueta…"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<Select value={category} onValueChange={setCategory}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Categoria" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">
|
|
Todas as categorias
|
|
</SelectItem>
|
|
{categories.map((item) => (
|
|
<SelectItem key={item} value={item}>
|
|
{item}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<div className="relative">
|
|
<CalendarClock className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
|
|
<Input
|
|
type="datetime-local"
|
|
aria-label="Início do período"
|
|
value={startsAt}
|
|
onChange={(event) =>
|
|
setStartsAt(event.target.value)
|
|
}
|
|
className="pl-9"
|
|
required={Boolean(endsAt)}
|
|
/>
|
|
</div>
|
|
<Input
|
|
type="datetime-local"
|
|
aria-label="Fim do período"
|
|
value={endsAt}
|
|
onChange={(event) => setEndsAt(event.target.value)}
|
|
required={Boolean(startsAt)}
|
|
/>
|
|
<Select value={location} onValueChange={setLocation}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Localização" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">
|
|
Todas as localizações
|
|
</SelectItem>
|
|
{locations.map((item) => (
|
|
<SelectItem key={item} value={item}>
|
|
{item}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button type="submit" variant="secondary">
|
|
<SlidersHorizontal /> Filtrar
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
{assets.total} equipamento
|
|
{assets.total === 1 ? '' : 's'}
|
|
</span>
|
|
{lastSyncedAt && (
|
|
<span>
|
|
Sincronizado em{' '}
|
|
{new Intl.DateTimeFormat('pt-PT', {
|
|
dateStyle: 'short',
|
|
timeStyle: 'short',
|
|
}).format(new Date(lastSyncedAt))}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{assets.data.length > 0 ? (
|
|
<section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
|
{assets.data.map((asset) => (
|
|
<AssetCard
|
|
key={asset.id}
|
|
asset={asset}
|
|
periodSelected={periodSelected}
|
|
startsAt={filters.starts_at}
|
|
endsAt={filters.ends_at}
|
|
/>
|
|
))}
|
|
</section>
|
|
) : (
|
|
<div className="rounded-xl border border-dashed py-16 text-center">
|
|
<Boxes className="mx-auto size-9 text-slate-300" />
|
|
<h2 className="mt-4 font-medium">
|
|
Nenhum equipamento encontrado
|
|
</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Altere os filtros e volte a tentar.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{assets.last_page > 1 && (
|
|
<nav className="flex justify-center gap-2">
|
|
{assets.links.map((link, index) => (
|
|
<Button
|
|
key={index}
|
|
asChild={Boolean(link.url)}
|
|
disabled={!link.url}
|
|
variant={link.active ? 'default' : 'outline'}
|
|
size="sm"
|
|
>
|
|
{link.url ? (
|
|
<Link
|
|
href={link.url}
|
|
preserveScroll
|
|
dangerouslySetInnerHTML={{
|
|
__html: link.label,
|
|
}}
|
|
/>
|
|
) : (
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: link.label,
|
|
}}
|
|
/>
|
|
)}
|
|
</Button>
|
|
))}
|
|
</nav>
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AssetCard({
|
|
asset,
|
|
periodSelected,
|
|
startsAt,
|
|
endsAt,
|
|
}: {
|
|
asset: Asset;
|
|
periodSelected: boolean;
|
|
startsAt?: string;
|
|
endsAt?: string;
|
|
}) {
|
|
const requestParams = new URLSearchParams({ asset: String(asset.id) });
|
|
|
|
if (startsAt && endsAt) {
|
|
requestParams.set('starts_at', startsAt);
|
|
requestParams.set('ends_at', endsAt);
|
|
}
|
|
|
|
return (
|
|
<Card className="group gap-4 overflow-hidden border-slate-200 py-0 shadow-none transition hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md dark:border-slate-800">
|
|
<div className="flex h-36 items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-950">
|
|
{asset.image_url ? (
|
|
<img
|
|
src={asset.image_url}
|
|
alt=""
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<PackageCheck className="size-12 text-slate-300 transition group-hover:text-primary/40" />
|
|
)}
|
|
</div>
|
|
<CardContent className="space-y-4 pb-5">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h2 className="font-semibold">{asset.name}</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{asset.model_name}
|
|
</p>
|
|
</div>
|
|
<Badge variant="outline" className="text-emerald-700">
|
|
{periodSelected ? 'Livre no período' : 'Requisitável'}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground">
|
|
<span className="font-mono">{asset.asset_tag}</span>
|
|
{asset.category_name && <span>{asset.category_name}</span>}
|
|
{asset.location_name && (
|
|
<span className="flex items-center gap-1">
|
|
<MapPin className="size-3" />
|
|
{asset.location_name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Button asChild className="w-full">
|
|
<Link
|
|
href={`/requisicoes/nova?${requestParams.toString()}`}
|
|
>
|
|
Requisitar equipamento
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
AssetsIndex.layout = {
|
|
breadcrumbs: [{ title: 'Equipamentos', href: '/equipamentos' }],
|
|
};
|