apksel-dev/apskel-owner-flutter
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update stock ui
Some checks are pending
Build & Deploy iOS to TestFlight / build-and-deploy (push) Waiting to run
Details

Browse Source
This commit is contained in:
Efril 2026-06-24 10:28:13 +07:00
parent 0917c5132b
commit 843c11b200
3 changed files with 1201 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

521
lib/presentation/pages/inventory/inventory_page.dart
View File

@ -3,17 +3,11 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/analytic/inventory_analytic_loader/inventory_analytic_loader_bloc.dart'; import '../../../application/analytic/inventory_analytic_loader/inventory_analytic_loader_bloc.dart';
import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart'; import '../../../common/theme/theme.dart';
import '../../../domain/analytic/analytic.dart';
import '../../../injection.dart'; import '../../../injection.dart';
import '../../components/appbar/appbar.dart'; import '../../components/spacer/spacer.dart';
import 'widgets/ingredient_tile.dart'; import 'widgets/inventory_header.dart';
import 'widgets/product_tile.dart'; import 'widgets/inventory_stock_report.dart';
import 'widgets/stat_card.dart';
import 'widgets/tabbar_delegate.dart';
// Custom SliverPersistentHeaderDelegate untuk TabBar
@RoutePage() @RoutePage()
class InventoryPage extends StatefulWidget implements AutoRouteWrapper { class InventoryPage extends StatefulWidget implements AutoRouteWrapper {
@ -32,400 +26,187 @@ class InventoryPage extends StatefulWidget implements AutoRouteWrapper {
} }
class _InventoryPageState extends State<InventoryPage> class _InventoryPageState extends State<InventoryPage>
with TickerProviderStateMixin { with SingleTickerProviderStateMixin {
late AnimationController _fadeAnimationController; late AnimationController _fadeController;
late AnimationController _slideAnimationController;
late Animation<double> _fadeAnimation; late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
late TabController _tabController; int _selectedTabIndex = 0;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_tabController = TabController(length: 2, vsync: this);
_fadeAnimationController = AnimationController( _fadeController = AnimationController(
duration: const Duration(milliseconds: 1000), duration: const Duration(milliseconds: 1000),
vsync: this, vsync: this,
); );
_slideAnimationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate( _fadeAnimation = Tween<double>(
CurvedAnimation( begin: 0.0,
parent: _fadeAnimationController, end: 1.0,
curve: Curves.easeInOut, ).animate(CurvedAnimation(parent: _fadeController, curve: Curves.easeIn));
),
);
_slideAnimation = _fadeController.forward();
Tween<Offset>(begin: const Offset(0.0, 0.3), end: Offset.zero).animate(
CurvedAnimation(
parent: _slideAnimationController,
curve: Curves.easeOutBack,
),
);
_fadeAnimationController.forward();
_slideAnimationController.forward();
} }
@override @override
void dispose() { void dispose() {
_fadeAnimationController.dispose(); _fadeController.dispose();
_slideAnimationController.dispose();
_tabController.dispose();
super.dispose(); super.dispose();
} }
Color getStatusColor(String status) {
switch (status) {
case 'available':
return AppColor.success;
case 'low_stock':
return AppColor.warning;
case 'out_of_stock':
return AppColor.error;
default:
return AppColor.textSecondary;
}
}
String getStatusText(String status) {
switch (status) {
case 'available':
return context.lang.available;
case 'low_stock':
return context.lang.low_stock;
case 'out_of_stock':
return context.lang.out_of_stock;
default:
return 'Unknown';
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocListener< return Scaffold(
InventoryAnalyticLoaderBloc, backgroundColor: AppColor.background,
InventoryAnalyticLoaderState body:
>( BlocListener<
listenWhen: (previous, current) => InventoryAnalyticLoaderBloc,
previous.dateFrom != current.dateFrom || InventoryAnalyticLoaderState
previous.dateTo != current.dateTo, >(
listener: (context, state) { listenWhen: (previous, current) =>
context.read<InventoryAnalyticLoaderBloc>().add( previous.dateFrom != current.dateFrom ||
InventoryAnalyticLoaderEvent.fetched(), previous.dateTo != current.dateTo,
); listener: (context, state) {
}, context.read<InventoryAnalyticLoaderBloc>().add(
child: Scaffold( InventoryAnalyticLoaderEvent.fetched(),
backgroundColor: AppColor.background, );
body: },
BlocBuilder< child:
InventoryAnalyticLoaderBloc, BlocBuilder<
InventoryAnalyticLoaderState InventoryAnalyticLoaderBloc,
>( InventoryAnalyticLoaderState
builder: (context, state) { >(
return FadeTransition( builder: (context, state) {
opacity: _fadeAnimation, return CustomScrollView(
child: SlideTransition( slivers: [
position: _slideAnimation, // Header with gradient background, tabs, and summary
child: NestedScrollView( SliverToBoxAdapter(
headerSliverBuilder: (context, innerBoxIsScrolled) { child: FadeTransition(
return [ opacity: _fadeAnimation,
_buildSliverAppBar(), child: InventoryHeader(
SliverPersistentHeader( state: state,
pinned: true, selectedTabIndex: _selectedTabIndex,
delegate: InventorySliverTabBarDelegate( onTabChanged: (index) {
startDate: state.dateFrom, setState(() {
endDate: state.dateTo, _selectedTabIndex = index;
});
},
onDateRangeChanged: (startDate, endDate) { onDateRangeChanged: (startDate, endDate) {
context.read<InventoryAnalyticLoaderBloc>().add( _onDateRangeChanged(
InventoryAnalyticLoaderEvent.rangeDateChanged( context,
startDate!, startDate,
endDate!, endDate,
),
); );
}, },
tabBar: TabBar(
controller: _tabController,
indicator: BoxDecoration(
gradient: LinearGradient(
colors: AppColor.primaryGradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
color: AppColor.primary.withOpacity(0.3),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: const EdgeInsets.all(6),
labelColor: AppColor.textWhite,
unselectedLabelColor: AppColor.textSecondary,
labelStyle: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 13,
),
unselectedLabelStyle: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 13,
),
dividerColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
overlayColor: MaterialStateProperty.all(
Colors.transparent,
),
tabs: [
Tab(
height: 40,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Icon(
Icons.inventory_2_rounded,
size: 16,
),
SizedBox(width: 6),
Text(context.lang.product),
],
),
),
),
Tab(
height: 40,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Icon(
Icons.restaurant_menu_rounded,
size: 16,
),
SizedBox(width: 6),
Text(context.lang.ingredients),
],
),
),
),
],
),
), ),
), ),
]; ),
},
body: TabBarView( // Stock Report Table
controller: _tabController, SliverToBoxAdapter(
children: [ child: FadeTransition(
_buildProductTab(state.inventoryAnalytic), opacity: _fadeAnimation,
_buildIngredientTab(state.inventoryAnalytic), child: state.isFetching
], ? _buildLoadingReport()
), : InventoryStockReport(
inventoryAnalytic: state.inventoryAnalytic,
selectedTabIndex: _selectedTabIndex,
),
),
),
// Bottom spacing
const SliverToBoxAdapter(child: SpaceHeight(100)),
],
);
},
),
),
);
}
Widget _buildLoadingReport() {
return Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: AppColor.textLight.withOpacity(0.08),
spreadRadius: 1,
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
children: List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
Expanded(
flex: 4,
child: Container(
height: 14,
decoration: BoxDecoration(
color: AppColor.borderLight,
borderRadius: BorderRadius.circular(4),
), ),
), ),
); ),
}, const SpaceWidth(12),
Expanded(
flex: 2,
child: Container(
height: 14,
decoration: BoxDecoration(
color: AppColor.borderLight,
borderRadius: BorderRadius.circular(4),
),
),
),
const SpaceWidth(12),
Expanded(
flex: 2,
child: Container(
height: 14,
decoration: BoxDecoration(
color: AppColor.borderLight,
borderRadius: BorderRadius.circular(4),
),
),
),
const SpaceWidth(12),
Expanded(
flex: 2,
child: Container(
height: 14,
decoration: BoxDecoration(
color: AppColor.borderLight,
borderRadius: BorderRadius.circular(4),
),
),
),
],
), ),
),
),
), ),
); );
} }
Widget _buildSliverAppBar() { void _onDateRangeChanged(
return SliverAppBar( BuildContext context,
expandedHeight: 120, DateTime startDate,
floating: false, DateTime endDate,
pinned: true,
elevation: 0,
backgroundColor: AppColor.primary,
flexibleSpace: CustomAppBar(title: context.lang.inventory),
);
}
Widget _buildProductTab(InventoryAnalytic inventoryAnalytic) {
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: _buildProductStats(inventoryAnalytic.summary),
),
SliverPadding(
padding: const EdgeInsets.all(16),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) =>
InventoryProductTile(item: inventoryAnalytic.products[index]),
childCount: inventoryAnalytic.products.length,
),
),
),
],
);
}
Widget _buildIngredientTab(InventoryAnalytic inventoryAnalytic) {
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: _buildIngredientStats(inventoryAnalytic.summary),
),
SliverPadding(
padding: const EdgeInsets.all(16),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => InventoryIngredientTile(
item: inventoryAnalytic.ingredients[index],
),
childCount: inventoryAnalytic.ingredients.length,
),
),
),
],
);
}
Widget _buildProductStats(InventorySummary inventory) {
return Container(
margin: const EdgeInsets.all(16),
child: Column(
children: [
Row(
children: [
Expanded(
child: _buildStatCard(
context.lang.total_products,
inventory.totalProducts.toString(),
Icons.inventory_2_rounded,
AppColor.primary,
),
),
const SizedBox(width: 16),
Expanded(
child: _buildStatCard(
context.lang.total_sold,
inventory.totalSoldProducts.toString(),
Icons.check_circle_rounded,
AppColor.success,
),
),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildStatCard(
context.lang.low_stock,
inventory.lowStockProducts.toString(),
Icons.warning_rounded,
AppColor.warning,
),
),
const SizedBox(width: 16),
Expanded(
child: _buildStatCard(
context.lang.zero_stock,
inventory.zeroStockProducts.toString(),
Icons.error_rounded,
AppColor.error,
),
),
],
),
],
),
);
}
Widget _buildIngredientStats(InventorySummary inventory) {
return Container(
margin: const EdgeInsets.all(16),
child: Column(
children: [
Row(
children: [
Expanded(
child: _buildStatCard(
context.lang.total_ingredients,
inventory.totalIngredients.toString(),
Icons.restaurant_menu_rounded,
AppColor.primary,
),
),
const SizedBox(width: 16),
Expanded(
child: _buildStatCard(
context.lang.total_sold,
inventory.totalSoldIngredients.toString(),
Icons.check_circle_rounded,
AppColor.success,
),
),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildStatCard(
context.lang.low_stock,
inventory.lowStockIngredients.toString(),
Icons.warning_rounded,
AppColor.warning,
),
),
const SizedBox(width: 16),
Expanded(
child: _buildStatCard(
context.lang.zero_stock,
inventory.zeroStockIngredients.toString(),
Icons.error_rounded,
AppColor.error,
),
),
],
),
],
),
);
}
Widget _buildStatCard(
String title,
String value,
IconData icon,
Color color,
) { ) {
return TweenAnimationBuilder<double>( context.read<InventoryAnalyticLoaderBloc>().add(
tween: Tween<double>(begin: 0, end: 1), InventoryAnalyticLoaderEvent.rangeDateChanged(startDate, endDate),
duration: const Duration(milliseconds: 800),
builder: (context, animationValue, child) {
return Transform.scale(
scale: animationValue,
child: InventoryStatCard(
title: title,
value: value,
icon: icon,
color: color,
),
);
},
); );
} }
} }

