fix: hanle select date ui

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx

@@ -40,13 +40,11 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
       <div className='mb-4'>
         <div className='system-xl-semibold mb-2 text-text-primary'>{t('common.appMenus.overview')}</div>
         <div className='flex items-center justify-between'>
-          <div className='flex flex-row items-center'>
-            <TimeRangePicker
-              ranges={TIME_PERIOD_MAPPING}
-              onSelect={setPeriod}
-              queryDateFormat={queryDateFormat}
-            />
-          </div>
+          <TimeRangePicker
+            ranges={TIME_PERIOD_MAPPING}
+            onSelect={setPeriod}
+            queryDateFormat={queryDateFormat}
+          />
           {headerRight}
         </div>
       </div>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker.tsx

@@ -9,6 +9,8 @@ import { HourglassShape } from '@/app/components/base/icons/src/vender/other'
 import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import { noop } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 
 const today = dayjs()
 
@@ -25,6 +27,35 @@ const TimeRangePicker: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
+  const isCustom = false
+
+  const renderRangeTrigger = useCallback((item: Item | null, isOpen: boolean) => {
+    // todo: custom i18n and last 30days i18n
+    return (
+      <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pl-3 pr-2', isOpen && 'bg-state-base-hover-alt')}>
+        <div className='system-sm-regular text-components-input-text-filled'>{isCustom ? 'Custom' : item?.name}</div>
+        <RiArrowDownSLine className={cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')} />
+      </div>
+    )
+  }, [isCustom])
+
+  const renderOption = useCallback(({ item, selected }: { item: Item; selected: boolean }) => {
+    return (
+      <>
+        {selected && (
+          <span
+            className={cn(
+              'absolute left-2 top-[9px] flex items-center  text-text-accent',
+            )}
+          >
+            <RiCheckLine className="h-4 w-4" aria-hidden="true" />
+          </span>
+        )}
+        <span className={cn('system-md-regular block truncate')}>{item.name}</span>
+      </>
+    )
+  }, [])
+
   const handleSelectRange = useCallback((item: Item) => {
     const { name, value } = item
     let period: PeriodParams['query'] | null = null
@@ -46,6 +77,11 @@ const TimeRangePicker: FC<Props> = ({
         notClearable={true}
         onSelect={handleSelectRange}
         defaultValue={0}
+        wrapperClassName='h-8'
+        optionWrapClassName='w-[200px] translate-x-[-24px]'
+        renderTrigger={renderRangeTrigger}
+        optionClassName='flex items-center py-0 pl-7 pr-2 h-8'
+        renderOption={renderOption}
       />
       <HourglassShape className='h-3.5 w-2 text-components-input-bg-normal' />
       <TimePicker

web/app/components/base/icons/assets/vender/other/hourglass-shape.svg

@@ -1,3 +1,3 @@
 <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 14C8 11.7909 6.20914 10 4 10C1.79086 10 0 11.7909 0 14V0C8.05332e-08 2.20914 1.79086 4 4 4C6.20914 4 8 2.20914 8 0V14Z" fill="#C8CEDA" fill-opacity="0.25"/>
+<path d="M8 14C8 11.7909 6.20914 10 4 10C1.79086 10 0 11.7909 0 14V0C8.05332e-08 2.20914 1.79086 4 4 4C6.20914 4 8 2.20914 8 0V14Z" fill="#C8CEDA" fill-opacity="1"/>
 </svg>

web/app/components/base/icons/src/vender/other/HourglassShape.json

@@ -17,7 +17,7 @@
 				"attributes": {
 					"d": "M8 14C8 11.7909 6.20914 10 4 10C1.79086 10 0 11.7909 0 14V0C8.05332e-08 2.20914 1.79086 4 4 4C6.20914 4 8 2.20914 8 0V14Z",
 					"fill": "currentColor",
-					"fill-opacity": "0.25"
+					"fill-opacity": "1"
 				},
 				"children": []
 			}

web/app/components/base/select/index.tsx

@@ -31,7 +31,7 @@ export type Item = {
 export type ISelectProps = {
   className?: string
   wrapperClassName?: string
-  renderTrigger?: (value: Item | null) => React.JSX.Element | null
+  renderTrigger?: (value: Item | null, isOpen: boolean) => React.JSX.Element | null
   items?: Item[]
   defaultValue?: number | string
   disabled?: boolean
@@ -216,7 +216,7 @@ const SimpleSelect: FC<ISelectProps> = ({
     >
       {({ open }) => (
         <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
-          {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
+          {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem, open)}</ListboxButton>}
           {!renderTrigger && (
             <ListboxButton onClick={() => {
               onOpenChange?.(open)