From cb01415dfac8de90b60ad64bb505e88f338a5011 Mon Sep 17 00:00:00 2001 From: guilherme Date: Thu, 11 Dec 2025 14:14:51 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20refatorar=20componente=20RetrospectiveS?= =?UTF-8?q?lides=20para=20melhorar=20a=20estrutura=20e=20a=20apresenta?= =?UTF-8?q?=C3=A7=C3=A3o=20visual?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/retrospective-slides.tsx | 526 +++++++++--------- 1 file changed, 263 insertions(+), 263 deletions(-) diff --git a/src/views/components/retrospective-slides.tsx b/src/views/components/retrospective-slides.tsx index 30af17e..5fddf07 100644 --- a/src/views/components/retrospective-slides.tsx +++ b/src/views/components/retrospective-slides.tsx @@ -29,28 +29,25 @@ export function RetrospectiveSlides() { error: errorSystems, } = useMetricsBySystems(cpf, ano); - // Calcula slides baseado nos dados disponíveis const slides: number[] = []; - slides.push(0); // Slide inicial - if (metricsPortal && metricsPortal.length > 0) slides.push(1); // Slide com portal principal + slides.push(0); + if (metricsPortal && metricsPortal.length > 0) slides.push(1); if ( (metricsPortal && metricsPortal.length > 0) || (metricsSystems && metricsSystems.length > 0) ) { - slides.push(2); // Slide com podio de aplicações + slides.push(2); } - slides.push(3); // Slide final + slides.push(3); const isLoading = isLoadingPortal || isLoadingSystems; const hasError = errorPortal || errorSystems; - // Extrai total de acessos const totalAcessos = [ ...(metricsPortal || []), ...(metricsSystems || []), ].reduce((acc, item) => acc + item.totalAcessos, 0); - // Top sistemas/portais por acessos const topItems = [...(metricsPortal || []), ...(metricsSystems || [])] .filter((item) => (item.nomeSistema || '').toLowerCase() !== 'agportal') .sort((a, b) => b.totalAcessos - a.totalAcessos) @@ -89,247 +86,249 @@ export function RetrospectiveSlides() { <>
-
- - Ágape Logo - +
+
+ + Ágape Logo + - - Sua Retrospectiva -
- Ágape {ano} - + + Sua Retrospectiva +
+ Ágape {ano} + - - Um ano de conquistas, eficiência e transparência na gestão - pública - + + Um ano de conquistas, eficiência e transparência na gestão + pública + - - Transparência - • - Eficiência - • - Parceria - + + Transparência + • + Eficiência + • + Parceria + +
{metricsPortal && metricsPortal.length > 0 && ( <> - {/* Slide 1: Acessos no AgPortal */} - {/* Decoração de fundo sutil */}
-
- +
+
- + transition={{ duration: 0.6 }}> + + + + + + + AgPortal
+ Sua Porta de Entrada Digital + + + + + O AgPortal é o hub central que conecta todos os + colaboradores às ferramentas, sistemas e informações + necessárias para o dia a dia de trabalho. + - - - AgPortal
- Sua Porta de Entrada Digital - - +
+ +
+
+ {metricsPortal + .reduce((acc, p) => acc + p.totalAcessos, 0) + .toLocaleString('pt-BR')} +
- {/* Descrição */} - - O AgPortal é o hub central que conecta todos os - colaboradores às ferramentas, sistemas e informações - necessárias para o dia a dia de trabalho. - - - -
- -
-
- {metricsPortal - .reduce((acc, p) => acc + p.totalAcessos, 0) - .toLocaleString('pt-BR')} +
+ + Acessos em {ano} + +
- -
- - Acessos em {ano} - -
-
- + +
- {/* Slide 2: Top 5 Aplicativos com Horas */} -
-
- -
- - - Top 5 Aplicativos - -
+
+
+
+ +
+ + + Top 5 Aplicativos + +
-

- Aplicativos mais acessados -

+

+ Aplicativos mais acessados +

-

- Aqui estão as 5 aplicações com mais acessos e o total - de horas registradas nelas durante o ano. -

- -
+

+ Aqui estão as 5 aplicações com mais acessos e o + total de horas registradas nelas durante o ano. +

+ +
-
-
- {topItems.slice(0, 5).map((item, index) => { - const medalColors = [ - 'bg-yellow-400 text-yellow-900', - 'bg-gray-300 text-gray-900', - 'bg-orange-400 text-orange-900', - 'bg-blue-400/20 text-blue-300', - 'bg-purple-400/20 text-purple-300', - ]; - const isMedal = index < 3; - const medalColor = - medalColors[index] || 'bg-white/20'; - - return ( - -
- {index === 0 && '🥇'} - {index === 1 && '🥈'} - {index === 2 && '🥉'} - {index >= 3 && `#${index + 1}`} -
- -
-

- {item.nomeSistema} -

-

- {item.totalAcessos.toLocaleString('pt-BR')}{' '} - acessos •{' '} - {Math.round( - item.horasLogadas || 0, - ).toLocaleString('pt-BR')}{' '} - h -

-
+
+
+ {topItems.slice(0, 5).map((item, index) => { + const medalColors = [ + 'bg-yellow-400 text-yellow-900', + 'bg-gray-300 text-gray-900', + 'bg-orange-400 text-orange-900', + 'bg-blue-400/20 text-blue-300', + 'bg-purple-400/20 text-purple-300', + ]; + const isMedal = index < 3; + const medalColor = + medalColors[index] || 'bg-white/20'; + return ( -

- {( - (item.totalAcessos / (totalAcessos || 1)) * - 100 - ).toFixed(0)} - % -

-
- +
+ {index === 0 && '🥇'} + {index === 1 && '🥈'} + {index === 2 && '🥉'} + {index >= 3 && `#${index + 1}`}
+ +
+

+ {item.nomeSistema} +

+

+ {item.totalAcessos.toLocaleString('pt-BR')}{' '} + acessos •{' '} + {Math.round( + item.horasLogadas || 0, + ).toLocaleString('pt-BR')}{' '} + h +

+
+ + +

+ {( + (item.totalAcessos / (totalAcessos || 1)) * + 100 + ).toFixed(0)} + % +

+
+ +
+ - - ); - })} + ); + })} +
@@ -338,59 +337,60 @@ export function RetrospectiveSlides() { )} -
-
- - - +
+
+
+ + + -

- A Ágape deseja a você um {ano + 1} repleto de sucesso! -

+

+ A Ágape deseja a você um {ano + 1} repleto de sucesso! +

-

- Obrigado por fazer parte desta jornada de transformação - digital na gestão pública. Sua dedicação é essencial para - construirmos um serviço público mais eficiente e - transparente. -

- - -

© {ano} Ágape Sistemas e Tecnologia

-

- O Futuro da Gestão Pública começa aqui! +

+ Obrigado por fazer parte desta jornada de transformação + digital na gestão pública. Sua dedicação é essencial para + construirmos um serviço público mais eficiente e + transparente.

- -
-
-
- console.log('Contact clicked')} - /> + +

© {ano} Ágape Sistemas e Tecnologia

+

+ O Futuro da Gestão Pública começa aqui! +

+ +
+ +
+
+ console.log('Contact clicked')} + /> +
@@ -400,4 +400,4 @@ export function RetrospectiveSlides() { )}
); -} +} \ No newline at end of file