From 4740f4a67c66802c98883f25d6b9163d09b8e013 Mon Sep 17 00:00:00 2001
From: omaroughriss <omaroughriss8@gmail.com>
Date: Thu, 19 Jun 2025 20:59:35 +0200
Subject: [PATCH] Add all fields in state render

---
 src/components/ProcessesViewer.tsx | 125 +++++++++++++++++++++++++----
 1 file changed, 110 insertions(+), 15 deletions(-)

diff --git a/src/components/ProcessesViewer.tsx b/src/components/ProcessesViewer.tsx
index 77fa2b9..afd30d4 100644
--- a/src/components/ProcessesViewer.tsx
+++ b/src/components/ProcessesViewer.tsx
@@ -26,6 +26,81 @@ interface ProcessesViewerProps {
   onProcessesUpdate?: (processes: Processes) => void;
 }
 
+const compareStates = (
+  currentState: BlockState,
+  index: number,
+  previousState?: BlockState,
+  currentPrivateData?: Record<string, any>,
+  previousPrivateData?: Record<string, any>
+) => {
+  const result: Record<string, { 
+    value: any, 
+    status: 'unchanged' | 'modified',
+    hash?: string,
+    isPrivate: boolean,
+    stateId: string
+  }> = {};
+
+  // Ajouter toutes les données publiques de l'état actuel
+  Object.keys(currentState.public_data).forEach(key => {
+    const currentValue = currentState.public_data[key];
+    const previousValue = previousState?.public_data[key];
+    const isModified = index > 0 && 
+      previousValue !== undefined && 
+      JSON.stringify(currentValue) !== JSON.stringify(previousValue);
+
+    result[key] = {
+      value: currentValue,
+      status: isModified ? 'modified' : 'unchanged',
+      hash: currentState.pcd_commitment[key],
+      isPrivate: false,
+      stateId: currentState.state_id
+    };
+  });
+
+  // Gérer les données privées
+  if (index === 0) {
+    // Pour le premier état, on ajoute simplement les données privées actuelles
+    if (currentPrivateData) {
+      Object.entries(currentPrivateData).forEach(([key, value]) => {
+        result[key] = {
+          value,
+          status: 'unchanged',
+          hash: currentState.pcd_commitment[key],
+          isPrivate: true,
+          stateId: currentState.state_id
+        };
+      });
+    }
+  } else if (previousPrivateData) {
+    // Pour les états suivants, on commence par les données privées de l'état précédent
+    Object.entries(previousPrivateData).forEach(([key, value]) => {
+      result[key] = {
+        value,
+        status: 'unchanged',
+        hash: previousState?.pcd_commitment[key],
+        isPrivate: true,
+        stateId: previousState!.state_id
+      };
+    });
+
+    // Puis on met à jour les données privées qui ont changé
+    if (currentPrivateData) {
+      Object.entries(currentPrivateData).forEach(([key, value]) => {
+        result[key] = {
+          value,
+          status: 'modified',
+          hash: currentState.pcd_commitment[key],
+          isPrivate: true,
+          stateId: currentState.state_id
+        };
+      });
+    }
+  }
+
+  return result;
+};
+
 function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: ProcessesViewerProps) {
   const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
   const [isFiltered, setIsFiltered] = useState<boolean>(false);
@@ -310,16 +385,26 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
     hash: string | undefined,
     isPrivate: boolean,
     processId: string,
-    stateId: string
+    stateId: string,
+    status: 'unchanged' | 'modified' = 'unchanged',
+    originStateId?: string
   ) => {
     const isEditing = editingField?.key === key && 
                      editingField?.processId === processId && 
                      editingField?.stateId === stateId;
 
+    const getStatusColor = (status: string) => {
+      return status === 'modified' ? '#32a852' : 'transparent';
+    };
+
     return (
       <div 
         className="data-field" 
         key={key}
+        style={{ 
+          backgroundColor: getStatusColor(status),
+          transition: 'background-color 0.3s'
+        }}
       >
         <div className="data-field-header">
           <span className="data-type-icon" title={isPrivate ? 'Donnée privée' : 'Donnée publique'}>
@@ -327,6 +412,11 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
           </span>
           <span className="data-value-icon">{getDataIcon(value)}</span>
           <span className="data-label">{key}</span>
+          {originStateId && originStateId !== stateId && (
+            <span className="data-origin" title={`Propagé depuis l'état ${originStateId}`}>
+              ↺
+            </span>
+          )}
           <button
             className="field-update-button"
             onClick={(e) => {
@@ -423,7 +513,15 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
                     }
 
                     const statePrivateData = privateData[state.state_id] || {};
-                    console.log(statePrivateData);
+                    
+                    // On utilise compareStates avec l'état précédent et les données privées
+                    const stateData = compareStates(
+                      state,
+                      index,
+                      index > 0 ? process.states[index - 1] : undefined,
+                      statePrivateData,
+                      index > 0 ? privateData[process.states[index - 1].state_id] : undefined
+                    );
 
                     return (
                       <div key={`${processId}-state-${index}`} className="state-item">
@@ -436,21 +534,18 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
                         </div>
 
                         <div className="data-fields-container">
-                          {/* Public Data */}
-                          {Object.entries(state.public_data).map(([key, value]) => 
-                            renderDataField(key, value, state.pcd_commitment[key], false, processId, state.state_id)
+                          {/* Toutes les données (publiques et privées) */}
+                          {Object.entries(stateData).map(([key, { value, status, hash, isPrivate, stateId }]) => 
+                            renderDataField(key, value, hash, isPrivate, processId, stateId, status, state.state_id)
                           )}
 
-                          {/* Private Data */}
-                          {myProcesses.includes(processId) ? (
-                            Object.keys(statePrivateData).length > 0 ? (
-                              Object.entries(statePrivateData).map(([key, value]) =>
-                                renderDataField(key, value, state.pcd_commitment[key], true, processId, state.state_id)
-                              )
-                            ) : (
-                              <div className="loading-message">Chargement des données privées...</div>
-                            )
-                          ) : (
+                          {/* Message de chargement pour les données privées si nécessaire */}
+                          {myProcesses.includes(processId) && Object.keys(statePrivateData).length === 0 && (
+                            <div className="loading-message">Chargement des données privées...</div>
+                          )}
+                          
+                          {/* Message si pas d'accès aux données privées */}
+                          {!myProcesses.includes(processId) && (
                             <div className="no-access-message">
                               🔒 Vous n'avez pas accès aux données privées de ce processus
                             </div>