my-fleetbo-react-v1 1.0.2

package/src/@fleetbo/hooks/useLoadingTimeout.js

@@ -0,0 +1,18 @@
+//src/hooks/useLoadingTimeout
+
+import React from 'react';
+
+export const useLoadingTimeout = (loadingState, setLoadingState, setErrorState, timeoutMs = 15000) => {
+  React.useEffect(() => {
+    if (!loadingState) return;
+    
+    const failsafeTimeout = setTimeout(() => {
+      if (loadingState) {
+        setLoadingState(false);
+        setErrorState("Délai d'attente dépassé. Veuillez réessayer.");
+      }
+    }, timeoutMs);
+    
+    return () => clearTimeout(failsafeTimeout);
+  }, [loadingState, setLoadingState, setErrorState, timeoutMs]);
+};

package/src/@fleetbo/hooks/useModalLauncher.js

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import Fleetbo from 'api/fleetbo'; 
+const useModalLauncher = () => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    useEffect(() => {
+        const handleShowModal = () => {
+            setIsModalOpen(true);
+        };
+        window.addEventListener('showModalRequest', handleShowModal);
+        return () => {
+            window.removeEventListener('showModalRequest', handleShowModal);
+        };
+    }, []); 
+    const closeModal = () => {
+        setIsModalOpen(false);
+        if (window.Fleetbo && window.Fleetbo.setNavbarVisible) {
+            Fleetbo.setNavbarVisible();
+        }
+    };
+    return { isModalOpen, closeModal };
+};
+export default useModalLauncher;

package/src/@fleetbo/hooks/useStartupEffect.js

@@ -0,0 +1,111 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useStartupEffect = () => {
+    const navigate = useNavigate();
+
+    const isReadyRef = useRef(false);
+    const [isEngineReady, setIsEngineReady] = useState(false);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [sessionData, setSessionData] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        let timer = null;
+        let requester = null;
+
+        const cleanup = () => {
+            if (timer) clearTimeout(timer);
+            if (requester) clearInterval(requester);
+            window.removeEventListener('message', handleMessage);
+        };
+
+        const onFleetboReady = async () => {
+            if (isReadyRef.current) return;
+            isReadyRef.current = true;
+            cleanup();
+            
+            try {
+                const authData = await window.Fleetbo.checkAuthStatusAndRedirect();
+                if (authData) localStorage.setItem('fleetbo_session', JSON.stringify(authData));
+                
+                setIsAuthenticated(!!(authData && authData.isLoggedIn));
+                setSessionData(authData);
+                setIsEngineReady(true);
+            } catch (err) {
+                setError(err.message || "Authentication failed");
+                setIsEngineReady(true);
+            }
+        };
+
+        const handleMessage = (event) => {
+            if (event.data && event.data.type === 'FLEETBO_FORCE_LOGOUT') {
+                setIsAuthenticated(false);
+                setSessionData(null);
+                navigate('/login', { replace: true }); 
+                return;
+            }
+
+            if (event.data && event.data.type === 'FLEETBO_DELIVER_ENGINE') {
+                try {
+                    if (!document.getElementById('fleetbo-native-engine')) {
+                        const scriptEl = document.createElement('script');
+                        scriptEl.id = 'fleetbo-native-engine';
+                        scriptEl.innerHTML = event.data.code;
+                        document.head.appendChild(scriptEl);
+                    }
+                    setTimeout(() => { if (window.Fleetbo) onFleetboReady(); }, 50);
+                } catch (e) {
+                    setError("Failed to execute the fleetbo engine.");
+                    cleanup();
+                }
+            }
+        };
+
+        if (window.Fleetbo && typeof window.Fleetbo.fleetboLog === 'function') {
+            if (window.Fleetbo) onFleetboReady();
+            else requester = setInterval(() => { if (window.Fleetbo) onFleetboReady(); }, 100);
+        } 
+        else if (window.self !== window.top) {
+            window.addEventListener('message', handleMessage);
+            requester = setInterval(() => {
+                if (isReadyRef.current) { cleanup(); return; }
+                if (window.Fleetbo) { onFleetboReady(); return; }
+                if (window.parent) window.parent.postMessage({ type: 'FLEETBO_REQUEST_ENGINE' }, '*');
+            }, 500);
+        } 
+        else {
+            setTimeout(() => {
+                if (!isReadyRef.current) setError("Running outside of Fleetbo Environment.");
+            }, 2000);
+        }
+
+        timer = setTimeout(() => {
+            if (!isReadyRef.current) {
+                setError("Connection Timeout.");
+                cleanup();
+            }
+        }, 15000);
+
+        window.navigateToTab = (route) => navigate(route);
+
+        // Listener logout 
+        const handleLogout = (event) => {
+            if (event.data?.type === 'FLEETBO_FORCE_LOGOUT') {
+                setIsAuthenticated(false);
+                setSessionData(null);
+                navigate('/login', { replace: true });
+            }
+        };
+        
+        window.addEventListener('message', handleLogout);
+
+        return () => {
+            cleanup();
+            // Clear listener 
+            window.removeEventListener('message', handleLogout); 
+        };
+    }, [navigate]);
+
+    return { isEngineReady, isAuthenticated, sessionData, error };
+};