412
lib/presentation/pages/inventory/widgets/inventory_header.dart Normal file
View File

@ -0,0 +1,412 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../application/analytic/inventory_analytic_loader/inventory_analytic_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/bottom_sheet/date_range_bottom_sheet.dart';
import '../../../components/spacer/spacer.dart';
class InventoryHeader extends StatelessWidget {
final InventoryAnalyticLoaderState state;
final int selectedTabIndex;
final ValueChanged<int> onTabChanged;
final void Function(DateTime startDate, DateTime endDate)? onDateRangeChanged;
const InventoryHeader({
super.key,
required this.state,
required this.selectedTabIndex,
required this.onTabChanged,
this.onDateRangeChanged,
});
@override
Widget build(BuildContext context) {
final outletLabel = state.inventoryAnalytic.summary.outletName.isNotEmpty
? state.inventoryAnalytic.summary.outletName
: 'Semua Outlet';
final dateLabel = _formatDateRange(state.dateFrom, state.dateTo);
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: AppColor.primaryGradient,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24),
),
),
child: Stack(
children: [
// Decorative circles
Positioned(
top: -20,
right: -30,
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.08),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.05),
),
),
),
Positioned(
top: 10,
left: -20,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.04),
),
),
),
// Wave pattern
Positioned.fill(
child: CustomPaint(
painter: WavePainter(
animation: 0.0,
color: AppColor.textWhite.withOpacity(0.1),
),
),
),
// Content
SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Back button + Title row + Calendar button
Row(
children: [
GestureDetector(
onTap: () => context.router.maybePop(),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.chevron_left_rounded,
color: AppColor.textWhite,
size: 24,
),
),
),
const SpaceWidth(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
context.lang.inventory,
style: AppStyle.xl.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
const SizedBox(height: 2),
Text(
'$dateLabel · $outletLabel',
style: AppStyle.sm.copyWith(
color: AppColor.textWhite.withOpacity(0.75),
fontWeight: FontWeight.w400,
fontSize: 12,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
const SpaceWidth(8),
// Date filter button
GestureDetector(
onTap: () => _showDatePicker(context),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.calendar_month_rounded,
color: AppColor.textWhite,
size: 20,
),
),
),
],
),
const SpaceHeight(20),
// Tab selector (Product / Ingredient)
_buildTabSelector(context),
const SpaceHeight(24),
// Total Value label
Text(
'Total Nilai Inventori',
style: AppStyle.sm.copyWith(
color: AppColor.textWhite.withOpacity(0.75),
fontWeight: FontWeight.w400,
fontSize: 13,
),
),
const SpaceHeight(4),
// Big total value
state.isFetching
? _buildHeaderValueShimmer()
: Text(
state
.inventoryAnalytic
.summary
.totalValue
.currencyFormatRp,
style: AppStyle.h1.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w900,
fontSize: 32,
),
),
const SpaceHeight(16),
// Chips row
state.isFetching
? _buildHeaderChipsShimmer()
: _buildHeaderChips(context),
],
),
),
),
],
),
);
}
Widget _buildTabSelector(BuildContext context) {
return Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(30),
border: Border.all(color: AppColor.textWhite.withOpacity(0.2)),
),
child: Row(
children: [
Expanded(
child: _buildTab(
icon: Icons.inventory_2_rounded,
label: context.lang.product,
isSelected: selectedTabIndex == 0,
onTap: () => onTabChanged(0),
),
),
Expanded(
child: _buildTab(
icon: Icons.restaurant_menu_rounded,
label: context.lang.ingredients,
isSelected: selectedTabIndex == 1,
onTap: () => onTabChanged(1),
),
),
],
),
);
}
Widget _buildTab({
required IconData icon,
required String label,
required bool isSelected,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: isSelected ? AppColor.white : Colors.transparent,
borderRadius: BorderRadius.circular(26),
),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: 16,
color: isSelected ? AppColor.textPrimary : AppColor.textWhite,
),
const SizedBox(width: 6),
Text(
label,
style: AppStyle.md.copyWith(
color: isSelected ? AppColor.textPrimary : AppColor.textWhite,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
);
}
void _showDatePicker(BuildContext context) {
DateRangePickerBottomSheet.show(
context: context,
primaryColor: AppColor.primary,
initialStartDate: state.dateFrom,
initialEndDate: state.dateTo,
maxDate: DateTime.now(),
onChanged: (startDate, endDate) {
if (startDate != null && endDate != null) {
onDateRangeChanged?.call(startDate, endDate);
}
},
);
}
Widget _buildHeaderValueShimmer() {
return Shimmer.fromColors(
baseColor: AppColor.textWhite.withOpacity(0.3),
highlightColor: AppColor.textWhite.withOpacity(0.6),
child: Container(
width: 200,
height: 36,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.3),
borderRadius: BorderRadius.circular(8),
),
),
);
}
Widget _buildHeaderChipsShimmer() {
return Row(
children: List.generate(
3,
(index) => Padding(
padding: const EdgeInsets.only(right: 8),
child: Shimmer.fromColors(
baseColor: AppColor.textWhite.withOpacity(0.15),
highlightColor: AppColor.textWhite.withOpacity(0.3),
child: Container(
width: 90,
height: 32,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(20),
),
),
),
),
),
);
}
Widget _buildHeaderChips(BuildContext context) {
final summary = state.inventoryAnalytic.summary;
if (selectedTabIndex == 0) {
return Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildChip('${summary.totalProducts} ${context.lang.product}'),
_buildChip('${summary.lowStockProducts} ${context.lang.low_stock}'),
_buildChip('${summary.zeroStockProducts} ${context.lang.zero_stock}'),
],
);
} else {
return Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildChip('${summary.totalIngredients} ${context.lang.ingredients}'),
_buildChip(
'${summary.lowStockIngredients} ${context.lang.low_stock}',
),
_buildChip(
'${summary.zeroStockIngredients} ${context.lang.zero_stock}',
),
],
);
}
}
Widget _buildChip(String label) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColor.textWhite.withOpacity(0.25)),
),
child: Text(
label,
style: AppStyle.sm.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w600,
fontSize: 12,
),
),
);
}
String _formatDateRange(DateTime from, DateTime to) {
const months = [
'Jan',
'Feb',
'Mar',
'Apr',
'Mei',
'Jun',
'Jul',
'Agu',
'Sep',
'Okt',
'Nov',
'Des',
];
if (from.year == to.year && from.month == to.month && from.day == to.day) {
return '${from.day} ${months[from.month - 1]} ${from.year}';
}
return '${from.day} ${months[from.month - 1]} - ${to.day} ${months[to.month - 1]} ${to.year}';
}
}

