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

feat: update home page

Browse Source
This commit is contained in:
efrilm 2025-07-31 23:22:34 +07:00
parent 805673755b
commit 8767f02109
11 changed files with 552 additions and 797 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,8 @@ class Button extends StatelessWidget {
this.fontSize = 16.0, this.fontSize = 16.0,
this.elevation, this.elevation,
this.labelStyle, this.labelStyle,
this.mainAxisAlignment = MainAxisAlignment.center,
this.crossAxisAlignment = CrossAxisAlignment.center,
}); });
const Button.outlined({ const Button.outlined({
@ -37,6 +39,8 @@ class Button extends StatelessWidget {
this.fontSize = 16.0, this.fontSize = 16.0,
this.elevation, this.elevation,
this.labelStyle, this.labelStyle,
this.mainAxisAlignment = MainAxisAlignment.center,
this.crossAxisAlignment = CrossAxisAlignment.center,
}); });
final Function() onPressed; final Function() onPressed;
@ -52,6 +56,8 @@ class Button extends StatelessWidget {
final bool disabled; final bool disabled;
final double fontSize; final double fontSize;
final TextStyle? labelStyle; final TextStyle? labelStyle;
final MainAxisAlignment mainAxisAlignment;
final CrossAxisAlignment crossAxisAlignment;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -70,8 +76,8 @@ class Button extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 16.0), padding: const EdgeInsets.symmetric(horizontal: 16.0),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: mainAxisAlignment,
mainAxisSize: MainAxisSize.min, crossAxisAlignment: crossAxisAlignment,
children: [ children: [
icon ?? const SizedBox.shrink(), icon ?? const SizedBox.shrink(),
if (icon != null) const SizedBox(width: 10.0), if (icon != null) const SizedBox(width: 10.0),
@ -104,7 +110,8 @@ class Button extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 16.0), padding: const EdgeInsets.symmetric(horizontal: 16.0),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: mainAxisAlignment,
crossAxisAlignment: crossAxisAlignment,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
icon ?? const SizedBox.shrink(), icon ?? const SizedBox.shrink(),

96
lib/core/components/custom_modal_dialog.dart Normal file
View File

@ -0,0 +1,96 @@
import 'package:enaklo_pos/core/components/spaces.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:flutter/material.dart';
class CustomModalDialog extends StatelessWidget {
final String title;
final String? subtitle;
final Widget child;
final VoidCallback? onClose;
const CustomModalDialog(
{super.key,
required this.title,
this.subtitle,
required this.child,
this.onClose});
@override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: AppColors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 200,
maxWidth: 600,
minHeight: 200,
maxHeight: 600,
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(16),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColors.primary,
const Color.fromARGB(255, 67, 69, 195)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.vertical(
top: Radius.circular(16),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
color: AppColors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
if (subtitle != null)
Text(
subtitle ?? '',
style: TextStyle(
color: AppColors.grey,
fontSize: 16,
),
),
],
),
),
SpaceWidth(12),
IconButton(
icon: Icon(Icons.close, color: AppColors.white),
onPressed: () {
if (onClose != null) {
onClose!();
} else {
Navigator.of(context).pop();
}
},
),
],
),
),
child,
],
),
),
);
}
}

38
lib/core/constants/theme.dart Normal file
View File

@ -0,0 +1,38 @@
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
ThemeData getApplicationTheme = ThemeData(
primaryColor: AppColors.primary,
scaffoldBackgroundColor: AppColors.white,
appBarTheme: AppBarTheme(
color: AppColors.white,
elevation: 0,
titleTextStyle: GoogleFonts.quicksand(
color: AppColors.primary,
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
iconTheme: const IconThemeData(
color: AppColors.primary,
),
),
fontFamily: GoogleFonts.quicksand().fontFamily,
colorScheme: ColorScheme.fromSeed(seedColor: AppColors.primary),
useMaterial3: true,
inputDecorationTheme: InputDecorationTheme(
contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: AppColors.primary),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: AppColors.primary),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: AppColors.primary),
),
),
);

