> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devinenterprise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Criar um rastreador de PTO da equipe

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Criar um rastreador de PTO para a equipe" description="Descreva sua ferramenta e o Devin a cria, testa e verifica de ponta a ponta." prompt="Crie um rastreador interno de PTO para nossa equipe em /internal/pto. Funcionários enviam solicitações de afastamento com um intervalo de datas, tipo (férias, licença médica, pessoal) e uma observação opcional. Gestores veem uma fila de solicitações pendentes e aprovam ou recusam. A visualização em calendário mostra quem está ausente, com cores por tipo. O painel mostra o saldo de PTO de cada funcionário (20 dias/ano). Os funcionários não podem exceder seu saldo nem ter períodos que se sobreponham a PTO já existente. Emita um alerta se colegas de equipe já estiverem ausentes. Envie notificações no Slack ao enviar e ao aprovar/recusar, via SLACK_WEBHOOK_URL. Use nosso app Next.js, Prisma ORM e os componentes existentes DataTable e Calendar. Antes de escrever código, descreva seu plano para revisão. Escreva testes para os cálculos de saldo, detecção de sobreposição e o fluxo de aprovação. Teste cada página e fluxo no navegador — enviar, aprovar, recusar, conferir o calendário, verificar o painel. Não abra uma PR até que tudo funcione de ponta a ponta." category="Desenvolvimento de funcionalidades" features="" />

