feat: detail product dialog

lib/core/components/custom_modal_dialog.dart

@@ -1,5 +1,6 @@
 import 'package:enaklo_pos/core/components/spaces.dart';
 import 'package:enaklo_pos/core/constants/colors.dart';
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
 import 'package:flutter/material.dart';
 
 class CustomModalDialog extends StatelessWidget {
@@ -7,13 +8,22 @@ class CustomModalDialog extends StatelessWidget {
   final String? subtitle;
   final Widget child;
   final VoidCallback? onClose;
+  final double? minWidth;
+  final double? maxWidth;
+  final double? minHeight;
+  final double? maxHeight;
 
-  const CustomModalDialog(
-      {super.key,
+  const CustomModalDialog({
+    super.key,
     required this.title,
     this.subtitle,
     required this.child,
-      this.onClose});
+    this.onClose,
+    this.minWidth,
+    this.maxWidth,
+    this.minHeight,
+    this.maxHeight,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -24,12 +34,14 @@ class CustomModalDialog extends StatelessWidget {
       ),
       child: ConstrainedBox(
         constraints: BoxConstraints(
-          minWidth: 200,
-          maxWidth: 600,
-          minHeight: 200,
-          maxHeight: 600,
+          minWidth: minWidth ?? context.deviceWidth * 0.3,
+          maxWidth: maxWidth ?? context.deviceWidth * 0.8,
+          minHeight: minHeight ?? context.deviceHeight * 0.3,
+          maxHeight: maxHeight ?? context.deviceHeight * 0.8,
         ),
+        child: IntrinsicWidth(
           child: Column(
+            mainAxisSize: MainAxisSize.min,
             children: [
               Container(
                 padding: const EdgeInsets.all(16),
@@ -37,8 +49,8 @@ class CustomModalDialog extends StatelessWidget {
                 decoration: BoxDecoration(
                   gradient: LinearGradient(
                     colors: [
+                      const Color.fromARGB(255, 81, 40, 134),
                       AppColors.primary,
-                    const Color.fromARGB(255, 67, 69, 195)
                     ],
                     begin: Alignment.topLeft,
                     end: Alignment.bottomRight,
@@ -68,6 +80,7 @@ class CustomModalDialog extends StatelessWidget {
                               style: TextStyle(
                                 color: AppColors.grey,
                                 fontSize: 16,
+                                fontWeight: FontWeight.w500,
                               ),
                             ),
                         ],
@@ -91,6 +104,7 @@ class CustomModalDialog extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }

lib/core/constants/colors.dart

@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 class AppColors {
   /// primary = #3949AB
   static const Color primary = Color(0xff36175e);
-  static const Color secondary = Color(0xfff1eaf9);
 
   /// grey = #B7B7B7
   static const Color grey = Color(0xffB7B7B7);
@@ -19,6 +18,7 @@ class AppColors {
 
   /// white = #FFFFFF
   static const Color white = Color(0xffFFFFFF);
+  static const Color whiteText = Color(0xfff1eaf9);
 
   /// green = #50C474
   static const Color green = Color(0xff50C474);

lib/presentation/home/dialog/type_dialog.dart

@@ -0,0 +1,101 @@
+import 'package:enaklo_pos/core/components/custom_modal_dialog.dart';
+import 'package:enaklo_pos/core/components/spaces.dart';
+import 'package:enaklo_pos/core/constants/colors.dart';
+import 'package:flutter/material.dart';
+
+class TypeDialog extends StatefulWidget {
+  const TypeDialog({super.key});
+
+  @override
+  State<TypeDialog> createState() => _TypeDialogState();
+}
+
+class _TypeDialogState extends State<TypeDialog> {
+  String selectedType = 'dine_in';
+
+  List<Map<String, dynamic>> types = [
+    {'value': 'dine_in', 'label': 'Dine In', 'icon': Icons.restaurant_outlined},
+    {
+      'value': 'take_away',
+      'label': 'Take Away',
+      'icon': Icons.takeout_dining_outlined
+    },
+    {
+      'value': 'delivery',
+      'label': 'Delivery',
+      'icon': Icons.delivery_dining_outlined
+    },
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomModalDialog(
+      title: 'Pilih Tipe',
+      subtitle: 'Silahkan pilih tipe yang sesuai',
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: List.generate(types.length, (index) {
+            return _buildItem(context, types[index]);
+          }),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildItem(BuildContext context, Map<String, dynamic> type) {
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          selectedType = type['value']!;
+        });
+      },
+      child: Container(
+        padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
+        margin: const EdgeInsets.only(bottom: 8.0),
+        decoration: BoxDecoration(
+          color: selectedType == type['value']
+              ? AppColors.primary
+              : AppColors.white,
+          borderRadius: BorderRadius.circular(8.0),
+          border: Border.all(
+            color: selectedType == type['value']
+                ? AppColors.primary
+                : AppColors.grey,
+            width: 1.0,
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(type['icon'],
+                color: selectedType == type['value']
+                    ? AppColors.white
+                    : AppColors.black),
+            SpaceWidth(12.0),
+            Expanded(
+              child: Text(
+                type['label']!,
+                style: TextStyle(
+                  fontSize: 16,
+                  color: selectedType == type['value']
+                      ? AppColors.white
+                      : AppColors.black,
+                  fontWeight: FontWeight.bold,
+                ),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            SpaceWidth(12.0),
+            Icon(
+              Icons.check_circle,
+              color: selectedType == type['value']
+                  ? AppColors.green
+                  : Colors.transparent,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/home/widgets/home_right_title.dart

@@ -2,6 +2,7 @@ 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/dialog/type_dialog.dart';
 import 'package:enaklo_pos/presentation/home/pages/dashboard_page.dart';
 import 'package:flutter/material.dart';
 
@@ -74,7 +75,13 @@ class HomeRightTitle extends StatelessWidget {
                   width: 180.0,
                   height: 40,
                   elevation: 0,
-                  onPressed: () {},
+                  onPressed: () {
+                    showDialog(
+                        context: context,
+                        builder: (context) {
+                          return TypeDialog();
+                        });
+                  },
                   mainAxisAlignment: MainAxisAlignment.start,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   icon: Icon(

lib/presentation/setting/dialogs/detail_product_dialog.dart

@@ -0,0 +1,153 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:enaklo_pos/core/components/custom_modal_dialog.dart';
+import 'package:enaklo_pos/core/components/spaces.dart';
+import 'package:enaklo_pos/core/constants/colors.dart';
+import 'package:enaklo_pos/core/constants/variables.dart';
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
+import 'package:enaklo_pos/core/extensions/string_ext.dart';
+import 'package:enaklo_pos/data/models/response/product_response_model.dart';
+import 'package:flutter/material.dart';
+
+class DetailProductDialog extends StatelessWidget {
+  final Product product;
+  const DetailProductDialog({super.key, required this.product});
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomModalDialog(
+      title: "Detail Produk",
+      maxWidth: context.deviceWidth * 0.5,
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ClipRRect(
+                  borderRadius: BorderRadius.circular(12),
+                  child: CachedNetworkImage(
+                    imageUrl: product.image!.contains('http')
+                        ? product.image!
+                        : '${Variables.baseUrl}/${product.image}',
+                    fit: BoxFit.cover,
+                    errorWidget: (context, url, error) => Container(
+                      width: 120,
+                      height: 120,
+                      decoration: BoxDecoration(
+                        color: AppColors.grey.withOpacity(0.1),
+                        borderRadius: BorderRadius.circular(12),
+                      ),
+                      child: const Icon(
+                        Icons.image_outlined,
+                        color: AppColors.grey,
+                        size: 40,
+                      ),
+                    ),
+                  ),
+                ),
+                const SpaceWidth(16),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Align(
+                        alignment: Alignment.centerRight,
+                        child: _buildStatus(),
+                      ),
+                      const SpaceHeight(8),
+                      Text(
+                        product.name ?? "-",
+                        style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      if (product.description != null &&
+                          product.description!.isNotEmpty)
+                        Padding(
+                          padding: const EdgeInsets.only(top: 4.0),
+                          child: Text(
+                            product.description!,
+                            style: const TextStyle(
+                              fontSize: 14,
+                              color: AppColors.grey,
+                            ),
+                          ),
+                        ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            const SpaceHeight(16),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                _buildItem(
+                  product.category?.name ?? "-",
+                  "Kategori",
+                ),
+                _buildItem(
+                  "${product.stock}",
+                  "Stok",
+                  valueColor: product.stock! < 50
+                      ? AppColors.red
+                      : product.stock! < 100
+                          ? Colors.yellow
+                          : AppColors.green,
+                ),
+                _buildItem(
+                  (product.price ?? "0").currencyFormatRpV2,
+                  "Harga",
+                  valueColor: AppColors.primary,
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Column _buildItem(String value, String label,
+      {Color valueColor = AppColors.black}) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          label,
+          style: const TextStyle(
+            fontSize: 12,
+            color: Colors.grey,
+          ),
+        ),
+        const SpaceHeight(4),
+        Text(
+          value,
+          style: TextStyle(
+            fontSize: 14,
+            color: valueColor,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Container _buildStatus() {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: product.status == 1 ? AppColors.green : AppColors.red,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Text(
+        product.status == 1 ? 'Aktif' : 'Tidak Aktif',
+        style: const TextStyle(
+            color: Colors.white, fontSize: 12, fontWeight: FontWeight.w700),
+      ),
+    );
+  }
+}

lib/presentation/setting/pages/product_page.dart

@@ -8,7 +8,6 @@ import 'package:enaklo_pos/presentation/setting/bloc/update_product/update_produ
 import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_bloc.dart';
 import 'package:enaklo_pos/presentation/setting/bloc/add_product/add_product_bloc.dart';
 import 'package:enaklo_pos/presentation/setting/dialogs/form_product_dialog.dart';
-import 'package:enaklo_pos/presentation/setting/widgets/add_data.dart';
 import 'package:enaklo_pos/presentation/setting/widgets/menu_product_item.dart';
 import 'package:enaklo_pos/presentation/setting/widgets/settings_title.dart';
 

lib/presentation/setting/widgets/menu_product_item.dart

@@ -1,6 +1,7 @@
 // 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:enaklo_pos/presentation/setting/dialogs/detail_product_dialog.dart';
 import 'package:flutter/material.dart';
 import 'package:enaklo_pos/data/models/response/product_response_model.dart';
 
@@ -100,82 +101,10 @@ class MenuProductItem extends StatelessWidget {
             children: [
               Expanded(
                 child: GestureDetector(
-                  onTap: () {
-                    showDialog(
+                  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,
+                    builder: (context) => DetailProductDialog(product: data),
                   ),
-                                  ),
-                                  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(