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

# Créer un outil de suivi des congés pour l’équipe

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="Créer un outil de suivi des congés de l'équipe" description="Décrivez votre outil et Devin le conçoit, le teste et le valide de bout en bout." prompt="Créez un outil interne de suivi des congés pour notre équipe à l’URL /internal/pto. Les employés soumettent des demandes de congés avec une plage de dates, un type (vacances, maladie, personnel) et une note facultative. Les managers voient une file d’attente de demandes en attente et les approuvent ou les refusent. Une vue calendrier indique qui est absent, avec un code couleur par type. Un tableau de bord affiche le solde de congés de chaque employé (20 jours/an). Les employés ne peuvent pas dépasser leur solde ni créer de chevauchement avec des congés existants. Affichez un avertissement si des coéquipiers sont déjà absents. Notifications Slack lors de la soumission et de l’approbation/du refus via SLACK_WEBHOOK_URL. Utilisez notre application Next.js, Prisma ORM et les composants existants DataTable et Calendar. Avant d’écrire du code, présentez votre plan pour relecture. Écrivez des tests pour les calculs de solde, la détection de chevauchement et le flux d’approbation. Testez chaque page et chaque flux dans le navigateur — soumettre, approuver, refuser, vérifier le calendrier, vérifier le tableau de bord. Ne créez pas de pull request (PR) tant que tout ne fonctionne pas de bout en bout." category="Développement de fonctionnalités" features="" />

