@@ -618,6 +618,78 @@ export function CompanySubmissionWizard({
618618 ) }
619619 />
620620 ) ) }
621+ { matrixFields . map ( ( field ) => {
622+ const rows = normalizeMatrixRows ( watch ( field . key as never ) ) ;
623+ const rowValues = rows . length > 0 ? rows : [ createEmptyMatrixRow ( field . columns ) ] ;
624+ const matrixError = errors [ field . key as keyof typeof errors ] ;
625+ return (
626+ < Field key = { field . key } >
627+ < FieldLabel > { field . label } </ FieldLabel >
628+ { field . description && (
629+ < Text size = "sm" variant = "muted" >
630+ { field . description }
631+ </ Text >
632+ ) }
633+ < div className = "space-y-3" >
634+ { rowValues . map ( ( row , rowIndex ) => (
635+ < div
636+ key = { `${ field . key } -${ rowIndex } ` }
637+ className = "rounded-md border border-border p-3"
638+ >
639+ < div className = "mb-3 flex items-center justify-between" >
640+ < Text size = "sm" weight = "medium" >
641+ Row { rowIndex + 1 }
642+ </ Text >
643+ < Button
644+ type = "button"
645+ variant = "ghost"
646+ onClick = { ( ) => removeMatrixRow ( field , rowIndex ) }
647+ disabled = { rowValues . length <= 1 }
648+ >
649+ Remove row
650+ </ Button >
651+ </ div >
652+ < div className = "grid grid-cols-1 gap-3 lg:grid-cols-2" >
653+ { field . columns . map ( ( column ) => (
654+ < Field key = { `${ field . key } -${ rowIndex } -${ column . key } ` } >
655+ < FieldLabel htmlFor = { `${ field . key } -${ rowIndex } -${ column . key } ` } >
656+ { column . label }
657+ </ FieldLabel >
658+ { column . description && (
659+ < Text size = "sm" variant = "muted" >
660+ { column . description }
661+ </ Text >
662+ ) }
663+ < Input
664+ id = { `${ field . key } -${ rowIndex } -${ column . key } ` }
665+ value = { row [ column . key ] ?? '' }
666+ onChange = { ( event ) =>
667+ updateMatrixCell (
668+ field ,
669+ rowIndex ,
670+ column . key ,
671+ event . target . value ,
672+ )
673+ }
674+ placeholder = { column . placeholder }
675+ />
676+ </ Field >
677+ ) ) }
678+ </ div >
679+ </ div >
680+ ) ) }
681+ < Button
682+ type = "button"
683+ variant = "secondary"
684+ onClick = { ( ) => addMatrixRow ( field ) }
685+ >
686+ { field . addRowLabel ?? 'Add row' }
687+ </ Button >
688+ </ div >
689+ < FieldError errors = { [ matrixError as never ] } />
690+ </ Field >
691+ ) ;
692+ } ) }
621693 { extendedFields . map ( ( field ) => (
622694 < Controller
623695 key = { field . key }
@@ -726,78 +798,6 @@ export function CompanySubmissionWizard({
726798 ) }
727799 />
728800 ) ) }
729- { matrixFields . map ( ( field ) => {
730- const rows = normalizeMatrixRows ( watch ( field . key as never ) ) ;
731- const rowValues = rows . length > 0 ? rows : [ createEmptyMatrixRow ( field . columns ) ] ;
732- const matrixError = errors [ field . key as keyof typeof errors ] ;
733- return (
734- < Field key = { field . key } >
735- < FieldLabel > { field . label } </ FieldLabel >
736- { field . description && (
737- < Text size = "sm" variant = "muted" >
738- { field . description }
739- </ Text >
740- ) }
741- < div className = "space-y-3" >
742- { rowValues . map ( ( row , rowIndex ) => (
743- < div
744- key = { `${ field . key } -${ rowIndex } ` }
745- className = "rounded-md border border-border p-3"
746- >
747- < div className = "mb-3 flex items-center justify-between" >
748- < Text size = "sm" weight = "medium" >
749- Row { rowIndex + 1 }
750- </ Text >
751- < Button
752- type = "button"
753- variant = "ghost"
754- onClick = { ( ) => removeMatrixRow ( field , rowIndex ) }
755- disabled = { rowValues . length <= 1 }
756- >
757- Remove row
758- </ Button >
759- </ div >
760- < div className = "grid grid-cols-1 gap-3 lg:grid-cols-2" >
761- { field . columns . map ( ( column ) => (
762- < Field key = { `${ field . key } -${ rowIndex } -${ column . key } ` } >
763- < FieldLabel htmlFor = { `${ field . key } -${ rowIndex } -${ column . key } ` } >
764- { column . label }
765- </ FieldLabel >
766- { column . description && (
767- < Text size = "sm" variant = "muted" >
768- { column . description }
769- </ Text >
770- ) }
771- < Input
772- id = { `${ field . key } -${ rowIndex } -${ column . key } ` }
773- value = { row [ column . key ] ?? '' }
774- onChange = { ( event ) =>
775- updateMatrixCell (
776- field ,
777- rowIndex ,
778- column . key ,
779- event . target . value ,
780- )
781- }
782- placeholder = { column . placeholder }
783- />
784- </ Field >
785- ) ) }
786- </ div >
787- </ div >
788- ) ) }
789- < Button
790- type = "button"
791- variant = "secondary"
792- onClick = { ( ) => addMatrixRow ( field ) }
793- >
794- { field . addRowLabel ?? 'Add row' }
795- </ Button >
796- </ div >
797- < FieldError errors = { [ matrixError as never ] } />
798- </ Field >
799- ) ;
800- } ) }
801801 </ >
802802 ) }
803803 </ FieldGroup >
0 commit comments