> ## 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.

# Crear un rastreador de PTO para el equipo

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="Crear un rastreador de PTO del equipo" description="Describe tu herramienta y Devin la crea, prueba y verifica de extremo a extremo." prompt="Crea un rastreador interno de PTO para nuestro equipo en /internal/pto. Los empleados envían solicitudes de tiempo libre con un rango de fechas, tipo (vacaciones, enfermedad, personal) y una nota opcional. Los managers ven una cola de solicitudes pendientes y las aprueban o rechazan. La vista de calendario muestra quién está fuera, con colores según el tipo. El panel muestra el saldo de PTO de cada empleado (20 días/año). Los empleados no pueden exceder su saldo ni superponer PTO existente. Muestra una advertencia si compañeros de equipo ya están fuera. Envía notificaciones de Slack al enviar y al aprobar/rechazar mediante SLACK_WEBHOOK_URL. Usa nuestra app Next.js, Prisma ORM y los componentes existentes DataTable y Calendar. Antes de escribir código, describe tu plan para revisión. Escribe pruebas para los cálculos de saldo, la detección de solapamientos y el flujo de aprobación. Prueba cada página y flujo en el navegador: enviar, aprobar, rechazar, revisar el calendario y verificar el panel. No abras un pull request (PR) hasta que todo funcione de extremo a extremo." category="Desarrollo de funcionalidades" features="" />

