add menu dashboard svg

src/pages/home/SvgAirDryerA.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/air_dryer_A_rev.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgAirDryerA = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgAirDryerA;

src/pages/home/SvgAirDryerB.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/air_dryer_B_rev.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgAirDryerB = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgAirDryerB;

src/pages/home/SvgAirDryerC.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/air_dryer_C_rev.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgAirDryerC = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgAirDryerC;

src/pages/home/SvgCompressorA.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/test-new.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgCompressorA = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgCompressorA;

src/pages/home/SvgCompressorB.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/test-new.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgCompressorB = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgCompressorB;

src/pages/home/SvgCompressorC.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/test-new.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgCompressorC = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgCompressorC;

src/pages/home/SvgOverview.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { setValSvg } from '../../components/Global/MqttConnection';
+import SvgTemplate from './SvgTemplate';
+import SvgViewer from './SvgViewer';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/test-new.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgOverview = () => {
+    return (
+        <SvgTemplate>
+            <SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
+        </SvgTemplate>
+    );
+};
+
+export default SvgOverview;

src/pages/home/SvgTemplate.jsx

@@ -0,0 +1,19 @@
+const SvgTemplate = ({ children }) => {
+    return (
+        <div
+            style={{
+                height: '80vh', // penuh 1 layar
+                width: '80vw', // penuh 1 layar lebar
+                overflow: 'hidden', // hilangkan scroll
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: '#fff', // opsional
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default SvgTemplate;

src/pages/home/SvgTest.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Card, Typography, Flex } from 'antd';
 // import { ReactSVG } from 'react-svg';
 import { setValSvg } from '../../components/Global/MqttConnection';
+import { ReactSVG } from 'react-svg';
 
 const { Text } = Typography;
 

src/pages/home/SvgViewer.jsx

@@ -0,0 +1,19 @@
+// SvgViewer.jsx
+import { ReactSVG } from 'react-svg';
+
+const SvgViewer = ({ filePathSvg, topicMqtt, setValSvg }) => {
+    return (
+        <ReactSVG
+            src={filePathSvg}
+            beforeInjection={(svg) => {
+                svg.setAttribute('width', '100%');
+                svg.setAttribute('height', '100%');
+                svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+                if (setValSvg) setValSvg(topicMqtt, svg);
+            }}
+            style={{ width: '100%', height: '100%' }}
+        />
+    );
+};
+
+export default SvgViewer;