package/src/@fleetbo/index.js

@@ -0,0 +1,7 @@
+// src/@fleetbo/index.js
+export { fleetboDB } from './config/fleetboConfig';
+export { useLoadingTimeout } from './hooks/useLoadingTimeout';
+export { useStartupEffect } from './hooks/useStartupEffect';
+export { default as Loader } from './components/common/Loader';
+export { default as PageConfig } from './components/common/PageConfig';
+export { formatFirestoreDate } from './utils/FormatDate';

package/src/@fleetbo/utils/FormatDate.js

@@ -0,0 +1,52 @@
+/**
+ * Formats various date structures, including Firestore Timestamps,
+ * into a readable English date string.
+ * @param {object|string|number} firestoreDate - The date object to format.
+ * @returns {string} The formatted date (e.g., "September 15, 2023") or an empty string on error.
+ */
+export const formatFirestoreDate = (firestoreDate) => {
+    try {
+        // Case 1: Firestore Timestamp with seconds and nanoseconds
+        if (firestoreDate && typeof firestoreDate === 'object' && firestoreDate.seconds) {
+            const date = new Date(firestoreDate.seconds * 1000);
+            const options = {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            };
+            return date.toLocaleDateString('en-US', options);
+        }
+
+        // Case 2: Firestore Timestamp processed on the Android side (already in milliseconds, often with a _ prefix)
+        if (firestoreDate && typeof firestoreDate === 'object' && firestoreDate._seconds) {
+            const date = new Date(firestoreDate._seconds * 1000);
+            return date.toLocaleDateString('en-US');
+        }
+
+        // Case 3: Timestamp with nanoseconds property (alternative structure)
+        if (firestoreDate && typeof firestoreDate === 'object' && firestoreDate.nanoseconds !== undefined && firestoreDate.seconds !== undefined) {
+            const date = new Date(firestoreDate.seconds * 1000);
+            return date.toLocaleDateString('en-US');
+        }
+
+        // Case 4: Date string
+        if (typeof firestoreDate === 'string') {
+            const date = new Date(firestoreDate);
+            // Check if the date is valid before formatting
+            return isNaN(date) ? "" : date.toLocaleDateString('en-US');
+        }
+
+        // Case 5: Number (timestamp in milliseconds)
+        if (typeof firestoreDate === 'number') {
+            const date = new Date(firestoreDate);
+            return date.toLocaleDateString('en-US');
+        }
+
+        // If none of the cases match, return an empty string
+        return "";
+
+    } catch (error) {
+        console.error("Error formatting date:", error);
+        return "";
+    }
+};

package/src/@fleetbo/utils/getToken.js

@@ -0,0 +1,12 @@
+/**
+ * Handles fetching the token from Fleetbo and displays it in an alert.
+ */
+export const handleGetToken = async () => {
+    try {
+        // Use the Fleetbo API Promise
+        const tokenResult = await Fleetbo.getToken();
+        alert("Token reçu : " + tokenResult.token);
+    } catch (error) {
+        alert("Erreur lors de la récupération du token.");
+    }
+};

