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

feat: slicing home page

Browse Source
This commit is contained in:
efrilm 2025-07-31 19:25:45 +07:00
parent 73320561b0
commit 445a22a5a4
13 changed files with 1231 additions and 696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/core/components/buttons.dart
View File

@ -18,6 +18,8 @@ class Button extends StatelessWidget {
this.icon, this.icon,
this.disabled = false, this.disabled = false,
this.fontSize = 16.0, this.fontSize = 16.0,
this.elevation,
this.labelStyle,
}); });
const Button.outlined({ const Button.outlined({
@ -33,6 +35,8 @@ class Button extends StatelessWidget {
this.icon, this.icon,
this.disabled = false, this.disabled = false,
this.fontSize = 16.0, this.fontSize = 16.0,
this.elevation,
this.labelStyle,
}); });
final Function() onPressed; final Function() onPressed;
@ -43,9 +47,11 @@ class Button extends StatelessWidget {
final double? width; final double? width;
final double height; final double height;
final double borderRadius; final double borderRadius;
final double? elevation;
final Widget? icon; final Widget? icon;
final bool disabled; final bool disabled;
final double fontSize; final double fontSize;
final TextStyle? labelStyle;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -60,6 +66,7 @@ class Button extends StatelessWidget {
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius), borderRadius: BorderRadius.circular(borderRadius),
), ),
elevation: elevation,
padding: const EdgeInsets.symmetric(horizontal: 16.0), padding: const EdgeInsets.symmetric(horizontal: 16.0),
), ),
child: Row( child: Row(
@ -73,10 +80,11 @@ class Button extends StatelessWidget {
fit: BoxFit.scaleDown, fit: BoxFit.scaleDown,
child: Text( child: Text(
label, label,
style: TextStyle( style: labelStyle ??
TextStyle(
color: disabled ? Colors.grey : textColor, color: disabled ? Colors.grey : textColor,
fontSize: fontSize, fontSize: fontSize,
fontWeight: FontWeight.w600, fontWeight: FontWeight.bold,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -106,7 +114,8 @@ class Button extends StatelessWidget {
fit: BoxFit.scaleDown, fit: BoxFit.scaleDown,
child: Text( child: Text(
label, label,
style: TextStyle( style: labelStyle ??
TextStyle(
color: disabled ? Colors.grey : textColor, color: disabled ? Colors.grey : textColor,
fontSize: fontSize, fontSize: fontSize,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,

2
lib/core/constants/colors.dart
View File

@ -36,4 +36,6 @@ class AppColors {
/// stroke = #EFF0F6 /// stroke = #EFF0F6
static const Color stroke = Color(0xffEFF0F6); static const Color stroke = Color(0xffEFF0F6);
static const Color background = Color.fromARGB(255, 241, 241, 241);
} }

2
lib/data/datasources/product_local_datasource.dart
View File

@ -151,7 +151,7 @@ class ProductLocalDatasource {
final dbExists = await databaseExists(path); final dbExists = await databaseExists(path);
if (dbExists) { if (dbExists) {
log("Deleting existing database to ensure new schema with order_type column"); log("Deleting existing database to ensure new schema with order_type column");
await deleteDatabase(path); // await deleteDatabase(path);
} }
} catch (e) { } catch (e) {
log("Error deleting database: $e"); log("Error deleting database: $e");

8
lib/main.dart
View File

@ -1,7 +1,5 @@
import 'dart:developer'; import 'dart:developer';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:enaklo_pos/data/dataoutputs/laman_print.dart';
import 'package:enaklo_pos/data/datasources/auth_local_datasource.dart'; import 'package:enaklo_pos/data/datasources/auth_local_datasource.dart';
import 'package:enaklo_pos/data/datasources/auth_remote_datasource.dart'; import 'package:enaklo_pos/data/datasources/auth_remote_datasource.dart';
import 'package:enaklo_pos/data/datasources/category_remote_datasource.dart'; import 'package:enaklo_pos/data/datasources/category_remote_datasource.dart';
@ -39,7 +37,6 @@ import 'package:enaklo_pos/presentation/setting/bloc/update_product/update_produ
import 'package:enaklo_pos/presentation/setting/bloc/update_printer/update_printer_bloc.dart'; import 'package:enaklo_pos/presentation/setting/bloc/update_printer/update_printer_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/change_position_table/change_position_table_bloc.dart'; import 'package:enaklo_pos/presentation/table/blocs/change_position_table/change_position_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/create_table/create_table_bloc.dart'; import 'package:enaklo_pos/presentation/table/blocs/create_table/create_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/generate_table/generate_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/get_table/get_table_bloc.dart'; import 'package:enaklo_pos/presentation/table/blocs/get_table/get_table_bloc.dart';
import 'package:enaklo_pos/presentation/home/bloc/local_product/local_product_bloc.dart'; import 'package:enaklo_pos/presentation/home/bloc/local_product/local_product_bloc.dart';
import 'package:enaklo_pos/presentation/home/bloc/order/order_bloc.dart'; import 'package:enaklo_pos/presentation/home/bloc/order/order_bloc.dart';
@ -51,9 +48,7 @@ import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_b
import 'package:enaklo_pos/presentation/setting/bloc/tax_settings/tax_settings_bloc.dart'; import 'package:enaklo_pos/presentation/setting/bloc/tax_settings/tax_settings_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/update_table/update_table_bloc.dart'; import 'package:enaklo_pos/presentation/table/blocs/update_table/update_table_bloc.dart';
import 'package:enaklo_pos/presentation/home/bloc/add_order_items/add_order_items_bloc.dart'; import 'package:enaklo_pos/presentation/home/bloc/add_order_items/add_order_items_bloc.dart';
import 'package:enaklo_pos/presentation/table/pages/new_table_management_page.dart';
import 'package:google_fonts/google_fonts.dart'; import 'package:google_fonts/google_fonts.dart';
// import 'package:imin_printer/imin_printer.dart';
import 'core/constants/colors.dart'; import 'core/constants/colors.dart';
import 'presentation/auth/bloc/login/login_bloc.dart'; import 'presentation/auth/bloc/login/login_bloc.dart';
@ -61,8 +56,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'presentation/home/pages/dashboard_page.dart'; import 'presentation/home/pages/dashboard_page.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hive/hive.dart';
import 'package:path_provider/path_provider.dart';
void main() async { void main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();

110
lib/presentation/home/dialog/discount_dialog.dart
View File

@ -1,3 +1,5 @@
import 'package:enaklo_pos/core/components/spaces.dart';
import 'package:enaklo_pos/data/models/response/discount_response_model.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart'; import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
@ -25,29 +27,38 @@ class _DiscountDialogState extends State<DiscountDialog> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AlertDialog( return AlertDialog(
title: Stack( backgroundColor: AppColors.white,
alignment: Alignment.center, title: Row(
children: [ children: [
const Text( Expanded(
'DISKON', child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pilih Diskon',
style: TextStyle( style: TextStyle(
color: AppColors.primary, fontSize: 18,
fontSize: 28, fontWeight: FontWeight.bold,
fontWeight: FontWeight.w600, color: AppColors.black,
), ),
), ),
Align( const SizedBox(height: 4.0),
alignment: Alignment.centerRight, Text(
child: IconButton( 'Pilih diskon yang ingin diterapkan pada pesanan',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
],
),
),
SpaceWidth(12),
IconButton(
icon: const Icon(Icons.close, color: AppColors.black),
onPressed: () { onPressed: () {
context.pop(); context.pop();
}, },
icon: const Icon(
Icons.cancel,
color: AppColors.primary,
size: 30.0,
),
),
), ),
], ],
), ),
@ -63,15 +74,19 @@ class _DiscountDialogState extends State<DiscountDialog> {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: discounts children: discounts
.map( .map((discount) => _buildDiscountItem(discount))
(discount) => ListTile( .toList(),
title: Text('Nama Diskon: ${discount.name}'), );
subtitle: Text('Potongan harga (${discount.value}%)'), },
contentPadding: EdgeInsets.zero, );
textColor: AppColors.primary, },
trailing: Checkbox( ),
value: discount.id == discountIdSelected, );
onChanged: (value) { }
Widget _buildDiscountItem(Discount discount) {
return GestureDetector(
onTap: () {
setState(() { setState(() {
discountIdSelected = discount.id!; discountIdSelected = discount.id!;
context.read<CheckoutBloc>().add( context.read<CheckoutBloc>().add(
@ -81,17 +96,44 @@ class _DiscountDialogState extends State<DiscountDialog> {
); );
}); });
}, },
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
margin: const EdgeInsets.only(bottom: 8.0),
decoration: BoxDecoration(
color: discountIdSelected == discount.id
? AppColors.primary
: AppColors.white,
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
color: discountIdSelected == discount.id
? AppColors.primary
: AppColors.grey,
width: 1.0,
), ),
onTap: () {
// context.pop();
},
), ),
) child: Row(
.toList(), children: [
); Expanded(
}, child: Text(
); "${discount.name} (${discount.value})",
}, style: TextStyle(
fontSize: 16,
color: discountIdSelected == discount.id
? AppColors.white
: AppColors.black,
fontWeight: FontWeight.w500,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
SpaceWidth(12.0),
Icon(Icons.check_circle,
color: discountIdSelected == discount.id
? AppColors.green
: Colors.transparent),
],
),
), ),
); );
} }

104
lib/presentation/home/dialog/service_dialog.dart
View File

@ -1,3 +1,4 @@
import 'package:enaklo_pos/core/components/spaces.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart'; import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
@ -11,27 +12,38 @@ class ServiceDialog extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AlertDialog( return AlertDialog(
title: Stack( backgroundColor: AppColors.white,
alignment: Alignment.center, title: Row(
children: [ children: [
const Text( Expanded(
'LAYANAN', child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pilih Layanan',
style: TextStyle( style: TextStyle(
color: AppColors.primary, fontSize: 18,
fontSize: 28, fontWeight: FontWeight.bold,
fontWeight: FontWeight.w600, color: AppColors.black,
), ),
), ),
Align( const SizedBox(height: 4.0),
alignment: Alignment.centerRight, Text(
child: IconButton( 'Pilih layanan yang ingin diterapkan pada pesanan',
onPressed: () => context.pop(), style: TextStyle(
icon: const Icon( fontSize: 14,
Icons.cancel, color: Colors.grey,
color: AppColors.primary,
size: 30.0,
), ),
), ),
],
),
),
SpaceWidth(12),
IconButton(
icon: const Icon(Icons.close, color: AppColors.black),
onPressed: () {
context.pop();
},
), ),
], ],
), ),
@ -44,23 +56,8 @@ class ServiceDialog extends StatelessWidget {
return state.maybeWhen( return state.maybeWhen(
initial: () => const SizedBox(), initial: () => const SizedBox(),
loading: () => const Center(child: CircularProgressIndicator()), loading: () => const Center(child: CircularProgressIndicator()),
loaded: (data, a, b, c, d, service, e, f, g, orderType) => ListTile( loaded: (data, a, b, c, d, service, e, f, g, orderType) =>
title: Text('Presentase ($service%)'), _buildServiceItem(context, service),
subtitle: const Text('Biaya layanan'),
contentPadding: EdgeInsets.zero,
textColor: AppColors.primary,
trailing: Checkbox(
value: service > 0,
onChanged: (value) {
context.read<CheckoutBloc>().add(
CheckoutEvent.addServiceCharge(service > 0 ? 0 : service),
);
},
),
onTap: () {
context.pop();
},
),
orElse: () => const SizedBox(), orElse: () => const SizedBox(),
); );
}, },
@ -69,4 +66,47 @@ class ServiceDialog extends StatelessWidget {
), ),
); );
} }
Widget _buildServiceItem(BuildContext context, int service) {
return GestureDetector(
onTap: () {
context.read<CheckoutBloc>().add(
CheckoutEvent.addServiceCharge(service > 0 ? 0 : service),
);
},
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
margin: const EdgeInsets.only(bottom: 8.0),
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(8.0),
border: Border.all(
color: AppColors.primary,
width: 1.0,
),
),
child: Row(
children: [
Expanded(
child: Text(
"Biaya layanan ($service%)",
style: TextStyle(
fontSize: 16,
color: AppColors.white,
fontWeight: FontWeight.w500,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
SpaceWidth(12.0),
Icon(
Icons.check_circle,
color: AppColors.green,
),
],
),
),
);
}
} }

