diff --git a/bigtop-manager-server/src/main/resources/stacks/extra/1.0.0/services/doris/configuration/doris-be-conf.xml b/bigtop-manager-server/src/main/resources/stacks/extra/1.0.0/services/doris/configuration/doris-be-conf.xml
index 7299f3465..e9c59b935 100644
--- a/bigtop-manager-server/src/main/resources/stacks/extra/1.0.0/services/doris/configuration/doris-be-conf.xml
+++ b/bigtop-manager-server/src/main/resources/stacks/extra/1.0.0/services/doris/configuration/doris-be-conf.xml
@@ -100,7 +100,7 @@ JAVA_OPTS_FOR_JDK_17="-Dfile.encoding=UTF-8 -Xmx4096m -DlogPath=$LOG_DIR/jni.log
 # https://github.com/apache/doris/blob/master/docs/zh-CN/community/developer-guide/debug-tool.md#jemalloc-heap-profile
 # https://jemalloc.net/jemalloc.3.html
 JEMALLOC_CONF="percpu_arena:percpu,background_thread:true,metadata_thp:auto,muzzy_decay_ms:5000,dirty_decay_ms:5000,oversize_threshold:0,prof:false,lg_prof_interval:-1"
-JEMALLOC_PROF_PRFIX="jemalloc_heap_profile_"
+JEMALLOC_PROF_PREFIX="jemalloc_heap_profile_"
 
 # ports for admin, web, heartbeat service
 be_port = ${be_port}
diff --git a/bigtop-manager-ui/src/api/metrics/index.ts b/bigtop-manager-ui/src/api/metrics/index.ts
index e35025542..a788ad0ab 100644
--- a/bigtop-manager-ui/src/api/metrics/index.ts
+++ b/bigtop-manager-ui/src/api/metrics/index.ts
@@ -18,7 +18,7 @@
  */
 
 import { get } from '@/api/request-util'
