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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/publish-release-assets.yml vendored
View File

@ -71,7 +71,7 @@ jobs:
with:
context: .
file: ./docker/ppanel-admin-web/Dockerfile
platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
platforms: linux/amd64,linux/arm64
push: true
tags: |
${{ secrets.DOCKER_USERNAME }}/ppanel-admin-web:latest
@ -82,7 +82,7 @@ jobs:
with:
context: .
file: ./docker/ppanel-user-web/Dockerfile
platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
platforms: linux/amd64,linux/arm64
push: true
tags: |
${{ secrets.DOCKER_USERNAME }}/ppanel-user-web:latest

26
apps/admin/components/dashboard/revenue-statistics-card.tsx
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'>

6
apps/admin/components/dashboard/statistics.tsx
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>

26
apps/admin/components/dashboard/user-statistics-card.tsx
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'>