Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-06 03:30:25 -05:00
Code Issues 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: with:
context: . context: .
file: ./docker/ppanel-admin-web/Dockerfile file: ./docker/ppanel-admin-web/Dockerfile
platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6 platforms: linux/amd64,linux/arm64
push: true push: true
tags: | tags: |
${{ secrets.DOCKER_USERNAME }}/ppanel-admin-web:latest ${{ secrets.DOCKER_USERNAME }}/ppanel-admin-web:latest
@ -82,7 +82,7 @@ jobs:
with: with:
context: . context: .
file: ./docker/ppanel-user-web/Dockerfile file: ./docker/ppanel-user-web/Dockerfile
platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6 platforms: linux/amd64,linux/arm64
push: true push: true
tags: | tags: |
${{ secrets.DOCKER_USERNAME }}/ppanel-user-web:latest ${{ secrets.DOCKER_USERNAME }}/ppanel-user-web:latest

20
apps/admin/components/dashboard/revenue-statistics-card.tsx
View File

@ -59,7 +59,7 @@ export function RevenueStatisticsCard() {
return ( return (
<Tabs defaultValue='today'> <Tabs defaultValue='today'>
<Card> <Card className='h-full'>
<CardHeader className='flex !flex-row items-center justify-between'> <CardHeader className='flex !flex-row items-center justify-between'>
<CardTitle>{t('revenueTitle')}</CardTitle> <CardTitle>{t('revenueTitle')}</CardTitle>
<TabsList> <TabsList>
@ -68,8 +68,8 @@ export function RevenueStatisticsCard() {
<TabsTrigger value='total'>{t('total')}</TabsTrigger> <TabsTrigger value='total'>{t('total')}</TabsTrigger>
</TabsList> </TabsList>
</CardHeader> </CardHeader>
<TabsContent value='today'> <TabsContent value='today' className='h-full'>
<CardContent> <CardContent className='h-80'>
{RevenueStatistics?.today.new_order_amount || {RevenueStatistics?.today.new_order_amount ||
RevenueStatistics?.today.renewal_order_amount ? ( RevenueStatistics?.today.renewal_order_amount ? (
<ChartContainer config={IncomeStatisticsConfig} className='mx-auto max-h-80'> <ChartContainer config={IncomeStatisticsConfig} className='mx-auto max-h-80'>
@ -129,7 +129,9 @@ export function RevenueStatisticsCard() {
</PieChart> </PieChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'> <CardFooter className='flex h-20 flex-row border-t p-4'>
@ -162,8 +164,8 @@ export function RevenueStatisticsCard() {
</CardFooter> </CardFooter>
</TabsContent> </TabsContent>
<TabsContent value='month'> <TabsContent value='month' className='h-full'>
<CardContent> <CardContent className='h-80'>
{RevenueStatistics?.monthly.list && RevenueStatistics?.monthly.list.length > 0 ? ( {RevenueStatistics?.monthly.list && RevenueStatistics?.monthly.list.length > 0 ? (
<ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'> <ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'>
<BarChart <BarChart
@ -196,7 +198,9 @@ export function RevenueStatisticsCard() {
</BarChart> </BarChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'> <CardFooter className='flex h-20 flex-row border-t p-4'>
@ -232,8 +236,8 @@ export function RevenueStatisticsCard() {
</CardFooter> </CardFooter>
</TabsContent> </TabsContent>
<TabsContent value='total'> <TabsContent value='total' className='h-full'>
<CardContent> <CardContent className='h-80'>
{RevenueStatistics?.all.list && RevenueStatistics?.all.list.length > 0 ? ( {RevenueStatistics?.all.list && RevenueStatistics?.all.list.length > 0 ? (
<ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'> <ChartContainer config={IncomeStatisticsConfig} className='max-h-80 w-full'>
<AreaChart <AreaChart
@ -283,7 +287,9 @@ export function RevenueStatisticsCard() {
</AreaChart> </AreaChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'> <CardFooter className='flex h-20 flex-row border-t p-4'>

4
apps/admin/components/dashboard/statistics.tsx
View File

@ -149,7 +149,7 @@ export default function Statistics() {
</TabsList> </TabsList>
</Tabs> </Tabs>
</CardHeader> </CardHeader>
<CardContent> <CardContent className='h-80'>
<div className='mb-6 flex items-center justify-between'> <div className='mb-6 flex items-center justify-between'>
<h4 className='font-semibold'> <h4 className='font-semibold'>
{dataType === 'nodes' ? t('nodeTraffic') : t('userTraffic')} {dataType === 'nodes' ? t('nodeTraffic') : t('userTraffic')}
@ -230,7 +230,9 @@ export default function Statistics() {
</BarChart> </BarChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
</Card> </Card>

20
apps/admin/components/dashboard/user-statistics-card.tsx
View File

@ -61,7 +61,7 @@ export function UserStatisticsCard() {
return ( return (
<Tabs defaultValue='today'> <Tabs defaultValue='today'>
<Card> <Card className='h-full'>
<CardHeader className='flex !flex-row items-center justify-between'> <CardHeader className='flex !flex-row items-center justify-between'>
<CardTitle>{t('userTitle')}</CardTitle> <CardTitle>{t('userTitle')}</CardTitle>
<TabsList> <TabsList>
@ -71,8 +71,8 @@ export function UserStatisticsCard() {
</TabsList> </TabsList>
</CardHeader> </CardHeader>
<TabsContent value='today'> <TabsContent value='today' className='h-full'>
<CardContent> <CardContent className='h-80'>
{UserStatistics?.today.register || {UserStatistics?.today.register ||
UserStatistics?.today.new_order_users || UserStatistics?.today.new_order_users ||
UserStatistics?.today.renewal_order_users ? ( UserStatistics?.today.renewal_order_users ? (
@ -133,7 +133,9 @@ export function UserStatisticsCard() {
</PieChart> </PieChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'> <CardFooter className='flex h-20 flex-row border-t p-4'>
@ -168,8 +170,8 @@ export function UserStatisticsCard() {
</CardFooter> </CardFooter>
</TabsContent> </TabsContent>
<TabsContent value='month'> <TabsContent value='month' className='h-full'>
<CardContent> <CardContent className='h-80'>
{UserStatistics?.monthly.list && UserStatistics?.monthly.list.length > 0 ? ( {UserStatistics?.monthly.list && UserStatistics?.monthly.list.length > 0 ? (
<ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'> <ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'>
<BarChart <BarChart
@ -204,7 +206,9 @@ export function UserStatisticsCard() {
</BarChart> </BarChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'> <CardFooter className='flex h-20 flex-row border-t p-4'>
@ -239,8 +243,8 @@ export function UserStatisticsCard() {
</CardFooter> </CardFooter>
</TabsContent> </TabsContent>
<TabsContent value='total'> <TabsContent value='total' className='h-full'>
<CardContent> <CardContent className='h-80'>
{UserStatistics?.all.list && UserStatistics?.all.list.length > 0 ? ( {UserStatistics?.all.list && UserStatistics?.all.list.length > 0 ? (
<ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'> <ChartContainer config={UserStatisticsConfig} className='max-h-80 w-full'>
<AreaChart <AreaChart
@ -299,7 +303,9 @@ export function UserStatisticsCard() {
</AreaChart> </AreaChart>
</ChartContainer> </ChartContainer>
) : ( ) : (
<div className='flex h-full items-center justify-center'>
<Empty /> <Empty />
</div>
)} )}
</CardContent> </CardContent>
<CardFooter className='flex h-20 flex-row border-t p-4'> <CardFooter className='flex h-20 flex-row border-t p-4'>