feat: UI/UX mejorado en servicios, historial, solicitar profesional y logo

- logo.dart: path correcto assets/prosapp-logo.png + errorBuilder
- services_view.dart: rediseño con tarjetas, dark mode, avatar con inicial, badges de estado
- services_history_view.dart: mismo rediseño + badges completado/cancelado/rechazado
- request_professional_view.dart: secciones con cards, botones de upload con estado visual,
  estados pending/rejected mejorados, dark mode completo

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-27 19:40:58 -05:00
co-authored by Claude Sonnet 4.6
parent 97d8535d54
commit 7de1bed254
4 changed files with 981 additions and 658 deletions
+10 -1
View File
@@ -24,9 +24,18 @@ class Logo extends StatelessWidget {
],
),
child: Image.asset(
'prosapp-logo.png',
'assets/prosapp-logo.png',
height: 38,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const Text(
'ProsApp',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFF42A4EF),
),
),
),
),
const SizedBox(height: 10),
File diff suppressed because it is too large Load Diff
+199 -118
View File
@@ -3,133 +3,68 @@ import 'package:intl/intl.dart';
import 'package:prosapp_web_app/models/schedules_entity.dart';
import 'package:prosapp_web_app/models/service.dart';
import 'package:prosapp_web_app/models/service_status.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/ui/labels/custom_labels.dart';
import 'package:prosapp_web_app/ui/shared/widgets/status_item.dart';
import 'package:provider/provider.dart';
import 'package:prosapp_web_app/models/servicio_profesional.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';
import 'package:prosapp_web_app/ui/cards/white_card.dart';
import 'package:prosapp_web_app/providers/theme_provider.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:provider/provider.dart';
class ServicesHistoryView extends StatelessWidget {
final String type;
const ServicesHistoryView({super.key, required this.type});
@override
Widget build(BuildContext context) {
final servicesProvider =
Provider.of<ServicesProvider>(context, listen: false);
final servicesProvider = Provider.of<ServicesProvider>(context, listen: false);
final userId = Provider.of<AuthProvider>(context, listen: false).user!.id;
if (type == 'user') {
servicesProvider.getServicesHistoryForUser(
Provider.of<AuthProvider>(context, listen: false).user!.id);
}
if (type == 'professional') {
servicesProvider.getServicesHistoryForProfessional(
Provider.of<AuthProvider>(context, listen: false).user!.id);
}
if (type == 'user') servicesProvider.getServicesHistoryForUser(userId);
if (type == 'professional') servicesProvider.getServicesHistoryForProfessional(userId);
final isDark = context.watch<ThemeProvider>().isDark;
final textSecondary = isDark ? const Color(0xFF94A3B8) : const Color(0xFF6B7280);
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 900),
child: Consumer<ServicesProvider>(
builder: (context, servicesProvider, child) {
if (servicesProvider.isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
builder: (context, sp, _) {
if (sp.isLoading) {
return const Center(child: CircularProgressIndicator());
}
if (servicesProvider.services.isEmpty) {
return ListView(
children: const [
WhiteCard(
child: Center(child: Text('No hay servicios disponibles.')),
),
],
if (sp.services.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.history_outlined, size: 64,
color: textSecondary.withOpacity(0.5)),
const SizedBox(height: 16),
Text('Sin historial',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : const Color(0xFF111827),
)),
const SizedBox(height: 6),
Text('Los servicios completados o cancelados aparecerán aquí.',
style: TextStyle(fontSize: 13, color: textSecondary)),
],
),
);
}
return ListView.builder(
itemCount: servicesProvider.services.length,
itemBuilder: (context, index) {
final data = servicesProvider.services[index];
final image =
(data.user.picture == '' || data.user.picture == null)
? const Image(image: AssetImage('no-image.jpg'))
: FadeInImage.assetNetwork(
placeholder: 'loader.gif',
fit: BoxFit.cover,
image: data.user.picture!,
);
return Container(
margin: const EdgeInsets.only(bottom: 10),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
NavigationService.replaceTo(
'/dashboard/$type/service/${data.service.id}');
},
child: WhiteCard(
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: SizedBox(
width: 80,
height: 80,
child: ClipOval(
child: image,
),
),
),
const SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
data.user.name,
style: CustomLabels.h2,
),
if (data.service.description != '')
Text(
'"${data.service.description}"',
style: CustomLabels.h5,
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'${ScheduleEntity.getFormatTime(data.service.range1Hour1)} - ${DateFormat('dd MMMM yyyy', 'es').format(DateTime.parse(data.service.day))}',
style: const TextStyle(
color: Colors.black54, fontSize: 16),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10),
child: customStatus(data.service),
),
],
),
),
],
),
),
),
),
padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: sp.services.length,
itemBuilder: (context, i) {
final data = sp.services[i];
return _HistoryCard(
data: data,
isDark: isDark,
onTap: () => NavigationService.replaceTo(
'/dashboard/$type/service/${data.service.id}'),
);
},
);
@@ -140,16 +75,162 @@ class ServicesHistoryView extends StatelessWidget {
}
}
Widget customStatus(Service service) {
if (service.status == ServiceStatus.completed) {
return const StatusItem(text: 'Completado', color: Colors.blueAccent);
}
if (service.status == ServiceStatus.cancelled) {
return const StatusItem(text: 'Cancelado', color: Colors.red);
}
if (service.status == ServiceStatus.denied) {
return const StatusItem(text: 'Rechazado', color: Colors.red);
}
class _HistoryCard extends StatelessWidget {
final ServicioProfesional data;
final bool isDark;
final VoidCallback onTap;
return const SizedBox();
const _HistoryCard({
required this.data,
required this.isDark,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final cardBg = isDark ? const Color(0xFF1E293B) : Colors.white;
final border = isDark ? const Color(0xFF334155) : const Color(0xFFE5E7EB);
final textPrimary = isDark ? Colors.white : const Color(0xFF111827);
final textSecondary = isDark ? const Color(0xFF94A3B8) : const Color(0xFF6B7280);
final hasPic = data.user.picture != null && data.user.picture!.isNotEmpty;
final day = DateTime.tryParse(data.service.day);
final dateStr = day != null
? DateFormat('dd MMM yyyy', 'es').format(day)
: data.service.day;
final timeStr = ScheduleEntity.getFormatTime(data.service.range1Hour1) ?? '';
Widget statusBadge;
if (data.service.status == ServiceStatus.completed) {
statusBadge = _Badge(label: 'Completado', color: const Color(0xFF3B82F6));
} else if (data.service.status == ServiceStatus.cancelled) {
statusBadge = _Badge(label: 'Cancelado', color: const Color(0xFFEF4444));
} else if (data.service.status == ServiceStatus.denied) {
statusBadge = _Badge(label: 'Rechazado', color: const Color(0xFFEF4444));
} else {
statusBadge = const SizedBox();
}
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Material(
color: cardBg,
borderRadius: BorderRadius.circular(14),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(14),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
border: Border.all(color: border),
),
child: Row(
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF42A4EF).withOpacity(0.12),
),
child: ClipOval(
child: hasPic
? FadeInImage.assetNetwork(
placeholder: 'loader.gif',
image: data.user.picture!,
fit: BoxFit.cover,
)
: Center(
child: Text(
data.user.name.isNotEmpty
? data.user.name[0].toUpperCase()
: '?',
style: const TextStyle(
color: Color(0xFF42A4EF),
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(data.user.name,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: textPrimary,
)),
if (data.service.address.isNotEmpty) ...[
const SizedBox(height: 3),
Row(children: [
Icon(Icons.location_on_outlined,
size: 12, color: textSecondary),
const SizedBox(width: 3),
Expanded(
child: Text(data.service.address,
style: TextStyle(
fontSize: 11, color: textSecondary),
maxLines: 1,
overflow: TextOverflow.ellipsis),
),
]),
],
const SizedBox(height: 5),
Row(children: [
Icon(Icons.calendar_today_outlined,
size: 12, color: textSecondary),
const SizedBox(width: 4),
Text('$timeStr · $dateStr',
style: TextStyle(
fontSize: 11, color: textSecondary)),
]),
],
),
),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
statusBadge,
const SizedBox(height: 8),
Icon(Icons.chevron_right, color: textSecondary, size: 18),
],
),
],
),
),
),
),
);
}
}
class _Badge extends StatelessWidget {
final String label;
final Color color;
const _Badge({required this.label, required this.color});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: color.withOpacity(0.12),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: color.withOpacity(0.4)),
),
child: Text(label,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: color,
)),
);
}
}
+239 -120
View File
@@ -3,133 +3,54 @@ import 'package:intl/intl.dart';
import 'package:prosapp_web_app/models/schedules_entity.dart';
import 'package:prosapp_web_app/models/service.dart';
import 'package:prosapp_web_app/models/service_status.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/ui/labels/custom_labels.dart';
import 'package:prosapp_web_app/ui/shared/widgets/status_item.dart';
import 'package:provider/provider.dart';
import 'package:prosapp_web_app/models/servicio_profesional.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';
import 'package:prosapp_web_app/ui/cards/white_card.dart';
import 'package:prosapp_web_app/providers/theme_provider.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:provider/provider.dart';
class ServicesView extends StatelessWidget {
final String type;
const ServicesView({super.key, required this.type});
@override
Widget build(BuildContext context) {
final servicesProvider =
Provider.of<ServicesProvider>(context, listen: false);
final servicesProvider = Provider.of<ServicesProvider>(context, listen: false);
final userId = Provider.of<AuthProvider>(context, listen: false).user!.id;
if (type == 'user') {
servicesProvider.getServicesForUser(
Provider.of<AuthProvider>(context, listen: false).user!.id);
}
if (type == 'professional') {
servicesProvider.getServicesForProfessional(
Provider.of<AuthProvider>(context, listen: false).user!.id);
}
if (type == 'user') servicesProvider.getServicesForUser(userId);
if (type == 'professional') servicesProvider.getServicesForProfessional(userId);
final isDark = context.watch<ThemeProvider>().isDark;
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 900),
child: Consumer<ServicesProvider>(
builder: (context, servicesProvider, child) {
if (servicesProvider.isLoading) {
return const Center(
child: CircularProgressIndicator(),
builder: (context, sp, _) {
if (sp.isLoading) {
return const Center(child: CircularProgressIndicator());
}
if (sp.services.isEmpty) {
return _EmptyState(
isDark: isDark,
icon: Icons.room_service_outlined,
title: 'Sin servicios activos',
subtitle: 'Aquí verás tus servicios en curso.',
);
}
if (servicesProvider.services.isEmpty) {
return ListView(
children: const [
WhiteCard(
child: Center(child: Text('No hay servicios disponibles.')),
),
],
);
}
return ListView.builder(
itemCount: servicesProvider.services.length,
itemBuilder: (context, index) {
final data = servicesProvider.services[index];
final image =
(data.user.picture == '' || data.user.picture == null)
? const Image(image: AssetImage('no-image.jpg'))
: FadeInImage.assetNetwork(
placeholder: 'loader.gif',
fit: BoxFit.cover,
image: data.user.picture!,
);
return Container(
margin: const EdgeInsets.only(bottom: 10),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
NavigationService.replaceTo(
'/dashboard/$type/service/${data.service.id}');
},
child: WhiteCard(
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: SizedBox(
width: 80,
height: 80,
child: ClipOval(
child: image,
),
),
),
const SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
data.user.name,
style: CustomLabels.h2,
),
if (data.service.description != '')
Text(
'"${data.service.description}"',
style: CustomLabels.h5,
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'${ScheduleEntity.getFormatTime(data.service.range1Hour1)} - ${DateFormat('dd MMMM yyyy', 'es').format(DateTime.parse(data.service.day))}',
style: const TextStyle(
color: Colors.black54, fontSize: 16),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10),
child: customStatus(data.service),
),
],
),
),
],
),
),
),
),
padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: sp.services.length,
itemBuilder: (context, i) {
final data = sp.services[i];
return _ServiceCard(
data: data,
isDark: isDark,
onTap: () => NavigationService.replaceTo(
'/dashboard/$type/service/${data.service.id}'),
statusWidget: _activeStatus(data.service, isDark),
);
},
);
@@ -138,18 +59,216 @@ class ServicesView extends StatelessWidget {
),
);
}
Widget _activeStatus(Service service, bool isDark) {
switch (service.status) {
case ServiceStatus.pending:
return _StatusBadge(label: 'Pendiente', color: const Color(0xFFF59E0B));
case ServiceStatus.acepted:
return _StatusBadge(label: 'Aceptado', color: const Color(0xFF10B981));
case ServiceStatus.active:
return _StatusBadge(label: 'En curso', color: const Color(0xFF3B82F6));
default:
return const SizedBox();
}
}
}
Widget customStatus(Service service) {
if (service.status == ServiceStatus.pending) {
return const StatusItem(text: 'Pendiente', color: Colors.black54);
}
if (service.status == ServiceStatus.acepted) {
return const StatusItem(text: 'Aceptado', color: Colors.green);
}
if (service.status == ServiceStatus.active) {
return const StatusItem(text: 'Activo', color: Colors.blueAccent);
}
// ── Shared widgets ────────────────────────────────────────────────────────────
return const SizedBox();
class _ServiceCard extends StatelessWidget {
final ServicioProfesional data;
final bool isDark;
final VoidCallback onTap;
final Widget statusWidget;
const _ServiceCard({
required this.data,
required this.isDark,
required this.onTap,
required this.statusWidget,
});
@override
Widget build(BuildContext context) {
final cardBg = isDark ? const Color(0xFF1E293B) : Colors.white;
final border = isDark ? const Color(0xFF334155) : const Color(0xFFE5E7EB);
final textPrimary = isDark ? Colors.white : const Color(0xFF111827);
final textSecondary = isDark ? const Color(0xFF94A3B8) : const Color(0xFF6B7280);
final hasPic = data.user.picture != null && data.user.picture!.isNotEmpty;
final day = DateTime.tryParse(data.service.day);
final dateStr = day != null
? DateFormat('dd MMM yyyy', 'es').format(day)
: data.service.day;
final timeStr = ScheduleEntity.getFormatTime(data.service.range1Hour1) ?? '';
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Material(
color: cardBg,
borderRadius: BorderRadius.circular(14),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(14),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
border: Border.all(color: border),
),
child: Row(
children: [
// Avatar
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF42A4EF).withOpacity(0.15),
),
child: ClipOval(
child: hasPic
? FadeInImage.assetNetwork(
placeholder: 'loader.gif',
image: data.user.picture!,
fit: BoxFit.cover,
)
: Center(
child: Text(
data.user.name.isNotEmpty
? data.user.name[0].toUpperCase()
: '?',
style: const TextStyle(
color: Color(0xFF42A4EF),
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
),
),
),
const SizedBox(width: 14),
// Info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(data.user.name,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: textPrimary,
)),
if (data.service.address.isNotEmpty) ...[
const SizedBox(height: 3),
Row(
children: [
Icon(Icons.location_on_outlined,
size: 13, color: textSecondary),
const SizedBox(width: 3),
Expanded(
child: Text(
data.service.address,
style:
TextStyle(fontSize: 12, color: textSecondary),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
const SizedBox(height: 6),
Row(
children: [
Icon(Icons.calendar_today_outlined,
size: 13, color: textSecondary),
const SizedBox(width: 4),
Text('$timeStr · $dateStr',
style: TextStyle(fontSize: 12, color: textSecondary)),
],
),
],
),
),
const SizedBox(width: 10),
// Status + arrow
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
statusWidget,
const SizedBox(height: 8),
Icon(Icons.chevron_right, color: textSecondary, size: 18),
],
),
],
),
),
),
),
);
}
}
class _StatusBadge extends StatelessWidget {
final String label;
final Color color;
const _StatusBadge({required this.label, required this.color});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: color.withOpacity(0.12),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: color.withOpacity(0.4)),
),
child: Text(label,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: color,
)),
);
}
}
class _EmptyState extends StatelessWidget {
final bool isDark;
final IconData icon;
final String title;
final String subtitle;
const _EmptyState({
required this.isDark,
required this.icon,
required this.title,
required this.subtitle,
});
@override
Widget build(BuildContext context) {
final textPrimary = isDark ? Colors.white : const Color(0xFF111827);
final textSecondary = isDark ? const Color(0xFF94A3B8) : const Color(0xFF6B7280);
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, size: 64, color: textSecondary.withOpacity(0.5)),
const SizedBox(height: 16),
Text(title,
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: textPrimary)),
const SizedBox(height: 6),
Text(subtitle,
style: TextStyle(fontSize: 13, color: textSecondary)),
],
),
);
}
}