ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor Dashboard component by removing total and monthly revenue stats, and conditionally rendering trend indicators and comparison text based on card properties for improved UI flexibility.

Browse Source
This commit is contained in:
iamkiddy 2025-11-26 12:15:37 +00:00
parent b2877dd36c
commit ee790ca503
1 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/(admin)/admin/dashboard/page.tsx
View File

@ -206,20 +206,6 @@ export default function Dashboard() {
trend: stats?.trends.cancelled_bookings ?? "0%", trend: stats?.trends.cancelled_bookings ?? "0%",
trendUp: false, trendUp: false,
}, },
{
title: "Total Revenue",
value: `$${stats?.total_revenue.toLocaleString() ?? 0}`,
icon: DollarSign,
trend: stats?.trends.total_revenue ?? "0%",
trendUp: true,
},
{
title: "Monthly Revenue",
value: `$${stats?.monthly_revenue.toLocaleString() ?? 0}`,
icon: TrendingUp,
trend: stats?.trends.monthly_revenue ?? "0%",
trendUp: true,
},
]; ];
@ -275,7 +261,7 @@ export default function Dashboard() {
) : ( ) : (
<> <>
{/* Stats Grid */} {/* Stats Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
{statCards.map((card, index) => { {statCards.map((card, index) => {
const Icon = card.icon; const Icon = card.icon;
return ( return (
@ -287,6 +273,7 @@ export default function Dashboard() {
<div className={`p-2 sm:p-2.5 rounded-lg ${isDark ? "bg-gray-700" : "bg-gray-50"}`}> <div className={`p-2 sm:p-2.5 rounded-lg ${isDark ? "bg-gray-700" : "bg-gray-50"}`}>
<Icon className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? "text-gray-200" : "text-gray-600"}`} /> <Icon className={`w-4 h-4 sm:w-5 sm:h-5 ${isDark ? "text-gray-200" : "text-gray-600"}`} />
</div> </div>
{card.showTrend !== false && card.trend && (
<div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTrendClasses(card.trendUp)}`}> <div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTrendClasses(card.trendUp)}`}>
{card.trendUp ? ( {card.trendUp ? (
<ArrowUpRight className="w-3 h-3" /> <ArrowUpRight className="w-3 h-3" />
@ -295,6 +282,7 @@ export default function Dashboard() {
)} )}
<span className="hidden sm:inline">{card.trend}</span> <span className="hidden sm:inline">{card.trend}</span>
</div> </div>
)}
</div> </div>
<div> <div>
@ -304,9 +292,11 @@ export default function Dashboard() {
<p className={`text-xl sm:text-2xl font-bold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}> <p className={`text-xl sm:text-2xl font-bold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
{card.value} {card.value}
</p> </p>
{card.showTrend !== false && (
<p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}> <p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}>
vs last month vs last month
</p> </p>
)}
</div> </div>
</div> </div>
); );