453
lib/presentation/home/pages/home_page.dart
View File

@ -1,4 +1,5 @@
// ignore_for_file: public_member_api_docs, sort_constructors_first // ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:enaklo_pos/presentation/home/widgets/home_right_title.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
@ -8,9 +9,7 @@ import 'package:enaklo_pos/core/extensions/string_ext.dart';
import 'package:enaklo_pos/data/models/response/table_model.dart'; import 'package:enaklo_pos/data/models/response/table_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/local_product/local_product_bloc.dart'; import 'package:enaklo_pos/presentation/home/bloc/local_product/local_product_bloc.dart';
import 'package:enaklo_pos/presentation/home/dialog/discount_dialog.dart'; import 'package:enaklo_pos/presentation/home/dialog/discount_dialog.dart';
import 'package:enaklo_pos/presentation/home/dialog/tax_dialog.dart';
import 'package:enaklo_pos/presentation/home/pages/confirm_payment_page.dart'; import 'package:enaklo_pos/presentation/home/pages/confirm_payment_page.dart';
import 'package:enaklo_pos/presentation/home/pages/dashboard_page.dart';
import 'package:enaklo_pos/data/datasources/product_local_datasource.dart'; import 'package:enaklo_pos/data/datasources/product_local_datasource.dart';
import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_bloc.dart'; import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_bloc.dart';
import 'package:enaklo_pos/data/models/response/product_response_model.dart'; import 'package:enaklo_pos/data/models/response/product_response_model.dart';
@ -21,7 +20,6 @@ import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart'; import '../../../core/constants/colors.dart';
import '../bloc/checkout/checkout_bloc.dart'; import '../bloc/checkout/checkout_bloc.dart';
import '../dialog/service_dialog.dart'; import '../dialog/service_dialog.dart';
import '../widgets/column_button.dart';
import '../widgets/custom_tab_bar.dart'; import '../widgets/custom_tab_bar.dart';
import '../widgets/home_title.dart'; import '../widgets/home_title.dart';
import '../widgets/order_menu.dart'; import '../widgets/order_menu.dart';
@ -83,9 +81,12 @@ class _HomePageState extends State<HomePage> {
}).toList(); }).toList();
} }
List<Product> _filterProductsByCategory(List<Product> products, int categoryId) { List<Product> _filterProductsByCategory(
List<Product> products, int categoryId) {
final filteredBySearch = _filterProducts(products); final filteredBySearch = _filterProducts(products);
return filteredBySearch.where((element) => element.category?.id == categoryId).toList(); return filteredBySearch
.where((element) => element.category?.id == categoryId)
.toList();
} }
@override @override
@ -93,6 +94,7 @@ class _HomePageState extends State<HomePage> {
return Hero( return Hero(
tag: 'confirmation_screen', tag: 'confirmation_screen',
child: Scaffold( child: Scaffold(
backgroundColor: AppColors.background,
body: BlocListener<SyncProductBloc, SyncProductState>( body: BlocListener<SyncProductBloc, SyncProductState>(
listener: (context, state) { listener: (context, state) {
state.maybeWhen( state.maybeWhen(
@ -123,9 +125,6 @@ class _HomePageState extends State<HomePage> {
flex: 3, flex: 3,
child: Align( child: Align(
alignment: AlignmentDirectional.topStart, alignment: AlignmentDirectional.topStart,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
@ -137,17 +136,16 @@ class _HomePageState extends State<HomePage> {
}); });
}, },
), ),
const SizedBox(height: 24),
BlocBuilder<LocalProductBloc, LocalProductState>( BlocBuilder<LocalProductBloc, LocalProductState>(
builder: (context, state) { builder: (context, state) {
return CustomTabBar( return Expanded(
child: CustomTabBarV2(
tabTitles: const [ tabTitles: const [
'Semua', 'Semua',
'Makanan', 'Makanan',
'Minuman', 'Minuman',
'Paket' 'Paket'
], ],
initialTabIndex: 0,
tabViews: [ tabViews: [
// All Products Tab // All Products Tab
SizedBox( SizedBox(
@ -160,23 +158,23 @@ class _HomePageState extends State<HomePage> {
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
); );
}, loaded: (products) { }, loaded: (products) {
final filteredProducts = _filterProducts(products); final filteredProducts =
_filterProducts(products);
if (filteredProducts.isEmpty) { if (filteredProducts.isEmpty) {
return const Center( return const Center(
child: Text('No Items Found'), child: Text('No Items Found'),
); );
} }
return GridView.builder( return GridView.builder(
shrinkWrap: true,
itemCount: filteredProducts.length, itemCount: filteredProducts.length,
physics: padding: const EdgeInsets.all(16),
const NeverScrollableScrollPhysics(),
gridDelegate: gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount( SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent:
200, // Lebar maksimal tiap item (bisa kamu ubah)
mainAxisSpacing: 30,
crossAxisSpacing: 30,
childAspectRatio: 0.85, childAspectRatio: 0.85,
crossAxisCount: 3,
crossAxisSpacing: 30.0,
mainAxisSpacing: 30.0,
), ),
itemBuilder: (context, index) => itemBuilder: (context, index) =>
ProductCard( ProductCard(
@ -202,20 +200,20 @@ class _HomePageState extends State<HomePage> {
child: Text('No Items'), child: Text('No Items'),
); );
} }
final filteredProducts = _filterProductsByCategory(products, 1); final filteredProducts =
_filterProductsByCategory(products, 1);
return filteredProducts.isEmpty return filteredProducts.isEmpty
? const _IsEmpty() ? const _IsEmpty()
: GridView.builder( : GridView.builder(
shrinkWrap: true,
itemCount: filteredProducts.length, itemCount: filteredProducts.length,
physics: padding: const EdgeInsets.all(16),
const NeverScrollableScrollPhysics(),
gridDelegate: gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount( SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent:
200, // Lebar maksimal tiap item (bisa kamu ubah)
mainAxisSpacing: 30,
crossAxisSpacing: 30,
childAspectRatio: 0.85, childAspectRatio: 0.85,
crossAxisCount: 3,
crossAxisSpacing: 30.0,
mainAxisSpacing: 30.0,
), ),
itemBuilder: (context, index) => itemBuilder: (context, index) =>
ProductCard( ProductCard(
@ -241,20 +239,20 @@ class _HomePageState extends State<HomePage> {
child: Text('No Items'), child: Text('No Items'),
); );
} }
final filteredProducts = _filterProductsByCategory(products, 2); final filteredProducts =
_filterProductsByCategory(products, 2);
return filteredProducts.isEmpty return filteredProducts.isEmpty
? const _IsEmpty() ? const _IsEmpty()
: GridView.builder( : GridView.builder(
shrinkWrap: true,
itemCount: filteredProducts.length, itemCount: filteredProducts.length,
physics: padding: const EdgeInsets.all(16),
const NeverScrollableScrollPhysics(),
gridDelegate: gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount( SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent:
200, // Lebar maksimal tiap item (bisa kamu ubah)
mainAxisSpacing: 30,
crossAxisSpacing: 30,
childAspectRatio: 0.85, childAspectRatio: 0.85,
crossAxisCount: 3,
crossAxisSpacing: 30.0,
mainAxisSpacing: 30.0,
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
return ProductCard( return ProductCard(
@ -281,20 +279,20 @@ class _HomePageState extends State<HomePage> {
child: Text('No Items'), child: Text('No Items'),
); );
} }
final filteredProducts = _filterProductsByCategory(products, 3); final filteredProducts =
_filterProductsByCategory(products, 3);
return filteredProducts.isEmpty return filteredProducts.isEmpty
? const _IsEmpty() ? const _IsEmpty()
: GridView.builder( : GridView.builder(
shrinkWrap: true,
itemCount: filteredProducts.length, itemCount: filteredProducts.length,
physics: padding: const EdgeInsets.all(16),
const NeverScrollableScrollPhysics(),
gridDelegate: gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount( SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent:
200, // Lebar maksimal tiap item (bisa kamu ubah)
mainAxisSpacing: 30,
crossAxisSpacing: 30,
childAspectRatio: 0.85, childAspectRatio: 0.85,
crossAxisCount: 3,
crossAxisSpacing: 30.0,
mainAxisSpacing: 30.0,
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
return ProductCard( return ProductCard(
@ -306,6 +304,7 @@ class _HomePageState extends State<HomePage> {
}), }),
), ),
], ],
),
); );
}, },
), ),
@ -313,102 +312,58 @@ class _HomePageState extends State<HomePage> {
), ),
), ),
), ),
),
),
Expanded( Expanded(
flex: 2, flex: 2,
child: Align( child: Align(
alignment: Alignment.topCenter, alignment: Alignment.topCenter,
child: Stack( child: Material(
children: [ color: Colors.white,
SingleChildScrollView(
padding: const EdgeInsets.all(24.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
GestureDetector( Column(
onTap: () { children: [
if (widget.table == null) { HomeRightTitle(
context.push(DashboardPage( table: widget.table,
index: 1, ),
)); Container(
} padding: const EdgeInsets.all(16.0),
}, decoration: BoxDecoration(
child: Text( border: Border(
'Meja: ${widget.table == null ? 'Belum Pilih Meja' : '${widget.table!.id}'}', bottom: BorderSide(
style: TextStyle( color: AppColors.grey,
color: AppColors.primary, width: 1.0,
fontSize: 20,
fontWeight: FontWeight.w600,
), ),
), ),
), ),
const SpaceHeight(8.0), child: const Row(
Button.filled( mainAxisAlignment:
width: 180.0, MainAxisAlignment.spaceBetween,
height: 40,
onPressed: () {},
label: 'Pesanan#',
),
// Row(
// children: [
// Button.filled(
// width: 120.0,
// height: 40,
// onPressed: () {},
// label: 'Dine In',
// ),
// const SpaceWidth(8.0),
// Button.outlined(
// width: 100.0,
// height: 40,
// onPressed: () {},
// label: 'To Go',
// ),
// ],
// ),
const SpaceHeight(16.0),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
'Item', "Order #",
style: TextStyle( style: TextStyle(
color: AppColors.primary,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w600, fontWeight: FontWeight.bold,
), ),
), ),
SizedBox( Text(
width: 130, "Total: 0",
),
SizedBox(
width: 50.0,
child: Text(
'Qty',
style: TextStyle( style: TextStyle(
color: AppColors.primary,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w600, fontWeight: FontWeight.bold,
),
),
),
SizedBox(
child: Text(
'Price',
style: TextStyle(
color: AppColors.primary,
fontSize: 16,
fontWeight: FontWeight.w600,
),
), ),
), ),
], ],
), ),
const SpaceHeight(8), ),
const Divider(), ],
const SpaceHeight(8), ),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
BlocBuilder<CheckoutBloc, CheckoutState>( BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) { builder: (context, state) {
return state.maybeWhen( return state.maybeWhen(
@ -423,7 +378,8 @@ class _HomePageState extends State<HomePage> {
serviceCharge, serviceCharge,
totalQuantity, totalQuantity,
totalPrice, totalPrice,
draftName, orderType) { draftName,
orderType) {
if (products.isEmpty) { if (products.isEmpty) {
return const Center( return const Center(
child: Text('No Items'), child: Text('No Items'),
@ -444,45 +400,113 @@ class _HomePageState extends State<HomePage> {
}, },
), ),
const SpaceHeight(8.0), const SpaceHeight(8.0),
Row( ],
mainAxisAlignment: MainAxisAlignment.spaceEvenly, ),
),
),
Column(
children: [ children: [
ColumnButton( Padding(
label: 'Diskon', padding: const EdgeInsets.all(24.0),
svgGenImage: Assets.icons.diskon, child: Column(
onPressed: () => showDialog( children: [
context: context, // Row(
barrierDismissible: false, // mainAxisAlignment:
builder: (context) => const DiscountDialog(), // MainAxisAlignment.spaceEvenly,
// children: [
// ColumnButton(
// label: 'Diskon',
// svgGenImage: Assets.icons.diskon,
// onPressed: () => showDialog(
// context: context,
// barrierDismissible: false,
// builder: (context) =>
// const DiscountDialog(),
// ),
// ),
// ColumnButton(
// label: 'Pajak PB1',
// svgGenImage: Assets.icons.pajak,
// onPressed: () => showDialog(
// context: context,
// builder: (context) =>
// const TaxDialog(),
// ),
// ),
// ColumnButton(
// label: 'Layanan',
// svgGenImage: Assets.icons.layanan,
// onPressed: () => showDialog(
// context: context,
// builder: (context) =>
// const ServiceDialog(),
// ),
// ),
// ],
// ),
// const SpaceHeight(8.0),
// const Divider(),
// const SpaceHeight(8.0),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
const Text(
'Sub total',
style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
), ),
), ),
ColumnButton( BlocBuilder<CheckoutBloc, CheckoutState>(
label: 'Pajak PB1', builder: (context, state) {
svgGenImage: Assets.icons.pajak, final price = state.maybeWhen(
onPressed: () => showDialog( orElse: () => 0,
context: context, loaded: (products,
builder: (context) => const TaxDialog(), discountModel,
), discount,
), discountAmount,
ColumnButton( tax,
label: 'Layanan', serviceCharge,
svgGenImage: Assets.icons.layanan, totalQuantity,
onPressed: () => showDialog( totalPrice,
context: context, draftName,
builder: (context) => const ServiceDialog(), orderType) {
if (products.isEmpty) {
return 0;
}
return products
.map((e) =>
e.product.price!
.toIntegerFromText *
e.quantity)
.reduce((value, element) =>
value + element);
});
return Text(
price.currencyFormatRp,
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w900,
), ),
);
},
), ),
], ],
), ),
const SpaceHeight(8.0), const SpaceHeight(8.0),
const Divider(),
const SpaceHeight(8.0),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( const Text(
'Pajak PB1', 'Pajak PB1',
style: TextStyle(color: AppColors.grey), style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
),
), ),
BlocBuilder<CheckoutBloc, CheckoutState>( BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) { builder: (context, state) {
@ -496,7 +520,8 @@ class _HomePageState extends State<HomePage> {
serviceCharge, serviceCharge,
totalQuantity, totalQuantity,
totalPrice, totalPrice,
draftName, orderType) { draftName,
orderType) {
if (products.isEmpty) { if (products.isEmpty) {
return 0; return 0;
} }
@ -515,11 +540,15 @@ class _HomePageState extends State<HomePage> {
), ),
const SpaceHeight(8.0), const SpaceHeight(8.0),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( const Text(
'Layanan', 'Layanan',
style: TextStyle(color: AppColors.grey), style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
),
), ),
BlocBuilder<CheckoutBloc, CheckoutState>( BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) { builder: (context, state) {
@ -533,7 +562,8 @@ class _HomePageState extends State<HomePage> {
serviceCharge, serviceCharge,
totalQuantity, totalQuantity,
totalPrice, totalPrice,
draftName, orderType) { draftName,
orderType) {
return serviceCharge; return serviceCharge;
}); });
return Text( return Text(
@ -549,11 +579,39 @@ class _HomePageState extends State<HomePage> {
), ),
const SpaceHeight(8.0), const SpaceHeight(8.0),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_buildSmallButton(
onTap: () => showDialog(
context: context,
builder: (context) =>
const ServiceDialog(),
),
label: 'Layanan',
),
SpaceWidth(8),
_buildSmallButton(
onTap: () => showDialog(
context: context,
builder: (context) =>
const DiscountDialog(),
),
label: 'Diskon',
),
],
),
const SpaceHeight(8.0),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
const Text( const Text(
'Diskon', 'Diskon',
style: TextStyle(color: AppColors.grey), style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
),
), ),
BlocBuilder<CheckoutBloc, CheckoutState>( BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) { builder: (context, state) {
@ -567,7 +625,8 @@ class _HomePageState extends State<HomePage> {
serviceCharge, serviceCharge,
totalQuantity, totalQuantity,
totalPrice, totalPrice,
draftName, orderType) { draftName,
orderType) {
if (discountModel == null) { if (discountModel == null) {
return 0; return 0;
} }
@ -586,65 +645,19 @@ class _HomePageState extends State<HomePage> {
), ),
], ],
), ),
const SpaceHeight(8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Sub total',
style: TextStyle(
color: AppColors.grey,
fontWeight: FontWeight.bold,
fontSize: 16),
),
BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) {
final price = state.maybeWhen(
orElse: () => 0,
loaded: (products,
discountModel,
discount,
discountAmount,
tax,
serviceCharge,
totalQuantity,
totalPrice,
draftName, orderType) {
if (products.isEmpty) {
return 0;
}
return products
.map((e) =>
e.product.price!
.toIntegerFromText *
e.quantity)
.reduce((value, element) =>
value + element);
});
return Text(
price.currencyFormatRp,
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.bold,
fontSize: 16),
);
},
),
],
),
const SpaceHeight(100.0),
], ],
), ),
), ),
Align( Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: ColoredBox( child: Container(
height: context.deviceHeight * 0.09,
width: double.infinity,
color: AppColors.white, color: AppColors.white,
child: Padding( child: Expanded(
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 16.0),
child: Button.filled( child: Button.filled(
borderRadius: 0,
elevation: 0,
onPressed: () { onPressed: () {
context.push(ConfirmPaymentPage( context.push(ConfirmPaymentPage(
isTable: widget.isTable, isTable: widget.isTable,
@ -658,6 +671,9 @@ class _HomePageState extends State<HomePage> {
), ),
], ],
), ),
],
),
),
), ),
), ),
], ],
@ -666,6 +682,33 @@ class _HomePageState extends State<HomePage> {
), ),
); );
} }
GestureDetector _buildSmallButton({
required Function() onTap,
required String label,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 6.0,
),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(8.0),
),
child: Text(
label,
style: TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.bold,
fontSize: 12.0,
),
),
),
);
}
} }
class _IsEmpty extends StatelessWidget { class _IsEmpty extends StatelessWidget {

91
lib/presentation/home/widgets/custom_tab_bar.dart
View File

@ -2,8 +2,6 @@ import 'package:flutter/material.dart';
import '../../../core/constants/colors.dart'; import '../../../core/constants/colors.dart';
class CustomTabBar extends StatefulWidget { class CustomTabBar extends StatefulWidget {
final List<String> tabTitles; final List<String> tabTitles;
final int initialTabIndex; final int initialTabIndex;
@ -34,7 +32,12 @@ class _CustomTabBarState extends State<CustomTabBar> {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Row( Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
),
child: Row(
children: List.generate( children: List.generate(
widget.tabTitles.length, widget.tabTitles.length,
(index) => GestureDetector( (index) => GestureDetector(
@ -44,22 +47,21 @@ class _CustomTabBarState extends State<CustomTabBar> {
}); });
}, },
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 14), padding:
margin: const EdgeInsets.only(right: 32), const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
margin: const EdgeInsets.only(right: 16),
decoration: BoxDecoration( decoration: BoxDecoration(
border: _selectedIndex == index borderRadius: BorderRadius.circular(8),
? const Border( color: _selectedIndex == index
bottom: BorderSide( ? AppColors.primary
width: 3.0, : Colors.transparent,
color: AppColors.primary,
),
)
: null,
), ),
child: Text( child: Text(
widget.tabTitles[index], widget.tabTitles[index],
style: const TextStyle( style: TextStyle(
color: AppColors.primary, color: _selectedIndex == index
? Colors.white
: AppColors.primary,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@ -67,6 +69,7 @@ class _CustomTabBarState extends State<CustomTabBar> {
), ),
), ),
), ),
),
Padding( Padding(
padding: const EdgeInsets.symmetric(vertical: 18.0), padding: const EdgeInsets.symmetric(vertical: 18.0),
child: widget.tabViews[_selectedIndex], child: widget.tabViews[_selectedIndex],
@ -75,3 +78,61 @@ class _CustomTabBarState extends State<CustomTabBar> {
); );
} }
} }
class CustomTabBarV2 extends StatelessWidget {
final List<String> tabTitles;
final List<Widget> tabViews;
const CustomTabBarV2({
super.key,
required this.tabTitles,
required this.tabViews,
});
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: tabTitles.length,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
elevation: 0,
color: Colors.white,
borderOnForeground: false,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: TabBar(
isScrollable: true,
tabAlignment: TabAlignment.start,
labelColor: Colors.white,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
),
dividerColor: Colors.transparent,
unselectedLabelColor: AppColors.primary,
indicator: BoxDecoration(
color: AppColors.primary, // Warna button saat aktif
borderRadius: BorderRadius.circular(8),
),
indicatorColor: Colors.transparent,
tabs: tabTitles
.map((title) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Tab(text: title),
))
.toList(),
),
),
),
Expanded(
// ✅ ini bagian penting
child: TabBarView(
children: tabViews,
),
),
],
),
);
}
}

