@marcos_feitoza/personal-finance-frontend-core-ui 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.2.2](https://github.com/MarcosOps/personal-finance-frontend-core-ui/compare/v1.2.1...v1.2.2) (2026-01-30)
+
+
+### Bug Fixes
+
+* Padronizar mensagens de erro e estados de loading ([66ea1d0](https://github.com/MarcosOps/personal-finance-frontend-core-ui/commit/66ea1d074dffa12bcd068265a6920e5997c20f2b))
+
+## [1.2.1](https://github.com/MarcosOps/personal-finance-frontend-core-ui/compare/v1.2.0...v1.2.1) (2026-01-30)
+
+
+### Bug Fixes
+
+* Web responsivo (mobile/tablet/resize) ([dba28a4](https://github.com/MarcosOps/personal-finance-frontend-core-ui/commit/dba28a4c370aac6f02a0e304e25c6eebaca4b961))
+
 # [1.2.0](https://github.com/MarcosOps/personal-finance-frontend-core-ui/compare/v1.1.0...v1.2.0) (2026-01-29)
 
 

package/README.md

@@ -75,6 +75,34 @@ showErrorSnackBar(context, 'Something went wrong');
 
 ---
 
+## Loading / Empty / Error / Success (Fase 3)
+
+Para evitar telas “silenciosas” e condicionais repetidos em cada screen (`if (isLoading) ... else if (error) ...`), use o widget centralizado:
+
+- `lib/widgets/app_async_state_view.dart`
+
+Ele padroniza os estados:
+
+- **loading**: `CircularProgressIndicator`
+- **error**: mensagem + botão “Try again” (opcional)
+- **empty**: mensagem + ação (opcional)
+- **success**: renderiza o `child`
+
+Exemplo:
+
+```dart
+return AppAsyncStateView(
+  isLoading: viewModel.isLoading,
+  errorMessage: viewModel.errorMessage,
+  isEmpty: viewModel.items.isEmpty,
+  emptyMessage: 'No items found.',
+  onRetry: viewModel.fetch,
+  child: ListView(...),
+);
+```
+
+---
+
 ## Como Usar (Instalação como Dependência)
 
 Este pacote é uma dependência local para a aplicação principal (`personal-finance-frontend`) e outras features packages do frontend.

package/lib/personal_finance_frontend_core_ui.dart

@@ -1,5 +1,7 @@
 export 'widgets/app_widgets.dart';
+export 'widgets/app_async_state_view.dart';
 export 'theme/app_theme.dart';
 export 'theme/app_colors.dart';
 export 'theme/app_spacing.dart';
 export 'utils/app_snackbars.dart';
+export 'utils/app_responsive.dart';

package/lib/utils/app_dialogs.dart

@@ -10,17 +10,17 @@ class AppDialogs {
       context: context,
       builder: (BuildContext context) {
         return AlertDialog(
-          title: const Text('Confirmar Exclusão'),
+          title: const Text('Confirm Deletion'),
           content: Text(
-              'Você tem certeza que deseja excluir "$itemName"? Esta ação não pode ser desfeita.'),
+              'Are you sure you want to delete "$itemName"? This action cannot be undone.'),
           actions: <Widget>[
             TextButton(
               onPressed: () => Navigator.of(context).pop(false),
-              child: const Text('Cancelar'),
+              child: const Text('Cancel'),
             ),
             TextButton(
               onPressed: () => Navigator.of(context).pop(true),
-              child: const Text('Excluir'),
+              child: const Text('Delete'),
             ),
           ],
         );

package/lib/utils/app_responsive.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/widgets.dart';
+
+/// Simple responsive helpers and breakpoints.
+///
+/// Why this exists:
+/// - Most of the app was built desktop-first (many wide `Row`s and `DataTable`s).
+/// - On mobile/tablet or when resizing the browser, layouts overflow.
+/// - These helpers give us one place to define breakpoints and common patterns.
+///
+/// Breakpoints (can be adjusted later):
+/// - mobile: < 600
+/// - tablet: 600 .. < 1024
+/// - desktop: >= 1024
+class AppBreakpoints {
+  AppBreakpoints._();
+
+  static const double mobile = 600;
+  static const double tablet = 1024;
+
+  static bool isMobileWidth(double width) => width < mobile;
+  static bool isTabletWidth(double width) => width >= mobile && width < tablet;
+  static bool isDesktopWidth(double width) => width >= tablet;
+}
+
+/// Builds different widgets depending on the current available width.
+class ResponsiveBuilder extends StatelessWidget {
+  final Widget Function(BuildContext context) mobile;
+  final Widget Function(BuildContext context)? tablet;
+  final Widget Function(BuildContext context) desktop;
+
+  const ResponsiveBuilder({
+    super.key,
+    required this.mobile,
+    this.tablet,
+    required this.desktop,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width = constraints.maxWidth;
+
+        if (AppBreakpoints.isMobileWidth(width)) {
+          return mobile(context);
+        }
+
+        if (AppBreakpoints.isTabletWidth(width)) {
+          return (tablet ?? desktop)(context);
+        }
+
+        return desktop(context);
+      },
+    );
+  }
+}
+
+/// Wraps a wide widget (like DataTable) with horizontal scroll when needed.
+///
+/// On desktop the widget is rendered normally.
+/// On mobile/tablet we enable horizontal scrolling to avoid overflow.
+class ResponsiveHorizontalScroll extends StatelessWidget {
+  final Widget child;
+
+  const ResponsiveHorizontalScroll({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final width = constraints.maxWidth;
+        final needsScroll = !AppBreakpoints.isDesktopWidth(width);
+
+        if (!needsScroll) return child;
+
+        return SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: ConstrainedBox(
+            // Make sure the child has at least the current width.
+            constraints: BoxConstraints(minWidth: width),
+            child: child,
+          ),
+        );
+      },
+    );
+  }
+}

package/lib/widgets/app_async_state_view.dart

@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+
+/// A centralized widget to standardize async UI states.
+///
+/// Goal: avoid duplicated `if (isLoading) ... else if (error) ...` blocks
+/// across screens and keep messaging consistent.
+///
+/// Supported states:
+/// - loading: shows a centered progress indicator
+/// - error: shows a message + optional retry button
+/// - empty: shows a message + optional action
+/// - success: renders the provided [child]
+///
+/// Usage:
+/// ```dart
+/// return AppAsyncStateView(
+///   isLoading: viewModel.isLoading,
+///   errorMessage: viewModel.errorMessage,
+///   isEmpty: viewModel.items.isEmpty,
+///   emptyMessage: 'No items found.',
+///   onRetry: viewModel.fetch,
+///   child: ListView(...),
+/// );
+/// ```
+class AppAsyncStateView extends StatelessWidget {
+  final bool isLoading;
+
+  /// Any non-empty string will be treated as an error state.
+  final String? errorMessage;
+
+  /// The screen decides what "empty" means (list empty, object null, etc.).
+  final bool isEmpty;
+  final String emptyMessage;
+
+  /// Optional retry action, commonly used for network errors.
+  final VoidCallback? onRetry;
+
+  /// Optional action shown in the empty state.
+  final String? emptyActionLabel;
+  final VoidCallback? onEmptyAction;
+
+  /// The content when success.
+  final Widget child;
+
+  /// You can override the default loading indicator.
+  final Widget? loadingWidget;
+
+  const AppAsyncStateView({
+    super.key,
+    required this.isLoading,
+    required this.child,
+    this.errorMessage,
+    this.isEmpty = false,
+    this.emptyMessage = 'No data found.',
+    this.onRetry,
+    this.emptyActionLabel,
+    this.onEmptyAction,
+    this.loadingWidget,
+  });
+
+  bool get _hasError => (errorMessage ?? '').trim().isNotEmpty;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isLoading) {
+      return loadingWidget ?? const Center(child: CircularProgressIndicator());
+    }
+
+    if (_hasError) {
+      return _CenteredMessage(
+        title: 'Something went wrong',
+        message: errorMessage!.trim(),
+        icon: Icons.error_outline,
+        actionLabel: onRetry == null ? null : 'Try again',
+        onAction: onRetry,
+      );
+    }
+
+    if (isEmpty) {
+      return _CenteredMessage(
+        title: 'Nothing here yet',
+        message: emptyMessage,
+        icon: Icons.inbox_outlined,
+        actionLabel: emptyActionLabel,
+        onAction: onEmptyAction,
+      );
+    }
+
+    return child;
+  }
+}
+
+class _CenteredMessage extends StatelessWidget {
+  final String title;
+  final String message;
+  final IconData icon;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+
+  const _CenteredMessage({
+    required this.title,
+    required this.message,
+    required this.icon,
+    this.actionLabel,
+    this.onAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(24.0),
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 480),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(icon, size: 44, color: theme.colorScheme.onSurfaceVariant),
+              const SizedBox(height: 12),
+              Text(
+                title,
+                textAlign: TextAlign.center,
+                style: theme.textTheme.titleMedium,
+              ),
+              const SizedBox(height: 8),
+              Text(
+                message,
+                textAlign: TextAlign.center,
+                style: theme.textTheme.bodyMedium?.copyWith(
+                  color: theme.colorScheme.onSurfaceVariant,
+                ),
+              ),
+              if (actionLabel != null && onAction != null) ...[
+                const SizedBox(height: 16),
+                ElevatedButton(
+                  onPressed: onAction,
+                  child: Text(actionLabel!),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

package/lib/widgets/historical_data_table.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:personal_finance_frontend_core_ui/utils/app_responsive.dart';
 
 /// A reusable widget to display historical data in a standardized DataTable.
 class HistoricalDataTable extends StatelessWidget {
@@ -24,8 +25,7 @@ class HistoricalDataTable extends StatelessWidget {
       );
     }
 
-    return SingleChildScrollView(
-      scrollDirection: Axis.horizontal,
+    return ResponsiveHorizontalScroll(
       child: DataTable(
         columnSpacing: 24.0,
         columns: columns,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@marcos_feitoza/personal-finance-frontend-core-ui",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "publishConfig": {
         "access": "public"
     },