package/src/App.jsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { Routes, Route, Navigate, useLocation } from "react-router-dom";
+import { useStartupEffect } from '@fleetbo/hooks/useStartupEffect';
+
+// Application views
+import Tab1           from "./app/tabs/Tab1";
+import Tab2           from "./app/tabs/Tab2";
+import Tab3           from "./app/tabs/Tab3";
+import Welcome        from "./app/tabs/Welcome";
+import AuthRouter     from "./app/core/AuthRouter";
+import NotFound       from './app/core/NotFound';
+
+// FLEETBO_IMPORTS
+import Login          from "./app/mocks/Login";
+import SampleTab1     from './app/mocks/SampleTab1';
+import SampleTab2     from './app/mocks/SampleTab2';
+import SampleTab3     from './app/mocks/SampleTab3';
+// FLEETBO_MORE_IMPORTS
+
+const TabRedirector = ({ children }) => {
+    const saved = localStorage.getItem("activeTab") || "Tab1";
+    if (saved === "Tab2") return <Navigate to="/tab2" replace />;
+    if (saved === "Tab3") return <Navigate to="/tab3" replace />;
+    return children;
+};
+
+const InitializingScreen = ({ error }) => (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', flexDirection: 'column', padding: '20px', textAlign: 'center' }}>
+        {error ? (
+            <>
+                <i className="fa-solid fa-triangle-exclamation fa-3x text-danger mb-3"></i>
+                <h5 className="text-danger">System Halt</h5>
+                <p style={{ marginTop: '1rem', color: '#6c757d' }}>{error}</p>
+                <button className="btn btn-outline-secondary mt-3" onClick={() => window.location.reload()}>Reboot</button>
+            </>
+        ) : (
+            <div className="spinner-border text-success" role="status">
+                <span className="visually-hidden">Booting OS...</span>
+            </div>
+        )}
+    </div>
+);
+
+function App() {
+    const { isEngineReady, isAuthenticated, sessionData, error } = useStartupEffect();
+    const [iframeAuthOverride, setIframeAuthOverride] = useState(false);
+    
+    const location = useLocation();
+    const isNavbarRoute = location.pathname.includes('navbar') || location.hash.includes('navbar') || window.location.href.includes('navbar');
+
+    useEffect(() => {
+        if (isNavbarRoute) {
+            const handleStorage = () => {
+                setIframeAuthOverride(true);
+            };
+            window.addEventListener('storage', handleStorage);
+            return () => window.removeEventListener('storage', handleStorage);
+        }
+    }, [isNavbarRoute]);
+
+    if (error) return <InitializingScreen error={error} />;
+
+    const isSimulator = !!window.__FLEETBO_SIMULATOR 
+        || window.location.hash.includes('simulator=1')
+        || new URLSearchParams(window.location.search).get('simulator') === '1';
+
+    if (!isEngineReady && !isNavbarRoute && !isSimulator) {
+        return <InitializingScreen />;
+    }
+
+    const isActuallyAuthenticated = isAuthenticated || iframeAuthOverride;
+
+    if (isNavbarRoute) {
+        return isActuallyAuthenticated ? <Welcome /> : null;
+    }
+
+    return (
+        <div className="app-container">
+            <main className="main-content">  
+                <Routes>
+                    {!isAuthenticated ? (
+                        <>
+                            <Route path="/" element={<Login />} />
+                            <Route path="/auth/route" element={<AuthRouter />} />
+                            <Route path="*" element={<Navigate to="/" replace />} />
+                        </>
+                    ) : (
+                        <>
+                            <Route path="/" element={
+                                <TabRedirector>
+                                    <Tab1 sessionData={sessionData} />
+                                </TabRedirector>
+                            } />
+
+                            <Route path="/tab1" element={
+                                <TabRedirector>
+                                    <Tab1 sessionData={sessionData} />
+                                </TabRedirector>
+                            } />
+                            
+                            <Route path="/tab2" element={<Tab2 />} />
+                            <Route path="/tab3" element={<Tab3 />} />
+
+                            {/* FLEETBO_ROUTES */}
+                            <Route path="/mocks/sampletab1" element={<SampleTab1 />} />
+                            <Route path="/mocks/sampletab2" element={<SampleTab2 />} />
+                            <Route path="/mocks/sampletab3" element={<SampleTab3 />} />
+                            {/* FLEETBO_DYNAMIC ROUTES */}
+
+                            <Route path="*" element={<NotFound />} />
+                        </>
+                    )}
+                </Routes>
+            </main>
+        </div>
+    );
+}
+
+export default App;

