mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-13 21:52:40 +00:00
b9ca74e7e6
Backend changes: - Add logo field to AccountDetails model - Update accounts API endpoints to include logo data - Add database migration for logo column in accounts table - Implement institution details fetching from GoCardless API - Enrich account data with institution logos during sync - Fix type errors in banks endpoint with proper response parsing Frontend changes: - Add failedImages state to track logo loading failures - Implement conditional rendering to show bank logos when available - Add proper error handling with fallback to Building2 icon - Fix image sizing to w-6 h-6 sm:w-8 sm:h-8 for proper display - Update Account interface to include optional logo field - Remove unused useState import from System component 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
623 lines
26 KiB
TypeScript
623 lines
26 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
CreditCard,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Building2,
|
|
RefreshCw,
|
|
AlertCircle,
|
|
Edit2,
|
|
Check,
|
|
X,
|
|
Plus,
|
|
Bell,
|
|
MessageSquare,
|
|
Send,
|
|
Trash2,
|
|
User,
|
|
Filter,
|
|
} from "lucide-react";
|
|
import { apiClient } from "../lib/api";
|
|
import { formatCurrency, formatDate } from "../lib/utils";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "./ui/card";
|
|
import { Button } from "./ui/button";
|
|
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
|
|
import { Label } from "./ui/label";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
|
|
import AccountsSkeleton from "./AccountsSkeleton";
|
|
import NotificationFiltersDrawer from "./NotificationFiltersDrawer";
|
|
import DiscordConfigDrawer from "./DiscordConfigDrawer";
|
|
import TelegramConfigDrawer from "./TelegramConfigDrawer";
|
|
import type {
|
|
Account,
|
|
Balance,
|
|
NotificationSettings,
|
|
NotificationService,
|
|
} from "../types/api";
|
|
|
|
// Helper function to get status indicator color and styles
|
|
const getStatusIndicator = (status: string) => {
|
|
const statusLower = status.toLowerCase();
|
|
|
|
switch (statusLower) {
|
|
case "ready":
|
|
return {
|
|
color: "bg-green-500",
|
|
tooltip: "Ready",
|
|
};
|
|
case "pending":
|
|
return {
|
|
color: "bg-amber-500",
|
|
tooltip: "Pending",
|
|
};
|
|
case "error":
|
|
case "failed":
|
|
return {
|
|
color: "bg-destructive",
|
|
tooltip: "Error",
|
|
};
|
|
case "inactive":
|
|
return {
|
|
color: "bg-muted-foreground",
|
|
tooltip: "Inactive",
|
|
};
|
|
default:
|
|
return {
|
|
color: "bg-primary",
|
|
tooltip: status,
|
|
};
|
|
}
|
|
};
|
|
|
|
export default function Settings() {
|
|
const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
|
|
const [editingName, setEditingName] = useState("");
|
|
const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
// Account queries
|
|
const {
|
|
data: accounts,
|
|
isLoading: accountsLoading,
|
|
error: accountsError,
|
|
refetch: refetchAccounts,
|
|
} = useQuery<Account[]>({
|
|
queryKey: ["accounts"],
|
|
queryFn: apiClient.getAccounts,
|
|
});
|
|
|
|
const { data: balances } = useQuery<Balance[]>({
|
|
queryKey: ["balances"],
|
|
queryFn: () => apiClient.getBalances(),
|
|
});
|
|
|
|
// Notification queries
|
|
const {
|
|
data: notificationSettings,
|
|
isLoading: settingsLoading,
|
|
error: settingsError,
|
|
refetch: refetchSettings,
|
|
} = useQuery<NotificationSettings>({
|
|
queryKey: ["notificationSettings"],
|
|
queryFn: apiClient.getNotificationSettings,
|
|
});
|
|
|
|
const {
|
|
data: services,
|
|
isLoading: servicesLoading,
|
|
error: servicesError,
|
|
refetch: refetchServices,
|
|
} = useQuery<NotificationService[]>({
|
|
queryKey: ["notificationServices"],
|
|
queryFn: apiClient.getNotificationServices,
|
|
});
|
|
|
|
// Account mutations
|
|
const updateAccountMutation = useMutation({
|
|
mutationFn: ({ id, display_name }: { id: string; display_name: string }) =>
|
|
apiClient.updateAccount(id, { display_name }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["accounts"] });
|
|
setEditingAccountId(null);
|
|
setEditingName("");
|
|
},
|
|
onError: (error) => {
|
|
console.error("Failed to update account:", error);
|
|
},
|
|
});
|
|
|
|
// Notification mutations
|
|
const deleteServiceMutation = useMutation({
|
|
mutationFn: apiClient.deleteNotificationService,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
|
|
queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
|
|
},
|
|
});
|
|
|
|
// Account handlers
|
|
const handleEditStart = (account: Account) => {
|
|
setEditingAccountId(account.id);
|
|
setEditingName(account.display_name || account.name || "");
|
|
};
|
|
|
|
const handleEditSave = () => {
|
|
if (editingAccountId && editingName.trim()) {
|
|
updateAccountMutation.mutate({
|
|
id: editingAccountId,
|
|
display_name: editingName.trim(),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleEditCancel = () => {
|
|
setEditingAccountId(null);
|
|
setEditingName("");
|
|
};
|
|
|
|
// Notification handlers
|
|
const handleDeleteService = (serviceName: string) => {
|
|
if (
|
|
confirm(
|
|
`Are you sure you want to delete the ${serviceName} notification service?`,
|
|
)
|
|
) {
|
|
deleteServiceMutation.mutate(serviceName.toLowerCase());
|
|
}
|
|
};
|
|
|
|
const isLoading = accountsLoading || settingsLoading || servicesLoading;
|
|
const hasError = accountsError || settingsError || servicesError;
|
|
|
|
if (isLoading) {
|
|
return <AccountsSkeleton />;
|
|
}
|
|
|
|
if (hasError) {
|
|
return (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertTitle>Failed to load settings</AlertTitle>
|
|
<AlertDescription className="space-y-3">
|
|
<p>
|
|
Unable to connect to the Leggen API. Please check your configuration
|
|
and ensure the API server is running.
|
|
</p>
|
|
<Button
|
|
onClick={() => {
|
|
refetchAccounts();
|
|
refetchSettings();
|
|
refetchServices();
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Retry
|
|
</Button>
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Tabs defaultValue="accounts" className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="accounts" className="flex items-center space-x-2">
|
|
<User className="h-4 w-4" />
|
|
<span>Accounts</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="notifications"
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Bell className="h-4 w-4" />
|
|
<span>Notifications</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="accounts" className="space-y-6">
|
|
{/* Account Management Section */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Account Management</CardTitle>
|
|
<CardDescription>
|
|
Manage your connected bank accounts and customize their display
|
|
names
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
{!accounts || accounts.length === 0 ? (
|
|
<CardContent className="p-6 text-center">
|
|
<CreditCard className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-foreground mb-2">
|
|
No accounts found
|
|
</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
Connect your first bank account to get started with Leggen.
|
|
</p>
|
|
<Button disabled className="flex items-center space-x-2">
|
|
<Plus className="h-4 w-4" />
|
|
<span>Add Bank Account</span>
|
|
</Button>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Coming soon: Add new bank connections
|
|
</p>
|
|
</CardContent>
|
|
) : (
|
|
<CardContent className="p-0">
|
|
<div className="divide-y divide-border">
|
|
{accounts.map((account) => {
|
|
// Get balance from account's balances array or fallback to balances query
|
|
const accountBalance = account.balances?.[0];
|
|
const fallbackBalance = balances?.find(
|
|
(b) => b.account_id === account.id,
|
|
);
|
|
const balance =
|
|
accountBalance?.amount ||
|
|
fallbackBalance?.balance_amount ||
|
|
0;
|
|
const currency =
|
|
accountBalance?.currency ||
|
|
fallbackBalance?.currency ||
|
|
account.currency ||
|
|
"EUR";
|
|
const isPositive = balance >= 0;
|
|
|
|
return (
|
|
<div
|
|
key={account.id}
|
|
className="p-4 sm:p-6 hover:bg-accent transition-colors"
|
|
>
|
|
{/* Mobile layout - stack vertically */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
|
|
<div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
|
|
<div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-muted flex items-center justify-center">
|
|
{account.logo && !failedImages.has(account.id) ? (
|
|
<img
|
|
src={account.logo}
|
|
alt={`${account.institution_id} logo`}
|
|
className="w-6 h-6 sm:w-8 sm:h-8 object-contain"
|
|
onError={() => {
|
|
console.warn(`Failed to load bank logo for ${account.institution_id}: ${account.logo}`);
|
|
setFailedImages(prev => new Set([...prev, account.id]));
|
|
}}
|
|
/>
|
|
) : (
|
|
<Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
{editingAccountId === account.id ? (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="text"
|
|
value={editingName}
|
|
onChange={(e) =>
|
|
setEditingName(e.target.value)
|
|
}
|
|
className="flex-1 px-3 py-1 text-base sm:text-lg font-medium border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring"
|
|
placeholder="Custom account name"
|
|
name="search"
|
|
autoComplete="off"
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") handleEditSave();
|
|
if (e.key === "Escape")
|
|
handleEditCancel();
|
|
}}
|
|
autoFocus
|
|
/>
|
|
<button
|
|
onClick={handleEditSave}
|
|
disabled={
|
|
!editingName.trim() ||
|
|
updateAccountMutation.isPending
|
|
}
|
|
className="p-1 text-green-600 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title="Save changes"
|
|
>
|
|
<Check className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={handleEditCancel}
|
|
className="p-1 text-gray-600 hover:text-gray-700"
|
|
title="Cancel editing"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground truncate">
|
|
{account.institution_id}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className="flex items-center space-x-2 min-w-0">
|
|
<h4 className="text-base sm:text-lg font-medium text-foreground truncate">
|
|
{account.display_name ||
|
|
account.name ||
|
|
"Unnamed Account"}
|
|
</h4>
|
|
<button
|
|
onClick={() => handleEditStart(account)}
|
|
className="flex-shrink-0 p-1 text-muted-foreground hover:text-foreground transition-colors"
|
|
title="Edit account name"
|
|
>
|
|
<Edit2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground truncate">
|
|
{account.institution_id}
|
|
</p>
|
|
{account.iban && (
|
|
<p className="text-xs text-muted-foreground mt-1 font-mono break-all sm:break-normal">
|
|
IBAN: {account.iban}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Balance and date section */}
|
|
<div className="flex items-center justify-between sm:flex-col sm:items-end sm:text-right flex-shrink-0">
|
|
{/* Date and status indicator - left on mobile, bottom on desktop */}
|
|
<div className="flex items-center space-x-2 order-1 sm:order-2">
|
|
<div
|
|
className={`w-3 h-3 rounded-full ${getStatusIndicator(account.status).color} relative group cursor-help`}
|
|
role="img"
|
|
aria-label={`Account status: ${getStatusIndicator(account.status).tooltip}`}
|
|
>
|
|
{/* Tooltip */}
|
|
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10">
|
|
{getStatusIndicator(account.status).tooltip}
|
|
<div className="absolute top-full left-1/2 transform -translate-x-1/2 border-2 border-transparent border-t-gray-900"></div>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
|
|
Updated{" "}
|
|
{formatDate(
|
|
account.last_accessed || account.created,
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Balance - right on mobile, top on desktop */}
|
|
<div className="flex items-center space-x-2 order-2 sm:order-1">
|
|
{isPositive ? (
|
|
<TrendingUp className="h-4 w-4 text-green-500" />
|
|
) : (
|
|
<TrendingDown className="h-4 w-4 text-red-500" />
|
|
)}
|
|
<p
|
|
className={`text-base sm:text-lg font-semibold ${
|
|
isPositive ? "text-green-600" : "text-red-600"
|
|
}`}
|
|
>
|
|
{formatCurrency(balance, currency)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Add Bank Section (Future Feature) */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Add New Bank Account</CardTitle>
|
|
<CardDescription>
|
|
Connect additional bank accounts to track all your finances in
|
|
one place
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="text-center space-y-4">
|
|
<div className="p-4 bg-muted rounded-lg">
|
|
<Plus className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Bank connection functionality is coming soon. Stay tuned for
|
|
updates!
|
|
</p>
|
|
</div>
|
|
<Button disabled variant="outline">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Connect Bank Account
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="notifications" className="space-y-6">
|
|
{/* Notification Services */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Bell className="h-5 w-5 text-primary" />
|
|
<span>Notification Services</span>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Manage your notification services
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
{!services || services.length === 0 ? (
|
|
<CardContent className="text-center">
|
|
<Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-foreground mb-2">
|
|
No notification services configured
|
|
</h3>
|
|
<p className="text-muted-foreground">
|
|
Configure notification services in your backend to receive
|
|
alerts.
|
|
</p>
|
|
</CardContent>
|
|
) : (
|
|
<CardContent className="p-0">
|
|
<div className="divide-y divide-border">
|
|
{services.map((service) => (
|
|
<div
|
|
key={service.name}
|
|
className="p-6 hover:bg-accent transition-colors"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-muted rounded-full">
|
|
{service.name.toLowerCase().includes("discord") ? (
|
|
<MessageSquare className="h-6 w-6 text-muted-foreground" />
|
|
) : service.name
|
|
.toLowerCase()
|
|
.includes("telegram") ? (
|
|
<Send className="h-6 w-6 text-muted-foreground" />
|
|
) : (
|
|
<Bell className="h-6 w-6 text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center space-x-3">
|
|
<h4 className="text-lg font-medium text-foreground capitalize">
|
|
{service.name}
|
|
</h4>
|
|
<div className="flex items-center space-x-2">
|
|
<div className={`w-2 h-2 rounded-full ${
|
|
service.enabled && service.configured
|
|
? 'bg-green-500'
|
|
: service.enabled
|
|
? 'bg-amber-500'
|
|
: 'bg-muted-foreground'
|
|
}`} />
|
|
<span className="text-sm text-muted-foreground">
|
|
{service.enabled && service.configured
|
|
? 'Active'
|
|
: service.enabled
|
|
? 'Needs Configuration'
|
|
: 'Disabled'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
{service.name.toLowerCase().includes("discord") ? (
|
|
<DiscordConfigDrawer settings={notificationSettings} />
|
|
) : service.name.toLowerCase().includes("telegram") ? (
|
|
<TelegramConfigDrawer settings={notificationSettings} />
|
|
) : null}
|
|
|
|
<Button
|
|
onClick={() => handleDeleteService(service.name)}
|
|
disabled={deleteServiceMutation.isPending}
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Notification Filters */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Filter className="h-5 w-5 text-primary" />
|
|
<span>Notification Filters</span>
|
|
</CardTitle>
|
|
<NotificationFiltersDrawer settings={notificationSettings} />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{notificationSettings?.filters ? (
|
|
<div className="space-y-4">
|
|
<div className="bg-muted rounded-md p-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label className="text-xs font-medium text-muted-foreground mb-2 block">
|
|
Case Insensitive Filters
|
|
</Label>
|
|
<div className="min-h-[2rem] flex flex-wrap gap-1">
|
|
{notificationSettings.filters.case_insensitive.length > 0 ? (
|
|
notificationSettings.filters.case_insensitive.map((filter, index) => (
|
|
<span
|
|
key={index}
|
|
className="inline-flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded text-xs"
|
|
>
|
|
{filter}
|
|
</span>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">None</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs font-medium text-muted-foreground mb-2 block">
|
|
Case Sensitive Filters
|
|
</Label>
|
|
<div className="min-h-[2rem] flex flex-wrap gap-1">
|
|
{notificationSettings.filters.case_sensitive &&
|
|
notificationSettings.filters.case_sensitive.length > 0 ? (
|
|
notificationSettings.filters.case_sensitive.map((filter, index) => (
|
|
<span
|
|
key={index}
|
|
className="inline-flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded text-xs"
|
|
>
|
|
{filter}
|
|
</span>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">None</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Filters determine which transaction descriptions will trigger notifications.
|
|
Add terms to exclude transactions containing those words.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<Filter className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-foreground mb-2">
|
|
No notification filters configured
|
|
</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
Set up filters to control which transactions trigger notifications.
|
|
</p>
|
|
<NotificationFiltersDrawer settings={notificationSettings} />
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|