feat(reports): show automatic period activities notice in generate and template modals

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>,{' '}

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>,{' '}

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,11 +477,24 @@ export const GenerateReportModal: React.FC<GenerateReportModalProps> = ({
             </div>
           )}
 
-          {/* Lista de Seções que serão preenchidas automaticamente */}
+          {/* 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>
+              <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="p-3.5 rounded-2xl bg-surface-raised/40 border border-border-soft">
+              <div className="pt-2 border-t border-border-soft/60 space-y-1.5">
-              <span className="text-xs font-bold text-foreground block mb-1.5">
+                <span className="text-[10px] font-bold text-muted uppercase tracking-wider block">
-                Listagens Automáticas incluídas no Relatório:
+                  Listagens filtradas por categoria configuradas no modelo:
                 </span>
                 <div className="flex flex-wrap gap-2">
                   {taskListSections.map((sec) => (
@@ -488,8 +502,9 @@ export const GenerateReportModal: React.FC<GenerateReportModalProps> = ({
                       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" />
+                      <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>
                       )}
@@ -498,6 +513,7 @@ export const GenerateReportModal: React.FC<GenerateReportModalProps> = ({
                 </div>
               </div>
             )}
+          </div>
         </form>
 
         {/* Footer */}

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)' },