- create auth, main shell, home, profile, notifications and settings modules.

- added navigation, utils, design system and shared packages
- implemented go router in entiered app
- implemented flutter riverpod instead provider

packages/design_system/.gitignore

@@ -0,0 +1,31 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
+/pubspec.lock
+**/doc/api/
+.dart_tool/
+.flutter-plugins-dependencies
+/build/
+/coverage/

packages/design_system/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "adc901062556672b4138e18a4dc62a4be8f4b3c2"
+  channel: "stable"
+
+project_type: package

packages/design_system/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* TODO: Describe initial release.

packages/design_system/LICENSE

@@ -0,0 +1 @@
+TODO: Add your license here.

packages/design_system/README.md

@@ -0,0 +1,39 @@
+<!--
+This README describes the package. If you publish this package to pub.dev,
+this README's contents appear on the landing page for your package.
+
+For information about how to write a good package README, see the guide for
+[writing package pages](https://dart.dev/tools/pub/writing-package-pages).
+
+For general information about developing packages, see the Dart guide for
+[creating packages](https://dart.dev/guides/libraries/create-packages)
+and the Flutter guide for
+[developing packages and plugins](https://flutter.dev/to/develop-packages).
+-->
+
+TODO: Put a short description of the package here that helps potential users
+know whether this package might be useful for them.
+
+## Features
+
+TODO: List what your package can do. Maybe include images, gifs, or videos.
+
+## Getting started
+
+TODO: List prerequisites and provide or point to information on how to
+start using the package.
+
+## Usage
+
+TODO: Include short and useful examples for package users. Add longer examples
+to `/example` folder.
+
+```dart
+const like = 'sample';
+```
+
+## Additional information
+
+TODO: Tell users more about the package: where to find more information, how to
+contribute to the package, how to file issues, what response they can expect
+from the package authors, and more.

packages/design_system/analysis_options.yaml

@@ -0,0 +1,4 @@
+include: package:flutter_lints/flutter.yaml
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

packages/design_system/lib/design_system.dart

@@ -0,0 +1,2 @@
+export 'src/theme/theme_port.dart';
+export 'src/theme/theme_sf_adapter.dart';

packages/design_system/lib/src/theme/theme_port.dart

@@ -0,0 +1,40 @@
+import 'dart:ui';
+import 'package:design_system/design_system.dart';
+import 'package:get_it/get_it.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+final GetIt getIt = GetIt.instance;
+
+void themePackages() {
+  getIt.registerSingleton<ThemePort>(ThemeSfAdapter());
+}
+
+final themePortProvider = Provider<ThemePort>((ref) => getIt<ThemePort>());
+
+enum ThemeCode {
+  backgroundPrimary,
+  backgroundSecondary,
+  backgroundTertiary,
+  textPrimary,
+  textSecondary,
+  textTertiary,
+  buttonPrimary,
+  buttonSecondary,
+}
+
+abstract class ThemePort {
+  late Map<ThemeCode, Color> theme;
+  late List<List<Color>> cardColors;
+
+  Color getColorFor(ThemeCode code) {
+    Color? c = theme[code];
+    if (c == null) {
+      throw Exception("Theme key not found");
+    }
+    return c;
+  }
+
+  List<Color> getCardColorFor(int index) {
+    return cardColors[index % cardColors.length];
+  }
+}

packages/design_system/lib/src/theme/theme_sf_adapter.dart

@@ -0,0 +1,25 @@
+import 'dart:collection';
+import 'dart:ui';
+
+import 'package:design_system/src/theme/theme_port.dart';
+import 'package:flutter/material.dart';
+
+class ThemeSfAdapter extends ThemePort {
+  @override
+  Map<ThemeCode, Color> theme = HashMap.from({
+    ThemeCode.backgroundPrimary: Color(0xFFFFFFFF),
+    ThemeCode.backgroundSecondary: Color(0xFFF7F7F7),
+    ThemeCode.backgroundTertiary: Color(0x4D329E95),
+    ThemeCode.textPrimary: Color(0xFF4B4B4B),
+    ThemeCode.textSecondary: Color(0xFFFFFFFF),
+    ThemeCode.textTertiary: Color(0xFFE0E0E0),
+    ThemeCode.buttonPrimary: Color(0xFF329e95),
+    ThemeCode.buttonSecondary: Color(0xFF4B4B4B),
+  });
+
+  @override
+  List<List<Color>> cardColors = [
+    <Color>[Color(0xFFFA5C9F), Color(0xFFEB2579), Color(0xFFE60866)],
+    <Color>[Color(0xFF00A1C6), Color(0xFF00819E)],
+  ];
+}

packages/design_system/pubspec.yaml

@@ -0,0 +1,57 @@
+name: design_system
+# resolution: workspace
+description: "A new Flutter package project."
+version: 0.0.1
+homepage:
+
+environment:
+  sdk: ^3.9.2
+  flutter: ">=1.17.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_riverpod: ^3.0.3
+  get_it: ^9.0.5
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^5.0.0
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter packages.
+flutter:
+
+  # To add assets to your package, add an assets section, like this:
+  # assets:
+  #   - images/a_dot_burr.jpeg
+  #   - images/a_dot_ham.jpeg
+  #
+  # For details regarding assets in packages, see
+  # https://flutter.dev/to/asset-from-package
+  #
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/to/resolution-aware-images
+
+  # To add custom fonts to your package, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts in packages, see
+  # https://flutter.dev/to/font-from-package

packages/navigation/.gitignore

@@ -0,0 +1,31 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
+/pubspec.lock
+**/doc/api/
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+build/

packages/navigation/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "b25305a8832cfc6ba632a7f87ad455e319dccce8"
+  channel: "stable"
+
+project_type: package

packages/navigation/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* TODO: Describe initial release.

packages/navigation/LICENSE

@@ -0,0 +1 @@
+TODO: Add your license here.

packages/navigation/README.md

@@ -0,0 +1,39 @@
+<!--
+This README describes the package. If you publish this package to pub.dev,
+this README's contents appear on the landing page for your package.
+
+For information about how to write a good package README, see the guide for
+[writing package pages](https://dart.dev/tools/pub/writing-package-pages).
+
+For general information about developing packages, see the Dart guide for
+[creating packages](https://dart.dev/guides/libraries/create-packages)
+and the Flutter guide for
+[developing packages and plugins](https://flutter.dev/to/develop-packages).
+-->
+
+TODO: Put a short description of the package here that helps potential users
+know whether this package might be useful for them.
+
+## Features
+
+TODO: List what your package can do. Maybe include images, gifs, or videos.
+
+## Getting started
+
+TODO: List prerequisites and provide or point to information on how to
+start using the package.
+
+## Usage
+
+TODO: Include short and useful examples for package users. Add longer examples
+to `/example` folder.
+
+```dart
+const like = 'sample';
+```
+
+## Additional information
+
+TODO: Tell users more about the package: where to find more information, how to
+contribute to the package, how to file issues, what response they can expect
+from the package authors, and more.

packages/navigation/analysis_options.yaml

@@ -0,0 +1,4 @@
+include: package:flutter_lints/flutter.yaml
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

packages/navigation/lib/navigation.dart

@@ -0,0 +1,34 @@
+import 'package:go_router/go_router.dart';
+
+abstract class NavigationContract {
+  void setRouter(GoRouter goRouter);
+  void goTo(String path);
+  void pushTo(String path);
+  void goBack();
+}
+
+class Navigation implements NavigationContract {
+  late final GoRouter router;
+
+  @override
+  void setRouter(GoRouter goRouter) {
+    router = goRouter;
+  }
+
+  @override
+  void goTo(String path) {
+    router.go(path);
+  }
+
+  @override
+  void pushTo(String path) {
+    router.push(path);
+  }
+
+  @override
+  void goBack() {
+    if (router.canPop()) {
+      router.pop();
+    }
+  }
+}

packages/navigation/lib/navigation_module.dart

@@ -0,0 +1,8 @@
+import 'package:get_it/get_it.dart';
+import 'package:navigation/navigation.dart';
+
+final GetIt getIt = GetIt.instance;
+
+void navigationModule() {
+  getIt.registerLazySingleton<NavigationContract>(() => Navigation());
+}

packages/navigation/pubspec.yaml

@@ -0,0 +1,57 @@
+name: navigation
+# resolution: workspace
+description: "A new Flutter package project."
+version: 0.0.1
+homepage:
+
+environment:
+  sdk: ^3.8.1
+  flutter: ">=1.17.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  get_it: ^9.0.5
+  go_router: ^17.0.0
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^5.0.0
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter packages.
+flutter:
+
+  # To add assets to your package, add an assets section, like this:
+  # assets:
+  #   - images/a_dot_burr.jpeg
+  #   - images/a_dot_ham.jpeg
+  #
+  # For details regarding assets in packages, see
+  # https://flutter.dev/to/asset-from-package
+  #
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/to/resolution-aware-images
+
+  # To add custom fonts to your package, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts in packages, see
+  # https://flutter.dev/to/font-from-package

packages/sf_shared/.gitignore

@@ -0,0 +1,31 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
+/pubspec.lock
+**/doc/api/
+.dart_tool/
+.flutter-plugins-dependencies
+/build/
+/coverage/

packages/sf_shared/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "adc901062556672b4138e18a4dc62a4be8f4b3c2"
+  channel: "stable"
+
+project_type: package

packages/sf_shared/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* TODO: Describe initial release.

packages/sf_shared/LICENSE

@@ -0,0 +1 @@
+TODO: Add your license here.

packages/sf_shared/README.md

@@ -0,0 +1,39 @@
+<!--
+This README describes the package. If you publish this package to pub.dev,
+this README's contents appear on the landing page for your package.
+
+For information about how to write a good package README, see the guide for
+[writing package pages](https://dart.dev/tools/pub/writing-package-pages).
+
+For general information about developing packages, see the Dart guide for
+[creating packages](https://dart.dev/guides/libraries/create-packages)
+and the Flutter guide for
+[developing packages and plugins](https://flutter.dev/to/develop-packages).
+-->
+
+TODO: Put a short description of the package here that helps potential users
+know whether this package might be useful for them.
+
+## Features
+
+TODO: List what your package can do. Maybe include images, gifs, or videos.
+
+## Getting started
+
+TODO: List prerequisites and provide or point to information on how to
+start using the package.
+
+## Usage
+
+TODO: Include short and useful examples for package users. Add longer examples
+to `/example` folder.
+
+```dart
+const like = 'sample';
+```
+
+## Additional information
+
+TODO: Tell users more about the package: where to find more information, how to
+contribute to the package, how to file issues, what response they can expect
+from the package authors, and more.

packages/sf_shared/analysis_options.yaml

@@ -0,0 +1,4 @@
+include: package:flutter_lints/flutter.yaml
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

packages/sf_shared/lib/sf_shared.dart

@@ -0,0 +1,7 @@
+export 'src/kid.dart';
+export 'src/line_graph.dart';
+export 'src/deposit_block.dart';
+export 'src/wallet_management_layout.dart';
+export 'src/connection_error_screen.dart';
+export 'src/server_error_screen.dart';
+export 'src/no_plan_error_screen.dart';

packages/sf_shared/lib/src/connection_error_screen.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class ConnectionErrorScreen extends StatelessWidget{
+
+  const ConnectionErrorScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        margin: EdgeInsets.all(30),
+        child: Center(
+          child: Column(
+            spacing: 15,
+            children: [
+              Spacer(flex: 2),
+              SvgPicture.asset("assets/images/ui/connection_error.svg"),
+              Text("Sin conexión a internet",
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)
+              ),
+              Text("Necesitas conectividad para usar SaveFamily"),
+              Text("Puedes continuar en modo offline pero algunas funciones no estaràn disponibles"),
+              Spacer(flex: 1),
+              FilledButton(
+                onPressed: ()=>{},
+                child: Container(
+                  width: double.infinity,
+                  padding: EdgeInsets.all(20),
+                  child: Text("Modo offline")
+                )
+              ),
+              TextButton(onPressed: ()=>{}, child: Text("Reintentar")),
+              Spacer(flex: 2)
+            ]
+          ),
+        )
+      )
+    );
+  }
+}

packages/sf_shared/lib/src/deposit_block.dart

@@ -0,0 +1,61 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class DepositBlock extends ConsumerWidget {
+  final double max;
+
+  const DepositBlock({super.key, required this.max});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Container(
+      padding: EdgeInsets.all(20),
+      decoration: BoxDecoration(
+        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+        borderRadius: BorderRadius.all(Radius.circular(20)),
+      ),
+      margin: EdgeInsets.only(top: 10),
+      child: Column(
+        children: [
+          Text(
+            "Ingresar dinero en el wallet",
+            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+          ),
+          Row(
+            spacing: 10,
+            children: [
+              Expanded(
+                child: TextField(
+                  decoration: InputDecoration(
+                    labelText: "Cantidad",
+                    hintText: "0€",
+                    border: OutlineInputBorder(),
+                  ),
+                  keyboardType: TextInputType.number,
+                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                ),
+              ),
+              FilledButton(
+                onPressed: () => {},
+                style: ButtonStyle(
+                  backgroundColor: WidgetStatePropertyAll<Color>(
+                    theme.getColorFor(ThemeCode.buttonPrimary),
+                  ),
+                ),
+                child: Text("Ingresar"),
+              ),
+            ],
+          ),
+          Align(
+            alignment: Alignment.topLeft,
+            child: Text("Máximo que puedes añadir: $max€"),
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/sf_shared/lib/src/kid.dart

@@ -0,0 +1,10 @@
+class Kid {
+  final String name;
+  final double balance;
+
+  const Kid({
+    required this.name,
+    required this.balance,
+
+  });
+}

packages/sf_shared/lib/src/line_graph.dart

@@ -0,0 +1,178 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class LineGraph extends ConsumerStatefulWidget {
+  final lines = [
+    [0, 1, 0, 1, 0, 1, 0],
+    [1, 0, 1, 0, 1, 0, 1],
+  ];
+
+  LineGraph({super.key});
+
+  @override
+  ConsumerState<LineGraph> createState() => LineGraphState();
+}
+
+class LineGraphState extends ConsumerState<LineGraph> {
+  final weekDays = ["L", "M", "X", "J", "V", "S", "D"];
+  String? timeSpan;
+  late var days = weekDays;
+
+  @override
+  void initState() {
+    timeSpan = "week";
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ref.watch(themePortProvider);
+
+    return Container(
+      padding: EdgeInsets.all(15),
+      decoration: BoxDecoration(
+        border: BoxBorder.fromLTRB(
+          left: BorderSide(color: Colors.cyan, width: 5),
+        ),
+        borderRadius: BorderRadius.all(Radius.circular(20)),
+        color: theme.getColorFor(ThemeCode.backgroundPrimary),
+      ),
+      child: Column(
+        spacing: 10,
+        children: [
+          Row(
+            children: [
+              Text("Gastos", style: TextStyle(fontWeight: FontWeight.bold)),
+              Spacer(),
+              Container(
+                padding: EdgeInsets.symmetric(horizontal: 10),
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.all(Radius.circular(10)),
+                  color: theme.getColorFor(ThemeCode.backgroundSecondary),
+                ),
+                child: DropdownButton(
+                  underline: Container(),
+                  value: timeSpan,
+                  onChanged: (String? value) {
+                    setState(() {
+                      timeSpan = value;
+                    });
+                  },
+                  dropdownColor: theme.getColorFor(ThemeCode.backgroundPrimary),
+                  items: [
+                    DropdownMenuItem(value: "day", child: Text("Hoy")),
+                    DropdownMenuItem(value: "week", child: Text("Esta semana")),
+                    DropdownMenuItem(value: "month", child: Text("Este mes")),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          Expanded(
+            child: LineChart(
+              LineChartData(
+                gridData: FlGridData(
+                  show: true,
+                  drawHorizontalLine: false,
+                  drawVerticalLine: true,
+                  verticalInterval: 1,
+                ),
+                titlesData: FlTitlesData(
+                  //show: false,
+                  bottomTitles: AxisTitles(
+                    sideTitles: SideTitles(
+                      showTitles: true,
+                      reservedSize: 40,
+                      getTitlesWidget: (double value, TitleMeta meta) =>
+                          SideTitleWidget(
+                            space: 4,
+                            meta: meta,
+                            /*fitInside: fitInsideBottomTitle
+                        ? SideTitleFitInsideData.fromTitleMeta(meta, distanceFromEdge: 0)
+                        : SideTitleFitInsideData.disable(),*/
+                            child: Text(weekDays[value.toInt()]),
+                          ),
+                    ),
+                  ),
+                  leftTitles: AxisTitles(),
+                  topTitles: AxisTitles(),
+                  rightTitles: AxisTitles(),
+                ),
+                lineTouchData: LineTouchData(
+                  touchTooltipData: LineTouchTooltipData(
+                    getTooltipColor: (touchedSpot) =>
+                        theme.getColorFor(ThemeCode.buttonSecondary),
+                    getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
+                      return touchedBarSpots.map((barSpot) {
+                        return LineTooltipItem(
+                          "${barSpot.y} €",
+                          TextStyle(
+                            color: theme.getColorFor(ThemeCode.textSecondary),
+                          ),
+                        );
+                      }).toList();
+                    },
+                  ),
+                ),
+                borderData: FlBorderData(
+                  show: true,
+                  border: Border(
+                    bottom: BorderSide(
+                      color: Colors.lightBlue.withValues(alpha: 0.2),
+                      width: 4,
+                    ),
+                    left: const BorderSide(color: Colors.transparent),
+                    right: const BorderSide(color: Colors.transparent),
+                    top: const BorderSide(color: Colors.transparent),
+                  ),
+                ),
+                lineBarsData: [
+                  LineChartBarData(
+                    isCurved: true,
+                    color: Colors.pink,
+                    barWidth: 5,
+                    isStrokeCapRound: true,
+                    dotData: const FlDotData(show: false),
+                    belowBarData: BarAreaData(show: false),
+                    spots: const [
+                      FlSpot(0, 1),
+                      FlSpot(1, 0),
+                      FlSpot(2, 1),
+                      FlSpot(3, 0),
+                      FlSpot(4, 1),
+                      FlSpot(5, 0),
+                      FlSpot(6, 1),
+                    ],
+                  ),
+                  LineChartBarData(
+                    isCurved: true,
+                    color: Colors.cyan,
+                    barWidth: 5,
+                    isStrokeCapRound: true,
+                    dotData: const FlDotData(show: false),
+                    belowBarData: BarAreaData(show: false),
+                    spots: const [
+                      FlSpot(0, 0),
+                      FlSpot(1, 1),
+                      FlSpot(2, 0),
+                      FlSpot(3, 1),
+                      FlSpot(4, 0),
+                      FlSpot(5, 1),
+                      FlSpot(6, 0),
+                    ],
+                  ),
+                ],
+                minX: 0,
+                maxX: days.length - 1,
+                maxY: 1,
+                minY: 0,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/sf_shared/lib/src/no_plan_error_screen.dart

@@ -0,0 +1,70 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class NoPlanErrorScreen extends ConsumerWidget {
+  const NoPlanErrorScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    return Scaffold(
+      body: Container(
+        margin: EdgeInsets.all(30),
+        child: Center(
+          child: Column(
+            children: [
+              Spacer(flex: 3),
+              Text(
+                "Estamos mejorando el servicio",
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
+              ),
+              Text(
+                "Asocia tu reloj a SaveFamily y ayuda a tus peques a aprender a usar el dinero con responsabilidad",
+              ),
+              Container(
+                margin: EdgeInsets.symmetric(vertical: 20),
+                child: Column(
+                  children: [
+                    Row(
+                      children: [
+                        Icon(
+                          Icons.check,
+                          color: theme.getColorFor(ThemeCode.buttonPrimary),
+                        ),
+                        Text("Desarrollarán hábitos financieros sanos"),
+                      ],
+                    ),
+                    Row(
+                      children: [
+                        Icon(
+                          Icons.check,
+                          color: theme.getColorFor(ThemeCode.buttonPrimary),
+                        ),
+                        Text("Gestiona sus gastos"),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+              Text(
+                "Selecciona tu plan en nuestra web y empieza a enseñar a los peques a entender el valor del dinero",
+              ),
+              Spacer(flex: 1),
+              FilledButton(
+                onPressed: () => {},
+                child: Container(
+                  width: double.infinity,
+                  padding: EdgeInsets.all(20),
+                  child: Text("Seleccionar plan"),
+                ),
+              ),
+              Spacer(flex: 3),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

packages/sf_shared/lib/src/server_error_screen.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+class ServerErrorScreen extends StatelessWidget{
+
+  const ServerErrorScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      //backgroundColor: ,
+        body: Center(
+          child: Column(
+            spacing: 20,
+            children: [
+              Spacer(flex: 2),
+              Text("Estamos mejorando el servicio",
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)
+              ),
+              SvgPicture.asset("assets/images/ui/server_error.svg"),
+              Text("El sistema está en mantenimiento. \nInténtalo de nuevo en unos minutos"),
+              Spacer(flex: 1),
+              FilledButton(onPressed: ()=>{}, child: Text("Notificarme")),
+              TextButton(onPressed: ()=>{}, child: Text("Reintentar")),
+              Spacer(flex: 2)
+            ]
+          ),
+        )
+    );
+  }
+}

packages/sf_shared/lib/src/wallet_management_layout.dart

@@ -0,0 +1,117 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:sf_shared/sf_shared.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class WalletManagementLayout extends ConsumerWidget {
+  final List<Widget> children;
+  final Widget footer;
+  final Kid kid;
+
+  const WalletManagementLayout({
+    super.key,
+    required this.kid,
+    required this.children,
+    required this.footer,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = ref.watch(themePortProvider);
+
+    final content = [
+      Container(
+        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
+        child: Stack(
+          children: [
+            IconButton(
+              onPressed: () => Navigator.pop(context),
+              icon: Icon(
+                Icons.arrow_back_ios_outlined,
+                color: theme.getColorFor(ThemeCode.textSecondary),
+              ),
+            ),
+            Expanded(
+              child: Center(
+                child: Column(
+                  children: [
+                    Text(
+                      kid.name,
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 30,
+                        color: theme.getColorFor(ThemeCode.textSecondary),
+                      ),
+                    ),
+                    Text.rich(
+                      TextSpan(
+                        text: "Saldo disponible: ",
+                        style: TextStyle(
+                          color: theme.getColorFor(ThemeCode.textSecondary),
+                        ),
+                        children: [
+                          TextSpan(
+                            text: "${kid.balance}",
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              color: theme.getColorFor(ThemeCode.textSecondary),
+                            ),
+                          ),
+                          TextSpan(
+                            text: "€",
+                            style: TextStyle(
+                              color: theme.getColorFor(ThemeCode.textSecondary),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+      ...children,
+    ];
+
+    return Scaffold(
+      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
+      body: Stack(
+        children: [
+          DecoratedBox(
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(30)),
+              gradient: LinearGradient(
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+                colors: theme.getCardColorFor(0),
+              ),
+            ),
+            child: SizedBox(width: double.infinity, height: 200),
+          ),
+          Column(
+            children: [
+              Expanded(
+                child: ListView.separated(
+                  itemBuilder: (BuildContext context, int index) {
+                    return Container(
+                      margin: EdgeInsets.symmetric(horizontal: 20),
+                      child: content[index],
+                    );
+                  },
+                  separatorBuilder: (BuildContext context, int index) {
+                    return Divider(height: 30, color: Colors.transparent);
+                  },
+                  itemCount: content.length,
+                ),
+              ),
+              footer,
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/sf_shared/pubspec.yaml

@@ -0,0 +1,63 @@
+name: sf_shared
+description: "A new Flutter package project."
+publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+version: 0.0.1
+homepage:
+
+environment:
+  sdk: ^3.9.2
+  flutter: ">=1.17.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  
+  #packages dependencies go here
+  design_system:
+    path: ../design_system
+
+  #dependencies go here
+  fl_chart: ^1.1.1
+  flutter_svg: ^2.2.1
+  flutter_riverpod: ^3.0.3
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^5.0.0
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter packages.
+flutter:
+
+  # To add assets to your package, add an assets section, like this:
+  # assets:
+  #   - images/a_dot_burr.jpeg
+  #   - images/a_dot_ham.jpeg
+  #
+  # For details regarding assets in packages, see
+  # https://flutter.dev/to/asset-from-package
+  #
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/to/resolution-aware-images
+
+  # To add custom fonts to your package, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts in packages, see
+  # https://flutter.dev/to/font-from-package

packages/sf_shared/pubspec_overrides.yaml

@@ -0,0 +1,4 @@
+# melos_managed_dependency_overrides: design_system
+dependency_overrides:
+  design_system:
+    path: ../design_system

packages/utils/.gitignore

@@ -0,0 +1,31 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
+/pubspec.lock
+**/doc/api/
+.dart_tool/
+.flutter-plugins-dependencies
+/build/
+/coverage/

packages/utils/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "adc901062556672b4138e18a4dc62a4be8f4b3c2"
+  channel: "stable"
+
+project_type: package

packages/utils/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* TODO: Describe initial release.

packages/utils/LICENSE

@@ -0,0 +1 @@
+TODO: Add your license here.

packages/utils/README.md

@@ -0,0 +1,39 @@
+<!--
+This README describes the package. If you publish this package to pub.dev,
+this README's contents appear on the landing page for your package.
+
+For information about how to write a good package README, see the guide for
+[writing package pages](https://dart.dev/tools/pub/writing-package-pages).
+
+For general information about developing packages, see the Dart guide for
+[creating packages](https://dart.dev/guides/libraries/create-packages)
+and the Flutter guide for
+[developing packages and plugins](https://flutter.dev/to/develop-packages).
+-->
+
+TODO: Put a short description of the package here that helps potential users
+know whether this package might be useful for them.
+
+## Features
+
+TODO: List what your package can do. Maybe include images, gifs, or videos.
+
+## Getting started
+
+TODO: List prerequisites and provide or point to information on how to
+start using the package.
+
+## Usage
+
+TODO: Include short and useful examples for package users. Add longer examples
+to `/example` folder.
+
+```dart
+const like = 'sample';
+```
+
+## Additional information
+
+TODO: Tell users more about the package: where to find more information, how to
+contribute to the package, how to file issues, what response they can expect
+from the package authors, and more.

packages/utils/analysis_options.yaml

@@ -0,0 +1,4 @@
+include: package:flutter_lints/flutter.yaml
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

packages/utils/lib/src/size_utils.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+class MainConstants {
+  static const double minWebAppRatio = 9.0 / 21.0;
+  static const double maxWebAppRatio = 9.0 / 18.0;
+}
+
+/// Utils for dynamic sizes
+class SizeUtils {
+  static double height = 0.0;
+  static double width = 0.0;
+  static double physicalHeight = 0.0;
+  static double physicalWidth = 0.0;
+
+  // Real value of aspect ratio height obtained through the display itself and not from calculating using the height and width
+  static double aspectRatioWidth = 9;
+  static double devicePixelRatio = 0.0;
+  static double physicalAspectRatioHeight = 0;
+  static double visibleAspectRatioHeight = 0;
+
+  // Padding of the screen where we cannot render elements without the SafeArea
+  static EdgeInsets padding = const EdgeInsets.all(0);
+
+  static const double kWebDesiredAspectRatio = MainConstants.minWebAppRatio;
+
+  const SizeUtils();
+
+  /// init method which instantiates the class using MediaQuery. If a size is provided, it will use that size instead of the MediaQuery
+  static void init({required BuildContext context, Size? size}) {
+    if (size != null) {
+      padding = EdgeInsets.zero;
+      devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
+      height = size.height;
+      width = size.width;
+      visibleAspectRatioHeight = (height / width) * aspectRatioWidth;
+      physicalWidth = width;
+      physicalHeight = height;
+      physicalAspectRatioHeight =
+          (physicalHeight / physicalWidth) * aspectRatioWidth;
+    } else {
+      height = MediaQuery.sizeOf(context).height;
+      width = MediaQuery.sizeOf(context).width;
+      padding = MediaQuery.of(context).padding;
+      devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
+      visibleAspectRatioHeight = (height / width) * aspectRatioWidth;
+
+      final FlutterView view =
+          WidgetsBinding.instance.platformDispatcher.views.first;
+      final Size realSize = view.display.size;
+
+      // Dimensions in physical pixels (px)
+      physicalWidth = realSize.width / devicePixelRatio;
+      physicalHeight = realSize.height / devicePixelRatio;
+      physicalAspectRatioHeight =
+          (physicalHeight / physicalWidth) * aspectRatioWidth;
+    }
+  }
+
+  /// Calculate percentatge of screen height, for example: '5' would be a '5%' of the total screen size
+  static double heightByPercent(double percent) => height * (percent / 100);
+
+  static double physicalHeightByPercent(double percent) =>
+      physicalHeight * (percent / 100);
+
+  static double widthByPercent(double percent) => width * (percent / 100);
+
+  static bool get isSmallerScreen => visibleAspectRatioHeight <= 16;
+
+  static bool get isMediumScreen => physicalAspectRatioHeight <= 18.0;
+
+  static bool get isXLScreen => physicalAspectRatioHeight >= 20.0;
+
+  static Size get screenSize => Size(width, height);
+
+  static T getByScreen<T>({
+    required T small,
+    T? medium,
+    required T big,
+    T? xl,
+  }) {
+    if (isSmallerScreen) return small;
+    if (isMediumScreen) return medium ?? small;
+    if (isXLScreen && xl != null) return xl;
+    return big;
+  }
+
+  static double getDefaultTopBarHeight() {
+    return getByScreen(small: 40.0, big: 55.0);
+  }
+}

packages/utils/lib/utils.dart

@@ -0,0 +1 @@
+export 'src/size_utils.dart';

packages/utils/pubspec.yaml

@@ -0,0 +1,54 @@
+name: utils
+description: "A new Flutter package project."
+version: 0.0.1
+homepage:
+
+environment:
+  sdk: ^3.9.2
+  flutter: ">=1.17.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^5.0.0
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter packages.
+flutter:
+
+  # To add assets to your package, add an assets section, like this:
+  # assets:
+  #   - images/a_dot_burr.jpeg
+  #   - images/a_dot_ham.jpeg
+  #
+  # For details regarding assets in packages, see
+  # https://flutter.dev/to/asset-from-package
+  #
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/to/resolution-aware-images
+
+  # To add custom fonts to your package, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts in packages, see
+  # https://flutter.dev/to/font-from-package