Merge pull request 'truong-frame-drawio' (#111) from truong-frame-drawio into dev

Reviewed-on: #111

FRONTEND/.env.example

@@ -1 +1,3 @@
 VITE_BACKEND_URL=http://localhost:8000/
+
+VITE_URL_DRAWIO="https://viewer.diagrams.net/?tags=%7B%7D&lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Test%20Draw.drawio&dark=auto#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D1LmB9wCac9DonQPFU-53g1nhI9SfvWuWK%26export%3Ddownload"

FRONTEND/src/pages/Allocation/Allocation.tsx

@@ -10,6 +10,7 @@ import {
   Popover,
   Text,
   Tooltip,
+  Switch,
 } from '@mantine/core'
 import { IconInnerShadowTopRightFilled } from '@tabler/icons-react'
 import { useEffect, useState } from 'react'
@@ -80,6 +81,31 @@ const Allocation = () => {
   const [opened, setOpened] = useState(false)
   const [issDetail, setIssDetail] = useState('')
   const [data, setData] = useState<any>({})
+  const [showDrawio, setShowDrawio] = useState(true)
+
+  useEffect(() => {
+    // Check if iframe already exists
+    const existingIframe = document.querySelector('#drawio iframe')
+    if (existingIframe) return
+
+    // Add iframe only if it doesn't exist
+    const iframe = document.createElement('iframe')
+    iframe.src = import.meta.env.VITE_URL_DRAWIO ?? ''
+    iframe.style.width = '100%'
+    iframe.style.height = '500px'
+    const drawioDiv = document.getElementById('drawio')
+    if (drawioDiv) {
+      drawioDiv.appendChild(iframe)
+    }
+
+    return () => {
+      const iframe = document.querySelector('#drawio iframe')
+      if (iframe) {
+        iframe.remove()
+      }
+    }
+  }, [])
+
   const getAll = async () => {
     try {
       const res = await get(getAllUserDoing)
@@ -117,6 +143,14 @@ const Allocation = () => {
   }, [])
   return (
     <div>
+      <Box style={{ display: 'flex', alignItems: 'center', margin: '10px' }}>
+        <Switch
+          label="Show Diagram"
+          checked={showDrawio}
+          onChange={(event) => setShowDrawio(event.currentTarget.checked)}
+        />
+      </Box>
+      <div id="drawio" style={{ display: showDrawio ? 'block' : 'none' }}></div>
       <div>
         <Box
           style={{
@@ -138,12 +172,12 @@ const Allocation = () => {
           }}
         >
           <Box>
-            <Text fw={600} fz={'md'}>
+            {/* <Text fw={600} fz={'md'}>
               Admin/
             </Text>
             <Text fw={700} fz={'lg'}>
               Personnel Allocation
-            </Text>
+            </Text> */}
             <Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}>
               "P:" is the timspent/timeestimate number within the project itself
             </Text>
@@ -224,23 +258,34 @@ const Allocation = () => {
                                         alignItems: 'center',
                                       }}
                                     >
-                                      <Box w='10%'>
+                                      <Box w="10%">
                                         <IconInnerShadowTopRightFilled
                                           style={{ color: 'orange' }}
                                           height={20}
                                           width={20}
-                                        display={userData.issues?.filter(
+                                          display={
+                                            userData.issues?.filter(
                                               (iss: Issue) =>
-                                            iss.fields.status.name === 'In Progress' && 
+                                                iss.fields.status.name ===
-                                          ((Date.now() - (new Date(iss.changelog?.histories[0]?.created)).getTime()) > 172800000)
+                                                  'In Progress' &&
-                                        ).length > 0 ? 'block' :'none'}
+                                                Date.now() -
+                                                  new Date(
+                                                    iss.changelog?.histories[0]?.created,
+                                                  ).getTime() >
+                                                  172800000,
+                                            ).length > 0
+                                              ? 'block'
+                                              : 'none'
+                                          }
                                         />
                                       </Box>
                                       <Box display={'flex'}>
                                         <Avatar
                                           size={'sm'}
                                           ml={'5px'}
-                                        src={userData.user.avatarUrls['48x48']}
+                                          src={
+                                            userData.user.avatarUrls['48x48']
+                                          }
                                         />
                                         <Text ml={'md'} fw={600}>
                                           {user}
@@ -260,9 +305,12 @@ const Allocation = () => {
                                       }}
                                       ml={'md'}
                                       p="0 20px"
-                                      
                                     >
-                                      <Text ml={'md'} fw={700} fz={'sm'}>{`P: `}</Text>
+                                      <Text
+                                        ml={'md'}
+                                        fw={700}
+                                        fz={'sm'}
+                                      >{`P: `}</Text>
                                       <Text fw={700} c="green" fz={'sm'}>{`${
                                         userData.p_total_spent / 60 / 60
                                       }h/`}</Text>