Added the Navigation for Database-schema connection flow and relaced the fetch with axios

Reviewed-on: #4

package-lock.json

@@ -14,6 +14,7 @@
         "@univerjs/core": "^0.7.0",
         "@univerjs/preset-sheets-core": "^0.7.0",
         "@univerjs/presets": "^0.7.0",
+        "axios": "^1.9.0",
         "d3": "^7.9.0",
         "luckysheet": "^2.1.13",
         "react": "^18.3.1",
@@ -5216,6 +5217,23 @@
       "integrity": "sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5302,7 +5320,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5466,6 +5483,18 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -6035,6 +6064,15 @@
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6065,7 +6103,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -6149,7 +6186,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6159,7 +6195,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6169,7 +6204,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -6178,6 +6212,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
@@ -6659,6 +6708,62 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6711,7 +6816,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6741,7 +6845,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -6775,7 +6878,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -6815,7 +6917,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6838,7 +6939,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6847,11 +6947,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -7239,7 +7353,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7698,6 +7811,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "@univerjs/core": "^0.7.0",
     "@univerjs/preset-sheets-core": "^0.7.0",
     "@univerjs/presets": "^0.7.0",
+    "axios": "^1.9.0",
     "d3": "^7.9.0",
     "luckysheet": "^2.1.13",
     "react": "^18.3.1",

src/App.jsx

@@ -6,24 +6,72 @@ import DataflowCanvas from './components/DataflowCanvas'
 import { FaDatabase, FaChartBar, FaProjectDiagram } from 'react-icons/fa'
 
 function App() {
-  const [activeTab, setActiveTab] = useState('canvas'); // 'canvas', 'charts', or 'dataflow'
+  // Initialize activeTab based on URL pathname if present
+  const getInitialTab = () => {
+    const pathname = window.location.pathname;
+    if (pathname === '/charts') return 'charts';
+    if (pathname === '/dataflow') return 'dataflow';
+    if (pathname === '/settings') return 'settings';
+    // Default to canvas/explorer
+    window.history.pushState(null, '', '/explorer');
+    return 'canvas';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab());
   
-  // Listen for the custom event to switch to DataFlow tab
+  // Handle browser back/forward navigation
   useEffect(() => {
+    const handleLocationChange = () => {
+      const pathname = window.location.pathname;
+      if (pathname === '/explorer') setActiveTab('canvas');
+      else if (pathname === '/charts') setActiveTab('charts');
+      else if (pathname === '/dataflow') setActiveTab('dataflow');
+      // Settings tab would be handled here too
+    };
+    
+    window.addEventListener('popstate', handleLocationChange);
+    return () => {
+      window.removeEventListener('popstate', handleLocationChange);
+    };
+  }, []);
+  
+  // Listen for custom events to switch tabs
+  useEffect(() => {
+    // Handler for switching to DataFlow tab
     const handleViewDataFlow = (event) => {
       // Switch to the dataflow tab
       setActiveTab('dataflow');
       
+      // Update URL path
+      window.history.pushState(null, '', '/dataflow');
+      
       // Log the database info (in a real app, you would use this to initialize the DataFlow view)
       console.log('Viewing DataFlow for database:', event.detail);
     };
     
-    // Add event listener
+    // Handler for switching to any tab
+    const handleSwitchToTab = (event) => {
+      // Switch to the specified tab
+      setActiveTab(event.detail);
+      
+      // Update URL path based on the tab
+      let path = '/explorer';
+      if (event.detail === 'charts') path = '/charts';
+      if (event.detail === 'dataflow') path = '/dataflow';
+      if (event.detail === 'settings') path = '/settings';
+      
+      window.history.pushState(null, '', path);
+      console.log('Switching to tab:', event.detail);
+    };
+    
+    // Add event listeners
     window.addEventListener('viewDataFlow', handleViewDataFlow);
+    window.addEventListener('switchToTab', handleSwitchToTab);
     
     // Clean up
     return () => {
       window.removeEventListener('viewDataFlow', handleViewDataFlow);
+      window.removeEventListener('switchToTab', handleSwitchToTab);
     };
   }, []);
   
@@ -68,7 +116,8 @@ function App() {
         
         {/* Navigation */}
         <div>
-          <span 
+          <a 
+            href="/explorer"
             style={{ 
               marginRight: '25px', 
               cursor: 'pointer',
@@ -77,14 +126,20 @@ function App() {
               transition: 'all 0.3s ease',
               position: 'relative',
               background: activeTab === 'canvas' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
-              color: activeTab === 'canvas' ? '#00a99d' : '#ffffff'
+              color: activeTab === 'canvas' ? '#00a99d' : '#ffffff',
+              textDecoration: 'none'
             }} 
             className="nav-item"
-            onClick={() => setActiveTab('canvas')}
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveTab('canvas');
+              window.history.pushState(null, '', '/explorer');
+            }}
           >
             Data Explorer
-          </span>
+          </a>
-          <span 
+          <a 
+            href="/charts"
             style={{ 
               marginRight: '25px', 
               cursor: 'pointer',
@@ -93,14 +148,20 @@ function App() {
               transition: 'all 0.3s ease',
               position: 'relative',
               background: activeTab === 'charts' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
-              color: activeTab === 'charts' ? '#00a99d' : '#ffffff'
+              color: activeTab === 'charts' ? '#00a99d' : '#ffffff',
+              textDecoration: 'none'
             }} 
             className="nav-item"
-            onClick={() => setActiveTab('charts')}
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveTab('charts');
+              window.history.pushState(null, '', '/charts');
+            }}
           >
             Advanced Charts
