feat: refactor dashboard and account pages to utilize new layout components, enhancing structure and loading states
This commit is contained in:
Julien Froidefond
73
components/categories/category-card.tsx
Normal file
73
components/categories/category-card.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
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 type { Category } from "@/lib/types";
|
||||
|
||||
interface CategoryCardProps {
|
||||
category: Category;
|
||||
stats: { total: number; count: number };
|
||||
formatCurrency: (amount: number) => string;
|
||||
onEdit: (category: Category) => void;
|
||||
onDelete: (categoryId: string) => void;
|
||||
}
|
||||
|
||||
export function CategoryCard({
|
||||
category,
|
||||
stats,
|
||||
formatCurrency,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: CategoryCardProps) {
|
||||
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"
|
||||
style={{ backgroundColor: `${category.color}20` }}
|
||||
>
|
||||
<CategoryIcon
|
||||
icon={category.icon}
|
||||
color={category.color}
|
||||
size={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>
|
||||
{category.keywords.length > 0 && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] px-1.5 py-0 h-4 shrink-0"
|
||||
>
|
||||
{category.keywords.length}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={() => onEdit(category)}
|
||||
>
|
||||
<Pencil className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-destructive hover:text-destructive"
|
||||
onClick={() => onDelete(category.id)}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
192
components/categories/category-edit-dialog.tsx
Normal file
192
components/categories/category-edit-dialog.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Category } from "@/lib/types";
|
||||
import { categoryColors } from "./constants";
|
||||
|
||||
interface CategoryFormData {
|
||||
name: string;
|
||||
color: string;
|
||||
keywords: string[];
|
||||
parentId: string | null;
|
||||
}
|
||||
|
||||
interface CategoryEditDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editingCategory: Category | null;
|
||||
formData: CategoryFormData;
|
||||
onFormDataChange: (data: CategoryFormData) => void;
|
||||
parentCategories: Category[];
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
export function CategoryEditDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingCategory,
|
||||
formData,
|
||||
onFormDataChange,
|
||||
parentCategories,
|
||||
onSave,
|
||||
}: CategoryEditDialogProps) {
|
||||
const [newKeyword, setNewKeyword] = useState("");
|
||||
|
||||
const addKeyword = () => {
|
||||
if (
|
||||
newKeyword.trim() &&
|
||||
!formData.keywords.includes(newKeyword.trim().toLowerCase())
|
||||
) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
keywords: [...formData.keywords, newKeyword.trim().toLowerCase()],
|
||||
});
|
||||
setNewKeyword("");
|
||||
}
|
||||
};
|
||||
|
||||
const removeKeyword = (keyword: string) => {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
keywords: formData.keywords.filter((k) => k !== keyword),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingCategory ? "Modifier la catégorie" : "Nouvelle catégorie"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
{/* Catégorie parente */}
|
||||
<div className="space-y-2">
|
||||
<Label>Catégorie parente</Label>
|
||||
<Select
|
||||
value={formData.parentId || "none"}
|
||||
onValueChange={(value) =>
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
parentId: value === "none" ? null : value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Aucune (catégorie principale)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">
|
||||
Aucune (catégorie principale)
|
||||
</SelectItem>
|
||||
{parentCategories
|
||||
.filter((p) => p.id !== editingCategory?.id)
|
||||
.map((parent) => (
|
||||
<SelectItem key={parent.id} value={parent.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: parent.color }}
|
||||
/>
|
||||
{parent.name}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Nom */}
|
||||
<div className="space-y-2">
|
||||
<Label>Nom</Label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
onFormDataChange({ ...formData, name: e.target.value })
|
||||
}
|
||||
placeholder="Ex: Alimentation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Couleur */}
|
||||
<div className="space-y-2">
|
||||
<Label>Couleur</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categoryColors.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => onFormDataChange({ ...formData, color })}
|
||||
className={cn(
|
||||
"w-8 h-8 rounded-full transition-transform",
|
||||
formData.color === color &&
|
||||
"ring-2 ring-offset-2 ring-primary scale-110"
|
||||
)}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mots-clés */}
|
||||
<div className="space-y-2">
|
||||
<Label>Mots-clés pour la catégorisation automatique</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newKeyword}
|
||||
onChange={(e) => setNewKeyword(e.target.value)}
|
||||
placeholder="Ajouter un mot-clé"
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" && (e.preventDefault(), addKeyword())
|
||||
}
|
||||
/>
|
||||
<Button type="button" onClick={addKeyword} size="icon">
|
||||
<Plus className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-2 max-h-32 overflow-y-auto">
|
||||
{formData.keywords.map((keyword) => (
|
||||
<Badge key={keyword} variant="secondary" className="gap-1">
|
||||
{keyword}
|
||||
<button onClick={() => removeKeyword(keyword)}>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={!formData.name.trim()}>
|
||||
{editingCategory ? "Enregistrer" : "Créer"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
46
components/categories/category-search-bar.tsx
Normal file
46
components/categories/category-search-bar.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Search, X, ChevronsUpDown } from "lucide-react";
|
||||
|
||||
interface CategorySearchBarProps {
|
||||
searchQuery: string;
|
||||
onSearchChange: (query: string) => void;
|
||||
allExpanded: boolean;
|
||||
onToggleAll: () => void;
|
||||
}
|
||||
|
||||
export function CategorySearchBar({
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
allExpanded,
|
||||
onToggleAll,
|
||||
}: CategorySearchBarProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher une catégorie ou un mot-clé..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => onSearchChange("")}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={onToggleAll}>
|
||||
<ChevronsUpDown className="w-4 h-4 mr-2" />
|
||||
{allExpanded ? "Tout replier" : "Tout déplier"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
18
components/categories/constants.ts
Normal file
18
components/categories/constants.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export const categoryColors = [
|
||||
"#22c55e",
|
||||
"#3b82f6",
|
||||
"#f59e0b",
|
||||
"#ec4899",
|
||||
"#ef4444",
|
||||
"#8b5cf6",
|
||||
"#06b6d4",
|
||||
"#84cc16",
|
||||
"#f97316",
|
||||
"#6366f1",
|
||||
"#14b8a6",
|
||||
"#f43f5e",
|
||||
"#64748b",
|
||||
"#0891b2",
|
||||
"#dc2626",
|
||||
];
|
||||
|
||||
6
components/categories/index.ts
Normal file
6
components/categories/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export { CategoryCard } from "./category-card";
|
||||
export { CategoryEditDialog } from "./category-edit-dialog";
|
||||
export { ParentCategoryRow } from "./parent-category-row";
|
||||
export { CategorySearchBar } from "./category-search-bar";
|
||||
export { categoryColors } from "./constants";
|
||||
|
||||
140
components/categories/parent-category-row.tsx
Normal file
140
components/categories/parent-category-row.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { CategoryIcon } from "@/components/ui/category-icon";
|
||||
import {
|
||||
Plus,
|
||||
MoreVertical,
|
||||
Pencil,
|
||||
Trash2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { CategoryCard } from "./category-card";
|
||||
import type { Category } from "@/lib/types";
|
||||
|
||||
interface ParentCategoryRowProps {
|
||||
parent: Category;
|
||||
children: Category[];
|
||||
stats: { total: number; count: number };
|
||||
isExpanded: boolean;
|
||||
onToggleExpanded: () => void;
|
||||
formatCurrency: (amount: number) => string;
|
||||
getCategoryStats: (categoryId: string) => { total: number; count: number };
|
||||
onEdit: (category: Category) => void;
|
||||
onDelete: (categoryId: string) => void;
|
||||
onNewCategory: (parentId: string) => void;
|
||||
}
|
||||
|
||||
export function ParentCategoryRow({
|
||||
parent,
|
||||
children,
|
||||
stats,
|
||||
isExpanded,
|
||||
onToggleExpanded,
|
||||
formatCurrency,
|
||||
getCategoryStats,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onNewCategory,
|
||||
}: ParentCategoryRowProps) {
|
||||
return (
|
||||
<div className="border rounded-lg bg-card">
|
||||
<Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<CollapsibleTrigger asChild>
|
||||
<button className="flex items-center gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
|
||||
)}
|
||||
<div
|
||||
className="w-7 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}
|
||||
/>
|
||||
</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>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<div className="flex items-center gap-1 shrink-0 ml-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onNewCategory(parent.id);
|
||||
}}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7">
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onEdit(parent)}>
|
||||
<Pencil className="w-4 h-4 mr-2" />
|
||||
Modifier
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => onDelete(parent.id)}
|
||||
className="text-red-600"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CollapsibleContent>
|
||||
{children.length > 0 ? (
|
||||
<div className="px-3 pb-2 space-y-1 ml-6 border-l-2 border-muted ml-5">
|
||||
{children.map((child) => (
|
||||
<CategoryCard
|
||||
key={child.id}
|
||||
category={child}
|
||||
stats={getCategoryStats(child.id)}
|
||||
formatCurrency={formatCurrency}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-3 pb-2 ml-11 text-xs text-muted-foreground italic">
|
||||
Aucune sous-catégorie
|
||||
</div>
|
||||
)}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user