my-fleetbo-react-v1 1.0.2

package/src/app/mocks/Login.jsx

@@ -0,0 +1,89 @@
+/**
+ * === Fleetbo Developer Guide: The Authentication Gateway (Login.jsx) ===
+ *
+ * This component is the ignition key for your application.
+ * It establishes the secure link with the Fleetbo Native Engine.
+ */
+
+import React, { useState } from 'react';
+import 'app/assets/css/Auth.css';
+import logo from 'app/assets/images/logo.png';
+import { PageConfig } from '@fleetbo';
+
+const DEFAULT_TAB = 'tab1';
+
+const Login = ({ sessionData: sessionDataProp }) => {
+    const sessionData = sessionDataProp || (() => {
+        try {
+            const s = localStorage.getItem('fleetbo_session');
+            return s ? JSON.parse(s) : null;
+        } catch (e) { return null; }
+    })();
+
+    const [phoneNumber, setPhoneNumber] = useState('');
+    const [loadingLog, setLoadingLog] = useState(false);
+
+    const handleVerifyPhoneNumber = async () => {
+        if (!phoneNumber.trim()) return;
+        setLoadingLog(true);
+        try {
+            const result = await Fleetbo.logTester(phoneNumber.trim());
+            if (result && result.success) {
+                await Fleetbo.log(DEFAULT_TAB); 
+            } else {
+                alert("Unauthorized.\n\nPlease check your phone number.");
+            }
+        } catch (error) {
+            alert("Connection error during verification.");
+        } finally {
+            setLoadingLog(false);
+        }
+    };
+
+    return (
+        <>
+            <PageConfig navbar="none" />
+
+            <div className="login-passerelle-container" style={{ animation: 'fadeIn 0.5s ease-in-out' }}>
+                <div className="login-passerelle-box">
+                    {sessionData ? (
+                        <div className="w-100 d-flex flex-column align-items-center text-center" style={{ maxWidth: '340px' }}>
+                            <img className="mb-3" src={logo} alt="logo" style={{ width: '50px', height: '50px' }} />
+                            <h3 className="fw-bold mb-1" style={{ fontSize: '19px', color: '#4c8a69' }}>
+                                {sessionData.appName || "Fleetbo"}
+                            </h3>
+                            <p className="text-muted mb-4" style={{ fontSize: '13px' }}>
+                                {sessionData.description || "Mobile Cloud OS"}
+                            </p>
+                            
+                            <input 
+                                type="tel" 
+                                className="form-control p-3 text-center mb-3 w-100" 
+                                style={{ height: '55px', borderRadius: '10px' }} 
+                                placeholder="Enter your phone number" 
+                                value={phoneNumber}
+                                onChange={(e) => setPhoneNumber(e.target.value)}
+                            />
+                            <button 
+                                onClick={handleVerifyPhoneNumber} 
+                                className="btn p-3 fs-6 btn-success w-100" 
+                                style={{ borderRadius: '14px', height: '55px', backgroundColor: '#4c8a69', border: 'none', fontWeight: 'bold' }}
+                                disabled={loadingLog}
+                            >
+                                {loadingLog ? (
+                                    <><span className="spinner-border spinner-border-sm me-2" />Checking...</>
+                                ) : (
+                                    "Login"
+                                )}
+                            </button>
+                        </div>
+                    ) : (
+                        <p className="text-danger">Failed to load app data.</p>
+                    )}
+                </div>   
+            </div>
+        </>
+    );
+};
+
+export default Login;

