julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI with new background gradients and responsive design adjustments across various components

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:23:53 +01:00
parent b704cc5a84
commit d4db94d156
10 changed files with 399 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/dashboard/overview-cards.tsx
View File

@@ -13,7 +13,7 @@ interface OverviewCardsProps {
export function OverviewCards({ data }: OverviewCardsProps) {
const totalBalance = data.accounts.reduce(
(sum, acc) => sum + getAccountBalance(acc),
0,
0
);
const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
const thisMonthStr = thisMonth.toISOString().slice(0, 7);
const monthTransactions = data.transactions.filter((t) =>
t.date.startsWith(thisMonthStr),
t.date.startsWith(thisMonthStr)
);
const income = monthTransactions
@@ -45,41 +45,52 @@ export function OverviewCards({ data }: OverviewCardsProps) {
};
return (
<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-xs md:text-sm font-medium text-muted-foreground">
<div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
<Card
className={cn(
"border shadow-sm bg-gradient-to-br",
totalBalance >= 0
? "from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card"
: "from-red-50/50 to-card dark:from-red-950/20 dark:to-card"
)}
>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Solde Total
</CardTitle>
<Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
<div className="rounded-full bg-muted/50 p-2 shrink-0">
<Wallet className="h-4 w-4 text-muted-foreground" />
</div>
</CardHeader>
<CardContent>
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div
className={cn(
"text-xl md:text-2xl font-bold",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
"text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
)}
>
{formatCurrency(totalBalance)}
</div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-2">
{data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
<Card className="border shadow-sm bg-gradient-to-br from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Revenus du mois
</CardTitle>
<TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" />
<div className="rounded-full bg-emerald-500/10 p-2 shrink-0">
<TrendingUp className="h-4 w-4 text-emerald-600" />
</div>
</CardHeader>
<CardContent>
<div className="text-xl md:text-2xl font-bold text-emerald-600">
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-emerald-600">
{formatCurrency(income)}
</div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-2">
{monthTransactions.filter((t) => t.amount > 0).length} opération
{monthTransactions.filter((t) => t.amount > 0).length > 1
? "s"
@@ -88,18 +99,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
<Card className="border shadow-sm bg-gradient-to-br from-red-50/50 to-card dark:from-red-950/20 dark:to-card">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Dépenses du mois
</CardTitle>
<TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" />
<div className="rounded-full bg-red-500/10 p-2 shrink-0">
<TrendingDown className="h-4 w-4 text-red-600" />
</div>
</CardHeader>
<CardContent>
<div className="text-xl md:text-2xl font-bold text-red-600">
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-red-600">
{formatCurrency(expenses)}
</div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-2">
{monthTransactions.filter((t) => t.amount < 0).length} opération
{monthTransactions.filter((t) => t.amount < 0).length > 1
? "s"
@@ -108,18 +121,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
<Card className="border shadow-sm bg-gradient-to-br from-blue-50/50 to-card dark:from-blue-950/20 dark:to-card">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Pointage
</CardTitle>
<CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
<div className="rounded-full bg-muted/50 p-2 shrink-0">
<CreditCard className="h-4 w-4 text-muted-foreground" />
</div>
</CardHeader>
<CardContent>
<div className="text-xl md:text-2xl font-bold">
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight">
{reconciledPercent}%
</div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
<p className="text-xs text-muted-foreground mt-2">
{reconciled} / {total} opérations pointées
</p>
</CardContent>