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

feat: enhance UI with new background gradients and responsive design adjustments across various components

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:23:53 +01:00
parent b704cc5a84
commit d4db94d156
10 changed files with 399 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/accounts/page.tsx
View File

@@ -30,10 +30,26 @@ import {
} from "@/lib/store-db"; } from "@/lib/store-db";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Building2, Folder, Plus, List, LayoutGrid } from "lucide-react"; import {
Building2,
Folder,
Plus,
List,
LayoutGrid,
MoreVertical,
Pencil,
Trash2,
} from "lucide-react";
import type { Account, Folder as FolderType } from "@/lib/types"; import type { Account, Folder as FolderType } from "@/lib/types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { getAccountBalance } from "@/lib/account-utils"; import { getAccountBalance } from "@/lib/account-utils";
import { useIsMobile } from "@/hooks/use-mobile";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
// Composant wrapper pour les zones de drop des dossiers // Composant wrapper pour les zones de drop des dossiers
function FolderDropZone({ function FolderDropZone({
@@ -61,6 +77,7 @@ function FolderDropZone({
export default function AccountsPage() { export default function AccountsPage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const isMobile = useIsMobile();
const { data: metadata, isLoading: isLoadingMetadata } = useBankingMetadata(); const { data: metadata, isLoading: isLoadingMetadata } = useBankingMetadata();
const { data: accountsWithStats, isLoading: isLoadingAccounts } = const { data: accountsWithStats, isLoading: isLoadingAccounts } =
useAccountsWithStats(); useAccountsWithStats();
@@ -376,12 +393,12 @@ export default function AccountsPage() {
<PageLayout> <PageLayout>
<PageHeader <PageHeader
title="Comptes" title="Comptes"
description="Gérez vos comptes bancaires et leur organisation" description={isMobile ? undefined : "Gérez vos comptes bancaires et leur organisation"}
actions={ actions={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
variant="outline" variant="outline"
size="icon" size={isMobile ? "icon" : "default"}
onClick={() => setIsCompactView(!isCompactView)} onClick={() => setIsCompactView(!isCompactView)}
title={isCompactView ? "Vue détaillée" : "Vue compacte"} title={isCompactView ? "Vue détaillée" : "Vue compacte"}
> >
@@ -390,22 +407,31 @@ export default function AccountsPage() {
) : ( ) : (
<List className="w-4 h-4" /> <List className="w-4 h-4" />
)} )}
{!isMobile && (
<span className="ml-2">
{isCompactView ? "Détaillée" : "Compacte"}
</span>
)}
</Button> </Button>
<Button onClick={handleNewFolder}> <Button onClick={handleNewFolder} size={isMobile ? "icon" : "default"}>
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4" />
Nouveau dossier {!isMobile && <span className="ml-2">Nouveau dossier</span>}
</Button> </Button>
</div> </div>
} }
rightContent={ rightContent={
<div className="text-right"> <div className={cn("text-right", isMobile && "text-left")}>
{!isMobile && (
<p className="text-sm text-muted-foreground">Solde total</p> <p className="text-sm text-muted-foreground">Solde total</p>
)}
<p <p
className={cn( className={cn(
"text-2xl font-bold", isMobile ? "text-xl" : "text-2xl",
"font-bold",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600", totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
)} )}
> >
{isMobile && <span className="text-xs text-muted-foreground mr-2">Total:</span>}
{formatCurrency(totalBalance)} {formatCurrency(totalBalance)}
</p> </p>
</div> </div>
@@ -440,15 +466,17 @@ export default function AccountsPage() {
{accountsByFolder["no-folder"] && {accountsByFolder["no-folder"] &&
accountsByFolder["no-folder"].length > 0 && ( accountsByFolder["no-folder"].length > 0 && (
<FolderDropZone folderId="root"> <FolderDropZone folderId="root">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-3 sm:mb-4">
<Folder className="w-5 h-5 text-muted-foreground" /> <Folder className="w-5 h-5 text-muted-foreground shrink-0" />
<h2 className="text-lg font-semibold">Sans dossier</h2> <div className="flex-1 min-w-0">
<span className="text-sm text-muted-foreground"> <div className="flex items-center gap-2 flex-wrap">
<h2 className="text-base sm:text-lg font-semibold">Sans dossier</h2>
<span className="text-xs sm:text-sm text-muted-foreground shrink-0">
({accountsByFolder["no-folder"].length}) ({accountsByFolder["no-folder"].length})
</span> </span>
<span <span
className={cn( className={cn(
"text-sm font-semibold tabular-nums ml-auto", "text-xs sm:text-sm font-semibold tabular-nums shrink-0",
accountsByFolder["no-folder"].reduce( accountsByFolder["no-folder"].reduce(
(sum, a) => sum + getAccountBalance(a), (sum, a) => sum + getAccountBalance(a),
0, 0,
@@ -465,7 +493,9 @@ export default function AccountsPage() {
)} )}
</span> </span>
</div> </div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> </div>
</div>
<div className="grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3">
{accountsByFolder["no-folder"].map((account) => { {accountsByFolder["no-folder"].map((account) => {
const folder = metadata.folders.find( const folder = metadata.folders.find(
(f: FolderType) => f.id === account.folderId, (f: FolderType) => f.id === account.folderId,
@@ -501,9 +531,9 @@ export default function AccountsPage() {
return ( return (
<FolderDropZone key={folder.id} folderId={folder.id}> <FolderDropZone key={folder.id} folderId={folder.id}>
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-3 sm:mb-4">
<div <div
className="w-5 h-5 rounded flex items-center justify-center" className="w-5 h-5 rounded flex items-center justify-center shrink-0"
style={{ backgroundColor: `${folder.color}20` }} style={{ backgroundColor: `${folder.color}20` }}
> >
<Folder <Folder
@@ -511,14 +541,18 @@ export default function AccountsPage() {
style={{ color: folder.color }} style={{ color: folder.color }}
/> />
</div> </div>
<h2 className="text-lg font-semibold">{folder.name}</h2> <div className="flex-1 min-w-0">
<span className="text-sm text-muted-foreground"> <div className="flex items-center gap-2 flex-wrap">
<h2 className="text-base sm:text-lg font-semibold truncate">
{folder.name}
</h2>
<span className="text-xs sm:text-sm text-muted-foreground shrink-0">
({folderAccounts.length}) ({folderAccounts.length})
</span> </span>
{folderAccounts.length > 0 && ( {folderAccounts.length > 0 && (
<span <span
className={cn( className={cn(
"text-sm font-semibold tabular-nums", "text-xs sm:text-sm font-semibold tabular-nums shrink-0",
folderBalance >= 0 folderBalance >= 0
? "text-emerald-600" ? "text-emerald-600"
: "text-red-600", : "text-red-600",
@@ -527,11 +561,36 @@ export default function AccountsPage() {
{formatCurrency(folderBalance)} {formatCurrency(folderBalance)}
</span> </span>
)} )}
</div>
</div>
{isMobile ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
<MoreVertical className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEditFolder(folder)}>
<Pencil className="w-4 h-4 mr-2" />
Modifier
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDeleteFolder(folder.id)}
variant="destructive"
>
<Trash2 className="w-4 h-4 mr-2" />
Supprimer
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleEditFolder(folder)} onClick={() => handleEditFolder(folder)}
className="ml-auto" className="ml-auto shrink-0"
> >
Modifier Modifier
</Button> </Button>
@@ -539,13 +598,15 @@ export default function AccountsPage() {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleDeleteFolder(folder.id)} onClick={() => handleDeleteFolder(folder.id)}
className="text-destructive hover:text-destructive" className="text-destructive hover:text-destructive shrink-0"
> >
Supprimer Supprimer
</Button> </Button>
</>
)}
</div> </div>
{folderAccounts.length > 0 ? ( {folderAccounts.length > 0 ? (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3">
{folderAccounts.map((account) => { {folderAccounts.map((account) => {
const accountFolder = metadata.folders.find( const accountFolder = metadata.folders.find(
(f: FolderType) => f.id === account.folderId, (f: FolderType) => f.id === account.folderId,

76
app/globals.css
View File

@@ -122,4 +122,80 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
/* Background avec beau dégradé */
.page-background {
position: relative;
background: var(--background);
}
.page-background::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 50% at 50% -20%,
color-mix(in srgb, var(--chart-1) 25%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at -10% 50%,
color-mix(in srgb, var(--chart-2) 20%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at 110% 50%,
color-mix(in srgb, var(--chart-3) 20%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 80% 50% at 50% 120%,
color-mix(in srgb, var(--chart-4) 25%, transparent) 0%,
transparent 50%
),
linear-gradient(
135deg,
color-mix(in srgb, var(--chart-1) 8%, transparent) 0%,
transparent 25%,
transparent 75%,
color-mix(in srgb, var(--chart-2) 8%, transparent) 100%
);
background-size: 100% 100%;
pointer-events: none;
opacity: 1;
}
.dark .page-background::before {
background:
radial-gradient(ellipse 80% 50% at 50% -20%,
color-mix(in srgb, var(--chart-1) 35%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at -10% 50%,
color-mix(in srgb, var(--chart-2) 30%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at 110% 50%,
color-mix(in srgb, var(--chart-3) 30%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 80% 50% at 50% 120%,
color-mix(in srgb, var(--chart-4) 35%, transparent) 0%,
transparent 50%
),
linear-gradient(
135deg,
color-mix(in srgb, var(--chart-1) 12%, transparent) 0%,
transparent 25%,
transparent 75%,
color-mix(in srgb, var(--chart-2) 12%, transparent) 100%
);
opacity: 1;
}
.page-content {
position: relative;
z-index: 1;
}
} }

4
app/login/page.tsx
View File

@@ -47,8 +47,8 @@ export default function LoginPage() {
}; };
return ( return (
<div className="min-h-screen flex items-center justify-center bg-[var(--background)] p-4"> <div className="min-h-screen flex items-center justify-center bg-[var(--background)] p-4 page-background">
<Card className="w-full max-w-md"> <Card className="w-full max-w-md page-content">
<CardHeader className="space-y-1"> <CardHeader className="space-y-1">
<div className="flex items-center justify-center mb-4"> <div className="flex items-center justify-center mb-4">
<Lock className="w-12 h-12 text-[var(--primary)]" /> <Lock className="w-12 h-12 text-[var(--primary)]" />

14
app/page.tsx
View File

@@ -27,11 +27,11 @@ export default function DashboardPage() {
} }
const filteredAccounts = data.accounts.filter((a) => const filteredAccounts = data.accounts.filter((a) =>
selectedAccounts.includes(a.id), selectedAccounts.includes(a.id)
); );
const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id)); const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
const filteredTransactions = data.transactions.filter((t) => const filteredTransactions = data.transactions.filter((t) =>
filteredAccountIds.has(t.accountId), filteredAccountIds.has(t.accountId)
); );
return { return {
@@ -60,9 +60,8 @@ export default function DashboardPage() {
} }
/> />
<Card className="mb-6"> <Card className="mb-4 sm:mb-6 border shadow-sm">
<CardContent className="pt-4"> <CardContent className="px-4 py-4 sm:px-6 sm:py-6">
<div className="flex flex-wrap gap-4">
<AccountFilterCombobox <AccountFilterCombobox
accounts={data.accounts} accounts={data.accounts}
folders={data.folders} folders={data.folders}
@@ -71,15 +70,14 @@ export default function DashboardPage() {
className="w-full md:w-[280px]" className="w-full md:w-[280px]"
filteredTransactions={data.transactions} filteredTransactions={data.transactions}
/> />
</div>
</CardContent> </CardContent>
</Card> </Card>
<OverviewCards data={filteredData} /> <OverviewCards data={filteredData} />
<div className="grid gap-6 lg:grid-cols-2"> <div className="grid gap-4 sm:gap-6 lg:grid-cols-2">
<RecentTransactions data={filteredData} /> <RecentTransactions data={filteredData} />
<div className="space-y-6"> <div className="space-y-4 sm:space-y-6">
<AccountsSummary data={filteredData} /> <AccountsSummary data={filteredData} />
<CategoryBreakdown data={filteredData} /> <CategoryBreakdown data={filteredData} />
</div> </div>

35
components/accounts/account-bulk-actions.tsx
View File

@@ -3,6 +3,8 @@
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Trash2 } from "lucide-react"; import { Trash2 } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
interface AccountBulkActionsProps { interface AccountBulkActionsProps {
selectedCount: number; selectedCount: number;
@@ -13,18 +15,39 @@ export function AccountBulkActions({
selectedCount, selectedCount,
onDelete, onDelete,
}: AccountBulkActionsProps) { }: AccountBulkActionsProps) {
const isMobile = useIsMobile();
if (selectedCount === 0) return null; if (selectedCount === 0) return null;
return ( return (
<Card className="bg-destructive/5 border-destructive/20"> <Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
<CardContent className="py-3"> <CardContent className={cn(
<div className="flex items-center gap-4"> "py-3",
<span className="text-sm font-medium"> isMobile && "px-3"
)}>
<div className={cn(
"flex items-center gap-2 sm:gap-4",
isMobile && "flex-col sm:flex-row"
)}>
<span className={cn(
"font-medium",
isMobile ? "text-xs" : "text-sm"
)}>
{selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
{selectedCount > 1 ? "s" : ""} {selectedCount > 1 ? "s" : ""}
</span> </span>
<Button size="sm" variant="destructive" onClick={onDelete}> <Button
<Trash2 className="w-4 h-4 mr-1" /> size={isMobile ? "sm" : "sm"}
variant="destructive"
onClick={onDelete}
className={cn(
isMobile && "w-full sm:w-auto"
)}
>
<Trash2 className={cn(
isMobile ? "w-3.5 h-3.5" : "w-4 h-4",
"mr-1"
)} />
Supprimer Supprimer
</Button> </Button>
</div> </div>

79
components/accounts/account-card.tsx
View File

@@ -23,6 +23,7 @@ import type { Account, Folder } from "@/lib/types";
import { accountTypeIcons, accountTypeLabels } from "./constants"; import { accountTypeIcons, accountTypeLabels } from "./constants";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { getAccountBalance } from "@/lib/account-utils"; import { getAccountBalance } from "@/lib/account-utils";
import { useIsMobile } from "@/hooks/use-mobile";
interface AccountCardProps { interface AccountCardProps {
account: Account; account: Account;
@@ -49,6 +50,7 @@ export function AccountCard({
draggableId, draggableId,
compact = false, compact = false,
}: AccountCardProps) { }: AccountCardProps) {
const isMobile = useIsMobile();
const Icon = accountTypeIcons[account.type]; const Icon = accountTypeIcons[account.type];
const realBalance = getAccountBalance(account); const realBalance = getAccountBalance(account);
@@ -82,14 +84,14 @@ export function AccountCard({
isDragging && "bg-muted/80", isDragging && "bg-muted/80",
)} )}
> >
<CardHeader className="pb-0"> <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
<div className="flex items-start justify-between"> <div className="flex items-start justify-between gap-1.5">
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-1.5 flex-1 min-w-0">
{draggableId && ( {draggableId && !isMobile && (
<button <button
{...attributes} {...attributes}
{...listeners} {...listeners}
className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing" className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing shrink-0"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<GripVertical className="w-4 h-4 text-muted-foreground" /> <GripVertical className="w-4 h-4 text-muted-foreground" />
@@ -102,16 +104,26 @@ export function AccountCard({
onSelect(account.id, checked === true) onSelect(account.id, checked === true)
} }
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="shrink-0"
/> />
)} )}
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0"> <div className={cn(
<Icon className="w-4 h-4 text-primary" /> "rounded-full bg-primary/10 flex items-center justify-center shrink-0",
isMobile ? "w-6 h-6" : "w-8 h-8"
)}>
<Icon className={cn(
"text-primary",
isMobile ? "w-3 h-3" : "w-4 h-4"
)} />
</div> </div>
<div className="min-w-0"> <div className="min-w-0 flex-1">
<CardTitle className="text-sm font-semibold truncate"> <CardTitle className={cn(
"font-semibold truncate leading-tight",
isMobile ? "text-[11px]" : "text-sm"
)}>
{account.name} {account.name}
</CardTitle> </CardTitle>
{!compact && ( {!compact && !isMobile && (
<> <>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{accountTypeLabels[account.type]} {accountTypeLabels[account.type]}
@@ -127,8 +139,13 @@ export function AccountCard({
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0"> <Button variant="ghost" size="icon" className={cn(
<MoreVertical className="w-3.5 h-3.5" /> "shrink-0",
isMobile ? "h-5 w-5" : "h-7 w-7"
)}>
<MoreVertical className={cn(
isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5"
)} />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@@ -138,7 +155,7 @@ export function AccountCard({
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => onDelete(account.id)} onClick={() => onDelete(account.id)}
className="text-red-600" variant="destructive"
> >
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-2" />
Supprimer Supprimer
@@ -147,13 +164,18 @@ export function AccountCard({
</DropdownMenu> </DropdownMenu>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className={cn("pt-1", compact && "pt-0")}> <CardContent className={cn(
<div className="flex items-center justify-between"> isMobile ? "px-2 pb-2 pt-1" : "pt-1",
compact && "pt-0"
)}>
<div className="flex items-center justify-between gap-1.5">
<div <div
className={cn( className={cn(
compact ? "text-lg" : "text-xl", "font-bold truncate",
"font-bold", compact
!compact && "mb-1.5", ? isMobile ? "text-sm" : "text-lg"
: isMobile ? "text-base" : "text-xl",
!compact && !isMobile && "mb-1.5",
realBalance >= 0 ? "text-emerald-600" : "text-red-600", realBalance >= 0 ? "text-emerald-600" : "text-red-600",
)} )}
> >
@@ -162,23 +184,34 @@ export function AccountCard({
{compact && ( {compact && (
<Link <Link
href={`/transactions?accountId=${account.id}`} href={`/transactions?accountId=${account.id}`}
className="text-xs text-muted-foreground hover:text-primary hover:underline" className={cn(
"text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap",
isMobile ? "text-[9px]" : "text-xs"
)}
> >
{transactionCount} transactions {transactionCount} txns
</Link> </Link>
)} )}
</div> </div>
{!compact && ( {!compact && (
<> <>
<div className="flex items-center justify-between text-xs text-muted-foreground"> <div className={cn(
"flex items-center justify-between gap-2 mt-1",
isMobile ? "text-[10px]" : "text-xs",
"text-muted-foreground"
)}>
<Link <Link
href={`/transactions?accountId=${account.id}`} href={`/transactions?accountId=${account.id}`}
className="hover:text-primary hover:underline truncate" className="hover:text-primary hover:underline truncate"
> >
{transactionCount} transactions {transactionCount} transactions
</Link> </Link>
{folder && <span className="truncate ml-2">{folder.name}</span>} {folder && !isMobile && (
<span className="truncate ml-2 shrink-0">{folder.name}</span>
)}
</div> </div>
{!isMobile && (
<>
{account.initialBalance !== undefined && {account.initialBalance !== undefined &&
account.initialBalance !== null && ( account.initialBalance !== null && (
<p className="text-xs text-muted-foreground mt-1.5"> <p className="text-xs text-muted-foreground mt-1.5">
@@ -204,6 +237,8 @@ export function AccountCard({
)} )}
</> </>
)} )}
</>
)}
</CardContent> </CardContent>
</Card> </Card>
); );

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

@@ -13,7 +13,7 @@ interface OverviewCardsProps {
export function OverviewCards({ data }: OverviewCardsProps) { export function OverviewCards({ data }: OverviewCardsProps) {
const totalBalance = data.accounts.reduce( const totalBalance = data.accounts.reduce(
(sum, acc) => sum + getAccountBalance(acc), (sum, acc) => sum + getAccountBalance(acc),
0, 0
); );
const thisMonth = new Date(); const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
const thisMonthStr = thisMonth.toISOString().slice(0, 7); const thisMonthStr = thisMonth.toISOString().slice(0, 7);
const monthTransactions = data.transactions.filter((t) => const monthTransactions = data.transactions.filter((t) =>
t.date.startsWith(thisMonthStr), t.date.startsWith(thisMonthStr)
); );
const income = monthTransactions const income = monthTransactions
@@ -45,41 +45,52 @@ export function OverviewCards({ data }: OverviewCardsProps) {
}; };
return ( return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> <div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
<Card> <Card
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> className={cn(
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground"> "border shadow-sm bg-gradient-to-br",
totalBalance >= 0
? "from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card"
: "from-red-50/50 to-card dark:from-red-950/20 dark:to-card"
)}
>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Solde Total Solde Total
</CardTitle> </CardTitle>
<Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" /> <div className="rounded-full bg-muted/50 p-2 shrink-0">
<Wallet className="h-4 w-4 text-muted-foreground" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div <div
className={cn( className={cn(
"text-xl md:text-2xl font-bold", "text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600", totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
)} )}
> >
{formatCurrency(totalBalance)} {formatCurrency(totalBalance)}
</div> </div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-2">
{data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""} {data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border shadow-sm bg-gradient-to-br from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Revenus du mois Revenus du mois
</CardTitle> </CardTitle>
<TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" /> <div className="rounded-full bg-emerald-500/10 p-2 shrink-0">
<TrendingUp className="h-4 w-4 text-emerald-600" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-xl md:text-2xl font-bold text-emerald-600"> <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-emerald-600">
{formatCurrency(income)} {formatCurrency(income)}
</div> </div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-2">
{monthTransactions.filter((t) => t.amount > 0).length} opération {monthTransactions.filter((t) => t.amount > 0).length} opération
{monthTransactions.filter((t) => t.amount > 0).length > 1 {monthTransactions.filter((t) => t.amount > 0).length > 1
? "s" ? "s"
@@ -88,18 +99,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border shadow-sm bg-gradient-to-br from-red-50/50 to-card dark:from-red-950/20 dark:to-card">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Dépenses du mois Dépenses du mois
</CardTitle> </CardTitle>
<TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" /> <div className="rounded-full bg-red-500/10 p-2 shrink-0">
<TrendingDown className="h-4 w-4 text-red-600" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-xl md:text-2xl font-bold text-red-600"> <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-red-600">
{formatCurrency(expenses)} {formatCurrency(expenses)}
</div> </div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-2">
{monthTransactions.filter((t) => t.amount < 0).length} opération {monthTransactions.filter((t) => t.amount < 0).length} opération
{monthTransactions.filter((t) => t.amount < 0).length > 1 {monthTransactions.filter((t) => t.amount < 0).length > 1
? "s" ? "s"
@@ -108,18 +121,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="border shadow-sm bg-gradient-to-br from-blue-50/50 to-card dark:from-blue-950/20 dark:to-card">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
<CardTitle className="text-xs md:text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
Pointage Pointage
</CardTitle> </CardTitle>
<CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" /> <div className="rounded-full bg-muted/50 p-2 shrink-0">
<CreditCard className="h-4 w-4 text-muted-foreground" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
<div className="text-xl md:text-2xl font-bold"> <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight">
{reconciledPercent}% {reconciledPercent}%
</div> </div>
<p className="text-[10px] md:text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-2">
{reconciled} / {total} opérations pointées {reconciled} / {total} opérations pointées
</p> </p>
</CardContent> </CardContent>

4
components/layout/page-layout.tsx
View File

@@ -15,9 +15,9 @@ export function PageLayout({ children }: PageLayoutProps) {
<SidebarContext.Provider <SidebarContext.Provider
value={{ open: sidebarOpen, setOpen: setSidebarOpen }} value={{ open: sidebarOpen, setOpen: setSidebarOpen }}
> >
<div className="flex h-screen bg-background overflow-hidden"> <div className="flex h-screen bg-background overflow-hidden page-background">
<Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} /> <Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
<main className="flex-1 overflow-auto overflow-x-hidden"> <main className="flex-1 overflow-auto overflow-x-hidden page-content">
<div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full"> <div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full">
{children} {children}
</div> </div>

32
components/ui/account-filter-combobox.tsx
View File

@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
// Get root folders (folders without parent) - same as folders/page.tsx // Get root folders (folders without parent) - same as folders/page.tsx
const rootFolders = useMemo( const rootFolders = useMemo(
() => folders.filter((f) => f.parentId === null), () => folders.filter((f) => f.parentId === null),
[folders], [folders]
); );
// Get child folders for a given parent - same as FolderTreeItem // Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
// Get accounts without folder // Get accounts without folder
const orphanAccounts = useMemo( const orphanAccounts = useMemo(
() => accounts.filter((a) => !a.folderId), () => accounts.filter((a) => !a.folderId),
[accounts], [accounts]
); );
const selectedAccounts = accounts.filter((a) => value.includes(a.id)); const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
const directAccounts = getFolderAccounts(folderId); const directAccounts = getFolderAccounts(folderId);
const childFoldersList = getChildFolders(folderId); const childFoldersList = getChildFolders(folderId);
const childAccounts = childFoldersList.flatMap((cf) => const childAccounts = childFoldersList.flatMap((cf) =>
getAllAccountsInFolder(cf.id), getAllAccountsInFolder(cf.id)
); );
return [...directAccounts, ...childAccounts]; return [...directAccounts, ...childAccounts];
}; };
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({
if (allSelected) { if (allSelected) {
const newSelection = value.filter( const newSelection = value.filter(
(v) => !allFolderAccountIds.includes(v), (v) => !allFolderAccountIds.includes(v)
); );
onChange(newSelection.length > 0 ? newSelection : ["all"]); onChange(newSelection.length > 0 ? newSelection : ["all"]);
} else { } else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
const folderAccounts = getAllAccountsInFolder(folderId); const folderAccounts = getAllAccountsInFolder(folderId);
if (folderAccounts.length === 0) return false; if (folderAccounts.length === 0) return false;
const selectedCount = folderAccounts.filter((a) => const selectedCount = folderAccounts.filter((a) =>
value.includes(a.id), value.includes(a.id)
).length; ).length;
return selectedCount > 0 && selectedCount < folderAccounts.length; return selectedCount > 0 && selectedCount < folderAccounts.length;
}; };
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
<Check <Check
className={cn( className={cn(
"h-4 w-4", "h-4 w-4",
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0", isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
)} )}
/> />
</div> </div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4 shrink-0", "ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0", value.includes(account.id) ? "opacity-100" : "opacity-0"
)} )}
/> />
</CommandItem> </CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({
{/* Child folders - recursive */} {/* Child folders - recursive */}
{childFoldersList.map((childFolder) => {childFoldersList.map((childFolder) =>
renderFolder(childFolder, depth + 1, currentPath), renderFolder(childFolder, depth + 1, currentPath)
)} )}
</div> </div>
); );
@@ -235,7 +235,10 @@ export function AccountFilterCombobox({
variant="outline" variant="outline"
role="combobox" role="combobox"
aria-expanded={open} aria-expanded={open}
className={cn("justify-between min-w-0", className)} className={cn(
"justify-between min-w-0 h-10 w-full text-sm font-normal",
className
)}
> >
<div className="flex items-center gap-2 min-w-0 flex-1"> <div className="flex items-center gap-2 min-w-0 flex-1">
{selectedAccounts.length === 1 ? ( {selectedAccounts.length === 1 ? (
@@ -285,7 +288,7 @@ export function AccountFilterCombobox({
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[380px] p-0" className="w-[calc(100vw-2rem)] sm:w-[380px] p-0"
align="start" align="start"
onOpenAutoFocus={(e) => e.preventDefault()} onOpenAutoFocus={(e) => e.preventDefault()}
> >
@@ -301,10 +304,7 @@ export function AccountFilterCombobox({
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1">
( (
{formatCurrency( {formatCurrency(
filteredTransactions.reduce( filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
(sum, t) => sum + t.amount,
0,
),
)} )}
) )
</span> </span>
@@ -312,7 +312,7 @@ export function AccountFilterCombobox({
<Check <Check
className={cn( className={cn(
"ml-auto h-4 w-4", "ml-auto h-4 w-4",
isAll ? "opacity-100" : "opacity-0", isAll ? "opacity-100" : "opacity-0"
)} )}
/> />
</CommandItem> </CommandItem>
@@ -348,7 +348,7 @@ export function AccountFilterCombobox({
"ml-auto h-4 w-4 shrink-0", "ml-auto h-4 w-4 shrink-0",
value.includes(account.id) value.includes(account.id)
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0"
)} )}
/> />
</CommandItem> </CommandItem>

12
components/ui/card.tsx
View File

@@ -7,8 +7,8 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card" data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", "bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm",
className, className
)} )}
{...props} {...props}
/> />
@@ -20,8 +20,8 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card-header" data-slot="card-header"
className={cn( className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className, className
)} )}
{...props} {...props}
/> />
@@ -54,7 +54,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-action" data-slot="card-action"
className={cn( className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end", "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className, className
)} )}
{...props} {...props}
/> />
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-content" data-slot="card-content"
className={cn("px-6", className)} className={cn("px-6 pb-6", className)}
{...props} {...props}
/> />
); );