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

refactor: update grid layout for transactions and overview cards; adjust chart dimensions and axis properties for improved responsiveness
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m56s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-21 07:42:09 +01:00
parent 55f0e5c625
commit dbcf8e7abd
3 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,10 +57,10 @@ export function OverviewCards({ data }: OverviewCardsProps) {
};
return (
<div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-5">
<div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-5">
<Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
Solde Total
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
@@ -86,7 +86,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
Revenus du mois
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
@@ -108,7 +108,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
Dépenses du mois
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
@@ -130,7 +130,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
Pointage
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
@@ -149,7 +149,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
<Card className="stat-card-gradient-5 card-hover group relative overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
Catégorisation
</CardTitle>
<div className="rounded-2xl bg-gradient-to-br from-chart-5/30 via-chart-5/20 to-chart-5/10 p-3 shrink-0 shadow-lg shadow-chart-5/20">

17
components/statistics/monthly-chart.tsx
View File

@@ -47,14 +47,21 @@ export function MonthlyChart({
const chartContent = (
<>
{data.length > 0 ? (
<div className="h-[300px]">
<div className="h-[400px] sm:h-[300px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={data}>
<LineChart data={data} margin={{ left: 0, right: 10, top: 10, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<XAxis dataKey="month" className="text-xs" />
<XAxis
dataKey="month"
className="text-xs"
angle={-45}
textAnchor="end"
height={60}
interval={0}
/>
<YAxis
className="text-xs"
width={80}
width={60}
tickFormatter={(v) => {
// Format compact pour les grandes valeurs
if (Math.abs(v) >= 1000) {
@@ -96,7 +103,7 @@ export function MonthlyChart({
</ResponsiveContainer>
</div>
) : (
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
<div className="h-[400px] sm:h-[300px] flex items-center justify-center text-muted-foreground">
Pas de données pour cette période
</div>
)}