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,11 +86,12 @@ class Button extends StatelessWidget {
                       fit: BoxFit.scaleDown,
                       child: Text(
                         label,
-                        style: TextStyle(
+                        style: labelStyle ??
-                          color: disabled ? Colors.grey : textColor,
+                            TextStyle(
-                          fontSize: fontSize,
+                              color: disabled ? Colors.grey : textColor,
-                          fontWeight: FontWeight.w600,
+                              fontSize: fontSize,
-                        ),
+                              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,11 +121,12 @@ class Button extends StatelessWidget {
                       fit: BoxFit.scaleDown,
                       child: Text(
                         label,
-                        style: TextStyle(
+                        style: labelStyle ??
-                          color: disabled ? Colors.grey : textColor,
+                            TextStyle(
-                          fontSize: fontSize,
+                              color: disabled ? Colors.grey : textColor,
-                          fontWeight: FontWeight.w600,
+                              fontSize: fontSize,
-                        ),
+                              fontWeight: FontWeight.w600,
+                            ),
                         textAlign: TextAlign.center,
                       ),
                     ),

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(
-            style: TextStyle(
+              crossAxisAlignment: CrossAxisAlignment.start,
-              color: AppColors.primary,
+              children: [
-              fontSize: 28,
+                Text(
-              fontWeight: FontWeight.w600,
+                  'Pilih Diskon',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                    color: AppColors.black,
+                  ),
+                ),
+                const SizedBox(height: 4.0),
+                Text(
+                  'Pilih diskon yang ingin diterapkan pada pesanan',
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Colors.grey,
+                  ),
+                ),
+              ],
             ),
           ),
-          Align(
+          SpaceWidth(12),
-            alignment: Alignment.centerRight,
+          IconButton(
-            child: IconButton(
+            icon: const Icon(Icons.close, color: AppColors.black),
-              onPressed: () {
+            onPressed: () {
-                context.pop();
+              context.pop();
-              },
+            },
-              icon: const Icon(
-                Icons.cancel,
-                color: AppColors.primary,
-                size: 30.0,
-              ),
-            ),
           ),
         ],
       ),
@@ -63,30 +74,7 @@ class _DiscountDialogState extends State<DiscountDialog> {
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.min,
                 children: discounts
-                    .map(
+                    .map((discount) => _buildDiscountItem(discount))
-                      (discount) => ListTile(
-                        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) {
-                            setState(() {
-                              discountIdSelected = discount.id!;
-                              context.read<CheckoutBloc>().add(
-                                    CheckoutEvent.addDiscount(
-                                      discount,
-                                    ),
-                                  );
-                            });
-                          },
-                        ),
-                        onTap: () {
-                          // context.pop();
-                        },
-                      ),
-                    )
                     .toList(),
               );
             },
@@ -95,4 +83,58 @@ class _DiscountDialogState extends State<DiscountDialog> {
       ),
     );
   }
+
+  Widget _buildDiscountItem(Discount discount) {
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          discountIdSelected = discount.id!;
+          context.read<CheckoutBloc>().add(
+                CheckoutEvent.addDiscount(
+                  discount,
+                ),
+              );
+        });
+      },
+      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,
+          ),
+        ),
+        child: Row(
+          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(
-            style: TextStyle(
+              crossAxisAlignment: CrossAxisAlignment.start,
-              color: AppColors.primary,
+              children: [
-              fontSize: 28,
+                Text(
-              fontWeight: FontWeight.w600,
+                  'Pilih Layanan',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                    color: AppColors.black,
+                  ),
+                ),
+                const SizedBox(height: 4.0),
+                Text(
+                  'Pilih layanan yang ingin diterapkan pada pesanan',
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Colors.grey,
+                  ),
+                ),
+              ],
             ),
           ),
-          Align(
+          SpaceWidth(12),
-            alignment: Alignment.centerRight,
+          IconButton(
-            child: IconButton(
+            icon: const Icon(Icons.close, color: AppColors.black),
-              onPressed: () => context.pop(),
+            onPressed: () {
-              icon: const Icon(
+              context.pop();
-                Icons.cancel,
+            },
-                color: AppColors.primary,
-                size: 30.0,
-              ),
-            ),
           ),
         ],
       ),
