sf-app-platform/modules/home/lib/src/presentation/kid_wallet_screen.dart

import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:home/src/presentation/deposit_screen.dart';
import 'package:home/src/presentation/extract_screen.dart';
import 'package:home/src/presentation/goals_screen.dart';
import 'package:home/src/presentation/lock_card_screen.dart';
import 'package:sf_shared/sf_shared.dart';
import 'package:home/src/presentation/limits_screen.dart';
import 'package:home/src/presentation/wage_screen.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class KidWalletScreen extends ConsumerWidget {
  final Kid kid;

  const KidWalletScreen({super.key, required this.kid});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);
    final bool locked = false;

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(bottomRight: Radius.circular(24), bottomLeft: Radius.circular(24)),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: locked? theme.getDisabledCardColors() : theme.getCardColorFor(0)
              )
            ),
            child: SizedBox(width: double.infinity, height: 420)
          ),
          Container(
            margin: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
            child: Column(
              spacing: 24,
              children: [
                Row(
                  spacing: 7,
                  children: [
                    IconButton(
                      onPressed: () => Navigator.pop(context),
                      icon: Icon(
                        Icons.arrow_back_ios_new_outlined,
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        size: 24
                      )
                    ),
                    SizedBox(
                      height: 50,
                      child: SvgPicture.asset("assets/images/ui/face.svg")
                    ),
                    Text(
                      kid.name,
                      style: TextStyle(
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        fontWeight: FontWeight.bold,
                        fontSize: 20
                      )
                    ),
                    Spacer(),
                    SizedBox(
                      height: 30,
                      child: SvgPicture.asset("assets/images/ui/face.svg")
                    )
                  ]
                ),
                Column(
                  spacing: 16,
                  children: [
                    MoneyText(
                      text: "${kid.balance.toString()}€",
                      size: 60,
                      secondarySize: 24,
                      color: theme.getColorFor(ThemeCode.textSecondary)
                    ),
                    Text(
                      "Saldo disponible",
                      style: TextStyle(
                        color: theme.getColorFor(ThemeCode.backgroundPrimary)
                      )
                    ),
                    LinearProgressIndicator(
                      value: 0.7,
                      color: theme.getColorFor(ThemeCode.backgroundPrimary),
                      backgroundColor: theme
                          .getColorFor(ThemeCode.backgroundPrimary)
                          .withAlpha(0x4C),
                      minHeight: 10,
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    TextButton(
                      style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
                      onPressed: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                          builder: (_) => LockCardScreen(kid: kid)
                        )
                      ),
                      child: Row(
                        spacing: 10,
                        children: [
                          Icon(Icons.lock_outline, size: 24, color: theme.getColorFor(ThemeCode.textSecondary)),
                          locked ?
                          Text("Desbloquear tarjeta", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary))) :
                          Text("Bloquear tarjeta", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16, color: theme.getColorFor(ThemeCode.textSecondary)))
                        ]
                      )
                    )
                  ]
                ),
                Column(
                  spacing: 16,
                  children: [
                    Container(
                      padding: EdgeInsets.all(16),
                      margin: EdgeInsets.only(top: 30),
                      decoration: BoxDecoration(
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        borderRadius: BorderRadius.all(Radius.circular(20))
                      ),
                      child: Expanded(
                        child: Center(
                          child: Row(
                            children: [
                              TextButton(
                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
                                onPressed: () => Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (_) => DepositScreen(kid: kid)
                                  )
                                ),
                                child: Column(
                                  spacing: 8,
                                  children: [
                                    Icon(
                                      Icons.add_circle_outline,
                                      color: theme.getColorFor(
                                        ThemeCode.textPrimary,
                                      )
                                    ),
                                    Text(
                                      "Añadir",
                                      style: TextStyle(
                                        color: theme.getColorFor(
                                          ThemeCode.textPrimary
                                        )
                                      )
                                    )
                                  ]
                                )
                              ),
                              Spacer(),
                              TextButton(
                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
                                onPressed: () => Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (_) => WageScreen(kid: kid),
                                  ),
                                ),
                                child: Column(
                                  spacing: 10,
                                  children: [
                                    Icon(
                                      Icons.account_balance_wallet_outlined,
                                      color: theme.getColorFor(
                                        ThemeCode.textPrimary,
                                      ),
                                    ),
                                    Text(
                                      "Paga",
                                      style: TextStyle(
                                        color: theme.getColorFor(
                                          ThemeCode.textPrimary,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Spacer(),
                              TextButton(
                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
                                onPressed: () => Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (_) => LimitsScreen(kid: kid),
                                  ),
                                ),
                                child: Column(
                                  spacing: 10,
                                  children: [
                                    Icon(
                                      Icons.list_alt_outlined,
                                      color: theme.getColorFor(
                                        ThemeCode.textPrimary,
                                      ),
                                    ),
                                    Text(
                                      "Límites",
                                      style: TextStyle(
                                        color: theme.getColorFor(
                                          ThemeCode.textPrimary,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Spacer(),
                              TextButton(
                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
                                onPressed: () => Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (_) => GoalsScreen(kid: kid)
                                    )
                                ),
                                child: Column(
                                  spacing: 10,
                                  children: [
                                    Icon(
                                      Icons.emoji_events_outlined,
                                      color: theme.getColorFor(
                                        ThemeCode.textPrimary,
                                      ),
                                    ),
                                    Text(
                                      "Metas",
                                      style: TextStyle(
                                        color: theme.getColorFor(
                                          ThemeCode.textPrimary,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Spacer(),
                              TextButton(
                                style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
                                onPressed: () => Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (_) => ExtractScreen(kid: kid)
                                    )
                                ),
                                child: Column(
                                  spacing: 10,
                                  children: [
                                    Icon(
                                      Icons.cancel_outlined,
                                      color: theme.getColorFor(
                                        ThemeCode.textPrimary,
                                      ),
                                    ),
                                    Text(
                                      "Quitar",
                                      style: TextStyle(
                                        color: theme.getColorFor(
                                          ThemeCode.textPrimary,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(15),
                      height: 300,
                      decoration: BoxDecoration(
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        borderRadius: BorderRadius.all(Radius.circular(20))
                      ),
                      child: Expanded(child: Column(
                        //spacing: 24,
                        children: [
                          Text("Últimos movimientos", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500)),
                          activityList(context, theme)
                        ]
                      ))
                    )
                  ]
                )
              ]
            )
          )
        ]
      )
    );
  }

  Widget activityList(BuildContext context, theme) {
    final activity = [
      {
        "date": "10/05",
        "payments": [1, 2, 3],
      },
      {
        "date": "10/04",
        "payments": [1, 2],
      },
      {
        "date": "10/02",
        "payments": [1, 2, 3, 4],
      },
    ];

    return Expanded(
      child: ListView(
        padding: EdgeInsets.symmetric(vertical: 0),
        children: [
          ...List<Widget>.generate(activity.length, (int index) {
            return Container(padding: EdgeInsets.only(top: 24),
              child: Column(
              spacing: 8,
              children: [
                Align(alignment: Alignment.bottomLeft, child: Text(activity[index]["date"].toString(), style: TextStyle(fontSize: 18, height: 1.5))),
                Column(
                  spacing: 16,
                  children: List<Widget>.generate(
                    (activity[index]["payments"] as List<Object>).length,
                    (int i) {
                      return Row(
                        spacing: 12,
                        children: [
                          Container(
                            padding: EdgeInsets.all(9),
                            decoration: BoxDecoration(
                              color: theme.getColorFor(
                                ThemeCode.backgroundTertiary,
                              ),
                              borderRadius: BorderRadius.all(Radius.circular(16))
                            ),
                            child: Icon(
                              Icons.local_pizza_outlined,
                              color: theme.getColorFor(ThemeCode.buttonPrimary)
                            )
                          ),
                          Column(
                            children: [
                              Text(
                                "Vips",
                                style: TextStyle(fontWeight: FontWeight.bold)
                              ),
                              Text("20:15")
                            ]
                          ),
                          Spacer(),
                          MoneyText(
                            text: "5.1€",
                            size: 16,
                            secondarySize: 12,
                            color: theme.getColorFor(ThemeCode.textPrimary),
                          )
                        ]
                      );
                    }
                  )
                )
              ]
            ));
          }),
          TextButton(onPressed: () => {}, child: Align(alignment: Alignment.bottomLeft, child: Text("Ver todos"))),
        ]
      )
    );
  }
}