feat(form-builder): admin UI completion — server filters, KPIs, resource expansion (WS-6 sessie 3c)

Closes the four production gaps that emerged from sessie 3b's admin UI. What we ship here is final: no further rework planned before production. Backend - IndexFailuresRequest validates state/search/failed_at_from/failed_at_to/ listener_class. orgIndex + platformIndex apply them via a single applyIndexFilters() helper. Search runs case-insensitive `LIKE` on exception_message; SQL wildcards in user input are escaped. - New /kpis aggregate endpoint per scope (orgKpis, platformKpis) returns open / resolved_30d / dismissed_30d / total_submissions in O(1) COUNTs. Replaces sessie 3b's client-side bucketing of an oversized list. - Resource expansion: organisation_name, form_schema_label, resolved_by_user_name, dismissed_by_user_name, exception_trace, retry_history[]. Eager-loading via indexEagerLoads()/detailEagerLoads() prevents N+1 (verified by query-count assertion in test). - New 2026_04_28_181000 migration adds exception_trace (longtext nullable) to form_submission_action_failures. ApplyBindingsOnFormSubmit listener now captures $e->getTraceAsString() at failure time. - New FormSubmissionActionFailureRetryAttemptResource exposes per-attempt data (timestamp, actor name, outcome, exception details) inside retry_history[]. Index payloads omit the field via whenLoaded() to keep list responses lean. Frontend (apps/app) - Types updated to mirror the expanded resource shape and the new KPI endpoint contract. FormFailuresKpis is now { open, resolved_30d, dismissed_30d, total_submissions } (server-aggregate). - useFormFailures composable forwards all 5 server filters via buildIndexParams() (strips empty/whitespace). useFormFailuresKpis hits the dedicated /kpis endpoint per scope. - FormFailuresTable replaces client-side bucketing with server-side filtering, adds listener_class + date-range filter inputs, and renames the 4th KPI tile to "Submissions" (was "Totaal"). - FormFailureDetail renders organisation_name + form_schema_label in the header, surfaces an expandable stack-trace card, names the resolved/ dismissed actor in the timeline, and replaces the "v1 placeholder" retry-history card with a full per-attempt timeline. ESLint config gap (apps/app) - New .eslintrc.cjs adapted from the Vuexy reference, minus Vuexy-internal rules. `pnpm lint` now runs successfully (was previously broken — the package.json script referenced a missing config). The 80 baseline violations across the codebase are pre-existing and out of scope for this session. Tests + gates - 24 new backend tests across filter, kpis, and resource-shape suites. Backend: 1462 → 1486 passing, 0 → 0 failing. Larastan clean. Rector dry-run unchanged at 354 (pre-Task-1 baseline from f18b55b). - 3 new vitest tests in apps/app (filter wiring, KPI endpoint, KPI tile values from /kpis). Vitest: 38 → 41 passing. tsc clean. Portal unchanged (113 vitest, tsc clean). - 5 backfill rollback tests bumped --step counts +1 for the new migration. - Ws6FoundationMigrationTest down/up chain now includes exception_trace before the parent table is restored. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-28 23:29:58 +02:00
parent b47e096a55
commit 192353f4bc
31 changed files with 1557 additions and 230 deletions
--- a/apps/app/.eslintrc.cjs
+++ b/apps/app/.eslintrc.cjs
@@ -0,0 +1,208 @@
+// Sessie 3c (WS-6) — closes the apps/app ESLint config gap.
+// Adapted from the Vuexy reference (resources/vuexy-admin-v10.11.1/.../full-version/.eslintrc.cjs)
+// minus the Vuexy-internal lint rules (valid-appcardcode-*, internal regex
+// rules) that don't apply outside the demo project. Plugin set matches
+// what's installed in apps/app's package.json.
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2022: true,
+  },
+  extends: [
+    '@antfu/eslint-config-vue',
+    'plugin:vue/vue3-recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:promise/recommended',
+    'plugin:sonarjs/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:case-police/recommended',
+    'plugin:regexp/recommended',
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 13,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+    '@typescript-eslint',
+    'regex',
+    'regexp',
+  ],
+  ignorePatterns: [
+    'src/plugins/iconify/*.js',
+    'node_modules',
+    'dist',
+    '*.d.ts',
+    'vendor',
+    '*.json',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+
+    'comma-spacing': ['error', { before: false, after: true }],
+    'key-spacing': ['error', { afterColon: true }],
+    'n/prefer-global/process': ['off'],
+    'sonarjs/cognitive-complexity': ['off'],
+
+    'vue/first-attribute-linebreak': ['error', {
+      singleline: 'beside',
+      multiline: 'below',
+    }],
+
+    'antfu/top-level-function': 'off',
+
+    // Project rule (CLAUDE.md frontend rules): no `any`. Override the
+    // Vuexy reference (which sets this off) — Crewli's stricter posture.
+    '@typescript-eslint/no-explicit-any': 'error',
+
+    'indent': ['error', 2],
+    'comma-dangle': ['error', 'always-multiline'],
+    'object-curly-spacing': ['error', 'always'],
+    'camelcase': 'error',
+    'max-len': 'off',
+    'semi': ['error', 'never'],
+    'arrow-parens': ['error', 'as-needed'],
+    'newline-before-return': 'error',
+
+    'lines-around-comment': [
+      'error',
+      {
+        beforeBlockComment: true,
+        beforeLineComment: true,
+        allowBlockStart: true,
+        allowClassStart: true,
+        allowObjectStart: true,
+        allowArrayStart: true,
+        ignorePattern: '!SECTION',
+      },
+    ],
+
+    '@typescript-eslint/no-unused-vars': ['error', {
+      varsIgnorePattern: '^_+$',
+      argsIgnorePattern: '^_+$',
+    }],
+
+    'array-element-newline': ['error', 'consistent'],
+    'array-bracket-newline': ['error', 'consistent'],
+
+    'vue/multi-word-component-names': 'off',
+
+    'padding-line-between-statements': [
+      'error',
+      { blankLine: 'always', prev: 'expression', next: 'const' },
+      { blankLine: 'always', prev: 'const', next: 'expression' },
+      { blankLine: 'always', prev: 'multiline-const', next: '*' },
+      { blankLine: 'always', prev: '*', next: 'multiline-const' },
+    ],
+
+    'import/prefer-default-export': 'off',
+    'import/newline-after-import': ['error', { count: 1 }],
+    'no-restricted-imports': ['error', 'vuetify/components', {
+      name: 'vue3-apexcharts',
+      message: 'apexcharts are auto imported',
+    }],
+
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+
+    'import/no-unresolved': [2, {
+      ignore: [
+        '~pages$',
+        'virtual:meta-layouts',
+        '#auth$',
+        '#components$',
+        '.*\\?raw',
+      ],
+    }],
+
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    '@typescript-eslint/consistent-type-imports': 'error',
+
+    // CLAUDE.md frontend convention — backend enums are mirrored as
+    // `as const` objects WITH a same-named `type` alias. The two live
+    // in different namespaces (value vs. type) and are intentional;
+    // both base `no-redeclare` and the typed variant flag them anyway.
+    'no-redeclare': 'off',
+    '@typescript-eslint/no-redeclare': 'off',
+
+    'promise/always-return': 'off',
+    'promise/catch-or-return': 'off',
+
+    'vue/block-tag-newline': 'error',
+    'vue/component-api-style': 'error',
+    'vue/component-name-in-template-casing': ['error', 'PascalCase', {
+      registeredComponentsOnly: false,
+      ignores: ['/^swiper-/'],
+    }],
+    'vue/custom-event-name-casing': ['error', 'camelCase', {
+      ignores: [
+        '/^(click):[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?/',
+      ],
+    }],
+    'vue/define-macros-order': 'error',
+    'vue/html-comment-content-newline': 'error',
+    'vue/html-comment-content-spacing': 'error',
+    'vue/html-comment-indent': 'error',
+    'vue/match-component-file-name': 'error',
+    'vue/no-child-content': 'error',
+    'vue/require-default-prop': 'off',
+
+    'vue/no-duplicate-attr-inheritance': 'error',
+    'vue/no-empty-component-block': 'error',
+    'vue/no-multiple-objects-in-class': 'error',
+    'vue/no-reserved-component-names': 'error',
+    'vue/no-template-target-blank': 'error',
+    'vue/no-useless-mustaches': 'error',
+    'vue/no-useless-v-bind': 'error',
+    'vue/padding-line-between-blocks': 'error',
+    'vue/prefer-separate-static-class': 'error',
+    'vue/prefer-true-attribute-shorthand': 'error',
+    'vue/v-on-function-call': 'error',
+    'vue/no-restricted-class': ['error', '/^(p|m)(l|r)-/'],
+    'vue/valid-v-slot': ['error', { allowModifiers: true }],
+
+    'vue/no-irregular-whitespace': 'error',
+    'vue/template-curly-spacing': 'error',
+
+    'sonarjs/no-duplicate-string': 'off',
+    'sonarjs/no-nested-template-literals': 'off',
+
+    'regex/invalid': [
+      'error',
+      [
+        {
+          regex: '@/assets/images',
+          replacement: '@images',
+          message: 'Use \'@images\' path alias for image imports',
+        },
+        {
+          regex: '@/assets/styles',
+          replacement: '@styles',
+          message: 'Use \'@styles\' path alias for importing styles from \'src/assets/styles\'',
+        },
+      ],
+      '\\.eslintrc\\.cjs',
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      node: true,
+      typescript: {},
+    },
+  },
+}
--- a/apps/app/src/components/form-failures/FormFailureDetail.vue
+++ b/apps/app/src/components/form-failures/FormFailureDetail.vue
@@ -21,7 +21,8 @@ const stateLabel = { open: 'Open', resolved: 'Opgelost', dismissed: 'Dismissed'
 const stateColor = { open: 'error', resolved: 'success', dismissed: 'warning' } as const

 function formatDateTime(iso: string | null): string {
-  if (!iso) return '—'
+  if (!iso)
+    return '—'

  return new Date(iso).toLocaleDateString('nl-NL', {
    day: '2-digit',
@@ -39,13 +40,13 @@ const resolveDialogOpen = ref(false)
 const dismissDialogOpen = ref(false)

 function copyText(text: string): void {
-  if (navigator?.clipboard) {
+  if (navigator?.clipboard)
    void navigator.clipboard.writeText(text)
-  }
 }

 const formattedContext = computed(() => {
-  if (!failure.value?.context) return null
+  if (!failure.value?.context)
+    return null
  try {
    return JSON.stringify(failure.value.context, null, 2)
  }
@@ -53,6 +54,12 @@ const formattedContext = computed(() => {
    return null
  }
 })
+
+const traceExpanded = ref(false)
+
+function formatAttemptOutcome(outcome: 'succeeded' | 'failed'): string {
+  return outcome === 'succeeded' ? 'Geslaagd' : 'Mislukt'
+}
 </script>

 <template>
@@ -78,7 +85,7 @@ const formattedContext = computed(() => {
      <template #append>
        <VBtn
          variant="text"
-          @click="refetch()"
+          @click="refetch"
        >
          Opnieuw proberen
        </VBtn>
@@ -105,6 +112,14 @@ const formattedContext = computed(() => {
          <p class="text-body-2 text-disabled mb-0">
            Failed {{ formatDateTime(failure.failed_at) }} · Listener: {{ listenerShortName(failure.listener_class) }}
          </p>
+          <p
+            v-if="failure.organisation_name || failure.form_schema_label"
+            class="text-body-2 text-disabled mb-0"
+          >
+            <span v-if="failure.organisation_name">{{ failure.organisation_name }}</span>
+            <span v-if="failure.organisation_name && failure.form_schema_label"> · </span>
+            <span v-if="failure.form_schema_label">{{ failure.form_schema_label }}</span>
+          </p>
        </div>

        <!-- Actions -->
@@ -165,6 +180,25 @@ const formattedContext = computed(() => {
              >
                Bericht kopiëren
              </VBtn>
+
+              <div
+                v-if="failure.exception_trace"
+                class="mt-4"
+              >
+                <VBtn
+                  variant="text"
+                  size="small"
+                  :prepend-icon="traceExpanded ? 'tabler-chevron-down' : 'tabler-chevron-right'"
+                  @click="traceExpanded = !traceExpanded"
+                >
+                  Stack trace
+                </VBtn>
+                <pre
+                  v-if="traceExpanded"
+                  class="text-caption mt-2"
+                  style="white-space: pre-wrap; max-height: 360px; overflow: auto; background: rgb(var(--v-theme-surface)); padding: 0.75rem; border-radius: 4px;"
+                >{{ failure.exception_trace }}</pre>
+              </div>
            </VCardText>
          </VCard>

@@ -175,7 +209,8 @@ const formattedContext = computed(() => {
            class="mb-4"
          >
            <VCardText>
-              <pre class="text-body-2"
+              <pre
+                class="text-body-2"
                style="white-space: pre-wrap; max-height: 300px; overflow: auto;"
              >{{ formattedContext }}</pre>
              <VBtn
@@ -228,6 +263,12 @@ const formattedContext = computed(() => {
                  <div class="text-body-2">
                    <strong>Opgelost</strong>
                    <span class="text-caption text-disabled ms-2">{{ formatDateTime(failure.resolved_at) }}</span>
+                    <p
+                      v-if="failure.resolved_by_user_name"
+                      class="text-caption mb-0"
+                    >
+                      door {{ failure.resolved_by_user_name }}
+                    </p>
                    <p
                      v-if="failure.resolved_note"
                      class="text-caption mt-1 mb-0"
@@ -245,6 +286,12 @@ const formattedContext = computed(() => {
                  <div class="text-body-2">
                    <strong>Dismissed</strong> ({{ failure.dismissed_reason_type }})
                    <span class="text-caption text-disabled ms-2">{{ formatDateTime(failure.dismissed_at) }}</span>
+                    <p
+                      v-if="failure.dismissed_by_user_name"
+                      class="text-caption mb-0"
+                    >
+                      door {{ failure.dismissed_by_user_name }}
+                    </p>
                    <p
                      v-if="failure.dismissed_reason_note"
                      class="text-caption mt-1 mb-0"
@@ -307,32 +354,47 @@ const formattedContext = computed(() => {
            </VCardText>
          </VCard>

-          <!-- Retry history card -->
+          <!-- Retry history card — per-attempt detail (sessie 3c) -->
          <VCard
            title="Retry-geschiedenis"
            class="mb-4"
          >
            <VCardText>
              <p
-                v-if="failure.retry_count === 0"
+                v-if="!failure.retry_history?.length"
                class="text-body-2 text-disabled mb-0"
              >
                Nog niet opnieuw geprobeerd.
              </p>
-              <p
+              <VTimeline
                v-else
-                class="text-body-2 mb-0"
+                density="compact"
+                side="end"
              >
-                <VChip
-                  variant="outlined"
+                <VTimelineItem
+                  v-for="attempt in failure.retry_history"
+                  :key="attempt.id"
+                  :dot-color="attempt.outcome === 'succeeded' ? 'success' : 'error'"
                  size="small"
                >
-                  {{ failure.retry_count }} pogingen
-                </VChip>
-                <span class="text-caption text-disabled ms-2">
-                  Per-poging-detail (timestamp + outcome) is nog niet beschikbaar in v1.
-                </span>
-              </p>
+                  <div class="text-body-2">
+                    <strong>{{ formatAttemptOutcome(attempt.outcome) }}</strong>
+                    <span class="text-caption text-disabled ms-2">{{ formatDateTime(attempt.attempted_at) }}</span>
+                    <p
+                      v-if="attempt.attempted_by_user_name"
+                      class="text-caption mb-0"
+                    >
+                      door {{ attempt.attempted_by_user_name }}
+                    </p>
+                    <p
+                      v-if="attempt.exception_message"
+                      class="text-caption mt-1 mb-0"
+                    >
+                      <code>{{ attempt.exception_class }}</code>: {{ attempt.exception_message }}
+                    </p>
+                  </div>
+                </VTimelineItem>
+              </VTimeline>
            </VCardText>
          </VCard>
        </VCol>
@@ -344,21 +406,21 @@ const formattedContext = computed(() => {
        :failure="failure"
        :scope="scope"
        :org-id="orgId"
-        @success="refetch()"
+        @success="refetch"
      />
      <ResolveFailureDialog
        v-model="resolveDialogOpen"
        :failure="failure"
        :scope="scope"
        :org-id="orgId"
-        @success="refetch()"
+        @success="refetch"
      />
      <DismissFailureDialog
        v-model="dismissDialogOpen"
        :failure="failure"
        :scope="scope"
        :org-id="orgId"
-        @success="refetch()"
+        @success="refetch"
      />
    </div>
  </div>
--- a/apps/app/src/components/form-failures/FormFailuresTable.vue
+++ b/apps/app/src/components/form-failures/FormFailuresTable.vue
@@ -16,16 +16,24 @@ const props = defineProps<{

 const router = useRouter()

-// Filter state — URL-synced via router push so views are shareable.
+// Filter state — these now drive server-side params (sessie 3c).
 const stateFilter = ref<FormFailureState | 'all'>('open')
 const search = ref('')
 const searchDebounced = refDebounced(search, 400)
+const listenerClass = ref('')
+const failedAtFrom = ref('')
+const failedAtTo = ref('')
 const page = ref(1)
 const itemsPerPage = ref(25)

 const params = computed(() => ({
  page: page.value,
  per_page: itemsPerPage.value,
+  state: stateFilter.value,
+  search: searchDebounced.value,
+  listener_class: listenerClass.value,
+  failed_at_from: failedAtFrom.value,
+  failed_at_to: failedAtTo.value,
 }))

 const orgIdRef = computed(() => props.orgId)
@@ -33,30 +41,7 @@ const orgIdRef = computed(() => props.orgId)
 const { data, isLoading, isError, refetch } = useFormFailures(params, props.scope, orgIdRef)
 const { data: kpis } = useFormFailuresKpis(props.scope, orgIdRef)

-// The backend currently only ships paginated indexes (no server-side
-// filters). Apply state + search + listener filters client-side over
-// the current page. Acceptable for the "open failures across orgs"
-// volumes Crewli sees in v1; tracked for backend pagination work
-// post-launch.
-const allItems = computed(() => data.value?.data ?? [])
-
-const filtered = computed(() => {
-  let rows = allItems.value
-  if (stateFilter.value !== 'all') {
-    rows = rows.filter(r => r.state === stateFilter.value)
-  }
-  const q = searchDebounced.value.trim().toLowerCase()
-  if (q !== '') {
-    rows = rows.filter(r =>
-      r.exception_class.toLowerCase().includes(q)
-      || r.exception_message.toLowerCase().includes(q)
-      || r.id.toLowerCase().includes(q)
-      || r.form_submission_id.toLowerCase().includes(q),
-    )
-  }
-
-  return rows
-})
+const items = computed(() => data.value?.data ?? [])

 const stateOptions = [
  { title: 'Open', value: 'open' as FormFailureState },
@@ -101,7 +86,6 @@ function truncate(s: string, n = 80): string {
  return s.length > n ? `${s.slice(0, n)}…` : s
 }

-// Action dialogs — driven by selected row.
 const retryDialogOpen = ref(false)
 const resolveDialogOpen = ref(false)
 const dismissDialogOpen = ref(false)
@@ -121,17 +105,20 @@ function openDismiss(f: FormFailure) {
 }

 function goToDetail(f: FormFailure) {
-  if (props.scope === 'platform') {
+  if (props.scope === 'platform')
    router.push({ name: 'platform-form-failures-id', params: { id: f.id } })
-  }
-  else {
+
+  else
    router.push({ name: 'organisation-form-failures-id', params: { id: f.id } })
-  }
 }

 function clearFilters() {
  stateFilter.value = 'open'
  search.value = ''
+  listenerClass.value = ''
+  failedAtFrom.value = ''
+  failedAtTo.value = ''
+  page.value = 1
 }

 function setStateFilter(s: FormFailureState | 'all') {
@@ -142,7 +129,7 @@ function setStateFilter(s: FormFailureState | 'all') {

 <template>
  <div>
-    <!-- KPI tiles -->
+    <!-- KPI tiles — server-side aggregate (sessie 3c). -->
    <VRow class="mb-4">
      <VCol
        cols="12"
@@ -182,7 +169,7 @@ function setStateFilter(s: FormFailureState | 'all') {
        >
          <VCardText>
            <p class="text-caption text-disabled mb-1">
-              Opgelost
+              Opgelost (30d)
            </p>
            <h5 class="text-h5">
              <VIcon
@@ -191,7 +178,7 @@ function setStateFilter(s: FormFailureState | 'all') {
                size="20"
                class="me-1"
              />
-              {{ kpis?.resolved ?? 0 }}
+              {{ kpis?.resolved_30d ?? 0 }}
            </h5>
          </VCardText>
        </VCard>
@@ -208,7 +195,7 @@ function setStateFilter(s: FormFailureState | 'all') {
        >
          <VCardText>
            <p class="text-caption text-disabled mb-1">
-              Dismissed
+              Dismissed (30d)
            </p>
            <h5 class="text-h5">
              <VIcon
@@ -217,7 +204,7 @@ function setStateFilter(s: FormFailureState | 'all') {
                size="20"
                class="me-1"
              />
-              {{ kpis?.dismissed ?? 0 }}
+              {{ kpis?.dismissed_30d ?? 0 }}
            </h5>
          </VCardText>
        </VCard>
@@ -228,13 +215,11 @@ function setStateFilter(s: FormFailureState | 'all') {
      >
        <VCard
          density="compact"
-          class="cursor-pointer"
-          :variant="stateFilter === 'all' ? 'elevated' : 'outlined'"
-          @click="setStateFilter('all')"
+          variant="outlined"
        >
          <VCardText>
            <p class="text-caption text-disabled mb-1">
-              Totaal
+              Submissions
            </p>
            <h5 class="text-h5">
              <VIcon
@@ -243,14 +228,13 @@ function setStateFilter(s: FormFailureState | 'all') {
                size="20"
                class="me-1"
              />
-              {{ kpis?.total ?? 0 }}
+              {{ kpis?.total_submissions ?? 0 }}
            </h5>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>

-    <!-- Error -->
    <VAlert
      v-if="isError"
      type="error"
@@ -260,7 +244,7 @@ function setStateFilter(s: FormFailureState | 'all') {
      <template #append>
        <VBtn
          variant="text"
-          @click="refetch()"
+          @click="refetch"
        >
          Opnieuw proberen
        </VBtn>
@@ -268,7 +252,6 @@ function setStateFilter(s: FormFailureState | 'all') {
    </VAlert>

    <VCard>
-      <!-- Filter bar -->
      <VCardText>
        <VRow>
          <VCol
@@ -297,17 +280,50 @@ function setStateFilter(s: FormFailureState | 'all') {
          >
            <AppTextField
              v-model="search"
-              placeholder="Zoek op exception, ID..."
+              placeholder="Zoek op exception message..."
              prepend-inner-icon="tabler-search"
              clearable
            />
          </VCol>
+          <VCol
+            cols="12"
+            md="4"
+          >
+            <AppTextField
+              v-model="listenerClass"
+              label="Listener class"
+              placeholder="App\\Listeners\\..."
+              clearable
+            />
+          </VCol>
+          <VCol
+            cols="6"
+            md="4"
+          >
+            <AppTextField
+              v-model="failedAtFrom"
+              label="Vanaf"
+              type="date"
+              clearable
+            />
+          </VCol>
+          <VCol
+            cols="6"
+            md="4"
+          >
+            <AppTextField
+              v-model="failedAtTo"
+              label="Tot"
+              type="date"
+              clearable
+            />
+          </VCol>
        </VRow>
      </VCardText>

      <VDataTableServer
        :headers="headers"
-        :items="filtered"
+        :items="items"
        :items-length="data?.meta?.total ?? 0"
        :loading="isLoading"
        :items-per-page="itemsPerPage"
@@ -433,27 +449,26 @@ function setStateFilter(s: FormFailureState | 'all') {
      </VDataTableServer>
    </VCard>

-    <!-- Action dialogs -->
    <RetryFailureDialog
      v-model="retryDialogOpen"
      :failure="selectedFailure"
      :scope="scope"
      :org-id="orgId"
-      @success="refetch()"
+      @success="refetch"
    />
    <ResolveFailureDialog
      v-model="resolveDialogOpen"
      :failure="selectedFailure"
      :scope="scope"
      :org-id="orgId"
-      @success="refetch()"
+      @success="refetch"
    />
    <DismissFailureDialog
      v-model="dismissDialogOpen"
      :failure="selectedFailure"
      :scope="scope"
      :org-id="orgId"
-      @success="refetch()"
+      @success="refetch"
    />
  </div>
 </template>
--- a/apps/app/src/components/form-failures/tests/DismissFailureDialog.spec.ts
+++ b/apps/app/src/components/form-failures/tests/DismissFailureDialog.spec.ts
@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

+import DismissFailureDialog from '../DismissFailureDialog.vue'
+import type { FormFailure } from '@/types/form-failures'
+
 const mockPost = vi.fn()
+
 vi.mock('@/lib/axios', () => ({
  apiClient: {
    get: vi.fn(),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
  },
 }))

-import DismissFailureDialog from '../DismissFailureDialog.vue'
-import type { FormFailure } from '@/types/form-failures'
-
 function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
  return {
    id: '01ABC',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
    failed_at: '2026-04-28T12:00:00Z',
    exception_class: 'RuntimeException',
    exception_message: 'boom',
+    exception_trace: null,
    context: null,
    retry_count: 0,
    resolved_at: null,
+    resolved_by_user_id: null,
+    resolved_by_user_name: null,
    resolved_note: null,
    dismissed_at: null,
+    dismissed_by_user_id: null,
+    dismissed_by_user_name: null,
    dismissed_reason_type: null,
    dismissed_reason_note: null,
    state: 'open',
+    organisation_id: null,
+    organisation_name: null,
+    form_schema_id: null,
+    form_schema_label: null,
    ...overrides,
  }
 }
@@ -97,9 +107,11 @@ describe('DismissFailureDialog', () => {

  it('requires note for "other" reason', async () => {
    const w = mountDialog({ modelValue: true, failure: makeFailure() })
+
    await w.find('select').setValue('other')

    const dismissBtn = w.findAll('button').find(b => b.text() === 'Dismiss')
+
    expect((dismissBtn?.element as HTMLButtonElement).disabled).toBe(true)

    await w.find('textarea').setValue('explanation')
@@ -110,9 +122,12 @@ describe('DismissFailureDialog', () => {
    mockPost.mockResolvedValue({ data: { data: makeFailure({ state: 'dismissed' }) } })

    const w = mountDialog({ modelValue: true, failure: makeFailure() })
+
    await w.find('select').setValue('other')
    await w.find('textarea').setValue('manual triage')
+
    const dismissBtn = w.findAll('button').find(b => b.text() === 'Dismiss')
+
    await dismissBtn?.trigger('click')
    await flushPromises()

@@ -126,8 +141,11 @@ describe('DismissFailureDialog', () => {
    mockPost.mockResolvedValue({ data: { data: makeFailure({ state: 'dismissed' }) } })

    const w = mountDialog({ modelValue: true, failure: makeFailure() })
+
    await w.find('select').setValue('schema_deleted')
+
    const dismissBtn = w.findAll('button').find(b => b.text() === 'Dismiss')
+
    await dismissBtn?.trigger('click')
    await flushPromises()

--- a/apps/app/src/components/form-failures/tests/FormFailureDetail.spec.ts
+++ b/apps/app/src/components/form-failures/tests/FormFailureDetail.spec.ts
@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

+import FormFailureDetail from '../FormFailureDetail.vue'
+import type { FormFailure } from '@/types/form-failures'
+
 const mockGet = vi.fn()
+
 vi.mock('@/lib/axios', () => ({
  apiClient: {
    get: (...args: unknown[]) => mockGet(...args),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
  },
 }))

-import FormFailureDetail from '../FormFailureDetail.vue'
-import type { FormFailure } from '@/types/form-failures'
-
 function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
  return {
    id: '01ABCDEFGHIJ',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
    failed_at: '2026-04-28T12:00:00Z',
    exception_class: 'RuntimeException',
    exception_message: 'something broke',
+    exception_trace: null,
    context: { target_entity: 'person', target_attribute: 'email' },
    retry_count: 0,
    resolved_at: null,
+    resolved_by_user_id: null,
+    resolved_by_user_name: null,
    resolved_note: null,
    dismissed_at: null,
+    dismissed_by_user_id: null,
+    dismissed_by_user_name: null,
    dismissed_reason_type: null,
    dismissed_reason_note: null,
    state: 'open',
+    organisation_id: null,
+    organisation_name: null,
+    form_schema_id: null,
+    form_schema_label: null,
    ...overrides,
  }
 }
@@ -86,6 +96,7 @@ describe('FormFailureDetail', () => {

  it('renders header with state badge for open failure', async () => {
    const w = mountDetail(makeFailure({ state: 'open' }))
+
    await flushPromises()
    await flushPromises()

@@ -95,15 +106,18 @@ describe('FormFailureDetail', () => {
    // Open state badge
    const chips = w.findAll('span[data-color]')
    const stateChip = chips.find(c => c.attributes('data-color') === 'error')
+
    expect(stateChip).toBeTruthy()
  })

  it('renders all 6 cards: Exception, Context, Tijdlijn, Inzending, Listener, Retry-geschiedenis', async () => {
    const w = mountDetail(makeFailure())
+
    await flushPromises()
    await flushPromises()

    const text = w.text()
+
    expect(text).toContain('Exception')
    expect(text).toContain('Context')
    expect(text).toContain('Tijdlijn')
@@ -114,6 +128,7 @@ describe('FormFailureDetail', () => {

  it('disables action buttons for resolved state', async () => {
    const w = mountDetail(makeFailure({ state: 'resolved', resolved_at: '2026-04-29T10:00:00Z' }))
+
    await flushPromises()
    await flushPromises()

@@ -129,24 +144,29 @@ describe('FormFailureDetail', () => {

  it('disables action buttons for dismissed state', async () => {
    const w = mountDetail(makeFailure({ state: 'dismissed', dismissed_at: '2026-04-29T10:00:00Z', dismissed_reason_type: 'schema_deleted' }))
+
    await flushPromises()
    await flushPromises()

    const retry = w.findAll('button').find(b => b.text() === 'Retry')
+
    expect((retry?.element as HTMLButtonElement).disabled).toBe(true)
  })

  it('enables action buttons for open state', async () => {
    const w = mountDetail(makeFailure({ state: 'open' }))
+
    await flushPromises()
    await flushPromises()

    const retry = w.findAll('button').find(b => b.text() === 'Retry')
+
    expect((retry?.element as HTMLButtonElement).disabled).toBe(false)
  })

  it('renders "In afwachting van actie..." for open with no retries', async () => {
    const w = mountDetail(makeFailure({ state: 'open', retry_count: 0 }))
+
    await flushPromises()
    await flushPromises()

@@ -159,6 +179,7 @@ describe('FormFailureDetail', () => {
      resolved_at: '2026-04-29T10:00:00Z',
      resolved_note: 'fixed via direct edit',
    }))
+
    await flushPromises()
    await flushPromises()

--- a/apps/app/src/components/form-failures/tests/FormFailuresTable.spec.ts
+++ b/apps/app/src/components/form-failures/tests/FormFailuresTable.spec.ts
@@ -2,6 +2,9 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

+import FormFailuresTable from '../FormFailuresTable.vue'
+import type { FormFailure, FormFailuresKpis } from '@/types/form-failures'
+
 const mockGet = vi.fn()
 const mockPost = vi.fn()
 const pushSpy = vi.fn()
@@ -18,9 +21,6 @@ vi.mock('vue-router', () => ({
  useRouter: () => ({ push: pushSpy, replace: vi.fn() }),
 }))

-import FormFailuresTable from '../FormFailuresTable.vue'
-import type { FormFailure } from '@/types/form-failures'
-
 function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
  return {
    id: '01ABC123456789',
@@ -30,14 +30,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
    failed_at: '2026-04-28T12:00:00Z',
    exception_class: 'RuntimeException',
    exception_message: 'something broke',
+    exception_trace: null,
    context: null,
    retry_count: 0,
    resolved_at: null,
+    resolved_by_user_id: null,
+    resolved_by_user_name: null,
    resolved_note: null,
    dismissed_at: null,
+    dismissed_by_user_id: null,
+    dismissed_by_user_name: null,
    dismissed_reason_type: null,
    dismissed_reason_note: null,
    state: 'open',
+    organisation_id: null,
+    organisation_name: null,
+    form_schema_id: null,
+    form_schema_label: null,
    ...overrides,
  }
 }
@@ -59,8 +68,8 @@ const stubs = {
  VIcon: { template: '<i :class="icon"></i>', props: ['icon', 'size', 'color'] },
  VChip: { template: '<span class="v-chip-stub" :data-color="color"><slot/></span>', props: ['color', 'size', 'variant'] },
  AppTextField: {
-    template: '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)"/>',
-    props: ['modelValue', 'placeholder', 'prependInnerIcon', 'clearable'],
+    template: '<input :value="modelValue" :placeholder="placeholder" :data-label="label" :type="type" @input="$emit(\'update:modelValue\', $event.target.value)"/>',
+    props: ['modelValue', 'placeholder', 'prependInnerIcon', 'clearable', 'label', 'type'],
  },
  VDataTableServer: {
    template: `<div class="v-data-table-stub">
@@ -90,11 +99,16 @@ const stubs = {
  DismissFailureDialog: { template: '<div class="dismiss-dialog-stub"></div>' },
 }

-function mountTable(items: FormFailure[]) {
-  // Mocks for both the list and the kpi list calls (composable issues
-  // a single per_page=100 list that drives both).
-  mockGet.mockResolvedValue({
-    data: { data: items, links: {}, meta: { current_page: 1, per_page: 25, total: items.length, last_page: 1 } },
+function mountTable(items: FormFailure[], kpis: FormFailuresKpis = { open: 0, resolved_30d: 0, dismissed_30d: 0, total_submissions: 0 }) {
+  // Sessie 3c — list and kpi endpoints return different shapes; the mock
+  // routes by URL so both queries get well-typed payloads.
+  mockGet.mockImplementation((url: string) => {
+    if (url.endsWith('/kpis'))
+      return Promise.resolve({ data: { data: kpis } })
+
+    return Promise.resolve({
+      data: { data: items, links: {}, meta: { current_page: 1, per_page: 25, total: items.length, last_page: 1 } },
+    })
  })

  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
@@ -115,65 +129,90 @@ beforeEach(() => {
 })

 describe('FormFailuresTable', () => {
-  it('renders KPI tiles with computed counts from list data', async () => {
-    const w = mountTable([
-      makeFailure({ id: 'A', state: 'open' }),
-      makeFailure({ id: 'B', state: 'resolved' }),
-      makeFailure({ id: 'C', state: 'dismissed' }),
-      makeFailure({ id: 'D', state: 'open' }),
-    ])
+  it('renders KPI tiles with values from the /kpis endpoint', async () => {
+    const w = mountTable(
+      [makeFailure({ id: 'A', state: 'open' })],
+      { open: 7, resolved_30d: 3, dismissed_30d: 1, total_submissions: 42 },
+    )
+
    await flushPromises()
    await flushPromises()

    const text = w.text()
+
    expect(text).toContain('Open failures')
-    expect(text).toContain('Opgelost')
-    expect(text).toContain('Dismissed')
-    expect(text).toContain('Totaal')
+    expect(text).toContain('Opgelost (30d)')
+    expect(text).toContain('Dismissed (30d)')
+    expect(text).toContain('Submissions')
+    expect(text).toContain('7')
+    expect(text).toContain('42')
  })

  it('shows the open-state chip for an open failure row', async () => {
    const w = mountTable([makeFailure({ state: 'open' })])
+
    await flushPromises()
    await flushPromises()

    const chip = w.find('.v-chip-stub')
+
    expect(chip.exists()).toBe(true)
    expect(chip.attributes('data-color')).toBe('error')
  })

-  it('shows the resolved-state chip color for a resolved failure', async () => {
+  it('renders rows the server returned regardless of state filter (server-side filter)', async () => {
+    // Server-side filtering means whatever the API returns gets rendered;
+    // the client no longer hides rows post-fetch.
    const w = mountTable([makeFailure({ state: 'resolved' })])
+
    await flushPromises()
    await flushPromises()

-    // stateFilter defaults to 'open'; resolved row gets filtered out.
-    expect(w.findAll('.v-chip-stub')).toHaveLength(0)
+    const chip = w.find('.v-chip-stub')
+
+    expect(chip.exists()).toBe(true)
+    expect(chip.attributes('data-color')).toBe('success')
  })

  it('renders empty state when there are no rows', async () => {
    const w = mountTable([])
+
    await flushPromises()
    await flushPromises()

    expect(w.text()).toContain('Geen failures gevonden')
  })

-  it('does not show retry button for resolved rows when state filter is "all"', async () => {
+  it('does not show retry button for resolved rows', async () => {
    const w = mountTable([makeFailure({ state: 'resolved' })])
+
    await flushPromises()
    await flushPromises()

-    // Click "Alle" toggle button
-    const buttons = w.findAll('button')
-    const allBtn = buttons.find(b => b.text() === 'Alle')
-    expect(allBtn).toBeTruthy()
-    await allBtn?.trigger('click')
-    await flushPromises()
-
-    // For resolved row, retry button is not rendered (template guards
-    // on item.state === 'open').
+    // Template guard: retry button only renders for state === 'open'.
    const buttonTexts = w.findAll('button').map(b => b.text())
+
    expect(buttonTexts).not.toContain('Retry')
  })
+
+  it('forwards search input as a query param to the index endpoint', async () => {
+    const w = mountTable([])
+
+    await flushPromises()
+
+    const search = w.find('input[placeholder="Zoek op exception message..."]')
+
+    expect(search.exists()).toBe(true)
+    await search.setValue('crowd_type')
+    await flushPromises()
+
+    // Debounce default = 400ms; flush timers.
+    await new Promise(resolve => setTimeout(resolve, 450))
+    await flushPromises()
+
+    const indexCalls = mockGet.mock.calls.filter(c => !String(c[0]).endsWith('/kpis'))
+    const lastCall = indexCalls[indexCalls.length - 1]
+
+    expect(lastCall[1]?.params?.search).toBe('crowd_type')
+  })
 })
--- a/apps/app/src/components/form-failures/tests/ResolveFailureDialog.spec.ts
+++ b/apps/app/src/components/form-failures/tests/ResolveFailureDialog.spec.ts
@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

+import ResolveFailureDialog from '../ResolveFailureDialog.vue'
+import type { FormFailure } from '@/types/form-failures'
+
 const mockPost = vi.fn()
+
 vi.mock('@/lib/axios', () => ({
  apiClient: {
    get: vi.fn(),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
  },
 }))

-import ResolveFailureDialog from '../ResolveFailureDialog.vue'
-import type { FormFailure } from '@/types/form-failures'
-
 function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
  return {
    id: '01ABC',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
    failed_at: '2026-04-28T12:00:00Z',
    exception_class: 'RuntimeException',
    exception_message: 'boom',
+    exception_trace: null,
    context: null,
    retry_count: 0,
    resolved_at: null,
+    resolved_by_user_id: null,
+    resolved_by_user_name: null,
    resolved_note: null,
    dismissed_at: null,
+    dismissed_by_user_id: null,
+    dismissed_by_user_name: null,
    dismissed_reason_type: null,
    dismissed_reason_note: null,
    state: 'open',
+    organisation_id: null,
+    organisation_name: null,
+    form_schema_id: null,
+    form_schema_label: null,
    ...overrides,
  }
 }
@@ -76,8 +86,11 @@ describe('ResolveFailureDialog', () => {
    mockPost.mockResolvedValue({ data: { data: makeFailure({ state: 'resolved' }) } })

    const w = mountDialog({ modelValue: true, failure: makeFailure() })
+
    await w.find('textarea').setValue('handmatige correctie')
+
    const confirm = w.findAll('button').find(b => b.text() === 'Markeren als opgelost')
+
    await confirm?.trigger('click')
    await flushPromises()

@@ -90,6 +103,7 @@ describe('ResolveFailureDialog', () => {

    const w = mountDialog({ modelValue: true, failure: makeFailure() })
    const confirm = w.findAll('button').find(b => b.text() === 'Markeren als opgelost')
+
    await confirm?.trigger('click')
    await flushPromises()

--- a/apps/app/src/components/form-failures/tests/RetryFailureDialog.spec.ts
+++ b/apps/app/src/components/form-failures/tests/RetryFailureDialog.spec.ts
@@ -2,7 +2,11 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import { flushPromises, mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

+import RetryFailureDialog from '../RetryFailureDialog.vue'
+import type { FormFailure } from '@/types/form-failures'
+
 const mockPost = vi.fn()
+
 vi.mock('@/lib/axios', () => ({
  apiClient: {
    get: vi.fn(),
@@ -10,9 +14,6 @@ vi.mock('@/lib/axios', () => ({
  },
 }))

-import RetryFailureDialog from '../RetryFailureDialog.vue'
-import type { FormFailure } from '@/types/form-failures'
-
 function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
  return {
    id: '01ABC',
@@ -22,14 +23,23 @@ function makeFailure(overrides: Partial<FormFailure> = {}): FormFailure {
    failed_at: '2026-04-28T12:00:00Z',
    exception_class: 'RuntimeException',
    exception_message: 'boom',
+    exception_trace: null,
    context: null,
    retry_count: 0,
    resolved_at: null,
+    resolved_by_user_id: null,
+    resolved_by_user_name: null,
    resolved_note: null,
    dismissed_at: null,
+    dismissed_by_user_id: null,
+    dismissed_by_user_name: null,
    dismissed_reason_type: null,
    dismissed_reason_note: null,
    state: 'open',
+    organisation_id: null,
+    organisation_name: null,
+    form_schema_id: null,
+    form_schema_label: null,
    ...overrides,
  }
 }
--- a/apps/app/src/composables/api/tests/useFormFailures.spec.ts
+++ b/apps/app/src/composables/api/tests/useFormFailures.spec.ts
@@ -3,6 +3,15 @@ import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, h, ref } from 'vue'

+import {
+  useDismissFailure,
+  useFormFailure,
+  useFormFailures,
+  useFormFailuresKpis,
+  useResolveFailure,
+  useRetryFailure,
+} from '../useFormFailures'
+
 const mockGet = vi.fn()
 const mockPost = vi.fn()

@@ -13,14 +22,6 @@ vi.mock('@/lib/axios', () => ({
  },
 }))

-import {
-  useDismissFailure,
-  useFormFailure,
-  useFormFailures,
-  useResolveFailure,
-  useRetryFailure,
-} from '../useFormFailures'
-
 function flushAsync(): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, 0))
 }
@@ -82,6 +83,62 @@ describe('useFormFailures (list)', () => {

    expect(mockGet).not.toHaveBeenCalled()
  })
+
+  it('forwards server-side filters and strips empty values', async () => {
+    mockGet.mockResolvedValue({ data: { data: [], links: {}, meta: { current_page: 1, per_page: 25, total: 0, last_page: 1 } } })
+
+    mountWithQuery(() => useFormFailures(
+      ref({
+        page: 2,
+        per_page: 25,
+        state: 'open',
+        search: '  crowd_type  ',
+        listener_class: 'App\\Listeners\\FormBuilder\\ApplyBindingsOnFormSubmit',
+        failed_at_from: '2026-01-01',
+        failed_at_to: '',
+      }),
+      'platform',
+    ))
+    await flushAsync()
+
+    expect(mockGet).toHaveBeenCalledWith('/admin/form-failures', {
+      params: {
+        page: 2,
+        per_page: 25,
+        state: 'open',
+        search: 'crowd_type',
+        listener_class: 'App\\Listeners\\FormBuilder\\ApplyBindingsOnFormSubmit',
+        failed_at_from: '2026-01-01',
+      },
+    })
+  })
+})
+
+describe('useFormFailuresKpis', () => {
+  it('GETs the platform /kpis endpoint and unwraps data', async () => {
+    mockGet.mockResolvedValue({ data: { data: { open: 3, resolved_30d: 5, dismissed_30d: 1, total_submissions: 42 } } })
+
+    const { vm } = mountWithQuery(() => useFormFailuresKpis('platform'))
+
+    await flushAsync()
+
+    expect(mockGet).toHaveBeenCalledWith('/admin/form-failures/kpis')
+    expect((vm.result as { data: { value: unknown } }).data.value).toEqual({
+      open: 3,
+      resolved_30d: 5,
+      dismissed_30d: 1,
+      total_submissions: 42,
+    })
+  })
+
+  it('GETs the org-scoped /kpis endpoint', async () => {
+    mockGet.mockResolvedValue({ data: { data: { open: 0, resolved_30d: 0, dismissed_30d: 0, total_submissions: 0 } } })
+
+    mountWithQuery(() => useFormFailuresKpis('org', ref('01H-org-id')))
+    await flushAsync()
+
+    expect(mockGet).toHaveBeenCalledWith('/organisations/01H-org-id/form-failures/kpis')
+  })
 })

 describe('useFormFailure (single)', () => {
@@ -115,6 +172,7 @@ describe('useResolveFailure', () => {
    mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'resolved' } } })

    const { vm } = mountWithQuery(() => useResolveFailure('platform'))
+
    await vm.result.mutateAsync({ failureId: 'X', payload: { note: 'fixed' } })

    expect(mockPost).toHaveBeenCalledWith('/admin/form-failures/X/resolve', { note: 'fixed' })
@@ -124,6 +182,7 @@ describe('useResolveFailure', () => {
    mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'resolved' } } })

    const { vm } = mountWithQuery(() => useResolveFailure('platform'))
+
    await vm.result.mutateAsync({ failureId: 'X', payload: { note: '   ' } })

    expect(mockPost).toHaveBeenCalledWith('/admin/form-failures/X/resolve', {})
@@ -135,6 +194,7 @@ describe('useDismissFailure', () => {
    mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'dismissed' } } })

    const { vm } = mountWithQuery(() => useDismissFailure('platform'))
+
    await vm.result.mutateAsync({
      failureId: 'X',
      payload: { reason_type: 'other', note: 'manual triage' },
@@ -150,6 +210,7 @@ describe('useDismissFailure', () => {
    mockPost.mockResolvedValue({ data: { data: { id: 'X', state: 'dismissed' } } })

    const { vm } = mountWithQuery(() => useDismissFailure('platform'))
+
    await vm.result.mutateAsync({ failureId: 'X', payload: { reason_type: 'schema_deleted' } })

    expect(mockPost).toHaveBeenCalledWith(
--- a/apps/app/src/composables/api/useFormFailures.ts
+++ b/apps/app/src/composables/api/useFormFailures.ts
@@ -12,7 +12,7 @@ import type {

 /**
 * TanStack Vue Query composables for the FormSubmissionActionFailure
- * admin endpoints landed in WS-6 sessie 2.
+ * admin endpoints.
 *
 * Routes (matching api/routes/api.php):
 *   - Platform (super_admin): /api/v1/admin/form-failures
@@ -21,6 +21,10 @@ import type {
 * Both scopes share the same controller methods + resource shape; the
 * scope argument selects the URL prefix and the cache key family. The
 * org-scope variant additionally requires `orgId`.
+ *
+ * Sessie 3c — index now accepts server-side filters (state/search/
+ * failed_at_from/failed_at_to/listener_class) and a separate `/kpis`
+ * endpoint replaces the client-side bucketing of an oversized list.
 */

 interface PaginatedResponse<T> {
@@ -41,14 +45,12 @@ interface SingleResponse<T> {
 export type FormFailureScope = 'platform' | 'org'

 function basePath(scope: FormFailureScope, orgId?: MaybeRef<string | undefined>): string {
-  if (scope === 'platform') {
+  if (scope === 'platform')
    return '/admin/form-failures'
-  }

  const id = unref(orgId)
-  if (!id) {
+  if (!id)
    throw new Error('useFormFailures: org scope requires orgId')
-  }

  return `/organisations/${id}/form-failures`
 }
@@ -57,6 +59,30 @@ function listKey(scope: FormFailureScope, orgId: MaybeRef<string | undefined>, p
  return ['form-failures', scope, unref(orgId) ?? null, unref(params)]
 }

+/**
+ * Strip empty/undefined keys so the URL stays clean and the React Query
+ * key family doesn't fragment over stable (vs. dirty) inputs.
+ */
+function buildIndexParams(p: FormFailuresListParams): Record<string, string | number> {
+  const out: Record<string, string | number> = {}
+  if (p.page !== undefined)
+    out.page = p.page
+  if (p.per_page !== undefined)
+    out.per_page = p.per_page
+  if (p.state !== undefined && p.state !== null)
+    out.state = p.state
+  if (p.listener_class && p.listener_class.trim() !== '')
+    out.listener_class = p.listener_class
+  if (p.failed_at_from && p.failed_at_from.trim() !== '')
+    out.failed_at_from = p.failed_at_from
+  if (p.failed_at_to && p.failed_at_to.trim() !== '')
+    out.failed_at_to = p.failed_at_to
+  if (p.search && p.search.trim() !== '')
+    out.search = p.search.trim()
+
+  return out
+}
+
 export function useFormFailures(
  params: MaybeRef<FormFailuresListParams>,
  scope: FormFailureScope,
@@ -66,11 +92,9 @@ export function useFormFailures(
    queryKey: computed(() => listKey(scope, orgId, params)),
    queryFn: async () => {
      const p = unref(params)
+
      const { data } = await apiClient.get<PaginatedResponse<FormFailure>>(basePath(scope, orgId), {
-        params: {
-          page: p.page,
-          per_page: p.per_page,
-        },
+        params: buildIndexParams(p),
      })

      return data
@@ -80,33 +104,18 @@ export function useFormFailures(
 }

 /**
- * KPI counts derived client-side via 3 parallel state-filtered list calls
- * + the unfiltered total. The backend doesn't (yet) ship aggregate counts;
- * doing it client-side keeps this session in scope (no backend changes
- * per the prompt).
+ * Server-side KPI aggregate. Single COUNT-per-metric query — independent
+ * of tenant volume. Replaces sessie 3b's client-side bucketing.
 */
 export function useFormFailuresKpis(scope: FormFailureScope, orgId?: MaybeRef<string | undefined>) {
  return useQuery({
    queryKey: ['form-failures-kpis', scope, computed(() => unref(orgId) ?? null)],
    queryFn: async (): Promise<FormFailuresKpis> => {
-      const path = basePath(scope, orgId)
-      const [allRes] = await Promise.all([
-        apiClient.get<PaginatedResponse<FormFailure>>(path, { params: { per_page: 100 } }),
-      ])
+      const { data } = await apiClient.get<SingleResponse<FormFailuresKpis>>(
+        `${basePath(scope, orgId)}/kpis`,
+      )

-      // Backend currently lists everything in failed_at-DESC order; bucket
-      // by client-side `state`. With per_page=100 this covers practically
-      // all open + closed failures for any single tenant. Backlog item
-      // tracks moving to a server-side count endpoint.
-      const all = allRes.data.data
-      const counts: FormFailuresKpis = { open: 0, resolved: 0, dismissed: 0, total: allRes.data.meta.total }
-      for (const f of all) {
-        if (f.state === 'open') counts.open += 1
-        else if (f.state === 'resolved') counts.resolved += 1
-        else if (f.state === 'dismissed') counts.dismissed += 1
-      }
-
-      return counts
+      return data.data
    },
    enabled: () => scope === 'platform' || !!unref(orgId),
  })
@@ -134,8 +143,10 @@ function invalidateFamily(qc: ReturnType<typeof useQueryClient>, scope: FormFail
  qc.invalidateQueries({ queryKey: ['form-failures', scope] })
  qc.invalidateQueries({ queryKey: ['form-failures-kpis', scope] })
  qc.invalidateQueries({ queryKey: ['form-failure', scope] })
+
  // Pipeline retry succeeds → submission state may also change.
  qc.invalidateQueries({ queryKey: ['form-submissions'] })
+
  // Touch orgId to silence "unused" lint when scope === 'platform'.
  void unref(orgId)
 }
@@ -164,9 +175,8 @@ export function useResolveFailure(scope: FormFailureScope, orgId?: MaybeRef<stri
      // FormRequest treats an absent key and a null value identically,
      // but keeping the payload tight avoids audit-log noise.
      const body: Record<string, string> = {}
-      if (payload.note && payload.note.trim() !== '') {
+      if (payload.note && payload.note.trim() !== '')
        body.note = payload.note.trim()
-      }

      const { data } = await apiClient.post<SingleResponse<FormFailure>>(
        `${basePath(scope, orgId)}/${failureId}/resolve`,
@@ -185,9 +195,8 @@ export function useDismissFailure(scope: FormFailureScope, orgId?: MaybeRef<stri
  return useMutation({
    mutationFn: async ({ failureId, payload }: { failureId: string; payload: DismissFailurePayload }) => {
      const body: Record<string, string> = { reason_type: payload.reason_type }
-      if (payload.note && payload.note.trim() !== '') {
+      if (payload.note && payload.note.trim() !== '')
        body.note = payload.note.trim()
-      }

      const { data } = await apiClient.post<SingleResponse<FormFailure>>(
        `${basePath(scope, orgId)}/${failureId}/dismiss`,
--- a/apps/app/src/types/form-failures.ts
+++ b/apps/app/src/types/form-failures.ts
@@ -11,7 +11,24 @@ export type FormFailureDismissalReason =
  | 'data_quality_issue'
  | 'other'

-/** The shape returned by the controller's `show` / index endpoints. */
+export type FormFailureRetryOutcome = 'succeeded' | 'failed'
+
+/** Per-attempt retry record exposed inside FormFailure.retry_history. */
+export interface FormFailureRetryAttempt {
+  id: string
+  attempted_at: string
+  attempted_by_user_id: string | null
+  attempted_by_user_name: string | null
+  outcome: FormFailureRetryOutcome
+  exception_class: string | null
+  exception_message: string | null
+}
+
+/**
+ * The shape returned by the controller's `show` / index endpoints.
+ * Index payloads omit `retry_history` (it's only eager-loaded on the
+ * detail endpoint) — the field is optional on the type.
+ */
 export interface FormFailure {
  id: string
  form_submission_id: string
@@ -20,37 +37,43 @@ export interface FormFailure {
  failed_at: string
  exception_class: string
  exception_message: string
+  exception_trace: string | null
  context: Record<string, unknown> | null
  retry_count: number
  resolved_at: string | null
+  resolved_by_user_id: string | null
+  resolved_by_user_name: string | null
  resolved_note: string | null
  dismissed_at: string | null
+  dismissed_by_user_id: string | null
+  dismissed_by_user_name: string | null
  dismissed_reason_type: FormFailureDismissalReason | null
  dismissed_reason_note: string | null
  state: FormFailureState
+  organisation_id: string | null
+  organisation_name: string | null
+  form_schema_id: string | null
+  form_schema_label: string | null
+  retry_history?: FormFailureRetryAttempt[]
 }

-/** Filter / pagination params for the list endpoint. */
+/** Filter / pagination params forwarded to the index endpoint. */
 export interface FormFailuresListParams {
  page?: number
  per_page?: number
-  // Note: backend currently ships only `latest('failed_at')->paginate(50)`
-  // (sessie 2 controller); filters are applied client-side. The shape
-  // here is what the UI tracks; only `page` is forwarded as a query
-  // parameter today.
  state?: FormFailureState | 'all'
-  listener?: string
+  listener_class?: string
  failed_at_from?: string
  failed_at_to?: string
  search?: string
 }

-/** KPI counts derived client-side via parallel state-filtered list calls. */
+/** Server-side aggregate counters returned by the `/kpis` endpoint. */
 export interface FormFailuresKpis {
  open: number
-  resolved: number
-  dismissed: number
-  total: number
+  resolved_30d: number
+  dismissed_30d: number
+  total_submissions: number
 }

 export interface ResolveFailurePayload {