ElPoyo/EM2_ERP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor de la page de détails de l'équipement et ajouts de widgets communs

Browse Source 
Refactor de la page `equipment_detail_page` en la décomposant en plusieurs widgets de section réutilisables pour une meilleure lisibilité et maintenance :
- `EquipmentHeaderSection` : En-tête avec titre et informations principales.
- `EquipmentMainInfoSection` : Informations sur la catégorie, la marque, le modèle et le statut.
- `EquipmentNotesSection` : Affichage des notes.
- `EquipmentDatesSection` : Gestion de l'affichage des dates (achat, maintenance, création, etc.).
- `EquipmentPriceSection` : Section dédiée aux prix.
- `EquipmentMaintenanceHistorySection` : Historique des maintenances.
- `EquipmentAssociatedEventsSection` : Placeholder pour les événements à venir.
- `EquipmentReferencingContainers` : Affiche les boites (containers) qui contiennent cet équipement.

Ajout de plusieurs widgets communs et utilitaires :
- Widgets UI : `SearchBarWidget`, `SelectionAppBar`, `CustomFilterChip`, `EmptyState`, `InfoChip`, `StatusBadge`, `QuantityDisplay`.
- Dialogues : `RestockDialog` pour les consommables et `DialogUtils` pour les confirmations génériques.

Autres modifications :
- Mise à jour de la terminologie "Container" en "Boite" dans l'interface utilisateur.
- Amélioration de la sélection d'équipements dans le formulaire des boites.
- Ajout d'instructions pour Copilot (`copilot-instructions.md`).
- Mise à jour de certaines icônes pour les types de boites.
This commit is contained in:
ElPoyo
2025-10-30 17:40:28 +01:00
parent df6d54a007
commit 822d4443f9
25 changed files with 1687 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

602
em2rp/lib/views/equipment_detail_page.dart
View File

