💄 style(time-slot): Add chart display

2024-12-30 13:02:03 +07:00 · 2024-12-30 13:02:03 +07:00 · c44ad47f3c
commit c44ad47f3c
parent 837157cc42
26 changed files with 155 additions and 91 deletions
--- a/apps/admin/app/dashboard/system/node.tsx
+++ b/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 = () => {
-    setTimeSlots([...timeSlots, { start_time: '', end_time: '', multiplier: 1 }]);
-  };
+  const chartTimeSlots = useMemo(() => {
+    return timeSlots.map((slot) => ({
+      name: `${slot.start_time} - ${slot.end_time}`,
+      value: slot.multiplier,
+    }));
+  }, [timeSlots]);

-  const removeTimeSlot = (index: number) => {
-    setTimeSlots(timeSlots.filter((_, i) => i !== index));
-  };
-
-  const updateTimeSlot = (index: number, field: keyof API.TimePeriod, value: string | number) => {
-    const updatedSlots = timeSlots.map((slot, i) => {
-      if (i === index) {
-        return { ...slot, [field]: value };
-      }
-      return slot;
-    });
-    setTimeSlots(updatedSlots);
-  };
+  const chartConfig = useMemo(() => {
+    return chartTimeSlots.reduce(
+      (acc, item, index) => {
+        acc[item.name] = {
+          label: item.name,
+          color: COLORS[index % COLORS.length] || 'hsl(var(--default-chart-color))',
+        };
+        return acc;
+      },
+      {} as Record<string, { label: string; color: string }>,
+    );
+  }, [data]);

  return (
    <>
@ -162,55 +175,73 @@ export default function Node() {
          </TableRow>
        </TableBody>
      </Table>
-      <div className='px-2'>
-        <div className='mt-4 grid gap-4'>
-          {timeSlots.map((slot, index) => (
-            <div key={index} className='flex flex-col items-end gap-2 lg:flex-row'>
-              <div>
-                <Label>{t('startTime')}</Label>
-                <EnhancedInput
-                  key={`${index}-start-time`}
-                  type='time'
-                  value={slot.start_time}
-                  onValueChange={(value) => updateTimeSlot(index, 'start_time', value as string)}
-                />
-              </div>
-
-              <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);
-                }}
+      <div className='flex flex-col-reverse gap-8 px-4 pt-6 md:flex-row md:items-start'>
+        <div className='w-full md:w-1/2'>
+          <ChartContainer config={chartConfig} className='mx-auto aspect-square max-w-[400px]'>
+            <PieChart>
+              <Pie
+                data={chartTimeSlots}
+                cx='50%'
+                cy='50%'
+                labelLine={false}
+                outerRadius='80%'
+                fill='#8884d8'
+                dataKey='value'
+                label={({ name, percent, value }) =>
+                  `${value?.toFixed(2)}x (${(percent * 100).toFixed(0)}%)`
+                }
              >
-                {t('delete')}
-              </Button>
-            </div>
-          ))}
+                {chartTimeSlots.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </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>
    </>
  );
--- a/apps/admin/locales/cs-CZ/system.json
+++ b/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ů",
--- a/apps/admin/locales/de-DE/system.json
+++ b/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",
--- a/apps/admin/locales/en-US/system.json
+++ b/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",
--- a/apps/admin/locales/es-ES/system.json
+++ b/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",
--- a/apps/admin/locales/es-MX/system.json
+++ b/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",
--- a/apps/admin/locales/fa-IR/system.json
+++ b/apps/admin/locales/fa-IR/system.json
@ -61,7 +61,8 @@
    "reset": "بازنشانی",
    "save": "ذخیره",
    "saveSuccess": "ذخیره با موفقیت انجام شد",
