outlet dialog

lib/presentation/app_widget.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../application/auth/auth_bloc.dart';
+import '../application/outlet/outlet_loader/outlet_loader_bloc.dart';
 import '../common/theme/theme.dart';
 import '../common/constant/app_constant.dart';
 import '../injection.dart';
@@ -20,8 +21,11 @@ class _AppWidgetState extends State<AppWidget> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocProvider(
-      create: (context) => getIt<AuthBloc>(),
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(create: (context) => getIt<AuthBloc>()),
+        BlocProvider(create: (context) => getIt<OutletLoaderBloc>()),
+      ],
       child: MaterialApp.router(
         debugShowCheckedModeBanner: false,
         title: AppConstant.appName,

lib/presentation/components/card/outlet_card.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../../domain/outlet/outlet.dart';
+import '../spaces/space.dart';
+
+class OutletCard extends StatelessWidget {
+  final Outlet outlet;
+  final bool isSelected;
+  const OutletCard({super.key, required this.outlet, required this.isSelected});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
+      margin: EdgeInsets.only(bottom: 12),
+      decoration: BoxDecoration(
+        color: isSelected ? AppColor.primary.withOpacity(0.1) : AppColor.white,
+        border: Border.all(color: AppColor.primary),
+        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
+      ),
+      child: Row(
+        children: [
+          Icon(Icons.store, color: AppColor.primary),
+          SpaceWidth(12),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  outlet.name,
+                  style: AppStyle.lg.copyWith(fontWeight: FontWeight.w600),
+                ),
+                Text(
+                  outlet.address,
+                  style: AppStyle.sm,
+                  overflow: TextOverflow.ellipsis,
+                  maxLines: 1,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/components/dialog/custom_modal_dialog.dart

@@ -0,0 +1,105 @@
+part of 'dialog.dart';
+
+class CustomModalDialog extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final Widget child;
+  final VoidCallback? onClose;
+  final double? minWidth;
+  final double? maxWidth;
+  final double? minHeight;
+  final double? maxHeight;
+  final EdgeInsets? contentPadding;
+
+  const CustomModalDialog({
+    super.key,
+    required this.title,
+    this.subtitle,
+    required this.child,
+    this.onClose,
+    this.minWidth,
+    this.maxWidth,
+    this.minHeight,
+    this.maxHeight,
+    this.contentPadding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: AppColor.white,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      child: ConstrainedBox(
+        constraints: BoxConstraints(
+          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),
+                width: double.infinity,
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    colors: AppColor.primaryGradient,
+                    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: AppStyle.xxl.copyWith(
+                              color: AppColor.white,
+                              fontWeight: FontWeight.bold,
+                            ),
+                          ),
+                          if (subtitle != null)
+                            Text(
+                              subtitle ?? '',
+                              style: AppStyle.lg.copyWith(
+                                color: AppColor.textSecondary,
+                                fontWeight: FontWeight.w500,
+                              ),
+                            ),
+                        ],
+                      ),
+                    ),
+                    SpaceWidth(12),
+                    IconButton(
+                      icon: Icon(Icons.close, color: AppColor.white),
+                      onPressed: () {
+                        if (onClose != null) {
+                          onClose!();
+                        } else {
+                          context.maybePop();
+                        }
+                      },
+                    ),
+                  ],
+                ),
+              ),
+              Flexible(
+                child: SingleChildScrollView(
+                  padding: contentPadding ?? EdgeInsets.zero,
+                  child: child,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/components/dialog/dialog.dart

@@ -0,0 +1,14 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../application/outlet/outlet_loader/outlet_loader_bloc.dart';
+import '../../../common/extension/extension.dart';
+import '../../../common/theme/theme.dart';
+import '../button/button.dart';
+import '../card/outlet_card.dart';
+import '../loader/loader_with_text.dart';
+import '../spaces/space.dart';
+
+part 'custom_modal_dialog.dart';
+part 'outlet_dialog.dart';

lib/presentation/components/dialog/outlet_dialog.dart

@@ -0,0 +1,57 @@
+part of 'dialog.dart';
+
+class OutletDialog extends StatefulWidget {
+  const OutletDialog({super.key});
+
+  @override
+  State<OutletDialog> createState() => _OutletDialogState();
+}
+
+class _OutletDialogState extends State<OutletDialog> {
+  @override
+  void initState() {
+    super.initState();
+    context.read<OutletLoaderBloc>().add(
+      OutletLoaderEvent.fetched(isRefresh: true),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomModalDialog(
+      title: 'Outlet',
+      subtitle: 'Silahkan pilih outlet',
+      minWidth: context.deviceWidth * 0.4,
+      contentPadding: const EdgeInsets.symmetric(
+        horizontal: 16.0,
+        vertical: 24.0,
+      ),
+      child: BlocBuilder<OutletLoaderBloc, OutletLoaderState>(
+        builder: (context, state) {
+          if (state.isFetching) {
+            return LoaderWithText();
+          }
+
+          return Column(
+            children: [
+              ...List.generate(
+                state.outlets.length,
+                (index) => GestureDetector(
+                  onTap: () {
+                    // selectOutlet(outlets[index]);
+                  },
+                  child: OutletCard(
+                    outlet: state.outlets[index],
+                    isSelected: false,
+                  ),
+                ),
+              ),
+              SpaceHeight(24),
+              AppElevatedButton.filled(onPressed: null, label: 'Terapkan'),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}

lib/presentation/components/loader/loader_with_text.dart

@@ -12,7 +12,7 @@ class LoaderWithText extends StatelessWidget {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        SpinKitFadingCircle(color: AppColor.primary),
+        SpinKitFadingCircle(color: AppColor.primary, size: 24),
         SpaceWidth(10),
         Text(
           'Loading...',

lib/presentation/pages/main/pages/home/widgets/home_title.dart

@@ -4,6 +4,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import '../../../../../../application/auth/auth_bloc.dart';
 import '../../../../../../common/extension/extension.dart';
 import '../../../../../../common/theme/theme.dart';
+import '../../../../../components/dialog/dialog.dart';
 import '../../../../../components/field/field.dart';
 import '../../../../../components/spaces/space.dart';
 
@@ -23,25 +24,31 @@ class HomeTitle extends StatelessWidget {
         children: [
           BlocBuilder<AuthBloc, AuthState>(
             builder: (context, state) {
-              return Row(
-                mainAxisSize: MainAxisSize.min,
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: [
-                  Text(
-                    state.outlet.name,
-                    style: AppStyle.xl.copyWith(
-                      color: AppColor.primary,
-                      fontWeight: FontWeight.w600,
+              return GestureDetector(
+                onTap: () => showDialog(
+                  context: context,
+                  builder: (context) => OutletDialog(),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    Text(
+                      state.outlet.name,
+                      style: AppStyle.xl.copyWith(
+                        color: AppColor.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
                     ),
-                  ),
-                  SpaceWidth(2),
-                  Icon(
-                    Icons.keyboard_arrow_down,
-                    color: AppColor.primary,
-                    size: 18,
-                  ),
-                ],
+                    SpaceWidth(2),
+                    Icon(
+                      Icons.keyboard_arrow_down,
+                      color: AppColor.primary,
+                      size: 18,
+                    ),
+                  ],
+                ),
               );
             },
           ),