marcogll/TaxHacker_s23
1
0
Fork 0
mirror of https://github.com/marcogll/TaxHacker_s23.git synced 2026-01-13 21:35:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add more colors to cards

Browse Source
This commit is contained in:
Vasily Zubarev
2025-07-23 11:07:51 +02:00
parent 8897134901
commit 9305deda86
7 changed files with 404 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
components/dashboard/stats-widget.tsx
View File

@@ -7,6 +7,7 @@ import { getProjects } from "@/models/projects"
import { getDashboardStats, getProjectStats } from "@/models/stats"
import { TransactionFilters } from "@/models/transactions"
import { ArrowDown, ArrowUp, BicepsFlexed } from "lucide-react"
import Link from "next/link"
export async function StatsWidget({ filters }: { filters: TransactionFilters }) {
const user = await getCurrentUser()
@@ -27,61 +28,72 @@ export async function StatsWidget({ filters }: { filters: TransactionFilters })
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Income</CardTitle>
<ArrowUp className="h-4 w-4 text-green-500" />
</CardHeader>
<CardContent>
{Object.entries(stats.totalIncomePerCurrency).map(([currency, total]) => (
<div key={currency} className="flex gap-2 items-center font-bold text-base first:text-2xl text-green-500">
{formatCurrency(total, currency)}
</div>
))}
{!Object.entries(stats.totalIncomePerCurrency).length && <div className="text-2xl font-bold">0.00</div>}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
<ArrowDown className="h-4 w-4 text-red-500" />
</CardHeader>
<CardContent>
{Object.entries(stats.totalExpensesPerCurrency).map(([currency, total]) => (
<div key={currency} className="flex gap-2 items-center font-bold text-base first:text-2xl text-red-500">
{formatCurrency(total, currency)}
</div>
))}
{!Object.entries(stats.totalExpensesPerCurrency).length && <div className="text-2xl font-bold">0.00</div>}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Net Profit</CardTitle>
<BicepsFlexed className="h-4 w-4" />
</CardHeader>
<CardContent>
{Object.entries(stats.profitPerCurrency).map(([currency, total]) => (
<div
key={currency}
className={`flex gap-2 items-center font-bold text-base first:text-2xl ${
total >= 0 ? "text-green-500" : "text-red-500"
}`}
>
{formatCurrency(total, currency)}
</div>
))}
{!Object.entries(stats.profitPerCurrency).length && <div className="text-2xl font-bold">0.00</div>}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Processed Transactions</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stats.invoicesProcessed}</div>
</CardContent>
</Card>
<Link href="/transactions?type=income">
<Card className="bg-gradient-to-br from-white via-green-50/30 to-emerald-50/40 border-green-200/50 hover:shadow-lg transition-all duration-300 hover:scale-[1.02] cursor-pointer">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Income</CardTitle>
<ArrowUp className="h-4 w-4 text-green-500" />
</CardHeader>
<CardContent>
{Object.entries(stats.totalIncomePerCurrency).map(([currency, total]) => (
<div
key={currency}
className="flex gap-2 items-center font-bold text-base first:text-2xl text-green-500"
>
{formatCurrency(total, currency)}
</div>
))}
{!Object.entries(stats.totalIncomePerCurrency).length && <div className="text-2xl font-bold">0.00</div>}
</CardContent>
</Card>
</Link>
<Link href="/transactions?type=expense">
<Card className="bg-gradient-to-br from-white via-red-50/30 to-rose-50/40 border-red-200/50 hover:shadow-lg transition-all duration-300 hover:scale-[1.02] cursor-pointer">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
<ArrowDown className="h-4 w-4 text-red-500" />
</CardHeader>
<CardContent>
{Object.entries(stats.totalExpensesPerCurrency).map(([currency, total]) => (
<div key={currency} className="flex gap-2 items-center font-bold text-base first:text-2xl text-red-500">
{formatCurrency(total, currency)}
</div>
))}
{!Object.entries(stats.totalExpensesPerCurrency).length && <div className="text-2xl font-bold">0.00</div>}
</CardContent>
</Card>
</Link>
<Link href="/transactions">
<Card className="bg-gradient-to-br from-white via-pink-50/30 to-indigo-50/40 border-pink-200/50 hover:shadow-lg transition-all duration-300 hover:scale-[1.02] cursor-pointer">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Net Profit</CardTitle>
<BicepsFlexed className="h-4 w-4" />
</CardHeader>
<CardContent>
{Object.entries(stats.profitPerCurrency).map(([currency, total]) => (
<div
key={currency}
className={`flex gap-2 items-center font-bold text-base first:text-2xl ${
total >= 0 ? "text-green-500" : "text-red-500"
}`}
>
{formatCurrency(total, currency)}
</div>
))}
{!Object.entries(stats.profitPerCurrency).length && <div className="text-2xl font-bold">0.00</div>}
</CardContent>
</Card>
</Link>
<Link href="/transactions">
<Card className="bg-gradient-to-br from-white via-blue-50/30 to-indigo-50/40 border-blue-200/50 hover:shadow-lg transition-all duration-300 hover:scale-[1.02] cursor-pointer">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Processed Transactions</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stats.invoicesProcessed}</div>
</CardContent>
</Card>
</Link>
</div>
<div>