-          </span>
+          </a>
-          <span 
+          <a 
+            href="/dataflow"
             style={{ 
               marginRight: '25px',
               cursor: 'pointer',
@@ -109,25 +170,38 @@ function App() {
               transition: 'all 0.3s ease',
               position: 'relative',
               background: activeTab === 'dataflow' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
-              color: activeTab === 'dataflow' ? '#00a99d' : '#ffffff'
+              color: activeTab === 'dataflow' ? '#00a99d' : '#ffffff',
+              textDecoration: 'none'
             }} 
             className="nav-item"
-            onClick={() => setActiveTab('dataflow')}
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveTab('dataflow');
+              window.history.pushState(null, '', '/dataflow');
+            }}
           >
             Data Flow
-          </span>
+          </a>
-          <span 
+          <a 
+            href="/settings"
             style={{ 
               cursor: 'pointer',
               padding: '8px 12px',
               borderRadius: '4px',
               transition: 'all 0.3s ease',
-              position: 'relative'
+              position: 'relative',
+              textDecoration: 'none',
+              color: '#ffffff'
             }} 
             className="nav-item"
+            onClick={(e) => {
+              e.preventDefault();
+              // Settings functionality would go here
+              alert('Settings functionality not implemented yet');
+            }}
           >
             Settings
-          </span>
+          </a>
         </div>
       </header>
       

src/components/DataflowCanvas.jsx