638
lib/presentation/pages/inventory/widgets/inventory_stock_report.dart Normal file
View File

@ -0,0 +1,638 @@
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/spacer/spacer.dart';
class InventoryStockReport extends StatelessWidget {
final InventoryAnalytic inventoryAnalytic;
final int selectedTabIndex;
const InventoryStockReport({
super.key,
required this.inventoryAnalytic,
required this.selectedTabIndex,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: AppColor.textLight.withOpacity(0.08),
spreadRadius: 1,
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
selectedTabIndex == 0
? context.lang.product
: context.lang.ingredients,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.textPrimary,
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 4,
),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
selectedTabIndex == 0
? '${inventoryAnalytic.products.length} item'
: '${inventoryAnalytic.ingredients.length} item',
style: AppStyle.sm.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
),
],
),
const SpaceHeight(16),
// Summary stats row
_buildSummaryStats(context),
const SpaceHeight(16),
const Divider(height: 1, color: AppColor.borderLight),
const SpaceHeight(12),
// Table header
_buildTableHeader(context),
const SpaceHeight(8),
// Items list
if (selectedTabIndex == 0)
...inventoryAnalytic.products.map(
(product) => _buildProductRow(context, product),
)
else
...inventoryAnalytic.ingredients.map(
(ingredient) => _buildIngredientRow(context, ingredient),
),
const SpaceHeight(12),
// Footer totals
_buildFooterTotals(context),
],
),
);
}
Widget _buildSummaryStats(BuildContext context) {
final summary = inventoryAnalytic.summary;
if (selectedTabIndex == 0) {
return Row(
children: [
Expanded(
child: _buildMiniStat(
context.lang.total_sold,
summary.totalSoldProducts.toString(),
AppColor.success,
Icons.check_circle_rounded,
),
),
const SpaceWidth(8),
Expanded(
child: _buildMiniStat(
context.lang.low_stock,
summary.lowStockProducts.toString(),
AppColor.warning,
Icons.warning_rounded,
),
),
const SpaceWidth(8),
Expanded(
child: _buildMiniStat(
context.lang.zero_stock,
summary.zeroStockProducts.toString(),
AppColor.error,
Icons.error_rounded,
),
),
],
);
} else {
return Row(
children: [
Expanded(
child: _buildMiniStat(
context.lang.total_sold,
summary.totalSoldIngredients.toString(),
AppColor.success,
Icons.check_circle_rounded,
),
),
const SpaceWidth(8),
Expanded(
child: _buildMiniStat(
context.lang.low_stock,
summary.lowStockIngredients.toString(),
AppColor.warning,
Icons.warning_rounded,
),
),
const SpaceWidth(8),
Expanded(
child: _buildMiniStat(
context.lang.zero_stock,
summary.zeroStockIngredients.toString(),
AppColor.error,
Icons.error_rounded,
),
),
],
);
}
}
Widget _buildMiniStat(
String label,
String value,
Color color,
IconData icon,
) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
decoration: BoxDecoration(
color: color.withOpacity(0.08),
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
Icon(icon, size: 18, color: color),
const SpaceHeight(4),
Text(
value,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w800,
color: color,
),
),
const SpaceHeight(2),
Text(
label,
style: AppStyle.xs.copyWith(
color: color.withOpacity(0.8),
fontWeight: FontWeight.w500,
fontSize: 10,
),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
);
}
Widget _buildTableHeader(BuildContext context) {
if (selectedTabIndex == 0) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
Expanded(
flex: 4,
child: Text(
context.lang.product,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
Expanded(
flex: 2,
child: Text(
context.lang.stock,
textAlign: TextAlign.center,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
Expanded(
flex: 2,
child: Text(
context.lang.in_text,
textAlign: TextAlign.center,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
Expanded(
flex: 2,
child: Text(
context.lang.out_text,
textAlign: TextAlign.center,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
],
),
);
} else {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
Expanded(
flex: 4,
child: Text(
context.lang.ingredients,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
Expanded(
flex: 2,
child: Text(
context.lang.stock,
textAlign: TextAlign.center,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
Expanded(
flex: 2,
child: Text(
context.lang.in_text,
textAlign: TextAlign.center,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
Expanded(
flex: 2,
child: Text(
context.lang.out_text,
textAlign: TextAlign.center,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textSecondary,
),
),
),
],
),
);
}
}
Widget _buildProductRow(BuildContext context, InventoryProduct product) {
final statusColor = product.isZeroStock
? AppColor.error
: product.isLowStock
? AppColor.warning
: AppColor.textPrimary;
return Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: AppColor.borderLight, width: 0.5),
),
),
child: Row(
children: [
// Product name + category
Expanded(
flex: 4,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.productName,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SpaceHeight(2),
Row(
children: [
if (product.isZeroStock || product.isLowStock)
Container(
width: 6,
height: 6,
margin: const EdgeInsets.only(right: 4),
decoration: BoxDecoration(
color: statusColor,
shape: BoxShape.circle,
),
),
Flexible(
child: Text(
product.categoryName,
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w400,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
),
),
// Stock
Expanded(
flex: 2,
child: Text(
NumberFormat('#,###', 'id_ID').format(product.quantity),
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: statusColor,
),
),
),
// In
Expanded(
flex: 2,
child: Text(
product.totalIn > 0
? '+${NumberFormat('#,###', 'id_ID').format(product.totalIn)}'
: '-',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w500,
color: product.totalIn > 0
? AppColor.success
: AppColor.textSecondary,
),
),
),
// Out
Expanded(
flex: 2,
child: Text(
product.totalOut > 0
? '-${NumberFormat('#,###', 'id_ID').format(product.totalOut)}'
: '-',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w500,
color: product.totalOut > 0
? AppColor.error
: AppColor.textSecondary,
),
),
),
],
),
);
}
Widget _buildIngredientRow(
BuildContext context,
InventoryIngredient ingredient,
) {
final statusColor = ingredient.isZeroStock
? AppColor.error
: ingredient.isLowStock
? AppColor.warning
: AppColor.textPrimary;
return Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: AppColor.borderLight, width: 0.5),
),
),
child: Row(
children: [
// Ingredient name + unit
Expanded(
flex: 4,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ingredient.ingredientName,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SpaceHeight(2),
Row(
children: [
if (ingredient.isZeroStock || ingredient.isLowStock)
Container(
width: 6,
height: 6,
margin: const EdgeInsets.only(right: 4),
decoration: BoxDecoration(
color: statusColor,
shape: BoxShape.circle,
),
),
Flexible(
child: Text(
ingredient.unitName,
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w400,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
),
),
// Stock
Expanded(
flex: 2,
child: Text(
NumberFormat('#,###', 'id_ID').format(ingredient.quantity),
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: statusColor,
),
),
),
// In
Expanded(
flex: 2,
child: Text(
ingredient.totalIn > 0
? '+${NumberFormat('#,###', 'id_ID').format(ingredient.totalIn)}'
: '-',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w500,
color: ingredient.totalIn > 0
? AppColor.success
: AppColor.textSecondary,
),
),
),
// Out
Expanded(
flex: 2,
child: Text(
ingredient.totalOut > 0
? '-${NumberFormat('#,###', 'id_ID').format(ingredient.totalOut)}'
: '-',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w500,
color: ingredient.totalOut > 0
? AppColor.error
: AppColor.textSecondary,
),
),
),
],
),
);
}
Widget _buildFooterTotals(BuildContext context) {
int totalStock;
int totalIn;
int totalOut;
if (selectedTabIndex == 0) {
totalStock = inventoryAnalytic.products.fold<int>(
0,
(sum, item) => sum + item.quantity,
);
totalIn = inventoryAnalytic.products.fold<int>(
0,
(sum, item) => sum + item.totalIn,
);
totalOut = inventoryAnalytic.products.fold<int>(
0,
(sum, item) => sum + item.totalOut,
);
} else {
totalStock = inventoryAnalytic.ingredients.fold<int>(
0,
(sum, item) => sum + item.quantity,
);
totalIn = inventoryAnalytic.ingredients.fold<int>(
0,
(sum, item) => sum + item.totalIn,
);
totalOut = inventoryAnalytic.ingredients.fold<int>(
0,
(sum, item) => sum + item.totalOut,
);
}
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.08),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Expanded(
flex: 4,
child: Text(
'TOTAL',
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.primary,
),
),
),
Expanded(
flex: 2,
child: Text(
NumberFormat('#,###', 'id_ID').format(totalStock),
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.primary,
),
),
),
Expanded(
flex: 2,
child: Text(
'+${NumberFormat('#,###', 'id_ID').format(totalIn)}',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.success,
),
),
),
Expanded(
flex: 2,
child: Text(
'-${NumberFormat('#,###', 'id_ID').format(totalOut)}',
textAlign: TextAlign.center,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w700,
color: AppColor.error,
),
),
),
],
),
);
}
}