feat: Enhance container management UI with new management components and improved QR code generation flow

em2rp/lib/services/pdf_service.dart

@@ -21,17 +21,17 @@ class PDFGeneratorConfig {
 
   static const small = PDFGeneratorConfig(
     qrCodeSize: 150,
-    itemsPerPage: 20,
+    itemsPerPage: 50,
   );
 
   static const medium = PDFGeneratorConfig(
     qrCodeSize: 250,
-    itemsPerPage: 6,
+    itemsPerPage: 20,
   );
 
   static const large = PDFGeneratorConfig(
     qrCodeSize: 300,
-    itemsPerPage: 10,
+    itemsPerPage: 12,
   );
 
   static PDFGeneratorConfig fromFormat(QRLabelFormat format) {

em2rp/lib/views/container_management_page.dart

@@ -5,13 +5,14 @@ import 'package:em2rp/utils/permission_gate.dart';
 import 'package:em2rp/views/widgets/nav/main_drawer.dart';
 import 'package:em2rp/views/widgets/nav/custom_app_bar.dart';
 import 'package:em2rp/providers/container_provider.dart';
+import 'package:em2rp/providers/local_user_provider.dart';
 import 'package:em2rp/models/container_model.dart';
 import 'package:em2rp/models/equipment_model.dart';
-import 'package:em2rp/services/pdf_service.dart';
+import 'package:em2rp/views/widgets/common/qr_code_format_selector_dialog.dart';
-import 'package:em2rp/views/widgets/common/qr_code_dialog.dart';
 import 'package:em2rp/mixins/selection_mode_mixin.dart';
-import 'package:printing/printing.dart';
+import 'package:em2rp/views/widgets/management/management_search_bar.dart';
-import 'package:pdf/pdf.dart';
+import 'package:em2rp/views/widgets/management/management_card.dart';
+import 'package:em2rp/views/widgets/management/management_list.dart';
 
 class ContainerManagementPage extends StatefulWidget {
   const ContainerManagementPage({super.key});
@@ -81,7 +82,45 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
                   ],
                 ],
               )
-            : const CustomAppBar(title: 'Gestion des Containers'),
+            : AppBar(
+                title: const Text('Gestion des Containers'),
+                backgroundColor: AppColors.rouge,
+                leading: IconButton(
+                  icon: const Icon(Icons.arrow_back),
+                  tooltip: 'Retour à la gestion des équipements',
+                  onPressed: () => Navigator.pushReplacementNamed(context, '/equipment_management'),
+                ),
+                actions: [
+                  IconButton(
+                    icon: const Icon(Icons.logout, color: Colors.white),
+                    onPressed: () async {
+                      final shouldLogout = await showDialog<bool>(
+                        context: context,
+                        builder: (context) => AlertDialog(
+                          title: const Text('Déconnexion'),
+                          content: const Text('Voulez-vous vraiment vous déconnecter ?'),
+                          actions: [
+                            TextButton(
+                              onPressed: () => Navigator.pop(context, false),
+                              child: const Text('Annuler'),
+                            ),
+                            TextButton(
+                              onPressed: () => Navigator.pop(context, true),
+                              child: const Text('Déconnexion'),
+                            ),
+                          ],
+                        ),
+                      );
+                      if (shouldLogout == true && context.mounted) {
+                        await context.read<LocalUserProvider>().signOut();
+                        if (context.mounted) {
+                          Navigator.pushReplacementNamed(context, '/login');
+                        }
+                      }
+                    },
+                  ),
+                ],
+              ),
         drawer: const MainDrawer(currentPage: '/container_management'),
         floatingActionButton: !isSelectionMode
             ? FloatingActionButton.extended(
@@ -130,50 +169,14 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
   }
 
   Widget _buildSearchBar() {
-    return Container(
+    return ManagementSearchBar(
-      padding: const EdgeInsets.all(16),
+      controller: _searchController,
-      decoration: BoxDecoration(
+      hintText: 'Rechercher un container...',
-        color: Colors.white,
+      onChanged: (value) {
-        boxShadow: [
+        context.read<ContainerProvider>().setSearchQuery(value);
-          BoxShadow(
+      },
-            color: Colors.grey.withOpacity(0.1),
+      onSelectionModeToggle: isSelectionMode ? null : toggleSelectionMode,
-            spreadRadius: 1,
+      showSelectionModeButton: !isSelectionMode,
-            blurRadius: 3,
-            offset: const Offset(0, 1),
-          ),
-        ],
-      ),
-      child: Row(
-        children: [
-          Expanded(
-            child: TextField(
-              controller: _searchController,
-              decoration: InputDecoration(
-                hintText: 'Rechercher un container...',
-                prefixIcon: const Icon(Icons.search, color: AppColors.rouge),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(8),
-                  borderSide: BorderSide(color: Colors.grey.shade300),
-                ),
-                contentPadding: const EdgeInsets.symmetric(
-                  horizontal: 16,
-                  vertical: 12,
-                ),
-              ),
-              onChanged: (value) {
-                context.read<ContainerProvider>().setSearchQuery(value);
-              },
-            ),
-          ),
-          const SizedBox(width: 12),
-          if (!isSelectionMode)
-            IconButton(
-              icon: const Icon(Icons.checklist, color: AppColors.rouge),
-              tooltip: 'Mode sélection',
-              onPressed: toggleSelectionMode,
-            ),
-        ],
-      ),
     );
   }
 