@@ -10,7 +10,14 @@ import 'package:em2rp/utils/colors.dart';
import 'package:em2rp/views/widgets/nav/custom_app_bar.dart';
import 'package:em2rp/views/equipment_form_page.dart';
import 'package:em2rp/views/widgets/equipment/equipment_parent_containers.dart';
import 'package:intl/intl.dart';
import 'package:em2rp/views/widgets/equipment/equipment_referencing_containers.dart';
import 'package:em2rp/views/widgets/equipment/equipment_header_section.dart';
import 'package:em2rp/views/widgets/equipment/equipment_main_info_section.dart';
import 'package:em2rp/views/widgets/equipment/equipment_notes_section.dart';
import 'package:em2rp/views/widgets/equipment/equipment_associated_events_section.dart';
import 'package:em2rp/views/widgets/equipment/equipment_price_section.dart';
import 'package:em2rp/views/widgets/equipment/equipment_maintenance_history_section.dart';
import 'package:em2rp/views/widgets/equipment/equipment_dates_section.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:printing/printing.dart';
@@ -49,9 +56,11 @@ class _EquipmentDetailPageState extends State<EquipmentDetailPage> {
}
@override
Widget build(BuildContext context) {
final isMobile = MediaQuery.of(context).size.width < 800;
final screenWidth = MediaQuery.of(context).size.width;
final isDesktop = screenWidth >= 1200;
final userProvider = Provider.of<LocalUserProvider>(context);
final hasManagePermission = userProvider.hasPermission('manage_equipment');
@@ -79,539 +88,102 @@ class _EquipmentDetailPageState extends State<EquipmentDetailPage> {
],
),
body: SingleChildScrollView(
padding: EdgeInsets.all(isMobile ? 16 : 24),
padding: EdgeInsets.all(screenWidth < 800 ? 16 : 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHeader(),
// 1. Titre de la machine
EquipmentHeaderSection(equipment: widget.equipment),
const SizedBox(height: 24),
_buildMainInfoSection(),
// 2. Info principale
EquipmentMainInfoSection(equipment: widget.equipment),
const SizedBox(height: 24),
if (hasManagePermission) ...[
_buildPriceSection(),
const SizedBox(height: 24),
],
if (widget.equipment.category == EquipmentCategory.consumable ||
widget.equipment.category == EquipmentCategory.cable) ...[
_buildQuantitySection(),
// 3. Notes
if (widget.equipment.notes != null && widget.equipment.notes!.isNotEmpty) ...[
EquipmentNotesSection(notes: widget.equipment.notes!),
const SizedBox(height: 24),
],
// 4. Événements associés
const EquipmentAssociatedEventsSection(),
const SizedBox(height: 24),
// 5-7. Prix, Historique des maintenances, Dates en layout responsive
if (isDesktop)
_buildDesktopTwoColumnLayout(hasManagePermission)
else
_buildMobileLayout(hasManagePermission),
const SizedBox(height: 24),
// Containers parents (si applicable)
if (widget.equipment.parentBoxIds.isNotEmpty) ...[
EquipmentParentContainers(
parentBoxIds: widget.equipment.parentBoxIds,
),
const SizedBox(height: 24),
],
_buildDatesSection(),
const SizedBox(height: 24),
if (widget.equipment.notes != null && widget.equipment.notes!.isNotEmpty) ...[
_buildNotesSection(),
// Containers associés
EquipmentReferencingContainers(
equipmentId: widget.equipment.id,
),
],
),
),
);
}
/// Layout 2 colonnes pour desktop
Widget _buildDesktopTwoColumnLayout(bool hasManagePermission) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Colonne gauche
Expanded(
child: Column(
children: [
// Prix
EquipmentPriceSection(equipment: widget.equipment),
const SizedBox(height: 24),
],
_buildMaintenanceHistorySection(hasManagePermission),
const SizedBox(height: 24),
_buildAssociatedEventsSection(),
],
),
),
);
}
Widget _buildHeader() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppColors.rouge, AppColors.rouge.withValues(alpha: 0.8)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColors.rouge.withValues(alpha: 0.3),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: widget.equipment.category.getIcon(
size: 32,
color: AppColors.rouge,
),
// Historique des maintenances
EquipmentMaintenanceHistorySection(
maintenances: _maintenances,
isLoading: _isLoadingMaintenances,
hasManagePermission: hasManagePermission,
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.equipment.id,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
Text(
'${widget.equipment.brand ?? ''} ${widget.equipment.model ?? ''}'.trim().isNotEmpty
? '${widget.equipment.brand ?? ''} ${widget.equipment.model ?? ''}'.trim()
: 'Marque/Modèle non défini',
style: const TextStyle(
fontSize: 16,
color: Colors.white70,
),
),
],
),
),
if (widget.equipment.category != EquipmentCategory.consumable &&
widget.equipment.category != EquipmentCategory.cable)
_buildStatusBadge(),
],
),
],
),
);
}
Widget _buildStatusBadge() {
final status = widget.equipment.status;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: status.color,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Text(
status.label,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: status.color,
),
),
],
),
);
}
Widget _buildMainInfoSection() {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Icons.info_outline, color: AppColors.rouge),
const SizedBox(width: 8),
Text(
'Informations principales',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const Divider(height: 24),
_buildInfoRow('Catégorie', widget.equipment.category.label),
if (widget.equipment.brand != null && widget.equipment.brand!.isNotEmpty)
_buildInfoRow('Marque', widget.equipment.brand!),
if (widget.equipment.model != null && widget.equipment.model!.isNotEmpty)
_buildInfoRow('Modèle', widget.equipment.model!),
if (widget.equipment.category != EquipmentCategory.consumable &&
widget.equipment.category != EquipmentCategory.cable)
_buildInfoRow('Statut', widget.equipment.status.label),
],
),
),
);
}
Widget _buildPriceSection() {
final hasPrices = widget.equipment.purchasePrice != null || widget.equipment.rentalPrice != null;
if (!hasPrices) return const SizedBox.shrink();
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Icons.euro, color: AppColors.rouge),
const SizedBox(width: 8),
Text(
'Prix',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const Divider(height: 24),
if (widget.equipment.purchasePrice != null)
_buildInfoRow(
'Prix d\'achat',
'${widget.equipment.purchasePrice!.toStringAsFixed(2)} €',
),
if (widget.equipment.rentalPrice != null)
_buildInfoRow(
'Prix de location',
'${widget.equipment.rentalPrice!.toStringAsFixed(2)} €/jour',
),
],
const SizedBox(width: 24),
// Colonne droite
Expanded(
child: EquipmentDatesSection(equipment: widget.equipment),
),
),
],
);
}
Widget _buildQuantitySection() {
final availableQty = widget.equipment.availableQuantity ?? 0;
final totalQty = widget.equipment.totalQuantity ?? 0;
final criticalThreshold = widget.equipment.criticalThreshold ?? 0;
final isCritical = criticalThreshold > 0 && availableQty <= criticalThreshold;
return Card(
elevation: 2,
color: isCritical ? Colors.red.shade50 : null,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
isCritical ? Icons.warning : Icons.inventory,
color: isCritical ? Colors.red : AppColors.rouge,
),
const SizedBox(width: 8),
Text(
'Quantités',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
color: isCritical ? Colors.red : null,
),
),
if (isCritical) ...[
const SizedBox(width: 12),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(12),
),
child: const Text(
'STOCK CRITIQUE',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
],
],
),
const Divider(height: 24),
_buildInfoRow(
'Quantité disponible',
availableQty.toString(),
valueColor: isCritical ? Colors.red : null,
valueWeight: isCritical ? FontWeight.bold : null,
),
_buildInfoRow('Quantité totale', totalQty.toString()),
if (criticalThreshold > 0)
_buildInfoRow('Seuil critique', criticalThreshold.toString()),
],
/// Layout simple colonne pour mobile/tablette
Widget _buildMobileLayout(bool hasManagePermission) {
return Column(
children: [
EquipmentPriceSection(equipment: widget.equipment),
const SizedBox(height: 24),
EquipmentMaintenanceHistorySection(
maintenances: _maintenances,
isLoading: _isLoadingMaintenances,
hasManagePermission: hasManagePermission,
),
),
const SizedBox(height: 24),
EquipmentDatesSection(equipment: widget.equipment),
],
);
}
Widget _buildDatesSection() {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Icons.calendar_today, color: AppColors.rouge),
const SizedBox(width: 8),
Text(
'Dates',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const Divider(height: 24),
if (widget.equipment.purchaseDate != null)
_buildInfoRow(
'Date d\'achat',
DateFormat('dd/MM/yyyy').format(widget.equipment.purchaseDate!),
),
if (widget.equipment.lastMaintenanceDate != null)
_buildInfoRow(
'Dernière maintenance',
DateFormat('dd/MM/yyyy').format(widget.equipment.lastMaintenanceDate!),
),
if (widget.equipment.nextMaintenanceDate != null)
_buildInfoRow(
'Prochaine maintenance',
DateFormat('dd/MM/yyyy').format(widget.equipment.nextMaintenanceDate!),
valueColor: widget.equipment.nextMaintenanceDate!.isBefore(DateTime.now())
? Colors.red
: null,
),
_buildInfoRow(
'Créé le',
DateFormat('dd/MM/yyyy à HH:mm').format(widget.equipment.createdAt),
),
_buildInfoRow(
'Modifié le',
DateFormat('dd/MM/yyyy à HH:mm').format(widget.equipment.updatedAt),
),
],
),
),
);
}
Widget _buildNotesSection() {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Icons.notes, color: AppColors.rouge),
const SizedBox(width: 8),
Text(
'Notes',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const Divider(height: 24),
Text(
widget.equipment.notes!,
style: const TextStyle(fontSize: 14),
),
],
),
),
);
}
Widget _buildMaintenanceHistorySection(bool hasManagePermission) {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Icons.build, color: AppColors.rouge),
const SizedBox(width: 8),
Expanded(
child: Text(
'Historique des maintenances',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
],
),
const Divider(height: 24),
if (_isLoadingMaintenances)
const Center(child: CircularProgressIndicator())
else if (_maintenances.isEmpty)
const Padding(
padding: EdgeInsets.all(16.0),
child: Center(
child: Text(
'Aucune maintenance enregistrée',
style: TextStyle(color: Colors.grey),
),
),
)
else
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: _maintenances.length,
separatorBuilder: (context, index) => const Divider(),
itemBuilder: (context, index) {
final maintenance = _maintenances[index];
return _buildMaintenanceItem(maintenance, hasManagePermission);
},
),
],
),
),
);
}
Widget _buildMaintenanceItem(MaintenanceModel maintenance, bool showCost) {
final isCompleted = maintenance.completedDate != null;
final typeInfo = _getMaintenanceTypeInfo(maintenance.type);
return ListTile(
contentPadding: const EdgeInsets.symmetric(vertical: 8),
leading: CircleAvatar(
backgroundColor: isCompleted ? Colors.green.withValues(alpha: 0.2) : Colors.orange.withValues(alpha: 0.2),
child: Icon(
isCompleted ? Icons.check_circle : Icons.schedule,
color: isCompleted ? Colors.green : Colors.orange,
),
),
title: Text(
maintenance.name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 4),
Row(
children: [
Icon(typeInfo.$2, size: 16, color: Colors.grey[600]),
const SizedBox(width: 4),
Text(typeInfo.$1, style: TextStyle(color: Colors.grey[600], fontSize: 12)),
],
),
const SizedBox(height: 4),
Text(
isCompleted
? 'Effectuée le ${DateFormat('dd/MM/yyyy').format(maintenance.completedDate!)}'
: 'Planifiée le ${DateFormat('dd/MM/yyyy').format(maintenance.scheduledDate)}',
style: TextStyle(fontSize: 12, color: Colors.grey[700]),
),
if (showCost && maintenance.cost != null) ...[
const SizedBox(height: 4),
Text(
'Coût: ${maintenance.cost!.toStringAsFixed(2)} €',
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
),
],
],
),
);
}
Widget _buildAssociatedEventsSection() {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(Icons.event, color: AppColors.rouge),
const SizedBox(width: 8),
Text(
'Événements associés',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const Divider(height: 24),
const Padding(
padding: EdgeInsets.all(16.0),
child: Center(
child: Text(
'Fonctionnalité à implémenter',
style: TextStyle(color: Colors.grey, fontStyle: FontStyle.italic),
),
),
),
],
),
),
);
}
Widget _buildInfoRow(
String label,
String value, {
Color? valueColor,
FontWeight? valueWeight,
}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 180,
child: Text(
label,
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey[700],
),
),
),
Expanded(
child: Text(
value,
style: TextStyle(
color: valueColor,
fontWeight: valueWeight ?? FontWeight.w600,
),
),
),
],
),
);
}
void _showQRCode() {
showDialog(
context: context,
@@ -805,16 +377,4 @@ class _EquipmentDetailPageState extends State<EquipmentDetailPage> {
),
);
}
(String, IconData) _getMaintenanceTypeInfo(MaintenanceType type) {
switch (type) {
case MaintenanceType.preventive:
return ('Préventive', Icons.schedule);
case MaintenanceType.corrective:
return ('Corrective', Icons.build);
case MaintenanceType.inspection:
return ('Inspection', Icons.search);
}
}
}
}