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

117
components/dashboard/recent-transactions.tsx
View File

@@ -60,9 +60,9 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
return (
<Card>
<CardHeader>
<CardTitle>Transactions récentes</CardTitle>
<CardTitle className="text-sm md:text-base">Transactions récentes</CardTitle>
</CardHeader>
<CardContent>
<CardContent className="px-3 md:px-6">
<div className="space-y-3">
{recentTransactions.map((transaction) => {
const category = getCategory(transaction.categoryId);
@@ -71,59 +71,74 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
return (
<div
key={transaction.id}
className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
className="rounded-lg bg-muted/50 hover:bg-muted transition-colors overflow-hidden"
>
<div className="flex-shrink-0">
{transaction.isReconciled ? (
<CheckCircle2 className="w-5 h-5 text-emerald-600" />
) : (
<Circle className="w-5 h-5 text-muted-foreground" />
)}
</div>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">
{transaction.description}
</p>
<div className="flex items-center gap-2 mt-1">
<span className="text-xs text-muted-foreground">
{formatDate(transaction.date)}
</span>
{account && (
<span className="text-xs text-muted-foreground">
• {account.name}
</span>
)}
{category && (
<Badge
variant="secondary"
className="text-xs gap-1"
style={{
backgroundColor: `${category.color}20`,
color: category.color,
}}
>
<CategoryIcon
icon={category.icon}
color={category.color}
size={12}
/>
{category.name}
</Badge>
<div className="flex items-start gap-2 md:gap-3 p-2 md:p-3">
<div className="flex-shrink-0 pt-0.5">
{transaction.isReconciled ? (
<CheckCircle2 className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
) : (
<Circle className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
)}
</div>
</div>
<div
className={cn(
"font-semibold tabular-nums",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
{formatCurrency(transaction.amount)}
<div className="flex-1 min-w-0 overflow-hidden">
<div className="flex items-start justify-between gap-2">
<p className="font-medium text-xs md:text-base truncate flex-1">
{transaction.description}
</p>
<div
className={cn(
"font-semibold tabular-nums text-xs md:text-base shrink-0 md:hidden",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
{formatCurrency(transaction.amount)}
</div>
</div>
<div className="flex items-center gap-1.5 md:gap-2 mt-1 flex-wrap">
<span className="text-[10px] md:text-xs text-muted-foreground whitespace-nowrap">
{formatDate(transaction.date)}
</span>
{account && (
<span className="text-[10px] md:text-xs text-muted-foreground truncate">
• {account.name}
</span>
)}
{category && (
<Badge
variant="secondary"
className="text-[10px] md:text-xs gap-1 shrink-0"
style={{
backgroundColor: `${category.color}20`,
color: category.color,
}}
>
<CategoryIcon
icon={category.icon}
color={category.color}
size={10}
/>
<span className="truncate">{category.name}</span>
</Badge>
)}
</div>
</div>
<div
className={cn(
"font-semibold tabular-nums text-sm md:text-base shrink-0 hidden md:block",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
{formatCurrency(transaction.amount)}
</div>
</div>
</div>
);