@@ -319,59 +322,15 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
   Widget _buildContainerList() {
     return Consumer<ContainerProvider>(
       builder: (context, provider, child) {
-        return StreamBuilder<List<ContainerModel>>(
+        return ManagementList<ContainerModel>(
           stream: provider.containersStream,
-          builder: (context, snapshot) {
+          cachedItems: _cachedContainers,
-            // Utiliser les données en cache si disponibles pendant le rebuild
+          emptyMessage: 'Aucun container trouvé',
-            if (snapshot.hasData) {
+          emptyIcon: Icons.inventory_2_outlined,
-              _cachedContainers = snapshot.data;
+          onDataReceived: (items) {
-            }
+            _cachedContainers = items;
-
-            // Afficher le loader seulement au premier chargement
-            if (snapshot.connectionState == ConnectionState.waiting && _cachedContainers == null) {
-              return const Center(child: CircularProgressIndicator());
-            }
-
-            if (snapshot.hasError) {
-              return Center(
-                child: Text('Erreur: ${snapshot.error}'),
-              );
-            }
-
-            final containers = _cachedContainers ?? snapshot.data ?? [];
-
-            if (containers.isEmpty) {
-              return Center(
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Icon(
-                      Icons.inventory_2_outlined,
-                      size: 80,
-                      color: Colors.grey.shade400,
-                    ),
-                    const SizedBox(height: 16),
-                    Text(
-                      'Aucun container trouvé',
-                      style: TextStyle(
-                        fontSize: 18,
-                        color: Colors.grey.shade600,
-                      ),
-                    ),
-                  ],
-                ),
-              );
-            }
-
-            return ListView.builder(
-              padding: const EdgeInsets.all(16),
-              itemCount: containers.length,
-              itemBuilder: (context, index) {
-                final container = containers[index];
-                return _buildContainerCard(container);
-              },
-            );
           },
+          itemBuilder: (container) => _buildContainerCard(container),
         );
       },
     );
@@ -380,192 +339,71 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
   Widget _buildContainerCard(ContainerModel container) {
     final isSelected = isItemSelected(container.id);
 
-    return Card(
+    return ManagementCard<ContainerModel>(
-      margin: const EdgeInsets.only(bottom: 12),
+      item: container,
-      elevation: 2,
+      getId: (c) => c.id,
-      shape: RoundedRectangleBorder(
+      getTitle: (c) => c.id,
-        borderRadius: BorderRadius.circular(8),
+      getSubtitle: (c) => c.name,
-        side: isSelected
+      getIcon: (c) => c.type.getIcon(
-            ? const BorderSide(color: AppColors.rouge, width: 2)
+        size: 40,
-            : BorderSide.none,
+        color: AppColors.rouge,
       ),
-      child: InkWell(
+      getInfoChips: (c) => [
-        onTap: () {
+        InfoChip(
-          if (isSelectionMode) {
+          label: c.type.label,
-            toggleItemSelection(container.id);
+          icon: Icons.category,
-          } else {
-            _viewContainerDetails(container);
-          }
-        },
-        onLongPress: () {
-          if (!isSelectionMode) {
-            toggleSelectionMode();
-            toggleItemSelection(container.id);
-          }
-        },
-        borderRadius: BorderRadius.circular(8),
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Row(
-            children: [
-              if (isSelectionMode)
-                Padding(
-                  padding: const EdgeInsets.only(right: 16),
-                  child: Checkbox(
-                    value: isSelected,
-                    onChanged: (value) {
-                      toggleItemSelection(container.id);
-                    },
-                    activeColor: AppColors.rouge,
-                  ),
-                ),
-
-              // Icône du type de container
-              container.type.getIcon(
-                size: 40,
-                color: AppColors.rouge,
-              ),
-
-              const SizedBox(width: 16),
-
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      container.id,
-                      style: const TextStyle(
-                        fontWeight: FontWeight.bold,
-                        fontSize: 16,
-                      ),
-                    ),
-                    const SizedBox(height: 4),
-                    Text(
-                      container.name,
-                      style: TextStyle(
-                        fontSize: 14,
-                        color: Colors.grey.shade700,
-                      ),
-                    ),
-                    const SizedBox(height: 4),
-                    Row(
-                      children: [
-                        _buildInfoChip(
-                          container.type.label,
-                          Icons.category,
-                        ),
-                        const SizedBox(width: 8),
-                        _buildInfoChip(
-                          '${container.itemCount} items',
-                          Icons.inventory,
-                        ),
-                      ],
-                    ),
-                  ],
-                ),
-              ),
-
-              const SizedBox(width: 16),
-
-              // Badge de statut
-              _buildStatusBadge(container.status),
-
-              if (!isSelectionMode) ...[
-                const SizedBox(width: 8),
-                PopupMenuButton<String>(
-                  icon: const Icon(Icons.more_vert),
-                  onSelected: (value) => _handleMenuAction(value, container),
-                  itemBuilder: (context) => [
-                    const PopupMenuItem(
-                      value: 'view',
-                      child: Row(
-                        children: [
-                          Icon(Icons.visibility, size: 20),
-                          SizedBox(width: 8),
-                          Text('Voir détails'),
-                        ],
-                      ),
-                    ),
-                    const PopupMenuItem(
-                      value: 'edit',
-                      child: Row(
-                        children: [
-                          Icon(Icons.edit, size: 20),
-                          SizedBox(width: 8),
-                          Text('Modifier'),
-                        ],
-                      ),
-                    ),
-                    const PopupMenuItem(
-                      value: 'qr',
-                      child: Row(
-                        children: [
-                          Icon(Icons.qr_code, size: 20),
-                          SizedBox(width: 8),
-                          Text('QR Code'),
-                        ],
-                      ),
-                    ),
-                    const PopupMenuItem(
-                      value: 'delete',
-                      child: Row(
-                        children: [
-                          Icon(Icons.delete, color: Colors.red, size: 20),
-                          SizedBox(width: 8),
-                          Text('Supprimer', style: TextStyle(color: Colors.red)),
-                        ],
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ],
-          ),
         ),
-      ),
+        InfoChip(
-    );
+          label: '${c.itemCount} items',
-  }
+          icon: Icons.inventory,
-
-  Widget _buildInfoChip(String label, IconData icon) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      decoration: BoxDecoration(
-        color: Colors.grey.shade100,
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Icon(icon, size: 14, color: Colors.grey.shade700),
-          const SizedBox(width: 4),
-          Text(
-            label,
-            style: TextStyle(
-              fontSize: 12,
-              color: Colors.grey.shade700,
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildStatusBadge(EquipmentStatus status) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-      decoration: BoxDecoration(
-        color: status.color.withOpacity(0.1),
-        borderRadius: BorderRadius.circular(16),
-        border: Border.all(color: status.color),
-      ),
-      child: Text(
-        status.label,
-        style: TextStyle(
-          color: status.color,
-          fontWeight: FontWeight.bold,
-          fontSize: 12,
         ),
+      ],
+      getStatusBadge: (c) => StatusBadge(
+        label: c.status.label,
+        color: c.status.color,
       ),
+      actions: const [
+        CardAction(
+          id: 'view',
+          label: 'Voir détails',
+          icon: Icons.visibility,
+        ),
+        CardAction(
+          id: 'edit',
+          label: 'Modifier',
+          icon: Icons.edit,
+        ),
+        CardAction(
+          id: 'qr',
+          label: 'QR Code',
+          icon: Icons.qr_code,
+        ),
+        CardAction(
+          id: 'delete',
+          label: 'Supprimer',
+          icon: Icons.delete,
+          color: Colors.red,
+        ),
+      ],
+      onActionSelected: _handleMenuAction,
+      onTap: () {
+        if (isSelectionMode) {
+          toggleItemSelection(container.id);
+        } else {
+          _viewContainerDetails(container);
+        }
+      },
+      onLongPress: () {
+        if (!isSelectionMode) {
+          toggleSelectionMode();
+          toggleItemSelection(container.id);
+        }
+      },
+      isSelectionMode: isSelectionMode,
+      isSelected: isSelected,
+      onSelectionChanged: (value) {
+        toggleItemSelection(container.id);
+      },
     );
   }
 
@@ -579,10 +417,7 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
         _editContainer(container);
         break;
       case 'qr':
-        showDialog(
+        // Non utilisé - les QR codes multiples sont générés via _generateQRCodesForSelected
-          context: context,
-          builder: (context) => QRCodeDialog.forContainer(container),
-        );
         break;
       case 'delete':
         _deleteContainer(container);
@@ -641,73 +476,25 @@ class _ContainerManagementPageState extends State<ContainerManagementPage>
       return;
     }
 
-    // Afficher le dialogue de sélection de format
+    // Afficher le dialogue de sélection de format avec le widget générique
-    final format = await showDialog<QRLabelFormat>(
+    if (mounted) {
-      context: context,
+      showDialog(
-      builder: (context) => AlertDialog(
+        context: context,
-        title: const Text('Format des étiquettes'),
+        builder: (context) => QRCodeFormatSelectorDialog<ContainerModel>(
-        content: Column(
+          itemList: selectedContainers,
-          mainAxisSize: MainAxisSize.min,
+          getId: (c) => c.id,
-          children: [
+          getTitle: (c) => c.name,
-            ListTile(
+          getDetails: (ContainerModel c) {
-              leading: const Icon(Icons.qr_code_2),
+            final equipment = containerEquipmentMap[c.id] ?? <EquipmentModel>[];
-              title: const Text('Petits QR codes'),
+            return [
-              subtitle: const Text('2×2 cm - QR code + ID (20 par page)'),
+              'Contenu (${equipment.length}):',
-              onTap: () => Navigator.pop(context, QRLabelFormat.small),
+              ...equipment.take(5).map((eq) => '- ${eq.id}'),
-            ),
+              if (equipment.length > 5) '... +${equipment.length - 5}',
-            ListTile(
+            ];
-              leading: const Icon(Icons.qr_code),
+          },
-              title: const Text('QR codes moyens'),
+          dialogTitle: 'Générer ${selectedContainers.length} QR Code(s)',
-              subtitle: const Text('4×4 cm - QR code + ID (6 par page)'),
-              onTap: () => Navigator.pop(context, QRLabelFormat.medium),
-            ),
-            ListTile(
-              leading: const Icon(Icons.label),
-              title: const Text('Grandes étiquettes'),
-              subtitle: const Text('QR code + ID + Type + Contenu (10 par page)'),
-              onTap: () => Navigator.pop(context, QRLabelFormat.large),
-            ),
-          ],
         ),
-        actions: [
-          TextButton(
-            onPressed: () => Navigator.pop(context),
-            child: const Text('Annuler'),
-          ),
-        ],
-      ),
-    );
-
-    if (format == null || !mounted) return;
-
-    // Générer et afficher le PDF avec la nouvelle API optimisée
-    try {
-      final pdfBytes = await PDFService.generatePDF<ContainerModel>(
-        items: selectedContainers,
-        format: format,
-        getId: (c) => c.id,
-        getTitle: (c) => c.name,
-        getDetails: format == QRLabelFormat.large ? (ContainerModel c) {
-          final equipment = containerEquipmentMap[c.id] ?? <EquipmentModel>[];
-          return [
-            'Contenu (${equipment.length}):',
-            ...equipment.take(5).map((eq) => '- ${eq.id}'),
-            if (equipment.length > 5) '... +${equipment.length - 5}',
-          ];
-        } : null,
       );
-
-      if (mounted) {
-        await Printing.layoutPdf(
-          onLayout: (PdfPageFormat format) async => pdfBytes,
-        );
-      }
-    } catch (e) {
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Erreur lors de la génération: $e')),
-        );
-      }
     }
   }
 

em2rp/lib/views/equipment_detail_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
 import 'package:provider/provider.dart';
 import 'package:em2rp/models/equipment_model.dart';
 import 'package:em2rp/models/maintenance_model.dart';
@@ -293,17 +294,49 @@ class _EquipmentDetailPageState extends State<EquipmentDetailPage> {
   }
 
   Future<void> _exportQRCode() async {
+    // Afficher le dialog de chargement
+    showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (context) => Dialog(
+        child: Container(
+          padding: const EdgeInsets.all(24),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const CircularProgressIndicator(
+                valueColor: AlwaysStoppedAnimation<Color>(AppColors.rouge),
+              ),
+              const SizedBox(height: 16),
+              const Text(
+                'Génération du QR Code...',
+                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
     try {
-      final qrImage = await QRCodeService.generateQRCode(
+      // Exécuter la génération dans un isolate séparé pour éviter le freeze
+      final qrImage = await compute(
+        _generateQRCodeIsolate,
         widget.equipment.id,
-        size: 1024,
-        useCache: false,
       );
 
-      await Printing.sharePdf(
+      // Fermer le dialog de chargement
-        bytes: qrImage,
+      if (mounted) {
-        filename: 'QRCode_${widget.equipment.id}.png',
+        Navigator.pop(context);
-      );
+      }
+
+      // Partager le fichier
+      if (mounted) {
+        await Printing.sharePdf(
+          bytes: qrImage,
+          filename: 'QRCode_${widget.equipment.id}.png',
+        );
+      }
 
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
@@ -314,14 +347,28 @@ class _EquipmentDetailPageState extends State<EquipmentDetailPage> {
         );
       }
     } catch (e) {
+      // Fermer le dialog de chargement en cas d'erreur
       if (mounted) {
+        Navigator.pop(context);
         ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Erreur lors de l\'export: $e')),
+          SnackBar(
+            content: Text('Erreur lors de l\'export: $e'),
+            backgroundColor: Colors.red,
+          ),
         );
       }
     }
   }
 
+  /// Fonction statique pour exécuter la génération QR code dans un isolate
+  static Future<Uint8List> _generateQRCodeIsolate(String equipmentId) async {
+    return await QRCodeService.generateQRCode(
+      equipmentId,
+      size: 1024,
+      useCache: false,
+    );
+  }
+
   void _editEquipment() {
     Navigator.push(
       context,

em2rp/lib/views/equipment_management_page.dart

@@ -11,6 +11,7 @@ import 'package:em2rp/views/equipment_detail_page.dart';
 import 'package:em2rp/views/widgets/common/qr_code_dialog.dart';
 import 'package:em2rp/views/widgets/common/qr_code_format_selector_dialog.dart';
 import 'package:em2rp/mixins/selection_mode_mixin.dart';
+import 'package:em2rp/views/widgets/management/management_list.dart';
 
 class EquipmentManagementPage extends StatefulWidget {
   const EquipmentManagementPage({super.key});
@@ -418,61 +419,19 @@ class _EquipmentManagementPageState extends State<EquipmentManagementPage>
   Widget _buildEquipmentList() {
     return Consumer<EquipmentProvider>(
       builder: (context, provider, child) {
-        return StreamBuilder<List<EquipmentModel>>(
+        return ManagementList<EquipmentModel>(
           stream: provider.equipmentStream,
-          builder: (context, snapshot) {
+          cachedItems: _cachedEquipment,
-            // Mettre en cache les données quand elles arrivent
+          emptyMessage: 'Aucun équipement trouvé',
-            if (snapshot.hasData) {
+          emptyIcon: Icons.inventory_2_outlined,
-              _cachedEquipment = snapshot.data;
+          onDataReceived: (items) {
-            }
+            _cachedEquipment = items;
-
+          },
-            // Afficher le loader seulement si on n'a pas encore de cache
+          itemBuilder: (equipment) {
-            if (snapshot.connectionState == ConnectionState.waiting && _cachedEquipment == null) {
+            // Trier les équipements par nom
-              return const Center(child: CircularProgressIndicator());
+            final sortedEquipment = List<EquipmentModel>.from(_cachedEquipment ?? [equipment]);
-            }
-
-            if (snapshot.hasError) {
-              return Center(
-                child: Text('Erreur: ${snapshot.error}'),
-              );
-            }
-
-            // Utiliser le cache si disponible, sinon les nouvelles données
-            final equipment = _cachedEquipment ?? snapshot.data ?? [];
-
-            if (equipment.isEmpty) {
-              return Center(
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Icon(Icons.inventory_2_outlined,
-                        size: 64, color: Colors.grey[400]),
-                    const SizedBox(height: 16),
-                    Text(
-                      'Aucun équipement trouvé',
-                      style: TextStyle(fontSize: 18, color: Colors.grey[600]),
-                    ),
-                    const SizedBox(height: 8),
-                    Text(
-                      'Ajoutez votre premier équipement',
-                      style: TextStyle(fontSize: 14, color: Colors.grey[500]),
-                    ),
-                  ],
-                ),
-              );
-            }
-
-            // Créer une copie pour le tri
-            final sortedEquipment = List<EquipmentModel>.from(equipment);
             sortedEquipment.sort((a, b) => a.name.compareTo(b.name));
-
+            return _buildEquipmentCard(equipment);
-            return ListView.builder(
-              padding: const EdgeInsets.all(16),
-              itemCount: sortedEquipment.length,
-              itemBuilder: (context, index) {
-                return _buildEquipmentCard(sortedEquipment[index]);
-              },
-            );
           },
         );
       },
@@ -804,8 +763,11 @@ class _EquipmentManagementPageState extends State<EquipmentManagementPage>
       // Plusieurs équipements : afficher le sélecteur de format
       showDialog(
         context: context,
-        builder: (context) => QRCodeFormatSelectorDialog(
+        builder: (context) => QRCodeFormatSelectorDialog<EquipmentModel>(
-          equipmentList: selectedEquipment,
+          itemList: selectedEquipment,
+          getId: (eq) => eq.id,
+          getTitle: (eq) => '${eq.brand ?? ''} ${eq.model ?? ''}'.trim(),
+          dialogTitle: 'Générer ${selectedEquipment.length} QR Code(s)',
         ),
       );
     }

em2rp/lib/views/widgets/common/qr_code_dialog.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/foundation.dart';
 import 'package:qr_flutter/qr_flutter.dart';
 import 'package:em2rp/utils/colors.dart';
 import 'package:em2rp/services/qr_code_service.dart';
@@ -122,14 +123,42 @@ class QRCodeDialog<T> extends StatelessWidget {
   }
 
   Future<void> _downloadQRCode(BuildContext context, String id) async {
+    // Afficher le dialog de chargement
+    showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (context) => Dialog(
+        child: Container(
+          padding: const EdgeInsets.all(24),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const CircularProgressIndicator(
+                valueColor: AlwaysStoppedAnimation<Color>(AppColors.rouge),
+              ),
+              const SizedBox(height: 16),
+              const Text(
+                'Génération du QR Code...',
+                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
     try {
-      // Générer l'image QR code en haute résolution
+      // Exécuter la génération dans un isolate séparé
-      final qrImage = await QRCodeService.generateQRCode(
+      final qrImage = await compute(
+        _generateQRCodeIsolate,
         id,
-        size: 1024,
-        useCache: false,
       );
 
+      // Fermer le dialog de chargement
+      if (context.mounted) {
+        Navigator.pop(context);
+      }
+
       // Utiliser la bibliothèque printing pour sauvegarder l'image
       await Printing.sharePdf(
         bytes: qrImage,
@@ -145,6 +174,11 @@ class QRCodeDialog<T> extends StatelessWidget {
         );
       }
     } catch (e) {
+      // Fermer le dialog de chargement en cas d'erreur
+      if (context.mounted) {
+        Navigator.pop(context);
+      }
+
       if (context.mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
@@ -156,6 +190,15 @@ class QRCodeDialog<T> extends StatelessWidget {
     }
   }
 
+  /// Fonction statique pour exécuter la génération QR code dans un isolate
+  static Future<Uint8List> _generateQRCodeIsolate(String id) async {
+    return await QRCodeService.generateQRCode(
+      id,
+      size: 1024,
+      useCache: false,
+    );
+  }
+
   /// Factory pour équipement
   static QRCodeDialog forEquipment(dynamic equipment) {
     return QRCodeDialog(

em2rp/lib/views/widgets/common/qr_code_format_selector_dialog.dart

@@ -1,16 +1,24 @@
 import 'package:flutter/material.dart';
 import 'package:em2rp/utils/colors.dart';
-import 'package:em2rp/models/equipment_model.dart';
 import 'package:em2rp/services/pdf_service.dart';
 import 'package:printing/printing.dart';
 
 /// Widget réutilisable pour sélectionner le format de génération de QR codes multiples
-class QRCodeFormatSelectorDialog extends StatelessWidget {
+/// Compatible avec n'importe quel type d'objet (équipements, conteneurs, etc.)
-  final List<EquipmentModel> equipmentList;
+class QRCodeFormatSelectorDialog<T> extends StatelessWidget {
+  final List<T> itemList;
+  final String Function(T) getId;
+  final String Function(T) getTitle;
+  final List<String> Function(T)? getDetails;
+  final String dialogTitle;
 
   const QRCodeFormatSelectorDialog({
     super.key,
-    required this.equipmentList,
+    required this.itemList,
+    required this.getId,
+    required this.getTitle,
+    this.getDetails,
+    required this.dialogTitle,
   });
 
   @override
@@ -29,7 +37,7 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
                 const SizedBox(width: 12),
                 Expanded(
                   child: Text(
-                    'Générer ${equipmentList.length} QR Codes',
+                    dialogTitle,
                     style: const TextStyle(
                       fontSize: 20,
                       fontWeight: FontWeight.bold,
@@ -49,7 +57,7 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
             ),
             const SizedBox(height: 16),
 
-            // Liste des équipements
+            // Liste des items
             Expanded(
               child: Container(
                 decoration: BoxDecoration(
@@ -58,19 +66,19 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
                 ),
                 child: ListView.separated(
                   shrinkWrap: true,
-                  itemCount: equipmentList.length,
+                  itemCount: itemList.length,
                   separatorBuilder: (context, index) => const Divider(height: 1),
                   itemBuilder: (context, index) {
-                    final equipment = equipmentList[index];
+                    final item = itemList[index];
                     return ListTile(
                       dense: true,
                       leading: const Icon(Icons.qr_code, size: 20),
                       title: Text(
-                        equipment.id,
+                        getId(item),
                         style: const TextStyle(fontWeight: FontWeight.bold),
                       ),
                       subtitle: Text(
-                        '${equipment.brand ?? ''} ${equipment.model ?? ''}'.trim(),
+                        getTitle(item),
                         style: const TextStyle(fontSize: 12),
                       ),
                     );
@@ -85,30 +93,21 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
               icon: Icons.qr_code,
               title: 'Petits QR Codes',
               subtitle: 'QR codes compacts (2x2 cm)',
-              onPressed: () {
+              onPressed: () => _generatePDF(context, itemList, QRLabelFormat.small),
-                Navigator.pop(context);
-                _generatePDF(context, equipmentList, QRLabelFormat.small);
-              },
             ),
             const SizedBox(height: 12),
             _FormatButton(
               icon: Icons.qr_code_2,
               title: 'QR Moyens',
               subtitle: 'QR codes taille moyenne (4x4 cm)',
-              onPressed: () {
+              onPressed: () => _generatePDF(context, itemList, QRLabelFormat.medium),
-                Navigator.pop(context);
-                _generatePDF(context, equipmentList, QRLabelFormat.medium);
-              },
             ),
             const SizedBox(height: 12),
             _FormatButton(
               icon: Icons.label,
               title: 'Grandes étiquettes',
-              subtitle: 'QR + ID + Marque/Modèle (10x5 cm)',
+              subtitle: 'QR + ID + Détails (10x5 cm)',
-              onPressed: () {
+              onPressed: () => _generatePDF(context, itemList, QRLabelFormat.large),
-                Navigator.pop(context);
-                _generatePDF(context, equipmentList, QRLabelFormat.large);
-              },
             ),
           ],
         ),
@@ -118,14 +117,24 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
 
   Future<void> _generatePDF(
     BuildContext context,
-    List<EquipmentModel> equipmentList,
+    List<T> items,
     QRLabelFormat format,
   ) async {
+    // Capturer le navigator AVANT de fermer le premier dialog
+    final navigator = Navigator.of(context);
+    final scaffoldMessenger = ScaffoldMessenger.of(context);
+
+    // Fermer le dialog de sélection
+    navigator.pop();
+
+    // Attendre un court instant pour que le dialog se ferme complètement
+    await Future.delayed(const Duration(milliseconds: 100));
+
     // Afficher le dialogue de chargement
     showDialog(
       context: context,
       barrierDismissible: false,
-      builder: (context) => Dialog(
+      builder: (dialogContext) => Dialog(
         child: Padding(
           padding: const EdgeInsets.all(24),
           child: Column(
@@ -144,7 +153,7 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
               ),
               const SizedBox(height: 8),
               Text(
-                'Génération de ${equipmentList.length} QR code(s)',
+                'Génération de ${items.length} QR code(s)',
                 style: TextStyle(
                   fontSize: 14,
                   color: Colors.grey[600],
@@ -157,31 +166,23 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
     );
 
     try {
-      // Génération du PDF avec progression
+      // Attendre que le dialog de chargement s'affiche complètement
-      final pdfBytes = await PDFService.generatePDF<EquipmentModel>(
+      await Future.delayed(const Duration(milliseconds: 300));
-        items: equipmentList,
+
+      // Génération du PDF
+      final pdfBytes = await PDFService.generatePDF<T>(
+        items: items,
         format: format,
-        getId: (eq) => eq.id,
+        getId: getId,
-        getTitle: (eq) => '${eq.brand ?? ''} ${eq.model ?? ''}'.trim(),
+        getTitle: getTitle,
-        getDetails: format == QRLabelFormat.large ? (EquipmentModel eq) {
+        getDetails: getDetails,
-          final details = <String>[];
-          final brand = eq.brand;
-          if (brand != null && brand.isNotEmpty) {
-            details.add('Marque: $brand');
-          }
-          final model = eq.model;
-          if (model != null && model.isNotEmpty) {
-            details.add('Modèle: $model');
-          }
-          details.add('Catégorie: ${eq.category.label}');
-          return details;
-        } : null,
       );
 
-      // Fermer le dialogue de chargement
+      // Fermer le dialogue de chargement avec le navigator capturé
-      if (context.mounted) {
+      navigator.pop();
-        Navigator.pop(context);
+
-      }
+      // Petite pause pour s'assurer que le dialog est bien fermé
+      await Future.delayed(const Duration(milliseconds: 100));
 
       // Afficher le PDF
       await Printing.layoutPdf(
@@ -189,25 +190,22 @@ class QRCodeFormatSelectorDialog extends StatelessWidget {
         name: 'QRCodes_${DateTime.now().millisecondsSinceEpoch}.pdf',
       );
 
-      if (context.mounted) {
+      scaffoldMessenger.showSnackBar(
-        ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(
-          const SnackBar(
+          content: Text('PDF généré avec succès'),
-            content: Text('PDF généré avec succès'),
+          backgroundColor: Colors.green,
-            backgroundColor: Colors.green,
+        ),
-          ),
+      );
-        );
-      }
     } catch (e) {
       // Fermer le dialogue de chargement en cas d'erreur
-      if (context.mounted) {
+      navigator.pop();
-        Navigator.pop(context);
-      }
 
-      if (context.mounted) {
+      scaffoldMessenger.showSnackBar(
-        ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
-          SnackBar(content: Text('Erreur lors de la génération du PDF: $e')),
+          content: Text('Erreur lors de la génération du PDF: $e'),
-        );
+          backgroundColor: Colors.red,
-      }
+        ),
+      );
     }
   }
 }

em2rp/lib/views/widgets/management/management_card.dart

@@ -0,0 +1,231 @@
+import 'package:flutter/material.dart';
+import 'package:em2rp/utils/colors.dart';
+
+/// Action du menu contextuel
+class CardAction {
+  final String id;
+  final String label;
+  final IconData icon;
+  final Color? color;
+
+  const CardAction({
+    required this.id,
+    required this.label,
+    required this.icon,
+    this.color,
+  });
+}
+
+/// Widget de card générique pour les pages de gestion
+class ManagementCard<T> extends StatelessWidget {
+  final T item;
+  final String Function(T) getId;
+  final String Function(T) getTitle;
+  final String Function(T) getSubtitle;
+  final Widget Function(T) getIcon;
+  final List<Widget> Function(T) getInfoChips;
+  final Widget Function(T) getStatusBadge;
+  final List<CardAction> actions;
+  final void Function(String actionId, T item) onActionSelected;
+  final VoidCallback onTap;
+  final VoidCallback? onLongPress;
+  final bool isSelectionMode;
+  final bool isSelected;
+  final ValueChanged<bool?>? onSelectionChanged;
+
+  const ManagementCard({
+    super.key,
+    required this.item,
+    required this.getId,
+    required this.getTitle,
+    required this.getSubtitle,
+    required this.getIcon,
+    required this.getInfoChips,
+    required this.getStatusBadge,
+    required this.actions,
+    required this.onActionSelected,
+    required this.onTap,
+    this.onLongPress,
+    this.isSelectionMode = false,
+    this.isSelected = false,
+    this.onSelectionChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: const EdgeInsets.only(bottom: 12),
+      elevation: 2,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+        side: isSelected
+            ? const BorderSide(color: AppColors.rouge, width: 2)
+            : BorderSide.none,
+      ),
+      child: InkWell(
+        onTap: onTap,
+        onLongPress: onLongPress,
+        borderRadius: BorderRadius.circular(8),
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Row(
+            children: [
+              // Checkbox en mode sélection
+              if (isSelectionMode)
+                Padding(
+                  padding: const EdgeInsets.only(right: 16),
+                  child: Checkbox(
+                    value: isSelected,
+                    onChanged: onSelectionChanged,
+                    activeColor: AppColors.rouge,
+                  ),
+                ),
+
+              // Icône principale
+              getIcon(item),
+              const SizedBox(width: 16),
+
+              // Contenu principal
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    // Titre (ID)
+                    Text(
+                      getTitle(item),
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 16,
+                      ),
+                    ),
+                    const SizedBox(height: 4),
+
+                    // Sous-titre
+                    Text(
+                      getSubtitle(item),
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: Colors.grey.shade700,
+                      ),
+                    ),
+                    const SizedBox(height: 4),
+
+                    // Chips d'information
+                    Wrap(
+                      spacing: 8,
+                      runSpacing: 4,
+                      children: getInfoChips(item),
+                    ),
+                  ],
+                ),
+              ),
+
+              const SizedBox(width: 16),
+
+              // Badge de statut
+              getStatusBadge(item),
+
+              // Menu contextuel (si pas en mode sélection)
+              if (!isSelectionMode) ...[
+                const SizedBox(width: 8),
+                PopupMenuButton<String>(
+                  icon: const Icon(Icons.more_vert),
+                  onSelected: (actionId) => onActionSelected(actionId, item),
+                  itemBuilder: (context) => actions.map((action) {
+                    return PopupMenuItem(
+                      value: action.id,
+                      child: Row(
+                        children: [
+                          Icon(
+                            action.icon,
+                            size: 20,
+                            color: action.color,
+                          ),
+                          const SizedBox(width: 8),
+                          Text(
+                            action.label,
+                            style: TextStyle(color: action.color),
+                          ),
+                        ],
+                      ),
+                    );
+                  }).toList(),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Widget helper pour créer un chip d'information
+class InfoChip extends StatelessWidget {
+  final String label;
+  final IconData icon;
+
+  const InfoChip({
+    super.key,
+    required this.label,
+    required this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: Colors.grey.shade100,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(icon, size: 14, color: Colors.grey.shade700),
+          const SizedBox(width: 4),
+          Text(
+            label,
+            style: TextStyle(
+              fontSize: 12,
+              color: Colors.grey.shade700,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Widget helper pour créer un badge de statut
+class StatusBadge extends StatelessWidget {
+  final String label;
+  final Color color;
+
+  const StatusBadge({
+    super.key,
+    required this.label,
+    required this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      decoration: BoxDecoration(
+        color: color.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: color),
+      ),
+      child: Text(
+        label,
+        style: TextStyle(
+          color: color,
+          fontWeight: FontWeight.bold,
+          fontSize: 12,
+        ),
+      ),
+    );
+  }
+}
+

em2rp/lib/views/widgets/management/management_empty_state.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+/// Widget réutilisable pour afficher un état vide dans les listes de gestion
+class ManagementEmptyState extends StatelessWidget {
+  final IconData icon;
+  final String message;
+
+  const ManagementEmptyState({
+    super.key,
+    required this.icon,
+    required this.message,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(
+            icon,
+            size: 80,
+            color: Colors.grey.shade400,
+          ),
+          const SizedBox(height: 16),
+          Text(
+            message,
+            style: TextStyle(
+              fontSize: 18,
+              color: Colors.grey.shade600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+

em2rp/lib/views/widgets/management/management_filter_bar.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:em2rp/utils/colors.dart';
+
+/// Widget réutilisable pour afficher un chip de filtre
+class FilterChip extends StatelessWidget {
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const FilterChip({
+    super.key,
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        decoration: BoxDecoration(
+          color: isSelected ? AppColors.rouge : Colors.white,
+          borderRadius: BorderRadius.circular(20),
+          border: Border.all(
+            color: isSelected ? AppColors.rouge : Colors.grey.shade300,
+            width: isSelected ? 2 : 1,
+          ),
+        ),
+        child: Text(
+          label,
+          style: TextStyle(
+            color: isSelected ? Colors.white : AppColors.noir,
+            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Widget réutilisable pour une barre de filtres horizontale
+class ManagementFilterBar extends StatelessWidget {
+  final List<FilterChipData> filters;
+
+  const ManagementFilterBar({
+    super.key,
+    required this.filters,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      color: Colors.grey.shade50,
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        child: Row(
+          children: filters.map((filter) {
+            return Padding(
+              padding: const EdgeInsets.only(right: 8),
+              child: FilterChip(
+                label: filter.label,
+                isSelected: filter.isSelected,
+                onTap: filter.onTap,
+              ),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+}
+
+/// Données pour un chip de filtre
+class FilterChipData {
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const FilterChipData({
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+}
+

em2rp/lib/views/widgets/management/management_list.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:em2rp/views/widgets/management/management_empty_state.dart';
+
+/// Widget de liste générique pour les pages de gestion
+class ManagementList<T> extends StatelessWidget {
+  final Stream<List<T>> stream;
+  final List<T>? cachedItems;
+  final Widget Function(T item) itemBuilder;
+  final String emptyMessage;
+  final IconData emptyIcon;
+  final void Function(List<T>? items)? onDataReceived;
+
+  const ManagementList({
+    super.key,
+    required this.stream,
+    this.cachedItems,
+    required this.itemBuilder,
+    required this.emptyMessage,
+    this.emptyIcon = Icons.inventory_2_outlined,
+    this.onDataReceived,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return StreamBuilder<List<T>>(
+      stream: stream,
+      builder: (context, snapshot) {
+        // Notifier si des données sont reçues
+        if (snapshot.hasData && onDataReceived != null) {
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            onDataReceived!(snapshot.data);
+          });
+        }
+
+        // Afficher le loader seulement au premier chargement
+        if (snapshot.connectionState == ConnectionState.waiting && cachedItems == null) {
+          return const Center(child: CircularProgressIndicator());
+        }
+
+        if (snapshot.hasError) {
+          return Center(
+            child: Text('Erreur: ${snapshot.error}'),
+          );
+        }
+
+        final items = cachedItems ?? snapshot.data ?? [];
+
+        if (items.isEmpty) {
+          return ManagementEmptyState(
+            icon: emptyIcon,
+            message: emptyMessage,
+          );
+        }
+
+        return ListView.builder(
+          padding: const EdgeInsets.all(16),
+          itemCount: items.length,
+          itemBuilder: (context, index) {
+            return itemBuilder(items[index]);
+          },
+        );
+      },
+    );
+  }
+}
+

em2rp/lib/views/widgets/management/management_search_bar.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:em2rp/utils/colors.dart';
+
+/// Widget réutilisable pour la barre de recherche dans les pages de gestion
+class ManagementSearchBar extends StatelessWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final ValueChanged<String> onChanged;
+  final VoidCallback? onSelectionModeToggle;
+  final bool showSelectionModeButton;
+
+  const ManagementSearchBar({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.onChanged,
+    this.onSelectionModeToggle,
+    this.showSelectionModeButton = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey.withOpacity(0.1),
+            spreadRadius: 1,
+            blurRadius: 3,
+            offset: const Offset(0, 1),
+          ),
+        ],
+      ),
+      child: Row(
+        children: [
+          Expanded(
+            child: TextField(
+              controller: controller,
+              decoration: InputDecoration(
+                hintText: hintText,
+                prefixIcon: const Icon(Icons.search, color: AppColors.rouge),
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(8),
+                  borderSide: BorderSide(color: Colors.grey.shade300),
+                ),
+                contentPadding: const EdgeInsets.symmetric(
+                  horizontal: 16,
+                  vertical: 12,
+                ),
+              ),
+              onChanged: onChanged,
+            ),
+          ),
+          if (showSelectionModeButton && onSelectionModeToggle != null) ...[
+            const SizedBox(width: 12),
+            IconButton(
+              icon: const Icon(Icons.checklist, color: AppColors.rouge),
+              tooltip: 'Mode sélection',
+              onPressed: onSelectionModeToggle,
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}
+