feat: color and image empty

lib/core/components/buttons.dart

@@ -18,6 +18,10 @@ class Button extends StatelessWidget {
     this.icon,
     this.disabled = false,
     this.fontSize = 16.0,
+    this.elevation,
+    this.labelStyle,
+    this.mainAxisAlignment = MainAxisAlignment.center,
+    this.crossAxisAlignment = CrossAxisAlignment.center,
   });
 
   const Button.outlined({
@@ -33,6 +37,10 @@ class Button extends StatelessWidget {
     this.icon,
     this.disabled = false,
     this.fontSize = 16.0,
+    this.elevation,
+    this.labelStyle,
+    this.mainAxisAlignment = MainAxisAlignment.center,
+    this.crossAxisAlignment = CrossAxisAlignment.center,
   });
 
   final Function() onPressed;
@@ -43,9 +51,13 @@ class Button extends StatelessWidget {
   final double? width;
   final double height;
   final double borderRadius;
+  final double? elevation;
   final Widget? icon;
   final bool disabled;
   final double fontSize;
+  final TextStyle? labelStyle;
+  final MainAxisAlignment mainAxisAlignment;
+  final CrossAxisAlignment crossAxisAlignment;
 
   @override
   Widget build(BuildContext context) {
@@ -60,11 +72,12 @@ class Button extends StatelessWidget {
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(borderRadius),
                 ),
+                elevation: elevation,
                 padding: const EdgeInsets.symmetric(horizontal: 16.0),
               ),
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisAlignment: mainAxisAlignment,
-                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: crossAxisAlignment,
                 children: [
                   icon ?? const SizedBox.shrink(),
                   if (icon != null) const SizedBox(width: 10.0),
@@ -73,10 +86,11 @@ class Button extends StatelessWidget {
                       fit: BoxFit.scaleDown,
                       child: Text(
                         label,
-                        style: TextStyle(
+                        style: labelStyle ??
+                            TextStyle(
                               color: disabled ? Colors.grey : textColor,
                               fontSize: fontSize,
-                          fontWeight: FontWeight.w600,
+                              fontWeight: FontWeight.bold,
                             ),
                         textAlign: TextAlign.center,
                       ),
@@ -89,14 +103,15 @@ class Button extends StatelessWidget {
               onPressed: disabled ? null : onPressed,
               style: OutlinedButton.styleFrom(
                 backgroundColor: color,
-                side: const BorderSide(color: Colors.grey),
+                side: const BorderSide(color: AppColors.primary),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(borderRadius),
                 ),
                 padding: const EdgeInsets.symmetric(horizontal: 16.0),
               ),
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisAlignment: mainAxisAlignment,
+                crossAxisAlignment: crossAxisAlignment,
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   icon ?? const SizedBox.shrink(),
@@ -106,7 +121,8 @@ class Button extends StatelessWidget {
                       fit: BoxFit.scaleDown,
                       child: Text(
                         label,
-                        style: TextStyle(
+                        style: labelStyle ??
+                            TextStyle(
                               color: disabled ? Colors.grey : textColor,
                               fontSize: fontSize,
                               fontWeight: FontWeight.w600,

lib/core/components/custom_modal_dialog.dart

@@ -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,
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/core/constants/colors.dart

@@ -2,7 +2,8 @@ import 'package:flutter/material.dart';
 
 class AppColors {
   /// primary = #3949AB
-  static const Color primary = Color(0xff6466f1);
+  static const Color primary = Color(0xff36175e);
+  static const Color secondary = Color(0xfff1eaf9);
 
   /// grey = #B7B7B7
   static const Color grey = Color(0xffB7B7B7);
@@ -36,4 +37,6 @@ class AppColors {
 
   /// stroke = #EFF0F6
   static const Color stroke = Color(0xffEFF0F6);
+
+  static const Color background = Color.fromARGB(255, 241, 241, 241);
 }

lib/core/constants/theme.dart

@@ -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),
+    ),
+  ),
+);

lib/data/datasources/product_local_datasource.dart

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

lib/main.dart

@@ -1,7 +1,6 @@
 import 'dart:developer';
+import 'package:enaklo_pos/core/constants/theme.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_remote_datasource.dart';
 import 'package:enaklo_pos/data/datasources/category_remote_datasource.dart';
@@ -39,7 +38,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/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/generate_table/generate_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/order/order_bloc.dart';
@@ -51,9 +49,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/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/table/pages/new_table_management_page.dart';
 import 'package:google_fonts/google_fonts.dart';
-// import 'package:imin_printer/imin_printer.dart';
 
 import 'core/constants/colors.dart';
 import 'presentation/auth/bloc/login/login_bloc.dart';
@@ -61,8 +57,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'presentation/home/pages/dashboard_page.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:hive/hive.dart';
-import 'package:path_provider/path_provider.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -116,7 +110,8 @@ class _MyAppState extends State<MyApp> {
               LocalProductBloc(ProductLocalDatasource.instance),
         ),
         BlocProvider(
-          create: (context) => CheckoutBloc(settingsLocalDatasource: SettingsLocalDatasource()),
+          create: (context) =>
+              CheckoutBloc(settingsLocalDatasource: SettingsLocalDatasource()),
         ),
         BlocProvider(
           create: (context) => TaxSettingsBloc(SettingsLocalDatasource()),
@@ -192,7 +187,8 @@ class _MyAppState extends State<MyApp> {
           create: (context) => QrisBloc(MidtransRemoteDatasource()),
         ),
         BlocProvider(
-          create: (context) => PaymentMethodsBloc(PaymentMethodsRemoteDatasource()),
+          create: (context) =>
+              PaymentMethodsBloc(PaymentMethodsRemoteDatasource()),
         ),
         BlocProvider(
           create: (context) => OnlineCheckerBloc(),
@@ -222,25 +218,7 @@ class _MyAppState extends State<MyApp> {
       child: MaterialApp(
         debugShowCheckedModeBanner: false,
         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>(
             future: AuthLocalDataSource().isAuthDataExists(),
             builder: (context, snapshot) {

lib/presentation/home/dialog/discount_dialog.dart

@@ -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_bloc/flutter_bloc.dart';
 import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
@@ -25,29 +27,38 @@ class _DiscountDialogState extends State<DiscountDialog> {
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      title: Stack(
+      backgroundColor: AppColors.white,
-        alignment: Alignment.center,
+      title: Row(
         children: [
-          const Text(
+          Expanded(
-            'DISKON',
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Pilih Diskon',
                   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: () {
               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,
                 mainAxisSize: MainAxisSize.min,
                 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(() {
           discountIdSelected = discount.id!;
           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),
+          ],
+        ),
       ),
     );
   }

lib/presentation/home/dialog/service_dialog.dart

@@ -1,3 +1,4 @@
+import 'package:enaklo_pos/core/components/spaces.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
@@ -11,27 +12,38 @@ class ServiceDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      title: Stack(
+      backgroundColor: AppColors.white,
-        alignment: Alignment.center,
+      title: Row(
         children: [
-          const Text(
+          Expanded(
-            'LAYANAN',
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Pilih Layanan',
                   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(
                 initial: () => const SizedBox(),
                 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(),
               );
             },
@@ -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,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
 }

lib/presentation/home/pages/home_page.dart

@@ -1,4 +1,5 @@
 // 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_bloc/flutter_bloc.dart';
 
@@ -7,10 +8,7 @@ import 'package:enaklo_pos/core/extensions/int_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/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/tax_dialog.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/presentation/setting/bloc/sync_product/sync_product_bloc.dart';
 import 'package:enaklo_pos/data/models/response/product_response_model.dart';
@@ -20,8 +18,6 @@ import '../../../core/components/buttons.dart';
 import '../../../core/components/spaces.dart';
 import '../../../core/constants/colors.dart';
 import '../bloc/checkout/checkout_bloc.dart';
-import '../dialog/service_dialog.dart';
-import '../widgets/column_button.dart';
 import '../widgets/custom_tab_bar.dart';
 import '../widgets/home_title.dart';
 import '../widgets/order_menu.dart';
@@ -31,10 +27,10 @@ class HomePage extends StatefulWidget {
   final bool isTable;
   final TableModel? table;
   const HomePage({
-    Key? key,
+    super.key,
     required this.isTable,
     this.table,
-  }) : super(key: key);
+  });
 
   @override
   State<HomePage> createState() => _HomePageState();
@@ -83,9 +79,12 @@ class _HomePageState extends State<HomePage> {
     }).toList();
   }
 
-  List<Product> _filterProductsByCategory(List<Product> products, int categoryId) {
+  List<Product> _filterProductsByCategory(
+      List<Product> products, int categoryId) {
     final filteredBySearch = _filterProducts(products);
-    return filteredBySearch.where((element) => element.category?.id == categoryId).toList();
+    return filteredBySearch
+        .where((element) => element.category?.id == categoryId)
+        .toList();
   }
 
   @override
@@ -93,6 +92,7 @@ class _HomePageState extends State<HomePage> {
     return Hero(
       tag: 'confirmation_screen',
       child: Scaffold(
+        backgroundColor: AppColors.white,
         body: BlocListener<SyncProductBloc, SyncProductState>(
           listener: (context, state) {
             state.maybeWhen(
@@ -123,9 +123,6 @@ class _HomePageState extends State<HomePage> {
                 flex: 3,
                 child: Align(
                   alignment: AlignmentDirectional.topStart,
-                  child: Padding(
-                    padding: const EdgeInsets.all(16.0),
-                    child: SingleChildScrollView(
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.start,
                     children: [
@@ -137,17 +134,16 @@ class _HomePageState extends State<HomePage> {
                           });
                         },
                       ),
-                          const SizedBox(height: 24),
                       BlocBuilder<LocalProductBloc, LocalProductState>(
                         builder: (context, state) {
-                              return CustomTabBar(
+                          return Expanded(
+                            child: CustomTabBarV2(
                               tabTitles: const [
                                 'Semua',
                                 'Makanan',
                                 'Minuman',
                                 'Paket'
                               ],
-                                initialTabIndex: 0,
                               tabViews: [
                                 // All Products Tab
                                 SizedBox(
@@ -160,23 +156,23 @@ class _HomePageState extends State<HomePage> {
                                       child: CircularProgressIndicator(),
                                     );
                                   }, loaded: (products) {
-                                      final filteredProducts = _filterProducts(products);
+                                    final filteredProducts =
+                                        _filterProducts(products);
                                     if (filteredProducts.isEmpty) {
                                       return const Center(
                                         child: Text('No Items Found'),
                                       );
                                     }
                                     return GridView.builder(
-                                        shrinkWrap: true,
                                       itemCount: filteredProducts.length,
-                                        physics:
+                                      padding: const EdgeInsets.all(16),
-                                            const NeverScrollableScrollPhysics(),
                                       gridDelegate:
-                                            const SliverGridDelegateWithFixedCrossAxisCount(
+                                          SliverGridDelegateWithMaxCrossAxisExtent(
+                                        maxCrossAxisExtent:
+                                            200, // Lebar maksimal tiap item (bisa kamu ubah)
+                                        mainAxisSpacing: 30,
+                                        crossAxisSpacing: 30,
                                         childAspectRatio: 0.85,
-                                          crossAxisCount: 3,
-                                          crossAxisSpacing: 30.0,
-                                          mainAxisSpacing: 30.0,
                                       ),
                                       itemBuilder: (context, index) =>
                                           ProductCard(
@@ -202,20 +198,20 @@ class _HomePageState extends State<HomePage> {
                                         child: Text('No Items'),
                                       );
                                     }
-                                      final filteredProducts = _filterProductsByCategory(products, 1);
+                                    final filteredProducts =
+                                        _filterProductsByCategory(products, 1);
                                     return filteredProducts.isEmpty
                                         ? const _IsEmpty()
                                         : GridView.builder(
-                                              shrinkWrap: true,
                                             itemCount: filteredProducts.length,
-                                              physics:
+                                            padding: const EdgeInsets.all(16),
-                                                  const NeverScrollableScrollPhysics(),
                                             gridDelegate:
-                                                  const SliverGridDelegateWithFixedCrossAxisCount(
+                                                SliverGridDelegateWithMaxCrossAxisExtent(
+                                              maxCrossAxisExtent:
+                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
+                                              mainAxisSpacing: 30,
+                                              crossAxisSpacing: 30,
                                               childAspectRatio: 0.85,
-                                                crossAxisCount: 3,
-                                                crossAxisSpacing: 30.0,
-                                                mainAxisSpacing: 30.0,
                                             ),
                                             itemBuilder: (context, index) =>
                                                 ProductCard(
@@ -241,20 +237,20 @@ class _HomePageState extends State<HomePage> {
                                         child: Text('No Items'),
                                       );
                                     }
-                                      final filteredProducts = _filterProductsByCategory(products, 2);
+                                    final filteredProducts =
+                                        _filterProductsByCategory(products, 2);
                                     return filteredProducts.isEmpty
                                         ? const _IsEmpty()
                                         : GridView.builder(
-                                              shrinkWrap: true,
                                             itemCount: filteredProducts.length,
-                                              physics:
+                                            padding: const EdgeInsets.all(16),
-                                                  const NeverScrollableScrollPhysics(),
                                             gridDelegate:
-                                                  const SliverGridDelegateWithFixedCrossAxisCount(
+                                                SliverGridDelegateWithMaxCrossAxisExtent(
+                                              maxCrossAxisExtent:
+                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
+                                              mainAxisSpacing: 30,
+                                              crossAxisSpacing: 30,
                                               childAspectRatio: 0.85,
-                                                crossAxisCount: 3,
-                                                crossAxisSpacing: 30.0,
-                                                mainAxisSpacing: 30.0,
                                             ),
                                             itemBuilder: (context, index) {
                                               return ProductCard(
@@ -281,20 +277,20 @@ class _HomePageState extends State<HomePage> {
                                         child: Text('No Items'),
                                       );
                                     }
-                                      final filteredProducts = _filterProductsByCategory(products, 3);
+                                    final filteredProducts =
+                                        _filterProductsByCategory(products, 3);
                                     return filteredProducts.isEmpty
                                         ? const _IsEmpty()
                                         : GridView.builder(
-                                              shrinkWrap: true,
                                             itemCount: filteredProducts.length,
-                                              physics:
+                                            padding: const EdgeInsets.all(16),
-                                                  const NeverScrollableScrollPhysics(),
                                             gridDelegate:
-                                                  const SliverGridDelegateWithFixedCrossAxisCount(
+                                                SliverGridDelegateWithMaxCrossAxisExtent(
+                                              maxCrossAxisExtent:
+                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
+                                              mainAxisSpacing: 30,
+                                              crossAxisSpacing: 30,
                                               childAspectRatio: 0.85,
-                                                crossAxisCount: 3,
-                                                crossAxisSpacing: 30.0,
-                                                mainAxisSpacing: 30.0,
                                             ),
                                             itemBuilder: (context, index) {
                                               return ProductCard(
@@ -306,6 +302,7 @@ class _HomePageState extends State<HomePage> {
                                   }),
                                 ),
                               ],
+                            ),
                           );
                         },
                       ),
@@ -313,64 +310,25 @@ class _HomePageState extends State<HomePage> {
                   ),
                 ),
               ),
-                ),
-              ),
               Expanded(
                 flex: 2,
                 child: Align(
                   alignment: Alignment.topCenter,
-                  child: Stack(
+                  child: Material(
-                    children: [
+                    color: Colors.white,
-                      SingleChildScrollView(
-                        padding: const EdgeInsets.all(24.0),
                     child: Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                            GestureDetector(
+                        HomeRightTitle(
-                              onTap: () {
+                          table: widget.table,
-                                if (widget.table == null) {
-                                  context.push(DashboardPage(
-                                    index: 1,
-                                  ));
-                                }
-                              },
-                              child: Text(
-                                'Meja: ${widget.table == null ? 'Belum Pilih Meja' : '${widget.table!.id}'}',
-                                style: TextStyle(
-                                  color: AppColors.primary,
-                                  fontSize: 20,
-                                  fontWeight: FontWeight.w600,
                         ),
-                              ),
+                        Padding(
-                            ),
+                          padding: const EdgeInsets.all(16.0)
-                            const SpaceHeight(8.0),
+                              .copyWith(bottom: 0, top: 27),
-                            Button.filled(
+                          child: Column(
-                              width: 180.0,
+                            children: [
-                              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,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceBetween,
                                 children: [
                                   Text(
                                     'Item',
@@ -408,7 +366,16 @@ class _HomePageState extends State<HomePage> {
                               ),
                               const SpaceHeight(8),
                               const Divider(),
-                            const SpaceHeight(8),
+                            ],
+                          ),
+                        ),
+                        Expanded(
+                          child: SingleChildScrollView(
+                            padding:
+                                const EdgeInsets.all(16.0).copyWith(top: 0),
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
                                 BlocBuilder<CheckoutBloc, CheckoutState>(
                                   builder: (context, state) {
                                     return state.maybeWhen(
@@ -423,7 +390,8 @@ class _HomePageState extends State<HomePage> {
                                           serviceCharge,
                                           totalQuantity,
                                           totalPrice,
-                                      draftName, orderType) {
+                                          draftName,
+                                          orderType) {
                                         if (products.isEmpty) {
                                           return const Center(
                                             child: Text('No Items'),
@@ -444,45 +412,26 @@ class _HomePageState extends State<HomePage> {
                                   },
                                 ),
                                 const SpaceHeight(8.0),
-                            Row(
-                              mainAxisAlignment: 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),
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(16.0).copyWith(top: 0),
+                          child: Column(
+                            children: [
                               const Divider(),
-                            const SpaceHeight(8.0),
+                              const SpaceHeight(16.0),
                               Row(
-                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceBetween,
                                 children: [
                                   const Text(
-                                  'Pajak PB1',
+                                    'Pajak',
-                                  style: TextStyle(color: AppColors.grey),
+                                    style: TextStyle(
+                                      color: AppColors.black,
+                                      fontWeight: FontWeight.bold,
+                                    ),
                                   ),
                                   BlocBuilder<CheckoutBloc, CheckoutState>(
                                     builder: (context, state) {
@@ -496,7 +445,8 @@ class _HomePageState extends State<HomePage> {
                                               serviceCharge,
                                               totalQuantity,
                                               totalPrice,
-                                            draftName, orderType) {
+                                              draftName,
+                                              orderType) {
                                             if (products.isEmpty) {
                                               return 0;
                                             }
@@ -513,89 +463,17 @@ class _HomePageState extends State<HomePage> {
                                   ),
                                 ],
                               ),
-                            const SpaceHeight(8.0),
+                              const SpaceHeight(16.0),
                               Row(
-                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                mainAxisAlignment:
-                              children: [
+                                    MainAxisAlignment.spaceBetween,
-                                const Text(
-                                  'Layanan',
-                                  style: TextStyle(color: AppColors.grey),
-                                ),
-                                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.spaceBetween,
-                              children: [
-                                const Text(
-                                  'Diskon',
-                                  style: TextStyle(color: AppColors.grey),
-                                ),
-                                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(8.0),
-                            Row(
-                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                 children: [
                                   const Text(
                                     'Sub total',
                                     style: TextStyle(
-                                      color: AppColors.grey,
+                                      color: AppColors.black,
                                       fontWeight: FontWeight.bold,
-                                      fontSize: 16),
+                                    ),
                                   ),
                                   BlocBuilder<CheckoutBloc, CheckoutState>(
                                     builder: (context, state) {
@@ -609,7 +487,8 @@ class _HomePageState extends State<HomePage> {
                                               serviceCharge,
                                               totalQuantity,
                                               totalPrice,
-                                            draftName, orderType) {
+                                              draftName,
+                                              orderType) {
                                             if (products.isEmpty) {
                                               return 0;
                                             }
@@ -626,25 +505,20 @@ class _HomePageState extends State<HomePage> {
                                         price.currencyFormatRp,
                                         style: const TextStyle(
                                           color: AppColors.primary,
-                                          fontWeight: FontWeight.bold,
+                                          fontWeight: FontWeight.w900,
-                                          fontSize: 16),
+                                        ),
                                       );
                                     },
                                   ),
                                 ],
                               ),
-                            const SpaceHeight(100.0),
+                              SpaceHeight(16.0),
-                          ],
-                        ),
-                      ),
                               Align(
                                 alignment: Alignment.bottomCenter,
-                        child: ColoredBox(
+                                child: Expanded(
-                          color: AppColors.white,
-                          child: Padding(
-                            padding: const EdgeInsets.symmetric(
-                                horizontal: 24.0, vertical: 16.0),
                                   child: Button.filled(
+                                    borderRadius: 12,
+                                    elevation: 1,
                                     onPressed: () {
                                       context.push(ConfirmPaymentPage(
                                         isTable: widget.isTable,
@@ -655,11 +529,14 @@ class _HomePageState extends State<HomePage> {
                                   ),
                                 ),
                               ),
+                            ],
+                          ),
                         ),
                       ],
                     ),
                   ),
                 ),
+              ),
             ],
           ),
         ),

lib/presentation/home/widgets/custom_tab_bar.dart

@@ -2,8 +2,6 @@ import 'package:flutter/material.dart';
 
 import '../../../core/constants/colors.dart';
 
-
-
 class CustomTabBar extends StatefulWidget {
   final List<String> tabTitles;
   final int initialTabIndex;
@@ -34,7 +32,12 @@ class _CustomTabBarState extends State<CustomTabBar> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        Row(
+        Container(
+          padding: EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: Colors.white,
+          ),
+          child: Row(
             children: List.generate(
               widget.tabTitles.length,
               (index) => GestureDetector(
@@ -44,22 +47,21 @@ class _CustomTabBarState extends State<CustomTabBar> {
                   });
                 },
                 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(
-                  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(
                     widget.tabTitles[index],
-                  style: const TextStyle(
+                    style: TextStyle(
-                    color: AppColors.primary,
+                      color: _selectedIndex == index
+                          ? Colors.white
+                          : AppColors.primary,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
@@ -67,6 +69,7 @@ class _CustomTabBarState extends State<CustomTabBar> {
               ),
             ),
           ),
+        ),
         Padding(
           padding: const EdgeInsets.symmetric(vertical: 18.0),
           child: widget.tabViews[_selectedIndex],
@@ -75,3 +78,59 @@ 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: AppColors.primary,
+                labelStyle: TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+                dividerColor: AppColors.primary,
+                unselectedLabelColor: AppColors.primary,
+                indicatorSize: TabBarIndicatorSize.label,
+                indicatorWeight: 4,
+                indicatorColor: AppColors.primary,
+                tabs: tabTitles
+                    .map((title) => Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 16),
+                          child: Tab(text: title),
+                        ))
+                    .toList(),
+              ),
+            ),
+          ),
+          Expanded(
+            // ✅ ini bagian penting
+            child: TabBarView(
+              children: tabViews,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/home/widgets/home_right_title.dart

@@ -0,0 +1,116 @@
+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: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            children: [
+              Expanded(
+                child: Button.filled(
+                  width: 180.0,
+                  height: 40,
+                  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',
+                ),
+              ),
+            ],
+          ),
+          Row(
+            children: [
+              Expanded(
+                child: Button.filled(
+                  width: 180.0,
+                  height: 40,
+                  elevation: 0,
+                  onPressed: () {},
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  icon: Icon(
+                    Icons.dinner_dining_outlined,
+                    color: Colors.white,
+                    size: 24,
+                  ),
+                  label: 'Dine In',
+                ),
+              ),
+              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}',
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/home/widgets/home_title.dart

@@ -1,5 +1,5 @@
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
 import 'package:flutter/material.dart';
-import 'package:enaklo_pos/core/extensions/date_time_ext.dart';
 
 import '../../../core/components/search_input.dart';
 import '../../../core/constants/colors.dart';
@@ -16,30 +16,23 @@ class HomeTitle extends StatelessWidget {
 
   @override
   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.white,
+      ),
+      child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: [
-        Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           const Text(
-              'Enaklo POS',
+            'DEFAULT OUTLET',
             style: TextStyle(
               color: AppColors.primary,
-                fontSize: 22,
+              fontSize: 28,
               fontWeight: FontWeight.w600,
             ),
           ),
-            const SizedBox(height: 4.0),
-            Text(
-              DateTime.now().toFormattedDate(),
-              style: const TextStyle(
-                color: AppColors.subtitle,
-                fontSize: 16,
-              ),
-            ),
-          ],
-        ),
           SizedBox(
             width: 300.0,
             child: SearchInput(
@@ -49,6 +42,7 @@ class HomeTitle extends StatelessWidget {
             ),
           ),
         ],
+      ),
     );
   }
 }

lib/presentation/home/widgets/item_notes_dialog.dart

@@ -1,12 +1,11 @@
+import 'package:enaklo_pos/core/constants/colors.dart';
 import 'package:flutter/material.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/models/product_quantity.dart';
-import 'package:enaklo_pos/data/models/response/product_response_model.dart';
 
 import '../../../core/components/buttons.dart';
 import '../../../core/components/spaces.dart';
-import '../../../core/constants/colors.dart';
 
 class ItemNotesDialog extends StatefulWidget {
   final ProductQuantity item;
@@ -38,24 +37,52 @@ class _ItemNotesDialogState extends State<ItemNotesDialog> {
   @override
   Widget build(BuildContext context) {
     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(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text(
-            widget.item.product.name ?? 'Product',
-            style: const TextStyle(
-              fontSize: 16,
-              fontWeight: FontWeight.w600,
-            ),
-          ),
-          const SpaceHeight(16.0),
           TextField(
             controller: notesController,
             maxLines: 3,
             decoration: const InputDecoration(
-              hintText: 'Enter notes for this item...',
+              hintText: 'Masukkan catatan untuk item ini',
               border: OutlineInputBorder(),
             ),
           ),

lib/presentation/home/widgets/order_menu.dart

@@ -6,15 +6,42 @@ import 'package:enaklo_pos/core/extensions/int_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/models/product_quantity.dart';
-import 'package:enaklo_pos/presentation/home/widgets/item_notes_dialog.dart';
 
 import '../../../core/components/spaces.dart';
 import '../../../core/constants/colors.dart';
 
-class OrderMenu extends StatelessWidget {
+class OrderMenu extends StatefulWidget {
   final ProductQuantity data;
   const OrderMenu({super.key, required this.data});
 
+  @override
+  State<OrderMenu> createState() => _OrderMenuState();
+}
+
+class _OrderMenuState extends State<OrderMenu> {
+  final _controller = TextEditingController();
+
+  @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
   Widget build(BuildContext context) {
     return Column(
@@ -33,65 +60,34 @@ class OrderMenu extends StatelessWidget {
                       //   color: AppColors.primary,
                       // ),
                       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,
                     height: 50.0,
                     fit: BoxFit.cover,
+                    errorWidget: (context, url, error) =>
+                        const Icon(Icons.error),
                   ),
                 ),
                 title: Row(
                   children: [
                     Expanded(
-                      child: Text(data.product.name ?? "-",
+                      child: Text(widget.data.product.name ?? "-",
-                          maxLines: 2,
+                          maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                           style: const TextStyle(
                             fontSize: 14,
                             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(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Text(data.product.price!.toIntegerFromText.currencyFormatRp),
+                    Text(widget.data.product.price!.toIntegerFromText
-                    if (data.notes.isNotEmpty) ...[
+                        .currencyFormatRp),
-                      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,
-                          ),
-                        ),
-                      ),
-                    ],
                   ],
                 ),
               ),
@@ -102,7 +98,7 @@ class OrderMenu extends StatelessWidget {
                   onTap: () {
                     context
                         .read<CheckoutBloc>()
-                        .add(CheckoutEvent.removeItem(data.product));
+                        .add(CheckoutEvent.removeItem(widget.data.product));
                   },
                   child: Container(
                     width: 30,
@@ -118,14 +114,14 @@ class OrderMenu extends StatelessWidget {
                   width: 30.0,
                   child: Center(
                       child: Text(
-                    data.quantity.toString(),
+                    widget.data.quantity.toString(),
                   )),
                 ),
                 GestureDetector(
                   onTap: () {
                     context
                         .read<CheckoutBloc>()
-                        .add(CheckoutEvent.addItem(data.product));
+                        .add(CheckoutEvent.addItem(widget.data.product));
                   },
                   child: Container(
                     width: 30,
@@ -143,7 +139,8 @@ class OrderMenu extends StatelessWidget {
             SizedBox(
               width: 80.0,
               child: Text(
-                (data.product.price!.toIntegerFromText * data.quantity)
+                (widget.data.product.price!.toIntegerFromText *
+                        widget.data.quantity)
                     .currencyFormatRp,
                 textAlign: TextAlign.right,
                 style: const TextStyle(
@@ -154,6 +151,40 @@ class OrderMenu 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,
+                ),
+              ),
+            ],
+          ),
+        )
       ],
     );
   }

lib/presentation/home/widgets/product_card.dart

@@ -7,7 +7,6 @@ import 'package:enaklo_pos/core/extensions/string_ext.dart';
 import 'package:enaklo_pos/data/models/response/product_response_model.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/constants/colors.dart';
 
@@ -29,10 +28,11 @@ class ProductCard extends StatelessWidget {
       },
       child: Container(
         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),
+          border: Border.all(
+            color: AppColors.disabled,
           ),
         ),
         child: Stack(
@@ -50,19 +50,25 @@ class ProductCard extends StatelessWidget {
                   ),
                   child: ClipRRect(
                     borderRadius: BorderRadius.all(Radius.circular(40.0)),
-                    child:
+                    child: CachedNetworkImage(
-                        // Icon(
-                        //   Icons.fastfood,
-                        //   size: 40,
-                        //   color: AppColors.primary,
-                        // ),
-                        CachedNetworkImage(
                       imageUrl: data.image!.contains('http')
                           ? data.image!
                           : '${Variables.baseUrl}/${data.image}',
+                      fit: BoxFit.cover,
                       width: 60,
                       height: 60,
-                      fit: BoxFit.cover,
+                      errorWidget: (context, url, error) => Container(
+                        width: 60,
+                        height: 60,
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          color: AppColors.disabled.withOpacity(0.4),
+                        ),
+                        child: const Icon(
+                          Icons.image_not_supported,
+                          color: AppColors.grey,
+                        ),
+                      ),
                     ),
                   ),
                 ),
@@ -77,19 +83,22 @@ class ProductCard extends StatelessWidget {
                   overflow: TextOverflow.ellipsis,
                 ),
                 const Spacer(),
-                Row(
+                Align(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  alignment: Alignment.center,
-                  children: [
-                    Flexible(
                   child: Text(
                     data.category?.name ?? '-',
                     style: const TextStyle(
+                      fontSize: 14,
                       color: AppColors.grey,
-                          fontSize: 12,
+                      fontWeight: FontWeight.w500,
+                    ),
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
                   ),
                 ),
-                    ),
+                const Spacer(),
-                    Flexible(
+                Align(
+                  alignment: Alignment.center,
                   child: Text(
                     data.price!.toIntegerFromText.currencyFormatRp,
                     style: const TextStyle(
@@ -98,8 +107,6 @@ class ProductCard extends StatelessWidget {
                     ),
                   ),
                 ),
-                  ],
-                ),
                 const Spacer(),
               ],
             ),
@@ -149,34 +156,8 @@ class ProductCard 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(),
-                            ),
-                          );
                   },
                 );
               },

lib/presentation/setting/pages/product_page.dart

@@ -1,3 +1,5 @@
+import 'package:enaklo_pos/core/components/buttons.dart';
+import 'package:enaklo_pos/core/constants/colors.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:enaklo_pos/data/datasources/product_remote_datasource.dart';
@@ -27,40 +29,22 @@ class _ProductPageState extends State<ProductPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: ListView(
+      backgroundColor: AppColors.background,
-        padding: const EdgeInsets.all(24.0),
+      body: Column(
         children: [
-          const SettingsTitle('Manage Products'),
+          SettingsTitle(
-          const SizedBox(height: 24),
+            'Kelola Produk',
-          BlocBuilder<GetProductsBloc, GetProductsState>(
+            subtitle: 'Kelola produk anda',
-            builder: (context, state) {
+            actionWidget: [
-              return state.maybeWhen(orElse: () {
+              Button.outlined(
-                return const Center(
-                  child: CircularProgressIndicator(),
-                );
-              }, success: (products) {
-                return GridView.builder(
-                  padding: EdgeInsets.zero,
-                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                    childAspectRatio: 1,
-                    crossAxisCount: 3,
-                    mainAxisSpacing: 12,
-                    crossAxisSpacing: 12,
-                  ),
-                  itemCount: products.length + 1,
-                  shrinkWrap: true,
-                  physics: const ScrollPhysics(),
-                  itemBuilder: (BuildContext context, int index) {
-                    if (index == 0) {
-                      return AddData(
-                        title: 'Add New Product',
                 onPressed: () {
                   showDialog(
                     context: context,
                     builder: (context) => MultiBlocProvider(
                       providers: [
                         BlocProvider(
-                                  create: (context) => AddProductBloc(ProductRemoteDatasource()),
+                          create: (context) =>
+                              AddProductBloc(ProductRemoteDatasource()),
                         ),
                         BlocProvider.value(
                           value: context.read<SyncProductBloc>(),
@@ -73,9 +57,30 @@ class _ProductPageState extends State<ProductPage> {
                     ),
                   );
                 },
+                label: "Tambah Produk",
+                icon: Icon(Icons.add, color: AppColors.primary),
+              )
+            ],
+          ),
+          Expanded(
+            child: BlocBuilder<GetProductsBloc, GetProductsState>(
+              builder: (context, state) {
+                return state.maybeWhen(orElse: () {
+                  return const Center(
+                    child: CircularProgressIndicator(),
                   );
-                    }
+                }, success: (products) {
-                    final item = products[index - 1];
+                  return GridView.builder(
+                    padding: EdgeInsets.all(16),
+                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                      maxCrossAxisExtent: 200,
+                      mainAxisSpacing: 30,
+                      crossAxisSpacing: 30,
+                      childAspectRatio: 0.85,
+                    ),
+                    itemCount: products.length,
+                    itemBuilder: (BuildContext context, int index) {
+                      final item = products[index];
                       return MenuProductItem(
                         data: item,
                         onTapEdit: () {
@@ -84,7 +89,8 @@ class _ProductPageState extends State<ProductPage> {
                             builder: (context) => MultiBlocProvider(
                               providers: [
                                 BlocProvider(
-                                create: (context) => UpdateProductBloc(ProductRemoteDatasource()),
+                                  create: (context) => UpdateProductBloc(
+                                      ProductRemoteDatasource()),
                                 ),
                                 BlocProvider.value(
                                   value: context.read<SyncProductBloc>(),
@@ -103,6 +109,7 @@ class _ProductPageState extends State<ProductPage> {
                 });
               },
             ),
+          ),
         ],
       ),
       // floatingActionButton: FloatingActionButton(

lib/presentation/setting/pages/setting_tile.dart

@@ -0,0 +1,72 @@
+import 'package:enaklo_pos/core/components/spaces.dart';
+import 'package:enaklo_pos/core/constants/colors.dart';
+import 'package:flutter/material.dart';
+
+class SettingTile extends StatelessWidget {
+  final int index;
+  final int currentIndex;
+  final String title;
+  final String subtitle;
+  final IconData icon;
+  final Function() onTap;
+
+  const SettingTile({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+    required this.onTap,
+    required this.index,
+    required this.currentIndex,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.all(12.0),
+        decoration: BoxDecoration(
+          border: Border(
+            right: BorderSide(
+              color: currentIndex == index
+                  ? AppColors.primary
+                  : Colors.transparent,
+              width: 4.0,
+            ),
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(
+              icon,
+              size: 24.0,
+              color: currentIndex == index ? AppColors.primary : AppColors.grey,
+            ),
+            const SpaceWidth(12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    title,
+                    style: const TextStyle(
+                      fontSize: 16.0,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const SizedBox(height: 4.0),
+                  Text(
+                    subtitle,
+                    style:
+                        const TextStyle(fontSize: 14.0, color: AppColors.grey),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/setting/pages/settings_page.dart

@@ -1,15 +1,14 @@
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
+import 'package:enaklo_pos/presentation/setting/pages/setting_tile.dart';
 import 'package:flutter/material.dart';
 import 'package:enaklo_pos/data/datasources/auth_local_datasource.dart';
 import 'package:enaklo_pos/presentation/sales/pages/sales_page.dart';
 import 'package:enaklo_pos/presentation/setting/pages/discount_page.dart';
-import 'package:enaklo_pos/presentation/setting/pages/manage_printer_page.dart';
 import 'package:enaklo_pos/presentation/setting/pages/product_page.dart';
 import 'package:enaklo_pos/presentation/setting/pages/server_key_page.dart';
 import 'package:enaklo_pos/presentation/setting/pages/sync_data_page.dart';
 import 'package:enaklo_pos/presentation/setting/pages/tax_page.dart';
 
-import '../../../core/assets/assets.gen.dart';
-import '../../../core/components/spaces.dart';
 import '../../../core/constants/colors.dart';
 
 class SettingsPage extends StatefulWidget {
@@ -45,6 +44,7 @@ class _SettingsPageState extends State<SettingsPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: AppColors.background,
       body: Row(
         children: [
           // LEFT CONTENT
@@ -52,106 +52,121 @@ class _SettingsPageState extends State<SettingsPage> {
             flex: 2,
             child: Align(
               alignment: Alignment.topCenter,
-              child: ListView(
+              child: Material(
-                padding: const EdgeInsets.all(16.0),
+                color: AppColors.white,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 16.0,
+                        vertical: 12.0,
+                      ),
+                      width: double.infinity,
+                      height: context.deviceHeight * 0.1,
+                      decoration: const BoxDecoration(
+                        color: AppColors.white,
+                        border: Border(
+                          bottom: BorderSide(
+                            color: AppColors.background,
+                            width: 1.0,
+                          ),
+                        ),
+                      ),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
                           const Text(
-                    'Settings',
+                            'Pengaturan',
                             style: TextStyle(
-                      color: AppColors.primary,
+                              color: AppColors.black,
-                      fontSize: 28,
+                              fontSize: 20,
                               fontWeight: FontWeight.w600,
                             ),
                           ),
-                  const SpaceHeight(16.0),
+                          Text(
+                            'Kelola pengaturan aplikasi',
+                            style: TextStyle(
+                              color: AppColors.grey,
+                              fontSize: 14,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Expanded(
+                      child: SingleChildScrollView(
+                        child: Column(
+                          children: [
                             role != null && role! != 'admin'
                                 ? const SizedBox()
-                      : ListTile(
+                                : SettingTile(
-                          contentPadding: const EdgeInsets.all(12.0),
+                                    index: 0,
-                          leading: Assets.icons.kelolaProduk.svg(),
+                                    currentIndex: currentIndex,
-                          title: const Text('Manage Products'),
+                                    title: 'Kelola Produk',
-                          subtitle: const Text('Manage products in your store'),
+                                    subtitle: 'Kelola produk anda',
-                          textColor: AppColors.primary,
+                                    icon: Icons.inventory_outlined,
-                          tileColor: currentIndex == 0
-                              ? AppColors.blueLight
-                              : Colors.transparent,
                                     onTap: () => indexValue(0),
                                   ),
-                  ListTile(
+                            SettingTile(
-                    contentPadding: const EdgeInsets.all(12.0),
+                              index: 1,
-                    leading: Assets.icons.kelolaDiskon.svg(),
+                              currentIndex: currentIndex,
-                    title: const Text('Kelola Diskon'),
+                              title: 'Kelola Diskon',
-                    subtitle: const Text('Kelola Diskon Pelanggan'),
+                              subtitle: 'Kelola diskon pelanggan',
-                    textColor: AppColors.primary,
+                              icon: Icons.discount_outlined,
-                    tileColor: currentIndex == 1
-                        ? AppColors.blueLight
-                        : Colors.transparent,
                               onTap: () => indexValue(1),
                             ),
-                  ListTile(
+                            SettingTile(
-                    contentPadding: const EdgeInsets.all(12.0),
+                              index: 2,
-                    leading: Assets.icons.dashboard.svg(),
+                              currentIndex: currentIndex,
-                    title: const Text('History Transaksi'),
+                              title: 'Riwayat Transaksi',
-                    subtitle: const Text('Lihat history transaksi'),
+                              subtitle: 'Lihat riwayat transaksi',
-                    textColor: AppColors.primary,
+                              icon: Icons.receipt_long_outlined,
-                    tileColor: currentIndex == 2
-                        ? AppColors.blueLight
-                        : Colors.transparent,
                               onTap: () => indexValue(2),
                             ),
-                  ListTile(
+                            SettingTile(
-                    contentPadding: const EdgeInsets.all(12.0),
+                              index: 3,
-                    leading: Assets.icons.kelolaPajak.svg(),
+                              currentIndex: currentIndex,
-                    title: const Text('Perhitungan Biaya'),
+                              title: 'Perhitungan Biaya',
-                    subtitle: const Text('Kelola biaya diluar biaya modal'),
+                              subtitle: 'Kelola biaya diluar biaya modal',
-                    textColor: AppColors.primary,
+                              icon: Icons.attach_money_outlined,
-                    tileColor: currentIndex == 3
-                        ? AppColors.blueLight
-                        : Colors.transparent,
                               onTap: () => indexValue(3),
                             ),
-                  ListTile(
+                            SettingTile(
-                    contentPadding: const EdgeInsets.all(12.0),
+                              index: 4,
-                    leading: Assets.icons.kelolaPajak.svg(),
+                              currentIndex: currentIndex,
-                    title: const Text('Sync Data'),
+                              title: 'Sinkronisasi Data',
-                    subtitle:
+                              subtitle: 'Sinkronisasi data dari dan ke server',
-                        const Text('Sinkronisasi data dari dan ke server'),
+                              icon: Icons.sync_outlined,
-                    textColor: AppColors.primary,
-                    tileColor: currentIndex == 4
-                        ? AppColors.blueLight
-                        : Colors.transparent,
                               onTap: () => indexValue(4),
                             ),
-                  ListTile(
+                            SettingTile(
-                    contentPadding: const EdgeInsets.all(12.0),
+                              index: 6,
-                    leading: Image.asset(Assets.images.manageQr.path,
+                              currentIndex: currentIndex,
-                        fit: BoxFit.contain),
+                              title: 'Qr Key Setting',
-                    title: const Text('QR Key Setting'),
+                              subtitle: 'Kelola QR Key',
-                    subtitle: const Text('QR Key Configuration'),
+                              icon: Icons.qr_code_2_outlined,
-                    textColor: AppColors.primary,
-                    tileColor: currentIndex == 6
-                        ? AppColors.blueLight
-                        : Colors.transparent,
                               onTap: () => indexValue(6),
                             ),
                           ],
                         ),
                       ),
                     ),
+                  ],
+                ),
+              ),
+            ),
+          ),
 
           // RIGHT CONTENT
           Expanded(
             flex: 4,
             child: Align(
               alignment: AlignmentDirectional.topStart,
-              child: Padding(
-                padding: const EdgeInsets.all(16.0),
               child: IndexedStack(
                 index: currentIndex,
                 children: [
-                    role != null && role! != 'admin'
+                  role != null && role! != 'admin' ? SizedBox() : ProductPage(),
-                        ? SizedBox()
-                        : ProductPage(),
                   DiscountPage(),
                   SalesPage(),
                   TaxPage(),
@@ -166,7 +181,6 @@ class _SettingsPageState extends State<SettingsPage> {
               ),
             ),
           ),
-          ),
         ],
       ),
     );

lib/presentation/setting/widgets/menu_product_item.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: public_member_api_docs, sort_constructors_first
 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:enaklo_pos/data/models/response/product_response_model.dart';
 
@@ -11,7 +12,221 @@ import '../../../core/constants/variables.dart';
 class MenuProductItem extends StatelessWidget {
   final Product data;
   final Function() onTapEdit;
-  const MenuProductItem({
+  const MenuProductItem(
+      {super.key, required this.data, required this.onTapEdit});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.zero,
+      decoration: BoxDecoration(
+        color: AppColors.white,
+        borderRadius: BorderRadius.circular(12.0),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(8.0).copyWith(bottom: 0),
+            child: Stack(
+              children: [
+                AspectRatio(
+                  aspectRatio: 1.2,
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(12),
+                    child: CachedNetworkImage(
+                      imageUrl: data.image!.contains('http')
+                          ? data.image!
+                          : '${Variables.baseUrl}/${data.image}',
+                      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,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                Positioned(
+                  top: 8,
+                  right: 8,
+                  child: Container(
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                    decoration: BoxDecoration(
+                      color: AppColors.primary,
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child: Text(
+                      data.category?.name ?? "",
+                      style: const TextStyle(
+                        color: AppColors.white,
+                        fontSize: 10,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    "${data.name}",
+                    style: const TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w700,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Row(
+            children: [
+              Expanded(
+                child: GestureDetector(
+                  onTap: () {
+                    showDialog(
+                      context: context,
+                      builder: (context) {
+                        //container for product detail
+                        return AlertDialog(
+                          backgroundColor: AppColors.white,
+                          contentPadding: const EdgeInsets.all(16.0),
+                          content: Column(
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              Row(
+                                mainAxisAlignment:
+                                    MainAxisAlignment.spaceBetween,
+                                children: [
+                                  Text(
+                                    data.name!,
+                                    style: const TextStyle(
+                                      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,
+                                ),
+                              ),
+                              const SpaceHeight(10.0),
+                              Text(
+                                data.category?.name ?? '-',
+                                style: const TextStyle(
+                                  fontSize: 12,
+                                  color: Colors.grey,
+                                ),
+                              ),
+                              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(
+                    padding: const EdgeInsets.symmetric(vertical: 4),
+                    decoration: BoxDecoration(
+                      color: AppColors.primary,
+                      borderRadius: const BorderRadius.only(
+                        bottomLeft: Radius.circular(12),
+                      ),
+                    ),
+                    child: Icon(
+                      Icons.visibility_outlined,
+                      color: AppColors.white,
+                      size: 18,
+                    ),
+                  ),
+                ),
+              ),
+              Container(
+                width: 1,
+                color: AppColors.grey.withOpacity(0.2),
+              ),
+              Expanded(
+                child: GestureDetector(
+                  onTap: onTapEdit,
+                  child: Container(
+                    padding: const EdgeInsets.symmetric(vertical: 4),
+                    decoration: BoxDecoration(
+                      color: AppColors.primary,
+                      borderRadius: const BorderRadius.only(
+                        bottomRight: Radius.circular(12),
+                      ),
+                    ),
+                    child: Icon(
+                      Icons.edit_outlined,
+                      color: AppColors.white,
+                      size: 18,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class MenuProductItemOld extends StatelessWidget {
+  final Product data;
+  final Function() onTapEdit;
+  const MenuProductItemOld({
     super.key,
     required this.data,
     required this.onTapEdit,

lib/presentation/setting/widgets/settings_title.dart

@@ -1,35 +1,57 @@
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
 import 'package:flutter/material.dart';
 
 import '../../../core/components/search_input.dart';
 import '../../../core/constants/colors.dart';
 
-
-
 class SettingsTitle extends StatelessWidget {
   final String title;
+  final String? subtitle;
   final TextEditingController? controller;
   final Function(String value)? onChanged;
+  final List<Widget>? actionWidget;
 
   const SettingsTitle(
     this.title, {
     super.key,
     this.controller,
     this.onChanged,
+    this.actionWidget,
+    this.subtitle,
   });
 
   @override
   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.white,
+      ),
+      child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Text(
                 title,
-          style: const TextStyle(
+                style: TextStyle(
-            color: AppColors.primary,
+                  color: AppColors.black,
                   fontSize: 20,
                   fontWeight: FontWeight.w600,
                 ),
               ),
+              if (subtitle != null)
+                Text(
+                  subtitle ?? '',
+                  style: TextStyle(
+                    color: AppColors.grey,
+                    fontSize: 14,
+                  ),
+                ),
+            ],
+          ),
           if (controller != null)
             SizedBox(
               width: 300.0,
@@ -39,7 +61,9 @@ class SettingsTitle extends StatelessWidget {
                 hintText: 'Search for food, coffe, etc..',
               ),
             ),
+          if (actionWidget != null) ...actionWidget!,
         ],
+      ),
     );
   }
 }