feat(frontend): Improve version comparison

legalconsenthub/types/formDiff.ts

@@ -1,30 +1,72 @@
-export interface FormDiff {
-  elementsAdded: ElementChange[]
-  elementsRemoved: ElementChange[]
-  elementsModified: ElementModification[]
+import type { FormElementType } from '~~/.api-client'
+
+/**
+ * Represents a single row in a table diff.
+ */
+export interface TableRowDiff {
+  /** Row index (0-based) */
+  rowIndex: number
+  /** Type of change: 'added', 'removed', 'modified', 'unchanged' */
+  changeType: 'added' | 'removed' | 'modified' | 'unchanged'
+  /** Previous row values (keyed by column label) */
+  previousValues: Record<string, string>
+  /** Current row values (keyed by column label) */
+  currentValues: Record<string, string>
 }
 
-export interface ElementChange {
+/**
+ * Structured table diff for detailed comparison display.
+ */
+export interface TableDiff {
+  /** Column labels/headers */
+  columns: string[]
+  /** Row-by-row diff */
+  rows: TableRowDiff[]
+  /** Summary counts */
+  addedCount: number
+  removedCount: number
+  modifiedCount: number
+}
+
+/**
+ * Represents a single value change in a form element.
+ */
+export interface ValueChange {
+  /** The section this element belongs to */
   sectionTitle: string
-  title: string | undefined
-  type: string
-  position: number
+  /** The title/label of the form element */
+  elementTitle: string
+  /** The type of form element (SELECT, TEXTFIELD, TABLE, etc.) */
+  elementType: FormElementType
+  /** The raw previous value (null = no previous value) */
+  previousValue: string | string[] | null
+  /** The raw current value (null = value was cleared) */
+  currentValue: string | string[] | null
+  /** Human-readable label for the previous value */
+  previousLabel: string | null
+  /** Human-readable label for the current value */
+  currentLabel: string | null
+  /** Structured table diff (only for TABLE elements) */
+  tableDiff?: TableDiff
 }
 
-export interface ElementModification {
+/**
+ * The result of comparing two form versions.
+ * Changes are categorized by type for better UX presentation.
+ */
+export interface FormValueDiff {
+  /** Elements that were answered for the first time */
+  newAnswers: ValueChange[]
+  /** Elements where the value was changed */
+  changedAnswers: ValueChange[]
+  /** Elements where the value was cleared/removed */
+  clearedAnswers: ValueChange[]
+}
+
+/**
+ * Changes grouped by section for accordion display.
+ */
+export interface SectionChanges {
   sectionTitle: string
-  position: number
-  optionsAdded: OptionChange[]
-  optionsRemoved: OptionChange[]
-  optionsModified: OptionModification[]
-}
-
-export interface OptionChange {
-  value: string
-  label: string
-}
-
-export interface OptionModification {
-  value: string
-  labelChanged: { from: string; to: string }
+  changes: ValueChange[]
 }