Director hiring added

frontend/src/views/falukant/MoneyHistoryView.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+      <h2>{{ $t('falukant.moneyHistory.title') }}</h2>
+  
+      <div class="filter-section">
+        <label>{{ $t('falukant.moneyHistory.filter') }}</label>
+        <input v-model="filter" type="text" />
+        <button @click="fetchMoneyHistory(1)">{{ $t('falukant.moneyHistory.search') }}</button>
+      </div>
+  
+      <table>
+        <thead>
+          <tr>
+            <th>{{ $t('falukant.moneyHistory.activity') }}</th>
+            <th>{{ $t('falukant.moneyHistory.moneyBefore') }}</th>
+            <th>{{ $t('falukant.moneyHistory.moneyAfter') }}</th>
+            <th>{{ $t('falukant.moneyHistory.changeValue') }}</th>
+            <th>{{ $t('falukant.moneyHistory.time') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(entry, index) in moneyHistory.data" :key="index">
+            <td>{{ $t(`falukant.moneyHistory.activities.${entry.activity}`) }}</td>
+            <td>{{ entry.moneyBefore }}</td>
+            <td>{{ entry.moneyAfter }}</td>
+            <td>{{ entry.changeValue }}</td>
+            <td>{{ new Date(entry.time).toLocaleString() }}</td>
+          </tr>
+        </tbody>
+      </table>
+  
+      <div class="pagination">
+        <button
+          v-if="moneyHistory.currentPage > 1"
+          @click="fetchMoneyHistory(moneyHistory.currentPage - 1)"
+        >
+          {{ $t('falukant.moneyHistory.prev') }}
+        </button>
+        <span>
+          {{ moneyHistory.currentPage }} / {{ moneyHistory.totalPages }}
+        </span>
+        <button
+          v-if="moneyHistory.currentPage < moneyHistory.totalPages"
+          @click="fetchMoneyHistory(moneyHistory.currentPage + 1)"
+        >
+          {{ $t('falukant.moneyHistory.next') }}
+        </button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import apiClient from '@/utils/axios.js';
+  
+  export default {
+    name: 'MoneyHistoryView',
+    data() {
+      return {
+        filter: '',
+        moneyHistory: {
+          data: [],
+          currentPage: 1,
+          totalPages: 1,
+        },
+      };
+    },
+    async mounted() {
+      await this.fetchMoneyHistory(1);
+    },
+    methods: {
+      async fetchMoneyHistory(page) {
+        try {
+          const response = await apiClient.post('/api/falukant/moneyhistory', {
+            page,
+            filter: this.filter,
+          });
+          this.moneyHistory = response.data;
+        } catch (error) {
+          console.error('Error fetching money history:', error);
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .filter-section {
+    margin-bottom: 1rem;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+  }
+  th, td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    text-align: left;
+  }
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  </style>
+  

frontend/src/views/falukant/OverviewView.vue

@@ -27,16 +27,56 @@
             </div>
             <div>
                 <h3>{{ $t('falukant.overview.productions.title') }}</h3>
+                <table v-if="productions.length > 0">
+                    <thead>
+                        <tr>
+                            <th>{{ $t('falukant.branch.sale.region') }}</th>
+                            <th>{{ $t('falukant.branch.production.product') }}</th>
+                            <th>{{ $t('falukant.branch.production.quantity') }}</th>
+                            <th>{{ $t('falukant.branch.production.ending') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(production, index) in productions" :key="index">
+                            <td>{{ production.cityName }}</td>
+                            <td>{{ $t(`falukant.product.${production.productName}`) }}</td>
+                            <td>{{ production.quantity }}</td>
+                            <td>{{ formatDate(production.endTimestamp) }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p v-else>{{ $t('falukant.branch.production.noProductions') }}</p>
             </div>
             <div>
                 <h3>{{ $t('falukant.overview.stock.title') }}</h3>
+                <table v-if="allStock.length > 0">
+                    <thead>
+                        <tr>
+                            <th>{{ $t('falukant.branch.sale.region') }}</th>
+                            <th>{{ $t('falukant.branch.sale.product') }}</th>
+                            <th>{{ $t('falukant.branch.sale.quantity') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in allStock" :key="index">
+                            <td>{{ item.regionName }}</td>
+                            <td>{{ $t(`falukant.product.${item.productLabelTr}`) }}</td>
+                            <td>{{ item.quantity }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p v-else>{{ $t('falukant.branch.sale.noInventory') }}</p>
             </div>
             <div>
                 <h3>{{ $t('falukant.overview.branches.title') }}</h3>
                 <table>
-                    <tr v-for="branch in falukantUser?.branches">
-                        <td><span @click="openBranch(branch.id)" class="link">{{ branch.region.name }}</span></td>
-                        <td>{{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}</td>
+                    <tr v-for="branch in falukantUser?.branches" :key="branch.id">
+                        <td>
+                            <span @click="openBranch(branch.id)" class="link">{{ branch.region.name }}</span>
+                        </td>
+                        <td>
+                            {{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}
+                        </td>
                     </tr>
                 </table>
             </div>
@@ -48,8 +88,9 @@
 </template>
 
 <script>
-import apiClient from '@/utils/axios.js';
 import StatusBar from '@/components/falukant/StatusBar.vue';
+import apiClient from '@/utils/axios.js';
+import { mapState } from 'vuex';
 
 const AVATAR_POSITIONS = {
     male: {
@@ -90,26 +131,18 @@ const AVATAR_POSITIONS = {
 
 export default {
     name: 'FalukantOverviewView',
-    data() {
-        return {
-            falukantUser: null,
-        };
-    },
     components: {
         StatusBar,
     },
-    async mounted() {
-        await this.fetchFalukantUser();
-        if (this.socket) {
-            this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
-        }
-    },
-    beforeUnmount() {
-        if (this.socket) {
-            this.socket.off("falukantUserUpdated", this.fetchFalukantUser);
-        }
+    data() {
+        return {
+            falukantUser: null,
+            allStock: [],
+            productions: [],
+        };
     },
     computed: {
+        ...mapState(['daemonSocket']),
         getAvatarStyle() {
             if (!this.falukantUser) return {};
             const { gender, age } = this.falukantUser.character;
@@ -128,6 +161,38 @@ export default {
             };
         },
     },
+    async mounted() {
+        await this.fetchFalukantUser();
+        await this.fetchAllStock();
+        await this.fetchProductions();
+        if (this.socket) {
+            this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
+            this.socket.on("production_ready", this.handleProductionReadyEvent);
+        }
+        if (this.daemonSocket) {
+            this.daemonSocket.addEventListener('message', (event) => {
+                console.log('incoming event', event);
+                try {
+                    if (event.data === "ping") return;
+                    const message = JSON.parse(event.data);
+                    if (message.event === 'production_ready') {
+                        this.handleProductionReadyEvent(message);
+                    }
+                } catch (error) {
+                    console.error('Error processing WebSocket message in FalukantOverviewView:', error);
+                }
+            });
+        }
+    },
+    beforeUnmount() {
+        if (this.socket) {
+            this.socket.off("falukantUserUpdated", this.fetchFalukantUser);
+            this.socket.off("production_ready", this.handleProductionReadyEvent);
+        }
+        if (this.daemonSocket) {
+            this.daemonSocket.onmessage = null;
+        }
+    },
     methods: {
         getAgeGroup(age) {
             if (age <= 1) return "0-1";
@@ -150,9 +215,41 @@ export default {
             }
             this.falukantUser = falukantUser.data;
         },
+        async fetchAllStock() {
+            const response = await apiClient.get('/api/falukant/stockoverview');
+            const rawData = response.data;
+            const aggregated = {};
+            for (const item of rawData) {
+                const key = `${item.regionName}__${item.productLabelTr}`;
+                if (!aggregated[key]) {
+                    aggregated[key] = {
+                        regionName: item.regionName,
+                        productLabelTr: item.productLabelTr,
+                        quantity: 0,
+                    };
+                }
+                aggregated[key].quantity += item.quantity;
+            }
+            this.allStock = Object.values(aggregated);
+        },
+        handleProductionReadyEvent() {
+            this.fetchAllStock();
+            this.fetchProductions();
+        },
         openBranch(branchId) {
-            this.$router.push({ name: 'BranchView', params: { branchId: branchId } });
-        }
+            this.$router.push({ name: 'BranchView', params: { branchId } });
+        },
+        async fetchProductions() {
+            try {
+                const response = await apiClient.get('/api/falukant/productions');
+                this.productions = response.data;
+            } catch (error) {
+                console.error('Error fetching productions:', error);
+            }
+        },
+        formatDate(timestamp) {
+            return new Date(timestamp).toLocaleString();
+        },
     },
 };
 </script>