mirror of
https://github.com/marcogll/TaxHacker_s23.git
synced 2026-01-13 21:35:19 +00:00
feat: add more colors to cards
This commit is contained in:
Vasily Zubarev
@@ -16,75 +16,83 @@ export function ProjectsWidget({
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{projects.map((project) => (
|
||||
<Card key={project.code}>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
<Link href={`/transactions?projectCode=${project.code}`}>
|
||||
<Badge className="text-lg" style={{ backgroundColor: project.color }}>
|
||||
<Link key={project.code} href={`/transactions?projectCode=${project.code}`}>
|
||||
<Card className="bg-gradient-to-tr from-white via-slate-50/40 to-purple-50/30 border-slate-200/60 hover:shadow-xl transition-all duration-500 hover:scale-[1.01] group cursor-pointer">
|
||||
<CardHeader className="group-hover:translate-y-[-2px] transition-transform duration-300">
|
||||
<CardTitle>
|
||||
<Badge
|
||||
className="text-lg shadow-md hover:shadow-lg transition-all duration-300"
|
||||
style={{ backgroundColor: project.color }}
|
||||
>
|
||||
{project.name}
|
||||
</Badge>
|
||||
</Link>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-4 justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Income</div>
|
||||
<div className="text-2xl font-bold text-green-500">
|
||||
{Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).map(([currency, total]) => (
|
||||
<div
|
||||
key={currency}
|
||||
className="flex flex-col gap-2 font-bold text-green-500 text-base first:text-2xl"
|
||||
>
|
||||
{formatCurrency(total, currency)}
|
||||
</div>
|
||||
))}
|
||||
{!Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).length && (
|
||||
<div className="font-bold text-base first:text-2xl">0.00</div>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="group-hover:translate-y-[-1px] transition-transform duration-300">
|
||||
<div className="flex flex-wrap gap-4 justify-between items-center">
|
||||
<div className="bg-gradient-to-br from-green-50/80 to-emerald-50/60 p-3 rounded-xl border border-green-100/50">
|
||||
<div className="text-sm font-medium text-muted-foreground">Income</div>
|
||||
<div className="text-2xl font-bold text-green-500">
|
||||
{Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).map(([currency, total]) => (
|
||||
<div
|
||||
key={currency}
|
||||
className="flex flex-col gap-2 font-bold text-green-500 text-base first:text-2xl"
|
||||
>
|
||||
{formatCurrency(total, currency)}
|
||||
</div>
|
||||
))}
|
||||
{!Object.entries(statsPerProject[project.code]?.totalIncomePerCurrency).length && (
|
||||
<div className="font-bold text-base first:text-2xl">0.00</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-red-50/80 to-rose-50/60 p-3 rounded-xl border border-red-100/50">
|
||||
<div className="text-sm font-medium text-muted-foreground">Expenses</div>
|
||||
<div className="text-2xl font-bold text-red-500">
|
||||
{Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).map(
|
||||
([currency, total]) => (
|
||||
<div
|
||||
key={currency}
|
||||
className="flex flex-col gap-2 font-bold text-red-500 text-base first:text-2xl"
|
||||
>
|
||||
{formatCurrency(total, currency)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{!Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).length && (
|
||||
<div className="font-bold text-base first:text-2xl">0.00</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-violet-50/80 to-indigo-50/60 p-3 rounded-xl border border-violet-100/50">
|
||||
<div className="text-sm font-medium text-muted-foreground">Profit</div>
|
||||
<div className="text-2xl font-bold">
|
||||
{Object.entries(statsPerProject[project.code]?.profitPerCurrency).map(([currency, total]) => (
|
||||
<div
|
||||
key={currency}
|
||||
className={`flex flex-col gap-2 items-center text-2xl font-bold ${
|
||||
total >= 0 ? "text-green-500" : "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(total, currency)}
|
||||
</div>
|
||||
))}
|
||||
{!Object.entries(statsPerProject[project.code]?.profitPerCurrency).length && (
|
||||
<div className="text-2xl font-bold">0.00</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Expenses</div>
|
||||
<div className="text-2xl font-bold text-red-500">
|
||||
{Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).map(([currency, total]) => (
|
||||
<div key={currency} className="flex flex-col gap-2 font-bold text-red-500 text-base first:text-2xl">
|
||||
{formatCurrency(total, currency)}
|
||||
</div>
|
||||
))}
|
||||
{!Object.entries(statsPerProject[project.code]?.totalExpensesPerCurrency).length && (
|
||||
<div className="font-bold text-base first:text-2xl">0.00</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Profit</div>
|
||||
<div className="text-2xl font-bold">
|
||||
{Object.entries(statsPerProject[project.code]?.profitPerCurrency).map(([currency, total]) => (
|
||||
<div
|
||||
key={currency}
|
||||
className={`flex flex-col gap-2 items-center text-2xl font-bold ${
|
||||
total >= 0 ? "text-green-500" : "text-red-500"
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(total, currency)}
|
||||
</div>
|
||||
))}
|
||||
{!Object.entries(statsPerProject[project.code]?.profitPerCurrency).length && (
|
||||
<div className="text-2xl font-bold">0.00</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/settings/projects"
|
||||
className="flex items-center justify-center gap-2 border-dashed border-2 border-gray-300 rounded-md p-4 text-muted-foreground hover:text-primary hover:border-primary"
|
||||
className="flex items-center justify-center gap-2 border-dashed border-2 border-gradient-to-r rounded-lg p-6 text-muted-foreground transition-all duration-300 hover:scale-[1.02] hover:shadow-lg group"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create New Project
|
||||
<Plus className="h-5 w-5 group-hover:rotate-90 transition-transform duration-300" />
|
||||
<span className="font-medium">Create New Project</span>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user