feat(protocols): adicionar lógica de contagem e filtragem de protocolos por status
parent
a6fe2ccc85
commit
5e133d02e2
|
|
@ -1,5 +1,5 @@
|
||||||
import { Dialog, DialogTrigger } from '@/views/components/ui/dialog';
|
import { Dialog, DialogTrigger } from '@/views/components/ui/dialog';
|
||||||
import { useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
|
|
||||||
import type { Protocol } from '@/services/protocolService';
|
import type { Protocol } from '@/services/protocolService';
|
||||||
import { InfoIcon } from '@phosphor-icons/react';
|
import { InfoIcon } from '@phosphor-icons/react';
|
||||||
|
|
@ -14,19 +14,99 @@ import {
|
||||||
|
|
||||||
const statuses = ['Criado', 'Tramitado', 'Recebido', 'Finalizado', 'Cancelado'];
|
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() {
|
export function ProtocolsDashboard() {
|
||||||
const [open, setOpen] = useState(false);
|
const [openStatus, setOpenStatus] = useState<string | null>(null);
|
||||||
const [paginatedItems] = useState<Protocol[]>([]);
|
const [paginatedItems] = useState<Protocol[]>(sampleProtocols);
|
||||||
const [counts] = useState<Record<string, number>>({ Todos: 0 });
|
|
||||||
|
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 (
|
return (
|
||||||
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5">
|
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5">
|
||||||
{statuses.map((status) => (
|
{statuses.map((status) => {
|
||||||
|
const itemsForStatus = paginatedItems.filter(
|
||||||
|
(p) => (p as any).status === status,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
<Dialog
|
<Dialog
|
||||||
open={open}
|
key={status}
|
||||||
onOpenChange={(v) => {
|
open={openStatus === status}
|
||||||
setOpen(v);
|
onOpenChange={(v) => setOpenStatus(v ? status : null)}>
|
||||||
}}>
|
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
<Card className="cursor-pointer hover:shadow-md transition-shadow bg-muted/50">
|
<Card className="cursor-pointer hover:shadow-md transition-shadow bg-muted/50">
|
||||||
<CardHeader className="pb-2">
|
<CardHeader className="pb-2">
|
||||||
|
|
@ -45,12 +125,13 @@ export function ProtocolsDashboard() {
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
|
|
||||||
<ProtocolsTable
|
<ProtocolsTable
|
||||||
tasks={paginatedItems}
|
tasks={itemsForStatus}
|
||||||
title={`Protocolos ${status.toLowerCase()}`}
|
title={`Protocolos ${status.toLowerCase()}`}
|
||||||
description={`Lista de protocolos com status ${status.toLowerCase()}.`}
|
description={`Lista de protocolos com status ${status.toLowerCase()}.`}
|
||||||
/>
|
/>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue