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; 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 ( <>
setSearch(event.target.value) } placeholder="Pesquisar equipamentos por nome, modelo ou etiqueta…" className="h-12 pl-10 text-base" />
Mais filtros
setStartsAt(event.target.value) } className="pl-9" required={Boolean(endsAt)} />
setEndsAt(event.target.value) } required={Boolean(startsAt)} />
{hasActiveFilters && ( )}
{assets.total} equipamento {assets.total === 1 ? '' : 's'} {lastSyncedAt && ( Sincronizado em{' '} {new Intl.DateTimeFormat('pt-PT', { dateStyle: 'short', timeStyle: 'short', }).format(new Date(lastSyncedAt))} )}
{assets.data.length > 0 ? (
{assets.data.map((asset) => ( ))}
) : (

Nenhum equipamento encontrado

Altere os filtros e volte a tentar.

{hasActiveFilters && ( )}
)} {assets.last_page > 1 && ( )}
); } 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 (
{asset.image_url ? ( ) : ( )} {periodSelected ? 'Livre no período' : 'Requisitável'}

{asset.name}

{asset.model_name}

{asset.asset_tag} {asset.category_name && ( {asset.category_name} )} {asset.location_name && ( {asset.location_name} )}
); } AssetsIndex.layout = { breadcrumbs: [{ title: 'Equipamentos', href: '/equipamentos' }], };