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

feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-01 08:34:28 +01:00
parent 86236aeb04
commit b3b25412ad
19 changed files with 731 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, TrendingDown, Wallet, CreditCard } from "lucide-react";
import type { BankingData } from "@/lib/types";
import { getAccountBalance } from "@/lib/account-utils";
import { cn } from "@/lib/utils";
interface OverviewCardsProps {
data: BankingData;
@@ -47,21 +48,21 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<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 text-muted-foreground">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
Solde Total
</CardTitle>
<Wallet className="h-4 w-4 text-muted-foreground" />
<Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div
className={cn(
"text-2xl font-bold",
"text-xl md:text-2xl font-bold",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
)}
>
{formatCurrency(totalBalance)}
</div>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
{data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
</p>
</CardContent>
@@ -69,16 +70,16 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
Revenus du mois
</CardTitle>
<TrendingUp className="h-4 w-4 text-emerald-600" />
<TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-emerald-600">
<div className="text-xl md:text-2xl font-bold text-emerald-600">
{formatCurrency(income)}
</div>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
{monthTransactions.filter((t) => t.amount > 0).length} opération
{monthTransactions.filter((t) => t.amount > 0).length > 1
? "s"
@@ -89,16 +90,16 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
Dépenses du mois
</CardTitle>
<TrendingDown className="h-4 w-4 text-red-600" />
<TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-red-600">
<div className="text-xl md:text-2xl font-bold text-red-600">
{formatCurrency(expenses)}
</div>
<p className="text-xs text-muted-foreground mt-1">
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
{monthTransactions.filter((t) => t.amount < 0).length} opération
{monthTransactions.filter((t) => t.amount < 0).length > 1
? "s"
@@ -109,14 +110,14 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
Pointage
</CardTitle>
<CreditCard className="h-4 w-4 text-muted-foreground" />
<CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{reconciledPercent}%</div>
<p className="text-xs text-muted-foreground mt-1">
<div className="text-xl md:text-2xl font-bold">{reconciledPercent}%</div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1">
{reconciled} / {total} opérations pointées
</p>
</CardContent>
@@ -124,5 +125,3 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</div>
);
}
import { cn } from "@/lib/utils";