Fix/web/general integration

frontend/occupi-web/package.json

@@ -27,6 +27,9 @@
     "@passwordless-id/webauthn": "^1.6.1",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@react-pdf/renderer": "^3.4.4",
+    "@react-three/drei": "^9.111.5",
+    "@react-three/fiber": "^8.17.6",
+    "@react-three/postprocessing": "^2.16.2",
     "@remixicon/react": "^4.2.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -37,6 +40,7 @@
     "@types/prop-types": "^15.7.12",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-grid-layout": "^1.3.5",
+    "@types/uuid": "^10.0.0",
     "axios": "^1.7.2",
     "axios-cookiejar-support": "^5.0.2",
     "body-parser": "^1.20.2",
@@ -66,7 +70,9 @@
     "react-dnd-test-backend": "^16.0.1",
     "react-dnd-test-utils": "^16.0.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-grid-layout": "^1.4.4",
+    "react-iconly": "^2.2.10",
     "react-icons": "^5.2.1",
     "react-pdf-charts": "^0.2.5",
     "react-rnd": "^10.4.11",

frontend/occupi-web/src/AiDataService.ts

@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+const BASE_URL = 'https://ai.occupi.tech';
+
+interface PredictionData {
+  Day_of_Week: number;
+  Day_of_month: number;
+  Is_Weekend: boolean;
+  Month: number;
+  Predicted_Attendance_Level: string;
+  Predicted_Class: number;
+  Special_Event: number;
+}
+
+const AIDataService = {
+  checkStatus: async () => {
+    try {
+      const response = await axios.get(`${BASE_URL}/`);
+      return response.data;
+    } catch (error) {
+      console.error('Error checking API status:', error);
+      throw error;
+    }
+  },
+
+  getPredictionForToday: async (): Promise<PredictionData> => {
+    try {
+      const response = await axios.get<PredictionData>(`${BASE_URL}/predict`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching today\'s prediction:', error);
+      throw error;
+    }
+  },
+
+  getPredictionForWeek: async (): Promise<PredictionData[]> => {
+    try {
+      const response = await axios.get<PredictionData[]>(`${BASE_URL}/predict_week`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching week prediction:', error);
+      throw error;
+    }
+  },
+
+  getPredictionForDate: async (date: string): Promise<PredictionData> => {
+    try {
+      const response = await axios.get<PredictionData>(`${BASE_URL}/predict_date`, { params: { date } });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching prediction for date:', error);
+      throw error;
+    }
+  },
+
+  getPredictionForWeekFromDate: async (date: string): Promise<PredictionData[]> => {
+    try {
+      const response = await axios.get<PredictionData[]>(`${BASE_URL}/predict_week_from_date`, { params: { date } });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching week prediction from date:', error);
+      throw error;
+    }
+  },
+};
+
+export default AIDataService;

frontend/occupi-web/src/Api.ts

@@ -0,0 +1,30 @@
+// src/services/api.ts
+
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+});
+
+export const uploadRoomImage = async (imageFile: File, roomId: string) => {
+    const formData = new FormData();
+    formData.append('image', imageFile);
+    formData.append('roomId', roomId);
+
+    try {
+      const response = await api.post('/upload-room-image', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      throw error;
+    }
+  };
+export const getImageUrl = (imageId: string, quality: string = 'mid') => {
+  return `/api/image/${imageId}?quality=${quality}`;
+};
+
+export default api;

frontend/occupi-web/src/App.tsx

@@ -1,157 +1,69 @@
-import {
-  LoginForm,
-  OtpPage,
-  Settings,
-  Dashboard,
-  Analysis,
-  Visitation,
-  Faq,
-  AiDashboard,
-  Rooms,
-  AboutPage,
-  SecurityPage,
-  ForgotPassword,
-  ResetPassword,
-} from "@pages/index";
-import {
-  Appearance,
-  OverviewComponent,
-  BookingComponent,
-  PDFReport,
-  ProfileView,
-} from "@components/index";
+import { LoginForm, OtpPage, Settings, Dashboard, Analysis, Visitation, Faq, AiDashboard, Rooms, AboutPage, SecurityPage,BookingStats ,WorkerStatsDashboard} from "@pages/index";
+import { Appearance, OverviewComponent, BookingComponent, PDFReport, ProfileView } from "@components/index";
 import { Layout } from "@layouts/index";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { useEffect, useState } from "react";
 import { NotificationsSettings } from "@pages/notificationsSettings/NotificationsSettings";
-import { FaroRoutes } from "@grafana/faro-react";
-import ProtectedRoutes from "@components/protectedRoutes/ProtectedRoutes";
-import { Navigate } from "react-router";
 
 function App() {
   // Initialize the theme state with system preference
-  const [theme] = useState(() => {
-    const savedTheme = localStorage.getItem("theme") || "system";
+  const [theme, ] = useState(() => {
+    const savedTheme = localStorage.getItem('theme') || 'system';
     return savedTheme;
   });
-  const [isAuthenticated] = useState(() => {
-    // Retrieve user storage from localStorage
-    const userStorage = localStorage.getItem("user-storage");
 
-    // Parse the userStorage if it exists
-    if (userStorage) {
-      const parsedUserStorage = JSON.parse(userStorage);
-      // Check if the email in userDetails is null or empty
-      return parsedUserStorage?.state?.userDetails?.email ? true : false;
-    }
-
-    return false;
-  });
   useEffect(() => {
-    const applyTheme = (theme: string) => {
-      if (theme === "system") {
-        const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-          .matches
-          ? "dark"
-          : "light";
-        document.documentElement.classList.toggle(
-          "dark",
-          systemTheme === "dark"
-        );
+    const applyTheme = (theme: string ) => {
+      if (theme === 'system') {
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.classList.toggle('dark', systemTheme === 'dark');
       } else {
-        document.documentElement.classList.toggle("dark", theme === "dark");
+        document.documentElement.classList.toggle('dark', theme === 'dark');
       }
     };
 
     applyTheme(theme);
-    localStorage.setItem("theme", theme);
+    localStorage.setItem('theme', theme);
   }, [theme]);
   return (
     <Router>
-      <FaroRoutes>
-        <Route
-          path="/"
-          element={
-            isAuthenticated ? (
-              <Navigate to="/dashboard/overview" />
-            ) : (
-              <LoginForm />
-            )
-          }
-        />
-        <Route
-          path="/otp"
-          element={
-            isAuthenticated ? (
-              <Navigate to="/dashboard/overview" />
-            ) : (
-              <OtpPage />
-            )
-          }
-        />
-        <Route
-          path="/forgot-password"
-          element={
-            isAuthenticated ? (
-              <Navigate to="/dashboard/overview" />
-            ) : (
-              <ForgotPassword />
-            )
-          }
-        />
-        <Route
-          path="/reset-password"
-          element={
-            isAuthenticated ? (
-              <Navigate to="/dashboard/overview" />
-            ) : (
-              <ResetPassword />
-            )
-          }
-        />
-        <Route
-          path="/*"
-          element={
-            <ProtectedRoutes>
-              <Layout>
-                <Routes>
-                  <Route path="dashboard/*" element={<Dashboard />}>
-                    <Route path="overview" element={<OverviewComponent />} />
-                    <Route path="bookings" element={<BookingComponent />} />
-                    <Route path="visitations" element={<Visitation />} />
-                    <Route path="analysis" element={<Analysis />} />
-                  </Route>
-                  <Route path="reports" element={<PDFReport />} />
-                  {/**attach appropriate component */}
-                  <Route path="faq" element={<Faq />} />
-                  {/**attach appropriate component */}
-                  <Route path="ai-dashboard" element={<AiDashboard />} />
-                  {/**consider making ths its own page */}
-                  <Route path="rooms" element={<Rooms />} />
-                  {/**attach appropriate component */}
-                  {/* <Route path="notifications" element={<Notifications />} />*attach appropriate component */}
+      <Routes>
+        <Route path="/" element={<LoginForm />} />
+        <Route path="/otp" element={<OtpPage />} />
+
+        <Route path="/*" element={
+          <Layout>
+          <Routes>
+            <Route path="dashboard/*" element={<Dashboard />} >
+              <Route path="overview" element={<OverviewComponent />} />
+              <Route path="bookings" element={<BookingComponent />} />*attach appropriate component
+              <Route path="visitations" element={<Visitation />} />{/**attach appropriate component */}
+              <Route path="analysis" element={<Analysis/>} />{}
+            </Route>
+
+            <Route path="reports" element={<PDFReport />} />{/**attach appropriate component */}
+            <Route path="faq" element={ <Faq/> } />{/**attach appropriate component */}
+            <Route path="ai-dashboard" element={<AiDashboard />} />{/**consider making ths its own page */}
+           <Route path="rooms" element={<Rooms />} />{/**attach appropriate component */}
+           {/* <Route path="notifications" element={<Notifications />} />*attach appropriate component */}
+            <Route path="bookingStats" element={<BookingStats />} />{/**attach appropriate component */}
+            <Route path="worker-dashboard" element={<WorkerStatsDashboard />} />{/**attach appropriate component */}
+
 
-                  <Route path="settings/*" element={<Settings />}>
-                    <Route path="profile" element={<ProfileView />} />
-                    {/**attach appropriate component */}
-                    <Route path="appearance" element={<Appearance />} />
-                    <Route
-                      path="notifications"
-                      element={<NotificationsSettings />}
-                    />
-                    {/**attach appropriate component */}
-                    <Route path="security" element={<SecurityPage />} />
-                    {/**attach appropriate component */}
-                    <Route path="about" element={<AboutPage />} />
-                    {/**attach appropriate component */}
-                  </Route>
-                </Routes>
-              </Layout>
-            </ProtectedRoutes>
-          }></Route>
-      </FaroRoutes>
+
+            <Route path="settings/*" element={<Settings />}>
+              <Route path="profile" element={<ProfileView />} />{/**attach appropriate component */}
+              <Route path="appearance" element={<Appearance />} />
+              <Route path="notifications" element={<NotificationsSettings />} />{/**attach appropriate component */}
+              <Route path="security" element={<SecurityPage />} />{/**attach appropriate component */}
+              <Route path="about" element={<AboutPage />} />{/**attach appropriate component */}
+            </Route>
+          </Routes>
+        </Layout>}>
+        </Route>
+      </Routes>
     </Router>
-  );
+  )
 }
 
-export default App;
+export default App

frontend/occupi-web/src/SecurityService.ts

@@ -0,0 +1,54 @@
+import axios from 'axios';
+
+export interface SecuritySettings {
+  useBiometrics: boolean;
+  use2FA: boolean;
+  forceLogoutOnAppClose: boolean;
+}
+
+export const getSecuritySettings = async (email: string): Promise<{ data: SecuritySettings }> => {
+  try {
+    const response = await axios.get('/api/get-security-settings', {
+      params: {
+        email,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching security settings:', error);
+    throw error;
+  }
+};
+
+export const updateSecuritySettings = async (data: {
+    email: string;
+    mfa: 'on' | 'off';
+    currentPassword: string;
+    newPassword: string;
+    newPasswordConfirm: string;
+  }): Promise<{ data: null }> => {
+    try {
+      const response = await axios.post('/api/update-security-settings', data);
+      return response.data;
+    } catch (error) {
+      console.error('Error updating security settings:', error);
+      if (axios.isAxiosError(error)) {
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          // that falls out of the range of 2xx
+          console.error('Response data:', error.response.data);
+          console.error('Response status:', error.response.status);
+          console.error('Response headers:', error.response.headers);
+        } else if (error.request) {
+          // The request was made but no response was received
+          console.error('No response received:', error.request);
+        } else {
+          // Something happened in setting up the request that triggered an Error
+          console.error('Error setting up request:', error.message);
+        }
+      } else {
+        console.error('Unexpected error:', error);
+      }
+      throw error;
+    }
+  };