Add Billet entity, BilletDesign, ticket designer, CRUD billets, commissions

- Create Billet entity: name, position, priceHT, quantity (nullable=unlimited),
  isGeneratedBillet, hasDefinedExit, notBuyable, type (billet/reservation_brocante/vote),
  stripeProductId, description, picture (VichUploader), category (ManyToOne CASCADE)
- Create BilletDesign entity (OneToOne Event): accentColor, invitationTitle, invitationColor
- Billet CRUD: add/edit/delete with access control, Stripe product sync on connected account
- Billet reorder: drag & drop with position field, refactored sortable.js for both categories and billets
- Ticket designer tab (custom offer only): accent color, invitation title/color, live iframe preview
- A4 ticket preview: 4 zones (HG infos+billet, HD affiche, BG association, BD sortie+invitation), fake QR code SVG
- Commission calculator JS: live breakdown of E-Ticket fee, Stripe fee (1.5%+0.25EUR), net amount
- Sales recap on categories tab: qty sold, total HT, total commissions, total net
- DisableProfilerSubscriber: disable web profiler toolbar on preview iframe
- CSP: allow self in frame-src and frame-ancestors for preview iframe
- Flysystem: dedicated billets.storage for billet images
- Upload accept restricted to png/jpeg/webp/gif (no HEIC)
- Makefile: add force_sql_dev command
- CLAUDE.md: add rule to never modify existing migrations
- Consolidate all migrations into single Version20260321111125
- Tests: BilletTest (20), BilletDesignTest (6), DisableProfilerSubscriberTest (5),
  billet-designer.test.js (7), commission-calculator.test.js (7),
  AccountControllerTest billet CRUD tests (11)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

assets/modules/billet-designer.js

@@ -0,0 +1,64 @@
+export function initBilletDesigner() {
+    const designer = document.getElementById('billet-designer')
+    if (!designer) return
+
+    const previewUrl = designer.dataset.previewUrl
+    const saveUrl = designer.dataset.saveUrl
+    if (!previewUrl) return
+
+    const iframe = document.getElementById('billet-preview-frame')
+    const reloadBtn = document.getElementById('billet-reload-preview')
+    const saveBtn = document.getElementById('billet-save-design')
+    if (!iframe) return
+
+    const inputs = designer.querySelectorAll('input[name]')
+
+    function buildPreviewUrl() {
+        const params = new URLSearchParams()
+
+        for (const input of inputs) {
+            if (input.type === 'checkbox') {
+                params.set(input.name, input.checked ? '1' : '0')
+            } else {
+                params.set(input.name, input.value)
+            }
+        }
+
+        return previewUrl + '?' + params.toString()
+    }
+
+    function reloadPreview() {
+        iframe.src = buildPreviewUrl()
+    }
+
+    function saveDesign() {
+        if (!saveUrl) return
+
+        const formData = new FormData()
+        for (const input of inputs) {
+            if (input.type === 'checkbox') {
+                formData.set(input.name, input.checked ? '1' : '0')
+            } else {
+                formData.set(input.name, input.value)
+            }
+        }
+
+        globalThis.fetch(saveUrl, {
+            method: 'POST',
+            body: formData,
+        })
+    }
+
+    for (const input of inputs) {
+        input.addEventListener('input', reloadPreview)
+        input.addEventListener('change', reloadPreview)
+    }
+
+    if (reloadBtn) {
+        reloadBtn.addEventListener('click', reloadPreview)
+    }
+
+    if (saveBtn) {
+        saveBtn.addEventListener('click', saveDesign)
+    }
+}

assets/modules/commission-calculator.js

@@ -0,0 +1,39 @@
+export function initCommissionCalculator() {
+    const calculator = document.getElementById('commission-calculator')
+    if (!calculator) return
+
+    const priceInput = document.getElementById('billet_price')
+    if (!priceInput) return
+
+    const eticketRate = Number.parseFloat(calculator.dataset.eticketRate) || 0
+    const stripeRate = Number.parseFloat(calculator.dataset.stripeRate) || 1.5
+    const stripeFixed = Number.parseFloat(calculator.dataset.stripeFixed) || 0.25
+
+    const calcPrice = document.getElementById('calc-price')
+    const calcEticket = document.getElementById('calc-eticket')
+    const calcStripe = document.getElementById('calc-stripe')
+    const calcTotal = document.getElementById('calc-total')
+    const calcNet = document.getElementById('calc-net')
+
+    function formatEur(value) {
+        return value.toFixed(2).replace('.', ',') + ' \u20AC'
+    }
+
+    function update() {
+        const price = Number.parseFloat(priceInput.value) || 0
+
+        const eticketFee = price * (eticketRate / 100)
+        const stripeFee = price > 0 ? price * (stripeRate / 100) + stripeFixed : 0
+        const totalFee = eticketFee + stripeFee
+        const net = price - totalFee
+
+        calcPrice.textContent = formatEur(price)
+        calcEticket.textContent = '- ' + formatEur(eticketFee)
+        calcStripe.textContent = '- ' + formatEur(stripeFee)
+        calcTotal.textContent = '- ' + formatEur(totalFee)
+        calcNet.textContent = formatEur(Math.max(0, net))
+    }
+
+    priceInput.addEventListener('input', update)
+    update()
+}

assets/modules/sortable.js

@@ -1,14 +1,11 @@
-export function initSortable() {
-    const list = document.getElementById('categories-list')
-    if (!list) return
-
+function makeSortable(list, itemSelector, idAttr) {
     const reorderUrl = list.dataset.reorderUrl
     if (!reorderUrl) return
 
     let dragEl = null
 
     list.addEventListener('dragstart', (e) => {
-        dragEl = e.target.closest('[data-id]')
+        dragEl = e.target.closest(itemSelector)
         if (dragEl) {
             dragEl.classList.add('opacity-50')
             e.dataTransfer.effectAllowed = 'move'
@@ -24,7 +21,7 @@ export function initSortable() {
 
     list.addEventListener('dragover', (e) => {
         e.preventDefault()
-        const target = e.target.closest('[data-id]')
+        const target = e.target.closest(itemSelector)
         if (target && target !== dragEl) {
             const rect = target.getBoundingClientRect()
             const mid = rect.top + rect.height / 2
@@ -38,8 +35,8 @@ export function initSortable() {
 
     list.addEventListener('drop', (e) => {
         e.preventDefault()
-        const items = list.querySelectorAll('[data-id]')
-        const order = Array.from(items).map(el => Number.parseInt(el.dataset.id, 10))
+        const items = list.querySelectorAll(itemSelector)
+        const order = Array.from(items).map(el => Number.parseInt(el.getAttribute(idAttr), 10))
 
         globalThis.fetch(reorderUrl, {
             method: 'POST',
@@ -48,7 +45,18 @@ export function initSortable() {
         })
     })
 
-    list.querySelectorAll('[data-id]').forEach(el => {
+    list.querySelectorAll(itemSelector).forEach(el => {
         el.setAttribute('draggable', 'true')
     })
 }
+
+export function initSortable() {
+    const categoriesList = document.getElementById('categories-list')
+    if (categoriesList) {
+        makeSortable(categoriesList, '[data-id]', 'data-id')
+    }
+
+    document.querySelectorAll('.billets-list').forEach(list => {
+        makeSortable(list, '[data-billet-id]', 'data-billet-id')
+    })
+}