Refactor WorkRatioChart and ActiveEmployeeCard components-Exhausted B…

frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx

@@ -24,7 +24,7 @@ const BookingLevelCalendar = () => {
       const daysInMonth = new Date(year, month + 1, 0).getDate();
 
       const fetchPromises = [];
-      for (let day = 1; day <= daysInMonth; day++) {
+      for (let day = 0; day <= daysInMonth + 1; day++) {  // Fetch one extra day
         const date = new Date(year, month, day);
         const formattedDate = date.toISOString().split('T')[0];
         fetchPromises.push(
@@ -41,7 +41,15 @@ const BookingLevelCalendar = () => {
       try {
         const results = await Promise.all(fetchPromises);
         const newBookingData = Object.assign({}, ...results);
-        setBookingData(newBookingData);
+        // Shift all predictions down by one day
+        const shiftedBookingData = Object.entries(newBookingData).reduce((acc: { [key: string]: BookingData }, [date, data]) => {
+          const shiftedDate = new Date(date);
+          shiftedDate.setDate(shiftedDate.getDate() - 1);
+          const shiftedDateString = shiftedDate.toISOString().split('T')[0];
+          acc[shiftedDateString] = data as BookingData;
+          return acc;
+        }, {});
+        setBookingData(shiftedBookingData);
       } catch (error) {
         console.error('Error fetching booking data:', error);
       }
@@ -53,7 +61,11 @@ const BookingLevelCalendar = () => {
         const response = await fetch(`https://date.nager.at/api/v3/PublicHolidays/${year}/ZA`);
         const holidays = await response.json();
         const holidayMap = holidays.reduce((acc: HolidayData, holiday: { date: string; name: string }) => {
-          acc[holiday.date] = holiday.name;
+          // Move the holiday one day back
+          const holidayDate = new Date(holiday.date);
+          holidayDate.setDate(holidayDate.getDate() - 1);
+          const adjustedDate = holidayDate.toISOString().split('T')[0];
+          acc[adjustedDate] = holiday.name;
           return acc;
         }, {});
         setHolidayData(holidayMap);
@@ -103,7 +115,7 @@ const BookingLevelCalendar = () => {
               {holiday && (
                 <>
                   <p className='text-text_col_secondary_alt'><strong>{holiday}</strong></p>
-                  <p className="text-yellow-400">Note: AI predictions may be less accurate on holidays.</p>
+                  <p className="text-yellow-400">Note: Predictions on Special days may be inaccurate.</p>
                 </>
               )}
               {dayData ? (

frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BuildingTower.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
 import { OrbitControls, Text } from '@react-three/drei';
 import { Vector3, Group, Color } from 'three';
@@ -11,20 +11,25 @@ interface FloorProps {
   depth: number;
 }
 
-function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
-  const [, setHovered] = useState(false)
+interface Room {
+  floorNo: string;
+  maxOccupancy: number;
+}
+
+const Floor: React.FC<FloorProps> = ({ position, occupancy, floorNumber, width, depth }) => {
+  const [, setHovered] = useState(false);
 
-  const getColor = (value: number) => {
+  const getColor = (value: number): Vector3 => {
     const colors = [
       [0.2, 0.8, 0.2], // Green (1)
       [0.5, 0.8, 0.2], // Yellow-green (2)
       [0.8, 0.8, 0.2], // Yellow (3)
       [0.8, 0.5, 0.2], // Orange (4)
-      [0.8, 0.2, 0.2] // Red (5)
-    ]
-    const index = Math.max(0, Math.min(Math.floor(value) - 1, 4))
-    return new Vector3(...colors[index])
-  }
+      [0.8, 0.2, 0.2]  // Red (5)
+    ];
+    const index = Math.max(0, Math.min(Math.floor(value) - 1, 4));
+    return new Vector3(...colors[index]);
+  };
 
   return (
     <group position={new Vector3(...position)}>
@@ -40,6 +45,8 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         rotation={[0, -Math.PI / 2, 0]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Floor ${floorNumber}`}
       </Text>
@@ -48,6 +55,8 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         rotation={[0, Math.PI / 2, 0]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Occupancy: ${occupancy}/5`}
       </Text>
@@ -56,41 +65,45 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         rotation={[0, Math.PI, 0]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Floor ${floorNumber}`}
       </Text>
       <Text
         position={[0, 0, -depth / 2 - 0.2]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Occupancy: ${occupancy}/5`}
       </Text>
     </group>
-  )
-}
+  );
+};
 
 interface BuildingProps {
   floors: number[];
 }
 
-function Building({ floors }: BuildingProps) {
-  const groupRef = useRef<Group>(null)
-  const baseWidth = 4
-  const baseDepth = 4
-  const shrinkFactor = 0.05
+const Building: React.FC<BuildingProps> = ({ floors }) => {
+  const groupRef = useRef<Group>(null);
+  const baseWidth = 4;
+  const baseDepth = 4;
+  const shrinkFactor = 0.05;
 
   useFrame(() => {
     if (groupRef.current) {
-      groupRef.current.rotation.y += 0.002
+      groupRef.current.rotation.y += 0.002;
     }
-  })
+  });
 
   return (
     <group ref={groupRef}>
       {floors.map((occupancy: number, index: number) => {
-        const width = baseWidth - index * shrinkFactor
-        const depth = baseDepth - index * shrinkFactor
+        const width = baseWidth - index * shrinkFactor;
+        const depth = baseDepth - index * shrinkFactor;
         return (
           <Floor
             key={index}
@@ -100,14 +113,41 @@ function Building({ floors }: BuildingProps) {
             width={width}
             depth={depth}
           />
-        )
+        );
       })}
     </group>
-  )
-}
+  );
+};
 
-export default function BuildingTower() {
-  const occupancyData = [5, 4, 3, 3, 2, 2, 1]
+const BuildingTower: React.FC = () => {
+  const [occupancyData, setOccupancyData] = useState<number[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // In a real scenario, you would fetch this data from your API
+        const response = await fetch('/api/view-rooms');
+        const data = await response.json();
+
+        const rooms: Room[] = data.data;
+        const highestFloor = Math.max(...rooms.map(room => parseInt(room.floorNo)));
+
+        // Calculate occupancy for each floor
+        const occupancy = Array(highestFloor + 1).fill(0);
+        rooms.forEach((room: Room) => {
+          const floor = parseInt(room.floorNo);
+          occupancy[floor] = Math.max(occupancy[floor], room.maxOccupancy);
+        });
+
+        // Remove the ground floor (index 0) and reverse the array so the highest floor is first
+        setOccupancyData(occupancy.slice(1).reverse());
+      } catch (error) {
+        console.error('Error fetching room data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
 
   return (
     <div style={{ width: '100%', height: '100%', minHeight: '300px' }}>
@@ -118,5 +158,7 @@ export default function BuildingTower() {
         <OrbitControls target={[0, 2, 0]} maxPolarAngle={Math.PI / 2} />
       </Canvas>
     </div>
-  )
-}
+  );
+};
+
+export default BuildingTower;

frontend/occupi-web/src/components/workerStats/ActiveEmployeeCard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Avatar, Button, Spinner, Progress } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Avatar, Button, Progress, Skeleton } from "@nextui-org/react";
 import { ChevronDown, ChevronUp, Clock, Calendar, TrendingUp } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { getMostActiveEmployee, MostActiveEmployeeData } from 'WorkerStatsService';
@@ -36,8 +36,10 @@ const ActiveEmployeeCard = () => {
 
   if (isLoading) {
     return (
-      <Card className="max-w-[400px] h-[300px] flex items-center justify-center">
-        <Spinner label="Loading..." color="white" labelColor="primary" />
+      <Card className="max-w-[400px] h-[300px] p-4">
+        <Skeleton className="w-full h-full rounded-lg">
+            <div className="h-3 w-2/5 rounded-lg bg-default-200"></div>
+        </Skeleton>
       </Card>
     );
   }

frontend/occupi-web/src/components/workerStats/AverageHoursChart.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Spinner } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Skeleton } from "@nextui-org/react";
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { getAverageHours } from 'WorkerStatsService';
 
@@ -29,7 +29,26 @@ const AverageHoursChart = () => {
     fetchData();
   }, []);
 
-  if (loading) return <Spinner />;
+  if (loading) {
+    return (
+      <div className="w-[500px] h-[600px]">
+
+          <Card key={1} className="w-full">
+            <CardBody className="p-4 space-y-3">
+
+              <div className="flex flex-wrap gap-2">
+
+                  <Skeleton key={1} className="w-full h-full rounded-lg">
+                    <div className="h-[600px] w-full rounded-lg bg-default-200"></div>
+                  </Skeleton>
+
+              </div>
+            </CardBody>
+          </Card>
+
+      </div>
+    );
+  }
   if (error) return <div>{error}</div>;
 
   return (

frontend/occupi-web/src/components/workerStats/HoursDashboard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Spinner } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Skeleton } from "@nextui-org/react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { getHours } from 'WorkerStatsService';
 