28
lib/main.dart
View File

@ -1,4 +1,5 @@
import 'dart:developer'; import 'dart:developer';
import 'package:enaklo_pos/core/constants/theme.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.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';
@ -57,7 +58,6 @@ 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';
void main() async { void main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
// await LamanPrint.init(); // await LamanPrint.init();
@ -110,7 +110,8 @@ class _MyAppState extends State<MyApp> {
LocalProductBloc(ProductLocalDatasource.instance), LocalProductBloc(ProductLocalDatasource.instance),
), ),
BlocProvider( BlocProvider(
create: (context) => CheckoutBloc(settingsLocalDatasource: SettingsLocalDatasource()), create: (context) =>
CheckoutBloc(settingsLocalDatasource: SettingsLocalDatasource()),
), ),
BlocProvider( BlocProvider(
create: (context) => TaxSettingsBloc(SettingsLocalDatasource()), create: (context) => TaxSettingsBloc(SettingsLocalDatasource()),
@ -186,7 +187,8 @@ class _MyAppState extends State<MyApp> {
create: (context) => QrisBloc(MidtransRemoteDatasource()), create: (context) => QrisBloc(MidtransRemoteDatasource()),
), ),
BlocProvider( BlocProvider(
create: (context) => PaymentMethodsBloc(PaymentMethodsRemoteDatasource()), create: (context) =>
PaymentMethodsBloc(PaymentMethodsRemoteDatasource()),
), ),
BlocProvider( BlocProvider(
create: (context) => OnlineCheckerBloc(), create: (context) => OnlineCheckerBloc(),
@ -216,25 +218,7 @@ class _MyAppState extends State<MyApp> {
child: MaterialApp( child: MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
title: 'POS Resto App', title: 'POS Resto App',
theme: ThemeData( theme: getApplicationTheme,
colorScheme: ColorScheme.fromSeed(seedColor: AppColors.primary),
useMaterial3: true,
textTheme: GoogleFonts.quicksandTextTheme(
Theme.of(context).textTheme,
),
appBarTheme: AppBarTheme(
color: AppColors.white,
elevation: 0,
titleTextStyle: GoogleFonts.quicksand(
color: AppColors.primary,
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
iconTheme: const IconThemeData(
color: AppColors.primary,
),
),
),
home: FutureBuilder<bool>( home: FutureBuilder<bool>(
future: AuthLocalDataSource().isAuthDataExists(), future: AuthLocalDataSource().isAuthDataExists(),
builder: (context, snapshot) { builder: (context, snapshot) {

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

@ -8,7 +8,6 @@ import 'package:enaklo_pos/core/extensions/int_ext.dart';
import 'package:enaklo_pos/core/extensions/string_ext.dart'; 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/pages/confirm_payment_page.dart'; import 'package:enaklo_pos/presentation/home/pages/confirm_payment_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';
@ -19,7 +18,6 @@ import '../../../core/components/buttons.dart';
import '../../../core/components/spaces.dart'; 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 '../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';
@ -29,10 +27,10 @@ class HomePage extends StatefulWidget {
final bool isTable; final bool isTable;
final TableModel? table; final TableModel? table;
const HomePage({ const HomePage({
Key? key, super.key,
required this.isTable, required this.isTable,
this.table, this.table,
}) : super(key: key); });
@override @override
State<HomePage> createState() => _HomePageState(); State<HomePage> createState() => _HomePageState();
@ -94,7 +92,7 @@ class _HomePageState extends State<HomePage> {
return Hero( return Hero(
tag: 'confirmation_screen', tag: 'confirmation_screen',
child: Scaffold( child: Scaffold(
backgroundColor: AppColors.background, backgroundColor: AppColors.white,
body: BlocListener<SyncProductBloc, SyncProductState>( body: BlocListener<SyncProductBloc, SyncProductState>(
listener: (context, state) { listener: (context, state) {
state.maybeWhen( state.maybeWhen(
@ -320,47 +318,61 @@ class _HomePageState extends State<HomePage> {
color: Colors.white, color: Colors.white,
child: Column( child: Column(
children: [ children: [
Column( HomeRightTitle(
children: [ table: widget.table,
HomeRightTitle( ),
table: widget.table, Padding(
), padding: const EdgeInsets.all(16.0)
Container( .copyWith(bottom: 0, top: 27),
padding: const EdgeInsets.all(16.0), child: Column(
decoration: BoxDecoration( children: [
border: Border( const Row(
bottom: BorderSide(
color: AppColors.grey,
width: 1.0,
),
),
),
child: const Row(
mainAxisAlignment: mainAxisAlignment:
MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Order #", 'Item',
style: TextStyle( style: TextStyle(
color: AppColors.primary,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.bold, fontWeight: FontWeight.w600,
), ),
), ),
Text( SizedBox(
"Total: 0", width: 130,
style: TextStyle( ),
fontSize: 16, SizedBox(
fontWeight: FontWeight.bold, width: 50.0,
child: Text(
'Qty',
style: TextStyle(
color: AppColors.primary,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
child: Text(
'Price',
style: TextStyle(
color: AppColors.primary,
fontSize: 16,
fontWeight: FontWeight.w600,
),
), ),
), ),
], ],
), ),
), const SpaceHeight(8),
], const Divider(),
],
),
), ),
Expanded( Expanded(
child: SingleChildScrollView( child: SingleChildScrollView(
padding: const EdgeInsets.all(16.0), padding:
const EdgeInsets.all(16.0).copyWith(top: 0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -404,260 +416,109 @@ class _HomePageState extends State<HomePage> {
), ),
), ),
), ),
Column( Padding(
children: [ padding: const EdgeInsets.all(16.0).copyWith(top: 0),
Padding( child: Column(
padding: const EdgeInsets.all(24.0), children: [
child: Column( const Divider(),
const SpaceHeight(16.0),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [ children: [
// Row( const Text(
// mainAxisAlignment: 'Pajak',
// MainAxisAlignment.spaceEvenly, style: TextStyle(
// children: [ color: AppColors.black,
// ColumnButton( fontWeight: FontWeight.bold,
// 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,
),
),
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.w900,
),
);
},
),
],
), ),
const SpaceHeight(8.0), BlocBuilder<CheckoutBloc, CheckoutState>(
Row( builder: (context, state) {
mainAxisAlignment: final tax = state.maybeWhen(
MainAxisAlignment.spaceBetween, orElse: () => 0,
children: [ loaded: (products,
const Text( discountModel,
'Pajak PB1', discount,
style: TextStyle( discountAmount,
color: AppColors.black, tax,
fontWeight: FontWeight.bold, serviceCharge,
totalQuantity,
totalPrice,
draftName,
orderType) {
if (products.isEmpty) {
return 0;
}
return tax;
});
return Text(
'$tax %',
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w600,
), ),
), );
BlocBuilder<CheckoutBloc, CheckoutState>( },
builder: (context, state) {
final tax = state.maybeWhen(
orElse: () => 0,
loaded: (products,
discountModel,
discount,
discountAmount,
tax,
serviceCharge,
totalQuantity,
totalPrice,
draftName,
orderType) {
if (products.isEmpty) {
return 0;
}
return tax;
});
return Text(
'$tax %',
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w600,
),
);
},
),
],
),
const SpaceHeight(8.0),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
const Text(
'Layanan',
style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
),
),
BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) {
final serviceCharge = state.maybeWhen(
orElse: () => 0,
loaded: (products,
discountModel,
discount,
discountAmount,
tax,
serviceCharge,
totalQuantity,
totalPrice,
draftName,
orderType) {
return serviceCharge;
});
return Text(
'$serviceCharge %',
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w600,
),
);
},
),
],
),
const SpaceHeight(8.0),
Row(
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: [
const Text(
'Diskon',
style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
),
),
BlocBuilder<CheckoutBloc, CheckoutState>(
builder: (context, state) {
final discount = state.maybeWhen(
orElse: () => 0,
loaded: (products,
discountModel,
discount,
discountAmount,
tax,
serviceCharge,
totalQuantity,
totalPrice,
draftName,
orderType) {
if (discountModel == null) {
return 0;
}
return discountModel.value!
.replaceAll('.00', '')
.toIntegerFromText;
});
return Text(
'$discount %',
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w600,
),
);
},
),
],
), ),
], ],
), ),
), const SpaceHeight(16.0),
Align( Row(
alignment: Alignment.bottomCenter, mainAxisAlignment:
child: Container( MainAxisAlignment.spaceBetween,
height: context.deviceHeight * 0.09, children: [
width: double.infinity, const Text(
color: AppColors.white, 'Sub total',
style: TextStyle(
color: AppColors.black,
fontWeight: FontWeight.bold,
),
),
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.w900,
),
);
},
),
],
),
SpaceHeight(16.0),
Align(
alignment: Alignment.bottomCenter,
child: Expanded( child: Expanded(
child: Button.filled( child: Button.filled(
borderRadius: 0, borderRadius: 12,
elevation: 0, elevation: 1,
onPressed: () { onPressed: () {
context.push(ConfirmPaymentPage( context.push(ConfirmPaymentPage(
isTable: widget.isTable, isTable: widget.isTable,
@ -668,8 +529,8 @@ class _HomePageState extends State<HomePage> {
), ),
), ),
), ),
), ],
], ),
), ),
], ],
), ),
@ -682,33 +543,6 @@ 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 {

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

@ -105,17 +105,15 @@ class CustomTabBarV2 extends StatelessWidget {
child: TabBar( child: TabBar(
isScrollable: true, isScrollable: true,
tabAlignment: TabAlignment.start, tabAlignment: TabAlignment.start,
labelColor: Colors.white, labelColor: AppColors.primary,
labelStyle: TextStyle( labelStyle: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
dividerColor: Colors.transparent, dividerColor: AppColors.primary,
unselectedLabelColor: AppColors.primary, unselectedLabelColor: AppColors.primary,
indicator: BoxDecoration( indicatorSize: TabBarIndicatorSize.label,
color: AppColors.primary, // Warna button saat aktif indicatorWeight: 4,
borderRadius: BorderRadius.circular(8), indicatorColor: AppColors.primary,
),
indicatorColor: Colors.transparent,
tabs: tabTitles tabs: tabTitles
.map((title) => Padding( .map((title) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),

112
lib/presentation/home/widgets/home_right_title.dart
View File

@ -22,36 +22,92 @@ class HomeRightTitle extends StatelessWidget {
), ),
), ),
), ),
child: Row( child: Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
Expanded( Row(
child: Button.filled( children: [
width: 180.0, Expanded(
height: context.deviceHeight, child: Button.filled(
elevation: 0, width: 180.0,
onPressed: () {}, height: 40,
label: 'List Order', elevation: 0,
), onPressed: () {},
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
icon: Icon(
Icons.list,
color: Colors.white,
size: 24,
),
label: 'Daftar Pesanan',
),
),
Expanded(
child: Button.filled(
width: 180.0,
height: 40,
elevation: 0,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
icon: Icon(
Icons.person_outline,
color: Colors.white,
size: 24,
),
onPressed: () {
if (table == null) {
context.push(DashboardPage(
index: 1,
));
}
},
label: 'Pelanggan',
),
),
],
), ),
Container( Row(
width: 1, children: [
height: context.deviceHeight, Expanded(
color: Colors.white, child: Button.filled(
), width: 180.0,
Expanded( height: 40,
child: Button.filled( elevation: 0,
width: 180.0, onPressed: () {},
height: context.deviceHeight, mainAxisAlignment: MainAxisAlignment.start,
elevation: 0, crossAxisAlignment: CrossAxisAlignment.start,
onPressed: () { icon: Icon(
if (table == null) { Icons.dinner_dining_outlined,
context.push(DashboardPage( color: Colors.white,
index: 1, size: 24,
)); ),
} label: 'Dine In',
}, ),
label: table == null ? 'Pilih Meja' : '${table!.id}', ),
), Expanded(
child: Button.filled(
width: 180.0,
height: 40,
elevation: 0,
icon: Icon(
Icons.table_restaurant_outlined,
color: Colors.white,
size: 24,
),
onPressed: () {
if (table == null) {
context.push(DashboardPage(
index: 1,
));
}
},
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
label: table == null ? 'Pilih Meja' : '${table!.id}',
),
),
],
), ),
], ],
), ),

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

@ -1,6 +1,5 @@
import 'package:enaklo_pos/core/extensions/build_context_ext.dart'; 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 '../../../core/components/search_input.dart'; import '../../../core/components/search_input.dart';
import '../../../core/constants/colors.dart'; import '../../../core/constants/colors.dart';
@ -21,37 +20,18 @@ class HomeTitle extends StatelessWidget {
height: context.deviceHeight * 0.1, height: context.deviceHeight * 0.1,
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0), padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.primary, color: AppColors.white,
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Row( const Text(
crossAxisAlignment: CrossAxisAlignment.center, 'DEFAULT OUTLET',
children: [ style: TextStyle(
Icon(Icons.store, color: AppColors.white, size: 32.0), color: AppColors.primary,
SizedBox(width: 12), fontSize: 28,
Column( fontWeight: FontWeight.w600,
crossAxisAlignment: CrossAxisAlignment.start, ),
children: [
const Text(
'Enaklo POS',
style: TextStyle(
color: AppColors.white,
fontSize: 22,
fontWeight: FontWeight.w600,
),
),
Text(
DateTime.now().toFormattedDate(),
style: TextStyle(
color: Colors.grey.shade300,
fontSize: 16,
),
),
],
),
],
), ),
SizedBox( SizedBox(
width: 300.0, width: 300.0,

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

@ -6,174 +6,41 @@ import 'package:enaklo_pos/core/extensions/int_ext.dart';
import 'package:enaklo_pos/core/extensions/string_ext.dart'; import 'package:enaklo_pos/core/extensions/string_ext.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/presentation/home/widgets/item_notes_dialog.dart';
import '../../../core/components/spaces.dart'; import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart'; import '../../../core/constants/colors.dart';
class OrderMenu extends StatelessWidget { class OrderMenu extends StatefulWidget {
final ProductQuantity data; final ProductQuantity data;
const OrderMenu({super.key, required this.data}); const OrderMenu({super.key, required this.data});
@override @override
Widget build(BuildContext context) { State<OrderMenu> createState() => _OrderMenuState();
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 { class _OrderMenuState extends State<OrderMenu> {
final ProductQuantity data; final _controller = TextEditingController();
const OrderMenuOld({super.key, required this.data});
@override
void initState() {
super.initState();
_controller.text = widget.data.notes;
_controller.addListener(() {
context.read<CheckoutBloc>().add(
CheckoutEvent.updateItemNotes(
widget.data.product,
_controller.text,
),
);
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -193,9 +60,9 @@ class OrderMenuOld extends StatelessWidget {
// color: AppColors.primary, // color: AppColors.primary,
// ), // ),
CachedNetworkImage( CachedNetworkImage(
imageUrl: data.product.image!.contains('http') imageUrl: widget.data.product.image!.contains('http')
? data.product.image! ? widget.data.product.image!
: '${Variables.baseUrl}/${data.product.image}', : '${Variables.baseUrl}/${widget.data.product.image}',
width: 50.0, width: 50.0,
height: 50.0, height: 50.0,
fit: BoxFit.cover, fit: BoxFit.cover,
@ -206,55 +73,21 @@ class OrderMenuOld extends StatelessWidget {
title: Row( title: Row(
children: [ children: [
Expanded( Expanded(
child: Text(data.product.name ?? "-", child: Text(widget.data.product.name ?? "-",
maxLines: 2, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
style: const TextStyle( style: const TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
)), )),
), ),
GestureDetector(
onTap: () {
showDialog(
context: context,
builder: (context) => ItemNotesDialog(item: data),
);
},
child: const Icon(
Icons.edit_note,
size: 20,
color: AppColors.primary,
),
),
], ],
), ),
subtitle: Column( subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(widget.data.product.price!.toIntegerFromText
data.product.price!.toIntegerFromText.currencyFormatRp), .currencyFormatRp),
if (data.notes.isNotEmpty) ...[
const SpaceHeight(4.0),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(4.0),
),
child: Text(
'Notes: ${data.notes}',
style: const TextStyle(
fontSize: 12,
color: AppColors.primary,
fontStyle: FontStyle.italic,
),
),
),
],
], ],
), ),
), ),
@ -265,7 +98,7 @@ class OrderMenuOld extends StatelessWidget {
onTap: () { onTap: () {
context context
.read<CheckoutBloc>() .read<CheckoutBloc>()
.add(CheckoutEvent.removeItem(data.product)); .add(CheckoutEvent.removeItem(widget.data.product));
}, },
child: Container( child: Container(
width: 30, width: 30,
@ -281,14 +114,14 @@ class OrderMenuOld extends StatelessWidget {
width: 30.0, width: 30.0,
child: Center( child: Center(
child: Text( child: Text(
data.quantity.toString(), widget.data.quantity.toString(),
)), )),
), ),
GestureDetector( GestureDetector(
onTap: () { onTap: () {
context context
.read<CheckoutBloc>() .read<CheckoutBloc>()
.add(CheckoutEvent.addItem(data.product)); .add(CheckoutEvent.addItem(widget.data.product));
}, },
child: Container( child: Container(
width: 30, width: 30,
@ -306,7 +139,8 @@ class OrderMenuOld extends StatelessWidget {
SizedBox( SizedBox(
width: 80.0, width: 80.0,
child: Text( child: Text(
(data.product.price!.toIntegerFromText * data.quantity) (widget.data.product.price!.toIntegerFromText *
widget.data.quantity)
.currencyFormatRp, .currencyFormatRp,
textAlign: TextAlign.right, textAlign: TextAlign.right,
style: const TextStyle( style: const TextStyle(
@ -317,6 +151,40 @@ class OrderMenuOld extends StatelessWidget {
), ),
], ],
), ),
SpaceHeight(8.0),
SizedBox(
height: 40,
child: Row(
children: [
Flexible(
child: TextFormField(
cursorColor: AppColors.primary,
controller: _controller,
style: const TextStyle(
fontSize: 12,
color: AppColors.black,
),
decoration: InputDecoration(
hintText: 'Catatan Pesanan',
),
),
),
const SpaceWidth(16.0),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(
Icons.delete_outline,
color: AppColors.white,
),
),
],
),
)
], ],
); );
} }

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

@ -1,5 +1,4 @@
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';
@ -8,97 +7,14 @@ import 'package:enaklo_pos/core/extensions/string_ext.dart';
import 'package:enaklo_pos/data/models/response/product_response_model.dart'; import 'package:enaklo_pos/data/models/response/product_response_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/checkout/checkout_bloc.dart'; import 'package:enaklo_pos/presentation/home/bloc/checkout/checkout_bloc.dart';
import '../../../core/assets/assets.gen.dart';
import '../../../core/components/spaces.dart'; import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart'; 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});
@override const ProductCard({
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: [
AspectRatio(
aspectRatio: 1.2,
child: 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.cover,
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,
@ -115,6 +31,9 @@ class ProductCardOld extends StatelessWidget {
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.white, color: AppColors.white,
borderRadius: BorderRadius.circular(12.0), borderRadius: BorderRadius.circular(12.0),
border: Border.all(
color: AppColors.disabled,
),
), ),
child: Stack( child: Stack(
children: [ children: [
@ -160,28 +79,29 @@ class ProductCardOld extends StatelessWidget {
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
const Spacer(), const Spacer(),
Row( Align(
mainAxisAlignment: MainAxisAlignment.spaceBetween, alignment: Alignment.center,
children: [ child: Text(
Flexible( data.category?.name ?? '-',
child: Text( style: const TextStyle(
data.category?.name ?? '-', fontSize: 14,
style: const TextStyle( color: AppColors.grey,
color: AppColors.grey, fontWeight: FontWeight.w500,
fontSize: 12,
),
),
), ),
Flexible( maxLines: 2,
child: Text( overflow: TextOverflow.ellipsis,
data.price!.toIntegerFromText.currencyFormatRp, ),
style: const TextStyle( ),
fontWeight: FontWeight.bold, const Spacer(),
fontSize: 13, Align(
), alignment: Alignment.center,
), child: Text(
data.price!.toIntegerFromText.currencyFormatRp,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
), ),
], ),
), ),
const Spacer(), const Spacer(),
], ],
@ -232,34 +152,8 @@ class ProductCardOld extends StatelessWidget {
), ),
), ),
) )
: Align( : SizedBox.shrink()
alignment: Alignment.topRight, : SizedBox.shrink();
child: Container(
width: 36,
height: 36,
padding: const EdgeInsets.all(6),
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(9.0)),
color: AppColors.primary,
),
child: Assets.icons.shoppingBasket.svg(),
),
)
: Align(
alignment: Alignment.topRight,
child: Container(
width: 36,
height: 36,
padding: const EdgeInsets.all(6),
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(9.0)),
color: AppColors.primary,
),
child: Assets.icons.shoppingBasket.svg(),
),
);
}, },
); );
}, },

