64 lines
2.7 KiB
TypeScript
64 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
DollarSign,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
ArrowUpRight,
|
|
ArrowDownRight,
|
|
} from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import type { DashboardData } from "./use-dashboard-data"
|
|
|
|
type Props = { data: DashboardData }
|
|
|
|
export function FinancialTotalsCards({ data }: Props) {
|
|
const totals = data.totals
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card className="relative overflow-hidden">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Total Income
|
|
</CardTitle>
|
|
<div className="rounded-md bg-emerald-500/10 p-2">
|
|
<TrendingUp className="h-4 w-4 text-emerald-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-emerald-600">
|
|
{totals?.total_income_text ?? `${totals?.currency ?? ""} 0.00`}
|
|
</div>
|
|
<div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
|
|
<ArrowUpRight className="h-3 w-3 text-emerald-500" />
|
|
Income this period
|
|
</div>
|
|
</CardContent>
|
|
<div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-emerald-500/5" />
|
|
</Card>
|
|
|
|
<Card className="relative overflow-hidden">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Total Expenses
|
|
</CardTitle>
|
|
<div className="rounded-md bg-red-500/10 p-2">
|
|
<TrendingDown className="h-4 w-4 text-red-600" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-red-600">
|
|
{totals?.total_expense_text ?? `${totals?.currency ?? ""} 0.00`}
|
|
</div>
|
|
<div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
|
|
<ArrowDownRight className="h-3 w-3 text-red-500" />
|
|
Expenses this period
|
|
</div>
|
|
</CardContent>
|
|
<div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-red-500/5" />
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|