appiq-solution 1.1.0 → 1.3.0

package/flutter/punkt.claude/punkt.claude/commands/feature-ui-layer.md

@@ -0,0 +1,831 @@
+# UI Layer Development Command
+
+Develops the presentation layer (UI) for a feature following AiGo architectural patterns with RiverPod integration, Material 3, and multilingual support.
+
+**Usage:** `feature-ui-layer [FEATURE_NAME] [FEATURE_DESCRIPTION]`
+
+**Example:** `feature-ui-layer user-favorites "Allow users to mark places as favorites and view them in a separate list"`
+
+## Pre-Execution Checklist
+
+1. **Check Channel Status**: Read `/Users/vapps-it/Projects/AiGo/sourceCode/mobile_app/.claude/channel.md`
+2. **Verify Dependencies**: Ensure architecture analysis is completed
+3. **Update Channel**: Mark UI Layer status as "IN_PROGRESS" and assign agent
+4. **Check Blockers**: Verify no blockers are preventing UI development
+
+## Implementation Process
+
+### Phase 1: Analysis & Planning
+
+1. **Study Existing UI Patterns**:
+   - Analyze `lib/views/*/screens/` structure and patterns
+   - Study existing screen implementations and widgets in `lib/core/widgets/`
+   - Review AppTheme implementation and Material 3 usage
+   - Check responsive design patterns and screen mixins
+   - Understand RiverPod provider consumption in UI
+   - Review localization patterns with `context.l10n`
+
+2. **Define UI Requirements**:
+   - Identify main screens needed for the feature
+   - Plan RiverPod provider integration
+   - Define user interactions and navigation flows
+   - Plan responsive design with existing mixins
+   - Plan Material 3 component usage
+   - Identify multilingual text requirements
+
+3. **Update Channel**: Add UI requirements to channel.md
+
+### Phase 2: Screen Structure Implementation
+
+1. **Create Main Screen** (`lib/views/[feature]/screens/[feature]_screen.dart`):
+   ```dart
+   import 'package:flutter/material.dart';
+   import 'package:flutter_riverpod/flutter_riverpod.dart';
+   import 'package:aigo/core/widgets/base_scaffold.dart';
+   import 'package:aigo/core/widgets/loading_indicator.dart';
+   import 'package:aigo/core/widgets/error_screen.dart';
+   import 'package:aigo/l10n/l10n.dart';
+   import '../providers/[feature]_provider.dart';
+   import '../widgets/[feature]_list_item.dart';
+   import '../widgets/[feature]_empty_state.dart';
+   
+   class [FeatureName]Screen extends ConsumerWidget {
+     const [FeatureName]Screen({Key? key}) : super(key: key);
+   
+     @override
+     Widget build(BuildContext context, WidgetRef ref) {
+       return BaseScaffold(
+         title: context.l10n.[featureName]Title,
+         actions: [
+           IconButton(
+             icon: const Icon(Icons.add),
+             onPressed: () => _showAddDialog(context, ref),
+           ),
+         ],
+         floatingActionButton: FloatingActionButton(
+           onPressed: () => _showAddDialog(context, ref),
+           child: const Icon(Icons.add),
+         ),
+         body: const _[FeatureName]View(),
+       );
+     }
+   
+     void _showAddDialog(BuildContext context, WidgetRef ref) {
+       // Implementation for adding new items
+       showDialog(
+         context: context,
+         builder: (_) => _AddItemDialog(),
+       );
+     }
+   }
+   
+   class _[FeatureName]View extends ConsumerWidget {
+     const _[FeatureName]View({Key? key}) : super(key: key);
+   
+     @override
+     Widget build(BuildContext context, WidgetRef ref) {
+       final state = ref.watch([featureName]Provider);
+       
+       if (state.isLoading && state.items.isEmpty) {
+         return const LoadingIndicator();
+       }
+   
+       if (state.error != null && state.items.isEmpty) {
+         return ErrorScreen(
+           message: state.error!,
+           onRetry: () => ref.read([featureName]Provider.notifier).refresh(),
+         );
+       }
+   
+       if (state.items.isEmpty) {
+         return [FeatureName]EmptyState(
+           onAddPressed: () => _showAddDialog(context, ref),
+         );
+       }
+   
+       return RefreshIndicator(
+         onRefresh: () => ref.read([featureName]Provider.notifier).refresh(),
+         child: CustomScrollView(
+           slivers: [
+             SliverToBoxAdapter(
+               child: _buildHeader(context, state),
+             ),
+             SliverList(
+               delegate: SliverChildBuilderDelegate(
+                 (context, index) {
+                   final item = state.items[index];
+                   return [FeatureName]ListItem(
+                     item: item,
+                     onTap: () => _navigateToDetails(context, item),
+                     onEdit: () => _showEditDialog(context, ref, item),
+                     onDelete: () => _showDeleteConfirmation(context, ref, item),
+                   );
+                 },
+                 childCount: state.items.length,
+               ),
+             ),
+             if (state.isLoading && state.items.isNotEmpty)
+               const SliverToBoxAdapter(
+                 child: Padding(
+                   padding: EdgeInsets.all(16.0),
+                   child: Center(child: CircularProgressIndicator()),
+                 ),
+               ),
+           ],
+         ),
+       );
+     }
+   
+     Widget _buildHeader(BuildContext context, [FeatureName]State state) {
+       return Padding(
+         padding: const EdgeInsets.all(16.0),
+         child: Column(
+           crossAxisAlignment: CrossAxisAlignment.start,
+           children: [
+             Text(
+               context.l10n.[featureName]Count(state.items.length),
+               style: Theme.of(context).textTheme.bodyMedium,
+             ),
+             if (state.filters.isNotEmpty) ...[
+               const SizedBox(height: 8),
+               _buildActiveFilters(context, state),
+             ],
+           ],
+         ),
+       );
+     }
+   
+     Widget _buildActiveFilters(BuildContext context, [FeatureName]State state) {
+       return Wrap(
+         spacing: 8.0,
+         children: state.filters.entries.map((filter) {
+           return FilterChip(
+             label: Text('${filter.key}: ${filter.value}'),
+             onDeleted: () {
+               // Remove filter logic
+             },
+           );
+         }).toList(),
+       );
+     }
+   
+     void _navigateToDetails(BuildContext context, [FeatureName] item) {
+       Navigator.of(context).pushNamed(
+         '/[feature]/details',
+         arguments: item.id,
+       );
+     }
+   
+     void _showEditDialog(BuildContext context, WidgetRef ref, [FeatureName] item) {
+       showDialog(
+         context: context,
+         builder: (_) => _EditItemDialog(item: item),
+       );
+     }
+   
+     void _showDeleteConfirmation(BuildContext context, WidgetRef ref, [FeatureName] item) {
+       showDialog(
+         context: context,
+         builder: (_) => AlertDialog(
+           title: Text(context.l10n.confirmDelete),
+           content: Text(context.l10n.[featureName]DeleteConfirmation),
+           actions: [
+             TextButton(
+               onPressed: () => Navigator.of(context).pop(),
+               child: Text(context.l10n.cancel),
+             ),
+             FilledButton(
+               onPressed: () {
+                 Navigator.of(context).pop();
+                 ref.read([featureName]Provider.notifier).deleteItem(item.id);
+               },
+               child: Text(context.l10n.delete),
+             ),
+           ],
+         ),
+       );
+     }
+   
+     void _showAddDialog(BuildContext context, WidgetRef ref) {
+       showDialog(
+         context: context,
+         builder: (_) => const _AddItemDialog(),
+       );
+     }
+   }
+   ```
+
+### Phase 3: Widget Components Implementation
+
+1. **Create List Item Widget** (`lib/views/[feature]/widgets/[feature]_list_item.dart`):
+   ```dart
+   import 'package:flutter/material.dart';
+   import 'package:aigo/domain/models/[feature].dart';
+   import 'package:aigo/core/theme/app_colors.dart';
+   import 'package:aigo/l10n/l10n.dart';
+   
+   class [FeatureName]ListItem extends StatelessWidget {
+     final [FeatureName] item;
+     final VoidCallback? onTap;
+     final VoidCallback? onEdit;
+     final VoidCallback? onDelete;
+   
+     const [FeatureName]ListItem({
+       Key? key,
+       required this.item,
+       this.onTap,
+       this.onEdit,
+       this.onDelete,
+     }) : super(key: key);
+   
+     @override
+     Widget build(BuildContext context) {
+       return Card(
+         margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+         child: ListTile(
+           leading: _buildLeading(context),
+           title: Text(
+             item.title,
+             style: Theme.of(context).textTheme.titleMedium,
+           ),
+           subtitle: _buildSubtitle(context),
+           trailing: _buildTrailing(context),
+           onTap: onTap,
+         ),
+       );
+     }
+   
+     Widget _buildLeading(BuildContext context) {
+       return CircleAvatar(
+         backgroundColor: AppColors.primary.withOpacity(0.1),
+         child: Icon(
+           Icons.star, // Replace with appropriate icon
+           color: AppColors.primary,
+         ),
+       );
+     }
+   
+     Widget? _buildSubtitle(BuildContext context) {
+       if (item.description?.isNotEmpty == true) {
+         return Text(
+           item.description!,
+           maxLines: 2,
+           overflow: TextOverflow.ellipsis,
+         );
+       }
+       return Text(
+         context.l10n.[featureName]CreatedAt(item.createdAt),
+         style: Theme.of(context).textTheme.bodySmall,
+       );
+     }
+   
+     Widget _buildTrailing(BuildContext context) {
+       return PopupMenuButton<String>(
+         itemBuilder: (context) => [
+           PopupMenuItem(
+             value: 'edit',
+             child: ListTile(
+               leading: const Icon(Icons.edit),
+               title: Text(context.l10n.edit),
+               contentPadding: EdgeInsets.zero,
+             ),
+           ),
+           PopupMenuItem(
+             value: 'delete',
+             child: ListTile(
+               leading: const Icon(Icons.delete),
+               title: Text(context.l10n.delete),
+               contentPadding: EdgeInsets.zero,
+             ),
+           ),
+         ],
+         onSelected: (value) {
+           switch (value) {
+             case 'edit':
+               onEdit?.call();
+               break;
+             case 'delete':
+               onDelete?.call();
+               break;
+           }
+         },
+       );
+     }
+   }
+   ```
+
+2. **Create Empty State Widget** (`lib/views/[feature]/widgets/[feature]_empty_state.dart`):
+   ```dart
+   import 'package:flutter/material.dart';
+   import 'package:lottie/lottie.dart';
+   import 'package:aigo/core/utils/app_assets.dart';
+   import 'package:aigo/l10n/l10n.dart';
+   
+   class [FeatureName]EmptyState extends StatelessWidget {
+     final VoidCallback? onAddPressed;
+   
+     const [FeatureName]EmptyState({
+       Key? key,
+       this.onAddPressed,
+     }) : super(key: key);
+   
+     @override
+     Widget build(BuildContext context) {
+       return Center(
+         child: Padding(
+           padding: const EdgeInsets.all(32.0),
+           child: Column(
+             mainAxisAlignment: MainAxisAlignment.center,
+             children: [
+               Lottie.asset(
+                 AppAssets.emptyAnimation,
+                 height: 200,
+                 repeat: false,
+               ),
+               const SizedBox(height: 24),
+               Text(
+                 context.l10n.[featureName]EmptyTitle,
+                 style: Theme.of(context).textTheme.headlineSmall,
+                 textAlign: TextAlign.center,
+               ),
+               const SizedBox(height: 16),
+               Text(
+                 context.l10n.[featureName]EmptyMessage,
+                 style: Theme.of(context).textTheme.bodyMedium,
+                 textAlign: TextAlign.center,
+               ),
+               const SizedBox(height: 32),
+               FilledButton.icon(
+                 onPressed: onAddPressed,
+                 icon: const Icon(Icons.add),
+                 label: Text(context.l10n.[featureName]AddFirst),
+               ),
+             ],
+           ),
+         ),
+       );
+     }
+   }
+   ```
+
+### Phase 4: Dialog Implementation
+
+1. **Create Add/Edit Dialog** (`lib/views/[feature]/widgets/[feature]_dialog.dart`):
+   ```dart
+   import 'package:flutter/material.dart';
+   import 'package:flutter_riverpod/flutter_riverpod.dart';
+   import 'package:aigo/domain/models/[feature].dart';
+   import 'package:aigo/l10n/l10n.dart';
+   import '../providers/[feature]_provider.dart';
+   
+   class _AddItemDialog extends ConsumerStatefulWidget {
+     const _AddItemDialog({Key? key}) : super(key: key);
+   
+     @override
+     ConsumerState<_AddItemDialog> createState() => _AddItemDialogState();
+   }
+   
+   class _AddItemDialogState extends ConsumerState<_AddItemDialog> {
+     final _formKey = GlobalKey<FormState>();
+     final _titleController = TextEditingController();
+     final _descriptionController = TextEditingController();
+   
+     @override
+     void dispose() {
+       _titleController.dispose();
+       _descriptionController.dispose();
+       super.dispose();
+     }
+   
+     @override
+     Widget build(BuildContext context) {
+       return AlertDialog(
+         title: Text(context.l10n.[featureName]AddTitle),
+         content: Form(
+           key: _formKey,
+           child: Column(
+             mainAxisSize: MainAxisSize.min,
+             children: [
+               TextFormField(
+                 controller: _titleController,
+                 decoration: InputDecoration(
+                   labelText: context.l10n.[featureName]TitleLabel,
+                   hintText: context.l10n.[featureName]TitleHint,
+                 ),
+                 validator: (value) {
+                   if (value?.trim().isEmpty == true) {
+                     return context.l10n.[featureName]TitleRequired;
+                   }
+                   return null;
+                 },
+                 autofocus: true,
+               ),
+               const SizedBox(height: 16),
+               TextFormField(
+                 controller: _descriptionController,
+                 decoration: InputDecoration(
+                   labelText: context.l10n.[featureName]DescriptionLabel,
+                   hintText: context.l10n.[featureName]DescriptionHint,
+                 ),
+                 maxLines: 3,
+               ),
+             ],
+           ),
+         ),
+         actions: [
+           TextButton(
+             onPressed: () => Navigator.of(context).pop(),
+             child: Text(context.l10n.cancel),
+           ),
+           FilledButton(
+             onPressed: _submit,
+             child: Text(context.l10n.add),
+           ),
+         ],
+       );
+     }
+   
+     void _submit() {
+       if (_formKey.currentState?.validate() == true) {
+         ref.read([featureName]Provider.notifier).addItem(
+           title: _titleController.text.trim(),
+           description: _descriptionController.text.trim().isNotEmpty
+               ? _descriptionController.text.trim()
+               : null,
+         );
+         Navigator.of(context).pop();
+       }
+     }
+   }
+   
+   class _EditItemDialog extends ConsumerStatefulWidget {
+     final [FeatureName] item;
+   
+     const _EditItemDialog({
+       Key? key,
+       required this.item,
+     }) : super(key: key);
+   
+     @override
+     ConsumerState<_EditItemDialog> createState() => _EditItemDialogState();
+   }
+   
+   class _EditItemDialogState extends ConsumerState<_EditItemDialog> {
+     final _formKey = GlobalKey<FormState>();
+     late final _titleController = TextEditingController(text: widget.item.title);
+     late final _descriptionController = TextEditingController(text: widget.item.description);
+   
+     @override
+     void dispose() {
+       _titleController.dispose();
+       _descriptionController.dispose();
+       super.dispose();
+     }
+   
+     @override
+     Widget build(BuildContext context) {
+       return AlertDialog(
+         title: Text(context.l10n.[featureName]EditTitle),
+         content: Form(
+           key: _formKey,
+           child: Column(
+             mainAxisSize: MainAxisSize.min,
+             children: [
+               TextFormField(
+                 controller: _titleController,
+                 decoration: InputDecoration(
+                   labelText: context.l10n.[featureName]TitleLabel,
+                 ),
+                 validator: (value) {
+                   if (value?.trim().isEmpty == true) {
+                     return context.l10n.[featureName]TitleRequired;
+                   }
+                   return null;
+                 },
+               ),
+               const SizedBox(height: 16),
+               TextFormField(
+                 controller: _descriptionController,
+                 decoration: InputDecoration(
+                   labelText: context.l10n.[featureName]DescriptionLabel,
+                 ),
+                 maxLines: 3,
+               ),
+             ],
+           ),
+         ),
+         actions: [
+           TextButton(
+             onPressed: () => Navigator.of(context).pop(),
+             child: Text(context.l10n.cancel),
+           ),
+           FilledButton(
+             onPressed: _submit,
+             child: Text(context.l10n.save),
+           ),
+         ],
+       );
+     }
+   
+     void _submit() {
+       if (_formKey.currentState?.validate() == true) {
+         final updatedItem = widget.item.copyWith(
+           title: _titleController.text.trim(),
+           description: _descriptionController.text.trim().isNotEmpty
+               ? _descriptionController.text.trim()
+               : null,
+         );
+         
+         ref.read([featureName]Provider.notifier).updateItem(updatedItem);
+         Navigator.of(context).pop();
+       }
+     }
+   }
+   ```
+
+### Phase 5: Details Screen Implementation
+
+1. **Create Details Screen** (`lib/views/[feature]/screens/[feature]_details_screen.dart`):
+   ```dart
+   import 'package:flutter/material.dart';
+   import 'package:flutter_riverpod/flutter_riverpod.dart';
+   import 'package:aigo/core/widgets/base_scaffold.dart';
+   import 'package:aigo/core/widgets/loading_indicator.dart';
+   import 'package:aigo/core/widgets/error_screen.dart';
+   import 'package:aigo/l10n/l10n.dart';
+   import '../providers/[feature]_provider.dart';
+   
+   class [FeatureName]DetailsScreen extends ConsumerWidget {
+     final String itemId;
+   
+     const [FeatureName]DetailsScreen({
+       Key? key,
+       required this.itemId,
+     }) : super(key: key);
+   
+     @override
+     Widget build(BuildContext context, WidgetRef ref) {
+       final asyncItem = ref.watch([featureName]ByIdProvider(itemId));
+   
+       return BaseScaffold(
+         title: context.l10n.[featureName]Details,
+         body: asyncItem.when(
+           data: (item) {
+             if (item == null) {
+               return ErrorScreen(
+                 message: context.l10n.[featureName]NotFound,
+                 onRetry: () => ref.invalidate([featureName]ByIdProvider(itemId)),
+               );
+             }
+             return _[FeatureName]DetailsView(item: item);
+           },
+           loading: () => const LoadingIndicator(),
+           error: (error, stack) => ErrorScreen(
+             message: error.toString(),
+             onRetry: () => ref.invalidate([featureName]ByIdProvider(itemId)),
+           ),
+         ),
+       );
+     }
+   }
+   
+   class _[FeatureName]DetailsView extends StatelessWidget {
+     final [FeatureName] item;
+   
+     const _[FeatureName]DetailsView({
+       Key? key,
+       required this.item,
+     }) : super(key: key);
+   
+     @override
+     Widget build(BuildContext context) {
+       return SingleChildScrollView(
+         padding: const EdgeInsets.all(16.0),
+         child: Column(
+           crossAxisAlignment: CrossAxisAlignment.start,
+           children: [
+             _buildHeader(context),
+             const SizedBox(height: 24),
+             _buildDetails(context),
+             const SizedBox(height: 24),
+             _buildMetadata(context),
+           ],
+         ),
+       );
+     }
+   
+     Widget _buildHeader(BuildContext context) {
+       return Card(
+         child: Padding(
+           padding: const EdgeInsets.all(16.0),
+           child: Column(
+             crossAxisAlignment: CrossAxisAlignment.start,
+             children: [
+               Text(
+                 item.title,
+                 style: Theme.of(context).textTheme.headlineSmall,
+               ),
+               if (item.description?.isNotEmpty == true) ...[
+                 const SizedBox(height: 8),
+                 Text(
+                   item.description!,
+                   style: Theme.of(context).textTheme.bodyMedium,
+                 ),
+               ],
+             ],
+           ),
+         ),
+       );
+     }
+   
+     Widget _buildDetails(BuildContext context) {
+       return Card(
+         child: Padding(
+           padding: const EdgeInsets.all(16.0),
+           child: Column(
+             crossAxisAlignment: CrossAxisAlignment.start,
+             children: [
+               Text(
+                 context.l10n.[featureName]DetailsTitle,
+                 style: Theme.of(context).textTheme.titleMedium,
+               ),
+               const SizedBox(height: 16),
+               _buildDetailRow(
+                 context,
+                 context.l10n.[featureName]CreatedLabel,
+                 _formatDate(item.createdAt),
+               ),
+               _buildDetailRow(
+                 context,
+                 context.l10n.[featureName]UpdatedLabel,
+                 _formatDate(item.updatedAt),
+               ),
+               _buildDetailRow(
+                 context,
+                 context.l10n.[featureName]StatusLabel,
+                 item.isActive ? context.l10n.active : context.l10n.inactive,
+               ),
+             ],
+           ),
+         ),
+       );
+     }
+   
+     Widget _buildDetailRow(BuildContext context, String label, String value) {
+       return Padding(
+         padding: const EdgeInsets.only(bottom: 8.0),
+         child: Row(
+           crossAxisAlignment: CrossAxisAlignment.start,
+           children: [
+             SizedBox(
+               width: 120,
+               child: Text(
+                 label,
+                 style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                   fontWeight: FontWeight.w500,
+                 ),
+               ),
+             ),
+             Expanded(
+               child: Text(
+                 value,
+                 style: Theme.of(context).textTheme.bodyMedium,
+               ),
+             ),
+           ],
+         ),
+       );
+     }
+   
+     Widget _buildMetadata(BuildContext context) {
+       if (item.metadata == null || item.metadata!.isEmpty) {
+         return const SizedBox.shrink();
+       }
+   
+       return Card(
+         child: Padding(
+           padding: const EdgeInsets.all(16.0),
+           child: Column(
+             crossAxisAlignment: CrossAxisAlignment.start,
+             children: [
+               Text(
+                 context.l10n.[featureName]MetadataTitle,
+                 style: Theme.of(context).textTheme.titleMedium,
+               ),
+               const SizedBox(height: 16),
+               ...item.metadata!.entries.map((entry) =>
+                 _buildDetailRow(context, entry.key, entry.value.toString()),
+               ),
+             ],
+           ),
+         ),
+       );
+     }
+   
+     String _formatDate(DateTime dateTime) {
+       return '${dateTime.day}.${dateTime.month}.${dateTime.year}';
+     }
+   }
+   ```
+
+### Phase 6: Navigation Integration
+
+1. **Update App Router** (`lib/core/routing/app_router.dart`):
+   ```dart
+   // Add to routes
+   GoRoute(
+     path: '/[feature]',
+     builder: (context, state) => const [FeatureName]Screen(),
+   ),
+   GoRoute(
+     path: '/[feature]/details/:id',
+     builder: (context, state) {
+       final id = state.pathParameters['id']!;
+       return [FeatureName]DetailsScreen(itemId: id);
+     },
+   ),
+   ```
+
+## Quality Checklist
+
+### UI Implementation
+- [ ] Uses ConsumerWidget for RiverPod integration
+- [ ] Proper error and loading state handling
+- [ ] Material 3 design components
+- [ ] Responsive design with proper spacing
+- [ ] Accessibility features implemented
+
+### Localization
+- [ ] All text uses context.l10n
+- [ ] No hardcoded strings
+- [ ] Proper placeholder usage
+- [ ] RTL support for Arabic
+- [ ] Cultural considerations for translations
+
+### Navigation
+- [ ] Proper route definitions
+- [ ] Navigation patterns follow app conventions
+- [ ] Back button handling
+- [ ] Deep linking support
+
+### User Experience
+- [ ] Loading indicators for async operations
+- [ ] Pull-to-refresh functionality
+- [ ] Empty states with clear actions
+- [ ] Error states with retry options
+- [ ] Confirmation dialogs for destructive actions
+
+## Channel Communication
+
+### Before Starting
+Update channel.md:
+```markdown
+### 🎨 UI Layer Status
+- **Status:** IN_PROGRESS
+- **Assigned Agent:** [YOUR_ID]
+- **Progress:** 0%
+```
+
+### During Development
+Update progress regularly:
+```markdown
+- **Progress:** [PERCENTAGE]%
+- **Files Created:** [LIST_OF_FILES]
+- **Next Steps:** [CURRENT_WORK]
+```
+
+### After Completion
+Mark as completed:
+```markdown
+### 🎨 UI Layer Status
+- **Status:** COMPLETED
+- **Progress:** 100%
+- **Files Created:** [COMPLETE_LIST]
+```
+
+## Dependencies
+
+### Must be completed first:
+- Architecture analysis
+- Business logic layer (providers)
+
+### Can work in parallel with:
+- Domain layer (with coordination)
+- Data layer (with coordination)
+
+### Enables after completion:
+- Localization layer
+- Integration testing
+- User acceptance testing
+
+## Output Deliverables
+
+1. **Main Screen**: `lib/views/[feature]/screens/[feature]_screen.dart`
+2. **Details Screen**: `lib/views/[feature]/screens/[feature]_details_screen.dart`
+3. **List Item Widget**: `lib/views/[feature]/widgets/[feature]_list_item.dart`
+4. **Empty State Widget**: `lib/views/[feature]/widgets/[feature]_empty_state.dart`
+5. **Dialog Components**: `lib/views/[feature]/widgets/[feature]_dialog.dart`
+6. **Updated Router**: Route definitions in `lib/core/routing/app_router.dart`
+7. **Updated Channel**: Progress and completion status in channel.md
+
+All UI components must follow AiGo's Material 3 design system, RiverPod patterns, and multilingual support with proper accessibility features.