Add heir selection functionality in Falukant module

- Implemented getPotentialHeirs and selectHeir methods in FalukantService to allow users to retrieve and select potential heirs based on specific criteria.
- Updated FalukantController to wrap new methods with user authentication and added corresponding routes in FalukantRouter.
- Enhanced OverviewView component to display heir selection UI when no character is present, including loading states and error handling.
- Added translations for heir selection messages in both German and English locales to improve user experience.

frontend/src/views/falukant/OverviewView.vue

@@ -2,19 +2,45 @@
     <div>
         <StatusBar />
         <h2>{{ $t('falukant.overview.title') }}</h2>
-        <div class="overviewcontainer">
+        
+        <!-- Erben-Auswahl wenn kein Charakter vorhanden -->
+        <div v-if="!falukantUser?.character" class="heir-selection-container">
+            <h3>{{ $t('falukant.overview.heirSelection.title') }}</h3>
+            <p>{{ $t('falukant.overview.heirSelection.description') }}</p>
+            <div v-if="loadingHeirs" class="loading">{{ $t('falukant.overview.heirSelection.loading') }}</div>
+            <div v-else-if="potentialHeirs.length === 0" class="no-heirs">
+                {{ $t('falukant.overview.heirSelection.noHeirs') }}
+            </div>
+            <div v-else class="heirs-list">
+                <div v-for="heir in potentialHeirs" :key="heir.id" class="heir-card">
+                    <div class="heir-info">
+                        <div class="heir-name">
+                            {{ $t(`falukant.titles.${heir.gender}.noncivil`) }}
+                            {{ heir.definedFirstName.name }} {{ heir.definedLastName.name }}
+                        </div>
+                        <div class="heir-age">{{ $t('falukant.overview.metadata.age') }}: {{ heir.age }}</div>
+                    </div>
+                    <button @click="selectHeir(heir.id)" class="select-heir-button">
+                        {{ $t('falukant.overview.heirSelection.select') }}
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Normale Übersicht wenn Charakter vorhanden -->
+        <div v-else class="overviewcontainer">
             <div>
                 <h3>{{ $t('falukant.overview.metadata.title') }}</h3>
                 <table>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.name') }}</td>
-                        <td>{{ falukantUser?.character.definedFirstName.name }} {{
-                            falukantUser?.character.definedLastName.name }}</td>
+                        <td>{{ falukantUser?.character?.definedFirstName?.name }} {{
+                            falukantUser?.character?.definedLastName?.name }}</td>
                     </tr>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.nobleTitle') }}</td>
-                        <td>{{ $t('falukant.titles.' + falukantUser?.character.gender + '.' +
-                            falukantUser?.character.nobleTitle.labelTr) }}</td>
+                        <td>{{ $t('falukant.titles.' + falukantUser?.character?.gender + '.' +
+                            falukantUser?.character?.nobleTitle?.labelTr) }}</td>
                     </tr>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.money') }}</td>
@@ -26,11 +52,11 @@
                     </tr>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.age') }}</td>
-                        <td>{{ falukantUser?.character.age }}</td>
+                        <td>{{ falukantUser?.character?.age }}</td>
                     </tr>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.mainbranch') }}</td>
-                        <td>{{ falukantUser?.mainBranchRegion.name }}</td>
+                        <td>{{ falukantUser?.mainBranchRegion?.name }}</td>
                     </tr>
                 </table>
             </div>
@@ -90,7 +116,7 @@
                 </table>
             </div>
         </div>
-        <div class="imagecontainer">
+        <div v-if="falukantUser?.character" class="imagecontainer">
             <div :style="getAvatarStyle" class="avatar"></div>
             <div :style="getHouseStyle" class="house"></div>
         </div>
@@ -149,12 +175,14 @@ export default {
             falukantUser: null,
             allStock: [],
             productions: [],
+            potentialHeirs: [],
+            loadingHeirs: false,
         };
     },
     computed: {
         ...mapState(['socket']),
         getAvatarStyle() {
-            if (!this.falukantUser) return {};
+            if (!this.falukantUser || !this.falukantUser.character) return {};
             const { gender, age } = this.falukantUser.character;
             const imageUrl = `/images/falukant/avatar/${gender}.png`;
             const ageGroup = this.getAgeGroup(age);
@@ -212,8 +240,12 @@ export default {
     },
     async mounted() {
         await this.fetchFalukantUser();
-        await this.fetchAllStock();
-        await this.fetchProductions();
+        if (!this.falukantUser?.character) {
+            await this.fetchPotentialHeirs();
+        } else {
+            await this.fetchAllStock();
+            await this.fetchProductions();
+        }
         // Daemon WebSocket deaktiviert - verwende Socket.io für alle Events
         this.setupSocketEvents();
     },
@@ -306,6 +338,33 @@ export default {
         formatDate(timestamp) {
             return new Date(timestamp).toLocaleString();
         },
+        async fetchPotentialHeirs() {
+            if (!this.falukantUser?.mainBranchRegion?.id) return;
+            this.loadingHeirs = true;
+            try {
+                const response = await apiClient.get('/api/falukant/heirs/potential');
+                this.potentialHeirs = response.data || [];
+            } catch (error) {
+                console.error('Error fetching potential heirs:', error);
+                this.potentialHeirs = [];
+            } finally {
+                this.loadingHeirs = false;
+            }
+        },
+        async selectHeir(heirId) {
+            try {
+                await apiClient.post('/api/falukant/heirs/select', { heirId });
+                // Lade User-Daten neu
+                await this.fetchFalukantUser();
+                if (this.falukantUser?.character) {
+                    await this.fetchAllStock();
+                    await this.fetchProductions();
+                }
+            } catch (error) {
+                console.error('Error selecting heir:', error);
+                alert(this.$t('falukant.overview.heirSelection.error'));
+            }
+        },
     },
 };
 </script>
@@ -348,4 +407,68 @@ export default {
 h2 {
     padding-top: 20px;
 }
+
+.heir-selection-container {
+    border: 2px solid #dc3545;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 20px 0;
+    background-color: #fff3cd;
+}
+
+.heir-selection-container h3 {
+    margin-top: 0;
+    color: #856404;
+}
+
+.heirs-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.heir-card {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 15px;
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.heir-info {
+    flex: 1;
+}
+
+.heir-name {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.heir-age {
+    color: #666;
+    font-size: 0.9em;
+}
+
+.select-heir-button {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.select-heir-button:hover {
+    background-color: #218838;
+}
+
+.loading, .no-heirs {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+}
 </style>