gabriel/beetask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Gabriel Menezes 2026-10-31 19:42:23 -04:00
parent d3243b3fb5
commit 02fa938d28
4 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/reports/CreateTemplateModal.tsx
View file

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

1
frontend/src/components/reports/EditTemplateModal.tsx
View file

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

56
frontend/src/components/reports/GenerateReportModal.tsx
View file

@ -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 */}

2
frontend/src/pages/ReportsPage.tsx
View file

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