💄 style(time-slot): Add chart display

apps/admin/app/dashboard/system/node.tsx

@@ -8,15 +8,26 @@ import {
 } from '@/services/admin/system';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
+import { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
 import { Label } from '@workspace/ui/components/label';
 import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
+import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
 import { DicesIcon } from 'lucide-react';
 import { nanoid } from 'nanoid';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { Cell, Legend, Pie, PieChart } from 'recharts';
 import { toast } from 'sonner';
 
+const COLORS = [
+  'hsl(var(--chart-1))',
+  'hsl(var(--chart-2))',
+  'hsl(var(--chart-3))',
+  'hsl(var(--chart-4))',
+  'hsl(var(--chart-5))',
+];
+
 export default function Node() {
   const t = useTranslations('system.node');
 
@@ -56,23 +67,25 @@ export default function Node() {
     },
   });
 
-  const addTimeSlot = () => {
+  const chartTimeSlots = useMemo(() => {
-    setTimeSlots([...timeSlots, { start_time: '', end_time: '', multiplier: 1 }]);
+    return timeSlots.map((slot) => ({
-  };
+      name: `${slot.start_time} - ${slot.end_time}`,
+      value: slot.multiplier,
+    }));
+  }, [timeSlots]);
 
-  const removeTimeSlot = (index: number) => {
+  const chartConfig = useMemo(() => {
-    setTimeSlots(timeSlots.filter((_, i) => i !== index));
+    return chartTimeSlots.reduce(
-  };
+      (acc, item, index) => {
-
+        acc[item.name] = {
-  const updateTimeSlot = (index: number, field: keyof API.TimePeriod, value: string | number) => {
+          label: item.name,
-    const updatedSlots = timeSlots.map((slot, i) => {
+          color: COLORS[index % COLORS.length] || 'hsl(var(--default-chart-color))',
-      if (i === index) {
+        };
-        return { ...slot, [field]: value };
+        return acc;
-      }
+      },
-      return slot;
+      {} as Record<string, { label: string; color: string }>,
-    });
+    );
-    setTimeSlots(updatedSlots);
+  }, [data]);
-  };
 
   return (
     <>
@@ -162,55 +175,73 @@ export default function Node() {
           </TableRow>
         </TableBody>
       </Table>
-      <div className='px-2'>
+      <div className='flex flex-col-reverse gap-8 px-4 pt-6 md:flex-row md:items-start'>
-        <div className='mt-4 grid gap-4'>
+        <div className='w-full md:w-1/2'>
-          {timeSlots.map((slot, index) => (
+          <ChartContainer config={chartConfig} className='mx-auto aspect-square max-w-[400px]'>
-            <div key={index} className='flex flex-col items-end gap-2 lg:flex-row'>
+            <PieChart>
-              <div>
+              <Pie
-                <Label>{t('startTime')}</Label>
+                data={chartTimeSlots}
-                <EnhancedInput
+                cx='50%'
-                  key={`${index}-start-time`}
+                cy='50%'
-                  type='time'
+                labelLine={false}
-                  value={slot.start_time}
+                outerRadius='80%'
-                  onValueChange={(value) => updateTimeSlot(index, 'start_time', value as string)}
+                fill='#8884d8'
-                />
+                dataKey='value'
-              </div>
+                label={({ name, percent, value }) =>
-
+                  `${value?.toFixed(2)}x (${(percent * 100).toFixed(0)}%)`
-              <div>
+                }
-                <Label>{t('endTime')}</Label>
-                <EnhancedInput
-                  key={`${index}-end-time`}
-                  type='time'
-                  value={slot.end_time}
-                  onValueChange={(value) => updateTimeSlot(index, 'end_time', value as string)}
-                />
-              </div>
-
-              <div>
-                <Label>{t('multiplier')}</Label>
-                <EnhancedInput
-                  key={`${index}-multiplier`}
-                  type='number'
-                  value={slot.multiplier}
-                  onValueChange={(value) => updateTimeSlot(index, 'multiplier', value as number)}
-                  min={1}
-                  step='0.1'
-                />
-              </div>
-              <Button
-                variant='destructive'
-                onClick={() => {
-                  removeTimeSlot(index);
-                }}
               >
-                {t('delete')}
+                {chartTimeSlots.map((entry, index) => (
-              </Button>
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-            </div>
+                ))}
-          ))}
+              </Pie>
+              <ChartTooltip
+                content={({ payload }) => {
+                  if (payload && payload.length) {
+                    const data = payload[0]?.payload;
+                    return (
+                      <div className='bg-background rounded-lg border p-2 shadow-sm'>
+                        <div className='grid grid-cols-2 gap-2'>
+                          <div className='flex flex-col'>
+                            <span className='text-muted-foreground text-[0.70rem] uppercase'>
+                              {t('timeSlot')}
+                            </span>
+                            <span className='text-muted-foreground font-bold'>
+                              {data.name || '其他'}
+                            </span>
+                          </div>
+                          <div className='flex flex-col'>
+                            <span className='text-muted-foreground text-[0.70rem] uppercase'>
+                              {t('multiplier')}
+                            </span>
+                            <span className='font-bold'>{data.value.toFixed(2)}x</span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                }}
+              />
+              <Legend />
+            </PieChart>
+          </ChartContainer>
+        </div>
+        <div className='w-full md:w-1/2'>
+          <ArrayInput<API.TimePeriod>
+            fields={[
+              {
+                name: 'start_time',
+                prefix: t('startTime'),
+                type: 'time',
+              },
+              { name: 'end_time', prefix: t('endTime'), type: 'time' },
+              { name: 'multiplier', prefix: t('multiplier'), type: 'number' },
+            ]}
+            value={timeSlots}
+            onChange={setTimeSlots}
+          />
         </div>
-        <Button onClick={addTimeSlot} variant='outline' className='mt-4 w-full'>
-          {t('addTimeSlot')}
-        </Button>
       </div>
     </>
   );

apps/admin/locales/cs-CZ/system.json

@@ -61,7 +61,8 @@
     "reset": "Resetovat",
     "save": "Uložit",
     "saveSuccess": "Úspěšně uloženo",
-    "startTime": "Čas začátku"
+    "startTime": "Čas začátku",
+    "timeSlot": "Časový úsek"
   },
   "register": {
     "emailSuffixWhitelist": "Seznam povolených přípon e-mailů",

apps/admin/locales/de-DE/system.json

@@ -61,7 +61,8 @@
     "reset": "Zurücksetzen",
     "save": "Speichern",
     "saveSuccess": "Erfolgreich gespeichert",
-    "startTime": "Startzeit"
+    "startTime": "Startzeit",
+    "timeSlot": "Zeitfenster"
   },
   "register": {
     "emailSuffixWhitelist": "E-Mail-Suffix-Whitelist",

apps/admin/locales/en-US/system.json

@@ -61,7 +61,8 @@
     "reset": "Reset",
     "save": "Save",
     "saveSuccess": "Save Successful",
-    "startTime": "Start Time"
+    "startTime": "Start Time",
+    "timeSlot": "Time Slot"
   },
   "register": {
     "emailSuffixWhitelist": "Email Suffix Whitelist",

apps/admin/locales/es-ES/system.json

@@ -61,7 +61,8 @@
     "reset": "Restablecer",
     "save": "Guardar",
     "saveSuccess": "Guardado exitosamente",
-    "startTime": "Hora de Inicio"
+    "startTime": "Hora de Inicio",
+    "timeSlot": "Franja Horaria"
   },
   "register": {
     "emailSuffixWhitelist": "Lista blanca de sufijos de correo electrónico",

apps/admin/locales/es-MX/system.json

@@ -61,7 +61,8 @@
     "reset": "Restablecer",
     "save": "Guardar",
     "saveSuccess": "Guardado exitosamente",
-    "startTime": "Hora de Inicio"
+    "startTime": "Hora de Inicio",
+    "timeSlot": "Franja Horaria"
   },
   "register": {
     "emailSuffixWhitelist": "Lista blanca de sufijos de correo electrónico",

apps/admin/locales/fa-IR/system.json

@@ -61,7 +61,8 @@
     "reset": "بازنشانی",
     "save": "ذخیره",
     "saveSuccess": "ذخیره با موفقیت انجام شد",
-    "startTime": "زمان شروع"
+    "startTime": "زمان شروع",
+    "timeSlot": "بازه زمانی"
   },
   "register": {
     "emailSuffixWhitelist": "لیست سفید پسوند ایمیل",

apps/admin/locales/fi-FI/system.json

@@ -61,7 +61,8 @@
     "reset": "Nollaa",
     "save": "Tallenna",
     "saveSuccess": "Tallennus onnistui",
-    "startTime": "Aloitusaika"
+    "startTime": "Aloitusaika",
+    "timeSlot": "Aikaväli"
   },
   "register": {
     "emailSuffixWhitelist": "Sähköpostin jälkiliitteen sallittu luettelo",

apps/admin/locales/fr-FR/system.json

@@ -61,7 +61,8 @@
     "reset": "Réinitialiser",
     "save": "Enregistrer",
     "saveSuccess": "Enregistrement réussi",
-    "startTime": "Heure de Début"
+    "startTime": "Heure de Début",
+    "timeSlot": "Créneau horaire"
   },
   "register": {
     "emailSuffixWhitelist": "Liste blanche des suffixes d'email",

apps/admin/locales/hi-IN/system.json

@@ -61,7 +61,8 @@
     "reset": "रीसेट",
     "save": "सहेजें",
     "saveSuccess": "सफलतापूर्वक सहेजा गया",
-    "startTime": "प्रारंभ समय"
+    "startTime": "प्रारंभ समय",
+    "timeSlot": "समय स्लॉट"
   },
   "register": {
     "emailSuffixWhitelist": "ईमेल प्रत्यय श्वेतसूची",

apps/admin/locales/hu-HU/system.json

@@ -61,7 +61,8 @@
     "reset": "Visszaállítás",
     "save": "Mentés",
     "saveSuccess": "Sikeres mentés",
-    "startTime": "Kezdési Idő"
+    "startTime": "Kezdési Idő",
+    "timeSlot": "Időpont"
   },
   "register": {
     "emailSuffixWhitelist": "E-mail végződés fehérlista",

apps/admin/locales/ja-JP/system.json

@@ -61,7 +61,8 @@
     "reset": "リセット",
     "save": "保存",
     "saveSuccess": "保存成功",
-    "startTime": "開始時間"
+    "startTime": "開始時間",
+    "timeSlot": "時間枠"
   },
   "register": {
     "emailSuffixWhitelist": "メールサフィックスホワイトリスト",

apps/admin/locales/ko-KR/system.json

@@ -61,7 +61,8 @@
     "reset": "재설정",
     "save": "저장",
     "saveSuccess": "저장 성공",
-    "startTime": "시작 시간"
+    "startTime": "시작 시간",
+    "timeSlot": "시간대"
   },
   "register": {
     "emailSuffixWhitelist": "이메일 접미사 화이트리스트",

apps/admin/locales/no-NO/system.json

@@ -61,7 +61,8 @@
     "reset": "Tilbakestill",
     "save": "Lagre",
     "saveSuccess": "Lagring vellykket",
-    "startTime": "Starttid"
+    "startTime": "Starttid",
+    "timeSlot": "Tidsluke"
   },
   "register": {
     "emailSuffixWhitelist": "E-post suffiks hviteliste",

apps/admin/locales/pl-PL/system.json

@@ -61,7 +61,8 @@
     "reset": "Resetuj",
     "save": "Zapisz",
     "saveSuccess": "Zapisano pomyślnie",
-    "startTime": "Czas rozpoczęcia"
+    "startTime": "Czas rozpoczęcia",
+    "timeSlot": "Przedział czasowy"
   },
   "register": {
     "emailSuffixWhitelist": "Biała lista sufiksów e-mail",

apps/admin/locales/pt-BR/system.json

@@ -61,7 +61,8 @@
     "reset": "Redefinir",
     "save": "Salvar",
     "saveSuccess": "Salvo com sucesso",
-    "startTime": "Hora de Início"
+    "startTime": "Hora de Início",
+    "timeSlot": "Horário"
   },
   "register": {
     "emailSuffixWhitelist": "Lista branca de sufixos de e-mail",

apps/admin/locales/ro-RO/system.json

@@ -61,7 +61,8 @@
     "reset": "Resetare",
     "save": "Salvare",
     "saveSuccess": "Salvare reușită",
-    "startTime": "Ora de Începere"
+    "startTime": "Ora de Începere",
+    "timeSlot": "Interval de timp"
   },
   "register": {
     "emailSuffixWhitelist": "Lista albă a sufixelor de e-mail",

apps/admin/locales/ru-RU/system.json

@@ -61,7 +61,8 @@
     "reset": "Сбросить",
     "save": "Сохранить",
     "saveSuccess": "Успешно сохранено",
-    "startTime": "Время начала"
+    "startTime": "Время начала",
+    "timeSlot": "Временной интервал"
   },
   "register": {
     "emailSuffixWhitelist": "Белый список суффиксов электронной почты",

apps/admin/locales/th-TH/system.json

@@ -61,7 +61,8 @@
     "reset": "รีเซ็ต",
     "save": "บันทึก",
     "saveSuccess": "บันทึกสำเร็จ",
-    "startTime": "เวลาเริ่มต้น"
+    "startTime": "เวลาเริ่มต้น",
+    "timeSlot": "ช่วงเวลา"
   },
   "register": {
     "emailSuffixWhitelist": "รายการอนุญาตโดเมนอีเมล",

apps/admin/locales/tr-TR/system.json

@@ -61,7 +61,8 @@
     "reset": "Sıfırla",
     "save": "Kaydet",
     "saveSuccess": "Başarıyla kaydedildi",
-    "startTime": "Başlangıç Zamanı"
+    "startTime": "Başlangıç Zamanı",
+    "timeSlot": "Zaman Dilimi"
   },
   "register": {
     "emailSuffixWhitelist": "E-posta Soneki Beyaz Listesi",

apps/admin/locales/uk-UA/system.json

@@ -61,7 +61,8 @@
     "reset": "Скинути",
     "save": "Зберегти",
     "saveSuccess": "Збережено успішно",
-    "startTime": "Час Початку"
+    "startTime": "Час Початку",
+    "timeSlot": "Часовий проміжок"
   },
   "register": {
     "emailSuffixWhitelist": "Білий список суфіксів електронної пошти",

apps/admin/locales/vi-VN/system.json

@@ -61,7 +61,8 @@
     "reset": "Đặt lại",
     "save": "Lưu",
     "saveSuccess": "Lưu thành công",
-    "startTime": "Thời gian bắt đầu"
+    "startTime": "Thời gian bắt đầu",
+    "timeSlot": "Khung giờ"
   },
   "register": {
     "emailSuffixWhitelist": "Danh sách trắng hậu tố email",

apps/admin/locales/zh-CN/system.json

@@ -61,7 +61,8 @@
     "reset": "重置",
     "save": "保存",
     "saveSuccess": "保存成功",
-    "startTime": "开始时间"
+    "startTime": "开始时间",
+    "timeSlot": "时间段"
   },
   "register": {
     "emailSuffixWhitelist": "电子邮件后缀白名单",

apps/admin/locales/zh-HK/system.json

@@ -61,7 +61,8 @@
     "reset": "重設",
     "save": "儲存",
     "saveSuccess": "保存成功",
-    "startTime": "開始時間"
+    "startTime": "開始時間",
+    "timeSlot": "時間段"
   },
   "register": {
     "emailSuffixWhitelist": "電子郵件後綴白名單",

packages/ui/src/custom-components/dynamic-Inputs.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 interface FieldConfig extends Omit<EnhancedInputProps, 'type'> {
   name: string;
-  type: 'text' | 'number' | 'select';
+  type: 'text' | 'number' | 'select' | 'time';
   options?: { label: string; value: string }[];
   internal?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,7 +53,7 @@ export function ObjectInput<T extends Record<string, any>>({
   };
 
   return (
-    <div className='flex flex-1 gap-4'>
+    <div className='flex flex-1 flex-wrap gap-4'>
       {fields.map(({ name, type, options, ...fieldProps }) => (
         <div key={name} className='flex-1'>
           {type === 'select' && options ? (
@@ -127,6 +127,12 @@ export function ArrayInput<T extends Record<string, any>>({
     onChange(modifiedItems);
   };
 
+  useEffect(() => {
+    if (value.length > 0) {
+      setDisplayItems(value);
+    }
+  }, [value]);
+
   return (
     <div className='flex flex-col gap-4'>
       {displayItems.map((item, index) => (

packages/ui/src/custom-components/enhanced-input.tsx

@@ -76,7 +76,9 @@ export function EnhancedInput({
       className={cn('border-input flex w-full items-center rounded-md border', className)}
       suppressHydrationWarning
     >
-      {prefix && <div className='bg-muted mr-px flex h-9 items-center px-3'>{prefix}</div>}
+      {prefix && (
+        <div className='bg-muted mr-px flex h-9 items-center text-nowrap px-3'>{prefix}</div>
+      )}
       <Input
         {...props}
         value={value}
@@ -84,7 +86,9 @@ export function EnhancedInput({
         onChange={handleChange}
         onBlur={handleBlur}
       />
-      {suffix && <div className='bg-muted ml-px flex h-9 items-center px-3'>{suffix}</div>}
+      {suffix && (
+        <div className='bg-muted ml-px flex h-9 items-center text-nowrap px-3'>{suffix}</div>
+      )}
     </div>
   );
 }