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. #28

Merged
Hammond merged 1 commits from feat/booking-panel into master 2025-11-26 12:16:17 +00:00
Conversation 0 Commits 1 Files Changed 1 +16 -26
1 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
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,14 +273,16 @@ 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>
<div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTrendClasses(card.trendUp)}`}> {card.showTrend !== false && card.trend && (
{card.trendUp ? ( <div className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getTrendClasses(card.trendUp)}`}>
<ArrowUpRight className="w-3 h-3" /> {card.trendUp ? (
) : ( <ArrowUpRight className="w-3 h-3" />
<ArrowDownRight className="w-3 h-3" /> ) : (
)} <ArrowDownRight className="w-3 h-3" />
<span className="hidden sm:inline">{card.trend}</span> )}
</div> <span className="hidden sm:inline">{card.trend}</span>
</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>
<p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}> {card.showTrend !== false && (
vs last month <p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}>
</p> vs last month
</p>
)}
</div> </div>
</div> </div>
); );