-import type { MetricsData, TimeRangeType } from './types'
+import type { MetricsData, ServiceMetrics, TimeRangeType } from './types'
 
 export const getClusterMetricsInfo = (paramsPath: { id: number }, params: { interval: TimeRangeType }) => {
   return get<MetricsData>(`/metrics/clusters/${paramsPath.id}`, params)
@@ -27,3 +27,7 @@ export const getClusterMetricsInfo = (paramsPath: { id: number }, params: { inte
 export const getHostMetricsInfo = (paramsPath: { id: number }, params: { interval: TimeRangeType }) => {
   return get<MetricsData>(`/metrics/hosts/${paramsPath.id}`, params)
 }
+
+export const getServiceMetricsInfo = (paramsPath: { id: number }, params: { interval: TimeRangeType }) => {
+  return get<ServiceMetrics>(`/metrics/services/${paramsPath.id}`, params)
+}
diff --git a/bigtop-manager-ui/src/api/metrics/types.ts b/bigtop-manager-ui/src/api/metrics/types.ts
index 86e4ec30e..88421ea9e 100644
--- a/bigtop-manager-ui/src/api/metrics/types.ts
+++ b/bigtop-manager-ui/src/api/metrics/types.ts
@@ -18,6 +18,7 @@
  */
 
 export type TimeRangeType = '1m' | '5m' | '15m' | '30m' | '1h' | '2h'
+
 export type MetricsData = {
   cpuUsageCur: string
   memoryUsageCur: string
@@ -34,3 +35,29 @@ export type MetricsData = {
   diskWrite: string[]
   timestamps: string[]
 }
+
+export type ServiceMetricType =
+  | 'NUMBER' // Numeric value, unitless
+  | 'PERCENT' // Percent, followed by %
+  | 'BYTE' // Byte, the front end can convert it through formatFromByte in storage util, the unit is B/KB/MB, etc.
+  | 'MILLISECOND' // milliseconds, followed by ms
+  | 'BPS' // Bytes per second, followed by B/s
+  | 'NPS' // Numeric value per second, followed by N/s
+
+type ServiceMetricItemSeries = {
+  name: string
+  type: string
+  data: any[]
+  [propName: string]: any
+}
+
+export type ServiceMetricItem = {
+  title: string
+  valueType: Lowercase<ServiceMetricType>
+  series: ServiceMetricItemSeries[]
+}
+
+export type ServiceMetrics = {
+  charts: ServiceMetricItem[]
+  timestamps: string[]
+}
diff --git a/bigtop-manager-ui/src/features/create-service/components/service-configurator.vue b/bigtop-manager-ui/src/features/create-service/components/service-configurator.vue
index fccbaa309..311b4614d 100644
--- a/bigtop-manager-ui/src/features/create-service/components/service-configurator.vue
+++ b/bigtop-manager-ui/src/features/create-service/components/service-configurator.vue
@@ -95,8 +95,8 @@
     for (const service of selectedServices.value) {
       if (!service.name || map.has(service.name)) continue
 
-      const requireds = extractRequireds(service.configs)
-      if (requireds.length > 0) map.set(service.name, requireds)
+      const requires = extractRequires(service.configs)
+      if (requires.length > 0) map.set(service.name, requires)
     }
 
     return map
@@ -168,10 +168,7 @@
   const matchKeyword = (keyword: string, prop: Property, config?: ServiceConfig) => {
     const lowerKeyword = keyword.toLowerCase()
     const includesProp =
-      prop.name?.toLowerCase().includes(lowerKeyword) ||
-      prop.value?.toLowerCase().includes(lowerKeyword) ||
-      prop.displayName?.toLowerCase().includes(lowerKeyword)
-
+      prop.name?.toLowerCase().includes(lowerKeyword) || prop.value?.toLowerCase().includes(lowerKeyword)
     if (config != undefined) {
       return config.name?.toLowerCase().includes(lowerKeyword) || includesProp
     }
@@ -186,13 +183,13 @@
    * @param configs - The service configurations to check.
    * @returns A list of configurations with their required properties.
    */
-  const extractRequireds = (configs?: ServiceConfig[]) => {
+  const extractRequires = (configs?: ServiceConfig[]) => {
     const result: ServiceConfig[] = []
 
     for (const config of configs ?? []) {
-      const requireds = config.properties?.filter((p) => p.attrs?.required && p.value == '') ?? []
-      if (requireds.length > 0) {
-        result.push({ [config.name!]: requireds })
+      const requires = config.properties?.filter((p) => p.attrs?.required && p.value == '') ?? []
+      if (requires.length > 0) {
+        result.push({ [config.name!]: requires })
       }
     }
 
@@ -299,12 +296,12 @@
                       />
                       <div
                         v-else
-                        :title="property.displayName ?? property.name"
+                        :title="property.name"
                         class="property-name"
                         :class="{ 'required-mark': property.attrs?.required }"
                       >
                         <span>
-                          {{ property.displayName ?? property.name }}
+                          {{ property.name }}
                         </span>
                       </div>
                     </a-form-item>
diff --git a/bigtop-manager-ui/src/features/metric/category-chart.vue b/bigtop-manager-ui/src/features/metric/category-chart.vue
index c64e4c78a..5185df2eb 100644
--- a/bigtop-manager-ui/src/features/metric/category-chart.vue
+++ b/bigtop-manager-ui/src/features/metric/category-chart.vue
@@ -147,10 +147,10 @@
    * @param legendMap - An array of [key, displayName] pairs.
    * @returns An array of ECharts series config objects with populated and formatted data.
    */
-  const generateChartSeries = <T,>(data: Partial<T>, legendMap: [string, string][]) => {
+  const generateChartSeries = <T,>(data: Partial<T>, legendMap: [string, string][], config = baseConfig) => {
     return legendMap.map(([key, name]) => ({
       name,
-      ...baseConfig,
+      ...config,
       data: (data[key] || []).map((v: unknown) => roundFixed(v))
     }))
   }
@@ -164,24 +164,25 @@
 
   watchEffect(() => {
     let series = [] as any,
-      legend = [] as any
+      legend = { data: [] } as any
+
+    const { series: temp_series = [] } = data.value
+    const xAxis = xAxisData.value?.map((v) => dayjs(Number(v) * 1000).format('HH:mm')) ?? []
 
     if (legendMap.value) {
       legend = new Map(legendMap.value).values()
       series = generateChartSeries(data.value, legendMap.value)
     } else {
-      series = [
-        {
-          name: title.value.toLowerCase(),
-          data: data.value.map((v) => roundFixed(v))
-        }
-      ]
+      if (temp_series.length > 1) {
+        legend.data = temp_series.map((s) => s.name)
+        series = [...temp_series]
+      } else {
+        series = [{ name: title.value.toLowerCase(), data: data.value.map((v) => roundFixed(v)) }]
+      }
     }
 
     setOptions({
-      xAxis: xAxisData.value
-        ? [{ data: xAxisData.value?.map((v) => dayjs(Number(v) * 1000).format('HH:mm')) || [] }]
-        : [],
+      xAxis: [{ data: xAxis ?? xAxis }],
       ...config.value,
       legend,
       series
diff --git a/bigtop-manager-ui/src/features/service-management/configs.vue b/bigtop-manager-ui/src/features/service-management/configs.vue
index 00027c6de..a1db8c52f 100644
--- a/bigtop-manager-ui/src/features/service-management/configs.vue
+++ b/bigtop-manager-ui/src/features/service-management/configs.vue
@@ -119,10 +119,7 @@
   const matchKeyword = (keyword: string, prop: Property, config?: ServiceConfig) => {
     const lowerKeyword = keyword.toLowerCase()
     const includesProp =
-      prop.name?.toLowerCase().includes(lowerKeyword) ||
-      prop.value?.toLowerCase().includes(lowerKeyword) ||
-      prop.displayName?.toLowerCase().includes(lowerKeyword)
-
+      prop.name?.toLowerCase().includes(lowerKeyword) || prop.value?.toLowerCase().includes(lowerKeyword)
     if (config != undefined) {
       return config.name?.toLowerCase().includes(lowerKeyword) || includesProp
     }
@@ -233,12 +230,12 @@
                       />
                       <div
                         v-else
-                        :title="property.displayName ?? property.name"
+                        :title="property.name"
                         class="property-name"
                         :class="{ 'required-mark': property.attrs?.required }"
                       >
                         <span>
-                          {{ property.displayName ?? property.name }}
+                          {{ property.name }}
                         </span>
                       </div>
                     </a-form-item>
diff --git a/bigtop-manager-ui/src/features/service-management/index.vue b/bigtop-manager-ui/src/features/service-management/index.vue
index 748fac7e5..d0679b95b 100644
--- a/bigtop-manager-ui/src/features/service-management/index.vue
+++ b/bigtop-manager-ui/src/features/service-management/index.vue
@@ -135,7 +135,10 @@
     <main-card v-model:active-key="activeKey" :tabs="tabs">
       <template #tab-item>
         <keep-alive>
-          <component :is="getCompName" v-bind="{ ...serviceDetail, clusterId: routeParams.id }"></component>
+          <component
+            :is="getCompName"
+            v-bind="{ ...serviceDetail, clusterId: routeParams.id, ...routeParams }"
+          ></component>
         </keep-alive>
       </template>
     </main-card>
diff --git a/bigtop-manager-ui/src/features/service-management/overview.vue b/bigtop-manager-ui/src/features/service-management/overview.vue
index a55e2ca59..89e9001a7 100644
--- a/bigtop-manager-ui/src/features/service-management/overview.vue
+++ b/bigtop-manager-ui/src/features/service-management/overview.vue
@@ -19,63 +19,42 @@
 
 <script setup lang="ts">
   import { CommonStatus, CommonStatusTexts } from '@/enums/state'
+  import { Empty } from 'ant-design-vue'
+  import { formatFromByte } from '@/utils/storage.ts'
+  import { getServiceMetricsInfo } from '@/api/metrics'
+  import { isEmpty } from '@/utils/tools'
 
-  import GaugeChart from '@/features/metric/gauge-chart.vue'
   import CategoryChart from '@/features/metric/category-chart.vue'
 
-  import { Empty } from 'ant-design-vue'
   import type { ServiceVO, ServiceStatusType } from '@/api/service/types'
-
-  type TimeRangeText = '1m' | '15m' | '30m' | '1h' | '6h' | '30h'
-  type TimeRangeItem = {
-    text: TimeRangeText
-    time: string
-  }
+  import type { ServiceMetricItem, ServiceMetrics, ServiceMetricType, TimeRangeType } from '@/api/metrics/types'
 
   const { t } = useI18n()
-  const attrs = useAttrs() as unknown as Required<ServiceVO> & { clusterId: number }
-  const currTimeRange = ref<TimeRangeText>('15m')
-  const chartData = ref({
-    chart1: [],
-    chart2: [],
-    chart3: [],
-    chart4: []
-  })
+  const attrs = useAttrs() as any
+  const currTimeRange = ref<TimeRangeType>('5m')
+  const chartData = ref<Partial<ServiceMetrics>>({})
+
+  const timeRanges = shallowRef<TimeRangeType[]>(['1m', '5m', '15m', '30m', '1h', '2h'])
   const statusColors = shallowRef<Record<ServiceStatusType, keyof typeof CommonStatusTexts>>({
     1: 'healthy',
     2: 'unhealthy',
     3: 'unknown'
   })
+
+  const unitMap: Record<Lowercase<ServiceMetricType>, string | ((value: number) => string)> = {
+    number: '',
+    percent: '%',
+    byte: (val) => formatFromByte(val, 0),
+    millisecond: 'ms',
+    bps: 'B/s',
+    nps: 'N/s'
+  }
+
+  const clusterId = computed(() => attrs.id)
+  const noChartData = computed(() => Object.values(chartData.value).length === 0)
   const serviceKeys = computed(() => Object.keys(baseConfig.value) as (keyof ServiceVO)[])
-  const noChartData = computed(() => Object.values(chartData.value).every((v) => v.length === 0))
-  const timeRanges = computed((): TimeRangeItem[] => [
-    {
-      text: '1m',
-      time: ''
-    },
-    {
-      text: '15m',
-      time: ''
-    },
-    {
-      text: '30m',
-      time: ''
-    },
-    {
-      text: '1h',
-      time: ''
-    },
-    {
-      text: '6h',
-      time: ''
-    },
-    {
-      text: '30h',
-      time: ''
-    }
-  ])
-  const baseConfig = computed((): Partial<Record<keyof ServiceVO, string>> => {
-    return {
+  const baseConfig = computed(
+    (): Partial<Record<keyof ServiceVO, string>> => ({
       status: t('overview.service_status'),
       displayName: t('overview.service_name'),
       version: t('overview.service_version'),
@@ -83,12 +62,45 @@
       restartFlag: t('service.required_restart'),
       metrics: t('overview.metrics'),
       kerberos: t('overview.kerberos')
+    })
+  )
+
+  const handleTimeRange = (time: TimeRangeType) => {
+    if (currTimeRange.value === time) return
+    currTimeRange.value = time
+    getServiceMetrics()
+  }
+
+  const getServiceMetrics = async () => {
+    try {
+      const res = await getServiceMetricsInfo({ id: attrs.serviceId }, { interval: currTimeRange.value })
+      chartData.value = { ...res }
+    } catch (error) {
+      console.log('Failed to fetch service metrics:', error)
     }
-  })
+  }
 
-  const handleTimeRange = (time: TimeRangeItem) => {
-    currTimeRange.value = time.text
+  const getChartFormatter = (chart: ServiceMetricItem) => {
+    const unit = unitMap[chart.valueType]
+    const valueWithUnit = (val: any) => (typeof unit === 'function' ? unit(val as number) : `${val} ${unit}`)
+    return {
+      tooltip: (val: any) => `${isEmpty(val) ? '--' : valueWithUnit(val)}`,
+      yAxis: valueWithUnit
+    }
   }
+
+  const { pause, resume } = useIntervalFn(getServiceMetrics, 30000, { immediate: true })
+
+  onActivated(() => {
+    if (clusterId.value == 0) return
+    getServiceMetrics()
+    resume()
+  })
+
+  onDeactivated(() => {
+    if (clusterId.value == 0) return
+    pause()
+  })
 </script>
 
 <template>
@@ -155,13 +167,13 @@
           <a-space :size="12">
             <div
               v-for="time in timeRanges"
-              :key="time.text"
+              :key="time"
               tabindex="0"
               class="time-range"
-              :class="{ 'time-range-activated': currTimeRange === time.text }"
+              :class="{ 'time-range-activated': currTimeRange === time }"
               @click="handleTimeRange(time)"
             >
-              {{ time.text }}
+              {{ time }}
             </div>
           </a-space>
         </div>
@@ -171,24 +183,15 @@
           </div>
         </template>
         <a-row v-else class="box-content">
-          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart1" :title="t('overview.memory_usage')" />
-            </div>
-          </a-col>
-          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="chart-item-wrp">
-              <gauge-chart chart-id="chart2" :title="t('overview.cpu_usage')" />
-            </div>
-          </a-col>
-          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-            <div class="chart-item-wrp">
-              <category-chart chart-id="chart4" :title="t('overview.cpu_usage')" />
-            </div>
-          </a-col>
-          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <a-col v-for="(chart, index) in chartData.charts" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
             <div class="chart-item-wrp">
-              <category-chart chart-id="chart3" :title="t('overview.memory_usage')" />
+              <category-chart
+                :chart-id="`chart${index}`"
+                :x-axis-data="chartData?.timestamps"
+                :data="chart"
+                :title="chart.title"
+                :formatter="getChartFormatter(chart)"
+              />
             </div>
           </a-col>
         </a-row>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
index 5bb75204f..3df288951 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/cluster/index.vue
@@ -119,8 +119,8 @@
     />
     <main-card v-model:active-key="activeTab" :tabs="tabs">
       <template #tab-item>
-        <keep-alive>
-          <component :is="getCompName" :key="activeTab" v-bind="currCluster" v-model:payload="currCluster"></component>
+        <keep-alive :key="activeTab">
+          <component :is="getCompName" v-bind="currCluster" v-model:payload="currCluster"></component>
         </keep-alive>
       </template>
     </main-card>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
index ed8ef9e77..7e375cb0c 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
+++ b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
@@ -20,7 +20,7 @@
 <script setup lang="ts">
   import { Empty } from 'ant-design-vue'
   import { formatFromByte } from '@/utils/storage.ts'
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage, isEmpty } from '@/utils/tools'
   import { CommonStatus, CommonStatusTexts } from '@/enums/state.ts'
   import { useServiceStore } from '@/store/service'
   import { useJobProgress } from '@/store/job-progress'
@@ -323,7 +323,7 @@
                 :data="chartData"
                 :title="t('overview.system_load')"
                 :formatter="{
-                  tooltip: (val) => `${val == null || val == '' ? '--' : val}`,
+                  tooltip: (val) => `${isEmpty(val) ? '--' : val}`,
                   yAxis: (val) => `${val}`
                 }"
                 :legend-map="[
@@ -342,7 +342,7 @@
                 :data="chartData"
                 :title="t('overview.disk_io')"
                 :formatter="{
-                  tooltip: (val) => `${val == null || val == '' ? '--' : formatFromByte(val as number, 0)}`,
+                  tooltip: (val) => `${isEmpty(val) ? '--' : formatFromByte(val as number, 0)}`,
                   yAxis: (val) => formatFromByte(val as number, 0)
                 }"
                 :legend-map="[
diff --git a/bigtop-manager-ui/src/store/create-service/validation.ts b/bigtop-manager-ui/src/store/create-service/validation.ts
index 5db870f96..3c751f361 100644
--- a/bigtop-manager-ui/src/store/create-service/validation.ts
+++ b/bigtop-manager-ui/src/store/create-service/validation.ts
@@ -33,17 +33,13 @@ export function useValidations() {
   /**
    * Validate services from infrastructure
    * @param targetService - The service being validated
-   * @param requireds - List of required services
+   * @param requires - List of required services
    * @param infraNames - List of available infrastructure services
    * @returns Whether there are missing services
    */
-  function validServiceFromInfra(
-    targetService: ExpandServiceVO,
-    requireds: string[] | undefined,
-    infraNames: string[]
-  ) {
+  function validServiceFromInfra(targetService: ExpandServiceVO, requires: string[] | undefined, infraNames: string[]) {
     const installedInfra = new Set(serviceStore.getInstalledNamesOrIdsOfServiceByKey('0', 'names'))
-    const missingServiceNames = (requireds ?? []).filter(
+    const missingServiceNames = (requires ?? []).filter(
       (name) => !installedInfra.has(name) && infraNames.includes(name)
     )
 
@@ -62,19 +58,19 @@ export function useValidations() {
    * Confirm dependency addition or removal
    * @param type - The action type ('add' or 'remove')
    * @param targetService - The target service
-   * @param requireds - The required service
+   * @param requires - The required service
    * @returns A promise resolving to the user's decision
    */
   function confirmDependencyAddition(
     type: 'add' | 'remove',
     targetService: ExpandServiceVO,
-    requireds: ExpandServiceVO
+    requires: ExpandServiceVO
   ) {
     const content = type === 'add' ? 'dependencies_add_msg' : 'dependencies_remove_msg'
 
     return new Promise((resolve) => {
       confirmModal({
-        tipText: t(`service.${content}`, [targetService.displayName, requireds.displayName]),
+        tipText: t(`service.${content}`, [targetService.displayName, requires.displayName]),
         cancelText: t('common.no'),
         okText: t('common.yes'),
         onOk: () => resolve(true),
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index 91ea96d07..2b3cb572b 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -17,6 +17,13 @@
  * under the License.
  */
 
+/**
+ * Copies the given text to the clipboard.
+ * Uses the Clipboard API if available, otherwise falls back to ClipboardJS.
+ *
+ * @param text - The text to copy.
+ * @returns A promise that resolves on success or rejects on failure.
+ */
 export function copyText(text: string): Promise<any> {
   if (navigator.clipboard) {
     return navigator.clipboard.writeText(text)
@@ -25,7 +32,7 @@ export function copyText(text: string): Promise<any> {
     try {
       const { default: ClipboardJS } = await import('clipboard')
       if (!ClipboardJS.isSupported()) {
-        reject(new Error('ClipboardJS not support!'))
+        reject(new Error('ClipboardJS not supported!'))
         return
       }
       const btn = document.createElement('button')
@@ -43,15 +50,26 @@ export function copyText(text: string): Promise<any> {
       })
       btn.click()
     } catch (error) {
-      console.log('copytext :>> ', error)
+      console.log('copyText :>> ', error)
     }
   })
 }
 
+/**
+ * Returns the URL of a PNG image from the assets folder.
+ *
+ * @param imageName - The name of the image (default is 'logo').
+ * @returns The URL of the image.
+ */
 export function usePngImage(imageName: string = 'logo'): string {
   return new URL(`../assets/images/${imageName}.png`, import.meta.url).href
 }
 
+/**
+ * Scrolls the given container element to the bottom.
+ *
+ * @param container - The container element to scroll.
+ */
 export function scrollToBottom(container: HTMLElement | null) {
   if (!container) {
     return
@@ -61,16 +79,35 @@ export function scrollToBottom(container: HTMLElement | null) {
   })
 }
 
+/**
+ * Generates a random number string based on the current timestamp.
+ *
+ * @param len - The length of the random string (default is 6).
+ * @returns A random string derived from the timestamp.
+ */
 export function getRandomFromTimestamp(len: number = 6) {
   return Date.now().toString().slice(-len)
 }
 
+/**
+ * Generates a random alphanumeric string of the specified length.
+ *
+ * @param length - The length of the random string (default is 8).
+ * @returns A random alphanumeric string.
+ */
 export function generateRandomId(length = 8) {
   return Math.random()
     .toString(36)
     .substring(2, length + 2)
 }
 
+/**
+ * Picks specific keys from an object and returns a new object with those keys.
+ *
+ * @param obj - The source object.
+ * @param keys - The keys to pick from the object.
+ * @returns A new object with the picked keys.
+ */
 export function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
   return keys.reduce(
     (acc, key) => {
@@ -83,9 +120,25 @@ export function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): Pi
   )
 }
 
+/**
+ * Creates a new object with a unique key added to it.
+ *
+ * @param item - The source object.
+ * @returns A new object with an added `__key` property.
+ */
 export function createKeyedItem<T extends object>(item: T): T & { __key: string } {
   return {
     ...item,
     __key: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random()}`
   }
 }
+
+/**
+ * Checks if a value is empty (undefined, null, or an empty string).
+ *
+ * @param value - The value to check.
+ * @returns True if the value is empty, otherwise false.
+ */
+export function isEmpty<T>(value: T): boolean {
+  return value === undefined || value === null || value === ''
+}