feat: Implement attestation checkbox in attire capture page and refactor related components

apps/mobile/packages/features/staff/profile_sections/onboarding/attire/lib/src/presentation/pages/attire_capture_page.dart

@@ -298,17 +298,11 @@ class _AttireCapturePageState extends State<AttireCapturePage> {
                               currentPhotoUrl: currentPhotoUrl,
                               referenceImageUrl: widget.item.imageUrl,
                             ),
-                            const SizedBox(height: UiConstants.space1),
                             InfoSection(
                               description: widget.item.description,
                               statusText: _getStatusText(hasUploadedPhoto),
                               statusColor: _getStatusColor(hasUploadedPhoto),
                               isPending: _isPending,
-                              showCheckbox: !_hasVerificationStatus,
-                              isAttested: state.isAttested,
-                              onAttestationChanged: (bool? val) {
-                                cubit.toggleAttestation(val ?? false);
-                              },
                             ),
                           ],
                         ),
@@ -321,6 +315,11 @@ class _AttireCapturePageState extends State<AttireCapturePage> {
                       hasVerificationStatus: _hasVerificationStatus,
                       hasUploadedPhoto: hasUploadedPhoto,
                       updatedItem: state.updatedItem,
+                      showCheckbox: !_hasVerificationStatus,
+                      isAttested: state.isAttested,
+                      onAttestationChanged: (bool? val) {
+                        cubit.toggleAttestation(val ?? false);
+                      },
                       onGallery: () => _onGallery(context),
                       onCamera: () => _onCamera(context),
                       onSubmit: () => _onSubmit(context),

apps/mobile/packages/features/staff/profile_sections/onboarding/attire/lib/src/presentation/widgets/attestation_checkbox.dart

@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:core_localization/core_localization.dart';
 
 class AttestationCheckbox extends StatelessWidget {
-
   const AttestationCheckbox({
     super.key,
     required this.isChecked,
@@ -14,37 +13,22 @@ class AttestationCheckbox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Row(
-      padding: const EdgeInsets.all(UiConstants.space4),
+      crossAxisAlignment: CrossAxisAlignment.start,
-      decoration: BoxDecoration(
+      spacing: UiConstants.space4,
-        color: UiColors.white,
+      children: <Widget>[
-        borderRadius: BorderRadius.circular(UiConstants.radiusBase),
+        SizedBox(
-        border: Border.all(color: UiColors.border),
+          width: 24,
-      ),
+          height: 24,
-      child: Row(
+          child: Checkbox(value: isChecked, onChanged: onChanged),
-        crossAxisAlignment: CrossAxisAlignment.start,
+        ),
-        children: <Widget>[
+        Expanded(
-          SizedBox(
+          child: Text(
-            width: 24,
+            t.staff_profile_attire.attestation,
-            height: 24,
+            style: UiTypography.body2r,
-            child: Checkbox(
-              value: isChecked,
-              onChanged: onChanged,
-              activeColor: UiColors.primary,
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(4),
-              ),
-            ),
           ),
-          const SizedBox(width: UiConstants.space3),
+        ),
-          Expanded(
+      ],
-            child: Text(
-              t.staff_profile_attire.attestation,
-              style: UiTypography.body2r.copyWith(color: UiColors.textPrimary),
-            ),
-          ),
-        ],
-      ),
     );
   }
 }

apps/mobile/packages/features/staff/profile_sections/onboarding/attire/lib/src/presentation/widgets/attire_capture_page/footer_section.dart

@@ -4,6 +4,7 @@ import 'package:flutter_modular/flutter_modular.dart';
 import 'package:krow_domain/krow_domain.dart';
 import 'package:krow_core/core.dart';
 
+import '../attestation_checkbox.dart';
 import 'attire_upload_buttons.dart';
 
 /// Handles the primary actions at the bottom of the page.
@@ -16,6 +17,9 @@ class FooterSection extends StatelessWidget {
     required this.hasVerificationStatus,
     required this.hasUploadedPhoto,
     this.updatedItem,
+    required this.showCheckbox,
+    required this.isAttested,
+    required this.onAttestationChanged,
     required this.onGallery,
     required this.onCamera,
     required this.onSubmit,
@@ -37,6 +41,15 @@ class FooterSection extends StatelessWidget {
   /// The updated attire item, if any.
   final AttireItem? updatedItem;
 
+  /// Whether to show the attestation checkbox.
+  final bool showCheckbox;
+
+  /// Whether the user has attested to owning the item.
+  final bool isAttested;
+
+  /// Callback when the attestation status changes.
+  final ValueChanged<bool?> onAttestationChanged;
+
   /// Callback to open the gallery.
   final VoidCallback onGallery;
 
@@ -57,6 +70,13 @@ class FooterSection extends StatelessWidget {
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
+            if (showCheckbox) ...<Widget>[
+              AttestationCheckbox(
+                isChecked: isAttested,
+                onChanged: onAttestationChanged,
+              ),
+              const SizedBox(height: UiConstants.space8),
+            ],
             if (isUploading)
               const Center(
                 child: Padding(

apps/mobile/packages/features/staff/profile_sections/onboarding/attire/lib/src/presentation/widgets/attire_capture_page/info_section.dart

@@ -1,10 +1,9 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 
-import '../attestation_checkbox.dart';
 import 'attire_verification_status_card.dart';
 
-/// Displays the item details, verification status, and attestation checkbox.
+/// Displays the item details and verification status.
 class InfoSection extends StatelessWidget {
   /// Creates an [InfoSection].
   const InfoSection({
@@ -13,9 +12,6 @@ class InfoSection extends StatelessWidget {
     required this.statusText,
     required this.statusColor,
     required this.isPending,
-    required this.showCheckbox,
-    required this.isAttested,
-    required this.onAttestationChanged,
   });
 
   /// The description of the attire item.
@@ -30,15 +26,6 @@ class InfoSection extends StatelessWidget {
   /// Whether the item is currently pending verification.
   final bool isPending;
 
-  /// Whether to show the attestation checkbox.
-  final bool showCheckbox;
-
-  /// Whether the user has attested to owning the item.
-  final bool isAttested;
-
-  /// Callback when the attestation status changes.
-  final ValueChanged<bool?> onAttestationChanged;
-
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -74,15 +61,6 @@ class InfoSection extends StatelessWidget {
           statusText: statusText,
           statusColor: statusColor,
         ),
-        const SizedBox(height: UiConstants.space6),
-
-        if (showCheckbox) ...<Widget>[
-          AttestationCheckbox(
-            isChecked: isAttested,
-            onChanged: onAttestationChanged,
-          ),
-          const SizedBox(height: UiConstants.space6),
-        ],
       ],
     );
   }