feat: Add dashboard layout with sidebar and main content area
- Implemented AppFooter widget for mobile and desktop views. - Created ChildrenSidebar widget to display children's information. - Developed AppLayout to manage app structure with optional footer. - Added ChildrenSidebar for selecting children and displaying their status. - Introduced DashboardAppBar for navigation and user actions. - Built WMainContentArea for displaying assistant details and calendar. - Created MainContentArea to manage contracts and events display. - Implemented MessagingSidebar for messaging functionality. - Updated widget tests to reflect new structure and imports.
This commit is contained in:
Hanim
@@ -0,0 +1,209 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/child_model.dart';
|
||||
import 'package:p_tits_pas/services/bug_report_service.dart';
|
||||
|
||||
class AppFooter extends StatelessWidget {
|
||||
const AppFooter({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
// color: Colors.white,
|
||||
border: Border(
|
||||
top: BorderSide(color: Colors.grey.shade300),
|
||||
),
|
||||
),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
if (constraints.maxWidth < 768) {
|
||||
return _buildMobileFooter(context);
|
||||
} else {
|
||||
return _buildDesktopFooter(context);
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDesktopFooter(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_buildFooterLink(context, 'Contact support', () => _handleContactSupport(context)),
|
||||
SizedBox(width: MediaQuery.of(context).size.width * 0.1),
|
||||
// _buildFooterDivider(),
|
||||
_buildFooterLink(context, 'Signaler un bug', () => _handleReportBug(context)),
|
||||
SizedBox(width: MediaQuery.of(context).size.width * 0.1),
|
||||
// _buildFooterDivider(),
|
||||
_buildFooterLink(context, 'Mentions légales', () => _handleLegalNotices(context)),
|
||||
// _buildFooterDivider(),
|
||||
SizedBox(width: MediaQuery.of(context).size.width * 0.1),
|
||||
_buildFooterLink(context, 'Politique de confidentialité', () => _handlePrivacyPolicy(context)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMobileFooter(BuildContext context) {
|
||||
return PopupMenuButton<String>(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.grey.shade300),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: const [
|
||||
Icon(Icons.info_outline, size: 20),
|
||||
SizedBox(width: 8),
|
||||
Text('Informations'),
|
||||
Icon(Icons.keyboard_arrow_down),
|
||||
],
|
||||
),
|
||||
),
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(value: 'support', child: Text('Contact support')),
|
||||
const PopupMenuItem(value: 'bug', child: Text('Signaler un bug')),
|
||||
const PopupMenuItem(value: 'legal', child: Text('Mentions légales')),
|
||||
const PopupMenuItem(value: 'privacy', child: Text('Politique de confidentialité')),
|
||||
],
|
||||
onSelected: (value) {
|
||||
switch (value) {
|
||||
case 'support':
|
||||
_handleContactSupport(context);
|
||||
break;
|
||||
case 'bug':
|
||||
_handleReportBug(context);
|
||||
break;
|
||||
case 'legal':
|
||||
_handleLegalNotices(context);
|
||||
break;
|
||||
case 'privacy':
|
||||
_handlePrivacyPolicy(context);
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFooterLink(BuildContext context, String text, VoidCallback onTap) {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _handleReportBug(BuildContext context) {
|
||||
final TextEditingController controller = TextEditingController();
|
||||
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: Text(
|
||||
'Signaler un bug',
|
||||
style: GoogleFonts.merienda(),
|
||||
),
|
||||
content: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TextField(
|
||||
controller: controller,
|
||||
maxLines: 5,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Décrivez le problème rencontré...',
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: Text(
|
||||
'Annuler',
|
||||
style: GoogleFonts.merienda(),
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () async {
|
||||
if (controller.text.trim().isEmpty) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(
|
||||
'Veuillez décrire le problème',
|
||||
style: GoogleFonts.merienda(),
|
||||
),
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await BugReportService.sendReport(controller.text);
|
||||
if (context.mounted) {
|
||||
Navigator.pop(context);
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(
|
||||
'Rapport envoyé avec succès',
|
||||
style: GoogleFonts.merienda(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
if (context.mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(
|
||||
'Erreur lors de l\'envoi du rapport',
|
||||
style: GoogleFonts.merienda(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
child: Text(
|
||||
'Envoyer',
|
||||
style: GoogleFonts.merienda(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _handleLegalNotices(BuildContext context) {
|
||||
// Handle legal notices action
|
||||
Navigator.pushNamed(context, '/legal');
|
||||
}
|
||||
|
||||
void _handlePrivacyPolicy(BuildContext context) {
|
||||
// Handle privacy policy action
|
||||
Navigator.pushNamed(context, '/privacy');
|
||||
}
|
||||
|
||||
void _handleContactSupport(BuildContext context) {
|
||||
// Handle contact support action
|
||||
// Navigator.pushNamed(context, '/support');
|
||||
}
|
||||
|
||||
Widget _buildFooterDivider() {
|
||||
return Divider(
|
||||
color: Colors.grey[300],
|
||||
thickness: 1,
|
||||
height: 40,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class Childrensidebarwidget extends StatelessWidget{
|
||||
final void Function(String childId) onChildSelected;
|
||||
|
||||
const Childrensidebarwidget({
|
||||
Key? key,
|
||||
required this.onChildSelected,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final children = [
|
||||
{'id': '1', 'name': 'Léna', 'photo': null, 'status': 'Actif'},
|
||||
{'id': '2', 'name': 'Noé', 'photo': null, 'status': 'Inactif'},
|
||||
];
|
||||
|
||||
return Container(
|
||||
color: const Color(0xFFF7F7F7),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
// Avatar parent + bouton
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const CircleAvatar(radius: 24, child: Icon(Icons.person)),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.add),
|
||||
onPressed: () {
|
||||
// Naviguer vers ajout d'enfant
|
||||
},
|
||||
)
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text("Mes enfants", style: TextStyle(fontWeight: FontWeight.bold)),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
// Liste des enfants
|
||||
...children.map((child) {
|
||||
return GestureDetector(
|
||||
onTap: () => onChildSelected(child['id']!),
|
||||
child: Card(
|
||||
color: child['status'] == 'Actif' ? Colors.teal.shade50 : Colors.white,
|
||||
child: ListTile(
|
||||
leading: const CircleAvatar(child: Icon(Icons.child_care)),
|
||||
title: Text(child['name']!),
|
||||
subtitle: Text(child['status']!),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList()
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppLayout extends StatelessWidget {
|
||||
final PreferredSizeWidget appBar;
|
||||
final Widget body;
|
||||
final Widget? footer;
|
||||
|
||||
const AppLayout({
|
||||
Key? key,
|
||||
required this.appBar,
|
||||
required this.body,
|
||||
this.footer,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF5F7FA),
|
||||
appBar: appBar,
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(child: body),
|
||||
if (footer != null) footer!,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/child_model.dart';
|
||||
|
||||
class ChildrenSidebar extends StatelessWidget {
|
||||
final List<ChildModel> children;
|
||||
final String? selectedChildId;
|
||||
final Function(String) onChildSelected;
|
||||
final VoidCallback onAddChild;
|
||||
final bool isCompact;
|
||||
final bool isMobile;
|
||||
|
||||
const ChildrenSidebar({
|
||||
Key? key,
|
||||
required this.children,
|
||||
this.selectedChildId,
|
||||
required this.onChildSelected,
|
||||
required this.onAddChild,
|
||||
this.isCompact = false,
|
||||
this.isMobile = false,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(isMobile ? 16 : 24),
|
||||
color: Colors.white,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildHeader(context),
|
||||
const SizedBox(height: 20),
|
||||
_buildAddChildButton(context),
|
||||
const SizedBox(height: 16),
|
||||
Expanded(child: _buildChildrenList()),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeader(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
// UserAvatar(
|
||||
// size: isCompact ? 40 : 60,
|
||||
// name: 'Emma Dupont', // TODO: Récupérer depuis le contexte utilisateur
|
||||
// ),
|
||||
if (!isCompact) ...[
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: const [
|
||||
Text(
|
||||
'Emma Dupont',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
Icon(Icons.keyboard_arrow_down),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAddChildButton(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: onAddChild,
|
||||
icon: const Icon(Icons.add),
|
||||
label: Text(isCompact ? 'Ajouter' : 'Ajouter un enfant'),
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: isCompact ? 8 : 12,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildChildrenList() {
|
||||
if (children.isEmpty) {
|
||||
return const Center(
|
||||
child: Text(
|
||||
'Aucun enfant ajouté',
|
||||
style: TextStyle(
|
||||
color: Colors.grey,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
itemCount: children.length,
|
||||
separatorBuilder: (context, index) => const SizedBox(height: 12),
|
||||
itemBuilder: (context, index) {
|
||||
final child = children[index];
|
||||
final isSelected = child.id == selectedChildId;
|
||||
|
||||
return _buildChildCard(context, child, isSelected);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildChildCard(BuildContext context, ChildModel child, bool isSelected) {
|
||||
return InkWell(
|
||||
onTap: () => onChildSelected(child.id),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? const Color(0xFF9CC5C0).withOpacity(0.1) : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: isSelected ? const Color(0xFF9CC5C0) : Colors.grey.shade300,
|
||||
width: isSelected ? 2 : 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// UserAvatar(
|
||||
// // size: isCompact ? 32 : 40,
|
||||
// // name: child.fullName,
|
||||
// // imageUrl: child.photoUrl,
|
||||
// ),
|
||||
if (!isCompact) ...[
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
child.firstName,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
_buildChildStatus(child.status),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildChildStatus(ChildStatus status) {
|
||||
String label;
|
||||
Color color;
|
||||
|
||||
switch (status) {
|
||||
case ChildStatus.withAssistant:
|
||||
label = 'En garde';
|
||||
color = Colors.green;
|
||||
break;
|
||||
case ChildStatus.available:
|
||||
label = 'Disponible';
|
||||
color = Colors.blue;
|
||||
break;
|
||||
case ChildStatus.onHoliday:
|
||||
label = 'En vacances';
|
||||
color = Colors.orange;
|
||||
break;
|
||||
case ChildStatus.sick:
|
||||
label = 'Malade';
|
||||
color = Colors.red;
|
||||
break;
|
||||
case ChildStatus.searching:
|
||||
label = 'Recherche AM';
|
||||
color = Colors.purple;
|
||||
break;
|
||||
}
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
color: color,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class DashboardAppBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onTabChange;
|
||||
|
||||
const DashboardAppBar({Key? key, required this.selectedIndex, required this.onTabChange}) : super(key: key);
|
||||
|
||||
@override
|
||||
Size get preferredSize => const Size.fromHeight(kToolbarHeight + 10);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isMobile = MediaQuery.of(context).size.width < 768;
|
||||
return AppBar(
|
||||
// backgroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
title: Row(
|
||||
children: [
|
||||
// Logo de la ville
|
||||
// Container(
|
||||
// height: 32,
|
||||
// width: 32,
|
||||
// decoration: BoxDecoration(
|
||||
// color: Colors.white,
|
||||
// borderRadius: BorderRadius.circular(8),
|
||||
// ),
|
||||
// child: const Icon(
|
||||
// Icons.location_city,
|
||||
// color: Color(0xFF9CC5C0),
|
||||
// size: 20,
|
||||
// ),
|
||||
// ),
|
||||
SizedBox(width: MediaQuery.of(context).size.width * 0.19),
|
||||
const Text(
|
||||
"P'tit Pas",
|
||||
style: TextStyle(
|
||||
color: Color(0xFF9CC5C0),
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
SizedBox(width: MediaQuery.of(context).size.width * 0.1),
|
||||
|
||||
// Navigation principale
|
||||
_buildNavItem(context, 'Mon tableau de bord', 0),
|
||||
const SizedBox(width: 24),
|
||||
_buildNavItem(context, 'Trouver une nounou', 1),
|
||||
const SizedBox(width: 24),
|
||||
_buildNavItem(context, 'Paramètres', 2),
|
||||
],
|
||||
),
|
||||
actions: isMobile
|
||||
? [_buildMobileMenu(context)]
|
||||
: [
|
||||
// Nom de l'utilisateur
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'Jean Dupont',
|
||||
style: TextStyle(
|
||||
color: Colors.black,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bouton déconnexion
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 16),
|
||||
child: TextButton(
|
||||
onPressed: () => _handleLogout(context),
|
||||
style: TextButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF9CC5C0),
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
),
|
||||
child: const Text('Se déconnecter'),
|
||||
),
|
||||
),
|
||||
SizedBox(width: MediaQuery.of(context).size.width * 0.1),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNavItem(BuildContext context, String title, int index) {
|
||||
final bool isActive = index == selectedIndex;
|
||||
return InkWell(
|
||||
onTap: () => onTabChange(index),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: isActive ? const Color(0xFF9CC5C0) : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: isActive ? null : Border.all(color: Colors.black26),
|
||||
),
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: isActive ? Colors.white : Colors.black,
|
||||
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Widget _buildMobileMenu(BuildContext context) {
|
||||
return PopupMenuButton<int>(
|
||||
icon: const Icon(Icons.menu, color: Colors.white),
|
||||
onSelected: (value) {
|
||||
if (value == 3) {
|
||||
_handleLogout(context);
|
||||
}
|
||||
},
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(value: 0, child: Text("Mon tableau de bord")),
|
||||
const PopupMenuItem(value: 1, child: Text("Trouver une nounou")),
|
||||
const PopupMenuItem(value: 2, child: Text("Paramètres")),
|
||||
const PopupMenuDivider(),
|
||||
const PopupMenuItem(value: 3, child: Text("Se déconnecter")),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _handleLogout(BuildContext context) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Déconnexion'),
|
||||
content: const Text('Êtes-vous sûr de vouloir vous déconnecter ?'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('Annuler'),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
// TODO: Implémenter la logique de déconnexion
|
||||
},
|
||||
child: const Text('Déconnecter'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:p_tits_pas/widgets/dashbord_parent/ChildrenSidebarwidget.dart';
|
||||
import 'package:p_tits_pas/widgets/dashbord_parent/children_sidebar.dart';
|
||||
import 'package:p_tits_pas/widgets/dashbord_parent/wid_mainContentArea.dart';
|
||||
import 'package:p_tits_pas/widgets/messaging_sidebar.dart';
|
||||
|
||||
Widget Dashbord_body() {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// 1️⃣ Colonne de gauche : enfants
|
||||
SizedBox(
|
||||
width: 250,
|
||||
child: Childrensidebarwidget(
|
||||
onChildSelected: (childId) {
|
||||
// Met à jour l'enfant sélectionné
|
||||
// Tu peux stocker cet ID dans un state `selectedChildId`
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: WMainContentArea(
|
||||
// Passe l’enfant sélectionné si besoin
|
||||
),
|
||||
),
|
||||
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:p_tits_pas/widgets/messaging_sidebar.dart';
|
||||
|
||||
class WMainContentArea extends StatelessWidget {
|
||||
const WMainContentArea({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
color: Colors.white,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// 🔷 Informations assistante maternelle (ligne complète)
|
||||
Card(
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Row(
|
||||
children: [
|
||||
const CircleAvatar(
|
||||
radius: 30,
|
||||
backgroundImage: AssetImage("assets/images/am_photo.jpg"), // à adapter
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: const [
|
||||
Text("Julie Dupont", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
|
||||
SizedBox(height: 4),
|
||||
Text("Taux horaire : 10€/h"),
|
||||
Text("Frais journaliers : 5€"),
|
||||
],
|
||||
),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// Ouvrir le contrat
|
||||
},
|
||||
child: const Text("Voir le contrat"),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 🔷 Deux colonnes : planning + messagerie
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
// 📆 Planning de garde
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: const [
|
||||
Text("Planning de garde", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
|
||||
SizedBox(height: 12),
|
||||
Expanded(
|
||||
child: Center(
|
||||
child: Text("Composant calendrier à intégrer ici"),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// 💬 Messagerie
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: MessagingSidebar(
|
||||
conversations: [],
|
||||
notifications: [],
|
||||
isCompact: false,
|
||||
isMobile: false,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/assistant_model.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/child_model.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/contract_model.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/event_model.dart';
|
||||
|
||||
class MainContentArea extends StatelessWidget {
|
||||
final ChildModel? selectedChild;
|
||||
final AssistantModel? selectedAssistant;
|
||||
final List<EventModel> events;
|
||||
final List<ContractModel> contracts;
|
||||
final bool showOnlyCalendar;
|
||||
final bool showOnlyContracts;
|
||||
|
||||
const MainContentArea({
|
||||
Key? key,
|
||||
this.selectedChild,
|
||||
this.selectedAssistant,
|
||||
required this.events,
|
||||
required this.contracts,
|
||||
this.showOnlyCalendar = false,
|
||||
this.showOnlyContracts = false,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (!showOnlyCalendar && !showOnlyContracts) ...[
|
||||
if (selectedAssistant != null) _buildAssistantProfile(),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
if (showOnlyContracts || (!showOnlyCalendar && !showOnlyContracts)) ...[
|
||||
_buildContractsSection(),
|
||||
if (!showOnlyContracts) const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
if (showOnlyCalendar || (!showOnlyCalendar && !showOnlyContracts)) ...[
|
||||
Expanded(child: _buildCalendarSection()),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAssistantProfile() {
|
||||
if (selectedAssistant == null) {
|
||||
return _buildSearchAssistantCard();
|
||||
}
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withOpacity(0.1),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF9CC5C0),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.person,
|
||||
color: Colors.white,
|
||||
size: 40,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
selectedAssistant!.fullName,
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
'Taux horaire : ${selectedAssistant!.hourlyRateFormatted}',
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Text(
|
||||
'Frais journaliers : ${selectedAssistant!.dailyFeesFormatted}',
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// TODO: Navigation vers le contrat
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF9CC5C0),
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
child: const Text('Voir le contrat'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSearchAssistantCard() {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: Colors.grey.shade300),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.search,
|
||||
size: 48,
|
||||
color: Colors.grey.shade400,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Aucune assistante maternelle assignée',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Trouvez une assistante maternelle pour votre enfant',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey.shade600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// TODO: Navigation vers la recherche
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF9CC5C0),
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
child: const Text('Rechercher une assistante maternelle'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCalendarSection() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withOpacity(0.1),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Planning de garde pour ${selectedChild?.firstName ?? "votre enfant"}',
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
// TODO: Mode sélection de plage
|
||||
},
|
||||
child: const Text('Mode sélection de plage'),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Expanded(
|
||||
child: _buildCalendar(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCalendar() {
|
||||
// Placeholder pour le calendrier - sera développé dans FRONT-11
|
||||
return const Center(
|
||||
child: Text(
|
||||
'Calendrier à implémenter\n(FRONT-11)',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: Colors.grey,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContractsSection() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withOpacity(0.1),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text(
|
||||
'Contrats',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
if (contracts.isEmpty)
|
||||
const Text(
|
||||
'Aucun contrat en cours',
|
||||
style: TextStyle(color: Colors.grey),
|
||||
)
|
||||
else
|
||||
...contracts.map((contract) => _buildContractItem(contract)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContractItem(ContractModel contract) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 12,
|
||||
height: 12,
|
||||
decoration: BoxDecoration(
|
||||
color: _getContractStatusColor(contract.status),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(contract.statusLabel),
|
||||
),
|
||||
if (contract.needsSignature)
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
// TODO: Action signature
|
||||
},
|
||||
child: const Text('Signer'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _getContractStatusColor(ContractStatus status) {
|
||||
switch (status) {
|
||||
case ContractStatus.draft:
|
||||
return Colors.grey;
|
||||
case ContractStatus.pending:
|
||||
return Colors.orange;
|
||||
case ContractStatus.active:
|
||||
return Colors.green;
|
||||
case ContractStatus.ended:
|
||||
return Colors.blue;
|
||||
case ContractStatus.cancelled:
|
||||
return Colors.red;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/conversation_model.dart';
|
||||
import 'package:p_tits_pas/models/m_dashbord/notification_model.dart';
|
||||
|
||||
class MessagingSidebar extends StatelessWidget {
|
||||
final List<ConversationModel> conversations;
|
||||
final List<NotificationModel> notifications;
|
||||
final bool isCompact;
|
||||
final bool isMobile;
|
||||
|
||||
const MessagingSidebar({
|
||||
Key? key,
|
||||
required this.conversations,
|
||||
required this.notifications,
|
||||
this.isCompact = false,
|
||||
this.isMobile = false,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(isMobile ? 16 : 20),
|
||||
color: Colors.white,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildMessagingHeader(),
|
||||
const SizedBox(height: 20),
|
||||
Expanded(
|
||||
child: _buildMessagingContent(),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildContactRPEButton(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMessagingHeader() {
|
||||
return const Text(
|
||||
'Messagerie avec Emma Dupont',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMessagingContent() {
|
||||
return Column(
|
||||
children: [
|
||||
// Messages existants
|
||||
Expanded(
|
||||
child: _buildMessagesList(),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
// Zone de saisie
|
||||
_buildMessageInput(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMessagesList() {
|
||||
if (conversations.isEmpty) {
|
||||
return const Center(
|
||||
child: Text(
|
||||
'Aucun message',
|
||||
style: TextStyle(
|
||||
color: Colors.grey,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Pour la démo, on affiche quelques messages fictifs
|
||||
return ListView(
|
||||
children: [
|
||||
_buildMessageBubble(
|
||||
'Bonjour, Emma a bien dormi aujourd\'hui.',
|
||||
isFromCurrentUser: false,
|
||||
timestamp: DateTime.now().subtract(const Duration(hours: 2)),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_buildMessageBubble(
|
||||
'Merci pour l\'information. Elle a bien mangé ?',
|
||||
isFromCurrentUser: true,
|
||||
timestamp: DateTime.now().subtract(const Duration(hours: 1)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMessageBubble(String content, {required bool isFromCurrentUser, required DateTime timestamp}) {
|
||||
return Align(
|
||||
alignment: isFromCurrentUser ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(maxWidth: 250),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: isFromCurrentUser
|
||||
? const Color(0xFF9CC5C0)
|
||||
: Colors.grey.shade200,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
content,
|
||||
style: TextStyle(
|
||||
color: isFromCurrentUser ? Colors.white : Colors.black87,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
_formatTimestamp(timestamp),
|
||||
style: TextStyle(
|
||||
color: isFromCurrentUser
|
||||
? Colors.white.withOpacity(0.8)
|
||||
: Colors.grey.shade600,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMessageInput() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.shade100,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Expanded(
|
||||
child: TextField(
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Écrivez votre message...',
|
||||
border: InputBorder.none,
|
||||
isDense: true,
|
||||
),
|
||||
maxLines: null,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
CircleAvatar(
|
||||
radius: 16,
|
||||
backgroundColor: const Color(0xFF9CC5C0),
|
||||
child: IconButton(
|
||||
iconSize: 16,
|
||||
padding: EdgeInsets.zero,
|
||||
onPressed: () {
|
||||
// TODO: Envoyer le message
|
||||
},
|
||||
icon: const Icon(
|
||||
Icons.send,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContactRPEButton() {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton(
|
||||
onPressed: () {
|
||||
// TODO: Contacter le RPE
|
||||
},
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
child: const Text(
|
||||
'Contacter le Relais Petite Enfance',
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTimestamp(DateTime timestamp) {
|
||||
final now = DateTime.now();
|
||||
final difference = now.difference(timestamp);
|
||||
|
||||
if (difference.inMinutes < 1) {
|
||||
return 'À l\'instant';
|
||||
} else if (difference.inHours < 1) {
|
||||
return '${difference.inMinutes}m';
|
||||
} else if (difference.inDays < 1) {
|
||||
return '${difference.inHours}h';
|
||||
} else {
|
||||
return '${timestamp.day}/${timestamp.month}';
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user