- aded npm packages @types/qrcode, qrcode and node-f2a

- corrected UsersController.ts and RoleController.ts with correct routes for settings
- added migration script and ui and Controller for 2 Factor Authentication
- npm updates

resources/js/Components/FirstrunWizard/components/Page1.vue

@@ -13,11 +13,11 @@
                     :subtitle="'Collaborate and communicate across any platform.'">
                     <BriefcaseCheck :size="20" />
                 </Card> -->
-                <div class="max-w-60 h-fit box-border flex">
+                <div class="h-fit box-border flex">
 
-                    <!-- <div class="card__icon">
+                    <div class="card__icon">
                         <BriefcaseCheck :size="20" />
-                    </div> -->
+                    </div>
 
                     <div>
                         Discover the power of TethysCloud, the cutting-edge web backend solution that revolutionizes the way you
@@ -44,7 +44,8 @@
 import Card from './Card.vue'
 
 import SwapHorizontal from '@/Components/Icons/SwapHorizontal.vue';
-import AccountGroup from '@/Components/Icons/AccountGroup.vue'
+import AccountGroup from '@/Components/Icons/AccountGroup.vue';
+import BriefcaseCheck from '@/Components/Icons/BriefcaseCheck.vue'
 
 
 export default {
@@ -54,6 +55,7 @@ export default {
         Card,       
         SwapHorizontal,
         AccountGroup,
+        BriefcaseCheck
     },
 }
 </script>

resources/js/Components/Map/SearchMap.vue

@@ -108,21 +108,7 @@ const drawControl: Ref<DrawControlComponent | null> = ref(null);
 const southWest = ref(null);
 const northEast = ref(null);
 const mapService = MapService();
-// const coverage = {
-// 	x_min: undefined,
-// 	y_min: undefined,
-// 	x_max: undefined,
-// 	y_max: undefined,
-// 	elevation_min: undefined,
-// 	elevation_max: undefined,
-// 	elevation_absolut: undefined,
-// 	depth_min: undefined,
-// 	depth_max: undefined,
-// 	depth_absolut: undefined,
-// 	time_min: undefined,
-// 	time_max: undefined,
-// 	time_absolut: undefined,
-// };
+
 const filterLayerGroup = new LayerGroup();
 // Replace with your actual data
 // const datasets: Ref<OpensearchDocument[]> = ref([]);
@@ -286,11 +272,33 @@ const handleDrawEventCreated = async (event) => {
 
 <template>
     <SectionMain>
-        <div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
-            <ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
-            <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest" :northEast="northEast">
-            </DrawControlComponent>
-        </div>
+        <!-- <div class="dark:bg-slate-900 bg-white"> -->
+
+            <div id="map" class="map-container mt-6 mb-6 rounded-2xl py-12 px-6 text-center dark:bg-slate-900 bg-white">
+                <ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
+                <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest"
+                    :northEast="northEast">
+                </DrawControlComponent>
+            </div>
+        <!-- </div> -->
     </SectionMain>
     <!-- </section> -->
 </template>
+
+
+<style lang="css">
+/* .leaflet-container {
+    height: 600px;
+    width: 100%;
+    background-color: transparent;
+    outline-offset: 1px;
+} */
+.leaflet-container {
+    height: 600px;
+    width: 100%;
+}
+
+.leaflet-container .leaflet-pane {
+    z-index: 30!important;
+}
+</style>

resources/js/Components/Map/map.component.vue

@@ -1,9 +1,11 @@
 <template>
     <div style="position: relative">
         <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
-        <div :id="mapId" class="map-container mapDesktop rounded">
-            <ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
-            <DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
+        <div :id="mapId" class="rounded">
+            <div class="dark:bg-slate-900 bg-slate flex flex-col">
+                <ZoomControlComponent ref="zoom" :mapId="mapId" />
+                <DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast" />
+            </div>
         </div>
     </div>
 </template>
@@ -242,11 +244,19 @@ export default class MapComponent extends Vue {
 }
 </script>
 
-<style lang="css">
-.leaflet-container {
-    height: 600px; /* <-- map height */
+<style scoped lang="css">
+/* .leaflet-container {
+    height: 600px;
     width: 100%;
+    background-color: transparent;
+    outline-offset: 1px;
+} */
+.leaflet-container {
+    height: 600px;
+    width: 100%;
+    background: none;
 }
+
 .leaflet-pane {
     z-index: 30;
 }