nikdoof/leggen
1
1
Fork 0
mirror of https://github.com/elisiariocouto/leggen.git synced 2025-12-11 16:12:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add notifications view and update branding

Browse Source 
- 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
2025-09-09 17:13:48 +01:00
committed by Elisiário Couto
parent 957099786c
commit abf39abe74
7 changed files with 375 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<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" />
<title>Vite + React + TS</title>
<title>Leggen</title>
</head>
<body>
<div id="root"></div>

4
frontend/public/favicon.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 257 B

8
frontend/src/components/Dashboard.tsx
View File

@@ -10,16 +10,18 @@ import {
List,
BarChart3,
Wifi,
WifiOff
WifiOff,
Bell
} from 'lucide-react';
import { apiClient } from '../lib/api';
import AccountsOverview from './AccountsOverview';
import TransactionsList from './TransactionsList';
import Notifications from './Notifications';
import ErrorBoundary from './ErrorBoundary';
import { cn } from '../lib/utils';
import type { Account } from '../types/api';
type TabType = 'overview' | 'transactions' | 'analytics';
type TabType = 'overview' | 'transactions' | 'analytics' | 'notifications';
export default function Dashboard() {
const [activeTab, setActiveTab] = useState<TabType>('overview');
@@ -47,6 +49,7 @@ export default function Dashboard() {
{ name: 'Overview', icon: Home, id: 'overview' as TabType },
{ name: 'Transactions', icon: List, id: 'transactions' as TabType },
{ name: 'Analytics', icon: BarChart3, id: 'analytics' as TabType },
{ name: 'Notifications', icon: Bell, id: 'notifications' as TabType },
];
const totalBalance = accounts?.reduce((sum, account) => {
@@ -176,6 +179,7 @@ export default function Dashboard() {
<p className="text-gray-600">Analytics dashboard coming soon...</p>
</div>
)}
{activeTab === 'notifications' && <Notifications />}
</ErrorBoundary>
</main>
</div>

290
frontend/src/components/Notifications.tsx Normal file
View 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>
);
}

32
frontend/src/lib/api.ts
View File

@@ -1,5 +1,5 @@
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';
@@ -62,6 +62,36 @@ export const apiClient = {
const response = await api.get<ApiResponse<Transaction>>(`/transactions/${id}`);
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;

6
frontend/src/lib/utils.ts
View File

@@ -13,9 +13,9 @@ export function formatCurrency(amount: number, currency: string = 'EUR'): string
style: 'currency',
currency: validCurrency,
}).format(amount);
} catch (error) {
// Fallback if currency is still invalid
console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
} catch {
// Fallback if currency is still invalid
console.warn(`Invalid currency code: ${currency}, falling back to EUR`);
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'EUR',

39
frontend/src/types/api.ts
View File

@@ -86,3 +86,42 @@ export interface PaginatedResponse<T> {
per_page: 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;
}