package/src/app/assets/css/App.css

@@ -0,0 +1,91 @@
+
+html, body, #root {
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+* {
+    cursor: inherit !important; 
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+::-webkit-scrollbar { width: 0px; background: black; }
+
+@media (hover: hover) {
+    .btn:hover, a:hover {
+        background-color: inherit !important;
+        color: inherit !important;
+        border-color: inherit !important;
+    }
+}
+
+.btn:active, a:active { opacity: 0.7; transform: scale(0.98); }
+header { background: #fff; color: #0E904D; text-align: left; }
+
+/* ============================================================
+    FLEETBO NATIVE RESET 
+   ============================================================ */
+.btn {
+    --bs-btn-hover-color: var(--bs-btn-color);
+    --bs-btn-active-color: var(--bs-btn-color);
+    --bs-btn-hover-bg: var(--bs-btn-bg);
+    --bs-btn-active-bg: var(--bs-btn-bg);
+    --bs-btn-hover-border-color: var(--bs-btn-border-color);
+    --bs-btn-active-border-color: var(--bs-btn-border-color);
+    box-shadow: none !important;
+    text-decoration: none;
+}
+
+.btn:hover, 
+.btn:focus,
+a:hover,
+a:focus {
+    color: var(--bs-btn-color) !important;
+    background-color: var(--bs-btn-bg) !important;
+    border-color: var(--bs-btn-border-color) !important;
+    box-shadow: none !important;
+    outline: none !important;
+    text-decoration: none !important; 
+    opacity: 1 !important; 
+    transform: none !important;
+}
+
+.btn-link:hover, 
+.btn-link:focus,
+.fb-button:hover,
+.fb-button:focus {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    color: inherit !important; 
+}
+
+.btn:active, 
+a:active, 
+.card:active {
+    opacity: 0.6 !important; 
+    transform: scale(0.97) !important; 
+    transition: transform 0.05s ease, opacity 0.05s ease !important;
+}
+
+.form-control:focus, 
+input:focus, 
+textarea:focus {
+    box-shadow: none !important;
+    outline: none !important;
+    border-color: #86b7fe !important; 
+}
+
+.read {
+    background: #86b7fe;
+}
+.btn:active, a:active { opacity: 0.7; transform: scale(0.98); }
+.btn-header, .btn-delete { background: none; border: none; font-size: 18px; }
+.fb-button-logout { background-color: transparent; color: #0E904D; border-color: transparent; margin-top: 1.2rem; }

package/src/app/assets/css/Auth.css

@@ -0,0 +1,50 @@
+/* CSS for the Login Gateway (Login.jsx) 
+   "Really clean" version: no card, no shadow, just centered elements.
+*/
+
+/* 1. Main Container (Handles centering, white background) */
+.login-passerelle-container {
+  display: flex;
+  align-items: center; /* Center vertically */
+  justify-content: center; /* Center horizontally */
+  min-height: 100vh; /* Takes up 100% of screen height */
+  background-color: #ffffff; /* Native white background */
+  padding: 2.5rem; /* Padding applied to the container */
+  text-align: center; /* Centers logo and text */
+}
+
+/* 2. The Login "Box" (Now invisible) */
+.login-passerelle-box {
+  width: 100%;
+  max-width: 420px; /* Keeps content centered and readable */
+  /* This is now just a fixed-width container */
+}
+
+/* 4. Main Button Style */
+.login-passerelle-box .btn-success {
+  font-weight: 550;
+  font-size: 1.1rem; 
+  padding: 0.85rem 1rem; 
+  border-radius: 8px; /* Rounded corners for the button */
+  border: none;
+  transition: all 0.3s ease;
+  width: 100%; /* Button takes full width */
+}
+
+/* Hover effect for the button (subtler) */
+.login-passerelle-box .btn-success:hover {
+  transform: translateY(-2px);
+  /* Use subtle box-shadow for flat look */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
+}
+
+/* 5. Typography */
+.login-passerelle-box h3 {
+  font-weight: 700;
+  color: #212529;
+}
+
+.login-passerelle-box p.text-muted {
+  font-size: 1rem;
+  line-height: 1.6;
+}

package/src/app/assets/css/Form.css

@@ -0,0 +1,113 @@
+/* Form Container */
+
+  .form-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 90vh;
+    overflow-x: hidden;
+  }
+
+  .form {
+    width: 100%;
+    padding: 3%;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+  
+  /* Form Title */
+  .form-container h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    color: #999f9e;
+  }
+  
+  /* Form Group */
+  .form-group {
+    margin-bottom: 15px;
+    text-align: left;
+  }
+  
+  /* Labels */
+  .form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  /* Input Fields */
+  .form-group input {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    outline: none;
+    transition: border-color 0.3s ease;
+  }
+  
+  .form-group input:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
+  }
+  
+  /* Submit Button */
+  button {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+    color: #fff;
+    background-color: #999f9e;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  
+  /* Footer Text */
+  .form-footer {
+    margin-top: 15px;
+    font-size: 14px;
+    color: #333;
+  }
+  
+  .form-footer a {
+    color: #999f9e;
+    text-decoration: none;
+  }
+  
+  .form-footer a:hover {
+    text-decoration: underline;
+  }
+
+  .label {
+    color:  #414141;
+    float: left;
+    font-size: 17px;
+  }
+  
+  /* Mobile Optimization */
+  @media (max-width: 480px) {
+    .form-container {
+      padding: 15px;
+    }
+  
+    .form-container h1 {
+      font-size: 20px;
+    }
+  
+    .form-group input {
+      font-size: 14px;
+      padding: 8px;
+    }
+  
+    button {
+      font-size: 14px;
+      padding: 10px;
+    }
+  }

package/src/app/core/AuthRouter.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom'; 
+import Loader from '@fleetbo/components/common/Loader'; 
+
+/**
+ * This component acts as a router/switcher.
+ * It reads the state ('login' or 'welcome') stored by the native code,
+ * ensures that the navigation bar is hidden,
+ * and redirects the user to the appropriate page using React Router.
+ */
+const RouteAuth = () => {
+    const navigate = useNavigate(); 
+
+    useEffect(() => {
+
+        const data = localStorage.getItem('AppInfo');
+        if (data) {
+            try {
+                const parsedData = JSON.parse(data);
+                if (parsedData.state === "welcome") {
+                    navigate('/tab1', { replace: true });
+                } else {
+                    navigate('/login', { replace: true });
+                }
+            } catch (error) {
+                navigate('/login', { replace: true });
+            }
+        } else {
+            navigate('/login', { replace: true });
+        }
+    }, [navigate]); 
+
+    return <Loader />;
+};
+
+export default RouteAuth;

package/src/app/core/NotFound.jsx

@@ -0,0 +1,18 @@
+// src/app/NotFound.jsx
+import React from 'react';
+const NotFound = () => {
+  return (
+    <div className="d-flex justify-content-center align-items-center text-center vh-100 bg-light">
+      <div>
+        <h1 className="display-1 fw-bold text-secondary">404</h1>
+        <p className="lead text-muted">
+          Page not found.
+        </p>
+        <button onClick={() => Fleetbo.back()} className="btn btn-success w-100 mt-3">
+          Go Back
+        </button>
+      </div>
+    </div>
+  );
+};
+export default NotFound;