@@ -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/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,33 +32,38 @@ class _CustomTabBarState extends State<CustomTabBar> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        Row(
+        Container(
-          children: List.generate(
+          padding: EdgeInsets.all(16),
-            widget.tabTitles.length,
+          decoration: BoxDecoration(
-            (index) => GestureDetector(
+            color: Colors.white,
-              onTap: () {
+          ),
-                setState(() {
+          child: Row(
-                  _selectedIndex = index;
+            children: List.generate(
-                });
+              widget.tabTitles.length,
-              },
+              (index) => GestureDetector(
-              child: Container(
+                onTap: () {
-                padding: const EdgeInsets.symmetric(vertical: 14),
+                  setState(() {
-                margin: const EdgeInsets.only(right: 32),
+                    _selectedIndex = index;
-                decoration: BoxDecoration(
+                  });
-                  border: _selectedIndex == index
+                },
-                      ? const Border(
+                child: Container(
-                          bottom: BorderSide(
+                  padding:
-                            width: 3.0,
+                      const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
-                            color: AppColors.primary,
+                  margin: const EdgeInsets.only(right: 16),
-                          ),
+                  decoration: BoxDecoration(
-                        )
+                    borderRadius: BorderRadius.circular(8),
-                      : null,
+                    color: _selectedIndex == index
-                ),
+                        ? AppColors.primary
-                child: Text(
+                        : Colors.transparent,
-                  widget.tabTitles[index],
+                  ),
-                  style: const TextStyle(
+                  child: Text(
-                    color: AppColors.primary,
+                    widget.tabTitles[index],
-                    fontWeight: FontWeight.bold,
+                    style: TextStyle(
+                      color: _selectedIndex == index
+                          ? Colors.white
+                          : AppColors.primary,
+                      fontWeight: FontWeight.bold,
+                    ),
                   ),
                 ),
               ),
@@ -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,39 +16,33 @@ class HomeTitle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Container(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      height: context.deviceHeight * 0.1,
-      children: [
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
-        Column(
+      decoration: BoxDecoration(
-          crossAxisAlignment: CrossAxisAlignment.start,
+        color: AppColors.white,
-          children: [
+      ),
-            const Text(
+      child: Row(
-              'Enaklo POS',
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              style: TextStyle(
+        children: [
-                color: AppColors.primary,
+          const Text(
-                fontSize: 22,
+            'DEFAULT OUTLET',
-                fontWeight: FontWeight.w600,
+            style: TextStyle(
-              ),
+              color: AppColors.primary,
+              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(
-            controller: controller,
-            onChanged: onChanged,
-            hintText: 'Search..',
           ),
-        ),
+          SizedBox(
-      ],
+            width: 300.0,
+            child: SearchInput(
+              controller: controller,
+              onChanged: onChanged,
+              hintText: 'Search..',
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/presentation/home/widgets/item_notes_dialog.dart

@@ -1,16 +1,15 @@
+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;
-  
+
   const ItemNotesDialog({
     super.key,
     required this.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(),
             ),
           ),
@@ -69,11 +96,11 @@ class _ItemNotesDialogState extends State<ItemNotesDialog> {
         Button.filled(
           onPressed: () {
             context.read<CheckoutBloc>().add(
-              CheckoutEvent.updateItemNotes(
+                  CheckoutEvent.updateItemNotes(
-                widget.item.product,
+                    widget.item.product,
-                notesController.text,
+                    notesController.text,
-              ),
+                  ),
-            );
+                );
             Navigator.of(context).pop();
           },
           label: 'Save',
@@ -81,4 +108,4 @@ class _ItemNotesDialogState extends State<ItemNotesDialog> {
       ],
     );
   }
-} 
+}

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,28 +83,29 @@ class ProductCard extends StatelessWidget {
                   overflow: TextOverflow.ellipsis,
                 ),
                 const Spacer(),
-                Row(
+                Align(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  alignment: Alignment.center,
-                  children: [
+                  child: Text(
-                    Flexible(
+                    data.category?.name ?? '-',
-                      child: Text(
+                    style: const TextStyle(
-                        data.category?.name ?? '-',
+                      fontSize: 14,
-                        style: const TextStyle(
+                      color: AppColors.grey,
-                          color: AppColors.grey,
+                      fontWeight: FontWeight.w500,
-                          fontSize: 12,
-                        ),
-                      ),
                     ),
-                    Flexible(
+                    maxLines: 2,
-                      child: Text(
+                    overflow: TextOverflow.ellipsis,
-                        data.price!.toIntegerFromText.currencyFormatRp,
+                  ),
-                        style: const TextStyle(
+                ),
-                          fontWeight: FontWeight.bold,
+                const Spacer(),
-                          fontSize: 13,
+                Align(
-                        ),
+                  alignment: Alignment.center,
-                      ),
+                  child: Text(
+                    data.price!.toIntegerFromText.currencyFormatRp,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 13,
                     ),
-                  ],
+                  ),
                 ),
                 const Spacer(),
               ],
@@ -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,68 @@ 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(
+                onPressed: () {
-                  child: CircularProgressIndicator(),
+                  showDialog(
-                );
+                    context: context,
-              }, success: (products) {
+                    builder: (context) => MultiBlocProvider(
-                return GridView.builder(
+                      providers: [
-                  padding: EdgeInsets.zero,
+                        BlocProvider(
-                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                          create: (context) =>
-                    childAspectRatio: 1,
+                              AddProductBloc(ProductRemoteDatasource()),
-                    crossAxisCount: 3,
+                        ),
-                    mainAxisSpacing: 12,
+                        BlocProvider.value(
-                    crossAxisSpacing: 12,
+                          value: context.read<SyncProductBloc>(),
-                  ),
+                        ),
-                  itemCount: products.length + 1,
+                        BlocProvider.value(
-                  shrinkWrap: true,
+                          value: context.read<GetProductsBloc>(),
-                  physics: const ScrollPhysics(),
+                        ),
-                  itemBuilder: (BuildContext context, int index) {
+                      ],
-                    if (index == 0) {
+                      child: const FormProductDialog(),
-                      return AddData(
+                    ),
-                        title: 'Add New Product',
+                  );
-                        onPressed: () {
+                },
+                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) {
+                  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: () {
                           showDialog(
                             context: context,
                             builder: (context) => MultiBlocProvider(
                               providers: [
                                 BlocProvider(
-                                  create: (context) => AddProductBloc(ProductRemoteDatasource()),
+                                  create: (context) => UpdateProductBloc(
+                                      ProductRemoteDatasource()),
                                 ),
                                 BlocProvider.value(
                                   value: context.read<SyncProductBloc>(),
@@ -69,39 +99,16 @@ class _ProductPageState extends State<ProductPage> {
                                   value: context.read<GetProductsBloc>(),
                                 ),
                               ],
-                              child: const FormProductDialog(),
+                              child: FormProductDialog(product: item),
                             ),
                           );
                         },
                       );
-                    }
+                    },
-                    final item = products[index - 1];
+                  );
-                    return MenuProductItem(
+                });
-                      data: item, 
+              },
-                      onTapEdit: () {
+            ),
-                        showDialog(
-                          context: context,
-                          builder: (context) => MultiBlocProvider(
-                            providers: [
-                              BlocProvider(
-                                create: (context) => UpdateProductBloc(ProductRemoteDatasource()),
-                              ),
-                              BlocProvider.value(
-                                value: context.read<SyncProductBloc>(),
-                              ),
-                              BlocProvider.value(
-                                value: context.read<GetProductsBloc>(),
-                              ),
-                            ],
-                            child: FormProductDialog(product: item),
-                          ),
-                        );
-                      },
-                    );
-                  },
-                );
-              });
-            },
           ),
         ],
       ),

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,89 +52,108 @@ 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,
-                children: [
+                child: Column(
-                  const Text(
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                    'Settings',
+                  children: [
-                    style: TextStyle(
+                    Container(
-                      color: AppColors.primary,
+                      padding: const EdgeInsets.symmetric(
-                      fontSize: 28,
+                        horizontal: 16.0,
-                      fontWeight: FontWeight.w600,
+                        vertical: 12.0,
-                    ),
+                      ),
-                  ),
+                      width: double.infinity,
-                  const SpaceHeight(16.0),
+                      height: context.deviceHeight * 0.1,
-                  role != null && role! != 'admin'
+                      decoration: const BoxDecoration(
-                      ? const SizedBox()
+                        color: AppColors.white,
-                      : ListTile(
+                        border: Border(
-                          contentPadding: const EdgeInsets.all(12.0),
+                          bottom: BorderSide(
-                          leading: Assets.icons.kelolaProduk.svg(),
+                            color: AppColors.background,
-                          title: const Text('Manage Products'),
+                            width: 1.0,
-                          subtitle: const Text('Manage products in your store'),
+                          ),
-                          textColor: AppColors.primary,
-                          tileColor: currentIndex == 0
-                              ? AppColors.blueLight
-                              : Colors.transparent,
-                          onTap: () => indexValue(0),
                         ),
-                  ListTile(
+                      ),
-                    contentPadding: const EdgeInsets.all(12.0),
+                      child: Column(
-                    leading: Assets.icons.kelolaDiskon.svg(),
+                        crossAxisAlignment: CrossAxisAlignment.start,
-                    title: const Text('Kelola Diskon'),
+                        children: [
-                    subtitle: const Text('Kelola Diskon Pelanggan'),
+                          const Text(
-                    textColor: AppColors.primary,
+                            'Pengaturan',
-                    tileColor: currentIndex == 1
+                            style: TextStyle(
-                        ? AppColors.blueLight
+                              color: AppColors.black,
-                        : Colors.transparent,
+                              fontSize: 20,
-                    onTap: () => indexValue(1),
+                              fontWeight: FontWeight.w600,
-                  ),
+                            ),
-                  ListTile(
+                          ),
-                    contentPadding: const EdgeInsets.all(12.0),
+                          Text(
-                    leading: Assets.icons.dashboard.svg(),
+                            'Kelola pengaturan aplikasi',
-                    title: const Text('History Transaksi'),
+                            style: TextStyle(
-                    subtitle: const Text('Lihat history transaksi'),
+                              color: AppColors.grey,
-                    textColor: AppColors.primary,
+                              fontSize: 14,
-                    tileColor: currentIndex == 2
+                            ),
-                        ? AppColors.blueLight
+                          ),
-                        : Colors.transparent,
+                        ],
-                    onTap: () => indexValue(2),
+                      ),
-                  ),
+                    ),
-                  ListTile(
+                    Expanded(
-                    contentPadding: const EdgeInsets.all(12.0),
+                      child: SingleChildScrollView(
-                    leading: Assets.icons.kelolaPajak.svg(),
+                        child: Column(
-                    title: const Text('Perhitungan Biaya'),
+                          children: [
-                    subtitle: const Text('Kelola biaya diluar biaya modal'),
+                            role != null && role! != 'admin'
-                    textColor: AppColors.primary,
+                                ? const SizedBox()
-                    tileColor: currentIndex == 3
+                                : SettingTile(
-                        ? AppColors.blueLight
+                                    index: 0,
-                        : Colors.transparent,
+                                    currentIndex: currentIndex,
-                    onTap: () => indexValue(3),
+                                    title: 'Kelola Produk',
-                  ),
+                                    subtitle: 'Kelola produk anda',
-                  ListTile(
+                                    icon: Icons.inventory_outlined,
-                    contentPadding: const EdgeInsets.all(12.0),
+                                    onTap: () => indexValue(0),
-                    leading: Assets.icons.kelolaPajak.svg(),
+                                  ),
-                    title: const Text('Sync Data'),
+                            SettingTile(
-                    subtitle:
+                              index: 1,
-                        const Text('Sinkronisasi data dari dan ke server'),
+                              currentIndex: currentIndex,
-                    textColor: AppColors.primary,
+                              title: 'Kelola Diskon',
-                    tileColor: currentIndex == 4
+                              subtitle: 'Kelola diskon pelanggan',
-                        ? AppColors.blueLight
+                              icon: Icons.discount_outlined,
-                        : Colors.transparent,
+                              onTap: () => indexValue(1),
-                    onTap: () => indexValue(4),
+                            ),
-                  ),
+                            SettingTile(
-                  ListTile(
+                              index: 2,
-                    contentPadding: const EdgeInsets.all(12.0),
+                              currentIndex: currentIndex,
-                    leading: Image.asset(Assets.images.manageQr.path,
+                              title: 'Riwayat Transaksi',
-                        fit: BoxFit.contain),
+                              subtitle: 'Lihat riwayat transaksi',
-                    title: const Text('QR Key Setting'),
+                              icon: Icons.receipt_long_outlined,
-                    subtitle: const Text('QR Key Configuration'),
+                              onTap: () => indexValue(2),
-                    textColor: AppColors.primary,
+                            ),
-                    tileColor: currentIndex == 6
+                            SettingTile(
-                        ? AppColors.blueLight
+                              index: 3,
-                        : Colors.transparent,
+                              currentIndex: currentIndex,
-                    onTap: () => indexValue(6),
+                              title: 'Perhitungan Biaya',
-                  ),
+                              subtitle: 'Kelola biaya diluar biaya modal',
-                ],
+                              icon: Icons.attach_money_outlined,
+                              onTap: () => indexValue(3),
+                            ),
+                            SettingTile(
+                              index: 4,
+                              currentIndex: currentIndex,
+                              title: 'Sinkronisasi Data',
+                              subtitle: 'Sinkronisasi data dari dan ke server',
+                              icon: Icons.sync_outlined,
+                              onTap: () => indexValue(4),
+                            ),
+                            SettingTile(
+                              index: 6,
+                              currentIndex: currentIndex,
+                              title: 'Qr Key Setting',
+                              subtitle: 'Kelola QR Key',
+                              icon: Icons.qr_code_2_outlined,
+                              onTap: () => indexValue(6),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
               ),
             ),
           ),
@@ -144,26 +163,21 @@ class _SettingsPageState extends State<SettingsPage> {
             flex: 4,
             child: Align(
               alignment: AlignmentDirectional.topStart,
-              child: Padding(
+              child: IndexedStack(
-                padding: const EdgeInsets.all(16.0),
+                index: currentIndex,
-                child: IndexedStack(
+                children: [
-                  index: currentIndex,
+                  role != null && role! != 'admin' ? SizedBox() : ProductPage(),
-                  children: [
+                  DiscountPage(),
-                    role != null && role! != 'admin'
+                  SalesPage(),
-                        ? SizedBox()
+                  TaxPage(),
-                        : ProductPage(),
+                  SyncDataPage(),
-                    DiscountPage(),
+                  ProductPage(),
-                    SalesPage(),
+                  ServerKeyPage()
-                    TaxPage(),
+                  // Text('tax'),
-                    SyncDataPage(),
+                  // ManageDiscount(),
-                    ProductPage(),
+                  // ManagePrinterPage(),
-                    ServerKeyPage()
+                  // ManageTax(),
-                    // Text('tax'),
+                ],
-                    // ManageDiscount(),
-                    // ManagePrinterPage(),
-                    // ManageTax(),
-                  ],
-                ),
               ),
             ),
           ),

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,45 +1,69 @@
+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(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      height: context.deviceHeight * 0.1,
-      children: [
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
-        Text(
+      decoration: BoxDecoration(
-          title,
+        color: AppColors.white,
-          style: const TextStyle(
+      ),
-            color: AppColors.primary,
+      child: Row(
-            fontSize: 20,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            fontWeight: FontWeight.w600,
+        children: [
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                title,
+                style: TextStyle(
+                  color: AppColors.black,
+                  fontSize: 20,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              if (subtitle != null)
+                Text(
+                  subtitle ?? '',
+                  style: TextStyle(
+                    color: AppColors.grey,
+                    fontSize: 14,
+                  ),
+                ),
+            ],
           ),
-        ),
+          if (controller != null)
-        if (controller != null)
+            SizedBox(
-          SizedBox(
+              width: 300.0,
-            width: 300.0,
+              child: SearchInput(
-            child: SearchInput(
+                controller: controller!,
-              controller: controller!,
+                onChanged: onChanged,
-              onChanged: onChanged,
+                hintText: 'Search for food, coffe, etc..',
-              hintText: 'Search for food, coffe, etc..',
+              ),
             ),
-          ),
+          if (actionWidget != null) ...actionWidget!,
-      ],
+        ],
+      ),
     );
   }
 }