404 lines
18 KiB
TypeScript
404 lines
18 KiB
TypeScript
import { Head, Link, router } from '@inertiajs/react';
|
|
import {
|
|
Boxes,
|
|
CalendarClock,
|
|
FilterX,
|
|
MapPin,
|
|
PackageCheck,
|
|
Search,
|
|
SlidersHorizontal,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
} 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 },
|
|
);
|
|
}
|
|
|
|
function clearFilters() {
|
|
setSearch('');
|
|
setCategory('all');
|
|
setLocation('all');
|
|
setStartsAt('');
|
|
setEndsAt('');
|
|
router.get('/equipamentos', {}, { preserveState: true });
|
|
}
|
|
|
|
const hasActiveFilters =
|
|
search ||
|
|
category !== 'all' ||
|
|
location !== 'all' ||
|
|
startsAt ||
|
|
endsAt;
|
|
|
|
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."
|
|
/>
|
|
|
|
<Card className="border-slate-200 shadow-none dark:border-slate-800">
|
|
<CardContent className="p-4">
|
|
<form onSubmit={submit} className="space-y-4">
|
|
<div className="relative">
|
|
<Search className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
|
|
<Input
|
|
value={search}
|
|
onChange={(event) =>
|
|
setSearch(event.target.value)
|
|
}
|
|
placeholder="Pesquisar equipamentos por nome, modelo ou etiqueta…"
|
|
className="h-12 pl-10 text-base"
|
|
/>
|
|
</div>
|
|
<details className="group">
|
|
<summary className="flex cursor-pointer items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
|
|
<SlidersHorizontal className="size-4" />
|
|
Mais filtros
|
|
</summary>
|
|
<div className="mt-4 grid gap-4 lg:grid-cols-5">
|
|
<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>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="submit"
|
|
className="flex-1"
|
|
>
|
|
<SlidersHorizontal /> Filtrar
|
|
</Button>
|
|
{hasActiveFilters && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={clearFilters}
|
|
>
|
|
<FilterX />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
<span className="font-medium">
|
|
{assets.total} equipamento
|
|
{assets.total === 1 ? '' : 's'}
|
|
</span>
|
|
{lastSyncedAt && (
|
|
<span className="flex items-center gap-1">
|
|
<span className="size-2 rounded-full bg-emerald-500" />
|
|
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>
|
|
{hasActiveFilters && (
|
|
<Button
|
|
variant="link"
|
|
onClick={clearFilters}
|
|
className="mt-2"
|
|
>
|
|
Limpar filtros
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{assets.last_page > 1 && (
|
|
<nav className="flex justify-center gap-2">
|
|
{assets.links.map((link, index) => {
|
|
const isFirst = index === 0;
|
|
const isLast = index === assets.links.length - 1;
|
|
|
|
if (isFirst || isLast) {
|
|
const icon = isFirst ? (
|
|
<ChevronLeft className="size-4" />
|
|
) : (
|
|
<ChevronRight className="size-4" />
|
|
);
|
|
|
|
return (
|
|
<Button
|
|
key={index}
|
|
asChild={Boolean(link.url)}
|
|
disabled={!link.url}
|
|
variant="outline"
|
|
size="sm"
|
|
className="min-w-[32px]"
|
|
>
|
|
{link.url ? (
|
|
<Link
|
|
href={link.url}
|
|
preserveScroll
|
|
>
|
|
{icon}
|
|
</Link>
|
|
) : (
|
|
<span>{icon}</span>
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<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-all hover:-translate-y-1 hover:border-primary/40 hover:shadow-lg dark:border-slate-800">
|
|
<div className="relative flex h-40 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 transition-transform group-hover:scale-105"
|
|
/>
|
|
) : (
|
|
<PackageCheck className="size-14 text-slate-300 transition group-hover:text-primary/50" />
|
|
)}
|
|
<Badge
|
|
variant="outline"
|
|
className="absolute top-3 right-3 bg-white/90 backdrop-blur-sm dark:bg-slate-900/90"
|
|
>
|
|
{periodSelected ? 'Livre no período' : 'Requisitável'}
|
|
</Badge>
|
|
</div>
|
|
<CardContent className="space-y-4 pb-5">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="truncate font-semibold">{asset.name}</h2>
|
|
<p className="mt-1 truncate text-sm text-muted-foreground">
|
|
{asset.model_name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground">
|
|
<span className="rounded bg-muted px-2 py-0.5 font-mono">
|
|
{asset.asset_tag}
|
|
</span>
|
|
{asset.category_name && (
|
|
<span className="rounded bg-muted px-2 py-0.5">
|
|
{asset.category_name}
|
|
</span>
|
|
)}
|
|
{asset.location_name && (
|
|
<span className="flex items-center gap-1 rounded bg-muted px-2 py-0.5">
|
|
<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' }],
|
|
};
|