OWL vs QWeb en Odoo 17

<template id="report_facture_document">
  <t t-foreach="docs" t-as="doc">
    <div class="page">

      <!-- Affichage conditionnel -->
      <t t-if="doc.partner_id.country_id.code == 'CA'">
        <p class="text-muted">TPS / TVQ applicables</p>
      </t>

      <!-- Interpolation de variable -->
      <h2><span t-field="doc.name"/></h2>
      <p>Client : <span t-field="doc.partner_id.name"/></p>

      <!-- Boucle sur les lignes de facture -->
      <table class="table">
        <t t-foreach="doc.invoice_line_ids" t-as="line">
          <tr>
            <td><span t-field="line.name"/></td>
            <td><span t-field="line.quantity"/></td>
            <td><span t-field="line.price_subtotal"/></td>
          </tr>
        </t>
      </table>
    </div>
  </t>
</template>

/** @odoo-module **/

import { Component, useState, onMounted } from "@odoo/owl";
import { registry } from "@web/core/registry";

class ProjetStatusWidget extends Component {
    // Template QWeb associé (défini dans un fichier XML séparé)
    static template = "mon_module.ProjetStatusWidget";

    static props = {
        record: Object,
        readonly: { type: Boolean, optional: true },
    };

    setup() {
        // État réactif du composant
        this.state = useState({
            isExpanded: false,
            loading: false,
        });

        onMounted(() => {
            console.log("Widget monté pour le projet :", this.props.record.data.name);
        });
    }

    toggleExpand() {
        this.state.isExpanded = !this.state.isExpanded;
    }

    get statusClass() {
        const state = this.props.record.data.state;
        const classes = {
            brouillon: "badge-secondary",
            en_cours: "badge-warning",
            termine: "badge-success",
            annule: "badge-danger",
        };
        return classes[state] || "badge-secondary";
    }
}

// Enregistrement du widget dans le registre Odoo
registry.category("fields").add("projet_status", {
    component: ProjetStatusWidget,
});

<?xml version="1.0" encoding="utf-8"?>
<templates>
  <t t-name="mon_module.ProjetStatusWidget">
    <div class="projet-status-widget">

      <!-- Badge de statut cliquable -->
      <span
        t-attf-class="badge {{statusClass}}"
        t-on-click="toggleExpand">
        <t t-out="props.record.data.state"/>
      </span>

      <!-- Panneau expandable (réactif) -->
      <t t-if="state.isExpanded">
        <div class="status-detail mt-2">
          <small>Responsable : <t t-out="props.record.data.responsable_id[1]"/></small>
        </div>
      </t>

    </div>
  </t>
</templates>

# Dans models/projet_client.py
def action_print_rapport(self):
    return self.env.ref('mon_module.action_rapport_projet').report_action(self)

# Dans le manifest : ajouter l'action de rapport
# Dans report/rapport_projet.xml :