60
lib/presentation/home/widgets/home_right_title.dart Normal file
View File

@ -0,0 +1,60 @@
import 'package:enaklo_pos/core/components/buttons.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/data/models/response/table_model.dart';
import 'package:enaklo_pos/presentation/home/pages/dashboard_page.dart';
import 'package:flutter/material.dart';
class HomeRightTitle extends StatelessWidget {
final TableModel? table;
const HomeRightTitle({super.key, this.table});
@override
Widget build(BuildContext context) {
return Container(
height: context.deviceHeight * 0.1,
decoration: BoxDecoration(
color: AppColors.primary,
border: Border(
left: BorderSide(
color: Colors.white,
width: 1.0,
),
),
),
child: Row(
children: [
Expanded(
child: Button.filled(
width: 180.0,
height: context.deviceHeight,
elevation: 0,
onPressed: () {},
label: 'List Order',
),
),
Container(
width: 1,
height: context.deviceHeight,
color: Colors.white,
),
Expanded(
child: Button.filled(
width: 180.0,
height: context.deviceHeight,
elevation: 0,
onPressed: () {
if (table == null) {
context.push(DashboardPage(
index: 1,
));
}
},
label: table == null ? 'Pilih Meja' : '${table!.id}',
),
),
],
),
);
}
}

