diff --git a/CHANGELOG.md b/CHANGELOG.md index 97e6a42..6217094 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- Dashboard "Recent Processing Runs" table replaced with a per-account **Mailbox Status** view: each account now shows its last-check status (OK / Error / Pending), relative last-check time, any error message, and lifetime processed/failed counters. The noisy per-run table is gone; full activity history remains available on the Logs page. +- Stats cards updated: "Emails Forwarded Today" → "Emails Processed" (all-time total from account records); "Errors" → "Accounts with Errors" (count of accounts currently showing an error). ### Fixed - Provider logos now appear on the Mail Accounts page: `provider_name` is correctly saved when creating accounts via the provider wizard and propagated through backend/frontend schemas. - Fetch-emails button now shows a text label ("Fetch"), a descriptive tooltip, a "Fetching…" loading state, and a brief green "Queued!" confirmation after the action completes. diff --git a/docs/TODO.md b/docs/TODO.md index a8862f8..167c304 100644 --- a/docs/TODO.md +++ b/docs/TODO.md @@ -4,6 +4,7 @@ Comprehensive task breakdown for repository improvements and production readines ## ✅ Recently Completed +- [x] **Dashboard redesign**: Replaced noisy "Recent Processing Runs" table with a per-account "Mailbox Status" view showing last-check status (OK/Error/Pending), relative timestamp, error messages, and lifetime counters. Stats cards updated to show all-time processed count and accounts-with-errors count. - [x] **Provider logos now saved on account creation**: `provider_name` field added to `MailAccountCreate` and `MailAccountUpdate` schemas (backend and frontend). `ProviderWizard` now passes `provider_name` in its `onSelect` callback; `AddMailAccountModal` stores it so logos are displayed correctly on the accounts page. - [x] **Fetch button UX improvements**: The "fetch emails" button on the accounts page now shows a "Fetch" text label for clarity, a tooltip explaining its purpose, a spinning "Fetching…" state during the API call, and a brief green "Queued!" confirmation after success. diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx index 07b77a4..5e5f74e 100644 --- a/frontend/src/app/dashboard/page.tsx +++ b/frontend/src/app/dashboard/page.tsx @@ -3,38 +3,44 @@ import { AuthGuard } from '@/components/AuthGuard'; import { DashboardLayout } from '@/components/DashboardLayout'; import { useQuery } from '@tanstack/react-query'; -import { mailAccountsApi, processingRunsApi } from '@/lib/api'; +import { mailAccountsApi, MailAccount } from '@/lib/api'; import Link from 'next/link'; -import { - Mail, - Send, - CheckCircle, +import { + Mail, + Send, + CheckCircle, AlertCircle, - TrendingUp, - Clock + Clock, + XCircle, + AlertTriangle, + Inbox, } from 'lucide-react'; +function formatRelative(iso?: string | null): string { + if (!iso) return 'Never'; + const diff = Date.now() - new Date(iso).getTime(); + const minutes = Math.floor(diff / 60000); + if (minutes < 1) return 'Just now'; + if (minutes < 60) return `${minutes}m ago`; + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours}h ago`; + return `${Math.floor(hours / 24)}d ago`; +} + interface StatCardProps { title: string; value: string | number; icon: React.ComponentType<{ className?: string }>; iconColor: string; - trend?: string; } -function StatCard({ title, value, icon: Icon, iconColor, trend }: StatCardProps) { +function StatCard({ title, value, icon: Icon, iconColor }: StatCardProps) { return (

{title}

{value}

- {trend && ( -
- - {trend} -
- )}
@@ -44,27 +50,78 @@ function StatCard({ title, value, icon: Icon, iconColor, trend }: StatCardProps) ); } +function AccountStatusRow({ account }: { account: MailAccount }) { + const hasError = !!account.last_error_message; + const lastChecked = account.last_check_at; + + return ( +
+
+ {/* Left: name + email */} +
+ +
+

{account.name}

+

{account.email_address}

+
+
+ + {/* Right: status badge + last check */} +
+ {hasError ? ( + + + Error + + ) : lastChecked ? ( + + + OK + + ) : ( + + + Pending + + )} +

+ {formatRelative(lastChecked)} +

+
+
+ + {/* Error message */} + {hasError && ( +
+ +

{account.last_error_message}

+
+ )} + + {/* Lifetime counters (only when there's activity) */} + {(account.total_emails_processed > 0 || account.total_emails_failed > 0) && ( +
+ {account.total_emails_processed.toLocaleString()} processed + {account.total_emails_failed > 0 && ( + {account.total_emails_failed.toLocaleString()} failed + )} +
+ )} +
+ ); +} + export default function DashboardPage() { - const { data: accounts } = useQuery({ + const { data: accounts, isLoading: accountsLoading } = useQuery({ queryKey: ['mail-accounts'], queryFn: mailAccountsApi.list, }); - const { data: runs, isLoading: runsLoading } = useQuery({ - queryKey: ['processing-runs'], - queryFn: () => processingRunsApi.list({ page: 1, page_size: 10 }), - }); - const stats = { totalAccounts: accounts?.length || 0, activeAccounts: accounts?.filter((a) => a.is_enabled).length || 0, - emailsToday: runs?.items - ?.filter((r) => { - const today = new Date().toDateString(); - return new Date(r.started_at).toDateString() === today; - }) - .reduce((sum, r) => sum + r.emails_forwarded, 0) || 0, - errors: runs?.items?.filter((r) => r.emails_failed > 0).length || 0, + totalProcessed: accounts?.reduce((sum, a) => sum + a.total_emails_processed, 0) || 0, + accountsWithErrors: accounts?.filter((a) => !!a.last_error_message).length || 0, }; return ( @@ -80,8 +137,8 @@ export default function DashboardPage() { iconColor="bg-blue-500" /> @@ -92,101 +149,44 @@ export default function DashboardPage() { iconColor="bg-purple-500" /> 0 ? 'bg-red-500' : 'bg-gray-400'} />
- {/* Recent Processing Runs */} + {/* Mailbox Status Overview */}
-

Recent Processing Runs

+

Mailbox Status

- View all logs → + View activity & history →
-
- {runsLoading ? ( -
-
-
- ) : runs && runs.items && runs.items.length > 0 ? ( - - - - - - - - - - - - - {runs.items.map((run) => { - const account = accounts?.find((a) => a.id === run.mail_account_id); - return ( - - - - - - - - - ); - })} - -
- Account - - Started At - - Status - - Fetched - - Forwarded - - Errors -
- {run.account_name || account?.name || `Account ${run.mail_account_id}`} - -
- - {new Date(run.started_at).toLocaleString()} -
- 		- - {run.status} - - - {run.emails_fetched} - - {run.emails_forwarded} - - {run.emails_failed > 0 ? ( - {run.emails_failed} - ) : ( - 0 - )} -
- ) : ( -
-

No processing runs yet

-
- )} -
+ + {accountsLoading ? ( +
+
+
+ ) : accounts && accounts.length > 0 ? ( +
+ {accounts.map((account) => ( + + ))} +
+ ) : ( +
+ +

No mail accounts configured yet.

+ + Add your first account → + +
+ )}