Falukant production, family and administration enhancements

frontend/src/components/falukant/BranchSelection.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="branch-selection">
+      <h3>{{ $t('falukant.branch.selection.title') }}</h3>
+      <div>
+        <FormattedDropdown
+          :options="branches"
+          :columns="branchColumns"
+          v-model="localSelectedBranch"
+          :placeholder="$t('falukant.branch.selection.placeholder')"
+          @input="updateSelectedBranch"
+        />
+      </div>
+      <div>
+        <button @click="$emit('createBranch')">{{ $t('falukant.branch.actions.create') }}</button>
+        <button @click="$emit('upgradeBranch')" :disabled="!localSelectedBranch">
+          {{ $t('falukant.branch.actions.upgrade') }}
+        </button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import FormattedDropdown from '@/components/form/FormattedDropdown.vue';
+  export default {
+    name: "BranchSelection",
+    components: { FormattedDropdown },
+    props: {
+      branches: { type: Array, required: true },
+      selectedBranch: { type: Object, default: null },
+    },
+    data() {
+      return {
+        localSelectedBranch: this.selectedBranch,
+        branchColumns: [
+          { field: "cityName", label: this.$t('falukant.branch.columns.city') },
+          { field: "type", label: this.$t('falukant.branch.columns.type') },
+        ],
+      };
+    },
+    watch: {
+      selectedBranch(newVal) {
+        this.localSelectedBranch = newVal;
+      },
+    },
+    methods: {
+      updateSelectedBranch(value) {
+        this.$emit('branchSelected', value);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .branch-selection {
+    border: 1px solid #ccc;
+    margin: 10px 0;
+    border-radius: 4px;
+    padding: 10px;
+  }
+  button {
+    margin: 5px;
+  }
+  </style>
+