Refactor navigation and enhance director information display

- Removed the directors section from the navigation menu for a cleaner interface.
- Updated the FalukantService to include additional attributes for directors, such as knowledges and region.
- Enhanced the DirectorInfo component to display detailed information, including knowledge and income management features.
- Implemented tab navigation in BranchView for better organization of director, inventory, production, and storage sections.
- Updated localization files to reflect changes in navigation and tab labels.

frontend/src/components/falukant/DirectorInfo.vue

@@ -1,48 +1,119 @@
 <template>
   <div class="director-info">
-    <h3>{{ $t('falukant.branch.director.title') }}</h3>
     <div v-if="!director || director === null">
-      <button @click="openNewDirectorDialog">{{ $t('falukant.branch.director.actions.new') }}</button>
+      <button @click="openNewDirectorDialog">
+        {{ $t('falukant.branch.director.actions.new') }}
+      </button>
     </div>
+
     <div v-else class="director-info-container">
-      <div>
-        <table>
-          <tr>
-            <td>{{ $t('falukant.branch.director.name') }}</td>
-            <td>
-              {{ $t('falukant.titles.' + director.character.gender + '.' + director.character.title) }}
-              {{ director.character.name }}
-            </td>
-          </tr>
-          <tr>
-            <td>{{ $t('falukant.branch.director.salary') }}</td>
-            <td>{{ director.income }}</td>
-          </tr>
-          <tr>
-            <td>{{ $t('falukant.branch.director.satisfaction') }}</td>
-            <td>{{ director.satisfaction }} %</td>
-          </tr>
-        </table>
+      <!-- Linke Seite: Stammdaten & Wissen (aus /falukant/directors) -->
+      <div class="director-main">
+        <h3 class="director-name">
+          {{ $t('falukant.titles.' + director.character.gender + '.' + director.character.nobleTitle.labelTr) }}
+          {{ director.character.definedFirstName.name }} {{ director.character.definedLastName.name }}
+        </h3>
+        <p class="director-meta">
+          {{ $t('falukant.director.age') }}:
+          {{ director.character.age }}
+          <span v-if="director.region"> — {{ director.region }}</span>
+        </p>
+
+        <div
+          v-if="director.character.knowledges && director.character.knowledges.length"
+          class="knowledge-panel"
+        >
+          <h4>{{ $t('falukant.director.knowledge.title') }}</h4>
+          <div class="table-container">
+            <table class="knowledge-table">
+              <thead>
+                <tr>
+                  <th>{{ $t('falukant.director.product') }}</th>
+                  <th>{{ $t('falukant.director.knowledge.knowledge') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in director.character.knowledges"
+                  :key="item.productId"
+                >
+                  <td>{{ $t(`falukant.product.${item.productType.labelTr}`) }}</td>
+                  <td>{{ item.knowledge }} %</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div>
-        <table>
-          <tr>
-            <td><button @click="fireDirector">{{ $t('falukant.branch.director.fire') }}</button></td>
-          </tr>
-          <tr>
-            <td><button @click="teachDirector">{{ $t('falukant.branch.director.teach') }}</button></td>
-          </tr>
-          <tr>
-            <td>
-              <label>
-                <input type="checkbox" v-model="director.mayProduce"
-                  @change="saveSetting('mayProduce', director.mayProduce)">
-                {{ $t('falukant.branch.director.produce') }}
-              </label>
-            </td>
-          </tr>
-          <!-- Ähnliche Checkboxen für maySell und mayStartTransport -->
-        </table>
+
+      <!-- Rechte Seite: Aktionen, Einkommen, Rechte -->
+      <div class="director-actions">
+        <div class="field">
+          <label>
+            {{ $t('falukant.branch.director.satisfaction') }}:
+            <span>{{ director.satisfaction }} %</span>
+          </label>
+        </div>
+
+        <div class="field">
+          <label>
+            {{ $t('falukant.branch.director.income') }}:
+            <input type="number" v-model.number="editIncome" />
+          </label>
+          <span
+            v-if="director.wishedIncome != null"
+            class="link"
+            @click="setWishedIncome"
+          >
+            ({{ $t('falukant.director.wishedIncome') }}:
+            {{ director.wishedIncome }})
+          </span>
+        </div>
+
+        <div class="field">
+          <button @click="updateDirector">
+            {{ $t('falukant.director.updateButton') }}
+          </button>
+        </div>
+
+        <div class="field toggles">
+          <label>
+            <input
+              type="checkbox"
+              v-model="director.mayProduce"
+              @change="saveSetting('mayProduce', director.mayProduce)"
+            />
+            {{ $t('falukant.branch.director.produce') }}
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              v-model="director.maySell"
+              @change="saveSetting('maySell', director.maySell)"
+            />
+            {{ $t('falukant.branch.director.sell') }}
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              v-model="director.mayStartTransport"
+              @change="saveSetting('mayStartTransport', director.mayStartTransport)"
+            />
+            {{ $t('falukant.branch.director.starttransport') }}
+          </label>
+        </div>
+
+        <div class="field">
+          <button @click="fireDirector">
+            {{ $t('falukant.branch.director.fire') }}
+          </button>
+        </div>
+
+        <div class="field">
+          <button @click="teachDirector">
+            {{ $t('falukant.branch.director.teach') }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -63,6 +134,7 @@ export default {
     return {
       director: null,
       showNewDirectorDialog: false,
+      editIncome: null,
     };
   },
   async mounted() {
@@ -84,12 +156,15 @@ export default {
           data.director === null
         ) {
           this.director = null;
+          this.editIncome = null;
         } else {
           this.director = data.director;
+          this.editIncome = this.director.income;
         }
       } catch (error) {
         console.error('Error loading director:', error);
         this.director = null;
+        this.editIncome = null;
       }
     },
 
@@ -112,6 +187,24 @@ export default {
       this.$refs.newDirectorDialog.open(this.branchId);
     },
 
+    async updateDirector() {
+      if (!this.director || this.editIncome == null) return;
+      try {
+        await apiClient.post(`/api/falukant/directors`, {
+          directorId: this.director.id,
+          income: this.editIncome,
+        });
+        await this.loadDirector();
+      } catch (error) {
+        console.error('Error updating director:', error);
+      }
+    },
+
+    setWishedIncome() {
+      if (!this.director || this.director.wishedIncome == null) return;
+      this.editIncome = this.director.wishedIncome;
+    },
+
     fireDirector() {
       alert(this.$t('falukant.branch.director.fireAlert'));
     },
@@ -133,9 +226,62 @@ export default {
 
 .director-info-container {
   display: flex;
+  gap: 1rem;
 }
 
-.director-info-container>div {
+.director-main {
+  flex: 2;
+}
+
+.director-actions {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.director-name {
+  margin: 0 0 0.25rem 0;
+}
+
+.director-meta {
+  margin: 0 0 0.75rem 0;
+  font-style: italic;
+}
+
+.field {
+  margin-bottom: 0.5rem;
+}
+
+.field label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.toggles label {
+  display: block;
+}
+
+.link {
+  color: #007bff;
+  cursor: pointer;
+  margin-left: 0.5rem;
+}
+
+.table-container {
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.knowledge-table {
   width: 100%;
+  border-collapse: collapse;
+}
+
+.knowledge-table th,
+.knowledge-table td {
+  border: 1px solid #ddd;
+  padding: 4px 6px;
 }
 </style>

frontend/src/components/falukant/ProductionSection.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="production-section">
-      <h3>{{ $t('falukant.branch.production.title') }}</h3>
       <div v-if="productions && productions.length > 0">
         <h4>{{ $t('falukant.branch.production.current') }}</h4>
         <table>

frontend/src/components/falukant/SaleSection.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="sale-section">
-      <h3>{{ $t('falukant.branch.sale.title') }}</h3>
       <!-- Beispielhafte Inventar-Tabelle -->
       <div v-if="inventory.length > 0" class="inventory-table">
         <table>

frontend/src/components/falukant/StorageSection.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="storage-section">
-      <h3>{{ $t('falukant.branch.storage.title') }}</h3>
       <div class="storage-info">
         <p>
           {{ $t('falukant.branch.storage.currentCapacity') }}: