🔖 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,27 @@
 <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)
+
+
+### 🐛 Bug Fixes
+
+* Add unique key to ProTable for improved rendering with user ID filters ([2bff15f](https://github.com/perfect-panel/ppanel-web/commit/2bff15f))
+* Adjust layout spacing and chart aspect ratio in ServerConfig component ([05a61d8](https://github.com/perfect-panel/ppanel-web/commit/05a61d8))
+* Refactor server ID cell rendering for improved readability and consistency ([0345b7c](https://github.com/perfect-panel/ppanel-web/commit/0345b7c))
+* Update announcement page to format creation date and enhance content display ([8445e30](https://github.com/perfect-panel/ppanel-web/commit/8445e30))
+* Update OnlineUsersCell to display user count with icon instead of badge ([7a4ebdf](https://github.com/perfect-panel/ppanel-web/commit/7a4ebdf))
+* Update subscribe name fallback to return '--' instead of 'Unknown' ([0a07d25](https://github.com/perfect-panel/ppanel-web/commit/0a07d25))
+
 ## [1.4.6](https://github.com/perfect-panel/ppanel-web/compare/v1.4.5...v1.4.6) (2025-09-17)
 
 

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

@@ -88,24 +88,20 @@ export default function NodesPage() {
         {
           id: 'address_port',
           header: `${t('address')}:${t('port')}`,
-          cell: ({ row }) => (row.original.address || '—') + ':' + (row.original.port ?? '—'),
+          cell: ({ row }) => `${row.original.address || '—'}:${row.original.port || '—'}`,
         },
 
         {
           id: 'server_id',
           header: t('server'),
-          cell: ({ row }) => (
-            <div className='space-y-1'>
-              <Badge variant='outline'>
-                {getServerName(row.original.server_id)} : {getServerAddress(row.original.server_id)}
-              </Badge>
-              <br />
-              <Badge variant='outline'>
-                {row.original.protocol || '—'} :{' '}
-                {getProtocolPort(row.original.server_id, row.original.protocol)}
-              </Badge>
-            </div>
-          ),
+          cell: ({ row }) =>
+            `${getServerName(row.original.server_id)}:${getServerAddress(row.original.server_id)}`,
+        },
+        {
+          id: 'protocol',
+          header: ` ${t('protocol')}:${t('port')}`,
+          cell: ({ row }) =>
+            `${row.original.protocol}:${getProtocolPort(row.original.server_id, row.original.protocol)}`,
         },
         {
           accessorKey: 'tags',

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

@@ -58,6 +58,9 @@ export default function Page() {
           accessorKey: 'subscribe_id',
           header: t('subscribe'),
           cell: ({ row }) => {
+            if (row.original.type === 4) {
+              return t(`type.${row.getValue('type')}`);
+            }
             const name = getSubscribeName(row.getValue('subscribe_id'));
             const quantity = row.original.quantity;
             return name ? `${name} × ${quantity}` : '';

apps/admin/app/dashboard/servers/online-users-cell.tsx

@@ -15,6 +15,7 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { formatBytes } from '@workspace/ui/utils';
+import { Users } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
@@ -92,8 +93,7 @@ export default function OnlineUsersCell({ status }: { status?: API.ServerStatus
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <button className='hover:text-foreground text-muted-foreground flex items-center gap-2 bg-transparent p-0 text-sm'>
-          <Badge variant='secondary'>{status?.online.length}</Badge>
-          <span>{t('onlineUsers')}</span>
+          <Users className='h-4 w-4' /> {status?.online.length}
         </button>
       </SheetTrigger>
       <SheetContent className='h-screen w-screen max-w-none sm:h-auto sm:w-[900px] sm:max-w-[90vw]'>

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-8 md:flex-row md:items-start'>
-                  <div className='w-full md:w-1/2'>
+                <div className='flex flex-col gap-2'>
+                  <div className='w-full'>
                     <ArrayInput<API.TimePeriod>
                       fields={[
                         { name: 'start_time', prefix: t('config.startTime'), type: 'time' },
@@ -311,74 +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-[4/3] max-w-[400px]'
-                    >
-                      <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/admin/app/dashboard/user/page.tsx

@@ -60,6 +60,7 @@ export default function Page() {
 
   return (
     <ProTable<API.User, API.GetUserListParams>
+      key={initialFilters.user_id}
       action={ref}
       initialFilters={initialFilters}
       header={{

apps/admin/store/subscribe.ts

@@ -44,7 +44,7 @@ export const useSubscribeStore = create<SubscribeState>((set, get) => ({
 
   // Getters
   getSubscribeName: (subscribeId?: number) => {
-    if (!subscribeId) return 'Unknown';
+    if (!subscribeId) return '--';
     const subscribe = get().subscribes.find((s) => s.id === subscribeId);
     return subscribe?.name ?? `Subscribe ${subscribeId}`;
   },

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

@@ -29,6 +29,6 @@ export default function Page() {
       }
     />
   ) : (
-    <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

@@ -1,5 +1,6 @@
 'use client';
 
+import { Empty } from '@/components/empty';
 import { NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT } from '@/config/constants';
 import { queryDocumentList } from '@/services/user/document';
 import { getTutorialList } from '@/utils/tutorial';
@@ -35,6 +36,13 @@ export default function Page() {
     enabled: NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT !== 'true',
   });
 
+  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.6",
+  "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'