diff --git a/src/components/CustomIcons.jsx b/src/components/CustomIcons.jsx
new file mode 100644
index 0000000..fbc0e77
--- /dev/null
+++ b/src/components/CustomIcons.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+// Custom SVG component for database icon (Stage tables)
+export const CustomDatabaseIcon = ({ color = "#fa8c16", width = "24", height = "24" }) => (
+
+);
+
+// Custom SVG component for document/report icon (Fact tables)
+export const CustomDocumentIcon = ({ width = "24", height = "24" }) => (
+
+);
+
+// Custom SVG component for dimension icon (Dimension tables)
+export const CustomDimensionIcon = ({ width = "24", height = "24" }) => (
+
+);
+
+// Helper function to get the appropriate icon based on table type
+export const getTableIcon = (tableType, size = "24") => {
+ if (!tableType) return null;
+
+ const type = typeof tableType === 'string' ? tableType.toLowerCase() : '';
+
+ switch (type) {
+ case 'stage':
+ return ;
+ case 'fact':
+ return ;
+ case 'dimension':
+ return ;
+ default:
+ return null;
+ }
+};
\ No newline at end of file
diff --git a/src/components/DataflowCanvas.jsx b/src/components/DataflowCanvas.jsx
index 756e524..aa523c3 100644
--- a/src/components/DataflowCanvas.jsx
+++ b/src/components/DataflowCanvas.jsx
@@ -130,11 +130,11 @@ const generateCustomStyles = () => {
};
// Import icons from react-icons
-import { FaDatabase, FaTable, FaArrowRight, FaCog, FaExchangeAlt, FaLayerGroup, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine, FaBuilding } from 'react-icons/fa';
+import { FaTable, FaArrowRight, FaCog, FaExchangeAlt, FaLayerGroup, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine } from 'react-icons/fa';
import { BiSolidData, BiTransfer } from 'react-icons/bi';
import { AiFillFolder } from 'react-icons/ai';
-import { HiOutlineDocumentReport } from 'react-icons/hi';
import { TbTransform } from 'react-icons/tb';
+import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon } from './CustomIcons';
// Import mock data
import mockApiData from './mockData';
@@ -461,15 +461,15 @@ const TableNode = ({ data, id }) => {
if (isStage) {
tableColor = '#fa8c16'; // Orange for STAGE tables
tableLabel = 'STAGE';
- tableIcon = ;
+ tableIcon = ;
} else if (isFact) {
tableColor = '#1890ff'; // Blue for FACT tables
tableLabel = 'FACT';
- tableIcon = ;
+ tableIcon = ;
} else {
tableColor = '#52c41a'; // Green for DIM tables
tableLabel = 'DIM';
- tableIcon = ;
+ tableIcon = ;
}
const background = '#ffffff';
diff --git a/src/components/ProcessForm.jsx b/src/components/ProcessForm.jsx
index 2afc5b5..0f6d4ca 100644
--- a/src/components/ProcessForm.jsx
+++ b/src/components/ProcessForm.jsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
-import { FaCog, FaTable, FaArrowRight, FaTimes, FaPlus, FaFilter, FaCalculator, FaExclamationTriangle, FaDatabase, FaBuilding } from 'react-icons/fa';
-import { HiOutlineDocumentReport } from 'react-icons/hi';
+import { FaCog, FaTable, FaArrowRight, FaTimes, FaPlus, FaFilter, FaCalculator, FaExclamationTriangle } from 'react-icons/fa';
+import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, getTableIcon } from './CustomIcons';
const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }) => {
const [processName, setProcessName] = useState('');
@@ -282,7 +282,7 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
};
// Function to get the appropriate icon based on table type
- const getTableIcon = (tableType) => {
+ const getProcessTableIcon = (tableType) => {
if (!tableType) return ;
const type = tableType && typeof tableType === 'string' ? tableType.toLowerCase() : '';
@@ -290,11 +290,11 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
switch (type) {
case 'stage':
- return ;
+ return ;
case 'fact':
- return ;
+ return ;
case 'dimension':
- return ;
+ return ;
default:
return ;
}
@@ -306,9 +306,9 @@ const ProcessForm = ({ isOpen, onClose, onSave, tables, existingProcess = null }
const tableType = type.toLowerCase();
- if (tableType === 'stage') return ;
- if (tableType === 'fact') return ;
- if (tableType === 'dimension') return ;
+ if (tableType === 'stage') return ;
+ if (tableType === 'fact') return ;
+ if (tableType === 'dimension') return ;
return ;
};
diff --git a/src/components/TableCreationPopup.jsx b/src/components/TableCreationPopup.jsx
index 732926a..6a277db 100644
--- a/src/components/TableCreationPopup.jsx
+++ b/src/components/TableCreationPopup.jsx
@@ -1,48 +1,6 @@
import React, { useState } from 'react';
import { FaPlus, FaTimes, FaTable, FaLayerGroup } from 'react-icons/fa';
-
-// Custom SVG component for database icon
-const CustomDatabaseIcon = ({ color = "#fa8c16", width = "24", height = "24" }) => (
-
-);
-
-// Custom SVG component for document/report icon
-const CustomDocumentIcon = ({ width = "24", height = "24" }) => (
-
-);
-
-// Custom SVG component for dimension icon
-const CustomDimensionIcon = ({ width = "24", height = "24" }) => (
-
-);
+import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon } from './CustomIcons';
const TableCreationPopup = ({ onClose, onCreateTable }) => {
const [tableName, setTableName] = useState('');