feat: slicing home page

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(
-        alignment: Alignment.center,
+      backgroundColor: AppColors.white,
+      title: Row(
         children: [
-          const Text(
-            'LAYANAN',
-            style: TextStyle(
-              color: AppColors.primary,
-              fontSize: 28,
-              fontWeight: FontWeight.w600,
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  '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(
-            alignment: Alignment.centerRight,
-            child: IconButton(
-              onPressed: () => context.pop(),
-              icon: const Icon(
-                Icons.cancel,
-                color: AppColors.primary,
-                size: 30.0,
-              ),
-            ),
+          SpaceWidth(12),
+          IconButton(
+            icon: const Icon(Icons.close, color: AppColors.black),
+            onPressed: () {
+              context.pop();
+            },
           ),
         ],
       ),
@@ -44,23 +56,8 @@ class ServiceDialog extends StatelessWidget {
               return state.maybeWhen(
                 initial: () => const SizedBox(),
                 loading: () => const Center(child: CircularProgressIndicator()),
-                loaded: (data, a, b, c, d, service, e, f, g, orderType) => ListTile(
-                  title: Text('Presentase ($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();
-                  },
-                ),
+                loaded: (data, a, b, c, d, service, e, f, g, orderType) =>
+                    _buildServiceItem(context, service),
                 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,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
 }