mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-11 17:22:18 +00:00
feat: add notifications view and update branding
- Add complete notifications management view with: - Service status display (Discord, Telegram) - Test notification functionality - Service management (delete/disable) - Filter settings display (case sensitive/insensitive) - Update API types to match current backend structure - Fix NotificationFilters type (remove deprecated fields) - Update page title from 'Vite + React + TS' to 'Leggen' - Replace Vite favicon with custom Leggen favicon - Add notifications tab to main navigation - Ensure full API compatibility with current backend
This commit is contained in:
Elisiário Couto
committed by
Elisiário Couto
Elisiário Couto
parent
957099786c
commit
abf39abe74
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React + TS</title>
|
<title>Leggen</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
4
frontend/public/favicon.svg
Normal file
4
frontend/public/favicon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||||
|
<rect width="32" height="32" rx="6" fill="#3B82F6"/>
|
||||||
|
<path d="M8 24V8h6c2.2 0 4 1.8 4 4v4c0 2.2-1.8 4-4 4H12v4H8zm4-8h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2v4z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 257 B |
@@ -10,16 +10,18 @@ import {
|
|||||||
List,
|
List,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
Wifi,
|
Wifi,
|
||||||
WifiOff
|
WifiOff,
|
||||||
|
Bell
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { apiClient } from '../lib/api';
|
import { apiClient } from '../lib/api';
|
||||||
import AccountsOverview from './AccountsOverview';
|
import AccountsOverview from './AccountsOverview';
|
||||||
import TransactionsList from './TransactionsList';
|
import TransactionsList from './TransactionsList';
|
||||||
|
import Notifications from './Notifications';
|
||||||
import ErrorBoundary from './ErrorBoundary';
|
import ErrorBoundary from './ErrorBoundary';
|
||||||
import { cn } from '../lib/utils';
|
import { cn } from '../lib/utils';
|
||||||
import type { Account } from '../types/api';
|
import type { Account } from '../types/api';
|
||||||
|
|
||||||
type TabType = 'overview' | 'transactions' | 'analytics';
|
type TabType = 'overview' | 'transactions' | 'analytics' | 'notifications';
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const [activeTab, setActiveTab] = useState<TabType>('overview');
|
const [activeTab, setActiveTab] = useState<TabType>('overview');
|
||||||
@@ -47,6 +49,7 @@ export default function Dashboard() {
|
|||||||
{ name: 'Overview', icon: Home, id: 'overview' as TabType },
|
{ name: 'Overview', icon: Home, id: 'overview' as TabType },
|
||||||
{ name: 'Transactions', icon: List, id: 'transactions' as TabType },
|
{ name: 'Transactions', icon: List, id: 'transactions' as TabType },
|
||||||
{ name: 'Analytics', icon: BarChart3, id: 'analytics' as TabType },
|
{ name: 'Analytics', icon: BarChart3, id: 'analytics' as TabType },
|
||||||
|
{ name: 'Notifications', icon: Bell, id: 'notifications' as TabType },
|
||||||
];
|
];
|
||||||
|
|
||||||
const totalBalance = accounts?.reduce((sum, account) => {
|
const totalBalance = accounts?.reduce((sum, account) => {
|
||||||
@@ -176,6 +179,7 @@ export default function Dashboard() {
|
|||||||
<p className="text-gray-600">Analytics dashboard coming soon...</p>
|
<p className="text-gray-600">Analytics dashboard coming soon...</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{activeTab === 'notifications' && <Notifications />}
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
290
frontend/src/components/Notifications.tsx
Normal file
290
frontend/src/components/Notifications.tsx
Normal file
@@ -0,0 +1,290 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import {
|
||||||
|
Bell,
|
||||||
|
MessageSquare,
|
||||||
|
Send,
|
||||||
|
Trash2,
|
||||||
|
RefreshCw,
|
||||||
|
AlertCircle,
|
||||||
|
CheckCircle,
|
||||||
|
Settings,
|
||||||
|
TestTube
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { apiClient } from '../lib/api';
|
||||||
|
import LoadingSpinner from './LoadingSpinner';
|
||||||
|
import type { NotificationSettings, NotificationService } from '../types/api';
|
||||||
|
|
||||||
|
export default function Notifications() {
|
||||||
|
const [testService, setTestService] = useState('');
|
||||||
|
const [testMessage, setTestMessage] = useState('Test notification from Leggen');
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: settings,
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
|
||||||
|
const testMutation = useMutation({
|
||||||
|
mutationFn: apiClient.testNotification,
|
||||||
|
onSuccess: () => {
|
||||||
|
// Could show a success toast here
|
||||||
|
console.log('Test notification sent successfully');
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
console.error('Failed to send test notification:', error);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteServiceMutation = useMutation({
|
||||||
|
mutationFn: apiClient.deleteNotificationService,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['notificationSettings'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['notificationServices'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (settingsLoading || servicesLoading) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<LoadingSpinner message="Loading notifications..." />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (settingsError || servicesError) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center justify-center text-center">
|
||||||
|
<div>
|
||||||
|
<AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Failed to load notifications</h3>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Unable to connect to the Leggen API. Make sure the server is running on localhost:8000.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
refetchSettings();
|
||||||
|
refetchServices();
|
||||||
|
}}
|
||||||
|
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTestNotification = () => {
|
||||||
|
if (!testService) return;
|
||||||
|
|
||||||
|
testMutation.mutate({
|
||||||
|
service: testService,
|
||||||
|
message: testMessage,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteService = (serviceName: string) => {
|
||||||
|
if (confirm(`Are you sure you want to delete the ${serviceName} notification service?`)) {
|
||||||
|
deleteServiceMutation.mutate(serviceName);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Test Notification Section */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center space-x-2 mb-4">
|
||||||
|
<TestTube className="h-5 w-5 text-blue-600" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Test Notifications</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Service
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={testService}
|
||||||
|
onChange={(e) => setTestService(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">Select a service...</option>
|
||||||
|
{services?.map((service) => (
|
||||||
|
<option key={service.name} value={service.name}>
|
||||||
|
{service.name} {service.enabled ? '(Enabled)' : '(Disabled)'}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={testMessage}
|
||||||
|
onChange={(e) => setTestMessage(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="Test message..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<button
|
||||||
|
onClick={handleTestNotification}
|
||||||
|
disabled={!testService || testMutation.isPending}
|
||||||
|
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
<Send className="h-4 w-4 mr-2" />
|
||||||
|
{testMutation.isPending ? 'Sending...' : 'Send Test Notification'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notification Services */}
|
||||||
|
<div className="bg-white rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Bell className="h-5 w-5 text-blue-600" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Notification Services</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">Manage your notification services</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!services || services.length === 0 ? (
|
||||||
|
<div className="p-6 text-center">
|
||||||
|
<Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No notification services configured</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Configure notification services in your backend to receive alerts.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-gray-200">
|
||||||
|
{services.map((service) => (
|
||||||
|
<div key={service.name} className="p-6 hover:bg-gray-50 transition-colors">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="p-3 bg-gray-100 rounded-full">
|
||||||
|
{service.name.toLowerCase().includes('discord') ? (
|
||||||
|
<MessageSquare className="h-6 w-6 text-gray-600" />
|
||||||
|
) : service.name.toLowerCase().includes('telegram') ? (
|
||||||
|
<Send className="h-6 w-6 text-gray-600" />
|
||||||
|
) : (
|
||||||
|
<Bell className="h-6 w-6 text-gray-600" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-medium text-gray-900 capitalize">
|
||||||
|
{service.name}
|
||||||
|
</h4>
|
||||||
|
<div className="flex items-center space-x-2 mt-1">
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||||
|
service.enabled
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-red-100 text-red-800'
|
||||||
|
}`}>
|
||||||
|
{service.enabled ? (
|
||||||
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="h-3 w-3 mr-1" />
|
||||||
|
)}
|
||||||
|
{service.enabled ? 'Enabled' : 'Disabled'}
|
||||||
|
</span>
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||||
|
service.configured
|
||||||
|
? 'bg-blue-100 text-blue-800'
|
||||||
|
: 'bg-yellow-100 text-yellow-800'
|
||||||
|
}`}>
|
||||||
|
{service.configured ? 'Configured' : 'Not Configured'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteService(service.name)}
|
||||||
|
disabled={deleteServiceMutation.isPending}
|
||||||
|
className="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors"
|
||||||
|
title={`Delete ${service.name} service`}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notification Settings */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
|
<div className="flex items-center space-x-2 mb-4">
|
||||||
|
<Settings className="h-5 w-5 text-blue-600" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Notification Settings</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{settings && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium text-gray-700 mb-2">Filters</h4>
|
||||||
|
<div className="bg-gray-50 rounded-md p-4">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
|
Case Insensitive Filters
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-gray-900">
|
||||||
|
{settings.filters.case_insensitive.length > 0
|
||||||
|
? settings.filters.case_insensitive.join(', ')
|
||||||
|
: 'None'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||||
|
Case Sensitive Filters
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-gray-900">
|
||||||
|
{settings.filters.case_sensitive && settings.filters.case_sensitive.length > 0
|
||||||
|
? settings.filters.case_sensitive.join(', ')
|
||||||
|
: 'None'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
<p>Configure notification settings through your backend API to customize filters and service configurations.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import type { Account, Transaction, Balance, ApiResponse } from '../types/api';
|
import type { Account, Transaction, Balance, ApiResponse, NotificationSettings, NotificationTest, NotificationService, NotificationServicesResponse } from '../types/api';
|
||||||
|
|
||||||
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';
|
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';
|
||||||
|
|
||||||
@@ -62,6 +62,36 @@ export const apiClient = {
|
|||||||
const response = await api.get<ApiResponse<Transaction>>(`/transactions/${id}`);
|
const response = await api.get<ApiResponse<Transaction>>(`/transactions/${id}`);
|
||||||
return response.data.data;
|
return response.data.data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Get notification settings
|
||||||
|
getNotificationSettings: async (): Promise<NotificationSettings> => {
|
||||||
|
const response = await api.get<ApiResponse<NotificationSettings>>('/notifications/settings');
|
||||||
|
return response.data.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update notification settings
|
||||||
|
updateNotificationSettings: async (settings: NotificationSettings): Promise<NotificationSettings> => {
|
||||||
|
const response = await api.put<ApiResponse<NotificationSettings>>('/notifications/settings', settings);
|
||||||
|
return response.data.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Test notification
|
||||||
|
testNotification: async (test: NotificationTest): Promise<void> => {
|
||||||
|
await api.post('/notifications/test', test);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get notification services
|
||||||
|
getNotificationServices: async (): Promise<NotificationService[]> => {
|
||||||
|
const response = await api.get<ApiResponse<NotificationServicesResponse>>('/notifications/services');
|
||||||
|
// Convert object to array format
|
||||||
|
const servicesData = response.data.data;
|
||||||
|
return Object.values(servicesData);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Delete notification service
|
||||||
|
deleteNotificationService: async (service: string): Promise<void> => {
|
||||||
|
await api.delete(`/notifications/settings/${service}`);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default apiClient;
|
export default apiClient;
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ export function formatCurrency(amount: number, currency: string = 'EUR'): string
|
|||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: validCurrency,
|
currency: validCurrency,
|
||||||
}).format(amount);
|
}).format(amount);
|
||||||
} catch (error) {
|
} catch {
|
||||||
// Fallback if currency is still invalid
|
// Fallback if currency is still invalid
|
||||||
console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
|
console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
|
||||||
return new Intl.NumberFormat('en-US', {
|
return new Intl.NumberFormat('en-US', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: 'EUR',
|
currency: 'EUR',
|
||||||
|
|||||||
@@ -86,3 +86,42 @@ export interface PaginatedResponse<T> {
|
|||||||
per_page: number;
|
per_page: number;
|
||||||
total_pages: number;
|
total_pages: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Notification types
|
||||||
|
export interface DiscordConfig {
|
||||||
|
webhook: string;
|
||||||
|
enabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TelegramConfig {
|
||||||
|
token: string;
|
||||||
|
chat_id: number;
|
||||||
|
enabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationFilters {
|
||||||
|
case_insensitive: string[];
|
||||||
|
case_sensitive?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationSettings {
|
||||||
|
discord?: DiscordConfig;
|
||||||
|
telegram?: TelegramConfig;
|
||||||
|
filters: NotificationFilters;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationTest {
|
||||||
|
service: string;
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationService {
|
||||||
|
name: string;
|
||||||
|
enabled: boolean;
|
||||||
|
configured: boolean;
|
||||||
|
active?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationServicesResponse {
|
||||||
|
[serviceName: string]: NotificationService;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user