From bfcd24bad8e0589df600d771001220cf0d1bdc42 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 15:40:27 +0900
Subject: [PATCH 01/18] feat(project-route): add project dashboard create route
 & apply route name convention

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 apps/web/src/services/project/v2/routes/route-constant.ts | 3 ++-
 apps/web/src/services/project/v2/routes/routes.ts         | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/services/project/v2/routes/route-constant.ts b/apps/web/src/services/project/v2/routes/route-constant.ts
index e8d42084bb..e60a54ba09 100644
--- a/apps/web/src/services/project/v2/routes/route-constant.ts
+++ b/apps/web/src/services/project/v2/routes/route-constant.ts
@@ -2,5 +2,6 @@ import { MENU_ID } from '@/lib/menu/config';
 
 export const PROJECT_ROUTE_V2 = Object.freeze({
     _NAME: MENU_ID.PROJECT,
-    DETAIL: `${MENU_ID.PROJECT}-detail`,
+    DETAIL: { _NAME: `${MENU_ID.PROJECT}-detail` },
+    DASHBOARD_CREATE: { _NAME: `${MENU_ID.PROJECT}-dashboard-create` },
 });
diff --git a/apps/web/src/services/project/v2/routes/routes.ts b/apps/web/src/services/project/v2/routes/routes.ts
index 096122f53c..790f91a716 100644
--- a/apps/web/src/services/project/v2/routes/routes.ts
+++ b/apps/web/src/services/project/v2/routes/routes.ts
@@ -18,6 +18,12 @@ const projectRoutes: RouteConfig = {
     },
     component: ProjectContainer,
     children: [
+        {
+            path: ':projectGroupOrProjectId/dashboard-create',
+            name: PROJECT_ROUTE_V2.DASHBOARD_CREATE._NAME,
+            props: true,
+            // component: ProjectDashboardCreatePage,
+        },
         {
             path: ':projectGroupOrProjectId?/:dashboardId?',
             name: PROJECT_ROUTE_V2._NAME,

From 2c13d52a23ea15451abe1f3f4a8be88c0ce97adb Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 15:41:57 +0900
Subject: [PATCH 02/18] fix(dashboard-shared): separate shared dashboard form
 dashboards service (dashboard create only)

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../DashboardCreateBlankBoardItem.vue         |  3 +-
 .../DashboardCreateScopeForm.vue              |  2 +-
 .../dashboard-create/DashboardCreateStep1.vue | 89 ++++++-----------
 .../DashboardCreateStep1SearchFilter.vue      |  0
 .../dashboard-create/DashboardCreateStep2.vue | 18 ++--
 .../DashboardCreateStep2BundleCase.vue        | 81 +++++++++------
 .../DashboardCreateStep2SingleCase.vue        | 99 +++++++++++--------
 .../use-dashboard-route-context.ts            | 60 +++++++++++
 .../stores/dashboard-create-page-store.ts     |  0
 9 files changed, 210 insertions(+), 142 deletions(-)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateBlankBoardItem.vue (97%)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateScopeForm.vue (99%)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateStep1.vue (68%)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateStep1SearchFilter.vue (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateStep2.vue (77%)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateStep2BundleCase.vue (69%)
 rename apps/web/src/services/{dashboards => dashboard-shared}/components/dashboard-create/DashboardCreateStep2SingleCase.vue (67%)
 create mode 100644 apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
 rename apps/web/src/services/{dashboards => dashboard-shared}/stores/dashboard-create-page-store.ts (100%)

diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue
index f6754aded9..092d6ff9f9 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue
@@ -4,8 +4,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { BoardSet } from '@cloudforet/mirinae/types/data-display/board/type';
 
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
-
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
 
 interface Props {
     templateSets: BoardSet[];
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue
similarity index 99%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue
index c1d2b7a9ed..3d46d59b0b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue
@@ -18,7 +18,7 @@ import { useUserStore } from '@/store/user/user-store';
 
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
 
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue
similarity index 68%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue
index 1d981d2c5d..0cca367b85 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue
@@ -14,49 +14,31 @@ import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-ty
 import type { DashboardTemplateModel } from '@/schema/repository/dashboard-template/model';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 
-
-import DashboardCreateBlankBoardItem from '@/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue';
-import type { FilterLabelItem } from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
-import DashboardCreateStep1SearchFilter from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
+import DashboardCreateBlankBoardItem from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue';
+import type { FilterLabelItem } from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
+import DashboardCreateStep1SearchFilter from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+}
 
-
+const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'click-next'): void }>();
 const router = useRouter();
 
 
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
-
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-} = useDashboardQuery();
-
-const queryState = reactive({
-    publicDashboardItems: computed(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
-    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
-});
-
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
+const { entryPoint, projectGroupOrProjectId } = useDashboardRouteContext();
 
 const state = reactive({
     templates: [] as DashboardTemplateModel[],
@@ -83,7 +65,7 @@ const state = reactive({
     }),
     allExistingLabels: computed<string[]>(() => {
         const _ootbTemplates = getFilteredTemplates(dashboardCreatePageState.dashboardTemplates, '', [], []);
-        const _existingTemplates = getFilteredTemplates(queryState.allDashboardItems, '', [], []);
+        const _existingTemplates = getFilteredTemplates(props.dashboardItems, '', [], []);
 
         const _ootbLabels = flatMapDeep(_ootbTemplates.map((d) => d.labels ?? []));
         const _existingLabels = flatMapDeep(_existingTemplates.map((d) => d.labels ?? []));
@@ -121,10 +103,22 @@ const handleSelectProvider = (providers: FilterLabelItem[]) => {
     filterState.selectedProviders = providers.map((d) => d.label.toLowerCase());
 };
 const handleClickCancel = () => {
-    const dashboardRouteName = storeState.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE._NAME
-        : DASHBOARDS_ROUTE._NAME;
-    router.push({ name: dashboardRouteName }).catch(() => {});
+    if (entryPoint.value === 'ADMIN') {
+        router.push({ name: ADMIN_DASHBOARDS_ROUTE._NAME }).catch(() => {});
+    } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+        router.push({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+            },
+        }).catch(() => {});
+    } else if (entryPoint.value === 'WORKSPACE') {
+        router.push({
+            name: DASHBOARDS_ROUTE._NAME,
+        }).catch(() => {});
+    } else {
+        console.error('Invalid entry point');
+    }
 };
 
 onMounted(() => {
@@ -134,33 +128,6 @@ onMounted(() => {
 
 <template>
     <div class="dashboard-create-step-1">
-        <!--        <div v-if="storeState.isAdminMode"-->
-        <!--             class="dashboard-type-wrapper"-->
-        <!--        >-->
-        <!--            <p-field-title size="lg"-->
-        <!--                           :label="$t('DASHBOARDS.CREATE.DASHBOARD_TYPE')"-->
-        <!--                           :description="$t('DASHBOARDS.CREATE.DASHBOARD_TYPE_DESC')"-->
-        <!--            />-->
-        <!--            <div class="dashboard-type-select-card-wrapper">-->
-        <!--                <p-select-card class="col-span-6"-->
-        <!--                               :label="i18n.t('DASHBOARDS.CREATE.WORKSPACE_DASHBOARD')"-->
-        <!--                               icon="ic_service_workspaces"-->
-        <!--                               :selected="dashboardCreatePageState.adminDashboardType === 'WORKSPACE'"-->
-        <!--                               @click="dashboardCreatePageStore.setAdminDashboardType('WORKSPACE')"-->
-        <!--                />-->
-        <!--                <p-select-card class="col-span-6"-->
-        <!--                               :label="i18n.t('DASHBOARDS.CREATE.ADMIN_DASHBOARD')"-->
-        <!--                               icon="ic_admin-icon"-->
-        <!--                               :selected="dashboardCreatePageState.adminDashboardType === 'ADMIN'"-->
-        <!--                               @click="dashboardCreatePageStore.setAdminDashboardType('ADMIN')"-->
-        <!--                />-->
-        <!--            </div>-->
-        <!--            <p-divider class="divider" />-->
-        <!--            <p-field-title size="lg"-->
-        <!--                           :label="$t('DASHBOARDS.CREATE.DASHBOARD_TEMPLATE')"-->
-        <!--                           :description="$t('DASHBOARDS.CREATE.DASHBOARD_TEMPLATE_DESC')"-->
-        <!--            />-->
-        <!--        </div>-->
         <div class="contents-container">
             <dashboard-create-step1-search-filter :labels="state.allExistingLabels"
                                                   @select-label="handleSelectLabels"
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue
similarity index 77%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue
index 675ed5ebf6..0105323a0e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue
@@ -5,26 +5,29 @@ import {
 
 import { PButton } from '@cloudforet/mirinae';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import DashboardCreateStep2BundleCase
-    from '@/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue';
+    from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue';
 import DashboardCreateStep2SingleCase
-    from '@/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
+    from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
 
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+}
 
+const props = defineProps<Props>();
 
 const singleCaseRef = ref<HTMLElement|null>(null);
 const bundleCaseRef = ref<HTMLElement|null>(null);
 
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
 const state = reactive({
     isSingleCreateValid: false,
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     disableCreateButton: computed<boolean>(() => {
         if (dashboardCreatePageState.createType === 'SINGLE') {
             return !state.isSingleCreateValid;
@@ -52,9 +55,12 @@ const handleCreateDashboard = async () => {
         <dashboard-create-step2-single-case v-if="dashboardCreatePageState.createType === 'SINGLE'"
                                             ref="singleCaseRef"
                                             :is-valid.sync="state.isSingleCreateValid"
+                                            :dashboard-items="props.dashboardItems"
+                                            :folder-items="props.folderItems"
         />
         <dashboard-create-step2-bundle-case v-else
                                             ref="bundleCaseRef"
+                                            :dashboard-items="props.dashboardItems"
         />
         <div class="button-area">
             <p-button style-type="transparent"
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue
similarity index 69%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue
index 97b8392b15..5eaf1aa7d0 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue
@@ -14,11 +14,13 @@ import { getClonedName } from '@cloudforet/utils';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -26,57 +28,51 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import { gray } from '@/styles/colors';
 
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
 } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+}
 
+const props = defineProps<Props>();
 
 const TABLE_FIELDS = [
     { name: 'name', label: 'Name' },
     { name: 'private', label: 'Make Private' },
 ];
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
 const userStore = useUserStore();
 const router = useRouter();
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-    keys,
-    api,
-} = useDashboardQuery();
-const queryClient = useQueryClient();
+const { entryPoint, projectContextType, projectGroupOrProjectId } = useDashboardRouteContext();
 
 const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
 });
 const state = reactive({
     loading: false,
-    publicDashboardItems: computed(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    publicDashboardItems: computed(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('public'))),
+    privateDashboardItems: computed(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('private'))),
     bundleCaseType: computed(() => {
         if (!isEmpty(dashboardCreatePageState.selectedOotbIdMap)) return 'TEMPLATE';
         return 'EXISTING';
     }),
     privateMap: {} as Record<string, boolean>,
     tableFields: computed(() => {
-        if (storeState.isAdminMode || storeState.isWorkspaceMember) return TABLE_FIELDS.filter((f) => f.name !== 'private');
+        if (entryPoint.value === 'ADMIN'
+            || entryPoint.value === 'PROJECT'
+            || (entryPoint.value === 'WORKSPACE' && storeState.isWorkspaceMember)) return TABLE_FIELDS.filter((f) => f.name !== 'private');
         if (state.bundleCaseType === 'TEMPLATE') return TABLE_FIELDS.filter((f) => f.name !== 'location');
         return TABLE_FIELDS;
     }),
@@ -102,6 +98,12 @@ const addToNewIdList = (id: string) => {
 };
 
 /* Api */
+const queryClient = useQueryClient();
+const { publicDashboardAPI } = usePublicDashboardApi();
+const { privateDashboardAPI } = usePrivateDashboardApi();
+const { key: publicDashboardListQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'list');
+const { key: privateDashboardListQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'list');
+
 const createBundleOotb = async () => {
     const _promises: Promise<DashboardModel>[] = [];
     const _selectedOotbList = dashboardCreatePageState.dashboardTemplates.filter((d) => dashboardCreatePageState.selectedOotbIdMap[d.template_id]);
@@ -117,8 +119,14 @@ const createBundleOotb = async () => {
             tags: { created_by: userStore.state.userId },
             vars_schema: DASHBOARD_VARS_SCHEMA_PRESET,
         };
-        if (storeState.isAdminMode) {
+        if (entryPoint.value === 'ADMIN') {
             (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+        } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT') {
+            (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.PROJECT;
+            (_dashboardParams as PublicDashboardCreateParameters).project_id = projectGroupOrProjectId.value;
+        } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT_GROUP') {
+            (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+            (_dashboardParams as PublicDashboardCreateParameters).project_group_id = projectGroupOrProjectId.value;
         } else if (!storeState.isWorkspaceMember && !_isPrivate) {
             (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
         }
@@ -127,8 +135,8 @@ const createBundleOotb = async () => {
             _createType = 'PRIVATE';
         }
         const fetcher = _createType === 'PRIVATE'
-            ? api.privateDashboardAPI.create
-            : api.publicDashboardAPI.create;
+            ? privateDashboardAPI.create
+            : publicDashboardAPI.create;
         _promises.push(fetcher(_dashboardParams));
     }));
     const _results = await Promise.allSettled(_promises);
@@ -152,14 +160,25 @@ const handleChangePrivate = (id: string, value: boolean) => {
 const handleConfirm = async () => {
     dashboardCreatePageStore.setLoading(true);
     await createBundleOotb();
-    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
-    const dashboardRouteName = storeState.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE._NAME
-        : DASHBOARDS_ROUTE._NAME;
-    await router.push({
-        name: dashboardRouteName,
-    }).catch(() => {});
+    await queryClient.invalidateQueries({ queryKey: publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: privateDashboardListQueryKey.value });
+
+    if (entryPoint.value === 'ADMIN') {
+        router.push({ name: ADMIN_DASHBOARDS_ROUTE._NAME }).catch(() => {});
+    } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+        router.push({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+            },
+        }).catch(() => {});
+    } else if (entryPoint.value === 'WORKSPACE') {
+        router.push({
+            name: DASHBOARDS_ROUTE._NAME,
+        }).catch(() => {});
+    } else {
+        console.error('Invalid entry point');
+    }
 };
 
 /* Expose */
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
similarity index 67%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
rename to apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
index 34c95473d3..7f0cca9aa8 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
@@ -13,14 +13,18 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
-import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import type {
+    DashboardCreateParams, DashboardFolderModel, DashboardModel, DashboardType,
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
 import type {
     PrivateDashboardCreateParameters,
 } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -28,60 +32,45 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import DashboardCreateScopeForm from '@/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue';
-import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import DashboardCreateScopeForm from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
 } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface Props {
     isValid: boolean;
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
 }
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:is-valid', value: boolean): void
 }>();
 
 const router = useRouter();
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
 const userStore = useUserStore();
-
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-    keys,
-    api,
-} = useDashboardQuery();
 const {
-    publicFolderList,
-    privateFolderList,
-} = useDashboardFolderQuery();
-const queryClient = useQueryClient();
+    entryPoint, projectGroupOrProjectId, projectContextType,
+} = useDashboardRouteContext();
 
 const getDashboardNameList = (dashboardType: DashboardType) => {
     if (dashboardType === 'PRIVATE') {
-        return (privateDashboardList.value.filter((i) => i.version !== '1.0')).map((item) => item.name);
+        return props.dashboardItems.filter((i) => i.dashboard_id.startsWith('private')).map((item) => item.name);
     }
-    return publicDashboardList.value.filter((i) => i.version !== '1.0').map((item) => item.name);
+    return props.dashboardItems.filter((i) => i.dashboard_id.startsWith('public')).map((item) => item.name);
 };
 
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
 const state = reactive({
     proxyIsValid: useProxyValue('isValid', props, emit),
-    publicFolderItems: computed(() => {
-        if (storeState.isAdminMode) return publicFolderList.value;
-        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateFolderItems: computed(() => privateFolderList.value),
+    publicFolderItems: computed(() => props.folderItems.filter((i) => i.folder_id.startsWith('public'))),
+    privateFolderItems: computed(() => props.folderItems.filter((i) => i.folder_id.startsWith('private'))),
     dashboardNameList: computed<string[]>(() => getDashboardNameList(dashboardCreatePageGetters.dashboardType)),
     labels: [] as InputItem[],
     folderMenuItems: computed<SelectDropdownMenuItem[]>(() => {
@@ -129,11 +118,17 @@ const {
 });
 
 /* Api */
+const queryClient = useQueryClient();
+const { publicDashboardAPI } = usePublicDashboardApi();
+const { privateDashboardAPI } = usePrivateDashboardApi();
+const { key: publicDashboardListQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'list');
+const { key: privateDashboardListQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'list');
+
 const createDashboardFn = (params: DashboardCreateParams): Promise<DashboardModel> => {
     if (dashboardCreatePageState.dashboardScope === 'PRIVATE') {
-        return api.privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
+        return privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
     }
-    return api.publicDashboardAPI.create(params as PublicDashboardCreateParameters);
+    return publicDashboardAPI.create(params as PublicDashboardCreateParameters);
 };
 
 const { mutate: createDashboard } = useMutation(
@@ -142,7 +137,7 @@ const { mutate: createDashboard } = useMutation(
         onSuccess: (dashboard: DashboardModel) => {
             dashboardCreatePageStore.setDashboardCreated(true);
             const isPrivate = dashboard.dashboard_id.startsWith('private');
-            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            const dashboardListQueryKey = isPrivate ? privateDashboardListQueryKey : publicDashboardListQueryKey;
             queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
         },
         onError: (e) => {
@@ -150,13 +145,27 @@ const { mutate: createDashboard } = useMutation(
         },
         onSettled(data) {
             if (data?.dashboard_id) {
-                const dashboardDetailRouteName = storeState.isAdminMode
-                    ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-                    : DASHBOARDS_ROUTE.DETAIL._NAME;
-                router.push({
-                    name: dashboardDetailRouteName,
-                    params: { dashboardId: data.dashboard_id },
-                }).catch(() => {});
+                if (entryPoint.value === 'ADMIN') {
+                    router.push({
+                        name: ADMIN_DASHBOARDS_ROUTE._NAME,
+                        params: { dashboardId: data.dashboard_id },
+                    }).catch(() => {});
+                } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+                    router.push({
+                        name: PROJECT_ROUTE_V2._NAME,
+                        params: {
+                            projectGroupOrProjectId: projectGroupOrProjectId.value,
+                            dashboardId: data.dashboard_id,
+                        },
+                    }).catch(() => {});
+                } else if (entryPoint.value === 'WORKSPACE') {
+                    router.push({
+                        name: DASHBOARDS_ROUTE._NAME,
+                        params: { dashboardId: data.dashboard_id },
+                    }).catch(() => {});
+                } else {
+                    console.error('Invalid entry point');
+                }
             }
         },
     },
@@ -172,11 +181,19 @@ const handleConfirm = async () => {
         folder_id: state.selectedFolderId,
         vars_schema: DASHBOARD_VARS_SCHEMA_PRESET,
     };
-    if (storeState.isAdminMode) {
+
+    if (entryPoint.value === 'ADMIN') {
         (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+    } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT') {
+        (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.PROJECT;
+        (_dashboardParams as PublicDashboardCreateParameters).project_id = projectGroupOrProjectId.value;
+    } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT_GROUP') {
+        (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+        (_dashboardParams as PublicDashboardCreateParameters).project_group_id = projectGroupOrProjectId.value;
     } else if (dashboardCreatePageState.dashboardScope !== 'PRIVATE') {
         (_dashboardParams as PublicDashboardCreateParameters).resource_group = dashboardCreatePageState.dashboardScope || RESOURCE_GROUP.WORKSPACE;
     }
+
     createDashboard(_dashboardParams as DashboardCreateParams);
 };
 
@@ -225,7 +242,7 @@ defineExpose({
                               block
                 />
             </p-field-group>
-            <dashboard-create-scope-form v-if="!storeState.isAdminMode" />
+            <dashboard-create-scope-form v-if="entryPoint !== 'ADMIN' && entryPoint !== 'PROJECT'" />
             <p-field-group :label="$t('DASHBOARDS.ALL_DASHBOARDS.LOCATION')"
                            required
                            class="mt-4"
diff --git a/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts b/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
new file mode 100644
index 0000000000..acd3644150
--- /dev/null
+++ b/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
@@ -0,0 +1,60 @@
+// composables/useDashboardRouteContext.ts
+import { computed } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import { MENU_ID } from '@/lib/menu/config';
+
+type EntryPoint = 'ADMIN' | 'WORKSPACE' | 'PROJECT' | 'UNKNOWN';
+type ProjectContextType = 'PROJECT' | 'PROJECT_GROUP' | undefined;
+
+/**
+ * Provides contextual information about the current dashboard route.
+ *
+ * - `entryPoint` tells where this dashboard page is accessed from.
+ * - If `entryPoint === 'PROJECT'`, then `projectGroupOrProjectId` and `projectContextType` will be available.
+ *   (Business logic guarantees this, though they are optional in the type system.)
+ * - Use `entryPoint === 'PROJECT'` check before using project-specific fields.
+ */
+export const useDashboardRouteContext = () => {
+    const route = useRoute();
+    const appContextStore = useAppContextStore();
+
+    const isAdminMode = computed(() => appContextStore.getters.isAdminMode);
+
+    const entryPoint = computed<EntryPoint>(() => {
+        // If route is not part of DASHBOARDS, we consider it irrelevant
+        if (!route.matched.some((m) => m.meta.menuId === MENU_ID.DASHBOARDS)) return 'UNKNOWN';
+
+        // Global admin mode overrides route-level checks
+        if (isAdminMode.value) return 'ADMIN';
+
+        // Project dashboard route (nested under project-level menu)
+        if (route.matched.some((m) => m.meta.menuId === MENU_ID.PROJECT)) return 'PROJECT';
+
+        // Default workspace dashboard
+        return 'WORKSPACE';
+    });
+
+    const projectGroupOrProjectId = computed(() => {
+        if (entryPoint.value !== 'PROJECT') return undefined;
+        const id = route.params.projectGroupOrProjectId;
+        return typeof id === 'string' ? id : undefined;
+    });
+
+    const projectContextType = computed<ProjectContextType>(() => {
+        const id = projectGroupOrProjectId.value;
+        if (!id) return undefined;
+        if (id.startsWith('pg-')) return 'PROJECT_GROUP';
+        if (id.startsWith('project-')) return 'PROJECT';
+        return undefined;
+    });
+
+    return {
+        entryPoint,
+        isAdminMode,
+        projectGroupOrProjectId,
+        projectContextType,
+    };
+};
diff --git a/apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts b/apps/web/src/services/dashboard-shared/stores/dashboard-create-page-store.ts
similarity index 100%
rename from apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts
rename to apps/web/src/services/dashboard-shared/stores/dashboard-create-page-store.ts

From bfe8d588a020b9c3594b54867a3393299aeb6c5b Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 15:42:49 +0900
Subject: [PATCH 03/18] fix(dashboard-create-page): apply dashboard-shared

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../dashboards/pages/DashboardCreatePage.vue  | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue b/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
index beb5c8a418..17f2ff5ef0 100644
--- a/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
@@ -28,6 +28,7 @@ import {
     PCenteredLayoutHeader,
 } from '@cloudforet/mirinae';
 
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -35,11 +36,14 @@ import { useAppContextStore } from '@/store/app-context/app-context-store';
 import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
 import { useGoBack } from '@/common/composables/go-back';
 
-import DashboardCreateStep1 from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue';
-import DashboardCreateStep2 from '@/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue';
+import DashboardCreateStep1 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue';
+import DashboardCreateStep2 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
+
 
 
 interface Step {
@@ -52,6 +56,34 @@ const dashboardCreatePageState = dashboardCreatePageStore.state;
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
+
+
+const dashboardState = reactive({
+    publicDashboardItems: computed<Array<DashboardModel>>(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed<Array<DashboardModel>>(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed<Array<DashboardModel>>(() => [...dashboardState.publicDashboardItems, ...dashboardState.privateDashboardItems]),
+    publicFolderItems: computed<Array<DashboardFolderModel>>(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed<Array<DashboardFolderModel>>(() => privateFolderList.value),
+    allDashboardFolderItems: computed<Array<DashboardFolderModel>>(() => [...dashboardState.publicFolderItems, ...dashboardState.privateFolderItems]),
+});
+
 const state = reactive({
     loading: false,
     steps: computed<Step[]>(() => [
@@ -99,10 +131,13 @@ onUnmounted(() => {
                                   @close="handleClickClose"
         />
         <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
+                                :dashboard-items="dashboardState.allDashboardItems"
                                 @click-next="handleClickNext"
         />
         <template v-else-if="dashboardCreatePageState.currentStep === 2">
-            <dashboard-create-step2 />
+            <dashboard-create-step2 :dashboard-items="dashboardState.allDashboardItems"
+                                    :folder-items="dashboardState.allDashboardFolderItems"
+            />
         </template>
         <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
                             @confirm="handleClickBackButton"

From 40f9590dfa8af2adda393d425c1adab1d9fd63ad Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 15:45:08 +0900
Subject: [PATCH 04/18] chore: apply change model to dashboard schema

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 apps/web/src/api-clients/dashboard/_types/dashboard-type.ts   | 4 ++++
 .../dashboard/public-dashboard/schema/api-verbs/create.ts     | 1 +
 .../dashboard/public-dashboard/schema/api-verbs/list.ts       | 1 +
 .../api-clients/dashboard/public-dashboard/schema/model.ts    | 1 +
 .../dashboard/public-folder/schema/api-verbs/create.ts        | 1 +
 .../dashboard/public-folder/schema/api-verbs/list.ts          | 1 +
 .../src/api-clients/dashboard/public-folder/schema/model.ts   | 1 +
 7 files changed, 10 insertions(+)

diff --git a/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts b/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
index c3f990a0f2..2bef51f950 100644
--- a/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
+++ b/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
@@ -13,6 +13,7 @@ import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/priv
 import type { PrivateDashboardListParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/list';
 import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
 import type { PublicDashboardChangeFolderParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
 import type { PublicDashboardDeleteParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/delete';
@@ -20,16 +21,19 @@ import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/publi
 import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
 import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 
 import type { VariableModelType } from '@/lib/variable-models';
 import type { Value } from '@/lib/variable-models/_base/types';
 
+
 export type DashboardType = typeof DASHBOARD_TYPE[keyof typeof DASHBOARD_TYPE];
 export type DashboardFolderType = 'PUBLIC'|'PRIVATE';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 export type DashboardModel = PublicDashboardModel | PrivateDashboardModel;
+export type DashboardFolderModel = PublicFolderModel | PrivateFolderModel;
 export type DashboardCreateParams = PublicDashboardCreateParameters | PrivateDashboardCreateParameters;
 export type DashboardChangeFolderParams = PublicDashboardChangeFolderParameters | PrivateDashboardChangeFolderParameters;
 export type DashboardListParams = PublicDashboardListParameters | PrivateDashboardListParameters;
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
index fe5c4718e0..d615baf0a9 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
@@ -24,4 +24,5 @@ export interface PublicDashboardCreateParameters {
     workspace_id?: string;
     resource_group: Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'PROJECT'>;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
index 02105bb824..3987bb3b5f 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
@@ -7,4 +7,5 @@ export interface PublicDashboardListParameters {
     name?: string;
     workspace_id?: string;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
index 5ae600ff6d..dc48203ef7 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
@@ -30,6 +30,7 @@ export interface PublicDashboardModel {
     folder_id: string;
     resource_group: Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'PROJECT'>;
     project_id: string;
+    project_group_id: string;
     workspace_id: string;
     domain_id: string;
     created_at: string;
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
index 76d46dcf06..65848de62e 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
@@ -9,4 +9,5 @@ export interface PublicFolderCreateParameters {
     dashboards?: string[];
     workspace_id?: string;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
index 5e48ae7302..69bf18aae1 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
@@ -7,4 +7,5 @@ export interface PublicFolderListParameters {
     name?: string;
     workspace_id?: string;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
index 424b1471ea..97a58f9209 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
@@ -10,6 +10,7 @@ export interface PublicFolderModel {
     tags: Tags;
     resource_group: Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'PROJECT'>;
     project_id: string;
+    project_group_id: string;
     workspace_id: string;
     domain_id: string;
     created_at: string;

From ae031dd70c77b88b061d35a542981b6a8f9a0efd Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 16:30:11 +0900
Subject: [PATCH 05/18] fix(dashboard-shared): apply project entry context to
 create step2

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../DashboardCreateStep2SingleCase.vue          | 17 +++++++++++++++++
 .../composables/use-dashboard-route-context.ts  |  8 ++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
index 7f0cca9aa8..f9f064e448 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
+++ b/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
@@ -87,6 +87,23 @@ const state = reactive({
                 })),
             ];
         }
+        if (entryPoint.value === 'PROJECT') {
+            return [
+                defaultItem,
+                ...state.publicFolderItems.filter((folder) => {
+                    if (projectContextType.value === 'PROJECT') {
+                        return folder.project_id === projectGroupOrProjectId.value;
+                    }
+                    if (projectContextType.value === 'PROJECT_GROUP') {
+                        return folder.project_group_id === projectGroupOrProjectId.value;
+                    }
+                    return false;
+                }).map((folder) => ({
+                    label: folder.name,
+                    name: folder.folder_id,
+                })),
+            ];
+        }
         return [
             defaultItem,
             ...state.publicFolderItems.map((folder) => ({
diff --git a/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts b/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
index acd3644150..1f47623d60 100644
--- a/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
+++ b/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
@@ -24,17 +24,13 @@ export const useDashboardRouteContext = () => {
     const isAdminMode = computed(() => appContextStore.getters.isAdminMode);
 
     const entryPoint = computed<EntryPoint>(() => {
-        // If route is not part of DASHBOARDS, we consider it irrelevant
-        if (!route.matched.some((m) => m.meta.menuId === MENU_ID.DASHBOARDS)) return 'UNKNOWN';
-
         // Global admin mode overrides route-level checks
         if (isAdminMode.value) return 'ADMIN';
 
         // Project dashboard route (nested under project-level menu)
         if (route.matched.some((m) => m.meta.menuId === MENU_ID.PROJECT)) return 'PROJECT';
-
-        // Default workspace dashboard
-        return 'WORKSPACE';
+        if (route.matched.some((m) => m.meta.menuId === MENU_ID.DASHBOARDS)) return 'WORKSPACE';
+        return 'UNKNOWN';
     });
 
     const projectGroupOrProjectId = computed(() => {

From 5e933828ed7fad81811147e27f97271301a3b266 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 18:57:38 +0900
Subject: [PATCH 06/18] feat(dashboard-shared): separate dashboard detail from
 dashboard detail page

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../dashboard-detail/DashboardDetailBody.vue  | 247 ++++++++++++++++++
 .../dashboards/pages/DashboardDetailPage.vue  | 159 +----------
 2 files changed, 250 insertions(+), 156 deletions(-)
 create mode 100644 apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue

diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue
new file mode 100644
index 0000000000..1025854ac7
--- /dev/null
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue
@@ -0,0 +1,247 @@
+<script lang="ts" setup>
+import {
+    computed, ref, watch, onUnmounted,
+} from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
+import DashboardToolsetScope from '@/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue';
+import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
+import DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
+import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
+import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
+import DashboardRefreshDropdown from '@/services/dashboards/shared/components/DashboardRefreshDropdown.vue';
+import DashboardToolsetDateDropdown from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
+import DashboardVariablesV2 from '@/services/dashboards/shared/components/DashboardVariablesV2.vue';
+import DashboardWidgetContainerV2 from '@/services/dashboards/shared/components/DashboardWidgetContainerV2.vue';
+import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+interface Props {
+    dashboardId: string;
+}
+
+const props = defineProps<Props>();
+const router = useRouter();
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const widgetGenerateStore = useWidgetGenerateStore();
+const widgetContainerRef = ref<typeof DashboardWidgetContainer|typeof DashboardWidgetContainerV2|null>(null);
+
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => props.dashboardId),
+});
+const {
+    entryPoint, projectGroupOrProjectId,
+} = useDashboardRouteContext();
+
+/* Query */
+const queryClient = useQueryClient();
+const {
+    dashboard,
+    isError: dashboardError,
+    isLoading: dashboardLoading,
+    keys: dashboardKeys,
+    fetcher: dashboardFetcher,
+} = useDashboardGetQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const {
+    widgetList,
+    isLoading: widgetLoading,
+    isError: widgetError,
+    keys: widgetListKeys,
+} = useDashboardWidgetListQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+
+const isDeprecatedDashboard = computed(() => dashboard.value?.version === '1.0');
+
+
+const handleRefresh = async () => {
+    if (dashboard.value?.version !== '1.0') {
+        const isPrivate = props.dashboardId.startsWith('private');
+        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
+        await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
+};
+const handleUpdateDashboardVariables = (params) => {
+    updateDashboard({
+        dashboard_id: props.dashboardId,
+        ...params,
+    });
+};
+
+
+const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation(
+    {
+        mutationFn: dashboardFetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel | PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
+            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
+                if (!oldDashboard) return _dashboard;
+                return {
+                    ...oldDashboard,
+                    vars: { ..._dashboard.vars },
+                };
+            });
+        },
+        onError: (e) => {
+            showErrorMessage(e.message, e);
+            ErrorHandler.handleError(e);
+        },
+    },
+);
+
+
+watch(dashboard, (_dashboard) => {
+    if (_dashboard) {
+        dashboardDetailStore.reset();
+        if (isDeprecatedDashboard.value) {
+            dashboardDetailStore.setDashboardInfoStoreState(_dashboard);
+        } else {
+            dashboardDetailStore.setDashboardInfoStoreStateV2(_dashboard);
+        }
+    }
+}, { immediate: true });
+watch(widgetList, (_widgetList) => {
+    if (_widgetList.length) {
+        dashboardDetailStore.setDashboardWidgets(_widgetList);
+    }
+});
+watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
+    if (_dashboardError || _widgetError) {
+        ErrorHandler.handleError(_dashboardError || _widgetError);
+        if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+            router.push({
+                name: PROJECT_ROUTE_V2._NAME,
+                params: {
+                    projectGroupOrProjectId: projectGroupOrProjectId.value,
+                },
+            });
+        } else if (entryPoint.value === 'WORKSPACE') {
+            router.push({
+                name: DASHBOARDS_ROUTE._NAME,
+            });
+        } else if (entryPoint.value === 'ADMIN') {
+            router.push({
+                name: ADMIN_DASHBOARDS_ROUTE._NAME,
+            });
+        } else {
+            console.error('Invalid entry point');
+        }
+    }
+});
+
+
+onUnmounted(() => {
+    // gnbStore.setBreadcrumbs([]);
+    // Reset Dashboard Detail Custom breadcrumbs
+    dashboardDetailStore.reset();
+    widgetGenerateStore.reset();
+});
+</script>
+
+<template>
+    <div class="dashboard-detail-body">
+        <div class="fixed-header">
+            <div class="filter-box">
+                <div class="left-part">
+                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
+                    <dashboard-toolset-scope v-if="entryPoint === 'ADMIN'" />
+                </div>
+                <div class="right-part">
+                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
+                                                :loading="dashboardLoading || widgetLoading || dashboardUpdateLoading"
+                                                @refresh="handleRefresh"
+                    />
+                </div>
+            </div>
+            <div v-if="!dashboardUpdateLoading"
+                 class="dashboard-selectors"
+            >
+                <dashboard-variables v-if="isDeprecatedDashboard"
+                                     class="variable-selector-wrapper"
+                                     :loading="dashboardUpdateLoading"
+                                     @update="handleUpdateDashboardVariables"
+                />
+                <dashboard-variables-v2 v-else
+                                        class="variable-selector-wrapper"
+                                        :disable-save-button="!isManageable"
+                                        :loading="dashboardUpdateLoading"
+                                        @update="handleUpdateDashboardVariables"
+                />
+            </div>
+        </div>
+
+        <div class="widget-container-body">
+            <dashboard-widget-container v-if="isDeprecatedDashboard"
+                                        ref="widgetContainerRef"
+            />
+            <dashboard-widget-container-v2 v-else
+                                           ref="widgetContainerRef"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-detail-body {
+    .fixed-header {
+        @apply sticky bg-gray-100;
+        z-index: 20;
+        top: 0;
+        padding-top: 1rem;
+
+        .filter-box {
+            @apply flex justify-between items-start mb-4;
+            flex-wrap: wrap;
+            row-gap: 0.25rem;
+
+            .left-part {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                column-gap: 1rem;
+            }
+
+            .right-part {
+                display: flex;
+                flex-wrap: wrap;
+                flex-shrink: 0;
+            }
+        }
+
+        .dashboard-selectors {
+            padding-bottom: 0.75rem;
+
+            .variable-selector-wrapper {
+                @apply relative flex items-center flex-wrap;
+                gap: 0.5rem;
+                padding-right: 1rem;
+            }
+        }
+    }
+
+    .widget-container-body {
+        padding-top: 0.75rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
index 71de029ab1..dbe6ce31a1 100644
--- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -1,44 +1,21 @@
 <script setup lang="ts">
 import {
     computed,
-    onUnmounted, reactive, ref, watch,
+    onUnmounted, reactive, watch,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PDivider, PI,
 } from '@cloudforet/mirinae';
 
-import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
-import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-
-import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
-
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 
+import DashboardDetailBody from '@/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue';
 import DashboardDetailHeader from '@/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue';
-import DashboardToolsetScope from '@/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue';
-import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
-import DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
-import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
-import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import DashboardRefreshDropdown from '@/services/dashboards/shared/components/DashboardRefreshDropdown.vue';
-import DashboardToolsetDateDropdown from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/shared/components/DashboardVariablesV2.vue';
-import DashboardWidgetContainerV2 from '@/services/dashboards/shared/components/DashboardWidgetContainerV2.vue';
 import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
 
 interface Props {
     dashboardId: string;
@@ -46,41 +23,16 @@ interface Props {
 const props = defineProps<Props>();
 
 const gnbStore = useGnbStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const widgetGenerateStore = useWidgetGenerateStore();
 const { breadcrumbs } = useBreadcrumbs();
 
-const appContextStore = useAppContextStore();
-const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
-const router = useRouter();
-
 /* Query */
 const {
     dashboard,
-    isError: dashboardError,
-    isLoading: dashboardLoading,
-    keys: dashboardKeys,
-    fetcher: dashboardFetcher,
 } = useDashboardGetQuery({
     dashboardId: computed(() => props.dashboardId),
 });
-const {
-    widgetList,
-    isLoading: widgetLoading,
-    isError: widgetError,
-    keys: widgetListKeys,
-} = useDashboardWidgetListQuery({
-    dashboardId: computed(() => props.dashboardId),
-});
-
-const queryClient = useQueryClient();
-const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => props.dashboardId),
-});
 
 const state = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     favoriteOptions: computed<FavoriteOptions>(() => ({
         type: FAVORITE_TYPE.DASHBOARD,
         id: props.dashboardId,
@@ -88,47 +40,6 @@ const state = reactive({
     isDeprecatedDashboard: computed(() => dashboard.value?.version === '1.0'),
 });
 
-/* Event */
-const handleRefresh = async () => {
-    if (dashboard.value?.version !== '1.0') {
-        const isPrivate = props.dashboardId.startsWith('private');
-        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
-        await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
-};
-const handleUpdateDashboardVariables = (params) => {
-    updateDashboard({
-        dashboard_id: props.dashboardId,
-        ...params,
-    });
-};
-
-
-const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation(
-    {
-        mutationFn: dashboardFetcher.updateDashboardFn,
-        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
-            const isPrivate = _dashboard.dashboard_id.startsWith('private');
-            const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
-            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
-                if (!oldDashboard) return _dashboard;
-                return {
-                    ...oldDashboard,
-                    vars: { ..._dashboard.vars },
-                };
-            });
-        },
-        onError: (e) => {
-            showErrorMessage(e.message, e);
-            ErrorHandler.handleError(e);
-        },
-    },
-);
-
-
 watch(() => props.dashboardId, async (dashboardId) => {
     // Set Dashboard Detail Custom breadcrumbs
     if (dashboardId) { // this includes all three cases
@@ -136,38 +47,12 @@ watch(() => props.dashboardId, async (dashboardId) => {
     }
 }, { immediate: true });
 
-watch(dashboard, (_dashboard) => {
-    if (_dashboard) {
-        dashboardDetailStore.reset();
-        if (state.isDeprecatedDashboard) {
-            dashboardDetailStore.setDashboardInfoStoreState(_dashboard);
-        } else {
-            dashboardDetailStore.setDashboardInfoStoreStateV2(_dashboard);
-        }
-    }
-}, { immediate: true });
-watch(widgetList, (_widgetList) => {
-    if (_widgetList.length) {
-        dashboardDetailStore.setDashboardWidgets(_widgetList);
-    }
-});
-watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
-    if (_dashboardError || _widgetError) {
-        ErrorHandler.handleError(_dashboardError || _widgetError);
-        const dashboardRouteName = state.isAdminMode ? ADMIN_DASHBOARDS_ROUTE._NAME : DASHBOARDS_ROUTE._NAME;
-        router.push({ name: dashboardRouteName });
-    }
-});
-
 watch(() => state.favoriteOptions, (favoriteOptions) => {
     gnbStore.setFavoriteItemId(favoriteOptions);
 }, { immediate: true });
 
 onUnmounted(() => {
     gnbStore.setBreadcrumbs([]);
-    // Reset Dashboard Detail Custom breadcrumbs
-    dashboardDetailStore.reset();
-    widgetGenerateStore.reset();
 });
 </script>
 
@@ -193,45 +78,7 @@ onUnmounted(() => {
         </div>
         <dashboard-detail-header :dashboard-id="props.dashboardId" />
         <p-divider class="divider" />
-        <div class="fixed-header">
-            <div class="filter-box">
-                <div class="left-part">
-                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
-                    <dashboard-toolset-scope v-if="state.isAdminMode" />
-                </div>
-                <div class="right-part">
-                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardLoading || widgetLoading || dashboardUpdateLoading"
-                                                @refresh="handleRefresh"
-                    />
-                </div>
-            </div>
-            <div v-if="!dashboardUpdateLoading"
-                 class="dashboard-selectors"
-            >
-                <dashboard-variables v-if="state.isDeprecatedDashboard"
-                                     class="variable-selector-wrapper"
-                                     :loading="dashboardUpdateLoading"
-                                     @update="handleUpdateDashboardVariables"
-                />
-                <dashboard-variables-v2 v-else
-                                        class="variable-selector-wrapper"
-                                        :disable-save-button="!isManageable"
-                                        :loading="dashboardUpdateLoading"
-                                        @update="handleUpdateDashboardVariables"
-                />
-            </div>
-        </div>
-        <div />
-
-        <div class="widget-container-body">
-            <dashboard-widget-container v-if="state.isDeprecatedDashboard"
-                                        ref="widgetContainerRef"
-            />
-            <dashboard-widget-container-v2 v-else
-                                           ref="widgetContainerRef"
-            />
-        </div>
+        <dashboard-detail-body :dashboard-id="props.dashboardId" />
     </div>
 </template>
 

From 3aa9648b7548f683b9936f8fd0a4395cab598827 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 18:59:52 +0900
Subject: [PATCH 07/18] feat(dashboard-shared): remove dashboards service
 context from dashboard components

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../DashboardManageVariableImportModal.vue    | 10 ++--
 .../DashboardManageVariableOverlay.vue        | 52 +++++++++++++-----
 .../DashboardVariablesFormDynamic.vue         | 10 ++--
 .../DashboardVariablesFormModal.vue           |  5 +-
 .../DashboardVariablesMoreButton.vue          | 53 +++++++++++++------
 .../components/DashboardVariablesV2.vue       | 18 ++++---
 6 files changed, 100 insertions(+), 48 deletions(-)

diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
index 2eacf4f7d1..5db778f6b1 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
@@ -23,6 +22,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
 
+// import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
 import DashboardManageVariableImportModalTree
     from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue';
 import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
@@ -33,14 +33,16 @@ import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/u
 
 interface Props {
     visible: boolean;
+    dashboardId: string;
 }
 const appContextStore = useAppContextStore();
 const userStore = useUserStore();
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;}>();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
-
+const dashboardId = computed(() => props.dashboardId);
+// const {
+//     entryPoint,
+// } = useDashboardRouteContext();
 
 /* Query */
 const {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
index 4108f0c371..b55bb7e7cf 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
@@ -19,7 +19,6 @@ import type {
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -27,6 +26,7 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
 import DashboardManageVariableImportModal
     from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue';
 import DashboardVariablesFormModal
@@ -38,6 +38,7 @@ import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboa
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 
 
@@ -52,13 +53,16 @@ interface GlobalVariableTableItem {
 }
 interface Props {
     visible: boolean;
+    dashboardId: string;
 }
 const props = defineProps<Props>();
 const userStore = useUserStore();
-const appContextStore = useAppContextStore();
 const router = useRouter();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
+const {
+    entryPoint,
+    projectGroupOrProjectId,
+} = useDashboardRouteContext();
 
 /* Query */
 const {
@@ -73,7 +77,6 @@ const queryClient = useQueryClient();
 
 
 const state = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     selectedVariableKey: undefined as string|undefined,
     modalType: 'CREATE' as 'CREATE'|'UPDATE',
     formModalVisible: false,
@@ -239,13 +242,31 @@ const handleToggleUse = (variableKey: string, val: boolean) => {
     updateUseDashboardVarsSchema(dashboardId.value, variableKey, val);
 };
 const handleCloseOverlay = () => {
-    const dashboardDetailRouteName = state.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-        : DASHBOARDS_ROUTE.DETAIL._NAME;
-    router.replace({
-        name: dashboardDetailRouteName,
-        params: { dashboardId: dashboardId.value ?? '' },
-    }).catch(() => {});
+    if (entryPoint.value === 'ADMIN') {
+        router.replace({
+            name: ADMIN_DASHBOARDS_ROUTE._NAME,
+            params: {
+                dashboardId: dashboardId.value,
+            },
+        }).catch(() => {});
+    } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+        router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+                dashboardId: dashboardId.value,
+            },
+        }).catch(() => {});
+    } else if (entryPoint.value === 'WORKSPACE') {
+        router.replace({
+            name: DASHBOARDS_ROUTE._NAME,
+            params: {
+                dashboardId: dashboardId.value,
+            },
+        }).catch(() => {});
+    } else {
+        console.error('Invalid entry point');
+    }
 };
 const handleConfirmDelete = () => {
     if (!dashboardId.value || !state.selectedVariableKey) return;
@@ -327,6 +348,7 @@ const handleConfirmDelete = () => {
         <dashboard-variables-form-modal :modal-type="state.modalType"
                                         :variable-key="state.selectedVariableKey"
                                         :visible.sync="state.formModalVisible"
+                                        :dashboard-id="dashboardId"
         />
         <delete-modal :header-title="$t('DASHBOARDS.DETAIL.VARIABLES.DELETE_MODAL_TITLE')"
                       :visible.sync="state.deleteModalVisible"
@@ -344,7 +366,9 @@ const handleConfirmDelete = () => {
                 </p-scoped-notification>
             </template>
         </delete-modal>
-        <dashboard-manage-variable-import-modal :visible.sync="state.importModalVisible" />
+        <dashboard-manage-variable-import-modal :visible.sync="state.importModalVisible"
+                                                :dashboard-id="dashboardId"
+        />
     </p-overlay-layout>
 </template>
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
index da21e38ba0..55b61ba150 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
@@ -11,7 +11,6 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
@@ -28,6 +27,7 @@ import {
 } from '@/common/composables/data-source/use-cost-data-source-filter-menu-items';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
 import {
     DASHBOARD_GLOBAL_VARIABLES_PRESET_LIST,
 } from '@/services/dashboards/constants/dashboard-global-variable-preset';
@@ -51,13 +51,13 @@ const emit = defineEmits<{(e: 'update:is-valid', isValid: boolean): void;
     (e: 'update:data', data: DynamicVariableData): void;
 }>();
 
-const appContextStore = useAppContextStore();
 const allReferenceStore = useAllReferenceStore();
-
+const {
+    isAdminMode,
+} = useDashboardRouteContext();
 const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
 
 const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     namespaces: computed<NamespaceReferenceMap>(() => allReferenceStore.getters.namespace),
     providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
     metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
@@ -201,7 +201,7 @@ const state = reactive({
     selectedCostDataSourceMenuItem: computed<MenuItem[]>(() => state.costDataSourceMenuItems.filter((d) => d.name === state.selectedCostDataSourceId)),
 });
 const { allItems: costDataSourceFilterMenuItems } = useCostDataSourceFilterMenuItems({
-    isAdminMode: computed(() => storeState.isAdminMode),
+    isAdminMode,
     costDataSource: computed(() => storeState.costDataSources[state.selectedCostDataSourceId]),
 });
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
index 8adf7a6d67..59d095c266 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, isEmpty } from 'lodash';
@@ -40,6 +39,7 @@ interface Props {
     visible: boolean;
     modalType: 'CREATE'|'UPDATE';
     variableKey?: string;
+    dashboardId: string;
 }
 const props = withDefaults(defineProps<Props>(), {
     visible: false,
@@ -47,10 +47,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
+const dashboardId = computed(() => props.dashboardId);
 
 const userStore = useUserStore();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
index a83547d3c3..c3821d9191 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
@@ -4,7 +4,7 @@ import {
     computed,
     reactive, ref, toRef, toRefs, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import {
@@ -21,32 +21,35 @@ import type {
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
 import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface VariableMenuItem extends MenuItem {
     use?: boolean;
 }
 interface Props {
+    dashboardId: string;
     isManageable?: boolean;
     disabled?: boolean;
     widgetMode?: boolean;
 }
 
 const props = defineProps<Props>();
-const appContextStore = useAppContextStore();
 const router = useRouter();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
+const {
+    entryPoint,
+    projectGroupOrProjectId,
+} = useDashboardRouteContext();
 
 /* Query */
 const {
@@ -58,7 +61,6 @@ const {
 });
 const queryClient = useQueryClient();
 const state = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     targetRef: null as HTMLElement | null,
     contextMenuRef: null as any | null,
     searchText: '',
@@ -150,14 +152,35 @@ const { mutate, isPending: loading } = useMutation(
 /* Event */
 const handleOpenOverlay = () => {
     hideContextMenu();
-    const dashboardDetailRouteName = state.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-        : DASHBOARDS_ROUTE.DETAIL._NAME;
-    router.push({
-        name: dashboardDetailRouteName,
-        params: { dashboardId: dashboardId.value ?? '' },
-        hash: `#${MANAGE_VARIABLES_HASH_NAME}`,
-    }).catch(() => {});
+
+    if (entryPoint.value === 'ADMIN') {
+        router.push({
+            name: ADMIN_DASHBOARDS_ROUTE._NAME,
+            params: {
+                dashboardId: dashboardId.value,
+            },
+            hash: `#${MANAGE_VARIABLES_HASH_NAME}`,
+        }).catch(() => {});
+    } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+        router.push({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+                dashboardId: dashboardId.value,
+            },
+            hash: `#${MANAGE_VARIABLES_HASH_NAME}`,
+        }).catch(() => {});
+    } else if (entryPoint.value === 'WORKSPACE') {
+        router.push({
+            name: DASHBOARDS_ROUTE._NAME,
+            params: {
+                dashboardId: dashboardId.value,
+            },
+            hash: `#${MANAGE_VARIABLES_HASH_NAME}`,
+        }).catch(() => {});
+    } else {
+        console.error('Invalid entry point');
+    }
 };
 const handleClickButton = () => {
     if (visibleMenu.value) hideContextMenu();
diff --git a/apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue b/apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue
index 3776da0abf..1708234bc6 100644
--- a/apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue
+++ b/apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue
@@ -9,10 +9,10 @@ import { PI, PTextButton, PDivider } from '@cloudforet/mirinae';
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import type { DashboardGlobalVariableSchemaProperties, DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ChangedMark from '@/common/components/marks/ChangedMark.vue';
 
+import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
 import DashboardGlobalVariableFilter
     from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue';
 import DashboardManageVariableOverlay from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue';
@@ -44,13 +44,14 @@ const dashboardId = computed(() => route.params.dashboardId);
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
-const appContextStore = useAppContextStore();
 const { dashboard } = useDashboardGetQuery({
     dashboardId,
 });
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
+
+const {
+    entryPoint,
+} = useDashboardRouteContext();
+
 const state = reactive({
     showOverlay: computed(() => route.hash === `#${MANAGE_VARIABLES_HASH_NAME}`),
     dashboardVarsSchemaProperties: computed<DashboardGlobalVariableSchemaProperties>(() => dashboard.value?.vars_schema?.properties ?? {}),
@@ -77,7 +78,7 @@ const state = reactive({
     }),
     showSaveButton: computed<boolean>(() => !props.disableSaveButton && state.modifiedVariablesSchemaProperties.length > 0),
     notChanged: computed(() => state.modifiedVariablesSchemaProperties.length === 0),
-    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared && !storeState.isAdminMode),
+    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared && entryPoint.value !== 'ADMIN'),
 });
 
 const handleClickSaveButton = () => {
@@ -135,9 +136,12 @@ watch([() => state.tempVars, dashboard], ([_tempVars]) => {
         </p-text-button>
         <dashboard-variables-more-button v-if="!state.isSharedDashboard"
                                          :widget-mode="props.widgetMode"
+                                         :dashboard-id="dashboardId"
         />
         <portal to="dashboard-detail-page">
-            <dashboard-manage-variable-overlay :visible="state.showOverlay" />
+            <dashboard-manage-variable-overlay :visible="state.showOverlay"
+                                               :dashboard-id="dashboardId"
+            />
         </portal>
     </div>
 </template>

From df84c90f864526586457d49e8a28abb3c790d325 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= <samuel.park@mz.co.kr>
Date: Thu, 10 Apr 2025 00:29:59 +0900
Subject: [PATCH 08/18] feat(dashboard-shared): separate dashboard shared
 component from dashboard service

Signed-off-by: piggggggggy <samuel.park@mz.co.kr>
---
 .../_types/dashboard-global-variable-type.ts  |   2 +-
 .../WidgetFormDataSourcePopover.vue           |   4 +-
 .../WidgetFormDataTableCardFiltersItem.vue    |   4 +-
 ...dgetFormDataTableCardTransformContents.vue |   2 +-
 ...tFormDataTableGlobalVariableViewButton.vue |   4 +-
 .../WidgetFormOverlayPreviewTable.vue         |   2 +-
 .../_components/WidgetFormOverlayStep2.vue    |  11 +-
 .../widget-chart-data-helper.test.ts          |   2 +-
 .../widget-inherit-options-helper.test.ts     |   2 +-
 .../widget-options-filters-helper.test.ts     |   2 +-
 .../__tests__/widget-schema-helper.test.ts    |   2 +-
 .../widget-value-label-helper.test.ts         |   2 +-
 .../date-range/WidgetFieldDateRange.vue       |   2 +-
 .../use-dashboard-route-context.ts            |   0
 .../dashboard-create/DashboardCreateBody.vue  | 151 +++++++++
 .../DashboardCreateBlankBoardItem.vue         |   2 +-
 .../components}/DashboardCreateScopeForm.vue  |   2 +-
 .../components}/DashboardCreateStep1.vue      |  10 +-
 .../DashboardCreateStep1SearchFilter.vue      |   2 +-
 .../components}/DashboardCreateStep2.vue      |   6 +-
 .../DashboardCreateStep2BundleCase.vue        |   6 +-
 .../DashboardCreateStep2SingleCase.vue        |   8 +-
 .../constants/dashboard-labels.ts             |   0
 .../stores/dashboard-create-page-store.ts     |   0
 .../dashboard-detail/DashboardDetailBody.vue  |  75 ++++-
 .../DashboardGlobalVariableFilter.vue         |  10 +-
 .../DashboardGlobalVariableFilterEnum.vue     |   2 +-
 ...shboardGlobalVariableFilterNumberInput.vue |   2 +-
 ...hboardGlobalVariableFilterNumberSlider.vue |   2 +-
 ...DashboardGlobalVariableFilterReference.vue |   2 +-
 ...DashboardGlobalVariableFilterTextInput.vue |   2 +-
 .../components}/DashboardLabels.vue           |   8 +-
 .../components/DashboardLabelsButton.vue      |   5 +-
 .../DashboardManageVariableImportModal.vue    | 292 ++++++++++++++++
 ...DashboardManageVariableImportModalTree.vue |   0
 .../DashboardManageVariableOverlay.vue        |  24 +-
 .../components/DashboardRefreshDropdown.vue   |   4 +-
 .../components}/DashboardReorderSidebar.vue   |  15 +-
 .../DashboardToolsetDateCustomModal.vue       |   0
 .../DashboardToolsetDateDropdown.vue          |   7 +-
 .../components}/DashboardToolsetScope.vue     |   2 +-
 .../DashboardVariablesFormDynamic.vue         |   4 +-
 .../DashboardVariablesFormManual.vue          |   0
 .../DashboardVariablesFormModal.vue           |   6 +-
 .../DashboardVariablesMoreButton.vue          |  12 +-
 .../components/DashboardVariablesV2.vue       |  34 +-
 .../components/DashboardWidgetContainerV2.vue |  25 +-
 .../use-dashboard-container-width.ts          |   2 +-
 .../composables/use-dashboard-get-query.ts    |   0
 .../use-dashboard-widget-list-query.ts        |   0
 .../use-reformed-widget-info-list.ts          |  10 +-
 .../dashboard-global-variable-preset.ts       |   0
 .../constants/dashboard-global-variable.ts    |   0
 .../dashboard-managed-variables-schema.ts     |   0
 .../constants/dashboard-vars-schema-preset.ts |   0
 .../manage-variable-overlay-constant.ts       |   0
 .../constants/widget-container-config.ts      |   2 +-
 .../helpers/__tests__/widget-width-helper.md  |   0
 .../__tests__/widget-width-helper.test.ts     |   4 +-
 .../dashboard-global-variables-helper.ts      |   2 +-
 .../helpers/dashboard-widget-info-helper.ts   |   6 +-
 .../helpers/widget-theme-helper.ts            |   4 +-
 .../helpers/widget-width-helper.ts            |   2 +-
 .../legacy/DashboardManageVariableForm.vue    |   2 +-
 .../DashboardManageVariableOptionsField.vue   |   0
 .../legacy/DashboardVariableDropdown.vue      |   2 +-
 .../legacy/DashboardVariables.vue             |   6 +-
 .../legacy/DashboardWidgetContainer.vue       |  25 +-
 .../legacy/WidgetFullModeModal.vue            |  20 +-
 .../BaseCountOfFindingsWidget.vue             |  16 +-
 .../base-count-of-findings/widget-config.ts   |   0
 .../_base-widgets/base-pie/BasePieWidget.vue  |  26 +-
 .../_base-widgets/base-pie/widget-config.ts   |   0
 .../base-trend/BaseTrendWidget.vue            |  26 +-
 .../_base-widgets/base-trend/widget-config.ts |   0
 .../_components/WidgetChartNoDataOverlay.vue  |   0
 .../widgets/_components/WidgetDataTable.vue   |   6 +-
 .../widgets/_components/WidgetFrame.vue       |   2 +-
 .../_composables/use-widget-color-set.ts      |   4 +-
 .../_composables/use-widget-lifecycle.ts      |   6 +-
 .../_composables/use-widget-pagination.ts     |   2 +-
 .../use-widget/merge-base-widget-state.ts     |  10 +-
 .../use-widget/use-base-widget-state.ts       |   6 +-
 .../use-widget/use-widget-console-filters.ts  |   6 +-
 .../use-widget/use-widget-date-range.ts       |   6 +-
 .../use-widget/use-widget-frame.ts            |   6 +-
 .../use-widget/use-widget-location.ts         |   8 +-
 .../_composables/use-widget/use-widget.ts     |  14 +-
 .../widgets/_constants/compliance-constant.ts |   0
 .../managed-widget-options-schema.ts          |   0
 .../_constants/widget-components-constant.ts  |  63 ++++
 .../_constants/widget-config-list-constant.ts |  87 +++++
 .../widgets/_constants/widget-constant.ts     |   0
 .../widget-chart-data-helper.test.ts          |   2 +-
 .../__tests__/widget-config-helper.test.ts    |   0
 .../widget-inherit-options-helper.test.ts     |   2 +-
 .../widget-options-filters-helper.test.ts     |   2 +-
 .../__tests__/widget-schema-helper.test.ts    |   2 +-
 .../widget-value-label-helper.test.ts         |   2 +-
 .../_helpers/widget-chart-data-helper.ts      |   0
 .../widgets/_helpers/widget-chart-helper.ts   |   4 +-
 .../_helpers/widget-component-helper.ts       |   4 +-
 .../widgets/_helpers/widget-config-helper.ts  |   2 +-
 .../_helpers/widget-inherit-options-helper.ts |   0
 .../_helpers/widget-location-helper.ts        |   2 +-
 .../_helpers/widget-options-filters-helper.ts |   2 +-
 .../widgets/_helpers/widget-options-helper.ts |   2 +-
 .../widget-options-schema-generator.ts        |   2 +-
 .../widgets/_helpers/widget-schema-helper.ts  |   5 +-
 .../widgets/_helpers/widget-table-helper.ts   |   2 +-
 .../_helpers/widget-validation-helper.ts      |   8 +-
 .../_helpers/widget-value-label-helper.ts     |   0
 .../legacy}/widgets/_types/compliance-type.ts |   2 +-
 .../widgets/_types/widget-data-table-type.ts  |   0
 .../widgets/_types/widget-list-type.ts        |   2 +-
 .../legacy}/widgets/_types/widget-type.ts     |   0
 .../ComplianceStatusWidget.vue                |  12 +-
 .../compliance-status/widget-config.ts        |   2 +-
 .../count-of-fail-findings/widget-config.ts   |   2 +-
 .../widget-config.ts                          |   2 +-
 .../SeverityStatusByServiceWidget.vue         |  12 +-
 .../widget-config.ts                          |   2 +-
 .../TotalFailFindingsHistoryWidget.vue        |  16 +-
 .../widget-config.ts                          |   2 +-
 .../TotalFailFindingsStatusWidget.vue         |  14 +-
 .../widget-config.ts                          |   2 +-
 .../TrendOfPassAndFailFindingsWidget.vue      |  27 +-
 .../widget-config.ts                          |   2 +-
 .../budget-status/BudgetStatusWidget.vue      |   8 +-
 .../budget-status/widget-config.ts            |   2 +-
 .../BudgetUsageByTargetWidget.vue             |  14 +-
 .../budget-usage-by-target/widget-config.ts   |   2 +-
 .../BudgetUsageSummaryWidget.vue              |  10 +-
 .../budget-usage-summary/widget-config.ts     |   2 +-
 .../CostByRegionMultiFieldsWidget.vue         |  27 +-
 .../widget-config.ts                          |   2 +-
 .../cost-by-region/CostByRegionWidget.vue     |  22 +-
 .../cost-by-region-data-hleper.ts             |   0
 .../cost-by-region/widget-config.ts           |   2 +-
 .../cost-widgets/cost-donut/widget-config.ts  |   2 +-
 .../cost-widgets/cost-map/CostMapWidget.vue   |   8 +-
 .../cost-map/costmap-chart-data-helper.ts     |   0
 .../cost-map/costmap-draw-chart-helper.ts     |   4 +-
 .../cost-widgets/cost-map/widget-config.ts    |   2 +-
 .../cost-widgets/cost-pie/widget-config.ts    |   2 +-
 .../CostSummaryMultiFieldsWidget.vue          |  28 +-
 .../widget-config.ts                          |   2 +-
 .../cost-trend-stacked/widget-config.ts       |   2 +-
 .../cost-widgets/cost-trend/widget-config.ts  |   2 +-
 .../monthly-cost/MonthlyCostWidget.vue        |  16 +-
 .../monthly-cost/widget-config.ts             |   2 +-
 .../stores/dashboard-detail-info-store.ts     |   5 +-
 .../stores/widget-form-store.ts               |  10 +-
 .../DashboardDetailHeader.vue                 |   4 +-
 .../DashboardManageVariableImportModal.vue    |  66 ++--
 .../DashboardNameEditModal.vue                |   2 +-
 .../DashboardShareWithCodeModal.vue           |   2 +-
 .../composables/use-dashboard-manageable.ts   |   2 +-
 .../helpers/widget-migration-helper.ts        | 313 ------------------
 .../dashboards/pages/DashboardCreatePage.vue  | 116 +------
 .../dashboards/pages/DashboardDetailPage.vue  |  46 +--
 .../_constants/widget-components-constant.ts  |  63 ----
 .../_constants/widget-config-list-constant.ts |  87 -----
 163 files changed, 1117 insertions(+), 1044 deletions(-)
 rename apps/web/src/services/dashboard-shared/{composables => _composables}/use-dashboard-route-context.ts (100%)
 create mode 100644 apps/web/src/services/dashboard-shared/dashboard-create/DashboardCreateBody.vue
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateBlankBoardItem.vue (97%)
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateScopeForm.vue (98%)
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateStep1.vue (96%)
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateStep1SearchFilter.vue (98%)
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateStep2.vue (92%)
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateStep2BundleCase.vue (97%)
 rename apps/web/src/services/dashboard-shared/{components/dashboard-create => dashboard-create/components}/DashboardCreateStep2SingleCase.vue (97%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-create}/constants/dashboard-labels.ts (100%)
 rename apps/web/src/services/dashboard-shared/{ => dashboard-create}/stores/dashboard-create-page-store.ts (100%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared}/dashboard-detail/DashboardDetailBody.vue (73%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardGlobalVariableFilter.vue (82%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardGlobalVariableFilterEnum.vue (97%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardGlobalVariableFilterNumberInput.vue (98%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardGlobalVariableFilterNumberSlider.vue (97%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardGlobalVariableFilterReference.vue (98%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardGlobalVariableFilterTextInput.vue (97%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardLabels.vue (95%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/components/DashboardLabelsButton.vue (93%)
 create mode 100644 apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModal.vue
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardManageVariableImportModalTree.vue (100%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardManageVariableOverlay.vue (94%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/components/DashboardRefreshDropdown.vue (97%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardReorderSidebar.vue (95%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardToolsetDateCustomModal.vue (100%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/components/DashboardToolsetDateDropdown.vue (95%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardToolsetScope.vue (99%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardVariablesFormDynamic.vue (99%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardVariablesFormManual.vue (100%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardVariablesFormModal.vue (97%)
 rename apps/web/src/services/{dashboards/components/dashboard-detail => dashboard-shared/dashboard-detail/components}/DashboardVariablesMoreButton.vue (94%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/components/DashboardVariablesV2.vue (78%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/components/DashboardWidgetContainerV2.vue (96%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/composables/use-dashboard-container-width.ts (95%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/composables/use-dashboard-get-query.ts (100%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/composables/use-dashboard-widget-list-query.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/composables/use-reformed-widget-info-list.ts (84%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/constants/dashboard-global-variable-preset.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/constants/dashboard-global-variable.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/constants/dashboard-managed-variables-schema.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/constants/dashboard-vars-schema-preset.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/constants/manage-variable-overlay-constant.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/constants/widget-container-config.ts (87%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/helpers/__tests__/widget-width-helper.md (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/helpers/__tests__/widget-width-helper.test.ts (95%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/helpers/dashboard-global-variables-helper.ts (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/helpers/dashboard-widget-info-helper.ts (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/helpers/widget-theme-helper.ts (84%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/helpers/widget-width-helper.ts (96%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared/dashboard-detail}/legacy/DashboardManageVariableForm.vue (98%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared/dashboard-detail}/legacy/DashboardManageVariableOptionsField.vue (100%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared/dashboard-detail}/legacy/DashboardVariableDropdown.vue (99%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared/dashboard-detail}/legacy/DashboardVariables.vue (94%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared/dashboard-detail}/legacy/DashboardWidgetContainer.vue (89%)
 rename apps/web/src/services/{dashboards/components => dashboard-shared/dashboard-detail}/legacy/WidgetFullModeModal.vue (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_base-widgets/base-count-of-findings/widget-config.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_base-widgets/base-pie/BasePieWidget.vue (88%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_base-widgets/base-pie/widget-config.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_base-widgets/base-trend/BaseTrendWidget.vue (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_base-widgets/base-trend/widget-config.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_components/WidgetChartNoDataOverlay.vue (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_components/WidgetDataTable.vue (99%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_components/WidgetFrame.vue (99%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget-color-set.ts (89%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget-lifecycle.ts (94%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget-pagination.ts (84%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/merge-base-widget-state.ts (89%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/use-base-widget-state.ts (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/use-widget-console-filters.ts (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/use-widget-date-range.ts (76%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/use-widget-frame.ts (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/use-widget-location.ts (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_composables/use-widget/use-widget.ts (77%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_constants/compliance-constant.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_constants/managed-widget-options-schema.ts (100%)
 create mode 100644 apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts
 create mode 100644 apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_constants/widget-constant.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts (97%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/__tests__/widget-config-helper.test.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts (99%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts (96%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/__tests__/widget-schema-helper.test.ts (99%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/__tests__/widget-value-label-helper.test.ts (96%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-chart-data-helper.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-chart-helper.ts (96%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-component-helper.ts (66%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-config-helper.ts (95%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-inherit-options-helper.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-location-helper.ts (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-options-filters-helper.ts (94%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-options-helper.ts (96%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-options-schema-generator.ts (94%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-schema-helper.ts (95%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-table-helper.ts (97%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-validation-helper.ts (95%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_helpers/widget-value-label-helper.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_types/compliance-type.ts (66%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_types/widget-data-table-type.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_types/widget-list-type.ts (67%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/_types/widget-type.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue (95%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/compliance-status/widget-config.ts (86%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/count-of-fail-findings/widget-config.ts (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/severity-status-by-service/widget-config.ts (86%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue (94%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/total-fail-findings-history/widget-config.ts (88%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/total-fail-findings-status/widget-config.ts (87%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts (89%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue (94%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/budget-status/widget-config.ts (87%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue (89%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/budget-usage-by-target/widget-config.ts (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue (96%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/budget-usage-summary/widget-config.ts (87%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue (89%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-by-region/widget-config.ts (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-donut/widget-config.ts (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-map/CostMapWidget.vue (92%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts (100%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts (85%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-map/widget-config.ts (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-pie/widget-config.ts (90%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts (93%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-trend-stacked/widget-config.ts (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/cost-trend/widget-config.ts (91%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue (94%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail/legacy}/widgets/cost-widgets/monthly-cost/widget-config.ts (89%)
 rename apps/web/src/services/{dashboards/shared => dashboard-shared/dashboard-detail}/stores/dashboard-detail-info-store.ts (97%)
 rename apps/web/src/services/{dashboards => dashboard-shared/dashboard-detail}/stores/widget-form-store.ts (91%)
 delete mode 100644 apps/web/src/services/dashboards/helpers/widget-migration-helper.ts
 delete mode 100644 apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts
 delete mode 100644 apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts

diff --git a/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts b/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
index ca49e1e6bd..4fc30a4703 100644
--- a/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
+++ b/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
@@ -1,5 +1,5 @@
 // Base Model
-import type { GLOBAL_VARIABLE_FILTER_TYPE_MAP } from '@/services/dashboards/constants/dashboard-global-variable';
+import type { GLOBAL_VARIABLE_FILTER_TYPE_MAP } from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-global-variable';
 
 interface DashboardGlobalVariableBase {
     key: string; // new_variable
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
index 704b65edfc..a03e6240bc 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -47,8 +47,8 @@ import type {
     DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
index f45957a4cf..ef194f9a8b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
@@ -26,8 +26,8 @@ import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/t
 
 import { blue, gray } from '@/styles/colors';
 
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
 
 
 interface Props {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index 0545d134c6..c2261ee52e 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -62,7 +62,7 @@ import type {
     JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction,
 } from '@/common/modules/widgets/types/widget-model';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
index 6d15bb0bf5..b395f0c58c 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
@@ -7,8 +7,8 @@ import { PButton, PPopover, PCopyButton } from '@cloudforet/mirinae';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
 
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
index a24e973a4b..c27180a1c7 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -40,7 +40,7 @@ import { gray, white } from '@/styles/colors';
 import { SIZE_UNITS } from '@/services/asset-inventory/constants/asset-analysis-constant';
 import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
index f72a279d63..b6319938af 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -35,11 +35,11 @@ import WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-valu
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { WidgetType } from '@/common/modules/widgets/types/widget-model';
 
-import DashboardToolsetDateDropdown from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/shared/components/DashboardVariablesV2.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import DashboardToolsetDateDropdown from '@/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import DashboardVariablesV2 from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesV2.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
@@ -318,6 +318,7 @@ onUnmounted(() => {
                         />
                         <dashboard-variables-v2 disable-save-button
                                                 widget-mode
+                                                :dashboard-id="dashboardId"
                                                 :is-project-dashboard="!!dashboard?.project_id"
                         />
                     </div>
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
index 9619e60bc5..5965cb2597 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
@@ -1,7 +1,7 @@
 import { range } from 'lodash';
 import { describe, it, expect } from 'vitest';
 
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import { getRefinedXYChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 
 interface SubData {
     date: string;
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
index b7f20f2a23..9077d786dc 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
@@ -7,7 +7,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/api-cl
 import {
     getInheritingOptionKeys,
     getInitialWidgetInheritOptions,
-} from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 
 
 
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
index 61d4f9a8a7..359560bdc2 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
@@ -1,6 +1,6 @@
 import type { WidgetFilterKey, WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
-import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
+import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper';
 
 
 describe('[Widget Options Filters Helper] setFilterAndGetWidgetFiltersMap', () => {
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
index 611ed71954..5124b9f446 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
@@ -6,7 +6,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/
 import {
     getInitialSchemaProperties, getNonInheritedWidgetOptionNamesAmongUsedVariables,
     getRefinedSchemaProperties, getWidgetOptionKeyByVariableKey,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
 
 const DEFAULT_WIDGET_CONFIG = {
     widget_config_id: 'test',
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
index 2f2235dbac..fa2d73a449 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
@@ -1,7 +1,7 @@
 import { describe } from 'vitest';
 
+import { getWidgetValueLabel } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
 
 const mockAllReferenceTypeInfo: AllReferenceTypeInfo = {
     provider: {
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
index 2336606ba9..03e5c14be1 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
@@ -34,7 +34,7 @@ import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 
 const GRANULARITY_UNIT_MAP = {
     MONTHLY: { singular: 'Month', plural: 'Months' },
diff --git a/apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts b/apps/web/src/services/dashboard-shared/_composables/use-dashboard-route-context.ts
similarity index 100%
rename from apps/web/src/services/dashboard-shared/composables/use-dashboard-route-context.ts
rename to apps/web/src/services/dashboard-shared/_composables/use-dashboard-route-context.ts
diff --git a/apps/web/src/services/dashboard-shared/dashboard-create/DashboardCreateBody.vue b/apps/web/src/services/dashboard-shared/dashboard-create/DashboardCreateBody.vue
new file mode 100644
index 0000000000..08ebaad752
--- /dev/null
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/DashboardCreateBody.vue
@@ -0,0 +1,151 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
+<script setup lang="ts">
+/* eslint-disable import/first */
+import {
+    computed, defineExpose, onUnmounted, reactive,
+// eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PCenteredLayoutHeader,
+} from '@cloudforet/mirinae';
+
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
+
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useGoBack } from '@/common/composables/go-back';
+
+import DashboardCreateStep1 from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1.vue';
+import DashboardCreateStep2 from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
+import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
+import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+import { useDashboardRouteContext } from '../_composables/use-dashboard-route-context';
+
+interface Step {
+    step: number;
+    description?: TranslateResult;
+}
+
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+}
+
+const props = defineProps<Props>();
+
+const { entryPoint, projectGroupOrProjectId } = useDashboardRouteContext();
+
+const dashboardCreatePageStore = useDashboardCreatePageStore();
+const dashboardCreatePageState = dashboardCreatePageStore.state;
+
+
+const state = reactive({
+    loading: false,
+    steps: computed<Step[]>(() => [
+        {
+            step: 1,
+            description: entryPoint.value === 'ADMIN' ? '' : i18n.t('DASHBOARDS.CREATE.STEP1_DESC'),
+        },
+        {
+            step: 2,
+            description: entryPoint.value === 'ADMIN' ? i18n.t('DASHBOARDS.CREATE.STEP2_DESC_FOR_ADMIN') : i18n.t('DASHBOARDS.CREATE.STEP2_DESC'),
+        },
+    ]),
+    closeConfirmModalVisible: false,
+});
+
+const goBackRoute = computed(() => {
+    if (entryPoint.value === 'ADMIN') {
+        return {
+            name: ADMIN_DASHBOARDS_ROUTE._NAME,
+        };
+    }
+    if (entryPoint.value === 'WORKSPACE') {
+        return {
+            name: DASHBOARDS_ROUTE._NAME,
+        };
+    }
+    return {
+        name: PROJECT_ROUTE_V2._NAME,
+        params: {
+            projectGroupOrProjectId: projectGroupOrProjectId.value as string,
+        },
+    };
+});
+
+/* Event */
+const handleClickClose = () => {
+    state.closeConfirmModalVisible = true;
+};
+const { setPathFrom, handleClickBackButton } = useGoBack(goBackRoute.value);
+const handleClickNext = () => {
+    dashboardCreatePageStore.setCreateType('BUNDLE');
+    dashboardCreatePageStore.setCurrentStep(2);
+};
+defineExpose({ setPathFrom });
+onUnmounted(() => {
+    dashboardCreatePageStore.reset();
+});
+</script>
+
+<template>
+    <div class="dashboard-create-body"
+         :class="[`step-${dashboardCreatePageState.currentStep}`]"
+    >
+        <p-centered-layout-header :title="$t('DASHBOARDS.CREATE.TITLE')"
+                                  :description="state.steps?.[dashboardCreatePageState.currentStep - 1]?.description"
+                                  :total-steps="state.steps.length"
+                                  :current-step="dashboardCreatePageState.currentStep"
+                                  show-step
+                                  show-close-button
+                                  @close="handleClickClose"
+        />
+        <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
+                                :dashboard-items="props.dashboardItems"
+                                @click-next="handleClickNext"
+        />
+        <template v-else-if="dashboardCreatePageState.currentStep === 2">
+            <dashboard-create-step2 :dashboard-items="props.dashboardItems"
+                                    :folder-items="props.folderItems"
+            />
+        </template>
+        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
+                            @confirm="handleClickBackButton"
+        />
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-create-body {
+    margin: 0 auto;
+    &.step-1 {
+        width: 60rem;
+    }
+    &.step-2 {
+        width: 45rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateBlankBoardItem.vue
similarity index 97%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateBlankBoardItem.vue
index 092d6ff9f9..1bd0e43db5 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateBlankBoardItem.vue
@@ -4,7 +4,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { BoardSet } from '@cloudforet/mirinae/types/data-display/board/type';
 
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
 
 interface Props {
     templateSets: BoardSet[];
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateScopeForm.vue
similarity index 98%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateScopeForm.vue
index 3d46d59b0b..7ad4678a96 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateScopeForm.vue
@@ -18,7 +18,7 @@ import { useUserStore } from '@/store/user/user-store';
 
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
 
 
 
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1.vue
similarity index 96%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1.vue
index 0cca367b85..2edbaa6652 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1.vue
@@ -15,11 +15,11 @@ import type { DashboardTemplateModel } from '@/schema/repository/dashboard-templ
 import { i18n } from '@/translations';
 
 
-import DashboardCreateBlankBoardItem from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateBlankBoardItem.vue';
-import type { FilterLabelItem } from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
-import DashboardCreateStep1SearchFilter from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
+import DashboardCreateBlankBoardItem from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateBlankBoardItem.vue';
+import type { FilterLabelItem } from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1SearchFilter.vue';
+import DashboardCreateStep1SearchFilter from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1SearchFilter.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
similarity index 98%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
index acb1d5021b..146562e3fa 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
@@ -11,7 +11,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { PluginItem } from '@/store/reference/plugin-reference-store';
 import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
 
-import { DASHBOARD_LABELS } from '@/services/dashboards/constants/dashboard-labels';
+import { DASHBOARD_LABELS } from '@/services/dashboard-shared/dashboard-create/constants/dashboard-labels';
 
 
 export interface FilterLabelItem {
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2.vue
similarity index 92%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2.vue
index 0105323a0e..fede9c6143 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2.vue
@@ -8,10 +8,10 @@ import { PButton } from '@cloudforet/mirinae';
 import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import DashboardCreateStep2BundleCase
-    from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue';
+    from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2BundleCase.vue';
 import DashboardCreateStep2SingleCase
-    from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue';
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+    from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2SingleCase.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
 
 interface Props {
     dashboardItems: Array<DashboardModel>;
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2BundleCase.vue
similarity index 97%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2BundleCase.vue
index 5eaf1aa7d0..606fa0e2c8 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2BundleCase.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2BundleCase.vue
@@ -28,11 +28,11 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import { gray } from '@/styles/colors';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
-} from '@/services/dashboards/constants/dashboard-vars-schema-preset';
+} from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-vars-schema-preset';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
diff --git a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2SingleCase.vue
similarity index 97%
rename from apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
rename to apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2SingleCase.vue
index f9f064e448..27d42beb83 100644
--- a/apps/web/src/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2SingleCase.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-create/components/DashboardCreateStep2SingleCase.vue
@@ -32,12 +32,12 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import DashboardCreateScopeForm from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateScopeForm.vue';
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
+import DashboardCreateScopeForm from '@/services/dashboard-shared/dashboard-create/components/DashboardCreateScopeForm.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
-} from '@/services/dashboards/constants/dashboard-vars-schema-preset';
+} from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-vars-schema-preset';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
diff --git a/apps/web/src/services/dashboards/constants/dashboard-labels.ts b/apps/web/src/services/dashboard-shared/dashboard-create/constants/dashboard-labels.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-labels.ts
rename to apps/web/src/services/dashboard-shared/dashboard-create/constants/dashboard-labels.ts
diff --git a/apps/web/src/services/dashboard-shared/stores/dashboard-create-page-store.ts b/apps/web/src/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store.ts
similarity index 100%
rename from apps/web/src/services/dashboard-shared/stores/dashboard-create-page-store.ts
rename to apps/web/src/services/dashboard-shared/dashboard-create/stores/dashboard-create-page-store.ts
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue
similarity index 73%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue
index 1025854ac7..0458102645 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 
@@ -14,27 +15,38 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
-import DashboardToolsetScope from '@/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue';
-import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
-import DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
+import DashboardRefreshDropdown
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardRefreshDropdown.vue';
+import DashboardToolsetDateDropdown
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import DashboardToolsetScope
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardToolsetScope.vue';
+import DashboardVariablesV2
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesV2.vue';
+import DashboardWidgetContainerV2
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardWidgetContainerV2.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
+import DashboardVariables from '@/services/dashboard-shared/dashboard-detail/legacy/DashboardVariables.vue';
+import DashboardWidgetContainer from '@/services/dashboard-shared/dashboard-detail/legacy/DashboardWidgetContainer.vue';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import DashboardRefreshDropdown from '@/services/dashboards/shared/components/DashboardRefreshDropdown.vue';
-import DashboardToolsetDateDropdown from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/shared/components/DashboardVariablesV2.vue';
-import DashboardWidgetContainerV2 from '@/services/dashboards/shared/components/DashboardWidgetContainerV2.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface Props {
     dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    dashboardItems: () => [],
+    folderItems: () => [],
+});
+const dashboardId = computed(() => props.dashboardId);
 const router = useRouter();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
@@ -42,10 +54,10 @@ const widgetGenerateStore = useWidgetGenerateStore();
 const widgetContainerRef = ref<typeof DashboardWidgetContainer|typeof DashboardWidgetContainerV2|null>(null);
 
 const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => props.dashboardId),
+    dashboardId,
 });
 const {
-    entryPoint, projectGroupOrProjectId,
+    entryPoint, projectGroupOrProjectId, projectContextType,
 } = useDashboardRouteContext();
 
 /* Query */
@@ -57,7 +69,7 @@ const {
     keys: dashboardKeys,
     fetcher: dashboardFetcher,
 } = useDashboardGetQuery({
-    dashboardId: computed(() => props.dashboardId),
+    dashboardId,
 });
 const {
     widgetList,
@@ -65,11 +77,11 @@ const {
     isError: widgetError,
     keys: widgetListKeys,
 } = useDashboardWidgetListQuery({
-    dashboardId: computed(() => props.dashboardId),
+    dashboardId,
 });
 
 const isDeprecatedDashboard = computed(() => dashboard.value?.version === '1.0');
-
+const dashboardItemsV2 = computed(() => props.dashboardItems?.filter((d) => d.version !== '1.0'));
 
 const handleRefresh = async () => {
     if (dashboard.value?.version !== '1.0') {
@@ -116,6 +128,18 @@ watch(dashboard, (_dashboard) => {
         dashboardDetailStore.reset();
         if (isDeprecatedDashboard.value) {
             dashboardDetailStore.setDashboardInfoStoreState(_dashboard);
+        } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+            if (projectContextType.value === 'PROJECT') {
+                dashboardDetailStore.setDashboardInfoStoreStateV2({
+                    ..._dashboard,
+                    project_id: projectGroupOrProjectId.value,
+                });
+            } else if (projectContextType.value === 'PROJECT_GROUP') {
+                dashboardDetailStore.setDashboardInfoStoreStateV2({
+                    ..._dashboard,
+                    project_group_id: projectGroupOrProjectId.value,
+                });
+            }
         } else {
             dashboardDetailStore.setDashboardInfoStoreStateV2(_dashboard);
         }
@@ -160,7 +184,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="dashboard-detail-body">
+    <div class="dashboard-detail-body"
+         :class="{ 'project-dashboard': entryPoint === 'PROJECT' }"
+    >
         <div class="fixed-header">
             <div class="filter-box">
                 <div class="left-part">
@@ -186,6 +212,9 @@ onUnmounted(() => {
                                         class="variable-selector-wrapper"
                                         :disable-save-button="!isManageable"
                                         :loading="dashboardUpdateLoading"
+                                        :dashboard-id="props.dashboardId"
+                                        :dashboard-items="dashboardItemsV2"
+                                        :folder-items="folderItems"
                                         @update="handleUpdateDashboardVariables"
                 />
             </div>
@@ -197,13 +226,23 @@ onUnmounted(() => {
             />
             <dashboard-widget-container-v2 v-else
                                            ref="widgetContainerRef"
+                                           :dashboard-id="props.dashboardId"
             />
         </div>
+        <portal-target name="dashboard-detail-body" />
     </div>
 </template>
 
 <style lang="postcss" scoped>
 .dashboard-detail-body {
+    &.project-dashboard {
+        @apply bg-gray-100 rounded-lg px-2 pb-2 mx-4;
+
+        .fixed-header {
+            position: unset;
+        }
+    }
+
     .fixed-header {
         @apply sticky bg-gray-100;
         z-index: 20;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilter.vue
similarity index 82%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilter.vue
index 23617b461e..16e2f2642b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilter.vue
@@ -9,11 +9,11 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 const FILTER_COMPONENT_MAP: Record<GlobalVariableFilterType, ReturnType<typeof defineAsyncComponent>> = {
-    ENUM: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue')),
-    REFERENCE: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue')),
-    TEXT_INPUT: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue')),
-    NUMBER_INPUT: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue')),
-    NUMBER_SLIDER: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue')),
+    ENUM: defineAsyncComponent(() => import('@/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue')),
+    REFERENCE: defineAsyncComponent(() => import('@/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue')),
+    TEXT_INPUT: defineAsyncComponent(() => import('@/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue')),
+    NUMBER_INPUT: defineAsyncComponent(() => import('@/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue')),
+    NUMBER_SLIDER: defineAsyncComponent(() => import('@/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue')),
 };
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue
index 7d9aae4b55..3e1651d15e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue
@@ -21,7 +21,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 
 interface Props {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue
similarity index 98%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue
index 201e373881..b8664fa44e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue
@@ -22,7 +22,7 @@ import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue
index 36baa39f1e..71319382e4 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue
@@ -17,7 +17,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue
similarity index 98%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue
index 1dadf317ab..bec41c614a 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue
@@ -37,7 +37,7 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue
index 816ad0001b..46cc1f5b0d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue
@@ -18,7 +18,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardLabels.vue
similarity index 95%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardLabels.vue
index 47328f67af..3d8ac8451d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardLabels.vue
@@ -5,7 +5,6 @@ import {
     computed,
     reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import {
     PFieldGroup, PIconButton, PLabel, PTextInput,
@@ -15,11 +14,12 @@ import { i18n } from '@/translations';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 
 interface Props {
     editable?: boolean;
+    dashboardId: string;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update-labels']);
@@ -41,10 +41,8 @@ const {
     },
 });
 
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
 const { dashboard } = useDashboardGetQuery({
-    dashboardId,
+    dashboardId: computed(() => props.dashboardId),
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/shared/components/DashboardLabelsButton.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardLabelsButton.vue
similarity index 93%
rename from apps/web/src/services/dashboards/shared/components/DashboardLabelsButton.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardLabelsButton.vue
index e6855a8f84..1fa7355318 100644
--- a/apps/web/src/services/dashboards/shared/components/DashboardLabelsButton.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardLabelsButton.vue
@@ -11,9 +11,9 @@ import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashbo
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import DashboardLabels from '@/services/dashboards/components/dashboard-detail/DashboardLabels.vue';
+import DashboardLabels from '@/services/dashboard-shared/dashboard-detail/components/DashboardLabels.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
 
 
 
@@ -90,6 +90,7 @@ onClickOutside(labelPopoverRef, () => { state.visible = false; });
             <template #content>
                 <div class="content-wrapper">
                     <dashboard-labels :editable="!state.isDeprecatedDashboard && isManageable"
+                                      :dashboard-id="props.dashboardId"
                                       @update-labels="handleUpdateLabels"
                     />
                 </div>
diff --git a/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModal.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModal.vue
new file mode 100644
index 0000000000..f272a1db7d
--- /dev/null
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModal.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { cloneDeep } from 'lodash';
+
+import {
+    PButton, PButtonModal, PCheckbox, PSearch, PScopedNotification,
+} from '@cloudforet/mirinae';
+
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
+
+import DashboardManageVariableImportModalTree
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModalTree.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
+
+
+interface Props {
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
+}
+const userStore = useUserStore();
+const props = withDefaults(defineProps<Props>(), {
+    dashboardItems: () => [],
+    folderItems: () => [],
+});
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const dashboardId = computed(() => props.dashboardId);
+
+const {
+    dashboard,
+    fetcher,
+    keys,
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const queryClient = useQueryClient();
+
+const state = reactive({
+    currentDashboardId: computed<string>(() => dashboardId.value || ''),
+    currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboard.value?.vars_schema?.properties ?? {})),
+    keyword: '',
+    selectedDashboardId: '' as string|undefined,
+    publicDashboardItems: computed<PublicDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('public') && d.dashboard_id !== state.currentDashboardId)),
+    privateDashboardItems: computed<PrivateDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('private') && d.dashboard_id !== state.currentDashboardId)),
+    publicFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('public'))),
+    privateFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('private'))),
+    allDashboardItems: computed<PrivateDashboardModel[]>(() => [...state.publicDashboardItems, ...state.privateDashboardItems]),
+    selectedDashboardVariables: computed<DashboardGlobalVariable[]>(() => {
+        const selectedDashboard = state.allDashboardItems.find((item) => item.dashboard_id === state.selectedDashboardId);
+        if (!selectedDashboard) return [];
+        const _varsSchemaProperties: DashboardGlobalVariable[] = Object.values(selectedDashboard?.vars_schema?.properties || {});
+        return getOrderedGlobalVariables(_varsSchemaProperties);
+    }),
+    searchedDashboardVariables: computed<DashboardGlobalVariable[]>(() => state.selectedDashboardVariables.filter((variable) => variable?.name?.toLowerCase()?.includes(state.keyword.toLowerCase()))),
+    selectedVariableKeys: [] as string[],
+    isAllSelected: computed<boolean>(() => {
+        if (state.selectedVariableKeys.length === 0) return false;
+        return state.selectedVariableKeys.length === state.selectedDashboardVariables.filter((variable) => !isDuplicatedVariableName(variable)).length;
+    }),
+    notiBannerVisible: true,
+});
+
+
+/* Api */
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
+        },
+        onSettled() {
+            dashboardDetailStore.setVariableImportModalVisible(false);
+        },
+    },
+);
+
+/* Event */
+const handleChangeSelectedVariableKeys = (selected: string[]) => {
+    state.selectedVariableKeys = selected;
+};
+const handleChangeAllSelectedVariables = (selected: boolean) => {
+    state.selectedVariableKeys = selected ? state.selectedDashboardVariables.filter((variable) => !isDuplicatedVariableName(variable)).map((variable) => variable.key) : [];
+};
+const handleClickClearAll = () => {
+    state.selectedVariableKeys = [];
+};
+const handleConfirmImportVariables = () => {
+    const _dashboardVarsSchemaProperties = cloneDeep(dashboard.value?.vars_schema?.properties ?? {});
+    state.selectedDashboardVariables
+        .filter((variable) => state.selectedVariableKeys.includes(variable.key))
+        .forEach((variable) => {
+            _dashboardVarsSchemaProperties[variable.key] = {
+                ...variable,
+                use: false,
+                created_by: userStore.state.userId,
+            };
+        });
+    mutate({
+        dashboard_id: state.currentDashboardId,
+        vars_schema: {
+            properties: _dashboardVarsSchemaProperties,
+        },
+    });
+};
+const handleUpdateVariableImportModalVisible = (visible: boolean) => {
+    dashboardDetailStore.setVariableImportModalVisible(visible);
+};
+
+const isDuplicatedVariableName = (variable: DashboardGlobalVariable): boolean => state.currentDashboardVariables.some((currentVariable) => currentVariable.name === variable.name
+    || currentVariable.key === variable.key);
+
+const getIndeterminate = (): boolean => {
+    const availableVariableCount = state.selectedDashboardVariables.filter((variable) => !isDuplicatedVariableName(variable)).length;
+    return state.selectedVariableKeys.length > 0 && state.selectedVariableKeys.length < availableVariableCount;
+};
+
+watch(() => state.selectedDashboardVariables, (selectedDashboardVariables) => {
+    state.notiBannerVisible = selectedDashboardVariables.some((variable) => isDuplicatedVariableName(variable));
+}, { immediate: true });
+watch(() => state.selectedDashboardId, () => {
+    state.selectedVariableKeys = [];
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal class="dashboard-manage-variable-import-modal"
+                    :header-title="$t('DASHBOARDS.DETAIL.VARIABLES.IMPORT_MODAL_HEADER')"
+                    :visible="dashboardDetailState.variableImportModalVisible"
+                    :disabled="!state.selectedVariableKeys.length"
+                    @update:visible="handleUpdateVariableImportModalVisible"
+                    @confirm="handleConfirmImportVariables"
+    >
+        <template #body>
+            <div class="import-contents">
+                <div class="left-dashboard-variable-tree-contents">
+                    <l-s-b-collapsible-menu-item v-if="state.publicDashboardItems.length || state.publicFolderItems.length"
+                                                 class="category-menu-item mt-1"
+                                                 :item="{
+                                                     type: 'collapsible',
+                                                     label: $t('DASHBOARDS.LNB.SHARED'),
+                                                     subItems: state.publicDashboardItems,
+                                                 }"
+                                                 is-sub-item
+                                                 show-sub-item-count
+                    >
+                        <template #collapsible-contents>
+                            <dashboard-manage-variable-import-modal-tree type="PUBLIC"
+                                                                         :dashboards="state.publicDashboardItems"
+                                                                         :folders="state.publicFolderItems"
+                                                                         :selected.sync="state.selectedDashboardId"
+                            />
+                        </template>
+                    </l-s-b-collapsible-menu-item>
+                    <l-s-b-collapsible-menu-item v-if="state.privateDashboardItems.length || state.privateFolderItems.length"
+                                                 class="category-menu-item mt-1"
+                                                 :item="{
+                                                     type: 'collapsible',
+                                                     label: $t('DASHBOARDS.LNB.PRIVATE'),
+                                                     subItems: state.privateDashboardItems,
+                                                 }"
+                                                 is-sub-item
+                                                 show-sub-item-count
+                    >
+                        <template #collapsible-contents>
+                            <dashboard-manage-variable-import-modal-tree type="PRIVATE"
+                                                                         :dashboards="state.privateDashboardItems"
+                                                                         :folders="state.privateFolderItems"
+                                                                         :selected.sync="state.selectedDashboardId"
+                            />
+                        </template>
+                    </l-s-b-collapsible-menu-item>
+                </div>
+                <div class="left-dashboard-variable-contents">
+                    <p-search v-model="state.keyword" />
+                    <div class="variable-list-wrapper">
+                        <div class="variable-list-header">
+                            <div class="header">
+                                <p-checkbox :selected="state.isAllSelected"
+                                            :indeterminate="getIndeterminate()"
+                                            @change="handleChangeAllSelectedVariables"
+                                />
+                                <span>{{ $t('DASHBOARDS.DETAIL.VARIABLES.NAME') }}</span>
+                            </div>
+                            <p-button size="sm"
+                                      style-type="tertiary"
+                                      @click="handleClickClearAll"
+                            >
+                                {{ $t('DASHBOARDS.DETAIL.VARIABLES.CLEAR_ALL') }}
+                            </p-button>
+                        </div>
+                        <div class="variable-list">
+                            <p-scoped-notification v-if="state.notiBannerVisible"
+                                                   type="warning"
+                                                   icon="ic_warning-filled"
+                                                   layout="in-section"
+                                                   :visible.sync="state.notiBannerVisible"
+                                                   show-close-button
+                            >
+                                {{ $t('DASHBOARDS.DETAIL.VARIABLES.DUPLICATED_NAME_WARNING') }}
+                            </p-scoped-notification>
+                            <div v-for="(variable) in state.searchedDashboardVariables"
+                                 :key="variable.key"
+                                 class="variable"
+                            >
+                                <p-checkbox :selected="state.selectedVariableKeys"
+                                            :value="variable.key"
+                                            :disabled="isDuplicatedVariableName(variable)"
+                                            @change="handleChangeSelectedVariableKeys"
+                                >
+                                    <span class="variable-text">{{ variable.name }}</span>
+                                </p-checkbox>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style scoped lang="postcss">
+.dashboard-manage-variable-import-modal {
+    .import-contents {
+        @apply bg-gray-100 flex;
+        height: 36.6875rem;
+
+        .left-dashboard-variable-tree-contents {
+            width: 14.625rem;
+            padding-right: 1rem;
+            height: 100%;
+            overflow: auto;
+        }
+        .left-dashboard-variable-contents {
+            @apply flex-1 flex flex-col gap-2;
+            padding: 0.5rem;
+
+            .variable-list-wrapper {
+                @apply bg-white border border-gray-150 rounded-lg;
+                height: 100%;
+                overflow: auto;
+
+                .variable-list-header {
+                    @apply border-b-2 border-gray-200 flex items-center justify-between;
+                    padding: 0.5rem;
+                    height: 2.5rem;
+                    .header {
+                        @apply flex items-center gap-1 text-label-md font-bold text-gray-900;
+                    }
+                }
+
+                .variable-list {
+                    height: calc(100% - 2.5rem);
+                    overflow: auto;
+
+                    .variable {
+                        @apply flex items-center;
+                        padding: 0.5rem;
+                        height: 2.25rem;
+                        .variable-text {
+                            @apply text-label-md text-gray-900;
+                            padding-left: 0.25rem;
+                            line-height: 1.5;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModalTree.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModalTree.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableOverlay.vue
similarity index 94%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableOverlay.vue
index b55bb7e7cf..707ac89f7d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableOverlay.vue
@@ -26,23 +26,23 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
-import DashboardManageVariableImportModal
-    from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
 import DashboardVariablesFormModal
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormModal.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
-} from '@/services/dashboards/constants/dashboard-vars-schema-preset';
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
+} from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-vars-schema-preset';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 
 
 
+
 interface GlobalVariableTableItem {
     key: string;
     name: string;
@@ -57,6 +57,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 const userStore = useUserStore();
+const dashboardDetailInfoStore = useDashboardDetailInfoStore();
 const router = useRouter();
 const dashboardId = computed(() => props.dashboardId);
 const {
@@ -220,7 +221,7 @@ const handleClickCreateButton = () => {
     state.formModalVisible = true;
 };
 const handleClickImportButton = () => {
-    state.importModalVisible = true;
+    dashboardDetailInfoStore.setVariableImportModalVisible(true);
 };
 const handleClickDeleteButton = (variableKey: string) => {
     state.selectedVariableKey = variableKey;
@@ -244,7 +245,7 @@ const handleToggleUse = (variableKey: string, val: boolean) => {
 const handleCloseOverlay = () => {
     if (entryPoint.value === 'ADMIN') {
         router.replace({
-            name: ADMIN_DASHBOARDS_ROUTE._NAME,
+            name: ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME,
             params: {
                 dashboardId: dashboardId.value,
             },
@@ -259,7 +260,7 @@ const handleCloseOverlay = () => {
         }).catch(() => {});
     } else if (entryPoint.value === 'WORKSPACE') {
         router.replace({
-            name: DASHBOARDS_ROUTE._NAME,
+            name: DASHBOARDS_ROUTE.DETAIL._NAME,
             params: {
                 dashboardId: dashboardId.value,
             },
@@ -366,9 +367,6 @@ const handleConfirmDelete = () => {
                 </p-scoped-notification>
             </template>
         </delete-modal>
-        <dashboard-manage-variable-import-modal :visible.sync="state.importModalVisible"
-                                                :dashboard-id="dashboardId"
-        />
     </p-overlay-layout>
 </template>
 
diff --git a/apps/web/src/services/dashboards/shared/components/DashboardRefreshDropdown.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardRefreshDropdown.vue
similarity index 97%
rename from apps/web/src/services/dashboards/shared/components/DashboardRefreshDropdown.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardRefreshDropdown.vue
index c55fc87367..7f01b154e3 100644
--- a/apps/web/src/services/dashboards/shared/components/DashboardRefreshDropdown.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardRefreshDropdown.vue
@@ -16,9 +16,9 @@ import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dash
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
 
 
 const REFRESH_INTERVAL_OPTIONS = Object.keys(REFRESH_INTERVAL_OPTIONS_MAP);
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardReorderSidebar.vue
similarity index 95%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardReorderSidebar.vue
index 82266b12bb..24980a269a 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardReorderSidebar.vue
@@ -3,7 +3,6 @@ import {
     computed,
     onUnmounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 import draggable from 'vuedraggable';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
@@ -22,13 +21,19 @@ import { useDisplayStore } from '@/store/display/display-store';
 import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
+
+
 
 type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
+
+const props = defineProps<{
+    dashboardId: string;
+}>();
+
 const displayStore = useDisplayStore();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
 
 /* Query */
 const {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateCustomModal.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateCustomModal.vue
diff --git a/apps/web/src/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue
similarity index 95%
rename from apps/web/src/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue
index a6d2750cdf..bdd7ba12a4 100644
--- a/apps/web/src/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue
@@ -18,10 +18,11 @@ import { i18n } from '@/translations';
 
 import { useI18nDayjs } from '@/common/composables/i18n-dayjs';
 
-import DashboardToolsetDateCustomModal from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue';
+import DashboardToolsetDateCustomModal
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateCustomModal.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
 
 interface Props {
     dateRange?: DateRange;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetScope.vue
similarity index 99%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetScope.vue
index 32bec98769..8de01b5486 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardToolsetScope.vue
@@ -21,7 +21,7 @@ import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-
 
 import { workspaceStateFormatter } from '@/services/advanced/composables/refined-table-data';
 import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormDynamic.vue
similarity index 99%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormDynamic.vue
index 55b61ba150..99d3d3cb6c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormDynamic.vue
@@ -27,10 +27,10 @@ import {
 } from '@/common/composables/data-source/use-cost-data-source-filter-menu-items';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
 import {
     DASHBOARD_GLOBAL_VARIABLES_PRESET_LIST,
-} from '@/services/dashboards/constants/dashboard-global-variable-preset';
+} from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-global-variable-preset';
 
 const SELECTION_TYPE = {
     MULTI_SELECT: 'multi',
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormManual.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormManual.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormModal.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormModal.vue
index 59d095c266..0caf84cf17 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormModal.vue
@@ -23,10 +23,10 @@ import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import DashboardVariablesFormDynamic
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormDynamic.vue';
 import DashboardVariablesFormManual
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesFormManual.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 type ManualVariableData = Omit<ManualVariable, 'management'|'key'|'name'|'method'>;
 type DynamicVariableData = Omit<DashboardGlobalVariable, 'management'|'key'|'name'|'method'>;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesMoreButton.vue
similarity index 94%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesMoreButton.vue
index c3821d9191..bdaedb3095 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesMoreButton.vue
@@ -25,12 +25,12 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
-import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboard-shared/dashboard-detail/constants/manage-variable-overlay-constant';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface VariableMenuItem extends MenuItem {
@@ -155,7 +155,7 @@ const handleOpenOverlay = () => {
 
     if (entryPoint.value === 'ADMIN') {
         router.push({
-            name: ADMIN_DASHBOARDS_ROUTE._NAME,
+            name: ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME,
             params: {
                 dashboardId: dashboardId.value,
             },
@@ -172,7 +172,7 @@ const handleOpenOverlay = () => {
         }).catch(() => {});
     } else if (entryPoint.value === 'WORKSPACE') {
         router.push({
-            name: DASHBOARDS_ROUTE._NAME,
+            name: DASHBOARDS_ROUTE.DETAIL._NAME,
             params: {
                 dashboardId: dashboardId.value,
             },
diff --git a/apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesV2.vue
similarity index 78%
rename from apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesV2.vue
index 1708234bc6..d5f634489e 100644
--- a/apps/web/src/services/dashboards/shared/components/DashboardVariablesV2.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardVariablesV2.vue
@@ -7,21 +7,26 @@ import { isEqual } from 'lodash';
 import { PI, PTextButton, PDivider } from '@cloudforet/mirinae';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardGlobalVariableSchemaProperties, DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+import type {
+    DashboardFolderModel, DashboardGlobalVariableSchemaProperties, DashboardModel, DashboardVars,
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 
 import ChangedMark from '@/common/components/marks/ChangedMark.vue';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
 import DashboardGlobalVariableFilter
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue';
-import DashboardManageVariableOverlay from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardGlobalVariableFilter.vue';
+import DashboardManageVariableImportModal
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModal.vue';
+import DashboardManageVariableOverlay
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableOverlay.vue';
 import DashboardVariablesMoreButton
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue';
-import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesMoreButton.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboard-shared/dashboard-detail/constants/manage-variable-overlay-constant';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
@@ -32,6 +37,9 @@ interface Props {
     disableSaveButton?: boolean;
     originVars?: DashboardVars;
     widgetMode?: boolean; // NOTE: this for widget mode (temporary)
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
 }
 
 const props = defineProps<Props>();
@@ -39,7 +47,7 @@ const emit = defineEmits<{(e: 'update', val: { vars?: DashboardVars }): void;
 }>();
 
 const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
@@ -138,10 +146,14 @@ watch([() => state.tempVars, dashboard], ([_tempVars]) => {
                                          :widget-mode="props.widgetMode"
                                          :dashboard-id="dashboardId"
         />
-        <portal to="dashboard-detail-page">
+        <portal to="dashboard-detail-body">
             <dashboard-manage-variable-overlay :visible="state.showOverlay"
                                                :dashboard-id="dashboardId"
             />
+            <dashboard-manage-variable-import-modal :dashboard-id="dashboardId"
+                                                    :dashboard-items="props.dashboardItems"
+                                                    :folder-items="props.folderItems"
+            />
         </portal>
     </div>
 </template>
diff --git a/apps/web/src/services/dashboards/shared/components/DashboardWidgetContainerV2.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardWidgetContainerV2.vue
similarity index 96%
rename from apps/web/src/services/dashboards/shared/components/DashboardWidgetContainerV2.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardWidgetContainerV2.vue
index ab4a4d6040..30b28a5d94 100644
--- a/apps/web/src/services/dashboards/shared/components/DashboardWidgetContainerV2.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/components/DashboardWidgetContainerV2.vue
@@ -3,7 +3,6 @@ import type { ComponentPublicInstance, AsyncComponent } from 'vue';
 import {
     reactive, ref, watch, computed, onBeforeUnmount,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, debounce, flattenDeep } from 'lodash';
@@ -46,21 +45,21 @@ import type {
     WidgetExpose, WidgetProps, WidgetSize, WidgetOverlayType,
 } from '@/common/modules/widgets/types/widget-display-type';
 
-import DashboardReorderSidebar from '@/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue';
+import DashboardReorderSidebar
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardReorderSidebar.vue';
 import {
     useDashboardContainerWidth,
-} from '@/services/dashboards/composables/use-dashboard-container-width';
+} from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-container-width';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
 } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type { SharedDataTableInfo } from '@/services/dashboards/types/shared-dashboard-type';
 
-import { useDashboardWidgetListQuery } from '../composables/use-dashboard-widget-list-query';
-
 
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 type WidgetComponent = ComponentPublicInstance<WidgetProps, WidgetExpose>;
@@ -71,8 +70,12 @@ type RefinedWidgetInfo = WidgetModel & {
     component: AsyncComponent|null;
 };
 
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const props = defineProps<{
+    dashboardId: string;
+}>();
+
+
+const dashboardId = computed(() => props.dashboardId);
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
@@ -587,8 +590,8 @@ onBeforeUnmount(() => {
                       @confirm="handleDeleteModalConfirm"
         />
         <widget-form-overlay />
-        <dashboard-reorder-sidebar
-            :widget-info-list="state.refinedWidgetInfoList ?? []"
+        <dashboard-reorder-sidebar :dashboard-id="dashboardId"
+                                   :widget-info-list="state.refinedWidgetInfoList ?? []"
         />
     </div>
 </template>
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-container-width.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-container-width.ts
similarity index 95%
rename from apps/web/src/services/dashboards/composables/use-dashboard-container-width.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-container-width.ts
index 2c14ad42b5..8a4ce5fd28 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-container-width.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-container-width.ts
@@ -4,7 +4,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue';
 import {
     WIDGET_CONTAINER_MAX_WIDTH,
     WIDGET_CONTAINER_MIN_WIDTH, WIDGET_WIDTH_CRITERIA,
-} from '@/services/dashboards/constants/widget-container-config';
+} from '@/services/dashboard-shared/dashboard-detail/constants/widget-container-config';
 
 interface UseContainerResizerOptions {
     observeResize: boolean;
diff --git a/apps/web/src/services/dashboards/shared/composables/use-dashboard-get-query.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query.ts
similarity index 100%
rename from apps/web/src/services/dashboards/shared/composables/use-dashboard-get-query.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query.ts
diff --git a/apps/web/src/services/dashboards/shared/composables/use-dashboard-widget-list-query.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query.ts
similarity index 100%
rename from apps/web/src/services/dashboards/shared/composables/use-dashboard-widget-list-query.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query.ts
diff --git a/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-reformed-widget-info-list.ts
similarity index 84%
rename from apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-reformed-widget-info-list.ts
index 5926f71e76..89f04bbd1a 100644
--- a/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/composables/use-reformed-widget-info-list.ts
@@ -8,13 +8,13 @@ import type { WidgetConfig, WidgetSize } from '@/api-clients/dashboard/_types/wi
 
 import {
     widgetThemeAssigner,
-} from '@/services/dashboards/helpers/widget-theme-helper';
+} from '@/services/dashboard-shared/dashboard-detail/helpers/widget-theme-helper';
 import {
     widgetWidthAssigner,
-} from '@/services/dashboards/helpers/widget-width-helper';
-import { getWidgetComponent } from '@/services/dashboards/widgets/_helpers/widget-component-helper';
-import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/helpers/widget-width-helper';
+import { getWidgetComponent } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-component-helper';
+import { getWidgetConfig } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-config-helper';
+import type { WidgetTheme } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 interface UseWidgetReformerOptions {
     dashboardWidgetInfoList: Ref<DashboardLayoutWidgetInfo[]>;
diff --git a/apps/web/src/services/dashboards/constants/dashboard-global-variable-preset.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-global-variable-preset.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-global-variable-preset.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-global-variable-preset.ts
diff --git a/apps/web/src/services/dashboards/constants/dashboard-global-variable.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-global-variable.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-global-variable.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-global-variable.ts
diff --git a/apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-managed-variables-schema.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-managed-variables-schema.ts
diff --git a/apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-vars-schema-preset.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/constants/dashboard-vars-schema-preset.ts
diff --git a/apps/web/src/services/dashboards/constants/manage-variable-overlay-constant.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/manage-variable-overlay-constant.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/manage-variable-overlay-constant.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/constants/manage-variable-overlay-constant.ts
diff --git a/apps/web/src/services/dashboards/constants/widget-container-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/widget-container-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/constants/widget-container-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/constants/widget-container-config.ts
index ff9613bc5e..b9c1c07cf7 100644
--- a/apps/web/src/services/dashboards/constants/widget-container-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/constants/widget-container-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetTheme } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export const WIDGET_WIDTH_CRITERIA = 16;
 
diff --git a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.md b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/__tests__/widget-width-helper.md
similarity index 100%
rename from apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.md
rename to apps/web/src/services/dashboard-shared/dashboard-detail/helpers/__tests__/widget-width-helper.md
diff --git a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/__tests__/widget-width-helper.test.ts
similarity index 95%
rename from apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/helpers/__tests__/widget-width-helper.test.ts
index 10d587673e..5b2b05f6da 100644
--- a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/__tests__/widget-width-helper.test.ts
@@ -5,8 +5,8 @@ import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 import {
     WIDGET_CONTAINER_MAX_WIDTH,
     WIDGET_CONTAINER_MIN_WIDTH,
-} from '@/services/dashboards/constants/widget-container-config';
-import { widgetWidthAssigner } from '@/services/dashboards/helpers/widget-width-helper';
+} from '@/services/dashboard-shared/dashboard-detail/constants/widget-container-config';
+import { widgetWidthAssigner } from '@/services/dashboard-shared/dashboard-detail/helpers/widget-width-helper';
 
 
 /**
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper.ts
similarity index 91%
rename from apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper.ts
index d0464b125a..0b1b359357 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper.ts
@@ -2,7 +2,7 @@ import { orderBy } from 'lodash';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
-import { DASHBOARD_VARS_SCHEMA_PRESET } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
+import { DASHBOARD_VARS_SCHEMA_PRESET } from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-vars-schema-preset';
 
 export const getOrderedGlobalVariables = (variables: DashboardGlobalVariable[]): DashboardGlobalVariable[] => {
     const _presetKeys: string[] = Object.keys(DASHBOARD_VARS_SCHEMA_PRESET.properties);
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper.ts
similarity index 91%
rename from apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper.ts
index a3a89fb5f3..7b50033292 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper.ts
@@ -11,9 +11,9 @@ import type {
 
 import getRandomId from '@/lib/random-id-generator';
 
-import { getInheritingOptionKeys } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
-import { getWidgetOptionKeyByVariableKey } from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import type { UpdatableWidgetInfo } from '@/services/dashboards/widgets/_types/widget-type';
+import { getInheritingOptionKeys } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
+import { getWidgetOptionKeyByVariableKey } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import type { UpdatableWidgetInfo } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 /**
  * @description get updated widget info. if the property is not changed, it will be declared as undefined.
diff --git a/apps/web/src/services/dashboards/helpers/widget-theme-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/widget-theme-helper.ts
similarity index 84%
rename from apps/web/src/services/dashboards/helpers/widget-theme-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/helpers/widget-theme-helper.ts
index f842fa52e9..214d97d895 100644
--- a/apps/web/src/services/dashboards/helpers/widget-theme-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/widget-theme-helper.ts
@@ -1,5 +1,5 @@
-import type { WidgetThemeOption, WidgetThemeAssignedList } from '@/services/dashboards/constants/widget-container-config';
-import { WIDGET_THEMES } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetThemeOption, WidgetThemeAssignedList } from '@/services/dashboard-shared/dashboard-detail/constants/widget-container-config';
+import { WIDGET_THEMES } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 const WIDGET_THEME_LEN = WIDGET_THEMES.length;
 
diff --git a/apps/web/src/services/dashboards/helpers/widget-width-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/widget-width-helper.ts
similarity index 96%
rename from apps/web/src/services/dashboards/helpers/widget-width-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/helpers/widget-width-helper.ts
index 5a2e6a3bf3..ab026cb7d7 100644
--- a/apps/web/src/services/dashboards/helpers/widget-width-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/helpers/widget-width-helper.ts
@@ -7,7 +7,7 @@ import {
     WIDGET_WIDTH_RANGE_LIST,
     WIDGET_GAP,
     WIDGET_WIDTH_CRITERIA,
-} from '@/services/dashboards/constants/widget-container-config';
+} from '@/services/dashboard-shared/dashboard-detail/constants/widget-container-config';
 
 
 const isEveryWidthMax = (sizeRow: string[], widthRow: number[]): boolean => sizeRow.every((size, idx) => {
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardManageVariableForm.vue
similarity index 98%
rename from apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardManageVariableForm.vue
index acd9bc3b1b..4ac24523fd 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardManageVariableForm.vue
@@ -15,7 +15,7 @@ import getRandomId from '@/lib/random-id-generator';
 import { useFormValidator } from '@/common/composables/form-validator';
 
 import DashboardManageVariableOptionsField
-    from '@/services/dashboards/components/legacy/DashboardManageVariableOptionsField.vue';
+    from '@/services/dashboard-shared/dashboard-detail/legacy/DashboardManageVariableOptionsField.vue';
 import type {
     ManageVariableFormOption,
     ManageVariableOverlayStatus,
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableOptionsField.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardManageVariableOptionsField.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/legacy/DashboardManageVariableOptionsField.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardManageVariableOptionsField.vue
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardVariableDropdown.vue
similarity index 99%
rename from apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardVariableDropdown.vue
index 19e1fffa32..507a175ae9 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardVariableDropdown.vue
@@ -28,7 +28,7 @@ import { getVariableModelMenuHandler } from '@/lib/variable-models/variable-mode
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardVariables.vue
similarity index 94%
rename from apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardVariables.vue
index e63f868792..44a404c318 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardVariables.vue
@@ -10,9 +10,9 @@ import type { DashboardVariables, DashboardVariablesSchema } from '@/api-clients
 
 import ChangedMark from '@/common/components/marks/ChangedMark.vue';
 
-import DashboardVariableDropdown from '@/services/dashboards/components/legacy/DashboardVariableDropdown.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import DashboardVariableDropdown from '@/services/dashboard-shared/dashboard-detail/legacy/DashboardVariableDropdown.vue';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardWidgetContainer.vue
similarity index 89%
rename from apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardWidgetContainer.vue
index 94dbf7d843..553648239e 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/DashboardWidgetContainer.vue
@@ -11,25 +11,20 @@ import { PDataLoader } from '@cloudforet/mirinae';
 
 import type { DashboardLayoutWidgetInfo } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import WidgetFullModeModal from '@/services/dashboards/components/legacy/WidgetFullModeModal.vue';
-import {
-    useDashboardContainerWidth,
-} from '@/services/dashboards/composables/use-dashboard-container-width';
-import type { ReformedWidgetInfo } from '@/services/dashboards/composables/use-reformed-widget-info-list';
-import {
-    useReformedWidgetInfoList,
-} from '@/services/dashboards/composables/use-reformed-widget-info-list';
-import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+import { useDashboardContainerWidth } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-container-width';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import type { ReformedWidgetInfo } from '@/services/dashboard-shared/dashboard-detail/composables/use-reformed-widget-info-list';
+import { useReformedWidgetInfoList } from '@/services/dashboard-shared/dashboard-detail/composables/use-reformed-widget-info-list';
+import { getDashboardWidgetInfoList } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper';
+import type { WidgetFrameProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import type { WidgetExpose } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
-import type {
-    WidgetExpose, WidgetProps,
-} from '@/services/dashboards/widgets/_types/widget-type';
 
 
-type WidgetComponent = ComponentPublicInstance<WidgetProps, WidgetExpose>;
+
+type WidgetComponent = ComponentPublicInstance<WidgetFrameProps, WidgetExpose>;
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
diff --git a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/WidgetFullModeModal.vue
similarity index 91%
rename from apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/WidgetFullModeModal.vue
index 400028346d..67030db725 100644
--- a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/WidgetFullModeModal.vue
@@ -21,18 +21,18 @@ import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 import { gray } from '@/styles/colors';
 
-import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
-import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
-import DashboardToolsetDateDropdown from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
-import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
-import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { useWidgetFormStore } from '@/services/dashboards/stores/widget-form-store';
-import { getWidgetComponent } from '@/services/dashboards/widgets/_helpers/widget-component-helper';
+import DashboardToolsetDateDropdown from '@/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { getDashboardWidgetInfoList } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper';
+import DashboardVariables from '@/services/dashboard-shared/dashboard-detail/legacy/DashboardVariables.vue';
+import { getWidgetComponent } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-component-helper';
 import type {
     WidgetExpose, WidgetProps, WidgetTheme,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
+import { useWidgetFormStore } from '@/services/dashboard-shared/dashboard-detail/stores/widget-form-store';
+import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
+import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface WidgetFullModeModalProps {
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
index 0efb27f99f..d1d9bd475f 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
@@ -22,17 +22,17 @@ import { useAmcharts5 } from '@/common/composables/amcharts5';
 import { setXYSharedTooltipTextWithRate } from '@/common/composables/amcharts5/xy-chart-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetChartNoDataOverlay from '@/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { COMPLIANCE_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
+import WidgetChartNoDataOverlay from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { COMPLIANCE_STATUS_MAP } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
 import type {
     WidgetEmit, WidgetExpose, WidgetProps, Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 import countOfPassAndFailFindingsWidgetConfig
-    from '@/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
+    from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/widget-config.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/widget-config.ts
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue
similarity index 88%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue
index 09a9dc874f..5fcd09bebb 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue
@@ -23,23 +23,23 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { gray } from '@/styles/colors';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedPieChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedPieChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 import {
     getPieChartLegends,
-} from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import { getReferenceTypeOfDataField } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import { getReferenceTypeOfDataField } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import type { Field, WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, Legend, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/widget-config.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/widget-config.ts
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
index 632036cced..bd35f2c384 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
@@ -34,31 +34,31 @@ import { useProperRouteLocation } from '@/common/composables/proper-route-locati
 
 import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedXYChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 import {
     getDateAxisSettings,
     getXYChartLegends,
-} from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
 import {
     getWidgetDataTableRowLocation,
     getWidgetLocationFilters,
-} from '@/services/dashboards/widgets/_helpers/widget-location-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
 import {
     getRefinedDateTableData, getWidgetTableDateFields,
-} from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import { getWidgetValueLabel } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
+import type { Field, WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps,
     WidgetEmit,
     CostAnalyzeResponse, Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface SubData { date: string; value: number }
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/widget-config.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/widget-config.ts
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetDataTable.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_components/WidgetDataTable.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue
index b34f409e5e..574b196d9f 100644
--- a/apps/web/src/services/dashboards/widgets/_components/WidgetDataTable.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue
@@ -24,11 +24,11 @@ import { useTextOverflowState } from '@/common/composables/text-overflow-state';
 import { gray } from '@/styles/colors';
 import { MASSIVE_CHART_COLORS, DISABLED_LEGEND_COLOR } from '@/styles/colorsets';
 
-import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type {
     Field, WidgetTableData,
-} from '@/services/dashboards/widgets/_types/widget-data-table-type';
-import type { Legend } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
+import type { Legend } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 type TableSize = 'sm' | 'md';
 
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue
index 4fb9a9ff1d..e583ec0d33 100644
--- a/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue
@@ -26,7 +26,7 @@ import { useI18nDayjs } from '@/common/composables/i18n-dayjs';
 
 import { red } from '@/styles/colors';
 
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetTheme } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 export interface WidgetFrameProps {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-color-set.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set.ts
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget-color-set.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set.ts
index 059ae02a65..c269028160 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-color-set.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set.ts
@@ -3,8 +3,8 @@ import { computed, reactive } from 'vue';
 
 import { palette } from '@/styles/colors';
 
-import type { WidgetColorSetType, WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
-import { WIDGET_THEMES } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetColorSetType, WidgetTheme } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import { WIDGET_THEMES } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 const getColorSet = (theme: WidgetTheme, colorSetType: WidgetColorSetType = 'basic'): string[] => {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle.ts
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle.ts
index c42d1335ae..fbb3c35ef7 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle.ts
@@ -19,13 +19,13 @@ import type { Currency } from '@/store/display/type';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type { WidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import type { WidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import {
     validateWidgetByVariablesSchemaUpdate,
-} from '@/services/dashboards/widgets/_helpers/widget-validation-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper';
 import type {
     WidgetProps, WidgetEmit,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface UseWidgetLifecycleOptions<Data> {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-pagination.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination.ts
similarity index 84%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget-pagination.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination.ts
index 99aa78ccfa..705f2d8c53 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-pagination.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination.ts
@@ -1,7 +1,7 @@
 import type { UnwrapRef } from 'vue';
 import { computed, ref } from 'vue';
 
-import type { MergedBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
+import type { MergedBaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
 
 export const useWidgetPagination = (mergedState: UnwrapRef<MergedBaseWidgetState>) => {
     const thisPage = ref(1);
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state.ts
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state.ts
index d1ed9ca7ba..95bd9de665 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state.ts
@@ -10,15 +10,15 @@ import type {
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
-import { getInitialWidgetInheritOptions } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+import { getWidgetConfig } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-config-helper';
+import { getInitialWidgetInheritOptions } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 import {
     getRefinedWidgetOptions,
-} from '@/services/dashboards/widgets/_helpers/widget-options-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-helper';
 import {
     getInitialSchemaProperties, getRefinedSchemaProperties,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import { getWidgetInheritOptionsErrorMap } from '@/services/dashboards/widgets/_helpers/widget-validation-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import { getWidgetInheritOptionsErrorMap } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper';
 
 
 export interface MergedBaseWidgetState {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state.ts
index aea1a05272..6725f54598 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state.ts
@@ -10,13 +10,13 @@ import type {
 import { CURRENCY } from '@/store/display/constant';
 import type { Currency } from '@/store/display/type';
 
-import type { MergedBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
+import type { MergedBaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
 import {
     mergeBaseWidgetState,
-} from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
 import type {
     WidgetProps,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 /**
  * @description It returns states which is among the data generated by widget info and widget config through combination,
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters.ts
index 51ada452c9..c0a1f6451b 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters.ts
@@ -8,9 +8,9 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
 import type { WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
-import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import type { WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+import type { BaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import type { OverridableWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import type { WidgetProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export const useWidgetConsoleFilters = (props: WidgetProps, widgetState: UnwrapRef<BaseWidgetState>, overrides: OverridableWidgetState = {}): ComputedRef<ConsoleFilter[]> => {
     const queryHelper = new QueryHelper();
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range.ts
similarity index 76%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range.ts
index bfbf55324a..566765ecde 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range.ts
@@ -7,9 +7,9 @@ import dayjs from 'dayjs';
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import type { WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+import type { BaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import type { OverridableWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import type { WidgetProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export const useWidgetDateRange = (props: WidgetProps, widgetState: UnwrapRef<BaseWidgetState>, overrides: OverridableWidgetState = {}): ComputedRef<DateRange> => {
     if (isRef(overrides.dateRange)) return overrides.dateRange;
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
index ce84abae61..c80646a96f 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
@@ -10,10 +10,10 @@ import type { Currency } from '@/store/display/type';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
+import type { WidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getNonInheritedWidgetOptionNamesAmongUsedVariables } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import type { WidgetEmit, WidgetProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 import type { WidgetFrameProps } from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import type { WidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getNonInheritedWidgetOptionNamesAmongUsedVariables } from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import type { WidgetEmit, WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
 
 export interface WidgetFrameOptions {
     dateRange?: DateRange|ComputedRef<DateRange>;
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location.ts
index 20b7b9d67b..9afe71f994 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location.ts
@@ -19,10 +19,10 @@ import type { CloudServiceDetailPageUrlQuery } from '@/services/asset-inventory/
 import { DYNAMIC_COST_QUERY_SET_PARAMS } 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 type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getWidgetLocationFilters } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import type { WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+import type { BaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import type { OverridableWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getWidgetLocationFilters } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import type { WidgetProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 export const useWidgetLocation = (props: WidgetProps, baseState: UnwrapRef<BaseWidgetState>, dateRange: ComputedRef<DateRange>, overrides: OverridableWidgetState = {}) => {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget.ts
similarity index 77%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget.ts
index 1f054f6266..e4c4ead10d 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget.ts
@@ -14,13 +14,13 @@ import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type {
     BaseWidgetState,
-} from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import { useBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import { useWidgetConsoleFilters } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters';
-import { useWidgetDateRange } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-date-range';
-import { useWidgetFrame } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-frame';
-import { useWidgetLocation } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-location';
-import type { WidgetEmit, WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import { useBaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import { useWidgetConsoleFilters } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters';
+import { useWidgetDateRange } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range';
+import { useWidgetFrame } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame';
+import { useWidgetLocation } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location';
+import type { WidgetEmit, WidgetProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export interface OverridableWidgetState {
     dateRange?: DateRange|ComputedRef<DateRange>; // overrides dateRange
diff --git a/apps/web/src/services/dashboards/widgets/_constants/compliance-constant.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_constants/compliance-constant.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant.ts
diff --git a/apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema.ts
diff --git a/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts
new file mode 100644
index 0000000000..32fd8c5776
--- /dev/null
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts
@@ -0,0 +1,63 @@
+import type { AsyncComponent } from 'vue';
+
+import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-list-type';
+
+const BASE_WIDGET_COMPONENTS: Record<BaseWidgetConfigKey, AsyncComponent> = {
+    baseTrend: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue'),
+    }),
+    basePie: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue'),
+    }),
+    baseCountOfFindings: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue'),
+    }),
+};
+
+export const WIDGET_COMPONENTS: Record<WidgetConfigKey, AsyncComponent> = {
+    monthlyCost: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue'),
+    }),
+    budgetUsageSummary: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue'),
+    }),
+    costMap: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue'),
+    }),
+    costTrend: BASE_WIDGET_COMPONENTS.baseTrend,
+    costTrendStacked: BASE_WIDGET_COMPONENTS.baseTrend,
+    costSummaryMultiFields: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue'),
+    }),
+    costPie: BASE_WIDGET_COMPONENTS.basePie,
+    costDonut: BASE_WIDGET_COMPONENTS.basePie,
+    costByRegion: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue'),
+    }),
+    costByRegionMultiFields: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue'),
+    }),
+    budgetStatus: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue'),
+    }),
+    budgetUsageByTarget: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue'),
+    }),
+    severityStatusByService: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue'),
+    }),
+    countOfFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
+    countOfPassAndFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
+    trendOfPassAndFailFindings: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue'),
+    }),
+    totalFailFindingsStatus: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue'),
+    }),
+    totalFailFindingsHistory: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue'),
+    }),
+    complianceStatus: () => ({
+        component: import('@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue'),
+    }),
+};
diff --git a/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts
new file mode 100644
index 0000000000..8b82f4c084
--- /dev/null
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts
@@ -0,0 +1,87 @@
+/* eslint-disable import/order */
+// base widgets
+import baseCountOfFindings from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/widget-config';
+import basePie from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-pie/widget-config';
+import baseTrend from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_base-widgets/base-trend/widget-config';
+
+// console widgets
+import complianceStatus from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config';
+import countOfFailFindings from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config';
+import countOfPassAndFailFindings from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
+import severityStatusByService from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config';
+import totalFailFindingsHistory from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config';
+import totalFailFindingsStatus from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config';
+import trendOfPassAndFailFindings from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config';
+import budgetStatus from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config';
+import budgetUsageByTarget from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config';
+import budgetUsageSummary from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config';
+import costByRegionMultiFields from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config';
+import costByRegion from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config';
+import costDonut from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config';
+import costMap from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config';
+import costPie from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config';
+import costSummaryMultiFields from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config';
+import costTrendStacked from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config';
+import costTrend from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config';
+import monthlyCost from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config';
+
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
+import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-list-type';
+
+export const BASE_WIDGET_CONFIG_KEYS = [
+    'baseTrend',
+    'basePie',
+    'baseCountOfFindings',
+] as const;
+export const CONSOLE_WIDGET_CONFIG_KEYS = [
+    'monthlyCost',
+    'budgetUsageSummary',
+    'costMap',
+    'costTrend',
+    'costTrendStacked',
+    'costSummaryMultiFields',
+    'costPie',
+    'costDonut',
+    'costByRegion',
+    'costByRegionMultiFields',
+    'budgetStatus',
+    'budgetUsageByTarget',
+    'severityStatusByService',
+    'countOfFailFindings',
+    'countOfPassAndFailFindings',
+    'trendOfPassAndFailFindings',
+    'totalFailFindingsStatus',
+    'totalFailFindingsHistory',
+    'complianceStatus',
+] as const;
+
+
+export const CONSOLE_WIDGET_CONFIGS: Record<WidgetConfigKey, Partial<WidgetConfig>> = {
+    // Cost Widgets
+    monthlyCost,
+    budgetUsageSummary,
+    costMap,
+    costTrend,
+    costTrendStacked,
+    costSummaryMultiFields,
+    costPie,
+    costDonut,
+    costByRegion,
+    costByRegionMultiFields,
+    budgetStatus,
+    budgetUsageByTarget,
+    // Asset Widgets
+    severityStatusByService,
+    countOfFailFindings,
+    countOfPassAndFailFindings,
+    trendOfPassAndFailFindings,
+    totalFailFindingsStatus,
+    totalFailFindingsHistory,
+    complianceStatus,
+};
+
+export const BASE_WIDGET_CONFIGS: Record<BaseWidgetConfigKey, Partial<WidgetConfig>> = {
+    baseTrend,
+    basePie,
+    baseCountOfFindings,
+};
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-constant.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-constant.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_constants/widget-constant.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-constant.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
similarity index 97%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
index 9619e60bc5..5965cb2597 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
@@ -1,7 +1,7 @@
 import { range } from 'lodash';
 import { describe, it, expect } from 'vitest';
 
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import { getRefinedXYChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 
 interface SubData {
     date: string;
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-config-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-config-helper.test.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-config-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-config-helper.test.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
index b7f20f2a23..9077d786dc 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
@@ -7,7 +7,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/api-cl
 import {
     getInheritingOptionKeys,
     getInitialWidgetInheritOptions,
-} from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 
 
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
index 61d4f9a8a7..359560bdc2 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
@@ -1,6 +1,6 @@
 import type { WidgetFilterKey, WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
-import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
+import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper';
 
 
 describe('[Widget Options Filters Helper] setFilterAndGetWidgetFiltersMap', () => {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-schema-helper.test.ts
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-schema-helper.test.ts
index 611ed71954..5124b9f446 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-schema-helper.test.ts
@@ -6,7 +6,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/
 import {
     getInitialSchemaProperties, getNonInheritedWidgetOptionNamesAmongUsedVariables,
     getRefinedSchemaProperties, getWidgetOptionKeyByVariableKey,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
 
 const DEFAULT_WIDGET_CONFIG = {
     widget_config_id: 'test',
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-value-label-helper.test.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
index 2f2235dbac..fa2d73a449 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
@@ -1,7 +1,7 @@
 import { describe } from 'vitest';
 
+import { getWidgetValueLabel } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
 
 const mockAllReferenceTypeInfo: AllReferenceTypeInfo = {
     provider: {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-data-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-chart-data-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper.ts
index 56b8c76c55..2a04ef6a40 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper.ts
@@ -6,10 +6,10 @@ import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_const
 import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
 
-import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type {
     Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface RawData {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-component-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-component-helper.ts
similarity index 66%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-component-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-component-helper.ts
index 6b2d7c6b44..19fe2f550c 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-component-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-component-helper.ts
@@ -1,7 +1,7 @@
 import type { AsyncComponent } from 'vue';
 
-import { WIDGET_COMPONENTS } from '@/services/dashboards/widgets/_constants/widget-components-constant';
-import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
+import { WIDGET_COMPONENTS } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-components-constant';
+import { getWidgetConfig } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-config-helper';
 
 export const getWidgetComponent = (widgetConfigId: string): AsyncComponent => {
     const config = getWidgetConfig(widgetConfigId);
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-config-helper.ts
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-config-helper.ts
index 95382780f0..3cff00f02b 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-config-helper.ts
@@ -2,7 +2,7 @@ import { mergeWith } from 'lodash';
 
 import type { WidgetConfig, BaseConfigInfo } from '@/api-clients/dashboard/_types/widget-type';
 
-import { BASE_WIDGET_CONFIGS, CONSOLE_WIDGET_CONFIGS } from '@/services/dashboards/widgets/_constants/widget-config-list-constant';
+import { BASE_WIDGET_CONFIGS, CONSOLE_WIDGET_CONFIGS } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant';
 
 const _mergeCustomizer = (val1, val2) => {
     if (Array.isArray(val1)) return [...new Set(val1.concat(val2))];
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper.ts
index 33f483d994..9397ac6990 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper.ts
@@ -8,7 +8,7 @@ import type { WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-typ
 
 import { arrayToQueryString, queryStringToArray } from '@/lib/router-query-string';
 
-import type { WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import type { WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 
 
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper.ts
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper.ts
index 7b3afd3aa5..1b172fdc5c 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper.ts
@@ -6,7 +6,7 @@ import type { WidgetFiltersMap, WidgetFilterKey } from '@/api-clients/dashboard/
 
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
-import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES } from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
+import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema';
 
 
 /**
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-helper.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-helper.ts
index 693c64929f..870d28d2e3 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-helper.ts
@@ -5,7 +5,7 @@ import type {
     InheritOptions, WidgetConfig, WidgetOptions, WidgetFilterKey,
 } from '@/api-clients/dashboard/_types/widget-type';
 
-import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
+import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper';
 
 
 export const getRefinedWidgetOptions = (
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator.ts
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator.ts
index 23bcb62a2d..ccd685afc3 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator.ts
@@ -3,7 +3,7 @@ import type { WidgetOptionKey, WidgetOptionsSchema, WidgetOptionsSchemaProperty
 import {
     MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES,
     MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES,
-} from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema';
 
 type CustomOptionTuple = [WidgetOptionKey, Partial<WidgetOptionsSchemaProperty>];
 export const getWidgetOptionsSchema = (options: (WidgetOptionKey|CustomOptionTuple)[]): WidgetOptionsSchema => {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper.ts
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper.ts
index 72b4dad4b8..7875d0e142 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper.ts
@@ -5,7 +5,10 @@ import type {
     InheritOptions, WidgetConfig, WidgetFilterOptionKey, WidgetOptions, WidgetOptionsSchema,
 } from '@/api-clients/dashboard/_types/widget-type';
 
-import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES, MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES } from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
+import {
+    MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES,
+    MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES,
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema';
 
 const VAR_KEY_TO_OPTION_KEY_MAP = {};
 Object.entries(MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES).forEach(([optionKey, property]) => {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper.ts
similarity index 97%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper.ts
index 52a580f5bd..498ddd2be5 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper.ts
@@ -8,8 +8,8 @@ import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { ManagedVariableModelKey } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
+import type { Field } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import type { Field } from '@/services/dashboards/widgets/_types/widget-data-table-type';
 
 /**
  * @name getWidgetTableDateFields
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper.ts
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper.ts
index 75898b3090..03b064aaac 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper.ts
@@ -10,12 +10,12 @@ import type {
     WidgetOptionsSchema,
 } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getUpdatedWidgetInfo } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
-import { getInheritingOptionKeys } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+import { getUpdatedWidgetInfo } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper';
+import { getInheritingOptionKeys } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 import {
     getWidgetOptionKeyByVariableKey,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import type { UpdatableWidgetInfo } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import type { UpdatableWidgetInfo } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 export const getWidgetInheritOptionsErrorMap = (
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-value-label-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-value-label-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/_types/compliance-type.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type.ts
similarity index 66%
rename from apps/web/src/services/dashboards/widgets/_types/compliance-type.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type.ts
index 481ca5530f..eb0212940d 100644
--- a/apps/web/src/services/dashboards/widgets/_types/compliance-type.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type.ts
@@ -1,4 +1,4 @@
-import type { SEVERITY_STATUS_MAP, COMPLIANCE_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
+import type { SEVERITY_STATUS_MAP, COMPLIANCE_STATUS_MAP } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
 
 export type Severity = keyof typeof SEVERITY_STATUS_MAP;
 export type ComplianceStatus = keyof typeof COMPLIANCE_STATUS_MAP;
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-data-table-type.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_types/widget-data-table-type.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type.ts
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-list-type.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-list-type.ts
similarity index 67%
rename from apps/web/src/services/dashboards/widgets/_types/widget-list-type.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-list-type.ts
index a6c62b1fb7..a618123e6b 100644
--- a/apps/web/src/services/dashboards/widgets/_types/widget-list-type.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-list-type.ts
@@ -1,7 +1,7 @@
 import type {
     BASE_WIDGET_CONFIG_KEYS,
     CONSOLE_WIDGET_CONFIG_KEYS,
-} from '@/services/dashboards/widgets/_constants/widget-config-list-constant';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant';
 
 export type WidgetConfigKey = typeof CONSOLE_WIDGET_CONFIG_KEYS[number];
 export type BaseWidgetConfigKey = typeof BASE_WIDGET_CONFIG_KEYS[number];
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-type.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_types/widget-type.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type.ts
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
index 69ff05fcc9..ff89c88ba7 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
@@ -19,14 +19,14 @@ import { i18n } from '@/translations';
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import {
     COMPLIANCE_STATUS_MAP, SEVERITY_STATUS_MAP,
-} from '@/services/dashboards/widgets/_constants/compliance-constant';
-import type { Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import type { Severity } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config.ts
similarity index 86%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config.ts
index 4ef09eecb0..bc890a9f8e 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const complianceStatusWidgetConfig: WidgetConfig = {
     widget_config_id: 'complianceStatus',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
index 8a7ff243ff..e6bd95b4ea 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
@@ -1,7 +1,7 @@
 import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const countOfFailFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'countOfFailFindings',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
index 64ee6aaa85..7ef41d2be7 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
@@ -1,7 +1,7 @@
 import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const countOfPassAndFailFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'countOfPassAndFailFindings',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
index 3779b97896..4a06a08b12 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
@@ -14,12 +14,12 @@ import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-ser
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { SEVERITY_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
-import type { ComplianceStatus, Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { SEVERITY_STATUS_MAP } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import type { ComplianceStatus, Severity } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config.ts
similarity index 86%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config.ts
index 1906823970..ee14b32fe7 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const severityStatusByServiceWidgetConfig: WidgetConfig = {
     widget_config_id: 'severityStatusByService',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
index 1d40db1693..3fc7ed9b6b 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
@@ -25,14 +25,14 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { red, green } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { SEVERITY_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
-import { getDateAxisSettings } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import type { Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { SEVERITY_STATUS_MAP } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import { getDateAxisSettings } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import type { Severity } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 interface XYChartData {
     date?: string;
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
similarity index 88%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
index 7002896ba8..eb52b7b214 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
@@ -1,7 +1,7 @@
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const totalFailFindingsHistoryWidgetConfig: WidgetConfig = {
     widget_config_id: 'totalFailFindingsHistory',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
index d04a3fa5f2..fd3c7dc150 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
@@ -17,13 +17,13 @@ import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-ser
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { SEVERITY_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
-import type { Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { SEVERITY_STATUS_MAP } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import type { Severity } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
index ec0db72670..a554adb8cd 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const totalFailFindingsStatusWidgetConfig: WidgetConfig = {
     widget_config_id: 'totalFailFindingsStatus',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
index 1fab8fe3cc..91b15197e9 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
@@ -19,27 +19,28 @@ import { useAmcharts5 } from '@/common/composables/amcharts5';
 import { setXYSharedTooltipTextWithRate } from '@/common/composables/amcharts5/xy-chart-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetChartNoDataOverlay from '@/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { COMPLIANCE_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
+import WidgetChartNoDataOverlay from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { COMPLIANCE_STATUS_MAP } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_constants/compliance-constant';
 import {
     getDateAxisSettings,
-} from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
 import {
     getReferenceTypeOfDataField, getRefinedDateTableData, getWidgetTableDateFields,
-} from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import type { Field } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import type { Field } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps,
     WidgetEmit,
     Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
+
 
 
 interface ChartDataResult {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
index 2a34f114b7..a3d7e28a77 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
@@ -1,7 +1,7 @@
 import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const trendOfPassAndFailFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'trendOfPassAndFailFindings',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
index 4094e981a7..5480a86322 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
@@ -16,12 +16,12 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { indigo, red, yellow } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import type {
     WidgetEmit, WidgetExpose, WidgetProps, Legend, BudgetUsageAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config.ts
index c188ba39d5..ed6c1ff4af 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 
 const budgetStatusWidgetConfig: WidgetConfig = {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
index f0abe2ca57..b225fa45f5 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
@@ -16,15 +16,15 @@ import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-c
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import type { Field, WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, BudgetUsageAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
index 379de2dc4c..71c9d90121 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
@@ -1,7 +1,7 @@
 import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const budgetUsageByTargetWidgetConfig: WidgetConfig = {
     widget_config_id: 'budgetUsageByTarget',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
index 489f65c343..a9a47bfac1 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
@@ -25,11 +25,11 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { indigo, red, gray } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getDateAxisSettings } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getDateAxisSettings } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config.ts
index 4ebab30add..4c528f24fa 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config.ts
@@ -1,7 +1,7 @@
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const budgetUsageSummaryConfig: WidgetConfig = {
     widget_config_id: 'budgetUsageSummary',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
index 835ce5cddf..2af3b92abf 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
@@ -21,22 +21,23 @@ import type { RegionReferenceMap } from '@/store/reference/region-reference-stor
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getPieChartLegends } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import { getReferenceTypeOfDataField } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getPieChartLegends } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import { getReferenceTypeOfDataField } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import { getWidgetValueLabel } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
+import type { Field, WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit,
     Legend, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
+
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
index fb1343ae4d..db7d406095 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costByRegionMultiFieldsWidgetConfig: WidgetConfig = {
     widget_config_id: 'costByRegionMultiFields',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
index 73f15ff3e8..e624f73fdc 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
@@ -24,24 +24,24 @@ import type { RegionReferenceMap } from '@/store/reference/region-reference-stor
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getXYChartLegends } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getXYChartLegends } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import type { Field, WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, Legend, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 import type {
     Data,
     MapChartData,
-} from '@/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
 import {
     getRefinedMapChartData,
-} from '@/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
 
 
 type FullData = CostAnalyzeResponse<Data>;
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config.ts
index d367986be0..9acc071645 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costByRegionWidgetConfig: WidgetConfig = {
     widget_config_id: 'costByRegion',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config.ts
index b655413936..5f6e1f351c 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costDonutWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costDonut',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue
index 8fd2a1544f..dbc32d93fb 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue
@@ -18,12 +18,12 @@ import type { CostDataField } from '@/api-clients/dashboard/_types/widget-type';
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 import type {
     AnalyzeRawData, TreemapChartData,
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
similarity index 85%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
index 708871b383..3a0babfe28 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
@@ -2,8 +2,8 @@ import {
     gray, palette, transparent, white,
 } from '@/styles/colors';
 
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
-import type { TreemapChartData } from '@/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper';
+import type { WidgetTheme } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { TreemapChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-chart-data-helper';
 
 export const setThemeColorsToTreemapData = (treemapData: TreemapChartData['children'], theme?: WidgetTheme): TreemapChartData['children'] => {
     const themeColorName: WidgetTheme = theme || 'violet';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config.ts
index fb0c097418..4269f29577 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config.ts
@@ -1,7 +1,7 @@
 import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costMapWidgetConfig: WidgetConfig = {
     widget_config_id: 'costMap',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config.ts
index f1f9c85423..f90a9c8fad 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costPieWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costPie',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
index 75295a02e5..56a684a064 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
@@ -25,23 +25,23 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { gray } from '@/styles/colors';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
-import { getXYChartLegends } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import { getReferenceTypeOfDataField } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedXYChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
+import { getXYChartLegends } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import { getReferenceTypeOfDataField } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import { getWidgetValueLabel } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
+import type { Field, WidgetTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetEmit, WidgetExpose, WidgetProps,
     CostAnalyzeResponse, Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
similarity index 93%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
index d5e77a4697..95e98565f6 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costSummaryMultiFieldsWidgetConfig: WidgetConfig = {
     widget_config_id: 'costSummaryMultiFields',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
index 3706a2a329..e56d8cac0c 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costTrendStackedWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costTrendStacked',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config.ts
index 8ad71ca15f..3d78af8be1 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costTrendWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costTrend',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
index 44eccec8f7..e8640c88b9 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
@@ -27,16 +27,16 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { green, red, gray } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
-import { getDateAxisSettings } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getRefinedDateTableData } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
+import WidgetFrame from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedXYChartData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
+import { getDateAxisSettings } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getRefinedDateTableData } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 const chartContext = ref<HTMLElement | null>(null);
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config.ts
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config.ts
index fcc061cc82..4b5201036c 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config.ts
@@ -1,7 +1,7 @@
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 
 const monthlyCostWidgetConfig: WidgetConfig = {
diff --git a/apps/web/src/services/dashboards/shared/stores/dashboard-detail-info-store.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store.ts
similarity index 97%
rename from apps/web/src/services/dashboards/shared/stores/dashboard-detail-info-store.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store.ts
index c02185ba05..0c145c001c 100644
--- a/apps/web/src/services/dashboards/shared/stores/dashboard-detail-info-store.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store.ts
@@ -27,7 +27,7 @@ import { useUserStore } from '@/store/user/user-store';
 import getRandomId from '@/lib/random-id-generator';
 import WorkspaceVariableModel from '@/lib/variable-models/managed-model/resource-model/workspace-variable-model';
 
-import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/dashboards/constants/dashboard-managed-variables-schema';
+import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/dashboard-shared/dashboard-detail/constants/dashboard-managed-variables-schema';
 
 // const DEFAULT_REFRESH_INTERVAL = '5m';
 const DEFAULT_REFRESH_INTERVAL = 'off';
@@ -95,6 +95,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
         } as DashboardGlobalVariablesSchema,
         variablesInitMap: {} as Record<string, boolean>,
         showDateRangeNotification: true,
+        variableImportModalVisible: false,
         // only for admin
         selectedWorkspaceId: undefined as string | undefined,
         // widget info states
@@ -168,6 +169,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     const setProjectId = (projectId?: string) => { state.projectId = projectId; };
     const setShowDateRangeNotification = (visible: boolean) => { state.showDateRangeNotification = visible; };
     const setSelectedWorkspaceId = (workspaceId?: string) => { state.selectedWorkspaceId = workspaceId; };
+    const setVariableImportModalVisible = (visible: boolean) => { state.variableImportModalVisible = visible; };
     /* Actions */
     const reset = () => {
         // set default value of all state
@@ -282,6 +284,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
         setProjectId,
         setShowDateRangeNotification,
         setSelectedWorkspaceId,
+        setVariableImportModalVisible,
     };
     const actions = {
         reset,
diff --git a/apps/web/src/services/dashboards/stores/widget-form-store.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/stores/widget-form-store.ts
similarity index 91%
rename from apps/web/src/services/dashboards/stores/widget-form-store.ts
rename to apps/web/src/services/dashboard-shared/dashboard-detail/stores/widget-form-store.ts
index 3c16520566..7e32138285 100644
--- a/apps/web/src/services/dashboards/stores/widget-form-store.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/stores/widget-form-store.ts
@@ -13,13 +13,13 @@ import type {
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
+import { getUpdatedWidgetInfo } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-widget-info-helper';
+import { mergeBaseWidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
+import { getWidgetOptionsSchema } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
+import type { UpdatableWidgetInfo } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 import { useWidgetTitleInput } from '@/services/dashboards/composables/use-widget-title-input';
-import { getUpdatedWidgetInfo } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
 import type { MergedBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
-import { mergeBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
-import type { UpdatableWidgetInfo } from '@/services/dashboards/widgets/_types/widget-type';
 
 
 /* Description
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
index 83b8a9f0d5..3a2dd74a0f 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
@@ -16,13 +16,13 @@ import { useUserStore } from '@/store/user/user-store';
 
 import { gray } from '@/styles/colors';
 
+import DashboardLabelsButton from '@/services/dashboard-shared/dashboard-detail/components/DashboardLabelsButton.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 import DashboardControlButtons from '@/services/dashboards/components/dashboard-detail/DashboardControlButtons.vue';
 import { useDashboardControlMenuItems } from '@/services/dashboards/composables/use-dashboard-control-menu-items';
 import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import DashboardLabelsButton from '@/services/dashboards/shared/components/DashboardLabelsButton.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
index 5db778f6b1..f272a1db7d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
@@ -9,50 +9,38 @@ import {
 } from '@cloudforet/mirinae';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
 import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
 
-// import { useDashboardRouteContext } from '@/services/dashboard-shared/composables/use-dashboard-route-context';
 import DashboardManageVariableImportModalTree
-    from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue';
-import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardManageVariableImportModalTree.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { getOrderedGlobalVariables } from '@/services/dashboard-shared/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
 
 
 interface Props {
-    visible: boolean;
     dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
 }
-const appContextStore = useAppContextStore();
 const userStore = useUserStore();
-const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:visible', value: boolean): void;}>();
+const props = withDefaults(defineProps<Props>(), {
+    dashboardItems: () => [],
+    folderItems: () => [],
+});
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
 const dashboardId = computed(() => props.dashboardId);
-// const {
-//     entryPoint,
-// } = useDashboardRouteContext();
-
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-} = useDashboardQuery();
-const {
-    publicFolderList,
-    privateFolderList,
-} = useDashboardFolderQuery();
 
 const {
     dashboard,
@@ -63,27 +51,15 @@ const {
 });
 const queryClient = useQueryClient();
 
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
-
 const state = reactive({
-    proxyVisible: useProxyValue<boolean>('visible', props, emit),
     currentDashboardId: computed<string>(() => dashboardId.value || ''),
     currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboard.value?.vars_schema?.properties ?? {})),
     keyword: '',
     selectedDashboardId: '' as string|undefined,
-    publicDashboardItems: computed<PublicDashboardModel[]>(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0' && d.dashboard_id !== state.currentDashboardId);
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed<PrivateDashboardModel[]>(() => privateDashboardList.value.filter((d) => d.version !== '1.0' && d.dashboard_id !== state.currentDashboardId)),
-    publicFolderItems: computed(() => {
-        if (storeState.isAdminMode) return publicFolderList.value;
-        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateFolderItems: computed(() => privateFolderList.value),
+    publicDashboardItems: computed<PublicDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('public') && d.dashboard_id !== state.currentDashboardId)),
+    privateDashboardItems: computed<PrivateDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('private') && d.dashboard_id !== state.currentDashboardId)),
+    publicFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('public'))),
+    privateFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('private'))),
     allDashboardItems: computed<PrivateDashboardModel[]>(() => [...state.publicDashboardItems, ...state.privateDashboardItems]),
     selectedDashboardVariables: computed<DashboardGlobalVariable[]>(() => {
         const selectedDashboard = state.allDashboardItems.find((item) => item.dashboard_id === state.selectedDashboardId);
@@ -115,7 +91,7 @@ const { mutate } = useMutation(
             ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
         },
         onSettled() {
-            state.proxyVisible = false;
+            dashboardDetailStore.setVariableImportModalVisible(false);
         },
     },
 );
@@ -148,6 +124,9 @@ const handleConfirmImportVariables = () => {
         },
     });
 };
+const handleUpdateVariableImportModalVisible = (visible: boolean) => {
+    dashboardDetailStore.setVariableImportModalVisible(visible);
+};
 
 const isDuplicatedVariableName = (variable: DashboardGlobalVariable): boolean => state.currentDashboardVariables.some((currentVariable) => currentVariable.name === variable.name
     || currentVariable.key === variable.key);
@@ -168,8 +147,9 @@ watch(() => state.selectedDashboardId, () => {
 <template>
     <p-button-modal class="dashboard-manage-variable-import-modal"
                     :header-title="$t('DASHBOARDS.DETAIL.VARIABLES.IMPORT_MODAL_HEADER')"
-                    :visible.sync="state.proxyVisible"
+                    :visible="dashboardDetailState.variableImportModalVisible"
                     :disabled="!state.selectedVariableKeys.length"
+                    @update:visible="handleUpdateVariableImportModalVisible"
                     @confirm="handleConfirmImportVariables"
     >
         <template #body>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
index 559a4be76c..44e79eaf5a 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
@@ -17,8 +17,8 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
 
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
index 407fe62a5f..e3aff72129 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
@@ -17,9 +17,9 @@ import { copyAnyData } from '@/lib/helper/copy-helper';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
 import type { SharedDashboardInfo } from '@/services/dashboards/types/shared-dashboard-type';
 
 
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
index 4b5ea67253..8a741c509d 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
@@ -7,7 +7,7 @@ import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 interface UseDashboardManageableOptions {
     dashboardId: ComputedRef<string|undefined>;
diff --git a/apps/web/src/services/dashboards/helpers/widget-migration-helper.ts b/apps/web/src/services/dashboards/helpers/widget-migration-helper.ts
deleted file mode 100644
index ee03f42b14..0000000000
--- a/apps/web/src/services/dashboards/helpers/widget-migration-helper.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-// import { cloneDeep } from 'lodash';
-//
-//
-// import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-// import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
-//
-// import type { ComparisonValue } from '@/common/modules/widgets/_widget-fields/comparison/type';
-// import type { WidgetHeaderValue } from '@/common/modules/widgets/_widget-fields/header/type';
-// import type {
-//     TableDataFieldValueNoVersion,
-//     TableDataFieldValueV1,
-// } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
-// import { LATEST_TABLE_DATA_FIELD_VERSION } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
-// import type { WidgetFieldName } from '@/common/modules/widgets/types/widget-field-type';
-// import type { WidgetFieldValues } from '@/common/modules/widgets/types/widget-field-value-type';
-//
-//
-// type WidgetOptions = Record<WidgetFieldName, WidgetFieldValues>;
-//
-// /**
-//  * XY Chart (Line Chart, Area Chart, Column Chart)
-//  * Data Field & Group by -> Table Data Field V1
-//  * Table Data Field No Version -> Table Data Field V1
-//  * Legend: value type is changed
-//  */
-// const _migrateXYChart = (widget: PublicWidgetModel|PrivateWidgetModel, groupByField: string): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options = cloneDeep(widget.options);
-//
-//     const _dataFieldToTableDataFieldV1 = () => {
-//         if (_options?.[groupByField]?.value) {
-//             _options = {
-//                 ..._options,
-//                 tableDataField: {
-//                     fieldType: 'dynamicField',
-//                     dynamicFieldInfo: {
-//                         criteria: _options.dataField,
-//                         fieldValue: _options[groupByField].value,
-//                         valueType: 'auto',
-//                         count: _options?.[groupByField]?.count || 5,
-//                     },
-//                     version: 'v1',
-//                 } as TableDataFieldValueV1,
-//             };
-//         } else {
-//             _options = {
-//                 ..._options,
-//                 tableDataField: {
-//                     fieldType: 'staticField',
-//                     staticFieldInfo: {
-//                         fieldValue: [_options.dataField],
-//                     },
-//                     version: 'v1',
-//                 } as TableDataFieldValueV1,
-//             };
-//         }
-//         delete _options?.dataField;
-//         delete _options?.[groupByField];
-//     };
-//     const _tableDataFieldNoVersionToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: migrateTableDataField(_options.tableDataField),
-//         };
-//     };
-//     if ('dataField' in _options) {
-//         _dataFieldToTableDataFieldV1();
-//     } else if (_options?.tableDataField
-//         && (!('version' in _options.tableDataField) || _options.tableDataField.version !== LATEST_TABLE_DATA_FIELD_VERSION)) {
-//         _tableDataFieldNoVersionToTableDataFieldV1();
-//     }
-//
-//     // Legend version migration
-//     // no version
-//     if (_options?.legend && !_options.legend?.toggleValue) {
-//         _options = {
-//             ..._options,
-//             legend: {
-//                 toggleValue: true,
-//             },
-//         };
-//     }
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * Clustered Column Chart
-//  * Data Field -> Table Data Field V1
-//  * Table Data Field No Version -> Table Data Field V1
-//  */
-// const _migrateClusteredColumnChart = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//
-//     const _dataFieldToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: {
-//                 fieldType: 'staticField',
-//                 staticFieldInfo: {
-//                     fieldValue: _options.dataField,
-//                 },
-//                 version: 'v1',
-//             },
-//         };
-//         delete _options?.dataField;
-//     };
-//     const _tableDataFieldNoVersionToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: migrateTableDataField(_options.tableDataField),
-//         };
-//     };
-//     if ('dataField' in _options) {
-//         _dataFieldToTableDataFieldV1();
-//     } else if ('tableDataField' in _options
-//         && (!('version' in _options.tableDataField) || _options.tableDataField.version !== LATEST_TABLE_DATA_FIELD_VERSION)) {
-//         _tableDataFieldNoVersionToTableDataFieldV1();
-//     }
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * Heatmap
-//  * Data Field & YAxis -> Table Data Field V1
-//  */
-// const _migrateHeatmap = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//
-//     const _dataFieldToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: {
-//                 fieldType: 'dynamicField',
-//                 dynamicFieldInfo: {
-//                     criteria: _options.dataField,
-//                     fieldValue: _options.yAxis?.value,
-//                     valueType: 'auto',
-//                     count: _options.yAxis?.count || 7,
-//                 },
-//                 version: 'v1',
-//             } as TableDataFieldValueV1,
-//         };
-//         delete _options?.dataField;
-//         delete _options?.yAxis;
-//     };
-//
-//     if ('dataField' in _options) {
-//         _dataFieldToTableDataFieldV1();
-//     }
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * Table
-//  * Table Data Field No Version -> Table Data Field V1
-//  */
-// const migrateTable = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//     // Table Data Field version migration
-//     if (_options?.tableDataField
-//         && (!('version' in _options.tableDataField) || _options.tableDataField.version !== LATEST_TABLE_DATA_FIELD_VERSION)) {
-//         _options = {
-//             ..._options,
-//             tableDataField: migrateTableDataField(_options.tableDataField),
-//         };
-//     }
-//     // Comparison version migration
-//     _options = {
-//         ..._options,
-//         comparison: migrateComparison(_options?.comparison),
-//     };
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * NumberCard
-//  * Change Comparison Value Type (ComparisonValue[] -> ComparisonValue)
-//  */
-// const migrateNumberCard = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//     // Comparison version migration
-//     _options = {
-//         ..._options,
-//         comparison: migrateComparison(_options.comparison),
-//     };
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /*
-// * All Widgets
-// * Widget Header: set toggleValue to true if widgetHeader exists but toggleValue is missing
-// */
-// const migrateAllWidgets = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>): Array<PublicWidgetModel|PrivateWidgetModel> => {
-//     const _migratedWidgets: Array<PublicWidgetModel|PrivateWidgetModel> = cloneDeep(dashboardWidgets);
-//     _migratedWidgets.forEach((widget) => {
-//         // Widget Header
-//         const _widgetOptions: WidgetOptions = cloneDeep(widget?.options);
-//         const _widgetHeaderOption = cloneDeep(widget?.options?.widgetHeader) as WidgetHeaderValue;
-//         if (_widgetHeaderOption && (_widgetHeaderOption?.toggleValue === undefined)) {
-//             widget.options = {
-//                 ..._widgetOptions,
-//                 widgetHeader: {
-//                     ..._widgetHeaderOption,
-//                     toggleValue: true,
-//                 },
-//             };
-//         }
-//     });
-//     return _migratedWidgets;
-// };
-//
-//
-// export const migrateLegacyWidgetOptions = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>): Array<PublicWidgetModel|PrivateWidgetModel> => {
-//     // let isMigrated = false;
-//     let migratedWidgets = dashboardWidgets.map((widget) => {
-//         if (widget.widget_type === 'lineChart' || widget.widget_type === 'stackedAreaChart') {
-//             return _migrateXYChart(widget, 'lineBy');
-//         }
-//         if (widget.widget_type === 'stackedColumnChart' || widget.widget_type === 'stackedHorizontalBarChart') {
-//             return _migrateXYChart(widget, 'stackBy');
-//         }
-//         if (widget.widget_type === 'clusteredColumnChart') {
-//             return _migrateClusteredColumnChart(widget);
-//         }
-//         if (widget.widget_type === 'heatmap') {
-//             return _migrateHeatmap(widget);
-//         }
-//         if (widget.widget_type === 'table') {
-//             return migrateTable(widget);
-//         }
-//         if (widget.widget_type === 'numberCard') {
-//             return migrateNumberCard(widget);
-//         }
-//         return widget;
-//     });
-//     migratedWidgets = migrateAllWidgets(migratedWidgets);
-//     return migratedWidgets;
-// };
-//
-// /** Option Migration Helper */
-//
-// /** Table Data Field Migration
-//  * Widgets: [Table, Line Chart, Clustered Column Chart]
-//  * Latest Version: v1
-//  */
-// type LegacyTableDataFieldValue = TableDataFieldValueNoVersion | any;
-// type LatestTableDataFieldValue = TableDataFieldValueV1;
-// const migrateTableDataField = (tableDataField: LegacyTableDataFieldValue): LatestTableDataFieldValue => {
-//     switch (tableDataField.version) {
-//     case undefined: { // no-version -> v1
-//         const legacyTableDataField = tableDataField as TableDataFieldValueNoVersion;
-//         if (legacyTableDataField.fieldType === 'staticField') {
-//             const _fieldValue = legacyTableDataField.value as string[] | undefined;
-//             return {
-//                 fieldType: 'staticField',
-//                 staticFieldInfo: {
-//                     fieldValue: _fieldValue,
-//                 },
-//                 version: 'v1',
-//             };
-//         }
-//         const _criteria = legacyTableDataField.criteria as string;
-//         const _fieldValue = legacyTableDataField.value as string | undefined;
-//         const _dynamicFieldValue = legacyTableDataField.dynamicFieldValue as string[] | undefined;
-//         return {
-//             fieldType: 'dynamicField',
-//             dynamicFieldInfo: {
-//                 criteria: _criteria,
-//                 fieldValue: _fieldValue,
-//                 valueType: 'fixed', // no-version's default
-//                 fixedValue: _dynamicFieldValue,
-//             },
-//             version: 'v1',
-//         };
-//     }
-//     default:
-//         return tableDataField as LatestTableDataFieldValue;
-//     }
-// };
-// /**
-//  * Comparison Migration
-//  * Widgets: [Table, Number Card]
-//  * Change Comparison Value Type (ComparisonValue[] -> ComparisonValue)
-//  */
-// const migrateComparison = (comparison?: ComparisonValue|ComparisonValue[]): ComparisonValue => {
-//     if (comparison) {
-//         if (Array.isArray(comparison)) {
-//             const _comparisonValue: ComparisonValue = comparison[0];
-//             return {
-//                 ..._comparisonValue,
-//                 toggleValue: true,
-//             };
-//         }
-//         return comparison;
-//     }
-//     return {
-//         toggleValue: false,
-//     };
-// };
diff --git a/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue b/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
index 17f2ff5ef0..4243bc2839 100644
--- a/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
@@ -1,58 +1,18 @@
-<script lang="ts">
-// eslint-disable-next-line import/order,import/no-duplicates
-import { defineComponent, type ComponentPublicInstance } from 'vue';
-
-interface IInstance extends ComponentPublicInstance {
-    setPathFrom(from: any): void
-}
-
-export default defineComponent({
-    beforeRouteEnter(to, from, next) {
-        next((vm) => {
-            const instance = vm as unknown as IInstance;
-            instance.setPathFrom(from);
-        });
-    },
-});
-</script>
-
 <script setup lang="ts">
-/* eslint-disable import/first */
 import {
-    computed, defineExpose, onUnmounted, reactive,
-// eslint-disable-next-line import/no-duplicates
+    computed, reactive,
 } from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-
-import {
-    PCenteredLayoutHeader,
-} from '@cloudforet/mirinae';
 
 import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
-import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
-import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
-import { useGoBack } from '@/common/composables/go-back';
 
-import DashboardCreateStep1 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue';
-import DashboardCreateStep2 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue';
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import DashboardCreateBody from '@/services/dashboard-shared/dashboard-create/DashboardCreateBody.vue';
 import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
-import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-
 
-
-interface Step {
-    step: number;
-    description?: TranslateResult;
-}
 const appContextStore = useAppContextStore();
-const dashboardCreatePageStore = useDashboardCreatePageStore();
-const dashboardCreatePageState = dashboardCreatePageStore.state;
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
@@ -84,75 +44,11 @@ const dashboardState = reactive({
     allDashboardFolderItems: computed<Array<DashboardFolderModel>>(() => [...dashboardState.publicFolderItems, ...dashboardState.privateFolderItems]),
 });
 
-const state = reactive({
-    loading: false,
-    steps: computed<Step[]>(() => [
-        {
-            step: 1,
-            description: storeState.isAdminMode ? '' : i18n.t('DASHBOARDS.CREATE.STEP1_DESC'),
-        },
-        {
-            step: 2,
-            description: storeState.isAdminMode ? i18n.t('DASHBOARDS.CREATE.STEP2_DESC_FOR_ADMIN') : i18n.t('DASHBOARDS.CREATE.STEP2_DESC'),
-        },
-    ]),
-    closeConfirmModalVisible: false,
-});
-
-/* Event */
-const handleClickClose = () => {
-    state.closeConfirmModalVisible = true;
-};
-const { setPathFrom, handleClickBackButton } = useGoBack({
-    name: storeState.isAdminMode ? ADMIN_DASHBOARDS_ROUTE._NAME : DASHBOARDS_ROUTE._NAME,
-});
-const handleClickNext = () => {
-    dashboardCreatePageStore.setCreateType('BUNDLE');
-    dashboardCreatePageStore.setCurrentStep(2);
-};
-
-defineExpose({ setPathFrom });
-
-onUnmounted(() => {
-    dashboardCreatePageStore.reset();
-});
 </script>
 
 <template>
-    <div class="dashboard-create-page"
-         :class="[`step-${dashboardCreatePageState.currentStep}`]"
-    >
-        <p-centered-layout-header :title="$t('DASHBOARDS.CREATE.TITLE')"
-                                  :description="state.steps?.[dashboardCreatePageState.currentStep - 1]?.description"
-                                  :total-steps="state.steps.length"
-                                  :current-step="dashboardCreatePageState.currentStep"
-                                  show-step
-                                  show-close-button
-                                  @close="handleClickClose"
-        />
-        <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
-                                :dashboard-items="dashboardState.allDashboardItems"
-                                @click-next="handleClickNext"
-        />
-        <template v-else-if="dashboardCreatePageState.currentStep === 2">
-            <dashboard-create-step2 :dashboard-items="dashboardState.allDashboardItems"
-                                    :folder-items="dashboardState.allDashboardFolderItems"
-            />
-        </template>
-        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
-                            @confirm="handleClickBackButton"
-        />
-    </div>
+    <dashboard-create-body class="dashboard-create-page"
+                           :dashboard-items="dashboardState.allDashboardItems"
+                           :folder-items="dashboardState.allDashboardFolderItems"
+    />
 </template>
-
-<style lang="postcss" scoped>
-.dashboard-create-page {
-    margin: 0 auto;
-    &.step-1 {
-        width: 60rem;
-    }
-    &.step-2 {
-        width: 45rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
index dbe6ce31a1..3ed2a757c6 100644
--- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
     computed,
-    onUnmounted, reactive, watch,
+    onUnmounted, watch,
 } from 'vue';
 
 import {
@@ -13,9 +13,10 @@ import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
-import DashboardDetailBody from '@/services/dashboards/components/dashboard-detail/DashboardDetailBody.vue';
+import DashboardDetailBody from '@/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue';
 import DashboardDetailHeader from '@/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 
 interface Props {
     dashboardId: string;
@@ -27,18 +28,21 @@ const { breadcrumbs } = useBreadcrumbs();
 
 /* Query */
 const {
-    dashboard,
-} = useDashboardGetQuery({
-    dashboardId: computed(() => props.dashboardId),
-});
-
-const state = reactive({
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: FAVORITE_TYPE.DASHBOARD,
-        id: props.dashboardId,
-    })),
-    isDeprecatedDashboard: computed(() => dashboard.value?.version === '1.0'),
-});
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
+
+const dashboardItems = computed(() => [...publicDashboardList.value, ...privateDashboardList.value]);
+const folderItems = computed(() => [...publicFolderList.value, ...privateFolderList.value]);
+const isDeprecatedDashboard = computed<boolean>(() => dashboardItems.value.find((d) => d.dashboard_id === props.dashboardId)?.version === '1.0');
+const favoriteOptions = computed<FavoriteOptions>(() => ({
+    type: FAVORITE_TYPE.DASHBOARD,
+    id: props.dashboardId,
+}));
 
 watch(() => props.dashboardId, async (dashboardId) => {
     // Set Dashboard Detail Custom breadcrumbs
@@ -47,8 +51,8 @@ watch(() => props.dashboardId, async (dashboardId) => {
     }
 }, { immediate: true });
 
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
+watch(favoriteOptions, (_favoriteOptions) => {
+    gnbStore.setFavoriteItemId(_favoriteOptions);
 }, { immediate: true });
 
 onUnmounted(() => {
@@ -58,8 +62,7 @@ onUnmounted(() => {
 
 <template>
     <div class="dashboard-detail-page">
-        <portal-target name="dashboard-detail-page" />
-        <div v-if="state.isDeprecatedDashboard"
+        <div v-if="isDeprecatedDashboard"
              class="deprecated-banner"
         >
             <p-i name="ic_limit-filled"
@@ -78,7 +81,10 @@ onUnmounted(() => {
         </div>
         <dashboard-detail-header :dashboard-id="props.dashboardId" />
         <p-divider class="divider" />
-        <dashboard-detail-body :dashboard-id="props.dashboardId" />
+        <dashboard-detail-body :dashboard-id="props.dashboardId"
+                               :dashboard-items="dashboardItems"
+                               :folder-items="folderItems"
+        />
     </div>
 </template>
 
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts b/apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts
deleted file mode 100644
index 2e4eb03c2e..0000000000
--- a/apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { AsyncComponent } from 'vue';
-
-import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboards/widgets/_types/widget-list-type';
-
-const BASE_WIDGET_COMPONENTS: Record<BaseWidgetConfigKey, AsyncComponent> = {
-    baseTrend: () => ({
-        component: import('@/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue'),
-    }),
-    basePie: () => ({
-        component: import('@/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue'),
-    }),
-    baseCountOfFindings: () => ({
-        component: import('@/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue'),
-    }),
-};
-
-export const WIDGET_COMPONENTS: Record<WidgetConfigKey, AsyncComponent> = {
-    monthlyCost: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue'),
-    }),
-    budgetUsageSummary: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue'),
-    }),
-    costMap: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue'),
-    }),
-    costTrend: BASE_WIDGET_COMPONENTS.baseTrend,
-    costTrendStacked: BASE_WIDGET_COMPONENTS.baseTrend,
-    costSummaryMultiFields: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue'),
-    }),
-    costPie: BASE_WIDGET_COMPONENTS.basePie,
-    costDonut: BASE_WIDGET_COMPONENTS.basePie,
-    costByRegion: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue'),
-    }),
-    costByRegionMultiFields: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue'),
-    }),
-    budgetStatus: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue'),
-    }),
-    budgetUsageByTarget: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue'),
-    }),
-    severityStatusByService: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue'),
-    }),
-    countOfFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
-    countOfPassAndFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
-    trendOfPassAndFailFindings: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue'),
-    }),
-    totalFailFindingsStatus: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue'),
-    }),
-    totalFailFindingsHistory: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue'),
-    }),
-    complianceStatus: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue'),
-    }),
-};
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts b/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
deleted file mode 100644
index 8a45742bfe..0000000000
--- a/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable import/order */
-// base widgets
-import baseCountOfFindings from '@/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config';
-import basePie from '@/services/dashboards/widgets/_base-widgets/base-pie/widget-config';
-import baseTrend from '@/services/dashboards/widgets/_base-widgets/base-trend/widget-config';
-
-// console widgets
-import complianceStatus from '@/services/dashboards/widgets/asset-widgets/compliance-status/widget-config';
-import countOfFailFindings from '@/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config';
-import countOfPassAndFailFindings from '@/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
-import severityStatusByService from '@/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config';
-import totalFailFindingsHistory from '@/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config';
-import totalFailFindingsStatus from '@/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config';
-import trendOfPassAndFailFindings from '@/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config';
-import budgetStatus from '@/services/dashboards/widgets/cost-widgets/budget-status/widget-config';
-import budgetUsageByTarget from '@/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config';
-import budgetUsageSummary from '@/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config';
-import costByRegionMultiFields from '@/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config';
-import costByRegion from '@/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config';
-import costDonut from '@/services/dashboards/widgets/cost-widgets/cost-donut/widget-config';
-import costMap from '@/services/dashboards/widgets/cost-widgets/cost-map/widget-config';
-import costPie from '@/services/dashboards/widgets/cost-widgets/cost-pie/widget-config';
-import costSummaryMultiFields from '@/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config';
-import costTrendStacked from '@/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config';
-import costTrend from '@/services/dashboards/widgets/cost-widgets/cost-trend/widget-config';
-import monthlyCost from '@/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config';
-
-import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
-import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboards/widgets/_types/widget-list-type';
-
-export const BASE_WIDGET_CONFIG_KEYS = [
-    'baseTrend',
-    'basePie',
-    'baseCountOfFindings',
-] as const;
-export const CONSOLE_WIDGET_CONFIG_KEYS = [
-    'monthlyCost',
-    'budgetUsageSummary',
-    'costMap',
-    'costTrend',
-    'costTrendStacked',
-    'costSummaryMultiFields',
-    'costPie',
-    'costDonut',
-    'costByRegion',
-    'costByRegionMultiFields',
-    'budgetStatus',
-    'budgetUsageByTarget',
-    'severityStatusByService',
-    'countOfFailFindings',
-    'countOfPassAndFailFindings',
-    'trendOfPassAndFailFindings',
-    'totalFailFindingsStatus',
-    'totalFailFindingsHistory',
-    'complianceStatus',
-] as const;
-
-
-export const CONSOLE_WIDGET_CONFIGS: Record<WidgetConfigKey, Partial<WidgetConfig>> = {
-    // Cost Widgets
-    monthlyCost,
-    budgetUsageSummary,
-    costMap,
-    costTrend,
-    costTrendStacked,
-    costSummaryMultiFields,
-    costPie,
-    costDonut,
-    costByRegion,
-    costByRegionMultiFields,
-    budgetStatus,
-    budgetUsageByTarget,
-    // Asset Widgets
-    severityStatusByService,
-    countOfFailFindings,
-    countOfPassAndFailFindings,
-    trendOfPassAndFailFindings,
-    totalFailFindingsStatus,
-    totalFailFindingsHistory,
-    complianceStatus,
-};
-
-export const BASE_WIDGET_CONFIGS: Record<BaseWidgetConfigKey, Partial<WidgetConfig>> = {
-    baseTrend,
-    basePie,
-    baseCountOfFindings,
-};

From df37d4eba7c6a7e4532f76a72508008e1dc1ca22 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 18:55:52 +0900
Subject: [PATCH 09/18] feat(project-dashboard-create): create page & project
 dashboard query composables

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../use-project-dashboard-folder-query.ts     |  86 ++++++++++
 .../queries/use-project-dashboard-query.ts    |  92 +++++++++++
 .../v2/pages/ProjectDashboardCreatePage.vue   | 153 ++++++++++++++++++
 .../src/services/project/v2/routes/routes.ts  |   7 +-
 .../v2/types/project-page-context-type.ts     |   1 +
 .../console-translation-2.8.babel             |  31 ++++
 packages/language-pack/en.json                |   5 +
 packages/language-pack/ja.json                |   7 +-
 packages/language-pack/ko.json                |   5 +
 9 files changed, 384 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
 create mode 100644 apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
 create mode 100644 apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
 create mode 100644 apps/web/src/services/project/v2/types/project-page-context-type.ts

diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
new file mode 100644
index 0000000000..a59fccabee
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
@@ -0,0 +1,86 @@
+import {
+    computed, type ComputedRef,
+} from 'vue';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import type { ProjectPageContextType } from '@/services/project/v2/types/project-page-context-type';
+
+const STALE_TIME = 1000 * 60 * 5;
+const GC_TIME = 1000 * 60 * 5;
+
+
+
+
+export const useProjectDashboardFolderQuery = (options: {
+    projectId: ComputedRef<string|undefined>,
+    projectGroupId?: ComputedRef<string|undefined>,
+}) => {
+    const { publicFolderAPI } = usePublicFolderApi();
+
+    const projectPageContext = computed<ProjectPageContextType>(() => {
+        if (options.projectGroupId?.value) {
+            return 'PROJECT_GROUP';
+        }
+        if (options.projectId?.value) {
+            return 'PROJECT';
+        }
+        return undefined;
+    });
+
+
+    /* Query Keys */
+    const { key: dashboardFolderSharedListQueryKey, params: dashboardFolderSharedListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicFolderListParameters>(() => ({
+            project_id: '*',
+            // project_group_id: '*',
+            query: {
+                filter: [
+                    { k: 'scope', v: 'PROJECT', o: 'eq' },
+                    { k: 'shared', v: true, o: 'eq' },
+                ],
+            },
+        })),
+    });
+    const { key: dashboardFolderListQueryKey, params: dashboardFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicFolderListParameters>(() => ({
+            project_id: options.projectId?.value,
+            project_group_id: options.projectGroupId?.value,
+        })),
+    });
+
+    /* Querys */
+    const dashboardFolderSharedListQuery = useScopedQuery({
+        queryKey: dashboardFolderSharedListQueryKey,
+        queryFn: () => publicFolderAPI.list(dashboardFolderSharedListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+
+    const dashboardFolderListQuery = useScopedQuery({
+        queryKey: dashboardFolderListQueryKey,
+        queryFn: () => publicFolderAPI.list(dashboardFolderListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+    const isLoading = computed<boolean>(() => dashboardFolderSharedListQuery.isFetching.value || dashboardFolderListQuery.isFetching.value);
+
+    return {
+        dashboardFolderSharedList: computed<PublicFolderModel[]>(() => dashboardFolderSharedListQuery.data.value ?? []),
+        dashboardFolderList: computed<PublicFolderModel[]>(() => dashboardFolderListQuery.data.value ?? []),
+        isLoading,
+    };
+};
+
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
new file mode 100644
index 0000000000..ca766a2463
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
@@ -0,0 +1,92 @@
+import {
+    computed, type ComputedRef,
+} from 'vue';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import type { ProjectPageContextType } from '@/services/project/v2/types/project-page-context-type';
+
+const STALE_TIME = 1000 * 60 * 5;
+const GC_TIME = 1000 * 60 * 5;
+
+
+
+
+export const useProjectDashboardQuery = (options: {
+    projectId: ComputedRef<string|undefined>,
+    projectGroupId?: ComputedRef<string|undefined>,
+}) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+
+    const projectPageContext = computed<ProjectPageContextType>(() => {
+        if (options.projectGroupId?.value) {
+            return 'PROJECT_GROUP';
+        }
+        if (options.projectId?.value) {
+            return 'PROJECT';
+        }
+        return undefined;
+    });
+
+
+    /* Query Keys */
+    const { key: dashboardSharedListQueryKey, params: dashboardSharedListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicDashboardListParameters>(() => ({
+            project_id: '*',
+            // project_group_id: '*',
+            query: {
+                filter: [
+                    { k: 'version', v: '1.0', o: 'not' },
+                    { k: 'scope', v: 'PROJECT', o: 'eq' },
+                    { k: 'shared', v: true, o: 'eq' },
+                ],
+            },
+        })),
+    });
+    const { key: dashboardListQueryKey, params: dashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicDashboardListParameters>(() => ({
+            project_id: options.projectId?.value,
+            project_group_id: options.projectGroupId?.value,
+            query: {
+                filter: [
+                    { k: 'version', v: '1.0', o: 'not' },
+                ],
+            },
+        })),
+    });
+
+    /* Querys */
+    const dashboardSharedListQuery = useScopedQuery({
+        queryKey: dashboardSharedListQueryKey,
+        queryFn: () => publicDashboardAPI.list(dashboardSharedListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+
+    const dashboardListQuery = useScopedQuery({
+        queryKey: dashboardListQueryKey,
+        queryFn: () => publicDashboardAPI.list(dashboardListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+    const isLoading = computed<boolean>(() => dashboardSharedListQuery.isFetching.value || dashboardListQuery.isFetching.value);
+
+    return {
+        dashboardSharedList: computed<PublicDashboardModel[]>(() => dashboardSharedListQuery.data.value ?? []),
+        dashboardList: computed<PublicDashboardModel[]>(() => dashboardListQuery.data.value ?? []),
+        isLoading,
+    };
+};
+
diff --git a/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue b/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
new file mode 100644
index 0000000000..c36eeca948
--- /dev/null
+++ b/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
@@ -0,0 +1,153 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
+<script setup lang="ts">
+/* eslint-disable import/first */
+import {
+    computed, defineExpose, onUnmounted, reactive, toRef,
+// eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PCenteredLayoutHeader,
+} from '@cloudforet/mirinae';
+
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
+
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useGoBack } from '@/common/composables/go-back';
+
+import DashboardCreateStep1 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue';
+import DashboardCreateStep2 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue';
+import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+const props = defineProps<{
+    projectGroupOrProjectId: string;
+}>();
+
+interface Step {
+    step: number;
+    description?: TranslateResult;
+}
+const { projectGroupId, projectId } = useProjectOrGroupId(toRef(props, 'projectGroupOrProjectId'));
+
+
+const dashboardCreatePageStore = useDashboardCreatePageStore();
+const dashboardCreatePageState = dashboardCreatePageStore.state;
+
+
+/* Query */
+const {
+    dashboardList,
+    dashboardSharedList,
+} = useProjectDashboardQuery({
+    projectGroupId,
+    projectId,
+});
+const {
+    dashboardFolderList,
+    dashboardFolderSharedList,
+} = useProjectDashboardFolderQuery({
+    projectGroupId,
+    projectId,
+});
+
+const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
+const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
+
+
+const state = reactive({
+    loading: false,
+    steps: computed<Step[]>(() => [
+        {
+            step: 1,
+            description: i18n.t('DASHBOARDS.CREATE.STEP1_DESC'),
+        },
+        {
+            step: 2,
+            description: i18n.t('DASHBOARDS.CREATE.STEP2_DESC'),
+        },
+    ]),
+    closeConfirmModalVisible: false,
+});
+
+/* Event */
+const handleClickClose = () => {
+    state.closeConfirmModalVisible = true;
+};
+const { setPathFrom, handleClickBackButton } = useGoBack({
+    name: PROJECT_ROUTE_V2._NAME,
+});
+const handleClickNext = () => {
+    dashboardCreatePageStore.setCreateType('BUNDLE');
+    dashboardCreatePageStore.setCurrentStep(2);
+};
+
+defineExpose({ setPathFrom });
+
+onUnmounted(() => {
+    dashboardCreatePageStore.reset();
+});
+</script>
+
+<template>
+    <div class="project-dashboard-create-page"
+         :class="[`step-${dashboardCreatePageState.currentStep}`]"
+    >
+        <p-centered-layout-header :title="$t('PROJECT.DASHBOARDS.CREATE.TITLE')"
+                                  :description="state.steps?.[dashboardCreatePageState.currentStep - 1]?.description"
+                                  :total-steps="state.steps.length"
+                                  :current-step="dashboardCreatePageState.currentStep"
+                                  show-step
+                                  show-close-button
+                                  @close="handleClickClose"
+        />
+        <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
+                                :dashboard-items="dashboardItems"
+                                @click-next="handleClickNext"
+        />
+        <template v-else-if="dashboardCreatePageState.currentStep === 2">
+            <dashboard-create-step2 :dashboard-items="dashboardItems"
+                                    :folder-items="dashboardFolderItems"
+            />
+        </template>
+        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
+                            @confirm="handleClickBackButton"
+        />
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.project-dashboard-create-page {
+    margin: 0 auto;
+    &.step-1 {
+        width: 60rem;
+    }
+    &.step-2 {
+        width: 45rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/routes/routes.ts b/apps/web/src/services/project/v2/routes/routes.ts
index 790f91a716..a2c26058e9 100644
--- a/apps/web/src/services/project/v2/routes/routes.ts
+++ b/apps/web/src/services/project/v2/routes/routes.ts
@@ -8,7 +8,7 @@ import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 const ProjectContainer = () => import('@/services/project/v2/ProjectContainer.vue');
 
 const ProjectMainPage = () => import('@/services/project/v2/pages/ProjectMainPage.vue');
-
+const ProjectDashboardCreatePage = () => import('@/services/project/v2/pages/ProjectDashboardCreatePage.vue');
 
 const projectRoutes: RouteConfig = {
     path: 'project',
@@ -21,8 +21,11 @@ const projectRoutes: RouteConfig = {
         {
             path: ':projectGroupOrProjectId/dashboard-create',
             name: PROJECT_ROUTE_V2.DASHBOARD_CREATE._NAME,
+            meta: {
+                menuId: MENU_ID.PROJECT,
+            },
             props: true,
-            // component: ProjectDashboardCreatePage,
+            component: ProjectDashboardCreatePage,
         },
         {
             path: ':projectGroupOrProjectId?/:dashboardId?',
diff --git a/apps/web/src/services/project/v2/types/project-page-context-type.ts b/apps/web/src/services/project/v2/types/project-page-context-type.ts
new file mode 100644
index 0000000000..1f1671b501
--- /dev/null
+++ b/apps/web/src/services/project/v2/types/project-page-context-type.ts
@@ -0,0 +1 @@
+export type ProjectPageContextType = 'PROJECT' | 'PROJECT_GROUP' | undefined;
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index dfdfd2d6a2..5ef85bcda2 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -93773,6 +93773,37 @@
             <folder_node>
                 <name>PROJECT</name>
                 <children>
+                    <folder_node>
+                        <name>DASHBOARD</name>
+                        <children>
+                            <folder_node>
+                                <name>CREATE</name>
+                                <children>
+                                    <concept_node>
+                                        <name>TITLE</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>DETAIL</name>
                         <children>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 4ee694bb69..9af8d99ee3 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -5097,6 +5097,11 @@
 		}
 	},
 	"PROJECT": {
+		"DASHBOARD": {
+			"CREATE": {
+				"TITLE": "Create New Dashboard"
+			}
+		},
 		"DETAIL": {
 			"ACCESS": "Access",
 			"ADD": "Add",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index e9a9585d91..4b929a8d7a 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -2127,7 +2127,7 @@
 				"FILTER_PROVIDER": "プロバイダー"
 			},
 			"TEMPLATES": "テンプレート",
-			"TITLE": "新規ダッシュボード作成",
+			"TITLE": "新規プロジェクトダッシュボード作成",
 			"VALIDATION_PROJECT": "プロジェクトを選択してください。",
 			"VALIDATION_TEMPLATE": "テンプレートを選択してください",
 			"VIEW": "ビュー",
@@ -5097,6 +5097,11 @@
 		}
 	},
 	"PROJECT": {
+		"DASHBOARD": {
+			"CREATE": {
+				"TITLE": "新規ダッシュボード作成"
+			}
+		},
 		"DETAIL": {
 			"ACCESS": "アクセス",
 			"ADD": "追加",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 5162ca5298..37245e6191 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -5097,6 +5097,11 @@
 		}
 	},
 	"PROJECT": {
+		"DASHBOARD": {
+			"CREATE": {
+				"TITLE": "프로젝트 대시보드 생성"
+			}
+		},
 		"DETAIL": {
 			"ACCESS": "접근",
 			"ADD": "추가 ",

From 77d52a503ee3eaa72676be833847b30e28225933 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Wed, 9 Apr 2025 18:56:56 +0900
Subject: [PATCH 10/18] feat(project-dashboard-tab): create dashboard create
 button & apply project-dashboard query

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../v2/components/ProjectDetailTab.vue        | 112 ++++++++++--------
 1 file changed, 61 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
index 8ce36d7404..a5ecdd0e5b 100644
--- a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
@@ -2,19 +2,18 @@
 import {
     computed, nextTick, onBeforeUnmount, onMounted, ref, watch,
 } from 'vue';
+import { useRouter } from 'vue-router/composables';
 
-import { PTab } from '@cloudforet/mirinae';
+import { PTab, PSelectDropdown } from '@cloudforet/mirinae';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
-import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
-import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
-import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
-import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
-import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import ProjectDashboard from '@/services/project/v2/components/ProjectDashboard.vue';
 import ProjectOverview from '@/services/project/v2/components/ProjectOverview.vue';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 
 const props = defineProps<{
@@ -23,7 +22,7 @@ const props = defineProps<{
     dashboardId?: string,
 }>();
 const emit = defineEmits<{(e: 'update:dashboard-id', value?: string): void;}>();
-
+const router = useRouter();
 
 const activeTab = ref('overview');
 watch(() => props.dashboardId, (did) => {
@@ -44,62 +43,38 @@ onBeforeUnmount(() => {
     mounted.value = false;
 });
 
-/* dashboard tabs */
-const { publicDashboardAPI } = usePublicDashboardApi();
-const { publicFolderAPI } = usePublicFolderApi();
-const { key: dashboardListQueryKey, params: dashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
-    params: computed<PublicDashboardListParameters>(() => ({
-        // project_id: props.id,
-        query: {
-            filter: [
-                { k: 'shared', v: true, o: 'eq' },
-                { k: 'version', v: '1.0', o: 'not' },
-                { k: 'scope', v: 'PROJECT', o: 'eq' },
-            ],
-        },
-    })),
+/* Query */
+const {
+    dashboardList,
+    dashboardSharedList,
+} = useProjectDashboardQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
-const { data: dashboardList } = useScopedQuery({
-    queryKey: dashboardListQueryKey,
-    queryFn: () => publicDashboardAPI.list(dashboardListParams.value),
-    select: (data) => data?.results ?? [],
-    enabled: mounted,
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    gcTime: 1000 * 60 * 5, // 5 minutes
-}, ['WORKSPACE']);
-const { key: dashboardFolderListQueryKey, params: dashboardFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
-    params: computed<PublicFolderListParameters>(() => ({
-        // project_id: props.id,
-        query: {
-            filter: [
-                { k: 'shared', v: true, o: 'eq' },
-                { k: 'scope', v: 'PROJECT', o: 'eq' },
-            ],
-        },
-    })),
+const {
+    dashboardFolderList,
+    dashboardFolderSharedList,
+} = useProjectDashboardFolderQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
-const { data: dashboardFolderList } = useScopedQuery({
-    queryKey: dashboardFolderListQueryKey,
-    queryFn: () => publicFolderAPI.list(dashboardFolderListParams.value),
-    select: (data) => data?.results || [],
-    enabled: mounted,
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    gcTime: 1000 * 60 * 5, // 5 minutes
-}, ['WORKSPACE']);
+
+const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
+const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
 
 const tabs = computed<TabItem[]>(() => {
-    const folderTabs = dashboardFolderList.value?.map((folder) => ({
+    const folderTabs = dashboardFolderItems.value?.map((folder) => ({
         name: folder.folder_id,
         label: folder.name,
         tabType: 'folder',
         icon: 'ic_folder',
-        subItems: dashboardList.value?.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
+        subItems: dashboardItems.value?.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
             name: dashboard.dashboard_id,
             label: dashboard.name,
             icon: 'ic_service_dashboard',
         })),
     })) ?? [];
-    const dashboardTabs = dashboardList.value?.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
+    const dashboardTabs = dashboardItems.value?.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
         name: dashboard.dashboard_id,
         label: dashboard.name,
         icon: 'ic_service_dashboard',
@@ -118,6 +93,32 @@ const handleUpdateActiveTab = (tab: string) => {
     emit('update:dashboard-id', tab === 'overview' ? undefined : tab);
 };
 
+const projectDashboardCreateMenuItems = computed(() => [
+    {
+        label: 'Create Dashboard',
+        name: 'dashboard',
+        icon: 'ic_plus',
+    },
+    {
+        label: 'Create Folder',
+        name: 'folder',
+        icon: 'ic_plus',
+    },
+]);
+
+const handleCreateProjectDashboard = (item: string) => {
+    if (item === 'dashboard') {
+        router.push({
+            name: PROJECT_ROUTE_V2.DASHBOARD_CREATE._NAME,
+            params: {
+                projectGroupOrProjectId: props.projectGroupId ?? props.projectId,
+            },
+        });
+    } else if (item === 'folder') {
+        console.log('create folder');
+    }
+};
+
 </script>
 
 <template>
@@ -142,6 +143,15 @@ const handleUpdateActiveTab = (tab: string) => {
                     </keep-alive>
                 </div>
             </template>
+            <template #header-right-contents>
+                <p-select-dropdown style-type="tertiary-icon-button"
+                                   button-icon="ic_plus"
+                                   size="sm"
+                                   menu-position="right"
+                                   :menu="projectDashboardCreateMenuItems"
+                                   @select="handleCreateProjectDashboard"
+                />
+            </template>
         </p-tab>
     </div>
 </template>

From 730bdcdeda578c8d7c61b8e618c682b860d1a8f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= <samuel.park@mz.co.kr>
Date: Thu, 10 Apr 2025 01:17:44 +0900
Subject: [PATCH 11/18] feat(project-dashboard): create project detail/create
 components

Signed-off-by: piggggggggy <samuel.park@mz.co.kr>
---
 .../v2/components/ProjectDashboard.vue        | 113 +++++------------
 .../v2/components/ProjectDetailTab.vue        |  12 +-
 .../v2/pages/ProjectDashboardCreatePage.vue   | 117 +-----------------
 .../project/v2/pages/ProjectMainPage.vue      |   1 +
 4 files changed, 44 insertions(+), 199 deletions(-)

diff --git a/apps/web/src/services/project/v2/components/ProjectDashboard.vue b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
index e426552ab7..053fa8e92f 100644
--- a/apps/web/src/services/project/v2/components/ProjectDashboard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
@@ -1,98 +1,55 @@
 <script lang="ts" setup>
 import {
     computed,
-    onUnmounted,
-    ref, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { useQueryClient } from '@tanstack/vue-query';
 
 import { PSkeleton } from '@cloudforet/mirinae';
 
-import BetaMark from '@/common/components/marks/BetaMark.vue';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-import DashboardLabelsButton from '@/services/dashboards/shared/components/DashboardLabelsButton.vue';
-import DashboardRefreshDropdown from '@/services/dashboards/shared/components/DashboardRefreshDropdown.vue';
-import DashboardToolsetDateDropdown
-    from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/shared/components/DashboardVariablesV2.vue';
-import DashboardWidgetContainerV2
-    from '@/services/dashboards/shared/components/DashboardWidgetContainerV2.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
+import BetaMark from '@/common/components/marks/BetaMark.vue';
 
+import DashboardLabelsButton from '@/services/dashboard-shared/dashboard-detail/components/DashboardLabelsButton.vue';
+import DashboardDetailBody from '@/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
 
 interface Props {
-    id: string;
+    projectId?: string;
+    projectGroupId?: string;
     dashboardId: string;
 }
 const props = defineProps<Props>();
 
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
-const route = useRoute();
-const router = useRouter();
 
 /* Query */
 const {
-    dashboard,
-    isError: dashboardError,
-    isLoading: dashboardLoading,
-} = useDashboardGetQuery({
-    dashboardId: computed(() => route.params.dashboardId),
+    dashboardList,
+    dashboardSharedList,
+} = useProjectDashboardQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
 const {
-    widgetList,
-    isLoading: widgetLoading,
-    isError: widgetError,
-    keys: widgetListKeys,
-} = useDashboardWidgetListQuery({
-    dashboardId: computed(() => route.params.dashboardId),
+    dashboardFolderList,
+    dashboardFolderSharedList,
+} = useProjectDashboardFolderQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
-const queryClient = useQueryClient();
 
-const handleRefresh = async () => {
-    await queryClient.invalidateQueries({ queryKey: widgetListKeys.publicWidgetListQueryKey.value });
-    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
-};
-watch([dashboard, () => route.params], ([_dashboard]) => {
-    if (_dashboard) {
-        dashboardDetailStore.reset();
-        dashboardDetailStore.setDashboardInfoStoreStateV2({
-            ..._dashboard,
-            project_id: route.params.id,
-        });
-    }
-}, { immediate: true });
-watch(widgetList, (_widgetList) => {
-    if (_widgetList.length) {
-        dashboardDetailStore.setDashboardWidgets(_widgetList);
-    }
-});
-watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
-    if (_dashboardError || _widgetError) {
-        ErrorHandler.handleError(_dashboardError || _widgetError);
-        router.push({ name: PROJECT_ROUTE_V2._NAME });
-    }
-});
 
-onUnmounted(() => {
-    dashboardDetailStore.reset();
-});
+const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
+const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
+const currentDashboard = computed<DashboardModel|undefined>(() => dashboardItems.value.find((d) => d.dashboard_id === props.dashboardId));
+
 </script>
 
 <template>
     <div>
         <div>
             <div class="flex items-center py-6 px-4">
-                <p-skeleton v-if="!dashboard?.name"
+                <p-skeleton v-if="!currentDashboard?.name"
                             width="20rem"
                             height="1.5rem"
                 />
@@ -100,7 +57,7 @@ onUnmounted(() => {
                      class="flex"
                 >
                     <p class="text-label-xl font-bold text-gray-800">
-                        {{ dashboard?.name }}
+                        {{ currentDashboard?.name }}
                     </p>
                     <beta-mark />
                 </div>
@@ -108,24 +65,10 @@ onUnmounted(() => {
                                          :dashboard-id="props.dashboardId"
                 />
             </div>
-            <div class="bg-gray-100 rounded-lg pt-4 px-2 pb-2 mx-4">
-                <div class="flex justify-between items-center">
-                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
-                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardLoading || widgetLoading"
-                                                disable-interval
-                                                @refresh="handleRefresh"
-                    />
-                </div>
-                <div v-if="!dashboardLoading && !widgetLoading">
-                    <dashboard-variables-v2 class="flex flex-wrap gap-2 pt-4 pb-6 !bg-none"
-                                            is-project-dashboard
-                                            disable-save-button
-                                            :loading="dashboardLoading || widgetLoading"
-                    />
-                </div>
-                <dashboard-widget-container-v2 ref="widgetContainerRef" />
-            </div>
+            <dashboard-detail-body :dashboard-id="props.dashboardId"
+                                   :dashboard-items="dashboardItems"
+                                   :folder-items="dashboardFolderItems"
+            />
         </div>
     </div>
 </template>
diff --git a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
index a5ecdd0e5b..c5965840ca 100644
--- a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
@@ -17,7 +17,7 @@ import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 
 const props = defineProps<{
-    projectId: string,
+    projectId?: string,
     projectGroupId?: string,
     dashboardId?: string,
 }>();
@@ -107,11 +107,16 @@ const projectDashboardCreateMenuItems = computed(() => [
 ]);
 
 const handleCreateProjectDashboard = (item: string) => {
+    const projectGroupOrProjectId = props.projectGroupId ?? props.projectId;
+    if (!projectGroupOrProjectId) {
+        console.warn('projectGroupId or projectId is not selected');
+        return;
+    }
     if (item === 'dashboard') {
         router.push({
             name: PROJECT_ROUTE_V2.DASHBOARD_CREATE._NAME,
             params: {
-                projectGroupOrProjectId: props.projectGroupId ?? props.projectId,
+                projectGroupOrProjectId,
             },
         });
     } else if (item === 'folder') {
@@ -136,8 +141,9 @@ const handleCreateProjectDashboard = (item: string) => {
                                           :project-id="props.projectId"
                         />
                         <project-dashboard v-else
-                                           :id="props.projectId"
                                            :key="`${props.projectId}-${activeTab}`"
+                                           :project-id="props.projectId"
+                                           :project-group-id="props.projectGroupId"
                                            :dashboard-id="activeTab"
                         />
                     </keep-alive>
diff --git a/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue b/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
index c36eeca948..30442dbae3 100644
--- a/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
@@ -1,64 +1,23 @@
-<script lang="ts">
-// eslint-disable-next-line import/order,import/no-duplicates
-import { defineComponent, type ComponentPublicInstance } from 'vue';
-
-
-interface IInstance extends ComponentPublicInstance {
-    setPathFrom(from: any): void
-}
-
-export default defineComponent({
-    beforeRouteEnter(to, from, next) {
-        next((vm) => {
-            const instance = vm as unknown as IInstance;
-            instance.setPathFrom(from);
-        });
-    },
-});
-</script>
-
 <script setup lang="ts">
-/* eslint-disable import/first */
 import {
-    computed, defineExpose, onUnmounted, reactive, toRef,
-// eslint-disable-next-line import/no-duplicates
+    computed, toRef,
 } from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-
-import {
-    PCenteredLayoutHeader,
-} from '@cloudforet/mirinae';
 
 import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
-import { i18n } from '@/translations';
 
 
-import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
-import { useGoBack } from '@/common/composables/go-back';
 
-import DashboardCreateStep1 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep1.vue';
-import DashboardCreateStep2 from '@/services/dashboard-shared/components/dashboard-create/DashboardCreateStep2.vue';
-import { useDashboardCreatePageStore } from '@/services/dashboard-shared/stores/dashboard-create-page-store';
+import DashboardCreateBody from '@/services/dashboard-shared/dashboard-create/DashboardCreateBody.vue';
 import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
 import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
 import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 const props = defineProps<{
     projectGroupOrProjectId: string;
 }>();
 
-interface Step {
-    step: number;
-    description?: TranslateResult;
-}
 const { projectGroupId, projectId } = useProjectOrGroupId(toRef(props, 'projectGroupOrProjectId'));
 
-
-const dashboardCreatePageStore = useDashboardCreatePageStore();
-const dashboardCreatePageState = dashboardCreatePageStore.state;
-
-
 /* Query */
 const {
     dashboardList,
@@ -78,76 +37,12 @@ const {
 const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
 const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
 
-
-const state = reactive({
-    loading: false,
-    steps: computed<Step[]>(() => [
-        {
-            step: 1,
-            description: i18n.t('DASHBOARDS.CREATE.STEP1_DESC'),
-        },
-        {
-            step: 2,
-            description: i18n.t('DASHBOARDS.CREATE.STEP2_DESC'),
-        },
-    ]),
-    closeConfirmModalVisible: false,
-});
-
-/* Event */
-const handleClickClose = () => {
-    state.closeConfirmModalVisible = true;
-};
-const { setPathFrom, handleClickBackButton } = useGoBack({
-    name: PROJECT_ROUTE_V2._NAME,
-});
-const handleClickNext = () => {
-    dashboardCreatePageStore.setCreateType('BUNDLE');
-    dashboardCreatePageStore.setCurrentStep(2);
-};
-
-defineExpose({ setPathFrom });
-
-onUnmounted(() => {
-    dashboardCreatePageStore.reset();
-});
 </script>
 
 <template>
-    <div class="project-dashboard-create-page"
-         :class="[`step-${dashboardCreatePageState.currentStep}`]"
-    >
-        <p-centered-layout-header :title="$t('PROJECT.DASHBOARDS.CREATE.TITLE')"
-                                  :description="state.steps?.[dashboardCreatePageState.currentStep - 1]?.description"
-                                  :total-steps="state.steps.length"
-                                  :current-step="dashboardCreatePageState.currentStep"
-                                  show-step
-                                  show-close-button
-                                  @close="handleClickClose"
-        />
-        <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
-                                :dashboard-items="dashboardItems"
-                                @click-next="handleClickNext"
-        />
-        <template v-else-if="dashboardCreatePageState.currentStep === 2">
-            <dashboard-create-step2 :dashboard-items="dashboardItems"
-                                    :folder-items="dashboardFolderItems"
-            />
-        </template>
-        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
-                            @confirm="handleClickBackButton"
-        />
-    </div>
+    <dashboard-create-body class="project-dashboard-create-page"
+                           :dashboard-items="dashboardItems"
+                           :folder-items="dashboardFolderItems"
+    />
 </template>
 
-<style lang="postcss" scoped>
-.project-dashboard-create-page {
-    margin: 0 auto;
-    &.step-1 {
-        width: 60rem;
-    }
-    &.step-2 {
-        width: 45rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index fdda0ca936..606774769e 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -128,6 +128,7 @@ const handleUpdateDashboardId = (id?: string) => {
         <project-detail-tab v-if="mounted && projectId"
                             class="mt-6"
                             :project-id="projectId"
+                            :project-group-id="projectGroupId"
                             :dashboard-id="props.dashboardId"
                             @update:dashboard-id="handleUpdateDashboardId"
         />

From 7edd0dfda7eaf68dd83d99b2efc709b4c8bdc49d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= <samuel.park@mz.co.kr>
Date: Thu, 10 Apr 2025 01:25:14 +0900
Subject: [PATCH 12/18] chore: small fix

Signed-off-by: piggggggggy <samuel.park@mz.co.kr>
---
 .../project/v1/pages/ProjectDashboardPage.vue | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
index 089b4515e7..8d852e3efe 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
@@ -13,17 +13,18 @@ import { PSkeleton } from '@cloudforet/mirinae';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-import DashboardLabelsButton from '@/services/dashboards/shared/components/DashboardLabelsButton.vue';
-import DashboardRefreshDropdown from '@/services/dashboards/shared/components/DashboardRefreshDropdown.vue';
+import DashboardLabelsButton from '@/services/dashboard-shared/dashboard-detail/components/DashboardLabelsButton.vue';
+import DashboardRefreshDropdown from '@/services/dashboard-shared/dashboard-detail/components/DashboardRefreshDropdown.vue';
 import DashboardToolsetDateDropdown
-    from '@/services/dashboards/shared/components/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/shared/components/DashboardVariablesV2.vue';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import DashboardVariablesV2
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardVariablesV2.vue';
 import DashboardWidgetContainerV2
-    from '@/services/dashboards/shared/components/DashboardWidgetContainerV2.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/shared/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/shared/composables/use-dashboard-widget-list-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/shared/stores/dashboard-detail-info-store';
+    from '@/services/dashboard-shared/dashboard-detail/components/DashboardWidgetContainerV2.vue';
+import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-widget-list-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboard-shared/dashboard-detail/stores/dashboard-detail-info-store';
+import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
 
@@ -126,9 +127,12 @@ onUnmounted(() => {
                                             is-project-dashboard
                                             disable-save-button
                                             :loading="dashboardLoading || widgetLoading"
+                                            :dashboard-id="props.dashboardId"
                     />
                 </div>
-                <dashboard-widget-container-v2 ref="widgetContainerRef" />
+                <dashboard-widget-container-v2 ref="widgetContainerRef"
+                                               :dashboard-id="props.dashboardId"
+                />
             </div>
         </div>
     </div>

From 7fd1c5e3e034080f16bf9f6eeca0f72a16b46a5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= <samuel.park@mz.co.kr>
Date: Thu, 10 Apr 2025 02:13:18 +0900
Subject: [PATCH 13/18] chore: fix wrong query (dashboard list)

Signed-off-by: piggggggggy <samuel.park@mz.co.kr>
---
 .../src/services/dashboards/composables/use-dashboard-query.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
index ef6135ba60..207c7e9f67 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
@@ -91,7 +91,7 @@ export const useDashboardQuery = (): UseDashboardQueryReturn => {
         if (_state.isAdminMode) {
             publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
         } else {
-            publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
+            publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '' });
         }
         _state.publicDashboardListApiQuery = publicDashboardListApiQueryHelper.data;
     }, { immediate: true });

From a8aacef136f7b8d4ad2bdb80ad631151c689c1e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= <samuel.park@mz.co.kr>
Date: Thu, 10 Apr 2025 02:15:27 +0900
Subject: [PATCH 14/18] fix(dashboard-manageable): refactoring with changed
 sharing policy

Signed-off-by: piggggggggy <samuel.park@mz.co.kr>
---
 .../composables/use-dashboard-manageable.ts   | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
index 8a741c509d..399be7894f 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
@@ -1,12 +1,12 @@
 import type { ComputedRef } from 'vue';
 import { computed, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
+import { useDashboardRouteContext } from '@/services/dashboard-shared/_composables/use-dashboard-route-context';
 import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-detail/composables/use-dashboard-get-query';
 
 interface UseDashboardManageableOptions {
@@ -18,11 +18,12 @@ interface UseDashboardManageableReturn {
 }
 
 export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOptions): UseDashboardManageableReturn => {
-    const appContextStore = useAppContextStore();
     const userStore = useUserStore();
-    const route = useRoute();
+
+    const { entryPoint } = useDashboardRouteContext();
+
+
     const storeState = reactive({
-        isAdminMode: computed(() => appContextStore.getters.isAdminMode),
         isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     });
 
@@ -31,11 +32,19 @@ export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOp
     });
 
     const isManageable = computed(() => {
-        if (storeState.isAdminMode) return true;
-        if (dashboard.value?.dashboard_id.startsWith('private')) return true;
-        // TODO: implement this condition after project dashboard is implemented
-        if (!!route.params.id && !!route.params.dashboardId) return false;
-        if (storeState.isWorkspaceOwner) return true;
+        if (entryPoint.value === 'ADMIN') return true;
+
+        if (entryPoint.value === 'WORKSPACE') {
+            if (dashboard.value?.dashboard_id.startsWith('private')) return true;
+            if (dashboard.value?.shared && dashboard.value?.resource_group === RESOURCE_GROUP.DOMAIN) return false;
+            if (storeState.isWorkspaceOwner) return true;
+            return false;
+        }
+
+        if (entryPoint.value === 'PROJECT') {
+            if (dashboard.value?.shared) return false;
+            return true;
+        }
         return false;
     });
 

From 2a78f126549473cb0670ee982a2bb4c0fc6c2fd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=ED=83=9C?= <samuel.park@mz.co.kr>
Date: Thu, 10 Apr 2025 02:18:15 +0900
Subject: [PATCH 15/18] chore: small fix

Signed-off-by: piggggggggy <samuel.park@mz.co.kr>
---
 apps/web/src/services/project/v2/pages/ProjectMainPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 606774769e..3c534c0629 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -98,7 +98,7 @@ const handleUpdateDashboardId = (id?: string) => {
             params: {
                 projectGroupOrProjectId: props.projectGroupOrProjectId,
             },
-        });
+        }).catch(() => {});
     } else {
         router.replace({
             name: PROJECT_ROUTE_V2._NAME,
@@ -106,7 +106,7 @@ const handleUpdateDashboardId = (id?: string) => {
                 projectGroupOrProjectId: props.projectGroupOrProjectId,
                 dashboardId: id,
             },
-        });
+        }).catch(() => {});
     }
 };
 

From aafb52e82b6943a2068b8a73c027f559914fa05e Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 11:03:58 +0900
Subject: [PATCH 16/18] chore: solve lint error

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../widgets/_composables/use-widget/use-widget-frame.ts    | 2 +-
 .../dashboards/composables/use-dashboard-manageable.ts     | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
index c80646a96f..81e72b837c 100644
--- a/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
@@ -10,10 +10,10 @@ import type { Currency } from '@/store/display/type';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
+import type { WidgetFrameProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
 import type { WidgetState } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import { getNonInheritedWidgetOptionNamesAmongUsedVariables } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
 import type { WidgetEmit, WidgetProps } from '@/services/dashboard-shared/dashboard-detail/legacy/widgets/_types/widget-type';
-import type { WidgetFrameProps } from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
 
 export interface WidgetFrameOptions {
     dateRange?: DateRange|ComputedRef<DateRange>;
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
index 399be7894f..4df6474247 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
@@ -2,6 +2,7 @@ import type { ComputedRef } from 'vue';
 import { computed, reactive } from 'vue';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 
 import { useUserStore } from '@/store/user/user-store';
@@ -36,13 +37,15 @@ export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOp
 
         if (entryPoint.value === 'WORKSPACE') {
             if (dashboard.value?.dashboard_id.startsWith('private')) return true;
-            if (dashboard.value?.shared && dashboard.value?.resource_group === RESOURCE_GROUP.DOMAIN) return false;
+            const publicDashboard = dashboard.value as PublicDashboardModel;
+            if (publicDashboard.shared && publicDashboard.resource_group === RESOURCE_GROUP.DOMAIN) return false;
             if (storeState.isWorkspaceOwner) return true;
             return false;
         }
 
         if (entryPoint.value === 'PROJECT') {
-            if (dashboard.value?.shared) return false;
+            const publicDashboard = dashboard.value as PublicDashboardModel;
+            if (publicDashboard.shared) return false;
             return true;
         }
         return false;

From 134004535e94943653c3345cf35a11559cf12ae6 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 11:16:09 +0900
Subject: [PATCH 17/18] chore: add optional chaining

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../dashboards/composables/use-dashboard-manageable.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
index 4df6474247..aad4d86480 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
@@ -38,14 +38,14 @@ export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOp
         if (entryPoint.value === 'WORKSPACE') {
             if (dashboard.value?.dashboard_id.startsWith('private')) return true;
             const publicDashboard = dashboard.value as PublicDashboardModel;
-            if (publicDashboard.shared && publicDashboard.resource_group === RESOURCE_GROUP.DOMAIN) return false;
+            if (publicDashboard?.shared && publicDashboard?.resource_group === RESOURCE_GROUP.DOMAIN) return false;
             if (storeState.isWorkspaceOwner) return true;
             return false;
         }
 
         if (entryPoint.value === 'PROJECT') {
             const publicDashboard = dashboard.value as PublicDashboardModel;
-            if (publicDashboard.shared) return false;
+            if (publicDashboard?.shared) return false;
             return true;
         }
         return false;

From 9433adfc481aa42269e4b67fbe9bda8c1adbdc30 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 11:26:35 +0900
Subject: [PATCH 18/18] chore: solve widget load bug

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../use-widget-data-table-query.ts            | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts
index 032d0fa9cb..46fc9794e1 100644
--- a/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts
@@ -3,7 +3,6 @@ import { computed } from 'vue';
 
 import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
-import type { DataTableGetParameters } from '@/api-clients/dashboard/private-data-table/schema/api-verbs/get';
 import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
@@ -15,28 +14,25 @@ export const useWidgetDataTableQuery = (dataTableId: ComputedRef<string|undefine
     const { publicDataTableAPI } = usePublicDataTableApi();
     const { privateDataTableAPI } = usePrivateDataTableApi();
 
-    const isPrivate = computed(() => {
-        if (!dataTableId.value) return false;
-        return dataTableId.value.startsWith('private');
-    });
+    const isPrivate = computed(() => dataTableId.value?.startsWith('private'));
 
     const { key: publicKey, params: publicParams } = useServiceQueryKey('dashboard', 'public-data-table', 'get', {
         contextKey: dataTableId,
-        params: {
-            data_table_id: dataTableId.value,
-        } as DataTableGetParameters,
+        params: computed(() => ({
+            data_table_id: dataTableId.value as string,
+        })),
     });
     const { key: privateKey, params: privateParams } = useServiceQueryKey('dashboard', 'private-data-table', 'get', {
         contextKey: dataTableId,
-        params: {
-            data_table_id: dataTableId.value,
-        } as DataTableGetParameters,
+        params: computed(() => ({
+            data_table_id: dataTableId.value as string,
+        })),
     });
 
     const privateDataTableQuery = useScopedQuery({
         queryKey: privateKey,
         queryFn: () => {
-            if (!dataTableId.value) {
+            if (!privateParams.value.data_table_id) {
                 throw new Error('DataTable ID is required for fetching data');
             }
             return privateDataTableAPI.get(privateParams.value);
@@ -48,7 +44,7 @@ export const useWidgetDataTableQuery = (dataTableId: ComputedRef<string|undefine
     const publicDataTableQuery = useScopedQuery({
         queryKey: publicKey,
         queryFn: () => {
-            if (!dataTableId.value) {
+            if (!publicParams.value.data_table_id) {
                 throw new Error('DataTable ID is required for fetching data');
             }
             return publicDataTableAPI.get(publicParams.value);