Budget complete!

Aberwyn/Views/Budget/Index.cshtml

@@ -1,8 +1,10 @@
-@using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Budget")]
+@using Microsoft.AspNetCore.Authorization
+
 @{
     ViewData["Title"] = "Budget";
-    @attribute [Authorize(Roles = "Budget")]
 }
+
 <div ng-app="budgetApp" ng-controller="BudgetController" class="budget-page" ng-init="loadBudget()">
     <div class="budget-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
         <div class="month-nav-bar" style="display: flex; align-items: center; gap: 10px; position: relative;">
@@ -85,8 +87,8 @@
                            style="opacity: 0.5; padding-right: 6px; cursor: grab;"></i>
 
                         <input type="text" ng-model="item.name" ng-if="cat.editing" />
-                        <span ng-if="!cat.editing">{{ item.name }}</span>
-
+                        <span ng-if="!cat.editing" title="{{ item.definitionName }}">{{ item.name }}</span>
+                        <!-- <span ng-if="!cat.editing">#{{ item.definitionName }}</span>-->
                         <input type="number" ng-model="item.amount" ng-if="cat.editing" />
                         <span class="amount" ng-if="!cat.editing">{{ item.amount | number:0 }}</span>
 
@@ -96,6 +98,9 @@
                                 <i class="fa fa-ellipsis-v"></i>
                             </button>
                             <div class="item-floating-menu" ng-show="menuVisible" ng-style="menuStyle">
+                                <span style="font-size: 11px; color: #94a3b8; display: block; margin: 0px 0px 0px 40px;">
+                                    #{{ menuItem.definitionName }}
+                                </span>
                                 <button ng-click="deleteItem(menuItem.category, menuItem)">🗑 Ta bort</button>
                                 <hr>
                                 <button 
@@ -124,11 +129,12 @@
                      on-drop-item="handleItemPreciseDrop(data, targetCategory, targetIndex)">
                 </div>
 
-                <div class="item-row add-row" ng-if="cat.editing">
-                    <i class="fa fa-plus" style="padding-right: 6px; opacity: 0.7;"></i>
-                    <input type="text" ng-model="cat.newItemName" placeholder="Ny post" />
-                    <input type="number" ng-model="cat.newItemAmount" placeholder="Belopp" />
-                </div>
+                <button class="icon-button add-post-btn"
+                        ng-if="cat.editing && !cat.addingItem"
+                        ng-click="openItemPopup($event, cat)">
+                    ➕ Lägg till post
+                </button>
+
             </div>
 
             <div class="item-row total-row">
@@ -143,6 +149,41 @@
     </div>
 </div>
 
+<div class="add-item-popup" ng-show="addPopupVisible" ng-style="addPopupStyle" ng-class="{ 'above': addPopupAbove }">
+    <label>Typ:</label>
+    <select ng-model="addPopupData.newItemType">
+        <option value="expense">💸 Utgift</option>
+        <option value="income">💰 Inkomst</option>
+        <option value="saving">🏦 Sparande</option>
+    </select>
+
+    <label>Definition:</label>
+    <input type="text"
+           ng-model="addPopupData.newItemDefinition"
+           ng-change="updateDefinitionSuggestions()"
+           placeholder="Ex: Elhandel"
+           autocomplete="on"
+           ng-blur="hideSuggestionsDelayed()"
+           ng-focus="showDefinitionSuggestions = true" />
+           <p style="color: red">{{ filteredDefinitions.length }} träffar</p>
+    <ul class="suggestion-list" ng-show="showDefinitionSuggestions && filteredDefinitions.length > 0">
+        <li ng-repeat="suggestion in filteredDefinitions"
+            ng-mousedown="selectDefinitionSuggestion(suggestion.Name)">
+            {{ suggestion.Name }}
+        </li>
+    </ul>
+
+    <label>Etikett (valfritt):</label>
+    <input type="text" ng-model="addPopupData.newItemLabel" placeholder="Ex: Däck till Volvon" />
+
+    <label>Belopp:</label>
+    <input type="number" ng-model="addPopupData.newItemAmount" placeholder="0" />
+
+    <button ng-click="addItemFromPopup()">Lägg till</button>
+    <button ng-click="addPopupVisible = false">Avbryt</button>
+</div>
+
+</div>
 <link rel="stylesheet" href="~/css/budget.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />