1452 lines
55 KiB
Dart
1452 lines
55 KiB
Dart
// ===== lib/pages/home.dart AVEC SUPPORT ENTREPRISE =====
|
|
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../main.dart';
|
|
import '../widgets/balance_widget.dart';
|
|
import '../pages/form_service.dart';
|
|
import '../widgets/responsive_helper.dart';
|
|
|
|
class HomePage extends StatefulWidget {
|
|
final bool showAppBar;
|
|
|
|
const HomePage({super.key, this.showAppBar = true});
|
|
|
|
@override
|
|
_HomePageState createState() => _HomePageState();
|
|
}
|
|
|
|
class _HomePageState extends State<HomePage>
|
|
with SingleTickerProviderStateMixin {
|
|
late AnimationController _animationController;
|
|
late Animation<double> _fadeAnimation;
|
|
late Animation<Offset> _slideAnimation;
|
|
late ScrollController _scrollController;
|
|
|
|
final TextEditingController _searchController = TextEditingController();
|
|
|
|
static const Color primaryColor = Color(0xFF006699);
|
|
static const Color secondaryColor = Color(0xFF0088CC);
|
|
static const Color backgroundColor = Color(0xFFF8FAFC);
|
|
static const Color surfaceColor = Colors.white;
|
|
static const Color successColor = Color(0xFF10B981);
|
|
static const Color cardShadowColor = Color(0x08000000);
|
|
static const Color enterpriseColor = Color(
|
|
0xFF006699,
|
|
); // Violet pour entreprise
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_setupAnimations();
|
|
_setupScrollController();
|
|
_initializeOrientations();
|
|
_loadServices();
|
|
}
|
|
|
|
void _initializeOrientations() {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
ResponsiveHelper.initializeOrientations(context);
|
|
});
|
|
}
|
|
|
|
void _setupAnimations() {
|
|
_animationController = AnimationController(
|
|
duration: Duration(milliseconds: 800),
|
|
vsync: this,
|
|
);
|
|
|
|
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
|
CurvedAnimation(parent: _animationController, curve: Curves.easeOut),
|
|
);
|
|
|
|
_slideAnimation = Tween<Offset>(
|
|
begin: Offset(0, 0.05),
|
|
end: Offset.zero,
|
|
).animate(
|
|
CurvedAnimation(parent: _animationController, curve: Curves.easeOut),
|
|
);
|
|
|
|
_animationController.forward();
|
|
}
|
|
|
|
void _setupScrollController() {
|
|
_scrollController = ScrollController();
|
|
}
|
|
|
|
void _loadServices() {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
final servicesController = Provider.of<ServicesController>(
|
|
context,
|
|
listen: false,
|
|
);
|
|
servicesController.loadServices();
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_animationController.dispose();
|
|
_searchController.dispose();
|
|
_scrollController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final screenHeight = MediaQuery.of(context).size.height;
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final isTablet = screenWidth > 600;
|
|
|
|
return Scaffold(
|
|
backgroundColor: backgroundColor,
|
|
body: FadeTransition(
|
|
opacity: _fadeAnimation,
|
|
child: SlideTransition(
|
|
position: _slideAnimation,
|
|
child:
|
|
widget.showAppBar
|
|
? _buildWithAppBar(isTablet)
|
|
: _buildWithSliverAppBar(screenHeight, isTablet),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildWithAppBar(bool isTablet) {
|
|
return Column(
|
|
children: [
|
|
_buildBeautifulAppBar(),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
padding: EdgeInsets.all(isTablet ? 24 : 20),
|
|
child: Column(
|
|
children: [
|
|
_buildModernSearchBar(),
|
|
SizedBox(height: 25),
|
|
_buildStylishCategoryTabs(),
|
|
SizedBox(height: 30),
|
|
_buildServicesContent(),
|
|
SizedBox(height: 20),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildWithSliverAppBar(double screenHeight, bool isTablet) {
|
|
return CustomScrollView(
|
|
controller: _scrollController,
|
|
slivers: [
|
|
SliverAppBar(
|
|
expandedHeight: screenHeight * (isTablet ? 0.28 : 0.32),
|
|
floating: false,
|
|
pinned: true,
|
|
elevation: 0,
|
|
backgroundColor: primaryColor,
|
|
flexibleSpace: FlexibleSpaceBar(
|
|
background: _buildBeautifulHeader(),
|
|
collapseMode: CollapseMode.parallax,
|
|
),
|
|
bottom: PreferredSize(
|
|
preferredSize: Size.fromHeight(0),
|
|
child: Container(
|
|
height: 30,
|
|
decoration: BoxDecoration(
|
|
color: backgroundColor,
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(30),
|
|
topRight: Radius.circular(30),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SliverToBoxAdapter(
|
|
child: Container(
|
|
color: backgroundColor,
|
|
padding: EdgeInsets.fromLTRB(
|
|
isTablet ? 24 : 20,
|
|
0,
|
|
isTablet ? 24 : 20,
|
|
isTablet ? 24 : 20,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
_buildModernSearchBar(),
|
|
SizedBox(height: 25),
|
|
_buildStylishCategoryTabs(),
|
|
SizedBox(height: 30),
|
|
_buildServicesContent(),
|
|
SizedBox(height: 120),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// ===== HEADER AMÉLIORÉ AVEC SUPPORT ENTREPRISE =====
|
|
Widget _buildBeautifulHeader() {
|
|
return Consumer<AuthController>(
|
|
builder: (context, authController, child) {
|
|
final isEnterprise = authController.isEnterpriseMember;
|
|
|
|
return Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors:
|
|
isEnterprise
|
|
? [
|
|
enterpriseColor,
|
|
enterpriseColor.withOpacity(0.8),
|
|
secondaryColor,
|
|
]
|
|
: [
|
|
primaryColor,
|
|
primaryColor.withOpacity(0.8),
|
|
secondaryColor,
|
|
],
|
|
stops: [0.0, 0.6, 1.0],
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.fromLTRB(20, 10, 20, 30),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Partie supérieure avec bienvenue et solde
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Badge type de compte
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 12,
|
|
vertical: 6,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.2),
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.3),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
isEnterprise
|
|
? Icons.business
|
|
: Icons.person,
|
|
color: Colors.white,
|
|
size: 14,
|
|
),
|
|
SizedBox(width: 6),
|
|
Text(
|
|
isEnterprise
|
|
? 'Compte Entreprise'
|
|
: 'TPE Wortis',
|
|
style: TextStyle(
|
|
color: Colors.white.withOpacity(0.9),
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
// Nom de l'agent
|
|
Text(
|
|
authController.agentName ?? "Agent",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
letterSpacing: 0.5,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
// Nom de l'entreprise si membre
|
|
if (isEnterprise &&
|
|
authController.enterprise?.nomEntreprise !=
|
|
null) ...[
|
|
SizedBox(height: 4),
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.apartment,
|
|
color: Colors.white.withOpacity(0.8),
|
|
size: 14,
|
|
),
|
|
SizedBox(width: 6),
|
|
Expanded(
|
|
child: Text(
|
|
authController
|
|
.enterprise!
|
|
.nomEntreprise,
|
|
style: TextStyle(
|
|
color: Colors.white.withOpacity(0.9),
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
// Widget de solde
|
|
Flexible(
|
|
child: Container(
|
|
padding: EdgeInsets.all(3),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.2),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: BalanceWidget(
|
|
showIcon: true,
|
|
compact: true,
|
|
textColor: Colors.white,
|
|
backgroundColor: Colors.transparent,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 20),
|
|
// Statistiques
|
|
_buildStatsRow(authController),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
// ===== NOUVELLE MÉTHODE: LIGNE DE STATISTIQUES =====
|
|
Widget _buildStatsRow(AuthController authController) {
|
|
return Consumer<ServicesController>(
|
|
builder: (context, servicesController, child) {
|
|
final activeCount = servicesController.activeServices.length;
|
|
final totalCount = servicesController.allServices.length;
|
|
final isEnterprise = authController.isEnterpriseMember;
|
|
|
|
// Version compacte pour petits écrans
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final isVerySmall = constraints.maxWidth < 350;
|
|
|
|
return Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: isVerySmall ? 8 : 12,
|
|
vertical: isVerySmall ? 8 : 10,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.2),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
_buildCompactStatItem(
|
|
icon: Icons.verified_user_rounded,
|
|
value: '$activeCount',
|
|
isVerySmall: isVerySmall,
|
|
),
|
|
_buildStatDivider(),
|
|
_buildCompactStatItem(
|
|
icon: Icons.apps_rounded,
|
|
value: '$totalCount',
|
|
isVerySmall: isVerySmall,
|
|
),
|
|
_buildStatDivider(),
|
|
_buildCompactStatItem(
|
|
icon:
|
|
isEnterprise
|
|
? Icons.business_center
|
|
: Icons.category_rounded,
|
|
value:
|
|
isEnterprise
|
|
? 'PRO'
|
|
: '${servicesController.sectors.length - 1}',
|
|
isVerySmall: isVerySmall,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildCompactStatItem({
|
|
required IconData icon,
|
|
required String value,
|
|
required bool isVerySmall,
|
|
}) {
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(icon, color: Colors.white, size: isVerySmall ? 16 : 18),
|
|
SizedBox(height: isVerySmall ? 2 : 4),
|
|
Text(
|
|
value,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: isVerySmall ? 14 : 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildStatDivider() {
|
|
return Container(
|
|
height: 35, // Réduit de 25 à 35
|
|
width: 1,
|
|
color: Colors.white.withOpacity(0.3),
|
|
margin: EdgeInsets.symmetric(horizontal: 4), // Réduit de 8 à 4
|
|
);
|
|
}
|
|
|
|
Widget _buildStatItem({
|
|
required IconData icon,
|
|
required String value,
|
|
required String label,
|
|
}) {
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 4), // Ajout de padding
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
mainAxisAlignment: MainAxisAlignment.center, // AJOUTÉ
|
|
crossAxisAlignment: CrossAxisAlignment.center, // AJOUTÉ
|
|
children: [
|
|
Icon(icon, color: Colors.white, size: 18), // Réduit de 20 à 18
|
|
SizedBox(height: 4),
|
|
Text(
|
|
value,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16, // Réduit de 18 à 16
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
SizedBox(height: 2),
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
color: Colors.white.withOpacity(0.8),
|
|
fontSize: 10, // Réduit de 11 à 10
|
|
height: 1.2, // Ajusté
|
|
),
|
|
textAlign: TextAlign.center,
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// ===== APP BAR SIMPLIFIÉE AVEC SUPPORT ENTREPRISE =====
|
|
Widget _buildBeautifulAppBar() {
|
|
return Consumer<AuthController>(
|
|
builder: (context, authController, child) {
|
|
final isEnterprise = authController.isEnterpriseMember;
|
|
|
|
return Container(
|
|
height: 140,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors:
|
|
isEnterprise
|
|
? [enterpriseColor, secondaryColor]
|
|
: [primaryColor, secondaryColor],
|
|
),
|
|
borderRadius: BorderRadius.only(
|
|
bottomLeft: Radius.circular(25),
|
|
bottomRight: Radius.circular(25),
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Badge type de compte
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 4,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.2),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
isEnterprise ? Icons.business : Icons.person,
|
|
color: Colors.white,
|
|
size: 12,
|
|
),
|
|
SizedBox(width: 4),
|
|
Text(
|
|
isEnterprise ? 'Entreprise' : 'TPE Wortis',
|
|
style: TextStyle(
|
|
color: Colors.white.withOpacity(0.9),
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(height: 5),
|
|
// Nom agent
|
|
Text(
|
|
authController.agentName ?? "Agent",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
// Nom entreprise si applicable
|
|
if (isEnterprise &&
|
|
authController.enterprise?.nomEntreprise !=
|
|
null) ...[
|
|
SizedBox(height: 2),
|
|
Text(
|
|
authController.enterprise!.nomEntreprise,
|
|
style: TextStyle(
|
|
color: Colors.white.withOpacity(0.8),
|
|
fontSize: 12,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
BalanceWidget(
|
|
showIcon: true,
|
|
compact: true,
|
|
textColor: Colors.white,
|
|
backgroundColor: Colors.white.withOpacity(0.2),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildModernSearchBar() {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: surfaceColor,
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: cardShadowColor,
|
|
blurRadius: 20,
|
|
offset: Offset(0, 8),
|
|
spreadRadius: 0,
|
|
),
|
|
],
|
|
),
|
|
child: Consumer<ServicesController>(
|
|
builder: (context, servicesController, child) {
|
|
return TextField(
|
|
controller: _searchController,
|
|
decoration: InputDecoration(
|
|
hintText: '🔍 Rechercher un service...',
|
|
hintStyle: TextStyle(color: Colors.grey[400], fontSize: 15),
|
|
suffixIcon:
|
|
servicesController.searchQuery.isNotEmpty
|
|
? IconButton(
|
|
icon: Icon(Icons.clear_rounded, color: Colors.grey),
|
|
onPressed: () {
|
|
_searchController.clear();
|
|
servicesController.clearSearch();
|
|
},
|
|
)
|
|
: IconButton(
|
|
icon: Icon(Icons.refresh_rounded, color: primaryColor),
|
|
onPressed:
|
|
servicesController.isLoading
|
|
? null
|
|
: () => servicesController.refreshServices(),
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.symmetric(
|
|
horizontal: 25,
|
|
vertical: 18,
|
|
),
|
|
),
|
|
onChanged: (value) {
|
|
servicesController.updateSearchQuery(value);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStylishCategoryTabs() {
|
|
return Consumer<ServicesController>(
|
|
builder: (context, servicesController, child) {
|
|
final sectors = servicesController.sectors;
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final isTablet = screenWidth > 600;
|
|
|
|
return SizedBox(
|
|
height: isTablet ? 70 : 55,
|
|
child: ListView.builder(
|
|
scrollDirection: Axis.horizontal,
|
|
padding: EdgeInsets.symmetric(horizontal: 5),
|
|
itemCount: sectors.length,
|
|
itemBuilder: (context, index) {
|
|
final sector = sectors[index];
|
|
final isSelected = servicesController.selectedSector == sector;
|
|
final count =
|
|
sector == 'Tous'
|
|
? servicesController.allServices.length
|
|
: servicesController.servicesCountBySector[sector] ?? 0;
|
|
|
|
return Padding(
|
|
padding: EdgeInsets.only(right: 15),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
servicesController.selectSector(sector);
|
|
},
|
|
child: AnimatedContainer(
|
|
duration: Duration(milliseconds: 200),
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: isTablet ? 30 : 20,
|
|
vertical: isTablet ? 20 : 15,
|
|
),
|
|
decoration: BoxDecoration(
|
|
gradient:
|
|
isSelected
|
|
? LinearGradient(
|
|
colors: [primaryColor, secondaryColor],
|
|
)
|
|
: null,
|
|
color: isSelected ? null : surfaceColor,
|
|
borderRadius: BorderRadius.circular(25),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color:
|
|
isSelected
|
|
? primaryColor.withOpacity(0.3)
|
|
: cardShadowColor,
|
|
blurRadius: isSelected ? 15 : 10,
|
|
offset: Offset(0, isSelected ? 8 : 4),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Flexible(
|
|
child: Text(
|
|
sector,
|
|
style: TextStyle(
|
|
color: isSelected ? Colors.white : Colors.black87,
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: isTablet ? 16 : 14,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
if (count > 0) ...[
|
|
SizedBox(width: isTablet ? 10 : 8),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: isTablet ? 8 : 6,
|
|
vertical: isTablet ? 3 : 2,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color:
|
|
isSelected
|
|
? Colors.white.withOpacity(0.25)
|
|
: primaryColor.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
'$count',
|
|
style: TextStyle(
|
|
color: isSelected ? Colors.white : primaryColor,
|
|
fontSize: isTablet ? 12 : 11,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildServicesContent() {
|
|
return Consumer<ServicesController>(
|
|
builder: (context, servicesController, child) {
|
|
if (servicesController.isLoading) {
|
|
return _buildLoadingState();
|
|
}
|
|
|
|
if (servicesController.error != null) {
|
|
return _buildErrorState(servicesController);
|
|
}
|
|
|
|
final services = servicesController.filteredServices;
|
|
|
|
if (services.isEmpty) {
|
|
return _buildEmptyState();
|
|
}
|
|
|
|
return _buildBeautifulServicesGrid(services);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildBeautifulServicesGrid(List<WortisService> services) {
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final screenHeight = MediaQuery.of(context).size.height;
|
|
final isLandscape = screenWidth > screenHeight;
|
|
|
|
int crossAxisCount = 2;
|
|
double childAspectRatio = 0.75;
|
|
double spacing = 16;
|
|
|
|
if (screenWidth > 1200) {
|
|
crossAxisCount = 5;
|
|
childAspectRatio = 0.85;
|
|
spacing = 24;
|
|
} else if (screenWidth > 900 && isLandscape) {
|
|
crossAxisCount = 4;
|
|
childAspectRatio = 0.82;
|
|
spacing = 20;
|
|
} else if (screenWidth > 800) {
|
|
crossAxisCount = 3;
|
|
childAspectRatio = 0.85;
|
|
spacing = 20;
|
|
} else if (screenWidth > 600) {
|
|
crossAxisCount = 3;
|
|
childAspectRatio = 0.8;
|
|
spacing = 18;
|
|
} else if (screenWidth > 400) {
|
|
crossAxisCount = 2;
|
|
childAspectRatio = 0.8;
|
|
spacing = 16;
|
|
}
|
|
|
|
final sortedServices = [...services];
|
|
final servicesController = Provider.of<ServicesController>(
|
|
context,
|
|
listen: false,
|
|
);
|
|
|
|
if (servicesController.selectedSector == 'Tous') {
|
|
sortedServices.sort((a, b) {
|
|
if (a.secteurActivite == 'Service Public' &&
|
|
b.secteurActivite != 'Service Public') {
|
|
return -1;
|
|
}
|
|
if (a.secteurActivite != 'Service Public' &&
|
|
b.secteurActivite == 'Service Public') {
|
|
return 1;
|
|
}
|
|
return a.name.compareTo(b.name);
|
|
});
|
|
}
|
|
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 4),
|
|
child: GridView.builder(
|
|
shrinkWrap: true,
|
|
physics: NeverScrollableScrollPhysics(),
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: crossAxisCount,
|
|
crossAxisSpacing: spacing,
|
|
mainAxisSpacing: spacing,
|
|
childAspectRatio: childAspectRatio,
|
|
),
|
|
itemCount: sortedServices.length,
|
|
itemBuilder: (context, index) {
|
|
final service = sortedServices[index];
|
|
return _buildGorgeousServiceCard(service);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
// Les autres méthodes restent identiques
|
|
Widget _buildGorgeousServiceCard(WortisService service) {
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final cardWidth = constraints.maxWidth;
|
|
final isTablet = cardWidth > 200;
|
|
final isVerySmall = cardWidth < 140;
|
|
final isTiny = cardWidth < 120; // NOUVEAU : pour très petits écrans
|
|
|
|
// Tailles adaptatives
|
|
final titleSize =
|
|
isTiny ? 11.0 : (isVerySmall ? 12.0 : (isTablet ? 18.0 : 14.0));
|
|
final sectorSize =
|
|
isTiny ? 8.0 : (isVerySmall ? 9.0 : (isTablet ? 12.0 : 9.0));
|
|
final buttonSize =
|
|
isTiny ? 10.0 : (isVerySmall ? 11.0 : (isTablet ? 14.0 : 11.0));
|
|
final statusSize =
|
|
isTiny ? 8.0 : (isVerySmall ? 9.0 : (isTablet ? 9.0 : 9.0));
|
|
final iconSize =
|
|
isTiny ? 8.0 : (isVerySmall ? 10.0 : (isTablet ? 14.0 : 10.0));
|
|
final buttonIconSize =
|
|
isTiny ? 12.0 : (isVerySmall ? 14.0 : (isTablet ? 15.0 : 16.0));
|
|
|
|
return Hero(
|
|
tag: service.name,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(isTablet ? 28 : 25),
|
|
onTap: () {
|
|
if (service.status) {
|
|
Navigator.of(context).push(
|
|
MaterialPageRoute(
|
|
builder:
|
|
(context) => FormService(serviceName: service.name),
|
|
),
|
|
);
|
|
} else {
|
|
_showServiceUnavailableDialog(service);
|
|
}
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: surfaceColor,
|
|
borderRadius: BorderRadius.circular(isTablet ? 28 : 25),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color:
|
|
service.status
|
|
? service.sectorColor.withOpacity(0.15)
|
|
: cardShadowColor,
|
|
blurRadius: 20,
|
|
offset: const Offset(0, 10),
|
|
),
|
|
],
|
|
border: Border.all(
|
|
color:
|
|
service.status
|
|
? service.sectorColor.withOpacity(0.2)
|
|
: Colors.grey.withOpacity(0.1),
|
|
width: 1.5,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// === IMAGE/BANNIÈRE ===
|
|
Flexible(
|
|
// CHANGÉ de Container à Flexible
|
|
flex: 3, // AJOUTÉ
|
|
child: Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors:
|
|
service.status
|
|
? [
|
|
service.sectorColor.withOpacity(0.15),
|
|
service.sectorColor.withOpacity(0.05),
|
|
]
|
|
: [
|
|
Colors.grey.withOpacity(0.15),
|
|
Colors.grey.withOpacity(0.05),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(isTablet ? 26 : 23),
|
|
topRight: Radius.circular(isTablet ? 26 : 23),
|
|
),
|
|
),
|
|
child: Stack(
|
|
fit: StackFit.expand, // AJOUTÉ
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(isTablet ? 26 : 23),
|
|
topRight: Radius.circular(isTablet ? 26 : 23),
|
|
),
|
|
child:
|
|
service.banner != null &&
|
|
service.banner!.isNotEmpty
|
|
? Image.network(
|
|
service.banner!,
|
|
fit: BoxFit.cover,
|
|
errorBuilder: (
|
|
context,
|
|
error,
|
|
stackTrace,
|
|
) {
|
|
return _buildIconFallback(
|
|
service,
|
|
isTablet,
|
|
isVerySmall,
|
|
);
|
|
},
|
|
loadingBuilder: (
|
|
context,
|
|
child,
|
|
loadingProgress,
|
|
) {
|
|
if (loadingProgress == null)
|
|
return child;
|
|
return Center(
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
color: service.sectorColor,
|
|
value:
|
|
loadingProgress
|
|
.expectedTotalBytes !=
|
|
null
|
|
? loadingProgress
|
|
.cumulativeBytesLoaded /
|
|
loadingProgress
|
|
.expectedTotalBytes!
|
|
: null,
|
|
),
|
|
);
|
|
},
|
|
)
|
|
: _buildIconFallback(
|
|
service,
|
|
isTablet,
|
|
isVerySmall,
|
|
),
|
|
),
|
|
|
|
// Badge de statut
|
|
Positioned(
|
|
top: isTablet ? 12 : (isTiny ? 6 : 8),
|
|
right: isTablet ? 12 : (isTiny ? 6 : 8),
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal:
|
|
isTablet
|
|
? 12
|
|
: (isTiny ? 4 : (isVerySmall ? 6 : 8)),
|
|
vertical:
|
|
isTablet
|
|
? 6
|
|
: (isTiny ? 2 : (isVerySmall ? 3 : 4)),
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: (service.status
|
|
? successColor
|
|
: Colors.orange)
|
|
.withOpacity(0.9),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.3),
|
|
width: 1,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.2),
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: isTablet ? 8 : (isTiny ? 4 : 6),
|
|
height: isTablet ? 8 : (isTiny ? 4 : 6),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
if (!isTiny && !isVerySmall) ...[
|
|
SizedBox(width: isTablet ? 6 : 4),
|
|
Text(
|
|
service.status ? 'Actif' : 'Inactif',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: statusSize,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// === CONTENU TEXTUEL ===
|
|
Flexible(
|
|
// CHANGÉ de Expanded à Flexible
|
|
flex: 4, // AJOUTÉ
|
|
child: Padding(
|
|
padding: EdgeInsets.all(
|
|
isTablet ? 16 : (isTiny ? 8 : (isVerySmall ? 10 : 12)),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min, // AJOUTÉ
|
|
children: [
|
|
// Nom du service
|
|
Flexible(
|
|
// CHANGÉ
|
|
child: Text(
|
|
service.name,
|
|
style: TextStyle(
|
|
fontSize: titleSize,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black87,
|
|
height: 1.1, // AJOUTÉ
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
|
|
SizedBox(height: isTablet ? 8 : (isTiny ? 4 : 6)),
|
|
|
|
// Secteur d'activité (masqué sur très petits écrans)
|
|
if (!isTiny)
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal:
|
|
isTablet ? 12 : (isVerySmall ? 6 : 8),
|
|
vertical: isTablet ? 6 : (isVerySmall ? 3 : 4),
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: service.sectorColor.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: service.sectorColor.withOpacity(0.3),
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.business_center_rounded,
|
|
color: service.sectorColor,
|
|
size: iconSize,
|
|
),
|
|
SizedBox(width: isTablet ? 6 : 4),
|
|
Flexible(
|
|
child: Text(
|
|
service.secteurActivite,
|
|
style: TextStyle(
|
|
fontSize: sectorSize,
|
|
color: service.sectorColor,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
Spacer(), // AJOUTÉ pour pousser le bouton en bas
|
|
// Bouton d'action
|
|
Container(
|
|
width: double.infinity,
|
|
padding: EdgeInsets.symmetric(
|
|
vertical:
|
|
isTablet
|
|
? 12
|
|
: (isTiny ? 6 : (isVerySmall ? 8 : 10)),
|
|
),
|
|
decoration: BoxDecoration(
|
|
gradient:
|
|
service.status
|
|
? LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
service.sectorColor.withOpacity(0.8),
|
|
service.sectorColor,
|
|
],
|
|
)
|
|
: null,
|
|
color:
|
|
service.status
|
|
? null
|
|
: Colors.grey.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color:
|
|
service.status
|
|
? Colors.transparent
|
|
: Colors.grey.withOpacity(0.2),
|
|
width: 1,
|
|
),
|
|
boxShadow:
|
|
service.status
|
|
? [
|
|
BoxShadow(
|
|
color: service.sectorColor
|
|
.withOpacity(0.25),
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 3),
|
|
),
|
|
]
|
|
: [],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
service.status
|
|
? Icons.arrow_forward_rounded
|
|
: Icons.schedule_rounded,
|
|
color:
|
|
service.status
|
|
? Colors.white
|
|
: Colors.grey[600],
|
|
size: buttonIconSize,
|
|
),
|
|
if (!isTiny) ...[
|
|
SizedBox(width: isTablet ? 6 : 4),
|
|
Flexible(
|
|
// AJOUTÉ
|
|
child: Text(
|
|
service.status
|
|
? 'Accéder'
|
|
: 'Indisponible',
|
|
style: TextStyle(
|
|
color:
|
|
service.status
|
|
? Colors.white
|
|
: Colors.red[800],
|
|
fontSize: buttonSize,
|
|
fontWeight: FontWeight.w600,
|
|
letterSpacing: 0.3,
|
|
),
|
|
overflow: TextOverflow.ellipsis, // AJOUTÉ
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildIconFallback(
|
|
WortisService service,
|
|
bool isTablet,
|
|
bool isVerySmall,
|
|
) {
|
|
return Container(
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors:
|
|
service.status
|
|
? [
|
|
service.sectorColor.withOpacity(0.2),
|
|
service.sectorColor.withOpacity(0.05),
|
|
]
|
|
: [
|
|
Colors.grey.withOpacity(0.2),
|
|
Colors.grey.withOpacity(0.05),
|
|
],
|
|
),
|
|
),
|
|
child: Center(
|
|
child: Icon(
|
|
service.flutterIcon,
|
|
color: service.status ? service.sectorColor : Colors.grey,
|
|
size: isVerySmall ? 32 : (isTablet ? 48 : 40),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildLoadingState() {
|
|
return SizedBox(
|
|
height: 300,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
SizedBox(
|
|
width: 60,
|
|
height: 60,
|
|
child: CircularProgressIndicator(
|
|
color: primaryColor,
|
|
strokeWidth: 4,
|
|
),
|
|
),
|
|
SizedBox(height: 20),
|
|
Text(
|
|
'Chargement des services...',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: Colors.grey[600],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildErrorState(ServicesController servicesController) {
|
|
return Container(
|
|
height: 300,
|
|
padding: EdgeInsets.all(24),
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.error_outline, size: 64, color: Colors.red[400]),
|
|
SizedBox(height: 16),
|
|
Text(
|
|
'Erreur de chargement',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
Text(
|
|
'Impossible de charger les services',
|
|
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
SizedBox(height: 24),
|
|
ElevatedButton.icon(
|
|
onPressed: () => servicesController.refreshServices(),
|
|
icon: Icon(Icons.refresh, size: 20),
|
|
label: Text('Réessayer'),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: primaryColor,
|
|
foregroundColor: Colors.white,
|
|
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEmptyState() {
|
|
return SizedBox(
|
|
height: 250,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.search_off, size: 64, color: Colors.grey[400]),
|
|
SizedBox(height: 16),
|
|
Text(
|
|
'Aucun service trouvé',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
color: Colors.grey[600],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
Text(
|
|
'Essayez avec d\'autres mots-clés',
|
|
style: TextStyle(fontSize: 14, color: Colors.grey[500]),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showServiceUnavailableDialog(WortisService service) {
|
|
showDialog(
|
|
context: context,
|
|
builder:
|
|
(context) => AlertDialog(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
title: Row(
|
|
children: [
|
|
Icon(Icons.warning, color: Colors.orange),
|
|
SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
'Service indisponible',
|
|
style: TextStyle(fontSize: 16),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
content: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Le service "${service.name}" est actuellement indisponible.',
|
|
),
|
|
SizedBox(height: 12),
|
|
Container(
|
|
padding: EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.orange.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Secteur: ${service.secteurActivite}',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
Text(
|
|
'Type: ${service.typeService}',
|
|
style: TextStyle(fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
child: Text('Compris'),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
Navigator.pop(context);
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Row(
|
|
children: [
|
|
Icon(Icons.notifications_active, color: Colors.white),
|
|
SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
'Vous serez notifié quand ${service.name} sera disponible',
|
|
),
|
|
),
|
|
],
|
|
),
|
|
backgroundColor: Colors.green,
|
|
behavior: SnackBarBehavior.floating,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.orange,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
child: Text(
|
|
'Me notifier',
|
|
style: TextStyle(color: Colors.white),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|