feat: loading Index page

.gitignore

@@ -43,3 +43,4 @@ yarn-error.log*
 # Temp stuff
 components/dashboard-demo/
 /.env
+components.old/

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.14-alpine AS deps
+FROM node:18.18-alpine AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 

Dockerfile.vscode

@@ -1,4 +1,4 @@
-FROM node:18.14-alpine
+FROM node:18.18-alpine
 ARG DEBIAN_FRONTEND=noninteractive
 ARG USERNAME=vscode
 ARG USER_UID=1000

components/content/ContentView.jsx

@@ -22,7 +22,9 @@ export function ContentView({
   menuStructure,
   pageStructure,
   handleContentClick,
-  siteConfig = null
+  siteConfig = null,
+  isLoading = true,
+  isError = false
 }) {
 
 

components/content/IndexView.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, LinearProgress } from '@mui/material';
 import { baseTheme } from '../../constants/baseTheme';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -15,15 +15,16 @@ export function IndexView({
   tiles,
   menuStructure,
   title, 
-  menuComponent
+  menuComponent,
+  loading
 }) {
 
-  console.log('IndexView:menuStructure: ', menuStructure)
+  // console.log('IndexView:menuStructure: ', menuStructure)
 
   const MenuComponent = menuComponent;
 
   const navDrawerWidth = 300;
-  const topBarHeight = 64;
+  const topBarHeight = 65;
   const [menuOpen, setMenuOpen] = useState(true);
 
   const handleOnNavButtonClick = () => setMenuOpen((prevState) => !prevState);
@@ -35,21 +36,21 @@ export function IndexView({
         menu={true}
         topBarHeight={topBarHeight} />
 
-      {menuStructure && menuStructure.primary && <MenuComponent
-        menu={menuStructure.primary}
+      <MenuComponent
+        menu={menuStructure?.primary ? menuStructure?.primary : null}
         open={menuOpen}
         top={topBarHeight}
         drawerWidth={navDrawerWidth}
-      />}
+      />
       <div
         style={{
           marginTop: topBarHeight,
           paddingLeft: menuOpen ? navDrawerWidth : 0,
         }}
       ><Box sx={{ px: '5%' }}>
           <Typography variant="h1" component="h1">{title}</Typography>
-          <Container maxWidth="lg" sx={{ maxHeight: '100vh', mt: '10%' }}>
-            <Grid container spacing={4} alignItems="stretch">
+          <Container maxWidth="lg" sx={{ maxHeight: '100vh', mt: '2%' }}>
+            <Grid container spacing={2} alignItems="stretch">
               {tiles ? (
                 tiles.map((c, i) => (
                   <Tile
@@ -63,7 +64,7 @@ export function IndexView({
                     }
                   />
                 ))) : (
-                null
+                <LinearIndeterminate/>
               )}
             </Grid>
           </Container>
@@ -75,4 +76,10 @@ export function IndexView({
 }
 
 
-
+function LinearIndeterminate() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgress />
+    </Box>
+  );
+}

components/dashboard/Menus/ListMenu.js

@@ -1,21 +1,34 @@
 import React from 'react'
-import { MenuItem } from '@mui/material';
+import { MenuItem, Skeleton } from '@mui/material';
 import { NavigationDrawer } from '@/components/airview-ui';
 import Link from '@mui/material/Link';
 
 
 export function ListMenu({ menu, open, top, drawerWidth }) {
-
   return (
-    <NavigationDrawer
-      open={open}
-      top={top}
-      drawerWidth={drawerWidth}
-    >
-      {menu.map((c, i) => <Link key={i} href={c.url} sx={{ textDecoration: 'none', color: 'text.secondary' }}><MenuItem sx={{ pl: '0', color: 'text.secondary' }}>
-        {c.label}</MenuItem></Link>)}
+    <NavigationDrawer open={open} top={top} drawerWidth={drawerWidth}>
+      {menu ?
+        menu.map((c, i) => (
+          <Link key={i} href={c.url} sx={{ textDecoration: 'none', color: 'text.secondary' }}>
+            <MenuItem sx={{ pl: '0', color: 'text.secondary' }}>{c.label}</MenuItem>
+          </Link>
+        ))
+        :
+        <MenuSkeleton />
+      }
     </NavigationDrawer>
   );
 };
 
+const MenuSkeleton = () => (
+  <>
+    {[...Array(10)].map((_, index) => (
+      <Skeleton key={index} variant="rectangular" sx={{my: '4px'}}>
+        <Link key={index} href={null} sx={{ textDecoration: 'none', color: 'text.secondary' }}>
+          <MenuItem sx={{ pl: '0', color: 'text.secondary' }}>labsdsdsddsdsdsdsdsdss sdsdsds sdsdsdel</MenuItem>
+        </Link>
+      </Skeleton>
+    ))}
+  </>
+);
 

components/dashboard/Tiles/index.js

@@ -1,54 +1,51 @@
-import Grid from '@mui/material/Grid';
-import Link from '@mui/material/Link';
-import { Box } from '@mui/material';
-import { Stack } from '@mui/material'
-import { Chip } from '@mui/material'
+import { Box, Typography, Stack, Chip, Link, Grid } from '@mui/material';
 
 export function Tile({ name, url, image }) {
   return (
-    <Grid item xs={3} md={3} sx={{ mb: '20px' }}>
+    <Grid item xs={12} sm={6} md={4} lg={3} sx={{ mb: '20px' }}>
       <Link href={url} underline="none">
         <Box
           sx={{
             position: 'relative',
-            bgcolor: 'background.paper',
+            bgcolor: image ? 'background.paper' : 'background.primary', // Ensure this is the correct color value
             boxShadow: 0,
-            borderColor: 'primary',
+            borderColor: 'primary.main',
             border: 1,
             borderRadius: 2,
             p: 2,
-            minHeight: 300,
+            minHeight: 200, // Adjust based on your needs
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
+          {image && (
+            <Box
+              component="img"
+              src={image}
+              alt={name}
+              sx={{
+                maxHeight: '140px', // Maximum height for images
+                maxWidth: '100%',  // Maximum width for images
+                objectFit: 'contain', // Adjusts the size of the image within the given dimensions
+                mb: 1, // Margin between image and text
+              }}
+            />
+          )}
           <Box
             sx={{
-              position: 'absolute',
-              bottom: '20px', // Adjust the desired spacing here
-              left: '20px', // Adjust the desired spacing here
-              right: '20px', // Adjust the desired spacing here
-              top: '50%',
-              transform: 'translateY(-50%)',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-           {image && <img src={image} alt={name} style={{ maxWidth: '100%', maxHeight: '100%' }} /> }
-          </Box>
-          <Box
-            sx={{
-              position: 'absolute',
-              top: image ? 0 : 75,
-              left: 0,
-              right: 0,
-              p: 2,
+              mt: 2, // Margin top
+              color: image ? 'text.primary' : 'white', // Explicit white color for text
+              fontSize: '1rem',
+              fontWeight: 'bold',
               textAlign: 'center',
-              color: 'text.primary',
-              fontSize: 24,
-              fontWeight: 'medium',
+              wordWrap: 'break-word',
             }}
           >
-            {name}
+            <Typography variant="h4" sx={{ color: image ? 'text.primary' :'white !important' }}>
+              {name}
+            </Typography>
           </Box>
         </Box>
       </Link>

components/resourcing/DemandTable.js

@@ -119,68 +119,11 @@ function Resources({ role, resources }) {
     );
 }
 
-export function DemandTable() {
+export function DemandTable({isLoading, months, data, error, resources} ) {
     const [filteredData, setFilteredData] = useState([]);
     const [customerFilter, setCustomerFilter] = useState('');
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [data, setData] = useState(null);
-    const [resources, setResources] = useState(null);
     const [monthStartIndex, setMonthStartIndex] = useState(0);
-    const [months, setMonths] = useState([
-        '2023-11-01T00:00:00.000', '2023-12-01T00:00:00.000', '2024-01-01T00:00:00.000',
-    ]);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            setIsLoading(true);
-            try {
-                const response = await fetch('/api/resourcing/demand?demand=true');
-                if (!response.ok) throw new Error('Network response was not ok');
-                const fetchedData = await response.json();
-                if (fetchedData.content) {
-                    const jsonParsedData = JSON.parse(fetchedData.content)
-                    // console.log('jsonParsedData: ', jsonParsedData)
-                    setData(jsonParsedData); // Adjust according to actual API response
-                    setMonths(
-                        Array.from(
-                            new Set(
-                                jsonParsedData.flatMap(item => Object.keys(item.Roles))
-                            )
-                        ).sort()
-                    );
-
-                    setIsLoading(false);
-                } else {
-                    setIsLoading(true);
-                }
-            } catch (err) {
-                setError(err.message);
-                setIsLoading(false);
-            }
-
-            try {
-                const response = await fetch('/api/resourcing/demand');
-                if (!response.ok) throw new Error('Network response was not ok');
-                const fetchedData = await response.json();
-                if (fetchedData.content) {
-                    const jsonParsedData = JSON.parse(fetchedData.content)
-                    // console.log('jsonParsedData: ', jsonParsedData)
-                    setResources(jsonParsedData); // Adjust according to actual API response
-                    setIsLoading(false);
-                } else {
-                    setIsLoading(true);
-                }
-            } catch (err) {
-                setError(err.message);
-                setIsLoading(false);
-            }
-
-        };
-
-        fetchData();
-    }, []);
-
+
     useEffect(() => {
         if (data) {
             let groupedData = [];
@@ -287,7 +230,7 @@ export function DemandTable() {
                                     ))}
                             </Select>
                         </TableCell>
-                        <TableCell>Description</TableCell>
+                        <TableCell>JSO</TableCell>
                         <TableCell>Role</TableCell>
                         <TableCell>Resource</TableCell>