fix(d20): ticket module suggestions read the live catalog, not a constant

A module created tomorrow appears in the ticket dialog with zero code
changes; the five APEX codes remain only as a loading fallback.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/hq-web/src/pages/Tickets.tsx

@@ -5,7 +5,7 @@ import {
   FormField, FormGrid, Notice, PageHeader, Skeleton, Toolbar, useToast,
 } from '@sims/ui'
 import {
-  createTicket, getBranches, getClients, getEmployees, getTickets, patchTicket, staffId,
+  createTicket, getBranches, getClients, getEmployees, getModules, getTickets, patchTicket, staffId,
   TICKET_STATUSES,
   type Branch, type Client, type Employee, type Ticket, type TicketStatus,
 } from '../api'
@@ -13,7 +13,8 @@ import { useData } from './Clients'
 
 const PAGE_SIZE = 50
 
-/** The five APEX service lines (D20 design §1) — suggestions only; module stays free text. */
+/** Fallback suggestions while the catalog loads — the live module list is the
+ *  real source, so a module added tomorrow shows up here with zero code changes. */
 export const TICKET_MODULE_CODES = ['SMS', 'RTGS', 'WHATSAPP', 'MOBILEAPP', 'ATM']
 
 export const TICKET_STATUS_LABEL: Record<TicketStatus, string> = {
@@ -120,6 +121,8 @@ export function NewTicketDialog(props: {
   const [f, setF] = useState({ branchId: '', moduleCode: '', kind: '', description: '', onlineOffline: '' })
   const [error, setError] = useState<string | undefined>()
   const [saving, setSaving] = useState(false)
+  // Live catalog feeds the suggestions — future modules appear with zero code changes.
+  const catalog = useData(getModules, [])
 
   useEffect(() => {
     if (!props.open) return
@@ -230,7 +233,10 @@ export function NewTicketDialog(props: {
         </FormField>
       </FormGrid>
       <datalist id="hq-ticket-modules">
-        {TICKET_MODULE_CODES.map((m) => <option key={m} value={m} />)}
+        {(catalog.data !== undefined && catalog.data.length > 0
+          ? catalog.data.filter((m) => m.active).map((m) => m.code)
+          : TICKET_MODULE_CODES
+        ).map((m) => <option key={m} value={m} />)}
       </datalist>
       <datalist id="hq-ticket-kinds">
         {props.kinds.map((k) => <option key={k} value={k} />)}