134
lib/presentation/setting/widgets/menu_product_item.dart
View File

@ -102,79 +102,79 @@ class MenuProductItem extends StatelessWidget {
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
showDialog( showDialog(
context: context, context: context,
// backgroundColor: AppColors.white, builder: (context) {
builder: (context) { //container for product detail
//container for product detail return AlertDialog(
return AlertDialog( backgroundColor: AppColors.white,
contentPadding: const EdgeInsets.all(16.0), contentPadding: const EdgeInsets.all(16.0),
content: Column( content: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Row( Row(
mainAxisAlignment: mainAxisAlignment:
MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
data.name!, data.name!,
style: const TextStyle( style: const TextStyle(
fontSize: 20, fontSize: 20,
),
), ),
IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.close),
),
],
),
const SpaceHeight(10.0),
ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(10.0)),
child: CachedNetworkImage(
imageUrl:
'${Variables.baseUrl}${data.image}',
placeholder: (context, url) => const Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
const Icon(
Icons.food_bank_outlined,
size: 80,
),
width: 80,
), ),
), IconButton(
const SpaceHeight(10.0), onPressed: () {
Text( Navigator.pop(context);
data.category?.name ?? '-', },
style: const TextStyle( icon: const Icon(Icons.close),
fontSize: 12,
color: Colors.grey,
), ),
), ],
const SpaceHeight(10.0), ),
Text( const SpaceHeight(10.0),
data.price.toString(), ClipRRect(
style: const TextStyle( borderRadius: const BorderRadius.all(
fontSize: 12, Radius.circular(10.0)),
color: Colors.grey, child: CachedNetworkImage(
imageUrl: '${Variables.baseUrl}${data.image}',
placeholder: (context, url) => const Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
const Icon(
Icons.food_bank_outlined,
size: 80,
), ),
width: 80,
), ),
const SpaceHeight(10.0), ),
Text( const SpaceHeight(10.0),
data.stock.toString(), Text(
style: const TextStyle( data.category?.name ?? '-',
fontSize: 12, style: const TextStyle(
color: Colors.grey, fontSize: 12,
), color: Colors.grey,
), ),
const SpaceHeight(10.0), ),
], const SpaceHeight(10.0),
), Text(
); data.price.toString(),
}); style: const TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
const SpaceHeight(10.0),
Text(
data.stock.toString(),
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
const SpaceHeight(10.0),
],
),
);
},
);
}, },
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 4), padding: const EdgeInsets.symmetric(vertical: 4),