Agrego frontend app

This commit is contained in:
Pablo
2026-08-22 19:08:19 -03:00
parent 824e092b29
commit 2d0797e627
254 changed files with 37231 additions and 0 deletions
@@ -0,0 +1,457 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:gimnasio_soma/core/theme/soma_colors.dart';
import 'package:gimnasio_soma/core/widgets/soma_header_help.dart';
import 'package:gimnasio_soma/core/widgets/soma_toast.dart';
import 'package:gimnasio_soma/features/pagos/domain/entities/metodo_pago.dart';
import 'package:gimnasio_soma/features/pagos/presentation/providers/pagos_provider.dart';
class MetodosPagoScreen extends ConsumerWidget {
const MetodosPagoScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(metodosPagoProvider);
final isWide = MediaQuery.of(context).size.width >= 800;
final theme = Theme.of(context);
return Scaffold(
body: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(
isWide ? 32 : 16,
isWide ? 28 : 16,
isWide ? 32 : 16,
12,
),
child: Row(
children: [
const Text(
'Métodos de pago',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
),
const SomaHeaderHelp(
items: [
SomaHelpItem(
icon: Icons.touch_app_outlined,
text: 'Tocá un método para activarlo, desactivarlo o '
'cambiarle el ícono.',
),
SomaHelpItem(
icon: Icons.refresh,
text: 'Recarga la lista de métodos de pago.',
),
],
),
const Spacer(),
IconButton(
icon: const Icon(Icons.refresh, size: 20),
tooltip: 'Recargar',
onPressed: () =>
ref.read(metodosPagoProvider.notifier).load(),
),
],
),
),
Expanded(
child: state.when(
loading: () => const Center(
child: CircularProgressIndicator(color: SomaColors.primary),
),
error: (e, _) => Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.error_outline,
size: 48,
color: theme.colorScheme.onSurface.withAlpha(100)),
const SizedBox(height: 12),
Text(
e.toString().replaceFirst('Exception: ', ''),
textAlign: TextAlign.center,
style: TextStyle(
color: theme.colorScheme.onSurface.withAlpha(153),
),
),
const SizedBox(height: 16),
TextButton.icon(
onPressed: () =>
ref.read(metodosPagoProvider.notifier).load(),
icon: const Icon(Icons.refresh, size: 18),
label: const Text('Reintentar'),
),
],
),
),
data: (metodos) {
if (metodos.isEmpty) {
return Center(
child: Text(
'No hay métodos de pago',
style: TextStyle(
fontSize: 15,
color: theme.colorScheme.onSurface.withAlpha(130),
),
),
);
}
return ListView.separated(
padding: EdgeInsets.fromLTRB(
isWide ? 32 : 16, 4, isWide ? 32 : 16, 80,
),
itemCount: metodos.length,
separatorBuilder: (_, _) => const SizedBox(height: 8),
itemBuilder: (context, index) {
return _MetodoCard(metodo: metodos[index]);
},
);
},
),
),
],
),
);
}
}
class _MetodoCard extends ConsumerWidget {
final MetodoPago metodo;
const _MetodoCard({required this.metodo});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
final railColor = metodo.activo
? SomaColors.success.withAlpha(180)
: theme.colorScheme.surfaceContainerHighest;
final card = InkWell(
borderRadius: BorderRadius.circular(12),
onTap: () => _showEditDialog(context, ref),
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: theme.colorScheme.surface,
border: Border.all(
color: theme.colorScheme.surfaceContainerHighest,
width: 0.5,
),
),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Rail de estado
Container(width: 4, color: railColor),
// Contenido
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(14, 11, 8, 11),
child: Row(
children: [
// Ícono
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: metodo.activo
? SomaColors.primary.withAlpha(20)
: theme.colorScheme.onSurface.withAlpha(12),
borderRadius: BorderRadius.circular(10),
),
child: Icon(
_iconForMetodo(metodo.icono),
size: 20,
color: metodo.activo
? SomaColors.primary
: theme.colorScheme.onSurface.withAlpha(80),
),
),
const SizedBox(width: 14),
// Descripción + badge
Expanded(
child: Row(
children: [
Expanded(
child: Text(
metodo.descripcion,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: theme.colorScheme.onSurface,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 8),
_EstadoBadge(activo: metodo.activo),
],
),
),
const SizedBox(width: 4),
// Toggle activo
Switch(
value: metodo.activo,
activeTrackColor: SomaColors.success,
activeThumbColor: Colors.white,
onChanged: (value) async {
final error =
await ref.read(metodosPagoProvider.notifier).update({
'id': metodo.id,
'activo': value,
});
if (!context.mounted) return;
if (error != null) {
SomaToast.show(context,
message: error, type: ToastType.error);
}
},
),
// Edit
IconButton(
icon: Icon(
Icons.edit_outlined,
size: 18,
color: theme.colorScheme.onSurface.withAlpha(130),
),
tooltip: 'Editar',
onPressed: () => _showEditDialog(context, ref),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(
minWidth: 34,
minHeight: 34,
),
),
],
),
),
),
],
),
),
),
);
if (!metodo.activo) {
return Opacity(opacity: 0.6, child: card);
}
return card;
}
static const _iconOptions = [
(null, Icons.payment_outlined, 'Sin ícono'),
('efectivo', Icons.payments_outlined, 'Efectivo'),
('transferencia', Icons.account_balance_outlined, 'Transferencia'),
('tarjeta', Icons.credit_card_outlined, 'Tarjeta'),
('qr', Icons.qr_code, 'QR'),
];
Future<void> _showEditDialog(BuildContext context, WidgetRef ref) async {
final ctrl = TextEditingController(text: metodo.descripcion);
String? selectedIcon = metodo.icono;
final result = await showDialog<({String descripcion, String? icono})>(
context: context,
builder: (ctx) => StatefulBuilder(
builder: (ctx, setLocal) {
final theme = Theme.of(ctx);
return AlertDialog(
title: const Text('Editar método de pago'),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: ctrl,
decoration: const InputDecoration(
labelText: 'Descripción',
contentPadding:
EdgeInsets.symmetric(horizontal: 12, vertical: 14),
),
autofocus: true,
maxLength: 50,
),
const SizedBox(height: 4),
Text(
'Ícono',
style: TextStyle(
fontSize: 12,
color: theme.colorScheme.onSurface.withAlpha(150),
),
),
const SizedBox(height: 8),
Wrap(
spacing: 8,
runSpacing: 8,
children: _iconOptions.map((opt) {
final (key, icon, label) = opt;
final isSelected = selectedIcon == key;
return GestureDetector(
onTap: () => setLocal(() => selectedIcon = key),
child: AnimatedContainer(
duration: const Duration(milliseconds: 120),
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: isSelected
? SomaColors.primary.withAlpha(22)
: theme.colorScheme.surfaceContainerHighest
.withAlpha(80),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isSelected
? SomaColors.primary
: theme.colorScheme.surfaceContainerHighest,
width: isSelected ? 1.5 : 0.8,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: 16,
color: isSelected
? SomaColors.primary
: theme.colorScheme.onSurface.withAlpha(150),
),
const SizedBox(width: 6),
Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.normal,
color: isSelected
? SomaColors.primary
: theme.colorScheme.onSurface
.withAlpha(150),
),
),
],
),
),
);
}).toList(),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(ctx).pop(),
child: Text(
'Cancelar',
style: TextStyle(
color: theme.colorScheme.onSurface.withAlpha(178),
),
),
),
ElevatedButton(
onPressed: () {
final text = ctrl.text.trim();
if (text.isNotEmpty) {
Navigator.of(ctx)
.pop((descripcion: text, icono: selectedIcon));
}
},
style: ElevatedButton.styleFrom(
minimumSize: const Size(0, 40),
),
child: const Text('Guardar'),
),
],
);
},
),
);
ctrl.dispose();
if (result == null || !context.mounted) return;
final changed = result.descripcion != metodo.descripcion ||
result.icono != metodo.icono;
if (!changed) return;
final error = await ref.read(metodosPagoProvider.notifier).update({
'id': metodo.id,
'descripcion': result.descripcion,
'icono': result.icono,
});
if (!context.mounted) return;
if (error != null) {
SomaToast.show(context, message: error, type: ToastType.error);
} else {
SomaToast.show(context,
message: 'Método actualizado', type: ToastType.success);
}
}
IconData _iconForMetodo(String? icono) {
switch (icono) {
case 'efectivo':
case 'cash':
return Icons.payments_outlined;
case 'transferencia':
case 'transfer':
return Icons.account_balance_outlined;
case 'tarjeta':
case 'card':
return Icons.credit_card_outlined;
case 'qr':
return Icons.qr_code;
default:
return Icons.payment_outlined;
}
}
}
class _EstadoBadge extends StatelessWidget {
final bool activo;
const _EstadoBadge({required this.activo});
@override
Widget build(BuildContext context) {
final color = activo ? SomaColors.success : SomaColors.error;
final label = activo ? 'Activo' : 'Inactivo';
return Container(
padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 3),
decoration: BoxDecoration(
color: color.withAlpha(18),
borderRadius: BorderRadius.circular(5),
border: Border.all(color: color.withAlpha(60), width: 0.5),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 5,
height: 5,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
),
const SizedBox(width: 4),
Text(
label,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: color,
),
),
],
),
);
}
}
File diff suppressed because it is too large Load Diff