From 0870bc4c64f9369e1be686cc8919e23530a9dd9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=8A=B9=EC=97=B0?=
 <165753731+seungyeoneeee@users.noreply.github.com>
Date: Tue, 22 Apr 2025 21:04:46 +0900
Subject: [PATCH 1/3] chore(budget-qa): fix critical & major & minor & trivial
 bugs (#5799)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: fix minor css bug of message

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix major bug of select start month and end month (budget create)

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix minor css bug

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix minor bug of service account update

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix critical bug of year filtering (budget landing)

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix major displaying bug about EXPIRED data (budget landing)

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix minor popup error (budget edit)

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: improve query for Project and Service Account filters

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix trivial bug about language

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

---------

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../components/BudgetCreateStep2.vue          | 10 +++++---
 .../BudgetDetailBaseInformation.vue           | 17 +++++--------
 .../components/BudgetMainList.vue             | 22 ++++++++---------
 .../components/BudgetMainToolset.vue          | 24 ++-----------------
 .../stores/budget-detail-page-store.ts        |  4 ++--
 .../ServiceAccountBaseInformationForm.vue     |  1 +
 packages/language-pack/en.json                |  2 +-
 packages/language-pack/ja.json                |  2 +-
 packages/language-pack/ko.json                |  4 ++--
 9 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
index f3eb7d7784..8b14810814 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
@@ -361,6 +361,12 @@ watch(() => state.existingBudgetUsageList, () => {
         budgetCreatePageState.budgetEachDate = [];
     }
 }, { deep: true, immediate: true });
+
+watch(() => budgetCreatePageState.startMonth, () => {
+    if (budgetCreatePageState.startMonth[0].length > 0) {
+        budgetCreatePageState.endMonth = [];
+    }
+}, { deep: true, immediate: true });
 </script>
 
 <template>
@@ -410,8 +416,6 @@ watch(() => state.existingBudgetUsageList, () => {
                     >
                         <p-datetime-picker data-type="yearToMonth"
                                            :selected-dates.sync="budgetCreatePageState.startMonth"
-                                           :min-date="budgetCreatePageState.endMonth.length > 0 ? dayjs.utc(budgetCreatePageState.endMonth[0]).subtract(11, 'month').format('YYYY-MM') : ''"
-                                           :max-date="budgetCreatePageState.endMonth.length > 0 ? dayjs.utc(budgetCreatePageState.endMonth[0]).format('YYYY-MM'): ''"
                                            :placeholder="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SELECT_MONTH')"
                                            :invalid="state.existingBudgetUsageList.length > 0"
                         />
@@ -450,7 +454,7 @@ watch(() => state.existingBudgetUsageList, () => {
                             ? $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE_DESCRIPTION') : ''"
                         required
                     >
-                        <p-radio-group>
+                        <p-radio-group class="mt-2">
                             <p-radio v-for="(cycle, idx) in state.budgetCycleList"
                                      :key="`budget-cycle-${idx}`"
                                      v-model="budgetCreatePageState.time_unit"
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue
index c80185b3ff..7fa9db7160 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailBaseInformation.vue
@@ -18,7 +18,6 @@ import { useServiceAccountReferenceStore } from '@/store/reference/service-accou
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import ProjectLinkButton from '@/common/modules/project/ProjectLinkButton.vue';
 import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
@@ -139,7 +138,6 @@ const handleUpdateAlertRecipients = async () => {
             data: 'alertRecipients'.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),
         }), '');
     } catch (error: any) {
-        ErrorHandler.handleError(error, true);
         showErrorMessage(error.code, error.message);
     }
 };
@@ -154,7 +152,7 @@ const handleUpdateBudgetThresholds = async () => {
                 threshold: Number(threshold),
             })),
         },
-    });
+    }, 'budgetAlerts');
     state.budgetAlertEdit = false;
 };
 
