Update

REFERENCES.md

@@ -17,3 +17,5 @@
 - [Quickstart - Flowbite Svelte](https://flowbite-svelte.com/docs/pages/quickstart)
 - [Getting Started with Flowbite-Svelte](https://medium.com/mkdir-awesome/getting-started-with-flowbite-svelte-37b086ce9db5)
 - [Render specific react component based on the URL](https://stackoverflow.com/questions/68412713/render-specific-react-component-based-on-the-url)
+- [React functional components: const vs. function](https://dev.to/ugglr/react-functional-components-const-vs-function-2kj9)
+- [A complete guide to routing in React](https://hygraph.com/blog/routing-in-react)

threagile-monitoring/src/threagile_monitoring/components/App.js

@@ -1,20 +1,34 @@
-import { React, Router, Route, Switch } from 'react'
+// import { React, Router, Route, Switch } from 'react'
+import {React, Router} from 'react';
 
-function App () {
+function App() {
   return (
-    <div className='App'>
+    <div>
+      <h1>Hello, World!</h1>
+      <p>This is a React component.</p>
       <Router>
-        <Switch>
-          <Route exact path='/' component={() => <Layout showHome />} />
-          <Route
-            exact
-            path='/dashboards'
-            component={() => <Layout showDashboard />}
-          />
-        </Switch>
+
       </Router>
     </div>
-  )
+  );
 }
 
+
+// const App = () => {
+//   return (
+//     <div className='App'>
+//       <Router>
+//         <Switch>
+//           <Route exact path='/' component={() => <Layout showHome />} />
+//           <Route
+//             exact
+//             path='/dashboards'
+//             component={() => <Layout showDashboard />}
+//           />
+//         </Switch>
+//       </Router>
+//     </div>
+//   )
+// }
+
 export default App

threagile-monitoring/src/threagile_monitoring/components/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import App from './App'
 import reportWebVitals from './reportWebVitals'
 
 const rootElement = document.getElementById('root')

threagile-monitoring/src/threagile_monitoring/package.json

@@ -22,6 +22,7 @@
     "flowbite-svelte-icons": "^2.0.2",
     "jest": "^29.7.0",
     "lucide-react": "^0.469.0",
+    "react-router-dom": "^7.1.1",
     "recharts": "^2.15.0",
     "svelte-add": "^2.7.3",
     "tailwind-merge": "^2.6.0",

threagile-monitoring/src/threagile_monitoring/templates/navbar.html

@@ -5,9 +5,9 @@
             <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Threagile Monitoring</span>
         </a>
         <div class="flex md:order-2">
-            <button type="button"
+            <!-- <button type="button"
                 class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get
-                started</button>
+                started</button> -->
             <button data-collapse-toggle="navbar-cta" type="button"
                 class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                 aria-controls="navbar-cta" aria-expanded="false">