fix: every data with same ids

src/components/Charts/DeviceStorageHealth.tsx

@@ -22,19 +22,20 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
   const data = (free: number) => {
     return [
       {
-        id: 'storage',
+        id: 'storage-used',
         label: 'Used',
         value: storage,
         color: message === 'Good' ? GOOD_COLOR : POOR_COLOR,
       },
       {
-        id: 'storage',
+        id: 'storage-free',
         label: 'Free',
         value: free,
         color: '#E7EAEE',
       },
     ]
   }
+
   return (
     <Shadow
       variant="$2"

src/pages/Dashboard/StorageCard/StorageCard.tsx

@@ -20,13 +20,13 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
   const data = (free: number) => {
     return [
       {
-        id: 'storage',
+        id: 'storage-used',
         label: 'Used',
         value: storage,
         color: '#E95460',
       },
       {
-        id: 'storage',
+        id: 'storage-free',
         label: 'Free',
         value: free,
         color: '#E7EAEE',

src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx

@@ -17,13 +17,13 @@ const ConsensusCard = ({ value, total }: ConsensusCardProps) => {
   const style: CSSProperties = {}
   const data = [
     {
-      id: 'storage',
+      id: 'storage-used',
       label: 'Used',
       value: value,
       color: '#ff6161',
     },
     {
-      id: 'storage',
+      id: 'storage-free',
       label: 'Free',
       value: total,
       color: '#E7EAEE',

src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx

@@ -14,13 +14,13 @@ type ExecutionClientCardProps = {
 const ExecutionClientCard = ({ value, total }: ExecutionClientCardProps) => {
   const data = [
     {
-      id: 'storage',
+      id: 'storage-used',
       label: 'Used',
       value,
       color: '#7140FD',
     },
     {
-      id: 'storage',
+      id: 'storage-free',
       label: 'Free',
       value: total,
       color: '#E7EAEE',

src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx

@@ -17,13 +17,13 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
 
   const data = [
     {
-      id: 'storage',
+      id: 'storage-used',
       label: 'Used',
       value: synced,
       color: '#ff6161',
     },
     {
-      id: 'storage',
+      id: 'storage-keys',
       label: 'Free',
       value: total - synced || 1,
       color: '#E7EAEE',

src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx

@@ -15,13 +15,13 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
   const data = () => {
     return [
       {
-        id: 'storage',
+        id: 'storage-used',
         label: 'Used',
         value: synced,
         color: '#2a4af5',
       },
       {
-        id: 'storage',
+        id: 'storage-free',
         label: 'Free',
         value: total - synced || 1,
         color: '#E7EAEE',