abstract dbm and light composable and components and upgrade light user gui for fine graining with + and -

src/pages/DataPage.vue

@@ -1,7 +1,19 @@
 <template>
+  <q-btn class="q-ma-md" label="Save DBM" color="primary" push @click="saveDBM"></q-btn>
   <DBMTree></DBMTree>
 </template>
 
 <script setup lang="ts">
-import DBMTree from 'src/components/DBMTree.vue';
+import DBMTree from 'src/components/dbm/DBMTree.vue';
+import { api } from 'src/boot/axios';
+import { NotifyResponse } from 'src/composables/notify';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
+function saveDBM() {
+  api
+    .get('saveData')
+    .then((resp) => NotifyResponse($q, resp.data))
+    .catch((err) => NotifyResponse($q, err));
+}
 </script>

src/pages/IndexPage.vue

@@ -2,22 +2,36 @@
   <q-page>
     <q-tabs v-model="tab">
       <q-tab name="movingHead" label="Moving Head" />
-      <q-tab name="dome" label="Dome" />
+      <q-tab name="lightBar" label="Light Bar" />
     </q-tabs>
     <q-tab-panels v-model="tab" animated class="text-white">
       <q-tab-panel name="movingHead">
         <moving-head />
       </q-tab-panel>
-      <q-tab-panel name="dome">
-        <Dome />
+      <q-tab-panel name="lightBar">
+        <LightBar />
       </q-tab-panel>
     </q-tab-panels>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import MovingHead from 'src/components/MovingHead.vue';
-import Dome from 'src/components/DomeLight.vue';
-import { ref } from 'vue';
+import MovingHead from 'src/components/lights/MovingHead.vue';
+import LightBar from 'src/components/lights/LightBarCBL.vue';
+import { ref, onMounted, watch } from 'vue';
 const tab = ref('movingHead');
+const STORAGE_KEY = 'lastTabUsed';
+
+// Load last tab on mount
+onMounted(() => {
+  const savedTab = sessionStorage.getItem(STORAGE_KEY);
+  if (savedTab) {
+    tab.value = savedTab;
+  }
+});
+
+// Save tab on change
+watch(tab, (newVal) => {
+  sessionStorage.setItem(STORAGE_KEY, newVal);
+});
 </script>