24
lib/presentation/home/widgets/home_title.dart
View File

@ -1,3 +1,4 @@
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:enaklo_pos/core/extensions/date_time_ext.dart'; import 'package:enaklo_pos/core/extensions/date_time_ext.dart';
@ -16,30 +17,42 @@ class HomeTitle extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Row( return Container(
height: context.deviceHeight * 0.1,
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
decoration: BoxDecoration(
color: AppColors.primary,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.store, color: AppColors.white, size: 32.0),
SizedBox(width: 12),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text( const Text(
'Enaklo POS', 'Enaklo POS',
style: TextStyle( style: TextStyle(
color: AppColors.primary, color: AppColors.white,
fontSize: 22, fontSize: 22,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),
const SizedBox(height: 4.0),
Text( Text(
DateTime.now().toFormattedDate(), DateTime.now().toFormattedDate(),
style: const TextStyle( style: TextStyle(
color: AppColors.subtitle, color: Colors.grey.shade300,
fontSize: 16, fontSize: 16,
), ),
), ),
], ],
), ),
],
),
SizedBox( SizedBox(
width: 300.0, width: 300.0,
child: SearchInput( child: SearchInput(
@ -49,6 +62,7 @@ class HomeTitle extends StatelessWidget {
), ),
), ),
], ],
),
); );
} }
} }

