feat: establish reservation portal foundation
This commit is contained in:
231
resources/js/pages/assets/index.tsx
Normal file
231
resources/js/pages/assets/index.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import { Head, Link, router } from '@inertiajs/react';
|
||||
import {
|
||||
Boxes,
|
||||
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 };
|
||||
categories: string[];
|
||||
locations: string[];
|
||||
lastSyncedAt: string | null;
|
||||
};
|
||||
|
||||
export default function AssetsIndex({
|
||||
assets,
|
||||
filters,
|
||||
categories,
|
||||
locations,
|
||||
lastSyncedAt,
|
||||
}: Props) {
|
||||
const [search, setSearch] = useState(filters.search ?? '');
|
||||
const [category, setCategory] = useState(filters.category ?? 'all');
|
||||
const [location, setLocation] = useState(filters.location ?? 'all');
|
||||
|
||||
function submit(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
router.get(
|
||||
'/equipamentos',
|
||||
{
|
||||
search: search || undefined,
|
||||
category: category === 'all' ? undefined : category,
|
||||
location: location === 'all' ? undefined : location,
|
||||
},
|
||||
{ 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 md:grid-cols-[1fr_220px_220px_auto]"
|
||||
>
|
||||
<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="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>
|
||||
<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} />
|
||||
))}
|
||||
</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 }: { asset: Asset }) {
|
||||
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">
|
||||
Disponí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?asset=${asset.id}`}>
|
||||
Requisitar equipamento
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
AssetsIndex.layout = {
|
||||
breadcrumbs: [{ title: 'Equipamentos', href: '/equipamentos' }],
|
||||
};
|
||||
Reference in New Issue
Block a user