139 lines
3.9 KiB
TypeScript
139 lines
3.9 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { Dialog, DialogTrigger } from '@/views/components/ui/dialog';
|
|
import { useMemo, useState } from 'react';
|
|
|
|
import type { Protocol } from '@/services/protocolService';
|
|
import { InfoIcon } from '@phosphor-icons/react';
|
|
import { ProtocolsTable } from '../components/protocols-table';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '../components/ui/card';
|
|
|
|
const statuses = ['Criado', 'Tramitado', 'Recebido', 'Finalizado', 'Cancelado'];
|
|
|
|
const sampleProtocols: Protocol[] = [
|
|
{
|
|
id: 'P-2025-001',
|
|
title: 'Solicitação de compra - materiais de escritório',
|
|
date: '2025-11-01',
|
|
sender: 'João Silva',
|
|
location: 'Almoxarifado',
|
|
status: 'Criado',
|
|
},
|
|
{
|
|
id: 'P-2025-002',
|
|
title: 'Requisição de manutenção - ar-condicionado',
|
|
date: '2025-10-28',
|
|
sender: 'Maria Oliveira',
|
|
location: 'Prédio A',
|
|
status: 'Tramitado',
|
|
},
|
|
{
|
|
id: 'P-2025-003',
|
|
title: 'Entrega de documento - processo X',
|
|
date: '2025-11-10',
|
|
sender: 'Gustavo Pereira',
|
|
location: 'Protocolo Central',
|
|
status: 'Recebido',
|
|
},
|
|
{
|
|
id: 'P-2025-004',
|
|
title: 'Encaminhamento para setor jurídico',
|
|
date: '2025-09-15',
|
|
sender: 'Setor RH',
|
|
location: 'Jurídico',
|
|
status: 'Finalizado',
|
|
},
|
|
{
|
|
id: 'P-2025-005',
|
|
title: 'Cancelamento de protocolo teste',
|
|
date: '2025-08-20',
|
|
sender: 'Teste',
|
|
location: 'Arquivo',
|
|
status: 'Cancelado',
|
|
},
|
|
{
|
|
id: 'P-2025-006',
|
|
title: 'Solicitação de acesso à sala de reunião',
|
|
date: '2025-11-12',
|
|
sender: 'Carla Dias',
|
|
location: 'Recepção',
|
|
status: 'Recebido',
|
|
},
|
|
{
|
|
id: 'P-2025-007',
|
|
title: 'Pedido de correção de dados cadastrais',
|
|
date: '2025-11-20',
|
|
sender: 'Paulo Costa',
|
|
location: 'Cadastro',
|
|
status: 'Finalizado',
|
|
},
|
|
{
|
|
id: 'P-2025-008',
|
|
title: 'Requisição de treinamento',
|
|
date: '2025-11-22',
|
|
sender: 'Equipe TI',
|
|
location: 'Sala 3',
|
|
status: 'Criado',
|
|
},
|
|
];
|
|
|
|
export function ProtocolsDashboard() {
|
|
const [openStatus, setOpenStatus] = useState<string | null>(null);
|
|
const [paginatedItems] = useState<Protocol[]>(sampleProtocols);
|
|
|
|
const counts = useMemo(() => {
|
|
const acc: Record<string, number> = { Todos: paginatedItems.length };
|
|
for (const s of statuses) acc[s] = 0;
|
|
for (const p of paginatedItems) {
|
|
const st = (p as any).status as string;
|
|
if (st && acc[st] !== undefined) acc[st] += 1;
|
|
}
|
|
return acc;
|
|
}, [paginatedItems]);
|
|
|
|
return (
|
|
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5">
|
|
{statuses.map((status) => {
|
|
const itemsForStatus = paginatedItems.filter(
|
|
(p) => (p as any).status === status,
|
|
);
|
|
|
|
return (
|
|
<Dialog
|
|
key={status}
|
|
open={openStatus === status}
|
|
onOpenChange={(v) => setOpenStatus(v ? status : null)}>
|
|
<DialogTrigger asChild>
|
|
<Card className="cursor-pointer hover:shadow-md transition-shadow bg-muted/50">
|
|
<CardHeader className="pb-2">
|
|
<CardDescription className="flex items-center gap-1">
|
|
{`Protocolos ${status.toLowerCase()}`}
|
|
<span title="Informações sobre os protocolos">
|
|
<InfoIcon size={14} />
|
|
</span>
|
|
</CardDescription>
|
|
<CardTitle className="text-3xl">
|
|
{counts[status] ?? 0}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent></CardContent>
|
|
</Card>
|
|
</DialogTrigger>
|
|
|
|
<ProtocolsTable
|
|
tasks={itemsForStatus}
|
|
title={`Protocolos ${status.toLowerCase()}`}
|
|
description={`Lista de protocolos com status ${status.toLowerCase()}.`}
|
|
/>
|
|
</Dialog>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|