51
lib/presentation/home/widgets/item_notes_dialog.dart
View File

@ -1,12 +1,11 @@
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/presentation/home/bloc/checkout/checkout_bloc.dart'; import 'package:enaklo_pos/presentation/home/bloc/checkout/checkout_bloc.dart';
import 'package:enaklo_pos/presentation/home/models/product_quantity.dart'; import 'package:enaklo_pos/presentation/home/models/product_quantity.dart';
import 'package:enaklo_pos/data/models/response/product_response_model.dart';
import '../../../core/components/buttons.dart'; import '../../../core/components/buttons.dart';
import '../../../core/components/spaces.dart'; import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart';
class ItemNotesDialog extends StatefulWidget { class ItemNotesDialog extends StatefulWidget {
final ProductQuantity item; final ProductQuantity item;
@ -38,24 +37,52 @@ class _ItemNotesDialogState extends State<ItemNotesDialog> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AlertDialog( return AlertDialog(
title: const Text('Add Notes'), backgroundColor: Colors.white,
title: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.item.product.name ?? 'Catatan Item',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColors.black,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4.0),
Text(
'Masukkan catatan untuk item ini',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
],
),
),
SpaceWidth(12),
IconButton(
icon: const Icon(Icons.close, color: AppColors.black),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
content: Column( content: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text(
widget.item.product.name ?? 'Product',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
const SpaceHeight(16.0),
TextField( TextField(
controller: notesController, controller: notesController,
maxLines: 3, maxLines: 3,
decoration: const InputDecoration( decoration: const InputDecoration(
hintText: 'Enter notes for this item...', hintText: 'Masukkan catatan untuk item ini',
border: OutlineInputBorder(), border: OutlineInputBorder(),
), ),
), ),

165
lib/presentation/home/widgets/order_menu.dart
View File

@ -15,6 +15,166 @@ class OrderMenu extends StatelessWidget {
final ProductQuantity data; final ProductQuantity data;
const OrderMenu({super.key, required this.data}); const OrderMenu({super.key, required this.data});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.only(bottom: 8.0),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
children: [
Row(
children: [
Expanded(
child: Text(
data.product.name ?? "_",
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(width: 12.0),
_buildIconButton(
onTap: () {
showDialog(
context: context,
builder: (context) => ItemNotesDialog(item: data),
);
},
icon: Icons.edit_note,
),
SizedBox(width: 8.0),
_buildIconButton(
onTap: () {},
icon: Icons.delete_outline,
iconColor: AppColors.red,
),
],
),
const SpaceHeight(12.0),
Row(
children: [
Expanded(
child: Text(
(data.product.price!.toIntegerFromText * data.quantity)
.currencyFormatRp,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.bold,
),
),
),
SpaceWidth(16),
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(50.0),
),
child: Row(
children: [
_buildIconButton(
onTap: () {
context
.read<CheckoutBloc>()
.add(CheckoutEvent.removeItem(data.product));
},
icon: Icons.remove,
iconColor: AppColors.primary,
bgColor: Colors.grey.shade300,
),
SizedBox(
width: 30.0,
child: Center(
child: Text(
data.quantity.toString(),
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
_buildIconButton(
onTap: () {
context
.read<CheckoutBloc>()
.add(CheckoutEvent.addItem(data.product));
},
icon: Icons.add,
iconColor: AppColors.white,
bgColor: AppColors.primary,
),
],
),
),
],
),
if (data.notes.isNotEmpty) ...[
SpaceHeight(8.0),
Divider(),
SpaceHeight(8.0),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(8.0),
),
child: Text(
'Notes: ${data.notes}',
style: const TextStyle(
fontSize: 14,
color: AppColors.black,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
),
),
),
],
],
),
);
}
GestureDetector _buildIconButton({
required Function()? onTap,
Color iconColor = AppColors.black,
Color bgColor = AppColors.white,
required IconData icon,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: bgColor,
shape: BoxShape.circle,
),
child: Icon(
icon,
size: 20,
color: iconColor,
),
),
);
}
}
class OrderMenuOld extends StatelessWidget {
final ProductQuantity data;
const OrderMenuOld({super.key, required this.data});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
@ -39,6 +199,8 @@ class OrderMenu extends StatelessWidget {
width: 50.0, width: 50.0,
height: 50.0, height: 50.0,
fit: BoxFit.cover, fit: BoxFit.cover,
errorWidget: (context, url, error) =>
const Icon(Icons.error),
), ),
), ),
title: Row( title: Row(
@ -70,7 +232,8 @@ class OrderMenu extends StatelessWidget {
subtitle: Column( subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text(data.product.price!.toIntegerFromText.currencyFormatRp), Text(
data.product.price!.toIntegerFromText.currencyFormatRp),
if (data.notes.isNotEmpty) ...[ if (data.notes.isNotEmpty) ...[
const SpaceHeight(4.0), const SpaceHeight(4.0),
Container( Container(

92
lib/presentation/home/widgets/product_card.dart
View File

@ -1,4 +1,5 @@
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:enaklo_pos/core/constants/variables.dart'; import 'package:enaklo_pos/core/constants/variables.dart';
@ -14,8 +15,87 @@ import '../../../core/constants/colors.dart';
class ProductCard extends StatelessWidget { class ProductCard extends StatelessWidget {
final Product data; final Product data;
final VoidCallback onCartButton; final VoidCallback onCartButton;
const ProductCard(
{super.key, required this.data, required this.onCartButton});
const ProductCard({ @override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
context.read<CheckoutBloc>().add(CheckoutEvent.addItem(data));
},
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(12.0),
),
child: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: CachedNetworkImage(
imageUrl: data.image!.contains('http')
? data.image!
: '${Variables.baseUrl}/${data.image}',
width: double.infinity,
height: context.deviceHeight * 0.18,
fit: BoxFit.fill,
errorWidget: (context, url, error) => Container(
width: double.infinity,
height: context.deviceHeight * 0.18,
decoration: BoxDecoration(
color: AppColors.grey.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.image_outlined,
color: AppColors.grey,
size: 40,
),
),
),
),
const SpaceHeight(8.0),
Row(
children: [
Expanded(
child: Text(
"${data.name}",
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
],
),
Spacer(),
const SpaceHeight(4.0),
Align(
alignment: Alignment.centerRight,
child: Text(
data.price!.toIntegerFromText.currencyFormatRp,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: AppColors.primary,
),
),
),
],
),
));
}
}
class ProductCardOld extends StatelessWidget {
final Product data;
final VoidCallback onCartButton;
const ProductCardOld({
super.key, super.key,
required this.data, required this.data,
required this.onCartButton, required this.onCartButton,
@ -29,11 +109,9 @@ class ProductCard extends StatelessWidget {
}, },
child: Container( child: Container(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
decoration: ShapeDecoration( decoration: BoxDecoration(
shape: RoundedRectangleBorder( color: AppColors.white,
side: const BorderSide(width: 1, color: AppColors.card), borderRadius: BorderRadius.circular(12.0),
borderRadius: BorderRadius.circular(16),
),
), ),
child: Stack( child: Stack(
children: [ children: [
@ -63,6 +141,8 @@ class ProductCard extends StatelessWidget {
width: 60, width: 60,
height: 60, height: 60,
fit: BoxFit.cover, fit: BoxFit.cover,
errorWidget: (context, url, error) =>
const Icon(Icons.error),
), ),
), ),
), ),