<div className="uc-detail-wrapper">
  <Tip>¿No quieres configurarlo manualmente? Pega un enlace a esta página en una sesión de Devin y pídele que lo configure todo por ti.</Tip>

  <Steps>
    <Step title="(Opcional) Delimita la base de código con Ask Devin">
      Si ya cuentas con herramientas internas en tu aplicación, usa [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) para entender los patrones existentes antes de escribir tu especificación. Esto es especialmente útil si quieres que la nueva herramienta coincida con la arquitectura de lo que ya hay:

      <PromptBlock agent="ada">
        ```txt Scope internal tools architecture theme={null}
        Muéstrame cómo están estructuradas nuestras herramientas internas existentes:
        1. ¿Qué páginas existen en /internal/ y cómo están organizadas?
        2. ¿Cómo manejan las páginas internas la autenticación y el control de acceso basado en roles?
        3. ¿Qué componentes de UI compartidos usan (tablas, formularios, modales)?
        4. ¿Cómo están estructuradas las migraciones de base de datos en nuestro esquema de Prisma?
        5. ¿Existen patrones de notificaciones ya definidos (Slack, correo electrónico)?
        ```
      </PromptBlock>

      Usa las respuestas para completar tu especificación con referencias de archivos concretas, nombres de componentes y patrones, de modo que Devin construya algo coherente con tus herramientas existentes. También puedes iniciar una sesión de Devin directamente desde Ask Devin, y se conservará todo lo que haya aprendido como contexto.
    </Step>

    <Step title="Escribe una especificación detallada">
      Las herramientas internas — rastreadores de PTO, paneles de administración, scripts de datos, utilidades de CLI — son esenciales, pero rara vez se priorizan. Son ideales para Devin porque los requisitos están bien definidos, la audiencia es tu propio equipo, y que “funcione correctamente” importa más que un diseño de píxeles perfectos.

      Sé específico sobre lo que hace la herramienta, qué datos almacena y a qué servicios se conecta. Cuantos más detalles incluyas, más se parecerá la primera versión a lo que realmente necesitas.

      <PromptBlock>
        ```txt Build a team PTO tracker theme={null}
        Crea un rastreador interno de PTO (Paid Time Off) para nuestro equipo en /internal/pto.

        ## Features
        - Las personas empleadas pueden enviar solicitudes de tiempo libre con un rango de fechas, tipo
          (vacaciones, baja médica o asuntos personales) y una nota opcional
        - Las personas manager ven una cola de solicitudes pendientes y pueden aprobar o rechazar
          cada una
        - Una vista de calendario muestra quién estará fuera en qué días, con código de color por tipo
        - Un panel muestra el saldo de PTO de cada persona: días totales,
          días usados, días restantes y solicitudes pendientes
        - Cada persona empleada recibe 20 días de PTO al año
        - Las personas empleadas no pueden solicitar más días de los que tienen en su saldo restante
        - Las solicitudes no pueden superponerse con su propio PTO aprobado existente
        - Muestra una advertencia (no un bloqueo) si compañeros de equipo ya están fuera durante
          las mismas fechas

        ## Notifications
        - Notificación de Slack a la persona manager cuando se envía una solicitud
        - Notificación de Slack a la persona empleada cuando se aprueba o se rechaza
        - Usa SLACK_WEBHOOK_URL desde las variables de entorno

        ## Technical notes
        - Usa nuestra app existente de Next.js y el ORM Prisma
        - Sigue el patrón de diseño de /internal/users
        - Reutiliza los componentes DataTable y Calendar de src/components/ui/

        ## Planning
        - Antes de escribir código, describe tu plan de implementación y compártelo
          conmigo para su revisión

        ## Testing
        - Escribe pruebas para los cálculos de saldo, la detección de solapamiento de fechas
          y el flujo de aprobación
        - Después de implementar, levanta el servidor de desarrollo y prueba cada página
          y flujo en el navegador: envía una solicitud, apruébala, rechaza una,
          revisa el calendario, verifica los números del panel y prueba casos límite
          como fechas superpuestas y exceder el saldo
        - No abras un PR hasta que todo funcione de extremo a extremo
        ```
      </PromptBlock>

      También puedes iterar sobre tu especificación usando Ask Devin: pega un borrador y pídele que identifique brechas o sugiera mejoras basadas en tu base de código.
    </Step>

    <Step title="Añadir credenciales">
      Pasa cualquier API key o token que Devin necesite mediante [Secrets](/es/product-guides/secrets); en este caso, la URL del webhook de Slack.

      El enfoque más sencillo es almacenarlos como secrets de la organización antes de iniciar la sesión:

      1. Ve a **Settings > Secrets** y añade `SLACK_WEBHOOK_URL`
      2. Devin accede a los secrets como variables de entorno, de modo que nunca quedan hardcodeadas en tu código fuente.

      <Note>Los secrets de organización deben añadirse **antes** de iniciar la sesión: se inyectan al inicio de la sesión. Como alternativa, puedes proporcionar secrets durante la sesión usando el chat, y Devin también te pedirá de forma proactiva cualquier credencial que necesite cuando detecte variables de entorno faltantes.</Note>
    </Step>

    <Step title="Guía la sesión con comandos de barra diagonal (/)">
      Una vez que comience la sesión, puedes usar comandos slash para guiar el flujo de trabajo de Devin:

      * **`/plan`** — Pídele a Devin que cree un plan de implementación detallado antes de escribir cualquier código. Revisa el plan y sugiere cambios antes de que empiece a implementar.
      * **`/test`** — Indícale a Devin que ejecute todas las pruebas y verifique su trabajo. Úsalo después de cada hito importante para detectar problemas a tiempo.
      * **`/review`** — Pídele a Devin que revise su propio código en busca de errores, casos límite y problemas de estilo antes de abrir la PR.

      Estos comandos funcionan en cualquier momento durante la sesión: usa `/plan` al inicio, `/test` después de implementar cada funcionalidad y `/review` antes de la PR final.
    </Step>

    <Step title="Devin lo crea y comprueba que funciona">
      Devin trata las herramientas internas como cualquier funcionalidad en producción: escribe el código, añade pruebas y luego abre la aplicación en su navegador integrado para verificar que la interfaz funciona de extremo a extremo.

      1. **Investiga tu base de código** — Encuentra tus componentes `DataTable` y `Calendar`, lee tu esquema de Prisma y estudia el diseño actual de la página `/internal/`
      2. **Crea la migración de la base de datos** — Añade las tablas `pto_requests` y `pto_balances` a través de Prisma
      3. **Construye las páginas** — Formulario para enviar solicitudes, cola de aprobación para managers, vista de calendario y panel de saldos bajo `/internal/pto`
      4. **Integra Slack** — Envía notificaciones por webhook cuando se envían solicitudes y cuando se aprueban o rechazan
      5. **Escribe pruebas** — Pruebas unitarias para los cálculos de saldo de PTO y la detección de solapamiento de fechas, pruebas de API para los endpoints de solicitudes, pruebas de integración para el flujo de aprobación
      6. **Abre la aplicación en su navegador** — Navega a cada página, envía una solicitud de PTO de prueba, la aprueba desde la vista de manager, verifica que el calendario se actualiza, comprueba los números del panel y prueba casos límite como fechas solapadas y saldos excedidos
      7. **Abre una solicitud de extracción (PR)** — Entrega todo: migración, script de datos iniciales, código de la aplicación, pruebas y una sección en el README que explica cómo usar la herramienta

      La verificación en el navegador detecta problemas que las pruebas automatizadas no capturan: diseños de formularios defectuosos, un calendario que se renderiza pero no responde a los clics, o un botón de envío que no limpia el formulario tras completarse correctamente.
    </Step>

    <Step title="Amplía tu herramienta">
      Una vez que la herramienta base funcione, agrega funciones en sesiones posteriores:

      <PromptBlock>
        ```txt Añadir detección de conflictos de PTO theme={null}
        Cuando un empleado envíe una solicitud de PTO, verifica si
        alguien más de su equipo ya está fuera durante las mismas fechas.
        Muestra una advertencia en la interfaz de usuario:
        "Hay 2 personas más de tu equipo fuera del 20 al 22 de noviembre".
        No bloquees la solicitud, solo muestra la superposición para que los
        managers puedan planificar.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Crear una exportación CSV para RR. HH. theme={null}
        Agrega un botón en el panel de PTO que exporte todo el tiempo libre
        aprobado del trimestre actual como un archivo CSV. Columnas: nombre del
        empleado, fechas, tipo, días utilizados, saldo restante.
        El equipo de RR. HH. lo descarga mensualmente para la nómina.
        ```
      </PromptBlock>
    </Step>

    <Step title="Revisa el pull request (PR) con Devin Review">
      Una vez que Devin abra el PR, utiliza [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) para revisar los cambios. Devin Review dispone de todo el contexto de tu base de código y puede detectar errores, problemas de seguridad e inconsistencias de estilo en todo el diff.
    </Step>
  </Steps>
</div>