add ConditionalComponent

src/shared/sections/ai/assistants-management/settings/ConfigHistorySection.tsx

@@ -6,7 +6,7 @@ import {
   faChevronLeft, 
   faChevronRight 
 } from '@fortawesome/free-solid-svg-icons';
-
+import ConditionalComponent from 'src/shared/components/ConditionalComponent/ConditionalComponent';
 import {
   Box,
   Card,
@@ -40,50 +40,36 @@ export default function ConfigHistorySection({ assistantId }: ConfigHistorySecti
     clearConfigHistory,
   } = useAssistantResponseConfigStore();
 
-  // Charger l'historique au montage du composant
   useEffect(() => {
     if (assistantId) {
       getConfigHistory(assistantId, { page: 0, size: 10 });
     }
   }, [assistantId, getConfigHistory]);
 
-// Fonction pour formater la date
-const formatDate = (dateStr: string | number | any[]): string => {
-  const input: unknown = dateStr;
-
-  if (Array.isArray(input)) {
-    const [y, m, d, h = 0, min = 0, s = 0] = input as number[];
-    const date = new Date(y, m - 1, d, h, min, s);
-    return date.toLocaleString('fr-FR');
-  }
-
-  const date = new Date(input as string | number);
-  return Number.isNaN(date.getTime()) ? 'Date invalide' : date.toLocaleString('fr-FR');
-};
+  const formatDate = (dateStr: string | number | number[]): string => {
+    if (Array.isArray(dateStr)) {
+      const [y, m, d, h = 0, min = 0, s = 0] = dateStr;
+      const date = new Date(y, m - 1, d, h, min, s);
+      return date.toLocaleString('fr-FR');
+    }
+    const date = new Date(dateStr);
+    return Number.isNaN(date.getTime()) ? 'Date invalide' : date.toLocaleString('fr-FR');
+  };
 
-  // Fonction pour obtenir la couleur selon l'action
   const getActionColor = (action: string) => {
     const lowerAction = action.toLowerCase();
-    if (lowerAction.includes('activer') || lowerAction.includes('ajouter')) {
-      return 'success';
-    }
-    if (lowerAction.includes('désactiver') || lowerAction.includes('supprimer')) {
-      return 'error';
-    }
-    if (lowerAction.includes('modifier') || lowerAction.includes('mettre à jour')) {
-      return 'primary';
-    }
+    if (lowerAction.includes('activer') || lowerAction.includes('ajouter')) return 'success';
+    if (lowerAction.includes('désactiver') || lowerAction.includes('supprimer')) return 'error';
+    if (lowerAction.includes('modifier') || lowerAction.includes('mettre à jour')) return 'primary';
     return 'default';
   };
 
-  // Fonction pour changer de page
   const handlePageChange = (newPage: number) => {
     if (assistantId) {
       getConfigHistory(assistantId, { page: newPage, size: 10 });
     }
   };
 
-  // Fonction pour vider l'historique
   const handleClearHistory = async () => {
     if (window.confirm('Êtes-vous sûr de vouloir supprimer tout l\'historique ?')) {
       await clearConfigHistory(assistantId);
@@ -92,7 +78,7 @@ const formatDate = (dateStr: string | number | any[]): string => {
 
   return (
     <Card sx={{ p: 3, mb: 4 }}>
-      {/* En-tête */}
+      {/* Header */}
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <FontAwesomeIcon 
@@ -116,22 +102,31 @@ const formatDate = (dateStr: string | number | any[]): string => {
         </Button>
       </Box>
 
-      {/* Contenu */}
-      {historyLoading ? (
+      {/* Loading State */}
+      <ConditionalComponent isValid={historyLoading}>
         <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
           <CircularProgress />
         </Box>
-      ) : historyError ? (
+      </ConditionalComponent>
+
+      {/* Error State */}
+      <ConditionalComponent isValid={!historyLoading && !!historyError}>
         <Typography color="error" sx={{ textAlign: 'center', p: 2 }}>
           Erreur : {historyError}
         </Typography>
-      ) : configHistory.length === 0 ? (
+      </ConditionalComponent>
+
+      {/* Empty State */}
+      <ConditionalComponent isValid={!historyLoading && !historyError && configHistory.length === 0}>
         <Typography sx={{ textAlign: 'center', p: 4, color: 'text.secondary' }}>
           Aucune modification enregistrée
         </Typography>
-      ) : (
+      </ConditionalComponent>
+
+      {/* Content */}
+      <ConditionalComponent isValid={!historyLoading && !historyError && configHistory.length > 0}>
         <>
-          {/* Tableau */}
+          {/* Table */}
           <TableContainer component={Paper} variant="outlined">
             <Table size="small">
               <TableHead>
@@ -177,7 +172,7 @@ const formatDate = (dateStr: string | number | any[]): string => {
           </TableContainer>
 
           {/* Pagination */}
-          {historyPagination.totalPages > 1 && (
+          <ConditionalComponent isValid={historyPagination?.totalPages > 1}>
             <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', mt: 2, gap: 2 }}>
               <IconButton
                 onClick={() => handlePageChange(historyPagination.currentPage - 1)}
@@ -199,16 +194,16 @@ const formatDate = (dateStr: string | number | any[]): string => {
                 <FontAwesomeIcon icon={faChevronRight} />
               </IconButton>
             </Box>
-          )}
+          </ConditionalComponent>
 
-          {/* Statistiques */}
+          {/* Stats */}
           <Box sx={{ mt: 2, p: 2, bgcolor: 'background.neutral', borderRadius: 1 }}>
             <Typography variant="caption" color="text.secondary">
               Total : {historyPagination.totalElements} modification(s)
             </Typography>
           </Box>
         </>
-      )}
+      </ConditionalComponent>
     </Card>
   );
 }
\ No newline at end of file