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

32
components/categories/category-card.tsx
View File

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Pencil, Trash2 } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import type { Category } from "@/lib/types";
interface CategoryCardProps {
@@ -21,39 +22,48 @@ export function CategoryCard({
onEdit,
onDelete,
}: CategoryCardProps) {
const isMobile = useIsMobile();
return (
<div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
<div className="flex items-center gap-2 min-w-0 flex-1">
<div
className="w-5 h-5 rounded-full flex items-center justify-center shrink-0"
className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
style={{ backgroundColor: `${category.color}20` }}
>
<CategoryIcon
icon={category.icon}
color={category.color}
size={12}
size={isMobile ? 10 : 12}
/>
</div>
<span className="text-sm truncate">{category.name}</span>
<span className="text-sm text-muted-foreground shrink-0">
{stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
{formatCurrency(stats.total)}
</span>
<span className="text-xs md:text-sm truncate">{category.name}</span>
{!isMobile && (
<span className="text-xs md:text-sm text-muted-foreground shrink-0">
{stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
{formatCurrency(stats.total)}
</span>
)}
{isMobile && (
<span className="text-[10px] md:text-xs text-muted-foreground shrink-0">
{stats.count} 💳
</span>
)}
{category.keywords.length > 0 && (
<Badge
variant="outline"
className="text-[10px] px-1.5 py-0 h-4 shrink-0"
className="text-[10px] px-1 md:px-1.5 py-0 h-3 md:h-4 shrink-0"
>
{category.keywords.length}
</Badge>
)}
</div>
<div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
className="h-6 w-6 md:h-6 md:w-6"
onClick={() => onEdit(category)}
>
<Pencil className="w-3 h-3" />
@@ -61,7 +71,7 @@ export function CategoryCard({
<Button
variant="ghost"
size="icon"
className="h-6 w-6 text-destructive hover:text-destructive"
className="h-6 w-6 md:h-6 md:w-6 text-destructive hover:text-destructive"
onClick={() => onDelete(category.id)}
>
<Trash2 className="w-3 h-3" />