package/src/app/mocks/SampleTab1.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+export default function SampleTab() {
+    return (
+        <div 
+            className="d-flex flex-column justify-content-center align-items-center w-100"
+            style={{ 
+                minHeight: '100vh', 
+                backgroundColor: '#F8F9FA', 
+                padding: '24px', 
+                paddingBottom: '80px' 
+            }}
+        >
+            <h1 
+                style={{ 
+                    fontSize: '28px', 
+                    fontWeight: 'bold', 
+                    color: '#212529', 
+                    margin: '0 0 16px 0',
+                    textAlign: 'center'
+                }}
+            >
+                Tab 1 - Mock
+            </h1>
+            
+            <p 
+                style={{ 
+                    fontSize: '16px', 
+                    color: '#6C757D', 
+                    textAlign: 'center', 
+                    lineHeight: '24px', 
+                    margin: '0 0 40px 0',
+                    maxWidth: '400px'
+                }}
+            >
+                This is a Fleetbo View. The interface is rendered natively at 120 FPS.<br />
+                Open the Compose panel, describe your feature in plain language, and Alex forges the Fleetbo View instantly.
+            </p>
+            
+            <div
+                className="d-flex align-items-center justify-content-center text-white"
+                style={{ 
+                    backgroundColor: '#0E904D', 
+                    borderRadius: '12px', 
+                    width: '100%', 
+                    maxWidth: '400px',
+                    height: '56px', 
+                    cursor: 'default',
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    transition: 'transform 0.1s'
+                }}
+                onClick={() => Fleetbo.emit('PING_JS', {})}
+            >
+                EMIT SIGNAL TO JS
+            </div>
+        </div>
+    );
+}
+// ⚡ Forged by Alex on 2026-03-28 at 15:04:20

package/src/app/mocks/SampleTab2.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export default function SampleTab() {
+    return (
+        <div 
+            className="d-flex flex-column justify-content-center align-items-center w-100"
+            style={{ 
+                minHeight: '100vh', 
+                backgroundColor: '#F8F9FA', 
+                padding: '24px', 
+                paddingBottom: '80px' 
+            }}
+        >
+            <h1 
+                style={{ 
+                    fontSize: '28px', 
+                    fontWeight: 'bold', 
+                    color: '#212529', 
+                    margin: '0 0 16px 0',
+                    textAlign: 'center'
+                }}
+            >
+                Tab 2 - Mock
+            </h1>
+            
+            <p 
+                style={{ 
+                    fontSize: '16px', 
+                    color: '#6C757D', 
+                    textAlign: 'center', 
+                    lineHeight: '24px', 
+                    margin: '0 0 40px 0',
+                    maxWidth: '400px'
+                }}
+            >
+                This is a Fleetbo View. The interface is rendered natively at 120 FPS.<br />
+                Open the Compose panel, describe your feature in plain language, and Alex forges the Fleetbo View instantly.
+            </p>
+            
+            <div
+                className="d-flex align-items-center justify-content-center text-white"
+                style={{ 
+                    backgroundColor: '#0E904D', 
+                    borderRadius: '12px', 
+                    width: '100%', 
+                    maxWidth: '400px',
+                    height: '56px', 
+                    cursor: 'default',
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    transition: 'transform 0.1s'
+                }}
+                onTouchStart={(e) => e.currentTarget.style.transform = 'scale(0.96)'}
+                onTouchEnd={(e) => e.currentTarget.style.transform = 'scale(1)'}
+                onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.96)'}
+                onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
+                onClick={() => Fleetbo.emit('PING_JS', {})}
+            >
+                EMIT SIGNAL TO JS
+            </div>
+        </div>
+    );
+}
+// ⚡ Forged by Alex on 2026-03-28 at 15:04:20

