🔖 chore(release): v1.4.8 [skip ci]

## [1.4.8](https://github.com/perfect-panel/ppanel-web/compare/v1.4.7...v1.4.8) (2025-09-23)

### 🐛 Bug Fixes

* Rename 'server_id' to 'protocol' in NodesPage and clean up unused imports and code in ServerConfig ([70b3484](https://github.com/perfect-panel/ppanel-web/commit/70b3484))
* Update announcement page to display timeline of announcements with Markdown content ([3c036eb](https://github.com/perfect-panel/ppanel-web/commit/3c036eb))
* Update Empty component to support border prop and adjust usage in various pages ([ce9ab89](https://github.com/perfect-panel/ppanel-web/commit/ce9ab89))

CHANGELOG.md

@@ -1,6 +1,15 @@
 <a name="readme-top"></a>
 # Changelog
 
+## [1.4.8](https://github.com/perfect-panel/ppanel-web/compare/v1.4.7...v1.4.8) (2025-09-23)
+
+
+### 🐛 Bug Fixes
+
+* Rename 'server_id' to 'protocol' in NodesPage and clean up unused imports and code in ServerConfig ([70b3484](https://github.com/perfect-panel/ppanel-web/commit/70b3484))
+* Update announcement page to display timeline of announcements with Markdown content ([3c036eb](https://github.com/perfect-panel/ppanel-web/commit/3c036eb))
+* Update Empty component to support border prop and adjust usage in various pages ([ce9ab89](https://github.com/perfect-panel/ppanel-web/commit/ce9ab89))
+
 ## [1.4.7](https://github.com/perfect-panel/ppanel-web/compare/v1.4.6...v1.4.7) (2025-09-23)
 
 

apps/admin/app/dashboard/nodes/page.tsx

@@ -98,7 +98,7 @@ export default function NodesPage() {
             `${getServerName(row.original.server_id)}:${getServerAddress(row.original.server_id)}`,
         },
         {
-          id: 'server_id',
+          id: 'protocol',
           header: ` ${t('protocol')}:${t('port')}`,
           cell: ({ row }) =>
             `${row.original.protocol}:${getProtocolPort(row.original.server_id, row.original.protocol)}`,

apps/admin/app/dashboard/servers/server-config.tsx

@@ -9,7 +9,7 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
-import { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
+
 import {
   Form,
   FormControl,
@@ -35,65 +35,11 @@ import { Icon } from '@workspace/ui/custom-components/icon';
 import { DicesIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { uid } from 'radash';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { Cell, Legend, Pie, PieChart } from 'recharts';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-const COLORS = [
-  'hsl(var(--chart-1))',
-  'hsl(var(--chart-2))',
-  'hsl(var(--chart-3))',
-  'hsl(var(--chart-4))',
-  'hsl(var(--chart-5))',
-];
-
-const MINUTES_IN_DAY = 1440;
-
-function getTimeRangeData(slots: API.TimePeriod[]) {
-  const timePoints = slots
-    .filter((slot) => slot.start_time && slot.end_time)
-    .flatMap((slot) => {
-      const [startH = 0, startM = 0] = slot.start_time.split(':').map(Number);
-      const [endH = 0, endM = 0] = slot.end_time.split(':').map(Number);
-      const start = startH * 60 + startM;
-      let end = endH * 60 + endM;
-      if (end < start) end += MINUTES_IN_DAY;
-      return { start, end, multiplier: slot.multiplier };
-    })
-    .sort((a, b) => a.start - b.start);
-
-  const result: { name: string; value: number; multiplier: number }[] = [];
-  let currentMinute = 0;
-
-  timePoints.forEach((point) => {
-    if (point.start > currentMinute) {
-      result.push({
-        name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - ${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')}`,
-        value: point.start - currentMinute,
-        multiplier: 1,
-      });
-    }
-    result.push({
-      name: `${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')} - ${Math.floor((point.end / 60) % 24)}:${String(point.end % 60).padStart(2, '0')}`,
-      value: point.end - point.start,
-      multiplier: point.multiplier,
-    });
-    currentMinute = point.end % MINUTES_IN_DAY;
-  });
-
-  if (currentMinute < MINUTES_IN_DAY) {
-    result.push({
-      name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - 24:00`,
-      value: MINUTES_IN_DAY - currentMinute,
-      multiplier: 1,
-    });
-  }
-
-  return result;
-}
-
 const nodeConfigSchema = z.object({
   node_secret: z.string().optional(),
   node_pull_interval: z.number().optional(),
@@ -150,20 +96,6 @@ export default function ServerConfig() {
     }
   }, [periodsResp]);
 
-  const chartTimeSlots = useMemo(() => getTimeRangeData(timeSlots), [timeSlots]);
-  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 }>,
-    );
-  }, [chartTimeSlots]);
-
   async function onSubmit(values: NodeConfigFormData) {
     setSaving(true);
     try {
@@ -293,8 +225,8 @@ export default function ServerConfig() {
                   {t('config.dynamicMultiplierDescription')}
                 </p>
 
-                <div className='flex flex-col-reverse gap-2 md:flex-row md:items-start'>
+                <div className='flex flex-col gap-2'>
-                  <div className='w-full md:w-1/2'>
+                  <div className='w-full'>
                     <ArrayInput<API.TimePeriod>
                       fields={[
                         { name: 'start_time', prefix: t('config.startTime'), type: 'time' },
@@ -311,71 +243,18 @@ export default function ServerConfig() {
                     />
                     <div className='mt-3 flex gap-2'>
                       <Button
+                        type='button'
                         size='sm'
                         variant='outline'
                         onClick={() => setTimeSlots(periodsResp || [])}
                       >
                         {t('config.reset')}
                       </Button>
-                      <Button size='sm' onClick={savePeriods}>
+                      <Button size='sm' type='button' onClick={savePeriods}>
                         {t('config.save')}
                       </Button>
                     </div>
                   </div>
-
-                  <div className='w-full md:w-1/2'>
-                    <ChartContainer config={chartConfig} className='mx-auto aspect-[5/3] w-full'>
-                      <PieChart>
-                        <Pie
-                          data={chartTimeSlots}
-                          cx='50%'
-                          cy='50%'
-                          labelLine={false}
-                          outerRadius='80%'
-                          fill='#8884d8'
-                          dataKey='value'
-                          label={({ percent, multiplier }) =>
-                            `${(multiplier || 0)?.toFixed(2)}x (${(percent * 100).toFixed(0)}%)`
-                          }
-                        >
-                          {chartTimeSlots.map((entry, index) => (
-                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                          ))}
-                        </Pie>
-                        <ChartTooltip
-                          content={({ payload }) => {
-                            if (payload && payload.length) {
-                              const d = payload[0]?.payload as any;
-                              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('config.timeSlot')}
-                                      </span>
-                                      <span className='text-muted-foreground font-bold'>
-                                        {d.name || '—'}
-                                      </span>
-                                    </div>
-                                    <div className='flex flex-col'>
-                                      <span className='text-muted-foreground text-[0.70rem] uppercase'>
-                                        {t('config.multiplier')}
-                                      </span>
-                                      <span className='font-bold'>
-                                        {Number(d.multiplier).toFixed(2)}x
-                                      </span>
-                                    </div>
-                                  </div>
-                                </div>
-                              );
-                            }
-                            return null;
-                          }}
-                        />
-                        <Legend />
-                      </PieChart>
-                    </ChartContainer>
-                  </div>
                 </div>
               </div>
             </form>

apps/user/app/(main)/(user)/announcement/page.tsx

@@ -5,7 +5,6 @@ import { queryAnnouncement } from '@/services/user/announcement';
 import { useQuery } from '@tanstack/react-query';
 import { Timeline } from '@workspace/ui/components/timeline';
 import { Markdown } from '@workspace/ui/custom-components/markdown';
-import { formatDate } from '@workspace/ui/utils';
 
 export default function Page() {
   const { data } = useQuery({
@@ -24,12 +23,12 @@ export default function Page() {
     <Timeline
       data={
         data.map((item) => ({
-          title: String(formatDate(item.created_at, false)),
+          title: item.title,
-          content: <Markdown>{`### ${item.title}\n${item.content}`}</Markdown>,
+          content: <Markdown>{item.content}</Markdown>,
         })) || []
       }
     />
   ) : (
-    <Empty />
+    <Empty border />
   );
 }

apps/user/app/(main)/(user)/document/document-button.tsx

@@ -100,7 +100,7 @@ export function DocumentButton({ items }: { items: API.Document[] }) {
             layoutId={`card-${item.id}-${id}`}
             key={`card-${item.id}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.id}-${id}`}>

apps/user/app/(main)/(user)/document/page.tsx

@@ -35,7 +35,14 @@ export default function Page() {
     },
     enabled: NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT !== 'true',
   });
-  if (!DocumentList && !TutorialList) return <Empty />;
+
+  if (
+    (!DocumentList || DocumentList.length === 0) &&
+    (!TutorialList || TutorialList.length === 0)
+  ) {
+    return <Empty border />;
+  }
+
   return (
     <div className='space-y-4'>
       {DocumentList?.length > 0 && (

apps/user/app/(main)/(user)/document/tutorial-button.tsx

@@ -121,7 +121,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
             layoutId={`card-${item.title}-${id}`}
             key={`card-${item.title}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.title}-${id}`}>

apps/user/components/empty.tsx

@@ -4,7 +4,10 @@ import { default as _Empty } from '@workspace/ui/custom-components/empty';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
-export function Empty() {
+interface EmptyProps {
+  border?: boolean;
+}
+export function Empty({ border }: EmptyProps) {
   const t = useTranslations('common');
 
   const [description, setDescription] = useState('');
@@ -14,5 +17,5 @@ export function Empty() {
     setDescription(t(`empty.${random}`));
   }, [t]);
 
-  return <_Empty description={description} />;
+  return <_Empty description={description} border={border} />;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppanel-web",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "private": true,
   "homepage": "https://github.com/perfect-panel/ppanel-web",
   "bugs": {

packages/ui/src/custom-components/empty.tsx

@@ -1,6 +1,14 @@
-export default function Empty({ description }: { description?: React.ReactNode }) {
+export default function Empty({
+  description,
+  border,
+}: {
+  description?: React.ReactNode;
+  border?: boolean;
+}) {
   return (
-    <div className='flex flex-col items-center justify-center p-6 py-16'>
+    <div
+      className={`flex flex-col items-center justify-center p-6 py-16 ${border ? 'rounded-xl border' : ''}`}
+    >
       <svg
         width='64'
         height='41'