From 8be047875002c9d1ecffd7d5006c7402fe159af9 Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Thu, 7 Dec 2023 09:53:28 -0400
Subject: [PATCH 1/2] feat: add migrations

---
 .../2023_12_07_120516_add_accounts_balance_in_month.php         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/database/migrations/2023_12_07_120516_add_accounts_balance_in_month.php b/database/migrations/2023_12_07_120516_add_accounts_balance_in_month.php
index d21d5d32..7de20190 100644
--- a/database/migrations/2023_12_07_120516_add_accounts_balance_in_month.php
+++ b/database/migrations/2023_12_07_120516_add_accounts_balance_in_month.php
@@ -13,6 +13,8 @@ public function up(): void
     {
         Schema::table('budget_months', function (Blueprint $table) {
             $table->decimal('accounts_balance')->default(0)->after('left_from_last_month');
+            $table->decimal('overspending_from_last_month')->default(0);
+            $table->json('meta_data')->nullable();
         });
     }
 };

From 0e8b799d925682d57a2296a4dfe4e6582f119be9 Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Sun, 10 Dec 2023 15:07:41 -0400
Subject: [PATCH 2/2] fix: meal issues

---
 app/Domains/Meal/Models/Meal.php              |  17 +--
 app/Domains/Meal/Services/MealService.php     |  27 +++-
 .../Api/IngredientApiController.php           |  22 ++-
 resources/js/Components/icons/IconBell.vue    |   8 +-
 .../molecules/AppNotificationBell.vue         |  24 ++--
 resources/js/Pages/Finance/Account.vue        |  61 +-------
 .../Finance/AccountReconciliationForm.vue     | 134 ++++++++++++++++++
 resources/js/Pages/Meals/Create.vue           |  35 +++--
 resources/js/Pages/Meals/Index.vue            |   5 +-
 resources/js/Pages/Meals/Ingredients.vue      |   3 +
 resources/js/Pages/Meals/Planner.vue          |   1 +
 .../js/domains/meal/components/MealForm.vue   |  29 ++--
 .../domains/meal/components/MealSection.vue   |  44 +++---
 .../transactions/models/transactions.ts       |   1 +
 14 files changed, 260 insertions(+), 151 deletions(-)
 create mode 100644 resources/js/Pages/Finance/AccountReconciliationForm.vue

diff --git a/app/Domains/Meal/Models/Meal.php b/app/Domains/Meal/Models/Meal.php
index a8eb88dc..12dfb207 100644
--- a/app/Domains/Meal/Models/Meal.php
+++ b/app/Domains/Meal/Models/Meal.php
@@ -2,9 +2,9 @@
 
 namespace App\Domains\Meal\Models;
 