package/src/app/mocks/SampleTab3.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export default function SampleTab() {
+    return (
+        <div 
+            className="d-flex flex-column justify-content-center align-items-center w-100"
+            style={{ 
+                minHeight: '100vh', 
+                backgroundColor: '#F8F9FA', 
+                padding: '24px', 
+                paddingBottom: '80px' 
+            }}
+        >
+            <h1 
+                style={{ 
+                    fontSize: '28px', 
+                    fontWeight: 'bold', 
+                    color: '#212529', 
+                    margin: '0 0 16px 0',
+                    textAlign: 'center'
+                }}
+            >
+                Tab 3 - Mock
+            </h1>
+            
+            <p 
+                style={{ 
+                    fontSize: '16px', 
+                    color: '#6C757D', 
+                    textAlign: 'center', 
+                    lineHeight: '24px', 
+                    margin: '0 0 40px 0',
+                    maxWidth: '400px'
+                }}
+            >
+                This is a Fleetbo View. The interface is rendered natively at 120 FPS.<br />
+                Open the Compose panel, describe your feature in plain language, and Alex forges the Fleetbo View instantly.
+            </p>
+            
+            <div
+                className="d-flex align-items-center justify-content-center text-white"
+                style={{ 
+                    backgroundColor: '#de4751ff', 
+                    borderRadius: '12px', 
+                    width: '100%', 
+                    maxWidth: '400px',
+                    height: '56px', 
+                    cursor: 'default',
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    transition: 'transform 0.1s'
+                }}
+                onTouchStart={(e) => e.currentTarget.style.transform = 'scale(0.96)'}
+                onTouchEnd={(e) => e.currentTarget.style.transform = 'scale(1)'}
+                onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.96)'}
+                onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
+                onClick={() => Fleetbo.emit('LOGOUT', {})}
+            >
+                Log Out
+            </div>
+        </div>
+    );
+}
+// ⚡ Forged by Alex on 2026-03-28 at 15:04:20

package/src/app/tabs/Tab1.jsx

@@ -0,0 +1,40 @@
+/**
+ * Tab1.jsx — Fleetbo JS in Action
+ *
+ * JS = Brain (orchestrates) | Native = Muscle (executes) | Alex = Architect (forges)
+ *
+ * Two patterns:
+ *   Manager  → List + Create in one module. Fleetbo.openView('GuestManager', true)
+ *   Atomic   → One action, closes. await Fleetbo.exec('Scanner', 'open', {})
+ *
+ * Alex (npm run alex):
+ *    "Forge a guest manager with list and photo"  → Alex builds 
+ *    "A guest manager with list and photo"         → Alex stays conversational
+ *   Rule: use "forge", "create", "modify" to trigger code generation.
+ *
+ * Quick ref:
+ *   Fleetbo.openView('Module', true)       → Native tab
+ *   Fleetbo.exec('Module', 'action', {})   → Native overlay
+ *   Fleetbo.add(db, col, json)             → Write doc
+ *   Fleetbo.getDocsG(db, col)              → Read docs
+ *   Fleetbo.delete(db, col, id)            → Delete doc
+ */
+
+import { useEffect, useState } from 'react';
+import { PageConfig } from '@fleetbo';
+ 
+export default function Tab1() {
+    const [navMode, setNavMode] = useState("show");
+    useEffect(() => {
+        Fleetbo.openView('SampleTab1', true, {
+            emit: async (action, payload) => {
+                if (action === 'HIDE_NAVBAR') setNavMode("none");
+                if (action === 'SHOW_NAVBAR') setNavMode("show");
+                if (action === 'PING_JS') {
+                    // Example : Fleetbo.exec('ModuleName', 'action', {}); Generate by Alex
+                }
+            }
+        });
+    }, []);
+    return (<> <PageConfig navbar={navMode} /> </>);
+};

package/src/app/tabs/Tab2.jsx

@@ -0,0 +1,25 @@
+/**
+ * Fleetbo Tab Redirect or Not
+ *
+ * This tab is handled by a native module (or its mock in dev).
+ * If React renders this route (e.g. on reload), we redirect to the mock.
+ */
+import { useEffect, useState } from 'react';
+import { PageConfig } from '@fleetbo';
+
+export default function Tab2() {
+    const [navMode, setNavMode] = useState("show");
+    useEffect(() => {
+        Fleetbo.openView('SampleTab2', true, {
+            emit: async (action, payload) => {
+                if (action === 'HIDE_NAVBAR') setNavMode("none");
+                if (action === 'SHOW_NAVBAR') setNavMode("show");
+                if (action === 'PING_JS') {
+                    console.log("Signal reçu du Métal !");
+                    // Example: Fleetbo.exec('MyModuleName', 'open', {});
+                }
+            }
+        });
+    }, []);
+    return (<> <PageConfig navbar={navMode} /> </>);
+}

