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

44
components/categories/parent-category-row.tsx
View File

@@ -21,6 +21,7 @@ import {
ChevronDown,
ChevronRight,
} from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import { CategoryCard } from "./category-card";
import type { Category } from "@/lib/types";
@@ -49,51 +50,60 @@ export function ParentCategoryRow({
onDelete,
onNewCategory,
}: ParentCategoryRowProps) {
const isMobile = useIsMobile();
return (
<div className="border rounded-lg bg-card">
<Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
<div className="flex items-center justify-between px-3 py-2">
<div className="flex items-center justify-between px-2 md:px-3 py-1.5 md:py-2">
<CollapsibleTrigger asChild>
<button className="flex items-center gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
<button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
{isExpanded ? (
<ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
<ChevronDown className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
) : (
<ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
<ChevronRight className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
)}
<div
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0"
className="w-5 h-5 md:w-7 md:h-7 rounded-full flex items-center justify-center shrink-0"
style={{ backgroundColor: `${parent.color}20` }}
>
<CategoryIcon
icon={parent.icon}
color={parent.color}
size={14}
size={isMobile ? 10 : 14}
/>
</div>
<span className="font-medium text-sm truncate">{parent.name}</span>
<span className="text-sm text-muted-foreground shrink-0">
{children.length} • {stats.count} opération
{stats.count > 1 ? "s" : ""} • {formatCurrency(stats.total)}
</span>
<span className="font-medium text-xs md:text-sm truncate">{parent.name}</span>
{!isMobile && (
<span className="text-xs md:text-sm text-muted-foreground shrink-0">
{children.length} • {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">
{children.length} • {stats.count} 💳
</span>
)}
</button>
</CollapsibleTrigger>
<div className="flex items-center gap-1 shrink-0 ml-2">
<div className="flex items-center gap-0.5 md:gap-1 shrink-0 ml-1 md:ml-2">
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
className="h-6 w-6 md:h-7 md:w-7"
onClick={(e) => {
e.stopPropagation();
onNewCategory(parent.id);
}}
>
<Plus className="w-4 h-4" />
<Plus className="w-3 h-3 md:w-4 md:h-4" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7">
<MoreVertical className="w-4 h-4" />
<Button variant="ghost" size="icon" className="h-6 w-6 md:h-7 md:w-7">
<MoreVertical className="w-3 h-3 md:w-4 md:h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -115,7 +125,7 @@ export function ParentCategoryRow({
<CollapsibleContent>
{children.length > 0 ? (
<div className="px-3 pb-2 space-y-1 ml-6 border-l-2 border-muted ml-5">
<div className="px-2 md:px-3 pb-2 space-y-1 ml-4 md:ml-6 border-l-2 border-muted md:ml-5">
{children.map((child) => (
<CategoryCard
key={child.id}