@@ -1675,7 +1675,14 @@ const DataflowCanvas = () => {
           </div>
           <div>
             <button 
-              onClick={() => window.history.back()}
+              onClick={() => {
+                // Use hash-based routing to navigate back to explorer
+                window.location.hash = '#/explorer';
+                
+                // Also dispatch the custom event as a fallback
+                const event = new CustomEvent('switchToTab', { detail: 'canvas' });
+                window.dispatchEvent(event);
+              }}
               style={{
                 background: 'rgba(255, 255, 255, 0.2)',
                 border: 'none',

src/components/ProcessForm.jsx

@@ -156,9 +156,9 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
       return isDimensionTable(destinationId) || isFactTable(destinationId);
     }
 
-    // Dimension to Fact table connections are not allowed
+    // Dimension tables can connect to Fact tables (now allowed)
     if (isDimensionTable(sourceId) && isFactTable(destinationId)) {
-      return false;
+      return true;
     }
 
     // All other connections are allowed (including Dimension to Dimension)
@@ -199,7 +199,7 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
         if (canSelectSource(tableId)) {
           setSourceTables([...sourceTables, tableId]);
         } else {
-          setValidationError('This source table type cannot connect to the selected destination table(s). Dimension tables cannot connect to Fact tables.');
+          setValidationError('This source table type cannot connect to the selected destination table(s). Please check the connection rules.');
         }
       }
     } else {
@@ -211,7 +211,7 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
         if (canSelectDestination(tableId)) {
           setDestinationTables([...destinationTables, tableId]);
         } else {
-          setValidationError('This destination table type cannot be connected from the selected source table(s). Dimension tables cannot connect to Fact tables.');
+          setValidationError('This destination table type cannot be connected from the selected source table(s). Please check the connection rules.');
         }
       }
     }
@@ -554,7 +554,7 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
                   <li>Stage tables can connect to either Dimension or Fact tables</li>
                   <li>Fact tables can connect to either Dimension or Fact tables</li>
                   <li>Dimension to Dimension table connections are allowed</li>
-                  <li>Dimension to Fact table connections are not allowed</li>
+                  <li>Dimension to Fact table connections are allowed</li>
                 </ul>
                 <div style={{
                   marginTop: '10px',

src/components/mockData.js

@@ -1,5 +1,6 @@
 // API data for DataflowCanvas component
 import { useState, useEffect } from 'react';
+import axios from 'axios';
 
 // Default viewport settings
 const defaultViewportSettings = {
@@ -82,19 +83,13 @@ export const useApiData = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch('https://sandbox.kezel.io/api/qbt_metadata_list_get', {
+        const response = await axios.post('https://sandbox.kezel.io/api/qbt_metadata_list_get', {}, {
-          method: 'POST',
           headers: {
             'Content-Type': 'application/json'
-          },
+          }
-          body: JSON.stringify({}) // Empty payload as requested
         });
         
-        if (!response.ok) {
+        const apiData = response.data;
-          throw new Error(`API request failed with status ${response.status}`);
-        }
-        
-        const apiData = await response.json();
         console.log('API Response Structure:', JSON.stringify(apiData, null, 2));
         const transformedData = transformApiResponse(apiData);
         console.log('Transformed Data Structure:', JSON.stringify(transformedData, null, 2));
@@ -102,7 +97,7 @@ export const useApiData = () => {
         setLoading(false);
       } catch (err) {
         console.error('Error fetching data:', err);
-        setError(err.message);
+        setError(err.response?.data?.message || err.message);
         setLoading(false);
       }
     };
@@ -122,21 +117,14 @@ export const mockApiData = {
   viewportSettings: defaultViewportSettings
 };
 
-// Fetch data immediately to populate mockApiData
+// Fetch data immediately to populate mockApiData using axios
-fetch('https://sandbox.kezel.io/api/qbt_metadata_list_get', {
+axios.post('https://sandbox.kezel.io/api/qbt_metadata_list_get', {}, {
-  method: 'POST',
   headers: {
     'Content-Type': 'application/json'
-  },
+  }
-  body: JSON.stringify({}) // Empty payload as requested
 })
 .then(response => {
-  if (!response.ok) {
+  const apiData = response.data;
-    throw new Error(`API request failed with status ${response.status}`);
-  }
-  return response.json();
-})
-.then(apiData => {
   const transformedData = transformApiResponse(apiData);
   
   // Update mockApiData properties
@@ -148,7 +136,7 @@ fetch('https://sandbox.kezel.io/api/qbt_metadata_list_get', {
   console.log('API data loaded successfully');
 })
 .catch(error => {
-  console.error('Error fetching API data:', error);
+  console.error('Error fetching API data:', error.response?.data?.message || error.message);
 });
 
 export default mockApiData;