@@ -349,14 +347,11 @@ watch(() => state.selectedBudgetManager, (nv, ov) => {
                                              }"
                             />
                             <div class="flex gap-2 items-start">
-                                <span>{{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.BUDGET_ALERTS_TEXT') }}:</span>
-                                <p v-if="!state.budgetAlertEdit">
-                                    <span v-for="(plan, index) in [...data.plans].sort((a, b) => a.threshold - b.threshold)"
-                                          :key="`plan-${index}`"
-                                    >
-                                        {{ plan.threshold }}{{ plan.unit === 'PERCENT' ? '%' : '' }}<template v-if="index !== data.plans.length - 1">, </template>
-                                    </span>
-                                </p>
+                                <span>{{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.BUDGET_ALERTS_TEXT', {
+                                    threshold: [...data.plans].sort((a, b) => a.threshold - b.threshold).map(plan => {
+                                        return ` ${plan.threshold}${plan.unit === 'PERCENT' ? '%' : ''}`
+                                    })
+                                }) }}</span>
                                 <div v-if="state.budgetAlertEdit">
                                     <p-text-input appearance-type="stack"
                                                   multi-input
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
index f54a7be809..86d57d5e3e 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
@@ -245,14 +245,14 @@ const handleDeleteConfirm = async () => {
 const getBudgetFilters = (): ApiFilter[] => {
     const filters: ApiFilter[] = [];
 
-    if (state.query?.target && state.query?.target !== 'all') {
-        if (state.query?.target === 'project') {
+    if (state.query?.target) {
+        if (state.query.target === 'project') {
             filters.push({
                 k: 'service_account_id',
                 v: [null, ''],
                 o: 'in',
             });
-        } else if (state.query?.target === 'serviceAccount') {
+        } else if (state.query.target === 'serviceAccount') {
             filters.push({
                 k: 'service_account_id',
                 v: [null, ''],
@@ -264,12 +264,12 @@ const getBudgetFilters = (): ApiFilter[] => {
     if (state.query?.year && state.query?.year !== 'all') {
         filters.push({
             k: 'start',
-            v: `${state.query.year}-01`,
+            v: `${state.query.year}-12`,
             o: 'lte',
         });
         filters.push({
             k: 'end',
-            v: `${state.query.year}-12`,
+            v: `${state.query.year}-01`,
             o: 'gte',
         });
     }
@@ -515,7 +515,7 @@ onMounted(async () => {
                 </template>
                 <template #col-limit-format="{item, value, rowIndex}">
                     <p class="flex gap-0.5"
-                       :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }"
+                       :class="{ expired: item.state === 'EXPIRED' }"
                     >
                         <span>{{ CURRENCY_SYMBOL[state.budgets[rowIndex].currency] }}</span>
                         <span>{{ Number(value).toLocaleString() }}</span>
@@ -523,14 +523,14 @@ onMounted(async () => {
                 </template>
                 <template #col-cycle-format="{value, item}">
                     <p class="flex gap-2 items-center"
-                       :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }"
+                       :class="{ expired: item.state === 'EXPIRED' }"
                     >
                         <span v-if="value === 'MONTHLY'">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.MONTHLY') }}</span>
                         <span v-else>{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FIXED_TERM') }}</span>
                     </p>
                 </template>
                 <template #col-period-format="{value, item}">
-                    <span :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">{{ value }}</span>
+                    <span :class="{ expired: item.state === 'EXPIRED' }">{{ value }}</span>
                 </template>
                 <template #col-target-format="{value}">
                     <div v-if="value.startsWith('project-')"
@@ -559,13 +559,13 @@ onMounted(async () => {
                     </p-link>
                 </template>
                 <template #col-actualSpend-format="{item, value, rowIndex}">
-                    <p :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">
+                    <p :class="{ expired: item.state === 'EXPIRED' }">
                         {{ CURRENCY_SYMBOL[state.budgets[rowIndex].currency] }}
                         {{ Number(value).toLocaleString() }}
                     </p>
                 </template>
                 <template #col-utilization_rate-format="{item, value}">
-                    <div :class="{ expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">
+                    <div :class="{ expired: item.state === 'EXPIRED' }">
                         <div v-if="value > -1">
                             <p-progress-bar :percentage="value"
                                             :color="Number(value) < 100
@@ -577,7 +577,7 @@ onMounted(async () => {
                     </div>
                 </template>
                 <template #col-remaining-format="{item, value, rowIndex}">
-                    <p :class="{exceeded: Number(value) < 0, expired: dayjs(item.period.split('~')[1]).format('YYYY-MM-DD') < dayjs().format('YYYY-MM-DD') }">
+                    <p :class="{exceeded: Number(value) < 0, expired: item.state === 'EXPIRED' }">
                         {{ CURRENCY_SYMBOL[state.budgets[rowIndex].currency] }}
                         {{ Math.abs(value.toFixed(2)).toLocaleString() }}
                     </p>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
index 736c43e830..4192500f48 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
@@ -59,17 +59,9 @@ const state = reactive<BudgetMainToolsetState>({
         { name: 'fixedTerm', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FIXED_TERM') },
     ],
     selectedBudgetCycle: 'all',
-    projectList: [{
-        type: 'item', name: 'all', label: 'All',
-    }, {
-        type: 'divider', name: 'divider',
-    }],
+    projectList: [],
     selectedProjectList: [],
-    serviceAccountList: [{
-        type: 'item', name: 'all', label: 'All',
-    }, {
-        type: 'divider', name: 'divider',
-    }],
+    serviceAccountList: [],
     selectedServiceAccountList: [],
     utilizationList: [
         { name: 'all', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.ALL') },
@@ -102,18 +94,6 @@ watch(() => storeState.project, () => {
     }))];
 }, { deep: true, immediate: true });
 
-watch(() => state.selectedProjectList, () => {
-    if (state.selectedProjectList.map((project: any) => project.name).includes('all')) {
-        state.selectedProjectList = state.projectList.slice(2, state.projectList.length);
-    }
-}, { deep: true, immediate: true });
-
-watch(() => state.selectedServiceAccountList, () => {
-    if (state.selectedServiceAccountList.map((serviceAccount: any) => serviceAccount.name).includes('all')) {
-        state.selectedServiceAccountList = state.serviceAccountList.slice(2, state.serviceAccountList.length);
-    }
-}, { deep: true, immediate: true });
-
 watch(() => state, () => {
     emit('update:query', {
         target: state.selectedTarget,
diff --git a/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts b/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
index 457e755213..edb9678435 100644
--- a/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
@@ -42,9 +42,9 @@ export const useBudgetDetailPageStore = defineStore('page-budget-detail', {
                     ...params.updateParams,
                     budget_id: params.budgetId,
                 });
-                showSuccessMessage('', i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.UPDATE_SUCCESS', {
+                showSuccessMessage(i18n.t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BASE_INFORMATION.UPDATE_SUCCESS', {
                     data: type.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),
-                }));
+                }), '');
             } catch (e) {
                 ErrorHandler.handleRequestError(e, '');
             }
diff --git a/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue b/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue
index a4f52fc993..d7a4319410 100644
--- a/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue
+++ b/apps/web/src/services/service-account/components/ServiceAccountBaseInformationForm.vue
@@ -189,6 +189,7 @@ watch(() => state.originForm, (originForm) => {
                                   :show-user-group-list="false"
                                   :selected-id="state.serviceAccountManagerId"
                                   :placeholder="$t('IDENTITY.SERVICE_ACCOUNT.ADD.SERVICE_ACCOUNT_MANAGER')"
+                                  :show-delete-all-button="false"
                                   @formatted-selected-ids="handleFormatSelectedIds"
                                   @update:selected-id="handleServiceAccountManagerId"
             />
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 2fd0a3e2f7..2ba3b7cee5 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -531,7 +531,7 @@
 					"ACTUAL_COST": "Actual Cost",
 					"AMOUNT_PLANNING_TYPE": "Amount Planning Type",
 					"BASE_INFORMATION": {
-						"BUDGET_ALERTS_TEXT": "Notify budget managers when actual spending exceeds",
+						"BUDGET_ALERTS_TEXT": "Notify the budget manager and alert recipients when actual spending exceeds {threshold}.",
 						"EDIT": "Edit",
 						"NAME_INVALID_TEXT": "The name is either missing or already in use.",
 						"SERVICE_ACCOUNT_MANAGERS": "Service Account Managers",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 9a773ed934..df95db30a1 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -531,7 +531,7 @@
 					"ACTUAL_COST": "費用",
 					"AMOUNT_PLANNING_TYPE": "予算設定タイプ",
 					"BASE_INFORMATION": {
-						"BUDGET_ALERTS_TEXT": "実際の支出が超過した場合に予算管理者へ通知",
+						"BUDGET_ALERTS_TEXT": "実際の支出が {threshold} を超えた場合、予算管理者とアラート受信者に通知されます。",
 						"EDIT": "編集",
 						"NAME_INVALID_TEXT": "名前が入力されていないか、すでに使用されています。",
 						"SERVICE_ACCOUNT_MANAGERS": "サービスアカウント管理者",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 15e849d74b..c0fdd969e8 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -531,7 +531,7 @@
 					"ACTUAL_COST": "실 사용액",
 					"AMOUNT_PLANNING_TYPE": "예산 설정 타입",
 					"BASE_INFORMATION": {
-						"BUDGET_ALERTS_TEXT": "실제 지출이 초과되면 예산 관리자에게 알림 전송",
+						"BUDGET_ALERTS_TEXT": "실제 지출이 {threshold}를 초과하면 예산 관리자와 알림 수신자에게 알림을 보냅니다.",
 						"EDIT": "편집",
 						"NAME_INVALID_TEXT": "이름을 입력하지 않았거나, 이미 존재하는 이름입니다.",
 						"SERVICE_ACCOUNT_MANAGERS": "서비스 어카운트 관리자",
@@ -690,7 +690,7 @@
 						"OTHERS": "이외 사용자",
 						"PREVIOUS": "뒤로가기",
 						"PROJECT": "프로젝트",
-						"PROJECT_DUPLICATED_WARNING1": " {project} 프로젝트에는 이미 해당 월에 대한 예산이 설정되어 있습니다: {month_list}",
+						"PROJECT_DUPLICATED_WARNING1": " {project} 프로젝트에는 이미 해당 월들에 대한 예산이 설정되어 있습니다: {month_list}",
 						"PROJECT_DUPLICATED_WARNING2": "프로젝트 {project} 의 서비스 어카운트 {serviceAccount} 에는 이미 해당 월(들)에 대한 예산이 설정되어 있습니다: {month_list}",
 						"PROJECT_MEMBER": "프로젝트 멤버",
 						"PROJECT_VALIDATION": "",

From 846411f103f2f50176274ce3005ce94012133ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=8A=B9=EC=97=B0?=
 <165753731+seungyeoneeee@users.noreply.github.com>
Date: Wed, 23 Apr 2025 01:39:21 +0900
Subject: [PATCH 2/3] chore(budget-qa): fix critical & minor bug (#5800)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: fix critical bug about budget create

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix missing filters as navigating to Cost Analysis from Budget

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

* fix: fix minor bug of chart

Signed-off-by: 이승연 <sylee1274@mz.co.kr>

---------

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../components/BudgetCreateStep2.vue          | 66 +++++++++++++------
 .../components/BudgetCreateStep3.vue          |  2 -
 .../BudgetLastThreeMonthCostTrendBarChart.vue | 14 ++--
 .../BudgetUsageTrendMonthlyChart.vue          | 10 +--
 .../BudgetUsageTrendMonthlyTable.vue          | 27 ++++++--
 .../components/BudgetUsageTrendTotalTable.vue | 15 +++--
 .../components/CostAnalysisContent.vue        | 26 +++++++-
 .../components/CostAnalysisFiltersPopper.vue  | 19 +++++-
 .../services/cost-explorer/routes/routes.ts   | 10 +++
 9 files changed, 142 insertions(+), 47 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
index 8b14810814..79456555e5 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
@@ -67,6 +67,7 @@ const state = reactive({
     startSelectedForBudgetYear: false,
     endSelectedForBudgetYear: false,
     existingBudgetUsageList: [] as BudgetUsageModel[],
+    isCycleSelectAble: false,
 });
 
 const emit = defineEmits<{(e: 'click-next'): void}>();
@@ -139,10 +140,24 @@ const fetchBudgetUsage = async (params: BudgetUsageListParameters) => {
 watch([() => budgetCreatePageState.startMonth, () => budgetCreatePageState.endMonth], async () => {
     if (budgetCreatePageState.startMonth.length > 0 && budgetCreatePageState.endMonth.length > 0) {
         await fetchBudgetUsage({
-            project_id: budgetCreatePageState.project,
-            service_account_id: budgetCreatePageState.scope.serviceAccount,
             query: {
                 filter: [
+                    budgetCreatePageState.scope.serviceAccount
+                        ? {
+                            k: 'service_account_id',
+                            v: budgetCreatePageState.scope.serviceAccount,
+                            o: 'eq',
+                        }
+                        : {
+                            k: 'service_account_id',
+                            v: [null, ''],
+                            o: 'in',
+                        },
+                    {
+                        k: 'project_id',
+                        v: budgetCreatePageState.project,
+                        o: 'eq',
+                    },
                     {
                         k: 'date',
                         v: dayjs.utc(budgetCreatePageState.startMonth[0]).format('YYYY-MM'),
@@ -351,22 +366,32 @@ watch(() => budgetCreatePageState.limit, () => {
     }
 }, { immediate: true });
 
-watch(() => state.existingBudgetUsageList, () => {
-    if (state.existingBudgetUsageList.length > 0) {
+watch([
+    () => budgetCreatePageState.startMonth,
+    () => budgetCreatePageState.endMonth,
+    () => state.existingBudgetUsageList,
+], () => {
+    const isAble = (
+        budgetCreatePageState.startMonth.length > 0
+        && budgetCreatePageState.endMonth.length > 0
+        && state.existingBudgetUsageList.length === 0
+    );
+    state.isCycleSelectAble = isAble;
+
+    if (!isAble && budgetCreatePageState.time_unit !== '') {
         budgetCreatePageState.time_unit = '';
-        budgetCreatePageState.limit = undefined;
-        budgetCreatePageState.budgetAppliedSameAmount = undefined;
-        budgetCreatePageState.initialAmount = undefined;
-        budgetCreatePageState.monthlyGrowthRate = undefined;
-        budgetCreatePageState.budgetEachDate = [];
     }
-}, { deep: true, immediate: true });
+}, { immediate: true });
 
-watch(() => budgetCreatePageState.startMonth, () => {
-    if (budgetCreatePageState.startMonth[0].length > 0) {
+watch(() => budgetCreatePageState.startMonth[0], (newVal, oldVal) => {
+    if (
+        newVal !== oldVal
+        && budgetCreatePageState.endMonth.length > 0
+        && dayjs(newVal).isAfter(dayjs(budgetCreatePageState.endMonth[0]), 'month')
+    ) {
         budgetCreatePageState.endMonth = [];
     }
-}, { deep: true, immediate: true });
+}, { immediate: true });
 </script>
 
 <template>
@@ -430,7 +455,8 @@ watch(() => budgetCreatePageState.startMonth, () => {
                                            :min-date="budgetCreatePageState.startMonth.length > 0
                                                ? dayjs.utc(budgetCreatePageState.startMonth[0]).add(1, 'month').format('YYYY-MM') : ''"
                                            :max-date="budgetCreatePageState.startMonth.length > 0 ? dayjs.utc(budgetCreatePageState.startMonth[0]).add(11, 'month').format('YYYY-MM') : ''"
-                                           :invalid="state.existingBudgetUsageList.length > 0"
+                                           :invalid="state.existingBudgetUsageList.length > 0 || (budgetCreatePageState.startMonth.length > 0
+                                               && budgetCreatePageState.endMonth.length === 0)"
                         />
                     </p-field-group>
                 </div>
@@ -440,13 +466,16 @@ watch(() => budgetCreatePageState.startMonth, () => {
                     {{ budgetCreatePageState.scope.type === 'project'
                         ? $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT_DUPLICATED_WARNING1', {
                             project: project[budgetCreatePageState.project].name,
-                            month_list: state.existingBudgetUsageList.map(d => d.date)
+                            month_list: state.existingBudgetUsageList.sort((a, b) => (a.date > b.date ? 1 : -1)).map(d => d.date)
                         }) : $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.PROJECT_DUPLICATED_WARNING2', {
                             project: project[budgetCreatePageState.project].name,
                             serviceAccount: serviceAccount[budgetCreatePageState.scope.serviceAccount ?? ''].name,
-                            month_list: state.existingBudgetUsageList.map(d => d.date)
+                            month_list: state.existingBudgetUsageList.sort((a, b) => (a.date > b.date ? 1 : -1)).map(d => d.date)
                         }) }}
                 </span>
+                <div class="mt-2">
+                    <budget-last-three-month-cost-trend-bar-chart />
+                </div>
                 <div class="flex mt-6">
                     <p-field-group
                         :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE')"
@@ -459,7 +488,7 @@ watch(() => budgetCreatePageState.startMonth, () => {
                                      :key="`budget-cycle-${idx}`"
                                      v-model="budgetCreatePageState.time_unit"
                                      :value="cycle.name"
-                                     :disabled="state.existingBudgetUsageList.length > 0"
+                                     :disabled="!state.isCycleSelectAble"
                             >
                                 <span>{{ cycle.label }}</span>
                             </p-radio>
@@ -583,9 +612,6 @@ watch(() => budgetCreatePageState.startMonth, () => {
                     </div>
                 </p-pane-layout>
             </div>
-            <div class="right-section">
-                <budget-last-three-month-cost-trend-bar-chart />
-            </div>
         </div>
         <div class="mt-8 flex justify-end gap-4">
             <p-button style-type="transparent"
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
index bdc0fc1829..399938a680 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
@@ -121,12 +121,10 @@ const createBudget = async (type: 'skip' | 'set') => {
         };
         await SpaceConnector.clientV2.costAnalysis.budget.create<BudgetCreateParameters, BudgetModel>(params);
 
-        budgetCreatePageState.loading = false;
         router.push({
             name: COST_EXPLORER_ROUTE.BUDGET._NAME,
         });
         showSuccessMessage(i18n.t('BILLING.COST_MANAGEMENT.BUDGET.ALT_S_CREATE_BUDGET'), '');
-        budgetCreatePageStore.reset();
     } catch (error: any) {
         showErrorMessage(i18n.t('BILLING.COST_MANAGEMENT.BUDGET.ALT_E_CREATE_BUDGET'), error.message);
         budgetCreatePageState.currentStep = 1;
diff --git a/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue b/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue
index 0dfd038e7c..353bf30c87 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetLastThreeMonthCostTrendBarChart.vue
@@ -29,11 +29,11 @@ const state = reactive({
     data: {},
     xAxisData: computed(() => {
         const startDate = budgetCreatePageState.startMonth.length > 0
-            ? dayjs.utc(budgetCreatePageState.startMonth[0])
-            : dayjs.utc().subtract(3, 'month');
+            ? dayjs.utc(budgetCreatePageState.startMonth[0]).subtract(1, 'year')
+            : dayjs.utc().subtract(1, 'year').subtract(3, 'month');
         const endDate = budgetCreatePageState.endMonth.length > 0
-            ? dayjs.utc(budgetCreatePageState.endMonth[0])
-            : dayjs.utc().subtract(1, 'month');
+            ? dayjs.utc(budgetCreatePageState.endMonth[0]).subtract(1, 'year')
+            : dayjs.utc().subtract(1, 'year').subtract(1, 'month');
         const monthDiff = endDate.diff(startDate, 'month');
 
         return Array.from({ length: monthDiff + 1 }, (_, i) => startDate.add(i, 'month').format('YYYY-MM'));
@@ -102,8 +102,8 @@ const fetchBudgetUsageAnalyze = async () => {
     try {
         const { results } = await SpaceConnector.clientV2.costAnalysis.unifiedCost.analyze({
             query: {
-                start: dayjs.utc(budgetCreatePageState.startMonth[0]).format('YYYY-MM'),
-                end: dayjs.utc(budgetCreatePageState.endMonth[0]).format('YYYY-MM'),
+                start: dayjs.utc(budgetCreatePageState.startMonth[0]).subtract(1, 'year').format('YYYY-MM'),
+                end: dayjs.utc(budgetCreatePageState.endMonth[0]).subtract(1, 'year').format('YYYY-MM'),
                 group_by: !budgetCreatePageState.scope.serviceAccount ? ['project_id', 'is_confirmed'] : ['project_id', 'service_account_id', 'is_confirmed'],
                 fields: {
                     cost_trend: {
@@ -173,7 +173,7 @@ watch(() => budgetCreatePageState, async () => {
 
 <style scoped lang="postcss">
 .chart-wrapper {
-    width: 25rem;
+    width: 56rem;
     height: 17rem;
     .chart {
         height: 100%;
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
index 332327fa13..d0a78d923c 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
@@ -43,7 +43,7 @@ const state = reactive({
         tooltip: {
             trigger: 'axis',
             axisPointer: {
-                type: 'shadow',
+                type: 'none',
             },
             formatter: (params: any) => {
                 const usageData = params.find((p) => p.seriesName === 'Actual Spend');
@@ -131,7 +131,7 @@ const drawChart = (data: any) => {
         {
             name: 'Planned Budget',
             type: 'bar',
-            data: state.data.map(() => 100),
+            data: state.data.map(() => 99.5),
             barGap: '-100%',
             itemStyle: {
                 color: indigo[100],
@@ -202,7 +202,7 @@ onBeforeUnmount(() => {
             </div>
             <div class="flex items-center gap-1">
                 <div class="w-3 h-3 rounded-full bg-yellow-500" />
-                <span> 90% &lt; {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACTUAL_SPEND') }} &gt; 100%</span>
+                <span> 90% &lt; {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.BUDGET_USAGE_TREND.ACTUAL_SPEND') }} &lt; 100%</span>
             </div>
             <div class="flex items-center gap-1">
                 <div class="w-3 h-3 rounded-full bg-red-400" />
@@ -214,8 +214,10 @@ onBeforeUnmount(() => {
 
 <style scoped lang="postcss">
 .chart-wrapper {
-    height: 17rem;
+    height: 20rem;
     overflow-x: auto;
+    overflow: visible;
+    position: relative;
 
     .chart {
         height: 100%;
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
index d61e7ff762..e3137edbe9 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
@@ -8,11 +8,15 @@ import { PDataTable, PToggleButton, PLink } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
 
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 
+import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
+import { useCostQuerySetStore } from '@/services/cost-explorer/stores/cost-query-set-store';
+
+import { MANAGED_COST_QUERY_SET_IDS } from '../constants/managed-cost-analysis-query-sets';
 
 interface Props {
     data: any;
@@ -20,13 +24,13 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const userWorkspaceStore = useUserWorkspaceStore();
-const currentWorkspaceId = computed(() => userWorkspaceStore.getters.currentWorkspaceId);
-
 const budgetPageStore = useBudgetDetailPageStore();
 const budgetPageState = budgetPageStore.$state;
+const appContextStore = useAppContextStore();
+const costQuerySetStore = useCostQuerySetStore();
 
 const budgetData = computed(() => budgetPageState.budgetData);
+const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
 
 const formatNumberToShort = (number: number) => {
     if (number >= 1000000000) {
@@ -176,9 +180,18 @@ const handleToggleOriginalData = (value: boolean) => {
                 </template>
             </template>
         </p-data-table>
-        <p-link :to="{ name: COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME, params: {
-                    workspaceId: currentWorkspaceId,
-                } }"
+        <p-link :to="{
+                    name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME : COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME,
+                    params: {
+                        costQuerySetId: costQuerySetStore.state.costQuerySetList
+                            .filter(c => c.name === MANAGED_COST_QUERY_SET_IDS.MONTHLY_PROJECT)
+                            .map(c => c.cost_query_set_id)[0]
+                    },
+                    query: {
+                        project_id: budgetPageState.budgetData?.project_id,
+                        service_account_id: budgetPageState.budgetData?.service_account_id,
+                    }
+                }"
                 highlight
                 class="link"
                 action-icon="external-link"
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
index f1d02bcf28..32d0a768f8 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
@@ -12,9 +12,11 @@ import { i18n } from '@/translations';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 
+import { MANAGED_COST_QUERY_SET_IDS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
+import { useCostQuerySetStore } from '@/services/cost-explorer/stores/cost-query-set-store';
 
 interface Props {
     data: any;
@@ -34,6 +36,7 @@ const props = defineProps<Props>();
 const budgetPageStore = useBudgetDetailPageStore();
 const budgetPageState = budgetPageStore.$state;
 const appContextStore = useAppContextStore();
+const costQuerySetStore = useCostQuerySetStore();
 
 const budgetData = computed(() => budgetPageStore.$state.budgetData);
 const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
@@ -251,15 +254,19 @@ const handleToggleOriginalData = (value: boolean) => {
 
         <p-link :to="{
                     name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME : COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME,
+                    params: {
+                        costQuerySetId: costQuerySetStore.state.costQuerySetList
+                            .filter(c => c.name === MANAGED_COST_QUERY_SET_IDS.MONTHLY_PROJECT)
+                            .map(c => c.cost_query_set_id)[0]
+                    },
                     query: {
-                        project: budgetPageState.budgetData?.project_id,
-                        period_start: budgetPageState.budgetData?.start,
-                        period_end: budgetPageState.budgetData?.end,
+                        project_id: budgetPageState.budgetData?.project_id,
+                        service_account_id: budgetPageState.budgetData?.service_account_id,
                     }
                 }"
                 highlight
                 class="link"
-                action-icon="internal-link"
+                action-icon="external-link"
         >
             {{ $t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.GO_TO_COST_ANALYSIS') }}
         </p-link>
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
index f86b969357..229d6edeb6 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    onUnmounted, watch,
+    onUnmounted, watch, watchEffect,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
@@ -43,6 +43,30 @@ onUnmounted(() => {
     costAnalysisPageStore.reset();
 });
 
+
+watchEffect(() => {
+    const { project_id, service_account_id } = route.query;
+    if (project_id || service_account_id) {
+        const filters: Record<string, string[]> = {
+            ...costAnalysisPageStore.state.filters,
+        };
+
+        if (project_id) {
+            filters.project_id = Array.isArray(project_id)
+                ? project_id.filter((id): id is string => id !== null)
+                : [project_id as string];
+        }
+
+        if (service_account_id) {
+            filters.service_account_id = Array.isArray(service_account_id)
+                ? service_account_id.filter((id): id is string => id !== null)
+                : [service_account_id as string];
+        }
+
+        costAnalysisPageStore.setFilters(filters);
+    }
+});
+
 watch(() => costAnalysisPageGetters.selectedQuerySet, async (selectedQuerySet) => {
     if (selectedQuerySet) {
         costAnalysisPageStore.setQueryOptions(selectedQuerySet.options);
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
index 8f73a5cd52..715366e400 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
@@ -2,6 +2,7 @@
 import {
     computed, reactive, watch,
 } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
 
 import { cloneDeep } from 'lodash';
 
@@ -60,6 +61,9 @@ interface VariableOption {
     dataKey?: string;
 }
 
+const route = useRoute();
+const router = useRouter();
+
 const GROUP_BY_TO_VAR_MODELS: Record<string, VariableOption> = {
     [GROUP_BY.WORKSPACE]: { key: MANAGED_VARIABLE_MODEL_KEY_MAP.workspace },
     [GROUP_BY.PROJECT]: { key: MANAGED_VARIABLE_MODEL_KEY_MAP.project },
@@ -199,10 +203,21 @@ const handleUpdateFiltersDropdown = (groupBy: string, selectedItems: MenuItem[])
     selectedItemsMap[groupBy] = selectedItems;
     state.selectedItemsMap = selectedItemsMap;
 
-    costAnalysisPageStore.setFilters({
+    const newFilters = {
         ...costAnalysisPageState.filters,
         [groupBy]: selectedItems.map((d) => d.name as string),
-    });
+    };
+    costAnalysisPageStore.setFilters(newFilters);
+
+    const currentQuery = { ...route.query };
+    if (groupBy === GROUP_BY.PROJECT || groupBy === GROUP_BY.SERVICE_ACCOUNT) {
+        if (selectedItems.length > 0) {
+            currentQuery[groupBy === GROUP_BY.PROJECT ? 'project' : 'service_account_id'] = selectedItems.map((d) => d.name)[0];
+        } else {
+            delete currentQuery[groupBy === GROUP_BY.PROJECT ? 'project' : 'service_account_id'];
+        }
+        router.replace({ query: currentQuery });
+    }
 };
 const handleDisabledFilters = (all?: boolean, disabledFilter?: string) => {
     if (all) {
diff --git a/apps/web/src/services/cost-explorer/routes/routes.ts b/apps/web/src/services/cost-explorer/routes/routes.ts
index fb47ba2f8b..89d6a1545a 100644
--- a/apps/web/src/services/cost-explorer/routes/routes.ts
+++ b/apps/web/src/services/cost-explorer/routes/routes.ts
@@ -72,6 +72,15 @@ const costExplorerRoutes: RouteConfig = {
                             } else if (to.params.dataSourceId && to.params.costQuerySetId) {
                                 next();
                             } else {
+                                const normalizedQuery = { ...to.query };
+                                if (normalizedQuery.project) {
+                                    normalizedQuery.project_id = normalizedQuery.project;
+                                    delete normalizedQuery.project;
+                                }
+                                if (normalizedQuery.service_account) {
+                                    normalizedQuery.service_account_id = normalizedQuery.service_account;
+                                    delete normalizedQuery.service_account;
+                                }
                                 next({
                                     name: COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME,
                                     params: {
@@ -79,6 +88,7 @@ const costExplorerRoutes: RouteConfig = {
                                         costQuerySetId: MANAGED_COST_QUERY_SET_IDS.MONTHLY_PROJECT,
                                         workspaceId,
                                     },
+                                    query: normalizedQuery,
                                 });
                             }
                         } catch (e) {

From 6e08d4cf7f19131d25a1a3b2e9e434662e78d9f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=8A=B9=EC=97=B0?=
 <165753731+seungyeoneeee@users.noreply.github.com>
Date: Wed, 23 Apr 2025 15:06:39 +0900
Subject: [PATCH 3/3] fix: fix major bug of budget create error (#5802)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 이승연 <sylee1274@mz.co.kr>
---
 .../components/BudgetCreateStep2.vue          | 142 ++++++++++--------
 1 file changed, 77 insertions(+), 65 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
index 79456555e5..6a319af621 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
@@ -67,9 +67,13 @@ const state = reactive({
     startSelectedForBudgetYear: false,
     endSelectedForBudgetYear: false,
     existingBudgetUsageList: [] as BudgetUsageModel[],
-    isCycleSelectAble: false,
 });
 
+
+const isCycleEnabled = computed(() => budgetCreatePageState.startMonth.length > 0
+           && budgetCreatePageState.endMonth.length > 0
+           && state.existingBudgetUsageList.length === 0);
+
 const emit = defineEmits<{(e: 'click-next'): void}>();
 
 const isDateInRange = (index: number) => {
@@ -191,6 +195,25 @@ watch(() => [budgetCreatePageState.startMonth, budgetCreatePageState.endMonth],
     }
 }, { immediate: true });
 
+watch(() => budgetCreatePageState.selectedMonthlyBudgetAllocation, (nv, ov) => {
+    if (nv !== ov) {
+        if (nv === 'applySameAmount') {
+            budgetCreatePageStore.setInitialAmount(undefined);
+            budgetCreatePageStore.setMonthlyGrowthRate(undefined);
+            budgetCreatePageState.budgetEachDate = Array(12).fill('');
+        } else if (nv === 'increaseBySpecificPercentage') {
+            budgetCreatePageStore.setBudgetAppliedSameAmount(undefined);
+            budgetCreatePageState.budgetEachDate = Array(12).fill('');
+        } else if (nv === 'enterManually') {
+            budgetCreatePageStore.setBudgetAppliedSameAmount(undefined);
+            budgetCreatePageStore.setInitialAmount(undefined);
+            budgetCreatePageStore.setMonthlyGrowthRate(undefined);
+        }
+
+        budgetCreatePageStore.setPlannedLimits([]);
+    }
+}, { immediate: true });
+
 watch(() => [
     budgetCreatePageState.selectedMonthlyBudgetAllocation,
     budgetCreatePageState.budgetAppliedSameAmount,
@@ -200,53 +223,59 @@ watch(() => [
     budgetCreatePageState.startMonth,
     budgetCreatePageState.endMonth,
 ], () => {
+    const planned_limits: any[] = [];
+
     if (budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0) {
+        budgetCreatePageStore.setPlannedLimits([]);
         return;
     }
 
-    const planned_limits: any = [];
     const startDate = dayjs.utc(budgetCreatePageState.startMonth[0]);
     const endDate = dayjs.utc(budgetCreatePageState.endMonth[0]);
     let currentDate = startDate;
 
+    const dateDiff = endDate.diff(startDate, 'month') + 1;
+
     if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'applySameAmount') {
-        while (currentDate.isSameOrBefore(endDate, 'month') && budgetCreatePageState.budgetAppliedSameAmount
-        && budgetCreatePageState.budgetAppliedSameAmount > 0) {
-            planned_limits.push({
-                date: currentDate.format('YYYY-MM'),
-                limit: budgetCreatePageState.budgetAppliedSameAmount,
-            });
-            currentDate = currentDate.add(1, 'month');
+        if (isValidPositiveNumber(budgetCreatePageState.budgetAppliedSameAmount)) {
+            while (currentDate.isSameOrBefore(endDate, 'month')) {
+                planned_limits.push({
+                    date: currentDate.format('YYYY-MM'),
+                    limit: Number(budgetCreatePageState.budgetAppliedSameAmount),
+                });
+                currentDate = currentDate.add(1, 'month');
+            }
         }
-    } else if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'increaseBySpecificPercentage'
-        && budgetCreatePageState.initialAmount && budgetCreatePageState.monthlyGrowthRate
-    ) {
-        let currentAmount = budgetCreatePageState.initialAmount;
-        while (currentDate.isSameOrBefore(endDate, 'month')) {
-            planned_limits.push({
-                date: currentDate.format('YYYY-MM'),
-                limit: Math.round(currentAmount),
-            });
-            currentAmount *= (1 + ((budgetCreatePageState.monthlyGrowthRate || 0) / 100));
-            currentDate = currentDate.add(1, 'month');
+    } else if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'increaseBySpecificPercentage') {
+        if (isValidPositiveNumber(budgetCreatePageState.initialAmount) && isValidPositiveNumber(budgetCreatePageState.monthlyGrowthRate)) {
+            let currentAmount = budgetCreatePageState.initialAmount;
+            while (currentDate.isSameOrBefore(endDate, 'month')) {
+                planned_limits.push({
+                    date: currentDate.format('YYYY-MM'),
+                    limit: Math.round(currentAmount),
+                });
+                currentAmount *= (1 + (budgetCreatePageState.monthlyGrowthRate / 100));
+                currentDate = currentDate.add(1, 'month');
+            }
         }
-    } else if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'enterManually'
-    && budgetCreatePageState.budgetEachDate.length === Number(endDate.month() - startDate.month() + 1)) {
-        const monthIndices = Array.from({ length: 12 }, (_, i) => i);
-        monthIndices.forEach((i) => {
-            if (currentDate.isSameOrBefore(endDate, 'month')) {
+    } else if (budgetCreatePageState.selectedMonthlyBudgetAllocation === 'enterManually') {
+        if (budgetCreatePageState.budgetEachDate.length === dateDiff) {
+            for (let i = 0; i < dateDiff; i++) {
+                const value = budgetCreatePageState.budgetEachDate[i];
+                if (!isValidPositiveNumber(value)) {
+                    budgetCreatePageStore.setPlannedLimits([]);
+                    return;
+                }
                 planned_limits.push({
                     date: currentDate.format('YYYY-MM'),
-                    limit: Number(budgetCreatePageState.budgetEachDate[i]),
+                    limit: Number(value),
                 });
                 currentDate = currentDate.add(1, 'month');
             }
-        });
+        }
     }
 
-    if (planned_limits.length > 0) {
-        budgetCreatePageStore.setPlannedLimits(planned_limits);
-    }
+    budgetCreatePageStore.setPlannedLimits(planned_limits);
 }, { deep: true });
 
 watch(() => [
@@ -263,6 +292,10 @@ watch(() => [
     budgetCreatePageState.startMonth,
     budgetCreatePageState.endMonth,
 ], () => {
+    if (!budgetCreatePageState.time_unit) {
+        state.isContinueAble = false;
+        return;
+    }
     if (state.existingBudgetUsageList.length > 0) {
         state.isContinueAble = false;
         return;
@@ -319,10 +352,6 @@ watch(() => [
 watch(() => budgetCreatePageState.selectedMonthlyBudgetAllocation, (nv, ov) => {
     if (nv !== ov) {
         budgetCreatePageStore.setPlannedLimits([]);
-        budgetCreatePageStore.setBudgetAppliedSameAmount(undefined);
-        budgetCreatePageStore.setInitialAmount(undefined);
-        budgetCreatePageStore.setMonthlyGrowthRate(undefined);
-        budgetCreatePageState.budgetEachDate = [];
     }
 }, { immediate: true });
 
@@ -366,30 +395,13 @@ watch(() => budgetCreatePageState.limit, () => {
     }
 }, { immediate: true });
 
-watch([
-    () => budgetCreatePageState.startMonth,
-    () => budgetCreatePageState.endMonth,
-    () => state.existingBudgetUsageList,
-], () => {
-    const isAble = (
-        budgetCreatePageState.startMonth.length > 0
-        && budgetCreatePageState.endMonth.length > 0
-        && state.existingBudgetUsageList.length === 0
-    );
-    state.isCycleSelectAble = isAble;
-
-    if (!isAble && budgetCreatePageState.time_unit !== '') {
-        budgetCreatePageState.time_unit = '';
-    }
-}, { immediate: true });
-
 watch(() => budgetCreatePageState.startMonth[0], (newVal, oldVal) => {
-    if (
-        newVal !== oldVal
-        && budgetCreatePageState.endMonth.length > 0
-        && dayjs(newVal).isAfter(dayjs(budgetCreatePageState.endMonth[0]), 'month')
-    ) {
-        budgetCreatePageState.endMonth = [];
+    if (newVal !== oldVal && budgetCreatePageState.currentStep === 2) {
+        const isValidationReturn = budgetCreatePageState.time_unit !== '' || budgetCreatePageState.endMonth.length > 0;
+        if (!isValidationReturn) {
+            budgetCreatePageState.endMonth = [];
+            budgetCreatePageState.time_unit = '';
+        }
     }
 }, { immediate: true });
 </script>
@@ -479,23 +491,23 @@ watch(() => budgetCreatePageState.startMonth[0], (newVal, oldVal) => {
                 <div class="flex mt-6">
                     <p-field-group
                         :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE')"
-                        :help-text="budgetCreatePageState.startMonth.length === 0 || budgetCreatePageState.endMonth.length === 0
-                            ? $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE_DESCRIPTION') : ''"
+                        :help-text="!isCycleEnabled ? $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.BUDGET_CYCLE_DESCRIPTION') : ''"
                         required
                     >
                         <p-radio-group class="mt-2">
-                            <p-radio v-for="(cycle, idx) in state.budgetCycleList"
-                                     :key="`budget-cycle-${idx}`"
-                                     v-model="budgetCreatePageState.time_unit"
-                                     :value="cycle.name"
-                                     :disabled="!state.isCycleSelectAble"
+                            <p-radio
+                                v-for="(cycle, idx) in state.budgetCycleList"
+                                :key="`budget-cycle-${idx}`"
+                                v-model="budgetCreatePageState.time_unit"
+                                :value="cycle.name"
+                                :disabled="!isCycleEnabled"
                             >
                                 <span>{{ cycle.label }}</span>
                             </p-radio>
                         </p-radio-group>
                     </p-field-group>
                 </div>
-                <p-pane-layout v-if="budgetCreatePageState.time_unit.length > 0"
+                <p-pane-layout v-if="budgetCreatePageState.time_unit.length > 0 && isCycleEnabled"
                                class="cycle-info-layout"
                                :class="{'fixed-term-layout': budgetCreatePageState.time_unit === 'TOTAL'}"
                 >