-use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Insane\Journal\Models\Product\Product;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class Meal extends Model
 {
@@ -26,11 +26,12 @@ public function saveIngredients($items)
     {
         Ingredient::query()->where('meal_id', $this->id)->delete();
         foreach ($items as $item) {
-            if (isset($item['product_id']) && $item['product_id'] !== "new::{$item['name']}") {
+            if (isset($item['product_id']) && !str_contains($item['product_id'], "new::")) {
                 $product = Product::find($item['product_id']);
-            } elseif (isset($item['name'])) {
-                $product = Product::create([
-                    'name' => $item['name'],
+            } else {
+                $ingredientName = str_replace("new::", "", $item['product_id']);
+                $product = Product::firstOrCreate([
+                    'name' => $ingredientName,
                     'team_id' => $this->team_id,
                     'user_id' => $this->user_id,
                 ]);
@@ -40,9 +41,9 @@ public function saveIngredients($items)
                 'user_id' => $this->user_id,
                 'meal_id' => $this->id,
                 'product_id' => $product->id,
-                'quantity' => $item['quantity'],
-                'name' => $item['name'],
-                'unit' => $item['unit'],
+                'quantity' => $item['quantity'] ?? 1,
+                'name' => $product->name,
+                'unit' => $item['unit'] ?? "",
             ]);
         }
     }
diff --git a/app/Domains/Meal/Services/MealService.php b/app/Domains/Meal/Services/MealService.php
index 28d186d1..c406660d 100644
--- a/app/Domains/Meal/Services/MealService.php
+++ b/app/Domains/Meal/Services/MealService.php
@@ -2,21 +2,23 @@
 
 namespace App\Domains\Meal\Services;
 
-use App\Domains\AppCore\Models\Planner;
+use App\Models\User;
+use Illuminate\Support\Carbon;
 use App\Domains\Meal\Models\Meal;
+use App\Domains\Meal\Models\Product;
 use App\Domains\Meal\Models\MealPlan;
-use Illuminate\Support\Carbon;
+use App\Domains\AppCore\Models\Planner;
 
 class MealService
 {
     public function addPlan($mealsData)
     {
         foreach ($mealsData['meals'] as $mealData) {
-            if (isset($mealData['id']) && $mealData['id'] !== "new::{$mealData['name']}") {
+            if (isset($mealData['id']) && !str_contains($mealData['id'],"new::")) {
                 $meal = Meal::find($mealData['id']);
             } elseif (isset($mealData['name'])) {
                 $meal = Meal::create([
-                    'name' => $mealData['name'],
+                    'name' => str_replace("new::", "", $mealData['name']),
                     'meal_type_id' => $mealData['meal_type_id'],
                     'team_id' => $mealsData['team_id'],
                     'user_id' => $mealsData['user_id'],
@@ -106,4 +108,21 @@ public static function getIngredients($plans)
 
         return $ingredients;
     }
+
+    public function addIngredientLabel(Product $product, mixed $postData, User $user) {
+        if (!str_contains($postData['label_id'], "new::")) {
+            $label = $product->labels()->find($postData['label_id']);
+        } else {
+            $labelName = str_replace("new::", "", $postData['label_id']);
+            $label = $product->labels()->create([
+                'user_id' => $user->id,
+                'team_id' => $user->current_team_id,
+                'name' => $labelName,
+                'label' => $labelName,
+                'color' => $postData['color'] ?? "",
+            ]);
+        }
+
+        return $label;
+    }
 }
diff --git a/app/Http/Controllers/Api/IngredientApiController.php b/app/Http/Controllers/Api/IngredientApiController.php
index a42fabfb..914fea47 100644
--- a/app/Http/Controllers/Api/IngredientApiController.php
+++ b/app/Http/Controllers/Api/IngredientApiController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Api;
 
 use App\Domains\Meal\Models\Product;
+use App\Domains\Meal\Services\MealService;
 
 class IngredientApiController extends BaseController
 {
@@ -14,21 +15,14 @@ public function __construct()
         $this->includes = ['labels'];
     }
 
-    public function addLabel($id)
+    public function addLabel($id, MealService $mealService)
     {
-        $postData = request()->post();
-        $product = $this->model->find($id);
-        if ($postData['label_id'] !== "new::{$postData['name']}") {
-            $label = $product->labels()->find($postData['label_id']);
-        } else {
-            $label = $product->labels()->create([
-                'user_id' => auth()->user()->id,
-                'team_id' => auth()->user()->current_team_id,
-                'name' => $postData['name'],
-                'label' => $postData['name'],
-                'color' => $postData['color'],
-            ]);
-        }
+        $product = $this->model->find($id);    
+        $label = $mealService->addIngredientLabel(
+            $product, 
+            request()->post(), 
+            request()->user()
+        );
 
         return response()->json(['label' => $label]);
     }
diff --git a/resources/js/Components/icons/IconBell.vue b/resources/js/Components/icons/IconBell.vue
index 896e1611..a54e6d5c 100644
--- a/resources/js/Components/icons/IconBell.vue
+++ b/resources/js/Components/icons/IconBell.vue
@@ -1,10 +1,4 @@
 
 <template>
     <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z"></path></svg>
-  </template>
-
-  <script>
-  export default {
-    name: 'RiNotification3Line'
-  }
-  </script>
+</template>
diff --git a/resources/js/Components/molecules/AppNotificationBell.vue b/resources/js/Components/molecules/AppNotificationBell.vue
index 91781cc0..6bee4f71 100644
--- a/resources/js/Components/molecules/AppNotificationBell.vue
+++ b/resources/js/Components/molecules/AppNotificationBell.vue
@@ -1,15 +1,4 @@
-<template>
-<LogerButtonCircle
-    type="button"
->
-    <IconBell class="text-md" />
-    <div v-if="notifications > 0" class="absolute bottom-0 right-0 w-4 h-4 text-xs text-white bg-error rounded-full shadow-md">
-        {{ notifications }}
-    </div>
-</LogerButtonCircle>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import LogerButtonCircle from '@/Components/atoms/LogerButtonCircle.vue';
 import IconBell from '@/Components/icons/IconBell.vue';
 
@@ -23,3 +12,14 @@ defineProps({
 })
 
 </script>
+
+<template>
+<LogerButtonCircle
+    type="button"
+>
+    <IconBell class="text-md" />
+    <div v-if="notifications > 0" class="absolute bottom-0 right-0 w-4 h-4 text-xs text-white rounded-full shadow-md bg-error">
+        {{ notifications }}
+    </div>
+</LogerButtonCircle>
+</template>
diff --git a/resources/js/Pages/Finance/Account.vue b/resources/js/Pages/Finance/Account.vue
index 380e15ed..9ec0551d 100644
--- a/resources/js/Pages/Finance/Account.vue
+++ b/resources/js/Pages/Finance/Account.vue
@@ -22,13 +22,14 @@ import TransactionSearch from "@/domains/transactions/components/TransactionSear
 import TransactionTable from "@/domains/transactions/components/TransactionTable.vue";
 import DraftButtons from "@/domains/transactions/components/DraftButtons.vue";
 
-import { useTransactionModal, TRANSACTION_DIRECTIONS } from "@/domains/transactions";
+import { useTransactionModal, TRANSACTION_DIRECTIONS, removeTransaction } from "@/domains/transactions";
 // import { IServerSearchData, useServerSearch } from "@/composables/useServerSearch";
 import { tableAccountCols } from "@/domains/transactions";
 import { useAppContextStore } from "@/store";
 import { formatMoney } from "@/utils";
 import { IAccount, ICategory, ITransaction } from "@/domains/transactions/models";
 import axios from "axios";
+import AccountReconciliationForm from "./AccountReconciliationForm.vue";
 
 
 const { openTransactionModal } = useTransactionModal();
@@ -260,63 +261,11 @@ const reconcileForm = useForm({
             />
       </section>
 
-      <ConfirmationModal
+      <AccountReconciliationForm
           :show="reconcileForm.isVisible"
           @close="reconcileForm.isVisible = false"
-          title="Ending statement balance"
-        >
-
-          <template #content>
-              <section>
-                  <h4 class="font-bold">
-                  {{ selectedAccount.name }}
-                  </h4>
-                  <AtField
-                  label="Ending balance Date"
-                  class="flex justify-between w-full md:w-4/12 md:block"
-              >
-                  <NDatePicker
-                  v-model:value="reconcileForm.date"
-                  type="date"
-                  size="large"
-                  class="w-48 md:w-full"
-                  />
-              </AtField>
-
-              <AtField label="statement balance">
-                  <LogerInput
-                      ref="input"
-                      class="opacity-100 cursor-text"
-                      v-model="reconcileForm.balance"
-                      :number-format="true"
-
-                  >
-                      <template #prefix>
-                          {{ selectedAccount.currency_code }}
-                      </template>
-                  </LogerInput>
-              </AtField>
-              </section>
-
-          </template>
-
-          <template #footer>
-              <section class="flex justify-between">
-                  <LogerButton @click="reconcileForm.isVisible = false" variant="neutral">
-                      Cancel
-                  </LogerButton>
-
-                  <LogerButton
-                      class="ml-2"
-                      @click="reconciliation"
-                      :class="{ 'opacity-25': reconcileForm.processing }"
-                      :disabled="reconcileForm.processing"
-                  >
-                      Save
-                  </LogerButton>
-              </section>
-          </template>
-      </ConfirmationModal>
+          :account="selectedAccount"
+       />
   </FinanceTemplate>
 </AppLayout>
 </template>
diff --git a/resources/js/Pages/Finance/AccountReconciliationForm.vue b/resources/js/Pages/Finance/AccountReconciliationForm.vue
new file mode 100644
index 00000000..4a3d73e9
--- /dev/null
+++ b/resources/js/Pages/Finance/AccountReconciliationForm.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { useForm } from "@inertiajs/vue3";
+import { format } from "date-fns";
+import { NDatePicker } from "naive-ui";
+import { AtField, } from "atmosphere-ui";
+
+
+import LogerButton from "@/Components/atoms/LogerButton.vue";
+import ConfirmationModal from "@/Components/atoms/ConfirmationModal.vue";
+import LogerInput from "@/Components/atoms/LogerInput.vue";
+
+import { IAccount } from "@/domains/transactions/models";
+import { formatMoney } from "@/utils";
+
+const emit = defineEmits(['close']);
+const props = withDefaults(defineProps<{
+    isVisible: boolean;
+    account: IAccount,
+}>(), {});
+
+// reconciliation
+const reconcileForm = useForm({
+    isVisible: false,
+    date: new Date(),
+    balance: 0,
+    hasDifference: false,
+})
+
+const onClose = () => {
+    reconcileForm.reset()
+    emit('close')
+}
+
+const reconciliation = () => {
+    reconcileForm.transform(data => ({
+        ...data,
+        date: format(data.date, 'yyyy-MM-dd'),
+    })).post(`/finance/reconciliation/accounts/${props.account.id}`, {
+        preserveScroll: true,
+        only: ['transactions', 'accounts', 'stats'],
+        onFinish() {
+            onClose()
+        }
+    });
+};
+
+const doQuickReconciliation = () => {
+    reconcileForm.balance = props.account.balance;
+    reconciliation()
+}
+
+
+</script>
+
+<template>
+<ConfirmationModal
+    :show="isVisible"
+    @close="onClose"
+    :max-width="reconcileForm.hasDifference ? 'md' : 'sm'"
+    title="Ending statement balance"
+>
+
+    <template #content>
+        <article v-if="!reconcileForm.hasDifference">
+            <h4>Is your current account balance</h4>
+            <h2 class="text-lg"> {{ formatMoney(account.balance) }} </h2>
+            <footer class="flex justify-end">
+                <LogerButton @click="reconcileForm.hasDifference = true" variant="neutral">
+                    No
+                </LogerButton>
+    
+                <LogerButton
+                    class="ml-2"
+                    @click="doQuickReconciliation"
+                    :class="{ 'opacity-25': reconcileForm.processing }"
+                    :disabled="reconcileForm.processing"
+                >
+                    Yes
+                </LogerButton>
+            </footer>
+        </article>
+        <section v-else>
+            <h4 class="font-bold">
+            {{ account.name }}
+            </h4>
+            <AtField
+            label="Ending balance Date"
+            class="flex justify-between w-full md:block"
+        >
+            
+            <NDatePicker
+                v-model:value="reconcileForm.date"
+                type="date"
+                size="large"
+                class="w-full"
+            />
+        </AtField>
+
+        <AtField label="statement balance">
+            <LogerInput
+                ref="input"
+                class="opacity-100 cursor-text"
+                v-model="reconcileForm.balance"
+                :number-format="true"
+
+            >
+                <template #prefix>
+                    {{ account.currency_code }}
+                </template>
+            </LogerInput>
+        </AtField>
+        </section>
+
+    </template>
+
+    <template #footer v-if="reconcileForm.hasDifference">
+        <section class="flex justify-between">
+            <LogerButton @click="onClose" variant="neutral">
+                Cancel
+            </LogerButton>
+
+            <LogerButton
+                class="ml-2"
+                @click="reconciliation"
+                :class="{ 'opacity-25': reconcileForm.processing }"
+                :disabled="reconcileForm.processing"
+            >
+                Save
+            </LogerButton>
+        </section>
+    </template>
+</ConfirmationModal>
+
+</template>
diff --git a/resources/js/Pages/Meals/Create.vue b/resources/js/Pages/Meals/Create.vue
index 39987d81..deef7088 100644
--- a/resources/js/Pages/Meals/Create.vue
+++ b/resources/js/Pages/Meals/Create.vue
@@ -1,29 +1,35 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { AtButton } from "atmosphere-ui";
 import { router } from "@inertiajs/vue3";
 
 import AppLayout from "@/Components/templates/AppLayout.vue";
+import LogerButton from '@/Components/atoms/LogerButton.vue';
 
 import MealForm from "@/domains/meal/components/MealForm.vue";
 import MealSectionNav from "@/domains/meal/components/MealSectionNav.vue";
 import MealTemplate from "@/domains/meal/components/MealTemplate.vue";
 
-const props = defineProps({
-  meals: {
-    type: [Object, null],
-    default: null,
-  },
+const props = withDefaults(defineProps<{
+    meals: null|{
+        name: string;
+        id: number;
+    }
+}>(), {
+    meals: null
 });
 
-const mealForm = ref(null);
-const submit = () => {
-  mealForm.value.submit();
+const mealForm = ref();
+const submit = (redirectTo?: string) => {
+  mealForm.value?.submit(redirectTo);
 };
 
 const mealFormLabel = computed(() => {
   return props.meals ? `Meals / ${props.meals.name}` : "Create recipe";
 });
+
+const saveFormText = computed(() => {
+    return !props.meals?.id ? 'Save' : 'Update';
+})
 </script>
 
 <template>
@@ -35,10 +41,13 @@ const mealFormLabel = computed(() => {
     <template #header>
       <MealSectionNav>
         <template #actions>
-          <div>
-            <AtButton class="h-10 text-white bg-primary" rounded @click="submit()">
-              Save
-            </AtButton>
+          <div class="flex space-x-2">
+              <LogerButton class="h-10 text-white bg-primary" rounded @click="submit()">
+                {{ saveFormText }} and keep
+              </LogerButton>
+            <LogerButton class="h-10 text-white bg-primary" rounded @click="submit('/meals')">
+              {{ saveFormText }}
+            </LogerButton>
           </div>
         </template>
       </MealSectionNav>
diff --git a/resources/js/Pages/Meals/Index.vue b/resources/js/Pages/Meals/Index.vue
index 8cd72c9e..1afd5f05 100644
--- a/resources/js/Pages/Meals/Index.vue
+++ b/resources/js/Pages/Meals/Index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { router } from "@inertiajs/vue3";
-import { AtButton } from "atmosphere-ui";
 
 import AppLayout from "@/Components/templates/AppLayout.vue";
 import StatusButtons from "@/Components/molecules/StatusButtons.vue";
@@ -87,7 +86,9 @@ const currentStatus = ref(props.serverSearchOptions.filters?.is_liked || "all");
     <MealTemplate class="mx-auto">
       <MealSection
         :meals="recipes"
-        @click="router.visit(route('meals.edit', $event))"
+        @click="router.visit(route('meals.edit', {
+          meal: $event
+        }))"
         @toggle-like="onToggleLike"
       />
     </MealTemplate>
diff --git a/resources/js/Pages/Meals/Ingredients.vue b/resources/js/Pages/Meals/Ingredients.vue
index db1181a3..7bc8cc02 100644
--- a/resources/js/Pages/Meals/Ingredients.vue
+++ b/resources/js/Pages/Meals/Ingredients.vue
@@ -10,6 +10,7 @@ import MealTemplate from "@/domains/meal/components/MealTemplate.vue";
 import MealSectionNav from "@/domains/meal/components/MealSectionNav.vue";
 
 import { generateRandomColor } from "@/utils";
+import axios from "axios";
 
 const props = defineProps({
   products: {
@@ -26,6 +27,8 @@ const assignProductLabel = (label: Record<string, string>, product: Record<strin
   axios.post(`/api/ingredients/${product.id}/labels`, {
     ...label,
     color: generateRandomColor(),
+  }).then(() => {
+    router.reload()
   });
 };
 </script>
diff --git a/resources/js/Pages/Meals/Planner.vue b/resources/js/Pages/Meals/Planner.vue
index e4eed07c..e35e93e8 100644
--- a/resources/js/Pages/Meals/Planner.vue
+++ b/resources/js/Pages/Meals/Planner.vue
@@ -96,6 +96,7 @@
             meals: [recipe]
         }))
         .post(route('meals.addPlan'), {
+            preserveScroll: true,
             onSuccess: () => {
                 form.id = "";
                 form.name = ""
diff --git a/resources/js/domains/meal/components/MealForm.vue b/resources/js/domains/meal/components/MealForm.vue
index 5ad363ce..43e77d4c 100644
--- a/resources/js/domains/meal/components/MealForm.vue
+++ b/resources/js/domains/meal/components/MealForm.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-    import { useForm } from "@inertiajs/vue3"
-    import { AtField, AtInput, AtButton } from "atmosphere-ui"
+    import { router, useForm } from "@inertiajs/vue3"
+    import { AtField } from "atmosphere-ui"
     import { nextTick } from '@vue/runtime-core'
-    import LogerApiSimpleSelect from "@/Components/organisms/LogerApiSimpleSelect.vue";
     import LogerInput from "@/Components/atoms/LogerInput.vue";
     import MealFormLine from "./MealFormLine.vue";
 
@@ -23,8 +22,7 @@
         ingredients: props.meal ? [...props.meal.ingredients, {}]: [{}]
     })
 
-
-    const submit = async () => {
+    const submit = async (redirectTo: string = "") => {
         const method = props.meal ? 'put' : 'post';
         const url = props.meal ? `/meals/${props.meal.id}` : '/meals';
         form
@@ -32,15 +30,19 @@
                 ...data,
                 ingredients: data.ingredients.filter( ingredient => ingredient.name)
         }))
-        .submit(method, url, {
+        [method](url, {
+            preserveScroll: true,
+            preserveState: false,
             onSuccess: async () => {
                 if (method == 'post') {
                     await nextTick()
                     form.reset()
+                    if (redirectTo) {
+                        router.visit(redirectTo)
+                    }
                 }
             }
         })
-
     }
 
     const checkIngredients = (index, value) => {
@@ -89,27 +91,22 @@
         <AtField
             label="Tags"
         >
-            <LogerInput v-model="form.name" rounded />
+            <LogerInput v-model="form.tags" rounded />
         </AtField>
         <AtField
             label="Link"
         >
-            <LogerInput v-model="form.name" rounded />
+            <LogerInput v-model="form.link" rounded />
         </AtField>
         <AtField
             label="Dish"
         >
-            <LogerInput v-model="form.name" rounded />
+            <LogerInput v-model="form.dish" rounded />
         </AtField>
         <AtField
             label="Time"
         >
-            <LogerInput v-model="form.name" rounded />
-        </AtField>
-        <AtField
-            label="Times Planned"
-        >
-            <LogerInput v-model="form.name" rounded />
+            <LogerInput v-model="form.time" rounded />
         </AtField>
     </div>
 </template>
diff --git a/resources/js/domains/meal/components/MealSection.vue b/resources/js/domains/meal/components/MealSection.vue
index 45074a9b..c370ab31 100644
--- a/resources/js/domains/meal/components/MealSection.vue
+++ b/resources/js/domains/meal/components/MealSection.vue
@@ -4,17 +4,20 @@
     import { reactive } from "vue";
 
     import LogerApiSimpleSelect from "@/Components/organisms/LogerApiSimpleSelect.vue";
-    import LogerButtonTab from "@/Components/atoms/LogerButtonTab.vue";
     import IconHeart from "@/Components/icons/IconHeart.vue";
     import IconHeartOutline from "@/Components/icons/IconHeartOutline.vue";
+    import LogerButton from "@/Components/atoms/LogerButton.vue";
+import { useForm } from "@inertiajs/vue3";
+import { ElMessage, ElMessageBox } from "element-plus";
 
     interface Label {
         id: number;
         name: string;
         color: string;
     }
-    
+
     interface Meal {
+[x: string]: any;
         id: number;
         name: string;
         is_liked: boolean;
@@ -35,6 +38,17 @@
         return !!props.selected
         ?.find(selectedMeal => selectedMeal.id == meal.id)
     }
+
+    const deleteForm = useForm({
+        id: 0
+    });
+
+    const deleteResource = async (meal: any) => {
+        const isConfirmed = await ElMessageBox.confirm("Are you sure to delete this meal?");
+        if (!isConfirmed) return
+
+        deleteForm.delete(route('meals.destroy', { meal }))
+    }
 </script>
 
 <template>
@@ -58,26 +72,18 @@
             </div>
 
             <div class="flex items-center space-x-2 text-right">
-                <div class="flex items-center space-x-1 font-bold">
-                    <div v-for="tag in meal.labels" :style="{color: tag.color}" :key="tag.id">
-                        #{{ tag.name  }}
+                <div class="flex items-center space-x-1 font-bold text-gray-500">
+                    <div v-for="ingredient in meal.ingredients" :style="{color: ingredient.color}" :key="ingredient.id">
+                        {{ ingredient.name  }}
                     </div>
-
-                    <LogerApiSimpleSelect
-                        v-model="label.label_id"
-                        v-model:label="label.name"
-                        class="w-24"
-                        tag
-                        custom-label="name"
-                        track-id="id"
-                        placeholder="Add label"
-                        endpoint="/api/labels"
-                        @update:label="$emit('tag-selected', label, meal)"
-                    />
                 </div>
-                <LogerButtonTab type="secondary">
+                <LogerButton type="danger"
+                    @click="deleteResource(meal)"
+                    :disabled="deleteForm.processing"
+                    :processing="deleteForm.processing && deleteForm.id==meal.id"
+                >
                     <i class="fa fa-trash"></i>
-                </LogerButtonTab>
+                </LogerButton>
             </div>
         </article>
     </section>
diff --git a/resources/js/domains/transactions/models/transactions.ts b/resources/js/domains/transactions/models/transactions.ts
index a2735a36..01ce06a4 100644
--- a/resources/js/domains/transactions/models/transactions.ts
+++ b/resources/js/domains/transactions/models/transactions.ts
@@ -33,6 +33,7 @@ export interface IAccount {
     balance: number;
     reconciliations_last?: IReconciliation;
     account_detail_type_id: number;
+    currency_code: string;
 }
 
 export interface IReconciliation {