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

Merge pull request '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) from feat/booking-panel into master

Browse Source 
Reviewed-on: http://35.207.46.142/ATTUNE-HEART-THERAPY/website/pulls/28
This commit is contained in:
Hammond 2025-11-26 12:16:17 +00:00
commit 4d85cd3c19
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>
); );