@@ -30,9 +30,22 @@ const HoursDashboard = () => {
 
   if (loading) {
     return (
-      <Card className="w-full h-[400px] flex items-center justify-center">
-        <Spinner size="lg" />
-      </Card>
+      <div className="w-[500px] h-[600px]">
+
+          <Card key={1} className="w-full">
+            <CardBody className="p-4 space-y-3">
+
+              <div className="flex flex-wrap gap-2">
+
+                  <Skeleton key={1} className="w-full h-full rounded-lg">
+                    <div className="h-[600px] w-full rounded-lg bg-default-200"></div>
+                  </Skeleton>
+
+              </div>
+            </CardBody>
+          </Card>
+
+      </div>
     );
   }
 

frontend/occupi-web/src/components/workerStats/LeastActiveEmployeeCard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Avatar, Button, Spinner, Progress } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Avatar, Button, Progress, Skeleton } from "@nextui-org/react";
 import { ChevronDown, ChevronUp, Clock, Calendar, TrendingDown } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { getLeastActiveEmployee, LeastActiveEmployeeData } from 'WorkerStatsService';
@@ -36,8 +36,11 @@ const LeastActiveEmployeeCard = () => {
 
   if (isLoading) {
     return (
-      <Card className="max-w-[400px] h-[300px] flex items-center justify-center">
-        <Spinner label="Loading..." color="primary" labelColor="primary" />
+      <Card className="w-[300px] h-[300px] p-4">
+
+        <Skeleton className="w-full h-full rounded-lg">
+            <div className="h-3 w-2/5 rounded-lg bg-default-200"></div>
+          </Skeleton>
       </Card>
     );
   }