From 478ebd51448f483a445d4c7a8f5bce2a2c53702b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?=
 <samuel.park@megazone.com>
Date: Mon, 16 Dec 2024 13:44:11 +0900
Subject: [PATCH] fix(date-range): refactor date-range widget field (#5223)

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 ...getFormDataTableCardTransformPivotForm.vue |   5 +-
 .../constant/default-value-registry.ts        |   7 +-
 .../constant/validator-registry.ts            |  14 +
 .../_widget-field-value-manager/index.ts      |   2 +-
 .../_widget-field-value-manager/type.ts       |   2 +-
 .../date-range/_WidgetFieldDateRange.vue      | 624 ++++++++++++++++++
 .../_widget-fields/date-range/constant.ts     |   4 +
 .../_widget-fields/date-range/helper.ts       |  50 ++
 .../widgets/types/widget-field-type.ts        |   3 +-
 9 files changed, 702 insertions(+), 9 deletions(-)
 create mode 100644 apps/web/src/common/modules/widgets/_widget-fields/date-range/_WidgetFieldDateRange.vue
 create mode 100644 apps/web/src/common/modules/widgets/_widget-fields/date-range/helper.ts

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
index 7fafaa2010..2ddba81eb2 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
@@ -30,10 +30,7 @@ import type { PivotOptions } from '@/common/modules/widgets/types/widget-model';
 
 const props = defineProps<TransformDataTableProps<PivotOptions>>();
 
-const emit = defineEmits<{(e: 'update:operator-options', value: PivotOptions): void;
-    (e: 'update:form-data', value: Omit<PivotOptions, 'dataTableId'>): void;
-    (e: 'update:data-table-info', value: TransformDataTableInfo): void;
-}>();
+const emit = defineEmits<{(e: 'update:operator-options', value: PivotOptions): void; }>();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
index 9bc2be14a8..8321abe546 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
@@ -59,7 +59,12 @@ export const widgetFieldDefaultValueMap: DefaultValueRegistry = {
     dateFormat: {
         format: Object.keys(DATE_FORMAT)[0],
     },
-    dateRange: {},
+    dateRange: {
+        inherit: true,
+        options: {
+            value: 'auto',
+        },
+    },
     displayAnnotation: undefined,
     displaySeriesLabel: undefined,
     granularity: {
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
index 1d2cfbd421..2e0052b5a5 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
@@ -7,6 +7,9 @@ import type { ColorSchemaValue } from '@/common/modules/widgets/_widget-fields/c
 import type { ComparisonValue } from '@/common/modules/widgets/_widget-fields/comparison/type';
 import type { _CustomTableColumnWidthValue } from '@/common/modules/widgets/_widget-fields/custom-table-column-width/type';
 import type { DataFieldOptions, DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
+import { DAILY_ENABLED_VALUES, MONTHLY_ENABLED_VALUES, YEARLY_ENABLED_VALUES } from '@/common/modules/widgets/_widget-fields/date-range/constant';
+import { checkInvalidCustomValue } from '@/common/modules/widgets/_widget-fields/date-range/helper';
+import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { DisplayAnnotationValue } from '@/common/modules/widgets/_widget-fields/display-annotation/type';
 import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-fields/display-series-label/type';
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
@@ -26,6 +29,17 @@ export interface WidgetValidatorRegistry {
 }
 
 export const widgetValidatorRegistry: WidgetValidatorRegistry = {
+    dateRange: (fieldValue: DateRangeValue, widgetConfig, allValueMap) => {
+        const _dateRangeType = fieldValue.options.value;
+        const _granularity = allValueMap.granularity?.value?.granularity;
+        if (!_dateRangeType || !_granularity) return false;
+        if (checkInvalidCustomValue(fieldValue, _granularity).invalid) return false;
+        if (_granularity === 'MONTHLY' && !MONTHLY_ENABLED_VALUES.includes(_dateRangeType)) return false;
+        if (_granularity === 'DAILY' && !DAILY_ENABLED_VALUES.includes(_dateRangeType)) return false;
+        if (_granularity === 'YEARLY' && !YEARLY_ENABLED_VALUES.includes(_dateRangeType)) return false;
+
+        return true;
+    },
     dataField: (fieldValue: DataFieldValue, widgetConfig) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const dataFieldOptions = _fieldsSchema.dataField?.options as DataFieldOptions;
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
index 1271b4c000..2d17018bcc 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
@@ -61,7 +61,7 @@ export default class WidgetFieldValueManager {
 
         const validator = widgetValidatorRegistry[key];
         if (validator) {
-            const isValid = validator(this.modifiedData[key], this.widgetConfig);
+            const isValid = validator(this.modifiedData[key], this.widgetConfig, this.modifiedData);
             if (!isValid) {
                 this.validationErrors[key as string] = `Invalid value for field "${key}"`;
                 return false;
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts
index 9748e0b1b7..f61958ef6f 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts
@@ -33,7 +33,7 @@ import type { _XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis
 import type { _YAxisValue } from '@/common/modules/widgets/_widget-fields/y-axis/type';
 import type { WidgetConfig } from '@/common/modules/widgets/types/widget-config-type';
 
-export type FieldValueValidator<T extends WidgetFieldValue> = (fieldValue: T, widgetConfig: WidgetConfig) => boolean;
+export type FieldValueValidator<T extends WidgetFieldValue> = (fieldValue: T, widgetConfig: WidgetConfig, allValueMap: WidgetFieldValueMap) => boolean;
 export type FieldDefaultValueConvertor<T extends keyof WidgetFieldTypeMap> = (widgetConfig: WidgetConfig, dataTable: PublicDataTableModel|PrivateDataTableModel) => WidgetFieldTypeMap[T]['value'];
 
 export interface WidgetFieldValueMap {
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
new file mode 100644
index 0000000000..284e4220e3
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/_WidgetFieldDateRange.vue
@@ -0,0 +1,624 @@
+<script lang="ts" setup>
+import {
+    computed, reactive, watch,
+} from 'vue';
+
+import dayjs from 'dayjs';
+
+import {
+    PFieldGroup, PToggleButton, PSelectDropdown, PI, PDatetimePicker, PTooltip, PTextInput,
+} from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+
+import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import {
+    DAILY_ENABLED_VALUES,
+    DATE_RANGE_ADVANCED_OPERATOR_MAP,
+    DATE_RANGE_DAILY_VALUE_MAP,
+    DATE_RANGE_MONTHLY_VALUE_MAP,
+    DATE_RANGE_YEARLY_VALUE_MAP,
+    MONTHLY_ENABLED_VALUES,
+    YEARLY_ENABLED_VALUES,
+} from '@/common/modules/widgets/_widget-fields/date-range/constant';
+import { checkInvalidCustomValue } from '@/common/modules/widgets/_widget-fields/date-range/helper';
+import type {
+    DateRangeAdvancedOperator,
+    DateRangeOptions,
+    DateRangeValue,
+    DateRangeValueType,
+} from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
+import type {
+    _WidgetFieldComponentProps,
+} from '@/common/modules/widgets/types/widget-field-type';
+
+import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+
+const GRANULARITY_UNIT_MAP = {
+    MONTHLY: { singular: 'Month', plural: 'Months' },
+    DAILY: { singular: 'Day', plural: 'Days' },
+    YEARLY: { singular: 'Year', plural: 'Years' },
+};
+
+const getCommonDateRangeValueLabel = (value: string): string => {
+    if (value === 'auto') return 'Auto';
+    if (value === 'custom') return 'Custom';
+    if (value === 'advanced') return 'Advanced';
+    return 'Auto';
+};
+const FIELD_KEY = 'dateRange';
+
+const props = defineProps<_WidgetFieldComponentProps<DateRangeOptions>>();
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+
+const state = reactive({
+    fieldValue: computed<DateRangeValue>(() => props.fieldManager.data[FIELD_KEY].value),
+    granularity: computed<GranularityValue['granularity']>(() => (props.fieldManager.data.granularity?.value?.granularity || 'MONTHLY')),
+    baseDateRange: computed<DateRange|undefined>(() => dashboardDetailState.options.date_range),
+    valueMenuItems: computed<MenuItem[]>(() => {
+        if (state.granularity === 'MONTHLY') return MONTHLY_ENABLED_VALUES.map((value) => ({ label: DATE_RANGE_MONTHLY_VALUE_MAP[value] || getCommonDateRangeValueLabel(value), name: value }));
+        if (state.granularity === 'DAILY') return DAILY_ENABLED_VALUES.map((value) => ({ label: DATE_RANGE_DAILY_VALUE_MAP[value] || getCommonDateRangeValueLabel(value), name: value }));
+        if (state.granularity === 'YEARLY') return YEARLY_ENABLED_VALUES.map((value) => ({ label: DATE_RANGE_YEARLY_VALUE_MAP[value] || getCommonDateRangeValueLabel(value), name: value }));
+        return [];
+    }),
+    inheritCustomMenuItems: computed<MenuItem[]>(() => {
+        if (state.granularity === 'MONTHLY') {
+            return Array.from({ length: 12 }, (_, i) => ({ name: (i + 1), label: (i + 1).toString() }));
+        }
+        if (state.granularity === 'DAILY') {
+            return Array.from({ length: 31 }, (_, i) => ({ name: (i + 1), label: (i + 1).toString() }));
+        }
+        const currentYear = dayjs().year();
+        return Array.from({ length: 3 }, (_, i) => ({ name: currentYear - i, label: (currentYear - i).toString() }));
+    }),
+    disinheritYearlyCustomMenuItems: computed<MenuItem[]>(() => {
+        const currentYear = dayjs().year();
+        return Array.from({ length: 10 }, (_, i) => ({ name: currentYear - i, label: (currentYear - i).toString() }));
+    }),
+    advancedOperatorMenuItems: computed<MenuItem[]>(() => [
+        { name: DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD, label: 'Plus', icon: 'ic_plus-circle' },
+        { name: DATE_RANGE_ADVANCED_OPERATOR_MAP.SUBSTRACT, label: 'Minus', icon: 'ic_minus_circle' },
+    ]),
+});
+
+const { dateRange } = useWidgetDateRange({
+    dateRangeFieldValue: computed(() => state.fieldValue),
+    baseOnDate: computed(() => (state.fieldValue?.inherit ? state.baseDateRange?.end : undefined)),
+    granularity: computed(() => state.granularity),
+    usePreviewFormat: true,
+});
+
+
+/* Event */
+const handleSelectDateRangeValue = (selected: DateRangeValueType) => {
+    if (selected === 'custom') {
+        const isInherit = !!state.fieldValue?.inherit;
+        let _start;
+        let _end;
+        if (state.granularity === 'YEARLY') {
+            _start = isInherit ? dayjs.utc().year() : dayjs.utc().startOf('year').format('YYYY-MM-DD');
+            _end = isInherit ? dayjs.utc().year() : dayjs.utc().endOf('year').format('YYYY-MM-DD');
+        } else if (state.granularity === 'MONTHLY') {
+            _start = isInherit ? dayjs.utc().month() + 1 : dayjs.utc().startOf('month').format('YYYY-MM-DD');
+            _end = isInherit ? dayjs.utc().month() + 1 : dayjs.utc().endOf('month').format('YYYY-MM-DD');
+        } else if (state.granularity === 'DAILY') {
+            _start = isInherit ? dayjs.utc().date() : dayjs.utc().startOf('day').format('YYYY-MM-DD');
+            _end = isInherit ? dayjs.utc().date() : dayjs.utc().endOf('day').format('YYYY-MM-DD');
+        }
+        props.fieldManager.setFieldValue(FIELD_KEY, {
+            inherit: state.fieldValue?.inherit,
+            options: {
+                value: selected,
+                start: _start,
+                end: _end,
+            },
+        });
+    } else if (selected === 'advanced') {
+        props.fieldManager.setFieldValue(FIELD_KEY, {
+            inherit: state.fieldValue?.inherit,
+            options: {
+                value: selected,
+                start: 0,
+                end: 0,
+                start_operator: DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD,
+                end_operator: DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD,
+            },
+        });
+    } else {
+        props.fieldManager.setFieldValue(FIELD_KEY, {
+            inherit: state.fieldValue?.inherit,
+            options: {
+                value: selected,
+            },
+        });
+    }
+};
+const handleUpdateInherit = (value: boolean) => {
+    props.fieldManager.setFieldValue(FIELD_KEY, {
+        inherit: value,
+        options: {
+            value: 'auto',
+        },
+    });
+};
+
+const handleSelectCustomValue = (type: 'start'|'end', selected: number) => {
+    const isInherit = !!state.fieldValue?.inherit;
+
+    if (isInherit) {
+        props.fieldManager.setFieldValue(FIELD_KEY, {
+            inherit: true,
+            options: {
+                ...state.fieldValue?.options,
+                [type]: selected,
+            },
+        });
+    } else {
+        let value;
+        if (state.granularity === 'YEARLY') {
+            value = type === 'start' ? `${selected}-01-01` : `${selected}-12-31`;
+        } else if (state.granularity === 'MONTHLY') {
+            value = '';
+        }
+        props.fieldManager.setFieldValue(FIELD_KEY, {
+            inherit: false,
+            options: {
+                ...state.fieldValue?.options,
+                [type]: value,
+            },
+        });
+    }
+};
+
+const handleUpdateDisinheritMonthlyCustomSelectedDates = (type: 'start'|'end', selectedDates: string[]) => {
+    if (!selectedDates.length) return;
+    const value = type === 'start' ? dayjs.utc(selectedDates[0]).startOf('month').format('YYYY-MM-DD')
+        : dayjs.utc(selectedDates[0]).endOf('month').format('YYYY-MM-DD');
+    props.fieldManager.setFieldValue(FIELD_KEY, {
+        inherit: false,
+        options: {
+            ...state.fieldValue?.options,
+            [type]: value,
+        },
+    });
+};
+
+const handleUpdateDisinheritDailyCustomSelectedDates = (selectedDates: string[]) => {
+    if (!selectedDates.length || selectedDates.length !== 2) return;
+
+    const _start = dayjs.utc(selectedDates[0]).format('YYYY-MM-DD');
+    const _end = dayjs.utc(selectedDates[1]).format('YYYY-MM-DD');
+    props.fieldManager.setFieldValue(FIELD_KEY, {
+        inherit: false,
+        options: {
+            ...state.fieldValue?.options,
+            start: _start,
+            end: _end,
+        },
+    });
+};
+
+const handleSelectAdvancedOperator = (type: 'start_operator'|'end_operator', selected: DateRangeAdvancedOperator) => {
+    props.fieldManager.setFieldValue(FIELD_KEY, {
+        inherit: state.fieldValue?.inherit,
+        options: {
+            ...state.fieldValue?.options,
+            [type]: selected,
+        },
+    });
+};
+
+const handleUpdateAdvancedValue = (type: 'start'|'end', value: string) => {
+    props.fieldManager.setFieldValue(FIELD_KEY, {
+        inherit: state.fieldValue?.inherit,
+        options: {
+            ...state.fieldValue?.options,
+            [type]: parseInt(value),
+        },
+    });
+};
+
+/* Watcher */
+watch(() => state.granularity, () => {
+    props.fieldManager.setFieldValue(FIELD_KEY, {
+        inherit: state.fieldValue?.inherit,
+        options: {
+            value: 'auto',
+        },
+    });
+});
+
+</script>
+
+<template>
+    <div class="widget-field-date-range">
+        <p-field-group :label="$t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE')"
+                       required
+        >
+            <div class="form-wrapper">
+                <div class="inherit-toggle">
+                    <span>{{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.USE_BASE_DATE') }}</span>
+                    <p-toggle-button :value="state.fieldValue?.inherit"
+                                     @update:value="handleUpdateInherit"
+                    />
+                </div>
+                <div class="range-contents">
+                    <div class="value-selector">
+                        <p-select-dropdown style-type="transparent"
+                                           :menu="state.valueMenuItems"
+                                           :selected="state.fieldValue?.options?.value"
+                                           @select="handleSelectDateRangeValue"
+                        >
+                            <template #dropdown-left-area>
+                                <p-i class="inherit-icon"
+                                     :name="state.fieldValue?.inherit ? 'ic_link' : 'ic_unlink'"
+                                     width="1rem"
+                                     height="1rem"
+                                />
+                            </template>
+                        </p-select-dropdown>
+
+                        <p-tooltip v-if="state.fieldValue?.inherit"
+                                   :contents="$t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INFO_TEXT')"
+                        >
+                            <p-i name="ic_info-circle"
+                                 width="1rem"
+                                 height="1rem"
+                            />
+                        </p-tooltip>
+                    </div>
+                    <div class="value-detail">
+                        <div v-if="state.fieldValue?.options?.value === 'custom'"
+                             class="custom-advanced-range-selector"
+                        >
+                            <div class="select-wrapper">
+                                <!--Inherit CASE-->
+                                <template v-if="state.fieldValue?.inherit">
+                                    <p-field-group class="selector-field-group"
+                                                   required
+                                    >
+                                        <template #label>
+                                            <span class="field-label">
+                                                {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.START') }}
+                                                <span class="granularity-unit">
+                                                    ({{ GRANULARITY_UNIT_MAP[state.granularity]?.singular }})
+                                                </span>
+                                            </span>
+                                        </template>
+                                        <p-select-dropdown :menu="state.inheritCustomMenuItems"
+                                                           :selected="state.fieldValue?.options?.start"
+                                                           block
+                                                           :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                           @select="handleSelectCustomValue('start', $event)"
+                                        />
+                                    </p-field-group>
+                                    <p-field-group class="selector-field-group"
+                                                   required
+                                    >
+                                        <template #label>
+                                            <span class="field-label">
+                                                {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }}
+                                                <span class="granularity-unit">
+                                                    ({{ GRANULARITY_UNIT_MAP[state.granularity]?.sigular }})
+                                                </span>
+                                            </span>
+                                        </template>
+                                        <p-select-dropdown :menu="state.inheritCustomMenuItems"
+                                                           :selected="state.fieldValue?.options?.end"
+                                                           block
+                                                           :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                           @select="handleSelectCustomValue('end', $event)"
+                                        />
+                                    </p-field-group>
+                                </template>
+                                <!--Disinherit CASE-->
+                                <template v-else>
+                                    <div v-if="state.granularity === 'YEARLY'"
+                                         class="disinherit-custom-yearly-selector"
+                                    >
+                                        <p-field-group class="selector-field-group"
+                                                       required
+                                        >
+                                            <template #label>
+                                                <span class="field-label">
+                                                    {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.START') }}
+                                                    <span class="granularity-unit">
+                                                        ({{ GRANULARITY_UNIT_MAP[state.granularity]?.singular }})
+                                                    </span>
+                                                </span>
+                                            </template>
+                                            <p-select-dropdown :menu="state.disinheritYearlyCustomMenuItems"
+                                                               :selected="dayjs.utc(state.fieldValue?.options?.start).year()"
+                                                               block
+                                                               :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                               @select="handleSelectCustomValue('start', $event)"
+                                            />
+                                        </p-field-group>
+                                        <p-field-group class="selector-field-group"
+                                                       required
+                                        >
+                                            <template #label>
+                                                <span class="field-label">
+                                                    {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }}
+                                                    <span class="granularity-unit">
+                                                        ({{ GRANULARITY_UNIT_MAP[state.granularity]?.singular }})
+                                                    </span>
+                                                </span>
+                                            </template>
+                                            <p-select-dropdown :menu="state.disinheritYearlyCustomMenuItems"
+                                                               :selected="dayjs.utc(state.fieldValue?.options?.end).year()"
+                                                               block
+                                                               :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                               @select="handleSelectCustomValue('end', $event)"
+                                            />
+                                        </p-field-group>
+                                    </div>
+                                    <div v-else-if="state.granularity === 'MONTHLY'"
+                                         class="disinherit-custom-monthly-selector"
+                                    >
+                                        <p-field-group class="selector-field-group"
+                                                       required
+                                        >
+                                            <template #label>
+                                                <span class="field-label">
+                                                    {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.START') }}
+                                                </span>
+                                            </template>
+                                            <p-datetime-picker class="picker"
+                                                               select-mode="single"
+                                                               data-type="yearToMonth"
+                                                               :selected-dates="[dayjs.utc(state.fieldValue?.options?.start).format('YYYY-MM')]"
+                                                               :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                               @update:selected-dates="handleUpdateDisinheritMonthlyCustomSelectedDates('start', $event)"
+                                            />
+                                        </p-field-group>
+                                        <p-field-group class="selector-field-group"
+                                                       required
+                                        >
+                                            <template #label>
+                                                <span class="field-label">
+                                                    {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }}
+                                                </span>
+                                            </template>
+                                            <p-datetime-picker class="picker"
+                                                               select-mode="single"
+                                                               data-type="yearToMonth"
+                                                               :selected-dates="[dayjs.utc(state.fieldValue?.options?.end).format('YYYY-MM')]"
+                                                               :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                               @update:selected-dates="handleUpdateDisinheritMonthlyCustomSelectedDates('end', $event)"
+                                            />
+                                        </p-field-group>
+                                    </div>
+                                    <div v-else
+                                         class="disinherit-custom-daily-selector"
+                                    >
+                                        <p-datetime-picker class="picker"
+                                                           select-mode="range"
+                                                           :selected-dates="[
+                                                               dayjs.utc(state.fieldValue?.options?.start).format('YYYY-MM-DD'),
+                                                               dayjs.utc(state.fieldValue?.options?.end).format('YYYY-MM-DD')
+                                                           ]"
+                                                           :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                           @update:selected-dates="handleUpdateDisinheritDailyCustomSelectedDates"
+                                        />
+                                    </div>
+                                </template>
+                            </div>
+                            <p v-if="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                               class="invalid-text"
+                            >
+                                {{ checkInvalidCustomValue(state.fieldValue, state.granularity).text }}
+                            </p>
+                        </div>
+                        <div v-else-if="state.fieldValue?.options?.value === 'advanced'"
+                             class="custom-advanced-range-selector"
+                        >
+                            <div class="select-wrapper">
+                                <p-field-group class="selector-field-group"
+                                               required
+                                >
+                                    <template #label>
+                                        <span class="field-label">
+                                            {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.START') }}
+                                        </span>
+                                    </template>
+                                    <div class="advanced-field-content">
+                                        <div class="range-preview">
+                                            {{ dateRange.start }}
+                                        </div>
+                                        <div class="advanced-content-wrapper">
+                                            <div class="operator">
+                                                <span>Today</span>
+                                                <p-select-dropdown class="advanced-selector"
+                                                                   :menu="state.advancedOperatorMenuItems"
+                                                                   :selected="state.fieldValue?.options?.start_operator"
+                                                                   :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                                   @update:selected="handleSelectAdvancedOperator('start_operator', $event)"
+                                                >
+                                                    <template #dropdown-button="item">
+                                                        <div class="selected">
+                                                            <p-i :name="item?.icon"
+                                                                 width="1rem"
+                                                                 height="1rem"
+                                                            />
+                                                            <span>{{ item?.label }}</span>
+                                                        </div>
+                                                    </template>
+                                                </p-select-dropdown>
+                                            </div>
+                                            <div class="value">
+                                                <p-text-input class="advanced-input"
+                                                              type="number"
+                                                              :value="state.fieldValue?.options?.start"
+                                                              :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                              @update:value="handleUpdateAdvancedValue('start', $event)"
+                                                />
+                                                <span>{{ GRANULARITY_UNIT_MAP[state.granularity]?.plural }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </p-field-group>
+                                <p-field-group class="selector-field-group"
+                                               required
+                                >
+                                    <template #label>
+                                        <span class="field-label">
+                                            {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.END') }}
+                                        </span>
+                                    </template>
+                                    <div class="advanced-field-content">
+                                        <div class="range-preview">
+                                            {{ dateRange.end }}
+                                        </div>
+                                        <div class="advanced-content-wrapper">
+                                            <div class="operator">
+                                                <span>Today</span>
+                                                <p-select-dropdown class="advanced-selector"
+                                                                   :menu="state.advancedOperatorMenuItems"
+                                                                   :selected="state.fieldValue?.options?.end_operator"
+                                                                   :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                                   @update:selected="handleSelectAdvancedOperator('end_operator', $event)"
+                                                >
+                                                    <template #dropdown-button="item">
+                                                        <div class="selected">
+                                                            <p-i :name="item?.icon"
+                                                                 width="1rem"
+                                                                 height="1rem"
+                                                            />
+                                                            <span>{{ item?.label }}</span>
+                                                        </div>
+                                                    </template>
+                                                </p-select-dropdown>
+                                            </div>
+                                            <div class="value">
+                                                <p-text-input class="advanced-input"
+                                                              type="number"
+                                                              :value="state.fieldValue?.options?.end"
+                                                              :invalid="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                                                              @update:value="handleUpdateAdvancedValue('end', $event)"
+                                                />
+                                                <span>{{ GRANULARITY_UNIT_MAP[state.granularity]?.plural }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </p-field-group>
+                            </div>
+                            <p v-if="checkInvalidCustomValue(state.fieldValue, state.granularity).invalid"
+                               class="invalid-text"
+                            >
+                                checkInvalidCustomValue(state.fieldValue, state.granularity).text }}
+                            </p>
+                        </div>
+                        <div v-else
+                             class="date-preview"
+                        >
+                            {{ `${dateRange.start} ~ ${dateRange.end}` }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-field-group>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.widget-field-date-range {
+    .form-wrapper {
+        @apply border-2 border-gray-150 rounded-lg w-full;
+
+        .inherit-toggle {
+            @apply flex items-center justify-between text-label-md text-gray-900 border-b border-gray-150;
+
+            gap: 0.375rem;
+            padding: 0.75rem;
+        }
+        .range-contents {
+            padding: 0.25rem 0.75rem 0.75rem;
+            .value-selector {
+                @apply w-full flex items-center justify-between;
+                height: 2rem;
+                margin-bottom: 0.125rem;
+                .inherit-icon {
+                    min-width: 1rem;
+                }
+            }
+            .value-detail {
+                @apply w-full;
+                .date-preview {
+                    @apply bg-gray-100 rounded-lg text-label-md text-gray-900;
+                    height: 2rem;
+                    padding: 0.375rem 0.75rem;
+                }
+                .custom-advanced-range-selector {
+                    .select-wrapper {
+                        @apply flex gap-2;
+                        .selector-field-group {
+                            width: calc(50% - 0.25rem);
+                            .field-label {
+                                @apply text-label-sm text-gray-900 font-bold;
+                                .granularity-unit {
+                                    @apply text-gray-500 font-normal;
+                                }
+                            }
+                            .advanced-field-content {
+                                @apply rounded-l;
+                                .range-preview {
+                                    @apply bg-gray-100 text-label-md text-gray-900 rounded-t-lg;
+                                    padding: 0.375rem 0.75rem;
+                                }
+                                .advanced-content-wrapper {
+                                    @apply border border-gray-150 rounded-b-lg;
+                                    padding: 0.75rem 0.5rem;
+                                    .operator {
+                                        @apply flex items-center gap-1 flex-wrap;
+                                        margin-bottom: 0.25rem;
+                                    }
+                                    .value {
+                                        @apply flex items-center gap-1 flex-wrap;
+                                    }
+                                    .advanced-selector {
+                                        @apply flex-1;
+                                        .selected {
+                                            @apply flex items-center gap-1 text-label-md text-gray-800;
+                                        }
+                                    }
+                                    .advanced-input {
+                                        @apply flex-1;
+                                        min-width: 6.5rem;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    .disinherit-custom-yearly-selector {
+                        @apply flex gap-2 w-full;
+                    }
+                    .disinherit-custom-monthly-selector {
+                        @apply flex gap-2 w-full;
+                    }
+                    .disinherit-custom-daily-selector {
+                        @apply w-full;
+                    }
+                    .invalid-text {
+                        @apply text-label-md text-red-500;
+                        margin-top: 0.25rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* custom design-system component - p-field-group */
+:deep(.p-field-group) {
+    margin-bottom: 0;
+}
+
+/* custom design-system component - p-datetime-picker */
+:deep(.p-datetime-picker) {
+    width: 100%;
+}
+</style>
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/date-range/constant.ts b/apps/web/src/common/modules/widgets/_widget-fields/date-range/constant.ts
index 330661933e..2ffaee9b2e 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/date-range/constant.ts
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/constant.ts
@@ -33,3 +33,7 @@ export const DATE_RANGE_ADVANCED_OPERATOR_MAP = {
     ADD: 'ADD',
     SUBSTRACT: 'SUBSTRACT',
 } as const;
+
+export const MONTHLY_ENABLED_VALUES = ['auto', ...DATE_RANGE_MONTHLY_VALUES, 'custom', 'advanced'];
+export const DAILY_ENABLED_VALUES = ['auto', ...DATE_RANGE_DAILY_VALUES, 'custom', 'advanced'];
+export const YEARLY_ENABLED_VALUES = ['auto', ...DATE_RANGE_YEARLY_VALUES, 'custom', 'advanced'];
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/date-range/helper.ts b/apps/web/src/common/modules/widgets/_widget-fields/date-range/helper.ts
new file mode 100644
index 0000000000..e872f8798e
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/helper.ts
@@ -0,0 +1,50 @@
+import dayjs from 'dayjs';
+
+import { i18n } from '@/translations';
+
+import { DATE_RANGE_ADVANCED_OPERATOR_MAP } from '@/common/modules/widgets/_widget-fields/date-range/constant';
+import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
+
+
+export const checkInvalidCustomValue = (fieldValue: DateRangeValue, granularity: GranularityValue['granularity']) => {
+    const _value = fieldValue?.options?.value;
+    if (_value === 'custom') {
+        if (!fieldValue.options.start || !fieldValue.options.end) return { invalid: true, text: '' };
+        if (fieldValue?.inherit) {
+            const inheritCustomStartValue = fieldValue?.options?.start || 0;
+            const inheritCustomEndValue = fieldValue?.options?.end || 0;
+            if (inheritCustomStartValue > inheritCustomEndValue) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_RANGE_TEXT') };
+            const gap = inheritCustomEndValue - inheritCustomStartValue;
+            if (granularity === 'YEARLY' && gap >= 3) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+            if (granularity === 'MONTHLY' && gap >= 12) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+            if (granularity === 'DAILY' && gap >= 31) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+        } else {
+            const _startDate = dayjs.utc(fieldValue?.options?.start);
+            const _endDate = dayjs.utc(fieldValue?.options.end);
+            if (granularity === 'YEARLY' && _endDate.diff(_startDate, 'year') >= 3) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+            if (granularity === 'MONTHLY' && _endDate.diff(_startDate, 'month') >= 12) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+            if (granularity === 'DAILY' && _endDate.diff(_startDate, 'day') >= 31) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+            if (_startDate.isAfter(_endDate)) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_RANGE_TEXT') };
+        }
+    } else if (_value === 'advanced') {
+        if (
+            (fieldValue.options.start === undefined || fieldValue.options.end === undefined)
+            || (Number.isNaN(fieldValue.options.start) || Number.isNaN(fieldValue.options.end))
+        ) return { invalid: true, text: '' };
+        const _startOperator = fieldValue?.options?.start_operator;
+        const _endOperator = fieldValue?.options?.end_operator;
+        const _start = fieldValue?.options?.start as number|undefined;
+        const _end = fieldValue?.options?.end as number|undefined;
+        const _startValue: number = _startOperator === DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD ? _start || 0 : (_start || 0) * -1;
+        const _endValue: number = _endOperator === DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD ? _end || 0 : (_end || 0) * -1;
+
+        const gap = _endValue - _startValue;
+
+        if (gap < 0) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_RANGE_TEXT') };
+        if (granularity === 'YEARLY' && gap >= 3) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+        if (granularity === 'MONTHLY' && gap >= 12) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+        if (granularity === 'DAILY' && gap >= 31) return { invalid: true, text: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_2.DATE_RANGE_INVALID_LIMIT_TEXT') };
+    }
+    return { invalid: false, text: '' };
+};
diff --git a/apps/web/src/common/modules/widgets/types/widget-field-type.ts b/apps/web/src/common/modules/widgets/types/widget-field-type.ts
index 1f11be2290..ab6ecac756 100644
--- a/apps/web/src/common/modules/widgets/types/widget-field-type.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-field-type.ts
@@ -22,7 +22,6 @@ import type { MinOptions } from '@/common/modules/widgets/_widget-fields/min/typ
 import type { MissingValueOptions } from '@/common/modules/widgets/_widget-fields/missing-value/type';
 import type { NumberFormatOptions } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { PieChartTypeOptions } from '@/common/modules/widgets/_widget-fields/pie-chart-type/type';
-import type { ProgressBarOptions } from '@/common/modules/widgets/_widget-fields/progress-bar/type';
 import type { StackByOptions } from '@/common/modules/widgets/_widget-fields/stack-by/type';
 import type { SubTotalOptions } from '@/common/modules/widgets/_widget-fields/sub-total/type';
 import type { TableColumnWidthOptions } from '@/common/modules/widgets/_widget-fields/table-column-width/type';
@@ -43,7 +42,7 @@ export type WidgetFieldOptions = DataFieldOptions | TableDataFieldOptions | XAxi
     | StackByOptions | GroupByOptions | CategoryByOptions
     | FormatRulesOptions | AdvancedFormatRulesOptions
     | MinOptions | MaxOptions | LegendOptions | IconOptions | SubTotalOptions | TotalOptions
-    | ComparisonOptions | ProgressBarOptions | ColorSchemaOptions | PieChartTypeOptions | DateFormatOptions
+    | ComparisonOptions | ColorSchemaOptions | PieChartTypeOptions | DateFormatOptions
     | NumberFormatOptions | DataFieldHeatmapColorOptions | TextWrapOptions | TableColumnWidthOptions | CustomTableColumnWidthOptions
     | MissingValueOptions | WidgetHeightOptions | DisplaySeriesLabelOptions | DateRangeOptions
     | TooltipNumberFormatOptions;