package/src/app/tabs/Tab3.jsx

@@ -0,0 +1,23 @@
+/**
+ * Fleetbo Tab Redirect or Not
+ * This tab is handled by a fleetbo module (or its mock in dev).
+ */
+import { useEffect, useState } from 'react';
+import { PageConfig } from '@fleetbo';
+   
+export default function Tab3() {
+    const [navMode, setNavMode] = useState("show");
+    useEffect(() => {
+        Fleetbo.openView('SampleTab3', true, {
+            emit: async (action, payload) => {
+                if (action === 'HIDE_NAVBAR') setNavMode("none");
+                if (action === 'SHOW_NAVBAR') setNavMode("show");
+                if (action === 'LOGOUT') { Fleetbo.logout(); }
+                //if (action === 'OPEN_EDIT_PROFILE') {
+                    // Example: Fleetbo.exec('EditProfileModule', 'open', {});
+                //}
+            }
+        });
+    }, []); 
+    return (<> <PageConfig navbar={navMode} /> </>);
+}

package/src/app/tabs/Welcome.jsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const navItems = [
+  { id: 'Tab1', view: 'tab1', label: 'Tab 1' },
+  { id: 'Tab2', view: 'tab2', label: 'Tab 2' },
+  { id: 'Tab3', view: 'tab3', label: 'Tab 3' },
+];
+
+const getNavbarType = () => {
+  const params = new URLSearchParams(window.location.search);
+  if (params.get('type') === 'header') return 'header';
+  if (params.get('type') === 'footer') return 'footer';
+  const savedType = localStorage.getItem("navbar");
+  return savedType || 'footer';
+};
+
+const getInitialTab = () => {
+  const params = new URLSearchParams(window.location.search);
+  const activeRoute = params.get('activeRoute');
+  if (activeRoute) {
+    const matchedTab = navItems.find(item => !item.isNative && activeRoute.includes(`/${item.view}`));
+    if (matchedTab) return matchedTab.id;
+  }
+  return localStorage.getItem("activeTab") || 'Tab1';
+};
+
+const Welcome = () => {
+  const location = useLocation(); 
+
+  const [navbarType, setNavbarType] = useState(getNavbarType);
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+
+  useEffect(() => {
+    const handleMessage = (event) => {
+        if (!event.data) return;
+        const { type, route: eventRoute, activeTab: msgActiveTab, navbarMode } = event.data;
+        
+        // Reset navbar 
+        if (type === 'FLEETBO_FORCE_LOGOUT') {
+            setActiveTab('Tab1');
+            localStorage.setItem("activeTab", 'Tab1');
+            return;
+        }
+
+        if (type === 'FLEETBO_UPDATE_ACTIVE_TAB' && msgActiveTab) {
+            setActiveTab(msgActiveTab);
+            localStorage.setItem("activeTab", msgActiveTab);
+        } else if (type === 'FLEETBO_NAVIGATE_INTERNAL' && eventRoute) {
+            const matchedTab = navItems.find(item => !item.isNative && eventRoute.includes(`/${item.view}`));
+            if (matchedTab) {
+                setActiveTab(matchedTab.id);
+                localStorage.setItem("activeTab", matchedTab.id);
+            }
+        } else if (type === 'SET_NAVBAR_TYPE' && navbarMode) {
+            setNavbarType(navbarMode);
+            localStorage.setItem("navbar", navbarMode);
+        }
+    };
+
+    const handleStorageChange = (e) => {
+        if (e.key === 'activeTab') {
+            setActiveTab(e.newValue || 'Tab1');
+        }
+
+        if (e.key === null && !localStorage.getItem('activeTab')) {
+            setActiveTab('Tab1');
+        }
+    };
+
+    window.addEventListener('message', handleMessage);
+    window.addEventListener('storage', handleStorageChange); 
+
+    if (window.top !== window.self) {  
+        window.top.postMessage({ type: 'FLEETBO_REQUEST_ENGINE' }, '*'); 
+    }
+
+    return () => {
+        window.removeEventListener('message', handleMessage);
+        window.removeEventListener('storage', handleStorageChange); 
+    };
+  }, []);
+
+  const handleTabClick = (item) => {
+    setActiveTab(item.id);
+    
+    localStorage.setItem("activeTab", item.id);
+    localStorage.setItem("activeTabView", item.view);
+    localStorage.setItem("activeTabNative", item.isNative ? "true" : "false");
+    
+    if (window.Fleetbo) {
+        window.Fleetbo.openView(item.view, !!item.isNative); 
+    } else {
+        console.warn("Fleetbo engine not found"); 
+    }
+  };
+
+  const getIconClass = (id, isActive) => {
+    if (id === 'Tab1') return isActive ? 'fa-solid fa-house' : 'fa-solid fa-house';
+    if (id === 'Tab2') return isActive ? 'fa-solid fa-compass' : 'fa-regular fa-compass';
+    if (id === 'Tab3') return isActive ? 'fa-solid fa-user' : 'fa-regular fa-user';
+    return 'fa-solid fa-circle';
+  };
+
+  // ==========================================
+  // STYLES INLINE 
+  // ==========================================
+  const containerStyle = {
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    height: '70px',    
+    paddingBottom: 'env(safe-area-inset-bottom)', 
+    boxSizing: 'border-box',    
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    backgroundColor: 'rgba(247, 246, 246, 0.95)',
+    zIndex: 1000,
+    ...(navbarType === 'header' 
+        ? { top: 0, borderBottom: '1px solid #eee' } 
+        : { bottom: 0, borderTop: '1px solid #eee' }
+    )
+  };
+
+  const baseStyles = {
+    button: {
+        flex: 1,
+        background: 'transparent',
+        border: 'none',
+        padding: '8px',
+        cursor: 'default', 
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#999', 
+    },
+    activeButton: {
+        color: '#0E904D', 
+        fontWeight: 'bold'
+    },
+    label: {
+        fontSize: '12px',
+        marginTop: '4px'
+    }
+  };
+
+  return (
+    <div style={containerStyle}>
+      {navItems.map((item) => {
+        const isActive = activeTab === item.id;
+        return (
+          <button 
+            key={item.id}
+            onClick={() => handleTabClick(item)}
+            style={{ 
+                ...baseStyles.button, 
+                ...(isActive ? baseStyles.activeButton : {}) 
+            }}
+          >
+            <i 
+                className={getIconClass(item.id, isActive)} 
+                style={{ fontSize: '20px', marginBottom: '2px' }}
+            ></i>
+            <span style={baseStyles.label}>{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Welcome;

package/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+import './app/assets/css/App.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <HashRouter>
+        <App />
+    </HashRouter>
+);

package/vite.config.js

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react({
+    include: '**/*.{jsx,js}',  
+  })],
+  
+  base: './',
+
+  define: {
+    'process.env.VITE_FLEETBO_ENTERPRISE_ID': JSON.stringify(process.env.VITE_FLEETBO_ENTERPRISE_ID),
+    'process.env.VITE_FLEETBO_KEY_APP': JSON.stringify(process.env.VITE_FLEETBO_KEY_APP),
+  },
+
+  resolve: {
+    alias: {
+      '@fleetbo': path.resolve(__dirname, 'src/@fleetbo'),
+      'app': path.resolve(__dirname, './src/app'),
+    },
+  },
+
+  server: {
+    port: 3000, 
+    host: '0.0.0.0',
+  },
+
+  build: {
+    outDir: 'build', 
+  },
+});