feat: Add header with button to create new storage spaces

web/src/components/AppHeader.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-app-bar color="primary" app>
+    <v-app-bar-title>Inventory Manager</v-app-bar-title>
+    <v-spacer></v-spacer>
+    <v-btn
+      prepend-icon="mdi-plus"
+      @click="openAddStorageDialog"
+    >
+      Add Storage Space
+    </v-btn>
+    
+    <!-- Dialog for adding new storage space -->
+    <v-dialog v-model="showDialog" max-width="500px">
+      <v-card>
+        <v-card-title>Add New Storage Space</v-card-title>
+        <v-card-text>
+          <v-form @submit.prevent="addStorageSpace">
+            <v-text-field
+              v-model="newStorage.location"
+              label="Location"
+              required
+              :error-messages="locationError"
+            ></v-text-field>
+            
+            <v-select
+              v-model="newStorage.parentId"
+              :items="storageSpaces"
+              item-title="location"
+              item-value="id"
+              label="Parent Storage (optional)"
+              clearable
+            >
+              <template v-slot:item="{ item, props }">
+                <v-list-item v-bind="props" :title="item.raw.location || `Storage #${item.raw.id}`"></v-list-item>
+              </template>
+            </v-select>
+            
+            <v-alert
+              v-if="error"
+              type="error"
+              variant="tonal"
+              class="mt-3"
+            >
+              {{ error }}
+            </v-alert>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" variant="text" @click="showDialog = false">Cancel</v-btn>
+          <v-btn 
+            color="primary" 
+            variant="elevated" 
+            @click="addStorageSpace"
+            :loading="loading"
+          >
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-app-bar>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { useStorageStore } from '@/stores/storage';
+
+const storageStore = useStorageStore();
+const showDialog = ref(false);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const locationError = ref<string>('');
+
+const newStorage = ref({
+  location: '',
+  parentId: null as number | null
+});
+
+const storageSpaces = computed(() => storageStore.storageSpaces);
+
+function openAddStorageDialog() {
+  // Reset form
+  newStorage.value = {
+    location: '',
+    parentId: null
+  };
+  error.value = null;
+  locationError.value = '';
+  showDialog.value = true;
+}
+
+async function addStorageSpace() {
+  // Validate
+  if (!newStorage.value.location.trim()) {
+    locationError.value = 'Location is required';
+    return;
+  }
+  
+  locationError.value = '';
+  loading.value = true;
+  error.value = null;
+  
+  try {
+    await storageStore.createStorageSpace({
+      location: newStorage.value.location,
+      parentId: newStorage.value.parentId
+    });
+    
+    showDialog.value = false;
+  } catch (err: any) {
+    error.value = err.message || 'Failed to create storage space';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

web/src/components/StorageHierarchy.vue

@@ -196,6 +196,14 @@ async function fetchStorageData(storageId: number): Promise<void> {
   }
 }
 
+// Watch for changes in storage spaces (e.g., when a new one is added)
+watch(() => storageStore.storageSpaces, (newSpaces) => {
+  // If we don't have a selected storage and spaces are available, select the first one
+  if (!selectedStorageId.value && newSpaces.length > 0) {
+    selectedStorageId.value = newSpaces[0].id;
+  }
+}, { deep: true });
+
 onMounted(async () => {
   loading.value = true;
   error.value = null;

web/src/layouts/default.vue

@@ -1,4 +1,6 @@
 <template>
+  <AppHeader />
+  
   <v-main>
     <router-view />
   </v-main>
@@ -7,5 +9,5 @@
 </template>
 
 <script lang="ts" setup>
-  //
+import AppHeader from '@/components/AppHeader.vue';
 </script>

web/src/stores/storage.ts

@@ -43,6 +43,39 @@ export const useStorageStore = defineStore('storage', {
   },
   
   actions: {
+    async createStorageSpace(data: { location: string; parentId: number | null }): Promise<void> {
+      this.loading = true;
+      this.error = null;
+      
+      try {
+        const parentData = data.parentId ? { valid: true, int64: data.parentId } : null;
+        
+        const response = await fetch('/api/v1/storageSpaces', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            location: data.location,
+            parent: parentData
+          }),
+        });
+        
+        if (!response.ok) {
+          throw new Error('Failed to create storage space');
+        }
+        
+        // Refresh the storage spaces list
+        await this.fetchStorageSpaces();
+      } catch (error: any) {
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+    
     async fetchStorageSpaces(): Promise<void> {
       this.loading = true;
       this.error = null;