-    "startTime": "زمان شروع"
+    "startTime": "زمان شروع",
+    "timeSlot": "بازه زمانی"
  },
  "register": {
    "emailSuffixWhitelist": "لیست سفید پسوند ایمیل",
--- a/apps/admin/locales/fi-FI/system.json
+++ b/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",
--- a/apps/admin/locales/fr-FR/system.json
+++ b/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",
--- a/apps/admin/locales/hi-IN/system.json
+++ b/apps/admin/locales/hi-IN/system.json
@ -61,7 +61,8 @@
    "reset": "रीसेट",
    "save": "सहेजें",
    "saveSuccess": "सफलतापूर्वक सहेजा गया",
-    "startTime": "प्रारंभ समय"
+    "startTime": "प्रारंभ समय",
+    "timeSlot": "समय स्लॉट"
  },
  "register": {
    "emailSuffixWhitelist": "ईमेल प्रत्यय श्वेतसूची",
--- a/apps/admin/locales/hu-HU/system.json
+++ b/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",
--- a/apps/admin/locales/ja-JP/system.json
+++ b/apps/admin/locales/ja-JP/system.json
@ -61,7 +61,8 @@
    "reset": "リセット",
    "save": "保存",
    "saveSuccess": "保存成功",
-    "startTime": "開始時間"
+    "startTime": "開始時間",
+    "timeSlot": "時間枠"
  },
  "register": {
    "emailSuffixWhitelist": "メールサフィックスホワイトリスト",
--- a/apps/admin/locales/ko-KR/system.json
+++ b/apps/admin/locales/ko-KR/system.json
@ -61,7 +61,8 @@
    "reset": "재설정",
    "save": "저장",
    "saveSuccess": "저장 성공",
-    "startTime": "시작 시간"
+    "startTime": "시작 시간",
+    "timeSlot": "시간대"
  },
  "register": {
    "emailSuffixWhitelist": "이메일 접미사 화이트리스트",
--- a/apps/admin/locales/no-NO/system.json
+++ b/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",
--- a/apps/admin/locales/pl-PL/system.json
+++ b/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",
--- a/apps/admin/locales/pt-BR/system.json
+++ b/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",
--- a/apps/admin/locales/ro-RO/system.json
+++ b/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",
--- a/apps/admin/locales/ru-RU/system.json
+++ b/apps/admin/locales/ru-RU/system.json
@ -61,7 +61,8 @@
    "reset": "Сбросить",
    "save": "Сохранить",
    "saveSuccess": "Успешно сохранено",
-    "startTime": "Время начала"
+    "startTime": "Время начала",
+    "timeSlot": "Временной интервал"
  },
  "register": {
    "emailSuffixWhitelist": "Белый список суффиксов электронной почты",
--- a/apps/admin/locales/th-TH/system.json
+++ b/apps/admin/locales/th-TH/system.json
@ -61,7 +61,8 @@
    "reset": "รีเซ็ต",
    "save": "บันทึก",
    "saveSuccess": "บันทึกสำเร็จ",
-    "startTime": "เวลาเริ่มต้น"
+    "startTime": "เวลาเริ่มต้น",
+    "timeSlot": "ช่วงเวลา"
  },
  "register": {
    "emailSuffixWhitelist": "รายการอนุญาตโดเมนอีเมล",
--- a/apps/admin/locales/tr-TR/system.json
+++ b/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",
--- a/apps/admin/locales/uk-UA/system.json
+++ b/apps/admin/locales/uk-UA/system.json
@ -61,7 +61,8 @@
    "reset": "Скинути",
    "save": "Зберегти",
    "saveSuccess": "Збережено успішно",
-    "startTime": "Час Початку"
+    "startTime": "Час Початку",
+    "timeSlot": "Часовий проміжок"
  },
  "register": {
    "emailSuffixWhitelist": "Білий список суфіксів електронної пошти",
--- a/apps/admin/locales/vi-VN/system.json
+++ b/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",
--- a/apps/admin/locales/zh-CN/system.json
+++ b/apps/admin/locales/zh-CN/system.json
@ -61,7 +61,8 @@
    "reset": "重置",
    "save": "保存",
    "saveSuccess": "保存成功",
-    "startTime": "开始时间"
+    "startTime": "开始时间",
+    "timeSlot": "时间段"
  },
  "register": {
    "emailSuffixWhitelist": "电子邮件后缀白名单",
--- a/apps/admin/locales/zh-HK/system.json
+++ b/apps/admin/locales/zh-HK/system.json
@ -61,7 +61,8 @@
    "reset": "重設",
    "save": "儲存",
    "saveSuccess": "保存成功",
-    "startTime": "開始時間"
+    "startTime": "開始時間",
+    "timeSlot": "時間段"
  },
  "register": {
    "emailSuffixWhitelist": "電子郵件後綴白名單",
--- a/packages/ui/src/custom-components/dynamic-Inputs.tsx
+++ b/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) => (
--- a/packages/ui/src/custom-components/enhanced-input.tsx
+++ b/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>
  );
 }