From 02fa938d28e054c7d0bc87273c10067da6cc90b3 Mon Sep 17 00:00:00 2001
From: Gabriel Menezes <gabrielufmscc@gmail.com>
Date: Sat, 31 Oct 2026 19:42:23 -0400
Subject: [PATCH] feat(reports): show automatic period activities notice in
 generate and template modals

---
 .../reports/CreateTemplateModal.tsx           |  1 +
 .../components/reports/EditTemplateModal.tsx  |  1 +
 .../reports/GenerateReportModal.tsx           | 56 ++++++++++++-------
 frontend/src/pages/ReportsPage.tsx            |  2 +
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/reports/CreateTemplateModal.tsx b/frontend/src/components/reports/CreateTemplateModal.tsx
index 4f1dd4d..135f2a9 100644
--- a/frontend/src/components/reports/CreateTemplateModal.tsx
+++ b/frontend/src/components/reports/CreateTemplateModal.tsx
@@ -257,6 +257,7 @@ export const CreateTemplateModal: React.FC<CreateTemplateModalProps> = ({
               <p className="font-bold text-brand">Tags Nativas Automáticas Disponíveis no Word:</p>
               <p className="text-muted">
                 Você pode utilizar diretamente as tags{' '}
+                <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{atividades}}'}</code> (ou <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{tarefas}}'}</code>, com todas as atividades realizadas no período),{' '}
                 <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{nome}}'}</code> (usuário logado),{' '}
                 <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{periodo}}'}</code> (período de vigência),{' '}
                 <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{data_inicio}}'}</code>,{' '}
diff --git a/frontend/src/components/reports/EditTemplateModal.tsx b/frontend/src/components/reports/EditTemplateModal.tsx
index f2d5d5e..46c5609 100644
--- a/frontend/src/components/reports/EditTemplateModal.tsx
+++ b/frontend/src/components/reports/EditTemplateModal.tsx
@@ -275,6 +275,7 @@ export const EditTemplateModal: React.FC<EditTemplateModalProps> = ({
               <p className="font-bold text-brand">Tags Nativas Automáticas Disponíveis no Word:</p>
               <p className="text-muted">
                 Você pode utilizar diretamente as tags{' '}
+                <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{atividades}}'}</code> (ou <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{tarefas}}'}</code>, com todas as atividades realizadas no período),{' '}
                 <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{nome}}'}</code> (usuário logado),{' '}
                 <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{periodo}}'}</code> (período de vigência),{' '}
                 <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{data_inicio}}'}</code>,{' '}
diff --git a/frontend/src/components/reports/GenerateReportModal.tsx b/frontend/src/components/reports/GenerateReportModal.tsx
index d1ad782..770ac4f 100644
--- a/frontend/src/components/reports/GenerateReportModal.tsx
+++ b/frontend/src/components/reports/GenerateReportModal.tsx
@@ -9,6 +9,7 @@ import {
   FileText,
   Loader2,
   Lock,
+  Tag,
 } from 'lucide-react'
 import { CustomSelect } from '../ui/Select'
 import { reportService, type ReportTemplateOutput } from '../../services/reportService'
@@ -476,28 +477,43 @@ export const GenerateReportModal: React.FC<GenerateReportModalProps> = ({
             </div>
           )}
 
-          {/* Lista de Seções que serão preenchidas automaticamente */}
-          {taskListSections.length > 0 && (
-            <div className="p-3.5 rounded-2xl bg-surface-raised/40 border border-border-soft">
-              <span className="text-xs font-bold text-foreground block mb-1.5">
-                Listagens Automáticas incluídas no Relatório:
+          {/* Listagens de Atividades e Tarefas Preenchidas Automaticamente */}
+          <div className="p-4 rounded-2xl bg-surface-raised/40 border border-border-soft space-y-2.5">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-bold text-foreground flex items-center gap-1.5">
+                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                Atividades e Tarefas (Preenchimento Automático)
               </span>
-              <div className="flex flex-wrap gap-2">
-                {taskListSections.map((sec) => (
-                  <span
-                    key={sec.sectionKey}
-                    className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-brand/10 text-brand border border-brand/20"
-                  >
-                    <CheckCircle2 className="w-3 h-3" />
-                    <span>{sec.title}</span>
-                    {sec.filterCategoryName && (
-                      <span className="text-[10px] text-muted">({sec.filterCategoryName})</span>
-                    )}
-                  </span>
-                ))}
-              </div>
+              <span className="text-[10px] text-muted font-mono font-semibold">{'{{atividades}}'} / {'{{tarefas}}'}</span>
             </div>
-          )}
+
+            <p className="text-[11px] text-muted leading-relaxed">
+              O BeeTask busca todas as atividades que você trabalhou ou concluiu no período de vigência selecionado e preenche automaticamente as tabelas e listas no Word sob a tag <code className="text-brand font-bold bg-brand/10 px-1 py-0.5 rounded">{'{{atividades}}'}</code>.
+            </p>
+
+            {taskListSections.length > 0 && (
+              <div className="pt-2 border-t border-border-soft/60 space-y-1.5">
+                <span className="text-[10px] font-bold text-muted uppercase tracking-wider block">
+                  Listagens filtradas por categoria configuradas no modelo:
+                </span>
+                <div className="flex flex-wrap gap-2">
+                  {taskListSections.map((sec) => (
+                    <span
+                      key={sec.sectionKey}
+                      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-brand/10 text-brand border border-brand/20"
+                    >
+                      <Tag className="w-3 h-3" />
+                      <span>{sec.title}</span>
+                      <code className="text-[10px] text-muted font-mono">{`{{${sec.sectionKey}}}`}</code>
+                      {sec.filterCategoryName && (
+                        <span className="text-[10px] text-muted">({sec.filterCategoryName})</span>
+                      )}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
         </form>
 
         {/* Footer */}
diff --git a/frontend/src/pages/ReportsPage.tsx b/frontend/src/pages/ReportsPage.tsx
index c671e11..da67441 100644
--- a/frontend/src/pages/ReportsPage.tsx
+++ b/frontend/src/pages/ReportsPage.tsx
@@ -97,6 +97,8 @@ export const ReportsPage: React.FC = () => {
   }
 
   const standardTags = [
+    { tag: '{{atividades}}', desc: 'Lista de todas as atividades/tarefas trabalhadas ou concluídas no período' },
+    { tag: '{{tarefas}}', desc: 'Alias alternativo para a listagem geral de atividades no período' },
     { tag: '{{nome}}', desc: 'Nome do colaborador (pega automaticamente do usuário logado)' },
     { tag: '{{periodo}}', desc: 'Período formatado no padrão escolhido no modelo (ex.: 01/10/2026 até 31/10/2026)' },
     { tag: '{{data_inicio}}', desc: 'Data inicial do período escolhido (ex: 01/10/2026)' },