<div className="uc-detail-wrapper">
  <Tip>Vous ne souhaitez pas effectuer cette configuration manuellement ? Collez un lien vers cette page dans une session Devin et demandez-lui de tout configurer pour vous.</Tip>

  <Steps>
    <Step title="(Facultatif) Définir la portée de la base de code avec Ask Devin">
      Si vous disposez déjà d’outils internes dans votre application, utilisez [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) pour comprendre les modèles existants avant de rédiger votre spécification. C’est particulièrement utile si vous voulez que le nouvel outil respecte l’architecture de ce qui est déjà en place :

      <PromptBlock agent="ada">
        ```txt Scope internal tools architecture theme={null}
        Show me how our existing internal tools are structured:
        1. What pages exist under /internal/ and how are they laid out?
        2. How do internal pages handle auth and role-based access?
        3. Which shared UI components do they use (tables, forms, modals)?
        4. How are database migrations structured in our Prisma schema?
        5. Are there any existing notification patterns (Slack, email)?
        ```
      </PromptBlock>

      Utilisez les réponses pour compléter votre spécification avec des références de fichiers précises, des noms de composants et des modèles, afin que Devin crée quelque chose de cohérent avec vos outils existants. Vous pouvez également démarrer une session Devin directement depuis Ask Devin, et il conservera tout ce qu’il a appris comme contexte.
    </Step>

    <Step title="Rédigez une spécification détaillée">
      Les outils internes — outils de suivi du PTO, panneaux d’administration, scripts de données, utilitaires CLI — sont essentiels mais rarement prioritaires. Ils sont idéaux pour Devin, car les exigences sont bien définies, le public est votre équipe, et « ça fonctionne correctement » compte plus qu’un design au pixel près.

      Soyez précis quant à ce que fait l’outil, quelles données il stocke et à quels services il se connecte. Plus vous fournissez de détails, plus la première version sera proche de ce dont vous avez besoin.

      <PromptBlock>
        ```txt Build a team PTO tracker theme={null}
        Build an internal PTO tracker for our team under /internal/pto.

        ## Features
        - Employees can submit time-off requests with a date range, type
          (vacation, sick, or personal), and an optional note
        - Managers see a queue of pending requests and can approve or deny
          each one
        - A calendar view shows who's out on which days, color-coded by type
        - A dashboard shows every employee's PTO balance: total days,
          used days, remaining days, and pending requests
        - Each employee gets 20 PTO days per year
        - Employees can't request more days than their remaining balance
        - Requests can't overlap with their own existing approved PTO
        - Show a warning (not a block) if teammates are already out during
          the same dates

        ## Notifications
        - Slack notification to the manager when a request is submitted
        - Slack notification to the employee when it's approved or denied
        - Use SLACK_WEBHOOK_URL from env vars

        ## Technical notes
        - Use our existing Next.js app and Prisma ORM
        - Follow the layout pattern in /internal/users
        - Reuse DataTable and Calendar components from src/components/ui/

        ## Planning
        - Before writing code, outline your implementation plan and share
          it with me for review

        ## Testing
        - Write tests for balance calculations, date overlap detection,
          and the approval workflow
        - After implementing, spin up the dev server and test every page
          and flow in the browser — submit a request, approve it, deny one,
          check the calendar, verify dashboard numbers, and test edge cases
          like overlapping dates and exceeding balance
        - Do not open a PR until everything works end-to-end
        ```
      </PromptBlock>

      Vous pouvez aussi itérer sur votre spécification avec Ask Devin — collez un brouillon et demandez-lui d’identifier les lacunes ou de suggérer des améliorations en fonction de votre base de code.
    </Step>

    <Step title="Ajouter des identifiants">
      Transmettez toutes les API keys ou tokens dont Devin a besoin via [Secrets](/fr/product-guides/secrets) — dans ce cas, l’URL du webhook Slack.

      L’approche la plus simple consiste à les stocker en tant que secrets d’organisation avant de démarrer la session :

      1. Allez dans **Settings > Secrets** et ajoutez `SLACK_WEBHOOK_URL`
      2. Devin accède aux secrets en tant que variables d’environnement, afin qu’ils ne se retrouvent jamais écrits en dur dans votre code source.

      <Note>Les secrets d’organisation doivent être ajoutés **avant** de démarrer la session — ils sont injectés au démarrage de la session. Vous pouvez aussi fournir des secrets pendant la session via le chat, et Devin vous demandera de manière proactive toutes les informations d’identification dont il a besoin lorsqu’il rencontre des variables d’environnement manquantes.</Note>
    </Step>

    <Step title="Guidez la session à l’aide de commandes slash">
      Une fois la session démarrée, vous pouvez utiliser des commandes slash pour orienter le workflow de Devin :

      * **`/plan`** — Demandez à Devin de créer un plan de mise en œuvre détaillé avant d’écrire le moindre code. Passez le plan en revue et suggérez des modifications avant qu’il ne se lance dans le développement.
      * **`/test`** — Dites à Devin d’exécuter tous les tests et de vérifier son travail. Utilisez cette commande après chaque étape majeure pour détecter rapidement les problèmes.
      * **`/review`** — Demandez à Devin de relire son propre code pour trouver des bugs, des cas limites et des problèmes de style avant d’ouvrir la pull request (PR).

      Ces commandes fonctionnent à tout moment pendant la session : utilisez `/plan` au début, `/test` après la réalisation de chaque fonctionnalité et `/review` avant la PR finale.
    </Step>

    <Step title="Devin le crée et vérifie qu’il fonctionne">
      Devin traite les outils internes comme n'importe quelle fonctionnalité de production : il écrit le code, ajoute des tests, puis ouvre l'application dans son navigateur intégré pour vérifier que l'interface fonctionne de bout en bout.

      1. **Analyse votre base de code** — Trouve vos composants `DataTable` et `Calendar`, lit votre schéma Prisma et étudie la mise en page existante de la page `/internal/`
      2. **Crée la migration de base de données** — Ajoute les tables `pto_requests` et `pto_balances` via Prisma
      3. **Construit les pages** — Formulaire de soumission de demande, file d'attente d'approbation pour les managers, vue calendrier et tableau de bord des soldes sous `/internal/pto`
      4. **Intègre Slack** — Envoie des notifications webhook lorsque des demandes sont soumises et lorsqu'elles sont approuvées ou refusées
      5. **Écrit les tests** — Tests unitaires pour les calculs de solde de PTO et la détection de chevauchement de dates, tests d'API pour les endpoints de demande, tests d'intégration pour le flux d'approbation
      6. **Ouvre l'application dans son navigateur** — Navigue vers chaque page, soumet une demande de PTO de test, l'approuve depuis la vue manager, vérifie la mise à jour du calendrier, contrôle les chiffres du tableau de bord et teste les cas limites comme les dates qui se chevauchent et les dépassements de solde
      7. **Ouvre une PR** — Livre l'ensemble : migration, script de seed, code de l'application, tests et une section de README expliquant comment utiliser l'outil

      La vérification dans le navigateur détecte des problèmes que les tests automatisés ne repèrent pas : des formulaires mal mis en page, un calendrier qui s'affiche mais ne réagit pas aux clics, ou un bouton de soumission qui ne réinitialise pas le formulaire après réussite.
    </Step>

    <Step title="Étendez votre outil">
      Once the base tool works, add features in follow-up sessions :

      <PromptBlock>
        ```txt Ajouter la détection de conflits de congés (PTO) theme={null}
        Lorsqu’un employé soumet une demande de congés (PTO), vérifiez si un
        autre membre de son équipe est déjà absent aux mêmes dates. Affichez
        un avertissement dans l’interface :
        « 2 autres personnes de votre équipe sont absentes du 20 au 22 nov. ».
        Ne bloquez pas la demande, contentez-vous de signaler le chevauchement
        pour aider les managers à planifier.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Créer une exportation CSV pour les RH theme={null}
        Ajoutez un bouton sur le tableau de bord des congés (PTO) qui exporte
        tous les congés approuvés pour le trimestre en cours au format CSV.
        Colonnes : nom de l’employé, dates, type, jours utilisés, solde
        restant. Les RH téléchargent ce fichier chaque mois pour la paie.
        ```
      </PromptBlock>
    </Step>

    <Step title="Passez en revue la PR avec Devin Review">
      Une fois que Devin a ouvert la PR, utilisez [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) pour examiner les modifications. Devin Review dispose du contexte complet de votre base de code et peut détecter des bogues, des problèmes de sécurité et des incohérences de style dans l’ensemble des changements.
    </Step>
  </Steps>
</div>