feat: slicing home page

lib/core/components/buttons.dart

@@ -18,6 +18,8 @@ class Button extends StatelessWidget {
     this.icon,
     this.disabled = false,
     this.fontSize = 16.0,
+    this.elevation,
+    this.labelStyle,
   });
 
   const Button.outlined({
@@ -33,6 +35,8 @@ class Button extends StatelessWidget {
     this.icon,
     this.disabled = false,
     this.fontSize = 16.0,
+    this.elevation,
+    this.labelStyle,
   });
 
   final Function() onPressed;
@@ -43,9 +47,11 @@ 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;
 
   @override
   Widget build(BuildContext context) {
@@ -60,6 +66,7 @@ class Button extends StatelessWidget {
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(borderRadius),
                 ),
+                elevation: elevation,
                 padding: const EdgeInsets.symmetric(horizontal: 16.0),
               ),
               child: Row(
@@ -73,11 +80,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,
                       ),
                     ),
@@ -106,11 +114,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/constants/colors.dart

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

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,5 @@
 import 'dart:developer';
 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 +37,6 @@ import 'package:enaklo_pos/presentation/setting/bloc/update_product/update_produ
 import 'package:enaklo_pos/presentation/setting/bloc/update_printer/update_printer_bloc.dart';
 import 'package:enaklo_pos/presentation/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 +48,7 @@ import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_b
 import 'package:enaklo_pos/presentation/setting/bloc/tax_settings/tax_settings_bloc.dart';
 import 'package:enaklo_pos/presentation/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 +56,7 @@ 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();

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,61 @@ class _CustomTabBarState extends State<CustomTabBar> {
     );
   }
 }
+
+class CustomTabBarV2 extends StatelessWidget {
+  final List<String> tabTitles;
+  final List<Widget> tabViews;
+
+  const CustomTabBarV2({
+    super.key,
+    required this.tabTitles,
+    required this.tabViews,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTabController(
+      length: tabTitles.length,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Material(
+            elevation: 0,
+            color: Colors.white,
+            borderOnForeground: false,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 16),
+              child: TabBar(
+                isScrollable: true,
+                tabAlignment: TabAlignment.start,
+                labelColor: Colors.white,
+                labelStyle: TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+                dividerColor: Colors.transparent,
+                unselectedLabelColor: AppColors.primary,
+                indicator: BoxDecoration(
+                  color: AppColors.primary, // Warna button saat aktif
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                indicatorColor: Colors.transparent,
+                tabs: tabTitles
+                    .map((title) => Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 16),
+                          child: Tab(text: title),
+                        ))
+                    .toList(),
+              ),
+            ),
+          ),
+          Expanded(
+            // ✅ ini bagian penting
+            child: TabBarView(
+              children: tabViews,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/home/widgets/home_right_title.dart

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

lib/presentation/home/widgets/home_title.dart

@@ -1,3 +1,4 @@
+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';
 
@@ -16,39 +17,52 @@ 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.primary,
-          children: [
+      ),
-            const Text(
+      child: Row(
-              'Enaklo POS',
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              style: TextStyle(
+        children: [
-                color: AppColors.primary,
+          Row(
-                fontSize: 22,
+            crossAxisAlignment: CrossAxisAlignment.center,
-                fontWeight: FontWeight.w600,
+            children: [
+              Icon(Icons.store, color: AppColors.white, size: 32.0),
+              SizedBox(width: 12),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text(
+                    'Enaklo POS',
+                    style: TextStyle(
+                      color: AppColors.white,
+                      fontSize: 22,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  Text(
+                    DateTime.now().toFormattedDate(),
+                    style: TextStyle(
+                      color: Colors.grey.shade300,
+                      fontSize: 16,
+                    ),
+                  ),
+                ],
               ),
-            ),
+            ],
-            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,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(),
             ),
           ),
@@ -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',

lib/presentation/home/widgets/order_menu.dart

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

lib/presentation/home/widgets/product_card.dart

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