S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 style(dashboard): Enhance card components with full height and improved empty state handling

Browse Source
This commit is contained in:
web@ppanel
2025-02-15 18:06:07 +07:00
parent 1fc3a10c67
commit 7e1d551d8f
7 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/components/dashboard/revenue-statistics-card.tsx
+16 -10
View File
@@ -59,7 +59,7 @@ export function RevenueStatisticsCard() {
return (
<Tabs defaultValue='today'>
<Card>
<Card className='h-full'>
<CardHeader className='flex !flex-row items-center justify-between'>
<CardTitle>{t('revenueTitle')}</CardTitle>
<TabsList>
@@ -68,8 +68,8 @@ export function RevenueStatisticsCard() {
<TabsTrigger value='total'>{t('total')}</TabsTrigger>
</TabsList>
</CardHeader>
<TabsContent value='today'>
<CardContent>
<TabsContent value='today' className='h-full'>
<CardContent className='h-80'>
{RevenueStatistics?.today.new_order_amount ||
RevenueStatistics?.today.renewal_order_amount ? (
<ChartContainer config={IncomeStatisticsConfig} className='mx-auto max-h-80'>
@@ -129,7 +129,9 @@ export function RevenueStatisticsCard() {
</PieChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -162,8 +164,8 @@ export function RevenueStatisticsCard() {
</CardFooter>
</TabsContent>
<TabsContent value='month'>
<CardContent>
<TabsContent value='month' className='h-full'>
<CardContent className='h-80'>
{RevenueStatistics?.monthly.list && RevenueStatistics?.monthly.list.length > 0 ? (
<ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'>
<BarChart
@@ -196,7 +198,9 @@ export function RevenueStatisticsCard() {
</BarChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -232,8 +236,8 @@ export function RevenueStatisticsCard() {
</CardFooter>
</TabsContent>
<TabsContent value='total'>
<CardContent>
<TabsContent value='total' className='h-full'>
<CardContent className='h-80'>
{RevenueStatistics?.all.list && RevenueStatistics?.all.list.length > 0 ? (
<ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'>
<AreaChart
@@ -283,7 +287,9 @@ export function RevenueStatisticsCard() {
</AreaChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'>
apps/admin/components/dashboard/statistics.tsx
+4 -2
View File
@@ -149,7 +149,7 @@ export default function Statistics() {
</TabsList>
</Tabs>
</CardHeader>
<CardContent>
<CardContent className='h-80'>
<div className='mb-6 flex items-center justify-between'>
<h4 className='font-semibold'>
{dataType === 'nodes' ? t('nodeTraffic') : t('userTraffic')}
@@ -230,7 +230,9 @@ export default function Statistics() {
</BarChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
</Card>
apps/admin/components/dashboard/user-statistics-card.tsx
+16 -10
View File
@@ -61,7 +61,7 @@ export function UserStatisticsCard() {
return (
<Tabs defaultValue='today'>
<Card>
<Card className='h-full'>
<CardHeader className='flex !flex-row items-center justify-between'>
<CardTitle>{t('userTitle')}</CardTitle>
<TabsList>
@@ -71,8 +71,8 @@ export function UserStatisticsCard() {
</TabsList>
</CardHeader>
<TabsContent value='today'>
<CardContent>
<TabsContent value='today' className='h-full'>
<CardContent className='h-80'>
{UserStatistics?.today.register ||
UserStatistics?.today.new_order_users ||
UserStatistics?.today.renewal_order_users ? (
@@ -133,7 +133,9 @@ export function UserStatisticsCard() {
</PieChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -168,8 +170,8 @@ export function UserStatisticsCard() {
</CardFooter>
</TabsContent>
<TabsContent value='month'>
<CardContent>
<TabsContent value='month' className='h-full'>
<CardContent className='h-80'>
{UserStatistics?.monthly.list && UserStatistics?.monthly.list.length > 0 ? (
<ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'>
<BarChart
@@ -204,7 +206,9 @@ export function UserStatisticsCard() {
</BarChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'>
@@ -239,8 +243,8 @@ export function UserStatisticsCard() {
</CardFooter>
</TabsContent>
<TabsContent value='total'>
<CardContent>
<TabsContent value='total' className='h-full'>
<CardContent className='h-80'>
{UserStatistics?.all.list && UserStatistics?.all.list.length > 0 ? (
<ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'>
<AreaChart
@@ -299,7 +303,9 @@ export function UserStatisticsCard() {
</AreaChart>
</ChartContainer>
) : (
<Empty />
<div className='flex h-full items-center justify-center'>
<Empty />
</div>
)}
</CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'>
apps/admin/services/admin/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
// @ts-ignore
// API 更新时间：
// API 唯一标识：
import * as announcement from './announcement';
apps/admin/services/common/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
// @ts-ignore
// API 更新时间：
// API 唯一标识：
import * as auth from './auth';
apps/user/services/common/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
// @ts-ignore
// API 更新时间：
// API 唯一标识：
import * as auth from './auth';