fill
This commit is contained in:
285
lib/features/products/presentation/pages/products_page.dart
Normal file
285
lib/features/products/presentation/pages/products_page.dart
Normal file
@@ -0,0 +1,285 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../../../core/di/providers.dart';
|
||||
import '../widgets/product_list_item.dart';
|
||||
|
||||
/// Products list page
|
||||
/// Displays products for a specific warehouse and operation type
|
||||
class ProductsPage extends ConsumerStatefulWidget {
|
||||
final int warehouseId;
|
||||
final String warehouseName;
|
||||
final String operationType;
|
||||
|
||||
const ProductsPage({
|
||||
super.key,
|
||||
required this.warehouseId,
|
||||
required this.warehouseName,
|
||||
required this.operationType,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<ProductsPage> createState() => _ProductsPageState();
|
||||
}
|
||||
|
||||
class _ProductsPageState extends ConsumerState<ProductsPage> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Load products when page is initialized
|
||||
Future.microtask(() {
|
||||
ref.read(productsProvider.notifier).loadProducts(
|
||||
widget.warehouseId,
|
||||
widget.warehouseName,
|
||||
widget.operationType,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _onRefresh() async {
|
||||
await ref.read(productsProvider.notifier).refreshProducts();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
// Watch the products state
|
||||
final productsState = ref.watch(productsProvider);
|
||||
final products = productsState.products;
|
||||
final isLoading = productsState.isLoading;
|
||||
final error = productsState.error;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Products (${_getOperationTypeDisplay()})',
|
||||
style: textTheme.titleMedium,
|
||||
),
|
||||
Text(
|
||||
widget.warehouseName,
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: _onRefresh,
|
||||
tooltip: 'Refresh',
|
||||
),
|
||||
],
|
||||
),
|
||||
body: _buildBody(
|
||||
isLoading: isLoading,
|
||||
error: error,
|
||||
products: products,
|
||||
theme: theme,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build the body based on the current state
|
||||
Widget _buildBody({
|
||||
required bool isLoading,
|
||||
required String? error,
|
||||
required List products,
|
||||
required ThemeData theme,
|
||||
}) {
|
||||
return Column(
|
||||
children: [
|
||||
// Info header
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primaryContainer.withValues(alpha: 0.3),
|
||||
border: Border(
|
||||
bottom: BorderSide(
|
||||
color: theme.colorScheme.outline.withValues(alpha: 0.2),
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
widget.operationType == 'import'
|
||||
? Icons.arrow_downward
|
||||
: Icons.arrow_upward,
|
||||
color: widget.operationType == 'import'
|
||||
? Colors.green
|
||||
: Colors.orange,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
_getOperationTypeDisplay(),
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'Warehouse: ${widget.warehouseName}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Content area
|
||||
Expanded(
|
||||
child: _buildContent(
|
||||
isLoading: isLoading,
|
||||
error: error,
|
||||
products: products,
|
||||
theme: theme,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Build content based on state
|
||||
Widget _buildContent({
|
||||
required bool isLoading,
|
||||
required String? error,
|
||||
required List products,
|
||||
required ThemeData theme,
|
||||
}) {
|
||||
// Loading state
|
||||
if (isLoading && products.isEmpty) {
|
||||
return const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
CircularProgressIndicator(),
|
||||
SizedBox(height: 16),
|
||||
Text('Loading products...'),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error != null && products.isEmpty) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: theme.colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: theme.colorScheme.error,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
error,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton.icon(
|
||||
onPressed: _onRefresh,
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (products.isEmpty) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.inventory_2_outlined,
|
||||
size: 64,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'No Products',
|
||||
style: theme.textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'No products found for this warehouse and operation type.',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton.icon(
|
||||
onPressed: _onRefresh,
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Refresh'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Success state - show products list
|
||||
return RefreshIndicator(
|
||||
onRefresh: _onRefresh,
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: products.length,
|
||||
itemBuilder: (context, index) {
|
||||
final product = products[index];
|
||||
return ProductListItem(
|
||||
product: product,
|
||||
onTap: () {
|
||||
// Handle product tap if needed
|
||||
// For now, just show a snackbar
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Selected: ${product.fullName}'),
|
||||
duration: const Duration(seconds: 1),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Get display text for operation type
|
||||
String _getOperationTypeDisplay() {
|
||||
return widget.operationType == 'import'
|
||||
? 'Import Products'
|
||||
: 'Export Products';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../../domain/entities/product_entity.dart';
|
||||
import '../../domain/usecases/get_products_usecase.dart';
|
||||
|
||||
/// Products state class
|
||||
/// Holds the current state of the products feature
|
||||
class ProductsState {
|
||||
final List<ProductEntity> products;
|
||||
final String operationType;
|
||||
final int? warehouseId;
|
||||
final String? warehouseName;
|
||||
final bool isLoading;
|
||||
final String? error;
|
||||
|
||||
const ProductsState({
|
||||
this.products = const [],
|
||||
this.operationType = 'import',
|
||||
this.warehouseId,
|
||||
this.warehouseName,
|
||||
this.isLoading = false,
|
||||
this.error,
|
||||
});
|
||||
|
||||
ProductsState copyWith({
|
||||
List<ProductEntity>? products,
|
||||
String? operationType,
|
||||
int? warehouseId,
|
||||
String? warehouseName,
|
||||
bool? isLoading,
|
||||
String? error,
|
||||
}) {
|
||||
return ProductsState(
|
||||
products: products ?? this.products,
|
||||
operationType: operationType ?? this.operationType,
|
||||
warehouseId: warehouseId ?? this.warehouseId,
|
||||
warehouseName: warehouseName ?? this.warehouseName,
|
||||
isLoading: isLoading ?? this.isLoading,
|
||||
error: error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Products notifier
|
||||
/// Manages the products state and business logic
|
||||
class ProductsNotifier extends StateNotifier<ProductsState> {
|
||||
final GetProductsUseCase getProductsUseCase;
|
||||
|
||||
ProductsNotifier(this.getProductsUseCase) : super(const ProductsState());
|
||||
|
||||
/// Load products for a specific warehouse and operation type
|
||||
///
|
||||
/// [warehouseId] - The ID of the warehouse
|
||||
/// [warehouseName] - The name of the warehouse (for display)
|
||||
/// [type] - The operation type ('import' or 'export')
|
||||
Future<void> loadProducts(
|
||||
int warehouseId,
|
||||
String warehouseName,
|
||||
String type,
|
||||
) async {
|
||||
// Set loading state
|
||||
state = state.copyWith(
|
||||
isLoading: true,
|
||||
error: null,
|
||||
warehouseId: warehouseId,
|
||||
warehouseName: warehouseName,
|
||||
operationType: type,
|
||||
);
|
||||
|
||||
// Call the use case
|
||||
final result = await getProductsUseCase(warehouseId, type);
|
||||
|
||||
// Handle the result
|
||||
result.fold(
|
||||
(failure) {
|
||||
// Handle failure
|
||||
state = state.copyWith(
|
||||
isLoading: false,
|
||||
error: failure.message,
|
||||
products: [],
|
||||
);
|
||||
},
|
||||
(products) {
|
||||
// Handle success
|
||||
state = state.copyWith(
|
||||
isLoading: false,
|
||||
error: null,
|
||||
products: products,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/// Clear products list
|
||||
void clearProducts() {
|
||||
state = const ProductsState();
|
||||
}
|
||||
|
||||
/// Refresh products
|
||||
Future<void> refreshProducts() async {
|
||||
if (state.warehouseId != null) {
|
||||
await loadProducts(
|
||||
state.warehouseId!,
|
||||
state.warehouseName ?? '',
|
||||
state.operationType,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../domain/entities/product_entity.dart';
|
||||
|
||||
/// Reusable product list item widget
|
||||
/// Displays key product information in a card layout
|
||||
class ProductListItem extends StatelessWidget {
|
||||
final ProductEntity product;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const ProductListItem({
|
||||
super.key,
|
||||
required this.product,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final textTheme = theme.textTheme;
|
||||
|
||||
return Card(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
elevation: 2,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Product name and code
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
product.fullName,
|
||||
style: textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Code: ${product.code}',
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Active status indicator
|
||||
if (product.isActive)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.green.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
'Active',
|
||||
style: textTheme.labelSmall?.copyWith(
|
||||
color: Colors.green,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
const Divider(height: 1),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Weight and pieces information
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Weight',
|
||||
value: '${product.weight.toStringAsFixed(2)} kg',
|
||||
icon: Icons.fitness_center,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Pieces',
|
||||
value: product.pieces.toString(),
|
||||
icon: Icons.inventory_2,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// In stock information
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'In Stock (Pieces)',
|
||||
value: product.piecesInStock.toString(),
|
||||
icon: Icons.warehouse,
|
||||
color: product.piecesInStock > 0
|
||||
? Colors.green
|
||||
: Colors.orange,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'In Stock (Weight)',
|
||||
value: '${product.weightInStock.toStringAsFixed(2)} kg',
|
||||
icon: Icons.scale,
|
||||
color: product.weightInStock > 0
|
||||
? Colors.green
|
||||
: Colors.orange,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Conversion rate
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primaryContainer.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Conversion Rate',
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
product.conversionRate.toStringAsFixed(2),
|
||||
style: textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Barcode if available
|
||||
if (product.barcode != null && product.barcode!.isNotEmpty) ...[
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.qr_code,
|
||||
size: 16,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'Barcode: ${product.barcode}',
|
||||
style: textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Helper widget for displaying info items
|
||||
class _InfoItem extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
final IconData icon;
|
||||
final Color? color;
|
||||
|
||||
const _InfoItem({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.icon,
|
||||
this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final textTheme = theme.textTheme;
|
||||
final effectiveColor = color ?? theme.colorScheme.primary;
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
size: 20,
|
||||
color: effectiveColor,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: textTheme.labelSmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
value,
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: effectiveColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user