<div className="uc-detail-wrapper">
  <Tip>Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça para ele configurar tudo para você.</Tip>

  <Steps>
    <Step title="(Opcional) defina o escopo da base de código com o Ask Devin">
      Se você já tem ferramentas internas na sua aplicação, use o [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) para entender os padrões existentes antes de escrever sua especificação. Isso é especialmente útil se você quiser que a nova ferramenta siga a mesma arquitetura do que já existe:

      <PromptBlock agent="ada">
        ```txt Scope internal tools architecture theme={null}
        Mostre como nossas ferramentas internas existentes estão estruturadas:
        1. Quais páginas existem em /internal/ e como elas são organizadas?
        2. Como as páginas internas lidam com autenticação e controle de acesso baseado em função?
        3. Quais componentes de UI compartilhados elas usam (tabelas, formulários, modais)?
        4. Como as migrações de banco de dados são estruturadas no nosso schema do Prisma?
        5. Já existem padrões de notificação (Slack, e-mail)?
        ```
      </PromptBlock>

      Use as respostas para preencher sua especificação com referências específicas de arquivos, nomes de componentes e padrões, para que o Devin construa algo consistente com suas ferramentas existentes. Você também pode iniciar uma sessão do Devin diretamente a partir do Ask Devin, e ele levará em conta tudo o que aprendeu como contexto.
    </Step>

    <Step title="Redija uma especificação detalhada">
      Ferramentas internas — rastreadores de PTO, painéis administrativos, scripts de dados, utilitários de CLI — são essenciais, mas raramente priorizadas. Elas são ideais para o Devin porque os requisitos são bem definidos, o público é o seu time e "funcionar corretamente" importa mais do que um design pixel-perfect.

      Seja específico sobre o que a ferramenta faz, quais dados ela armazena e a quais serviços ela se conecta. Quanto mais detalhes você incluir, mais a primeira versão vai corresponder ao que você precisa.

      <PromptBlock>
        ```txt Build a team PTO tracker theme={null}
        Crie um rastreador interno de PTO para o nosso time em /internal/pto.

        ## Features
        - Funcionários podem enviar solicitações de folga (PTO) com um intervalo de datas, tipo
          (férias, licença médica ou pessoal) e uma observação opcional
        - Gestores veem uma fila de solicitações pendentes e podem aprovar ou recusar
          cada uma
        - Uma visualização em calendário mostra quem estará ausente em quais dias, com cores por tipo
        - Um dashboard mostra o saldo de PTO de cada funcionário: total de dias,
          dias usados, dias restantes e solicitações pendentes
        - Cada funcionário recebe 20 dias de PTO por ano
        - Funcionários não podem solicitar mais dias do que o saldo restante
        - Solicitações não podem se sobrepor ao próprio PTO já aprovado
        - Mostrar um aviso (sem bloquear a solicitação) se colegas de time já estiverem de folga
          nas mesmas datas

        ## Notifications
        - Notificação no Slack para o gestor quando uma solicitação for enviada
        - Notificação no Slack para o funcionário quando ela for aprovada ou recusada
        - Usar SLACK_WEBHOOK_URL das variáveis de ambiente

        ## Technical notes
        - Usar nosso app Next.js existente e Prisma ORM
        - Seguir o padrão de layout em /internal/users
        - Reutilizar os componentes DataTable e Calendar de src/components/ui/

        ## Planning
        - Antes de escrever código, descreva seu plano de implementação e compartilhe-o
          comigo para revisão

        ## Testing
        - Escreva testes para os cálculos de saldo, detecção de sobreposição de datas
          e o fluxo de aprovação
        - Depois de implementar, inicie o servidor de desenvolvimento e teste cada página
          e fluxo no navegador — envie uma solicitação, aprove, recuse uma,
          verifique o calendário, confira os números do dashboard e teste casos de borda,
          como datas sobrepostas e exceder o saldo
        - Não abra um PR até que tudo funcione de ponta a ponta
        ```
      </PromptBlock>

      Você também pode iterar na sua especificação usando o Ask Devin — cole um rascunho e peça para ele identificar lacunas ou sugerir melhorias com base na sua base de código.
    </Step>

    <Step title="Adicionar credenciais">
      Passe quaisquer chaves de API ou tokens de que o Devin precise via [Secrets](/pt-BR/product-guides/secrets) — neste caso, a URL do webhook do Slack.

      A abordagem mais simples é armazená-los como segredos da organização antes de iniciar a sessão:

      1. Vá para **Settings > Secrets** e adicione `SLACK_WEBHOOK_URL`
      2. O Devin acessa segredos como variáveis de ambiente, de modo que eles nunca fiquem gravados diretamente no seu código-fonte.

      <Note>Segredos da organização devem ser adicionados **antes** de iniciar a sessão — eles são injetados no início da sessão. Como alternativa, você pode fornecer segredos durante a sessão usando o chat, e o Devin também pedirá proativamente quaisquer credenciais de que precisar quando encontrar variáveis de ambiente ausentes.</Note>
    </Step>

    <Step title="Oriente a sessão com comandos de barra (/)">
      Assim que a sessão começar, você pode usar comandos com barra para orientar o fluxo de trabalho do Devin:

      * **`/plan`** — Peça ao Devin para criar um plano de implementação detalhado antes de escrever qualquer código. Revise o plano e sugira alterações antes que ele comece a implementar.
      * **`/test`** — Diga ao Devin para executar todos os testes e validar seu trabalho. Use isso após cada marco importante para detectar problemas cedo.
      * **`/review`** — Peça ao Devin para revisar o próprio código em busca de bugs, casos extremos e problemas de estilo antes de abrir a PR.

      Esses comandos funcionam a qualquer momento durante a sessão — use `/plan` no início, `/test` depois que cada funcionalidade for implementada e `/review` antes da PR final.
    </Step>

    <Step title="Devin cria e verifica se funciona">
      Devin trata ferramentas internas como qualquer funcionalidade de produção — escreve o código, adiciona testes e depois abre o app em seu navegador integrado para verificar se a UI funciona de ponta a ponta.

      1. **Investiga sua base de código** — Encontra seus componentes `DataTable` e `Calendar`, lê seu esquema Prisma e estuda o layout existente da página `/internal/`
      2. **Cria a migration do banco de dados** — Adiciona as tabelas `pto_requests` e `pto_balances` via Prisma
      3. **Constrói as páginas** — Formulário de envio de solicitações, fila de aprovação do gerente, visualização em calendário e dashboard de saldos em `/internal/pto`
      4. **Integra o Slack** — Envia notificações via webhook quando solicitações são enviadas e quando são aprovadas ou negadas
      5. **Escreve testes** — Testes unitários para cálculos de saldo de PTO e detecção de sobreposição de datas, testes de API para os endpoints de solicitação, testes de integração para o fluxo de aprovação
      6. **Abre o app em seu navegador** — Navega por cada página, envia uma solicitação de PTO de teste, aprova a partir da visão do gerente, verifica se o calendário é atualizado, confere os números do dashboard e testa casos limite como datas sobrepostas e saldo excedido
      7. **Abre um PR** — Entrega tudo: migration, script de seed, código da aplicação, testes e uma seção no README explicando como usar a ferramenta

      A verificação no navegador captura problemas que testes automatizados não detectam — layouts de formulário quebrados, um calendário que renderiza mas não responde a cliques, ou um botão de envio que não limpa o formulário após o sucesso.
    </Step>

    <Step title="Expanda sua ferramenta">
      Once the base tool works, add features in follow-up sessions:

      <PromptBlock>
        ```txt Add PTO conflict detection theme={null}
        When an employee submits a PTO request, check if anyone else on their
        team is already out during the same dates. Show a warning in the UI:
        "2 others on your team are out Nov 20-22." Don't block the request,
        just surface the overlap so managers can plan.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Build a CSV export for HR theme={null}
        Add a button on the PTO dashboard that exports all approved time off
        for the current quarter as a CSV. Columns: employee name, dates, type,
        days used, remaining balance. HR downloads this monthly for payroll.
        ```
      </PromptBlock>
    </Step>

    <Step title="Revise o PR com o Devin Review">
      Quando o Devin abrir o PR, use o [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) para revisar as alterações. O Devin Review tem contexto completo da sua base de código e pode detectar bugs, problemas de segurança e inconsistências de estilo em todo o diff.
    </Step>
  </Steps>
</div>