{loading ? (
- Loading bills...
+ Loading…
- ) : results.length > 0 ? (
-
- {results.map(bill => (
-
-
-
-
-
-
-
- ))}
+ ) : !hasResults ? (
+
+ No results.
) : (
-
- No bills found.
-
+ <>
+ {commandResults.length > 0 && (
+
+
+ Commands
+
+
+ {commandResults.map(cmd => (
+
+ ))}
+
+
+ )}
+
+ {billResults.length > 0 && (
+
+ {commandResults.length > 0 && (
+
+ Bills
+
+ )}
+
+ {billResults.map(bill => (
+
+ ))}
+
+
+ )}
+
)}
- Enter opens Bills
+ Enter to open · Tab to focus
{shortcutLabel()}
diff --git a/client/components/admin/AddUserCard.jsx b/client/components/admin/AddUserCard.jsx
new file mode 100644
index 0000000..ccb2c92
--- /dev/null
+++ b/client/components/admin/AddUserCard.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+export default function AddUserCard({ onCreated }) {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleCreate = async (e) => {
+ e.preventDefault();
+ setError('');
+
+ if (password.length < 8) {
+ const msg = 'Password must be at least 8 characters.';
+ setError(msg);
+ toast.error(msg);
+ return;
+ }
+
+ setLoading(true);
+ try {
+ await api.createUser({ username, password });
+ toast.success(`User "${username}" created.`);
+ setUsername('');
+ setPassword('');
+ setError('');
+ onCreated();
+ } catch (err) {
+ const errorMessage = err.message || 'Failed to create user.';
+ setError(errorMessage);
+ toast.error(errorMessage);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+ Add User
+
+
+
+
+
+ );
+}
diff --git a/client/components/admin/AuthMethodsCard.jsx b/client/components/admin/AuthMethodsCard.jsx
new file mode 100644
index 0000000..aac86fc
--- /dev/null
+++ b/client/components/admin/AuthMethodsCard.jsx
@@ -0,0 +1,344 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { FieldRow, Toggle } from './adminShared';
+
+const AUTHENTIK_ICON_URL = '/img/auth.png';
+
+function defaultOidcRedirectUri() {
+ if (typeof window === 'undefined') return '';
+ return `${window.location.origin}/api/auth/oidc/callback`;
+}
+
+function looksLikeOidcEndpoint(url) {
+ const value = String(url || '').toLowerCase();
+ return /\/(?:authorize|token|userinfo|jwks|certs)\/?$/.test(value);
+}
+
+export default function AuthMethodsCard() {
+ const [data, setData] = useState(null);
+ const [form, setForm] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [testingOidc, setTestingOidc] = useState(false);
+ const [oidcTest, setOidcTest] = useState(null);
+
+ const load = useCallback(async () => {
+ try {
+ const d = await api.authModeConfig();
+ setData(d);
+ setForm({
+ local_login_enabled: d.local_login_enabled !== false,
+ oidc_login_enabled: !!d.oidc_login_enabled,
+ oidc_provider_name: d.oidc_provider_name || 'authentik',
+ oidc_issuer_url: d.oidc_issuer_url || '',
+ oidc_client_id: d.oidc_client_id || '',
+ oidc_client_secret: '',
+ oidc_client_secret_clear: false,
+ oidc_token_auth_method: d.oidc_token_auth_method || 'client_secret_basic',
+ oidc_redirect_uri: d.oidc_redirect_uri || defaultOidcRedirectUri(),
+ oidc_scopes: d.oidc_scopes || 'openid email profile groups',
+ oidc_auto_provision: d.oidc_auto_provision !== false,
+ oidc_admin_group: d.oidc_admin_group || '',
+ oidc_default_role: d.oidc_default_role || 'user',
+ });
+ } catch (err) {
+ toast.error(err.message || 'Failed to load auth settings.');
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => { load(); }, [load]);
+
+ const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
+
+ async function handleSave() {
+ setSaving(true);
+ try {
+ const d = await api.setAuthMode(form);
+ setData(d);
+ setForm({
+ local_login_enabled: d.local_login_enabled !== false,
+ oidc_login_enabled: !!d.oidc_login_enabled,
+ oidc_provider_name: d.oidc_provider_name || 'authentik',
+ oidc_issuer_url: d.oidc_issuer_url || '',
+ oidc_client_id: d.oidc_client_id || '',
+ oidc_client_secret: '',
+ oidc_client_secret_clear: false,
+ oidc_token_auth_method: d.oidc_token_auth_method || 'client_secret_basic',
+ oidc_redirect_uri: d.oidc_redirect_uri || defaultOidcRedirectUri(),
+ oidc_scopes: d.oidc_scopes || 'openid email profile groups',
+ oidc_auto_provision: d.oidc_auto_provision !== false,
+ oidc_admin_group: d.oidc_admin_group || '',
+ oidc_default_role: d.oidc_default_role || 'user',
+ });
+ toast.success('Auth method settings saved.');
+ } catch (err) {
+ toast.error(err.message || 'Failed to save auth method settings.');
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ async function handleTestOidc() {
+ setTestingOidc(true);
+ setOidcTest(null);
+ try {
+ const result = await api.testOidcConfig(form);
+ setOidcTest(result);
+ toast.success('authentik configuration test passed.');
+ } catch (err) {
+ const result = err.data || { ok: false, error: err.message || 'OIDC configuration test failed.' };
+ setOidcTest(result);
+ toast.error(result.error || 'OIDC configuration test failed.');
+ } finally {
+ setTestingOidc(false);
+ }
+ }
+
+ if (loading || !form) {
+ return (
+
+
+ Loading auth settings…
+
+
+ );
+ }
+
+ const secretAvailable = form.oidc_client_secret.trim()
+ ? true
+ : form.oidc_client_secret_clear
+ ? false
+ : !!data?.oidc_client_secret_set;
+ const oidcConfigured = !!(
+ form.oidc_issuer_url.trim() &&
+ form.oidc_client_id.trim() &&
+ secretAvailable &&
+ form.oidc_redirect_uri.trim()
+ );
+ const adminGroupConfigured = !!form.oidc_admin_group.trim();
+ const wouldLockOut = !form.local_login_enabled && !form.oidc_login_enabled;
+ const cantDisableLocal = !form.local_login_enabled && (!oidcConfigured || !form.oidc_login_enabled || !adminGroupConfigured);
+ const oidcEnabledButIncomplete = form.oidc_login_enabled && !oidcConfigured;
+ const canSave = !wouldLockOut && !cantDisableLocal && !oidcEnabledButIncomplete && !saving;
+ const canTestOidc = oidcConfigured && !testingOidc;
+ const missingFields = [
+ !form.oidc_issuer_url.trim() && 'Issuer URL',
+ !form.oidc_client_id.trim() && 'Client ID',
+ !secretAvailable && 'Client Secret',
+ !form.oidc_redirect_uri.trim() && 'Redirect URI',
+ ].filter(Boolean);
+ const issuerEndpointWarning = looksLikeOidcEndpoint(form.oidc_issuer_url);
+
+ return (
+
+
+
+
+
Authentication Methods
+
+ Control local login and authentik/OIDC. Settings are saved in the database;
+ environment variables only fill blank fields as bootstrap defaults.
+
+
+
+ {wouldLockOut && (
+
+ Cannot disable all login methods; at least one must remain enabled.
+
+ )}
+ {cantDisableLocal && !wouldLockOut && (
+
+ Cannot disable local login without authentik/OIDC configured, enabled, and mapped to an admin group.
+
+ )}
+ {oidcEnabledButIncomplete && (
+
+ authentik/OIDC needs {missingFields.join(', ')} before it can be enabled.
+
+ )}
+ {data?.warnings?.map((w, i) => (
+
{w}
+ ))}
+
+ set('local_login_enabled', v)} label="Enable local login" />
+ {form.local_login_enabled ? 'Enabled' : 'Disabled'}
+
+
+
+
+
+ set('oidc_login_enabled', v)} label="Enable OIDC login" />
+
+ {!oidcConfigured ? 'Not fully configured' : form.oidc_login_enabled ? 'Enabled' : 'Disabled'}
+
+
+
+
+
+
+
+
authentik / OIDC configuration
+
+
+
+ set('oidc_provider_name', e.target.value)} placeholder="authentik" className="max-w-xs h-8 text-sm" />
+
+
+
+
+
set('oidc_issuer_url', e.target.value)}
+ placeholder="https://yourURL.com/application/o/bills/.well-known/openid-configuration"
+ className="max-w-xl h-8 text-sm"
+ />
+
+ Use the authentik provider issuer URL or full discovery URL, for example https://yourURL.com/application/o/bills/.well-known/openid-configuration.
+
+ {issuerEndpointWarning && (
+
+ This looks like an authorization endpoint. In authentik, copy the provider issuer or OpenID Configuration URL.
+
+ )}
+
+
+
+ set('oidc_client_id', e.target.value)} placeholder="authentik client ID" className="max-w-xl h-8 text-sm" />
+
+
+
+
+
+
+
+
+
+
+ Advanced. Keep client_secret_basic unless your authentik provider explicitly requires client_secret_post.
+
+
+
+
+
+
+ set('oidc_redirect_uri', e.target.value)} placeholder={defaultOidcRedirectUri()} className="h-8 text-sm" />
+
+
+
Add this exact URL to the Redirect URIs allowed by authentik.
+
+
+
+ set('oidc_scopes', e.target.value)} placeholder="openid email profile groups" className="max-w-xl h-8 text-sm" />
+
+
+
+
+
set('oidc_admin_group', e.target.value)} placeholder="e.g. bill-tracker-admins" className="max-w-sm h-8 text-sm" />
+
Only users in this authentik group become app admins. Admin is never granted by default.
+
+
+
+
+
+ set('oidc_auto_provision', v)} label="Auto-provision users" />
+ {form.oidc_auto_provision ? 'Enabled' : 'Disabled'}
+
+
When enabled, valid authentik users are created in this app on first login.
+
+
+
+
+
+ Admin role only via admin group.
+
+
+
+ {data?.oidc_env_fallback_used && (
+
+ One or more blank database fields are currently using environment fallback values. Saving values here takes precedence.
+
+ )}
+
+ {oidcTest && (
+
+ {oidcTest.ok
+ ? `Configuration test passed for ${oidcTest.issuer || form.oidc_issuer_url}.`
+ : oidcTest.error || 'Configuration test failed.'}
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/client/components/admin/BackupManagementCard.jsx b/client/components/admin/BackupManagementCard.jsx
new file mode 100644
index 0000000..fa31a6d
--- /dev/null
+++ b/client/components/admin/BackupManagementCard.jsx
@@ -0,0 +1,381 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Database, Download, Play, RefreshCw, RotateCcw, Trash2, Upload } from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { cn, fmtBytes } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import {
+ Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@/components/ui/select';
+import {
+ AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
+ AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
+} from '@/components/ui/alert-dialog';
+import { SectionHeading, Toggle, formatDateTime, BackupTypeBadge } from './adminShared';
+
+const DEFAULT_SETTINGS = {
+ enabled: false,
+ frequency: 'daily',
+ time: '02:00',
+ retention_count: 14,
+ last_run_at: null,
+ next_run_at: null,
+ last_error: null,
+};
+
+export default function BackupManagementCard() {
+ const [backups, setBackups] = useState([]);
+ const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+ const [loading, setLoading] = useState(true);
+ const [busy, setBusy] = useState('');
+ const [restoreTarget, setRestoreTarget] = useState(null);
+ const [deleteTarget, setDeleteTarget] = useState(null);
+
+ const load = useCallback(async () => {
+ setLoading(true);
+ try {
+ const [backupData, settingsData] = await Promise.all([
+ api.adminBackups(),
+ api.adminBackupSettings(),
+ ]);
+ setBackups(backupData.backups || []);
+ setSettings({ ...DEFAULT_SETTINGS, ...settingsData });
+ } catch (err) {
+ toast.error(err.message || 'Failed to load backups.');
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => { load(); }, [load]);
+
+ const latest = backups[0];
+ const setSchedule = (key, value) => setSettings(prev => ({ ...prev, [key]: value }));
+
+ async function handleCreate() {
+ setBusy('create');
+ try {
+ await api.createAdminBackup();
+ toast.success('Backup created.');
+ await load();
+ } catch (err) {
+ toast.error(err.message || 'Failed to create backup.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ async function handleDownload(backup) {
+ setBusy(`download:${backup.id}`);
+ try {
+ const { blob, filename } = await api.downloadAdminBackup(backup.id);
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = filename || backup.id;
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ URL.revokeObjectURL(url);
+ } catch (err) {
+ toast.error(err.message || 'Failed to download backup.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ async function handleImport(e) {
+ const file = e.target.files?.[0];
+ e.target.value = '';
+ if (!file) return;
+
+ setBusy('import');
+ try {
+ await api.importAdminBackup(file);
+ toast.success('Backup imported.');
+ await load();
+ } catch (err) {
+ toast.error(err.message || 'Failed to import backup.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ async function handleRestore() {
+ if (!restoreTarget) return;
+ setBusy(`restore:${restoreTarget.id}`);
+ try {
+ const result = await api.restoreAdminBackup(restoreTarget.id);
+ toast.success(`Database restored. Pre-restore backup: ${result.pre_restore_backup}`);
+ setRestoreTarget(null);
+ await load();
+ } catch (err) {
+ toast.error(err.message || 'Failed to restore backup.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ async function handleDelete() {
+ if (!deleteTarget) return;
+ setBusy(`delete:${deleteTarget.id}`);
+ try {
+ await api.deleteAdminBackup(deleteTarget.id);
+ toast.success('Backup deleted.');
+ setDeleteTarget(null);
+ await load();
+ } catch (err) {
+ toast.error(err.message || 'Failed to delete backup.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ async function handleSaveSettings() {
+ setBusy('settings');
+ try {
+ const saved = await api.saveAdminBackupSettings({
+ enabled: !!settings.enabled,
+ frequency: settings.frequency,
+ time: settings.time,
+ retention_count: parseInt(settings.retention_count, 10) || 14,
+ });
+ setSettings({ ...DEFAULT_SETTINGS, ...saved });
+ toast.success('Backup schedule saved.');
+ } catch (err) {
+ toast.error(err.message || 'Failed to save backup schedule.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ async function handleRunScheduledNow() {
+ setBusy('run-scheduled');
+ try {
+ await api.runScheduledBackupNow();
+ toast.success('Scheduled backup created.');
+ await load();
+ } catch (err) {
+ toast.error(err.message || 'Failed to run scheduled backup.');
+ } finally {
+ setBusy('');
+ }
+ }
+
+ if (loading) {
+ return
Loading backups…;
+ }
+
+ return (
+ <>
+
+
+
+
+
Database Backups
+
+ Admin-only SQLite backup, import, download, restore, and schedule controls.
+
+
+
+ {settings.last_error ? 'Attention' : 'Ready'}
+
+
+ {[
+ ['Managed backups', backups.length],
+ ['Latest backup', latest ? formatDateTime(latest.modified_at) : '—'],
+ ['Latest size', latest ? fmtBytes(latest.size_bytes) : '—'],
+ ['Scheduled', settings.enabled ? `${settings.frequency} ${settings.time}` : 'Disabled'],
+ ].map(([label, value]) => (
+
+ ))}
+
+ {settings.last_error}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ | Backup |
+ Type |
+ Modified |
+ Size |
+ Checksum |
+ |
+
+
+
+ {backups.map(backup => (
+
+ | {backup.id} |
+ |
+ {formatDateTime(backup.modified_at)} |
+ {fmtBytes(backup.size_bytes)} |
+
+ {backup.checksum || '—'}
+ |
+
+
+
+
+
+
+ |
+
+ ))}
+ {!backups.length && (
+
+ | No managed backups yet. |
+
+ )}
+
+
+
+
+
+
Scheduled Backups
+
+ Scheduled runs create managed backups and only apply retention to scheduled backups.
+
+
+
setSchedule('enabled', v)} label="Enable scheduled backups" />
+
+
+
+
+
+
+
+
+
+ setSchedule('time', e.target.value)} />
+
+
+
+ setSchedule('retention_count', e.target.value)} />
+
+
+
+
+ {formatDateTime(settings.next_run_at)}
+
+
+
+
+
+
Last run: {formatDateTime(settings.last_run_at)}
+
Last error: {settings.last_error || '—'}
+
+
+
+
+
+
+
+
+
{ if (!open) setRestoreTarget(null); }}>
+
+
+ Restore this database backup?
+
+ This replaces the live database with {restoreTarget?.id}.
+ A pre-restore backup will be created first. Run this during a quiet maintenance window.
+
+
+
+ Cancel
+
+ {busy.startsWith('restore:') ? 'Restoring…' : 'Restore Database'}
+
+
+
+
+
+
{ if (!open) setDeleteTarget(null); }}>
+
+
+ Delete this backup?
+
+ This permanently deletes {deleteTarget?.id}.
+ The live database is not affected.
+
+
+
+ Cancel
+
+ {busy.startsWith('delete:') ? 'Deleting…' : 'Delete Backup'}
+
+
+
+
+
+ );
+}
diff --git a/client/components/admin/CleanupPanel.jsx b/client/components/admin/CleanupPanel.jsx
new file mode 100644
index 0000000..68ba7dc
--- /dev/null
+++ b/client/components/admin/CleanupPanel.jsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Play, Wrench } from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { FieldRow, Toggle, formatDateTime } from './adminShared';
+
+export default function CleanupPanel() {
+ const [status, setStatus] = useState(null);
+ const [form, setForm] = useState({
+ import_sessions_enabled: true,
+ temp_exports_enabled: true,
+ temp_export_max_age_hours: 2,
+ backup_partials_enabled: true,
+ import_history_enabled: false,
+ import_history_max_age_days: 365,
+ });
+ const [saving, setSaving] = useState(false);
+ const [running, setRunning] = useState(false);
+ const [loading, setLoading] = useState(true);
+
+ const load = useCallback(async () => {
+ try {
+ const data = await api.adminCleanup();
+ setStatus(data);
+ if (data.settings) setForm(data.settings);
+ } catch (err) {
+ toast.error(err.message || 'Failed to load cleanup settings.');
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => { load(); }, [load]);
+
+ const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
+
+ async function handleSave() {
+ setSaving(true);
+ try {
+ const next = await api.saveAdminCleanup(form);
+ if (next) setForm(next);
+ toast.success('Cleanup settings saved.');
+ } catch (err) {
+ toast.error(err.message || 'Failed to save cleanup settings.');
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ async function handleRunNow() {
+ setRunning(true);
+ try {
+ const result = await api.runAdminCleanup();
+ setStatus(prev => ({
+ ...prev,
+ last_run_at: result.ran_at,
+ last_result: result.tasks,
+ }));
+ toast.success('Cleanup tasks completed.');
+ } catch (err) {
+ toast.error(err.message || 'Cleanup run failed.');
+ } finally {
+ setRunning(false);
+ }
+ }
+
+ function resultLine(label, task, countKey) {
+ if (!task || task[countKey] == null) return null;
+ return `${label}: ${task[countKey]}`;
+ }
+
+ const resultLines = status?.last_result ? [
+ resultLine('Import sessions pruned', status.last_result.import_sessions, 'pruned'),
+ resultLine('Temp export files removed', status.last_result.temp_export_files, 'removed'),
+ resultLine('Backup partials removed', status.last_result.backup_partials, 'removed'),
+ resultLine('Import history rows pruned', status.last_result.import_history, 'pruned'),
+ ].filter(Boolean) : [];
+
+ if (loading) {
+ return (
+
+
+ Loading cleanup settings…
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
Cleanup / Maintenance
+
+ Automatic daily cleanup: expired import sessions, stale export temp files, orphaned backup partials. Runs at 6:00 AM.
+
+
+
+
Auto
+
+
+
Last Run
+
{status?.last_run_at ? formatDateTime(status.last_run_at) : '—'}
+
+
+
Last Result
+ {resultLines.length > 0 ? (
+
+ {resultLines.map(line => (
+ - {line}
+ ))}
+
+ ) : (
+
No runs recorded yet
+ )}
+
+
+
Task Settings
+ {[
+ ['import_sessions_enabled', 'Prune expired import sessions (24h TTL)'],
+ ['temp_exports_enabled', 'Remove stale SQLite export temp files'],
+ ['backup_partials_enabled', 'Remove orphaned backup .partial / .upload files'],
+ ].map(([key, label]) => (
+
+ set(key, v)} label={label} />
+
+ ))}
+
+
+ set('temp_export_max_age_hours', parseInt(e.target.value, 10) || 2)}
+ disabled={!form.temp_exports_enabled}
+ className="max-w-[120px] h-8 text-sm"
+ />
+
+
+
+ set('import_history_enabled', v)} label="Trim import history rows" />
+
+
+ {form.import_history_enabled && (
+ <>
+
+ set('import_history_max_age_days', parseInt(e.target.value, 10) || 365)}
+ className="max-w-[120px] h-8 text-sm"
+ />
+
+
+ Warning: Import history trimming permanently deletes audit records older than {form.import_history_max_age_days} days. This cannot be undone.
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/client/components/admin/EmailNotifCard.jsx b/client/components/admin/EmailNotifCard.jsx
new file mode 100644
index 0000000..81c626e
--- /dev/null
+++ b/client/components/admin/EmailNotifCard.jsx
@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import {
+ Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@/components/ui/select';
+import { SectionHeading, FieldRow, Toggle } from './adminShared';
+
+export default function EmailNotifCard() {
+ const DEFAULTS = {
+ enabled: false,
+ sender_name: '', sender_address: '',
+ smtp_host: '', smtp_port: '587', smtp_encryption: 'starttls',
+ smtp_self_signed: false,
+ smtp_username: '', smtp_password: '',
+ allow_user_config: false,
+ global_recipient: '',
+ };
+
+ const [cfg, setCfg] = useState(DEFAULTS);
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [showPw, setShowPw] = useState(false);
+ const [testEmail, setTestEmail] = useState('');
+ const [testing, setTesting] = useState(false);
+
+ useEffect(() => {
+ api.notifAdmin()
+ .then(d => setCfg({ ...DEFAULTS, ...d }))
+ .catch(() => {})
+ .finally(() => setLoading(false));
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const set = (k, v) => setCfg(p => ({ ...p, [k]: v }));
+
+ const handleSave = async () => {
+ setSaving(true);
+ try {
+ await api.saveNotifAdmin(cfg);
+ toast.success('Email settings saved.');
+ } catch (err) {
+ toast.error(err.message || 'Failed to save.');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handleTest = async () => {
+ if (!testEmail) { toast.error('Enter a recipient email.'); return; }
+ setTesting(true);
+ try {
+ await api.testEmail({ to: testEmail });
+ toast.success('Test email sent.');
+ } catch (err) {
+ toast.error(err.message || 'Failed to send test email.');
+ } finally {
+ setTesting(false);
+ }
+ };
+
+ if (loading) return
Loading…;
+
+ return (
+
+
+ Email Notifications
+
+
+
+
+
Enable email notifications
+
Configure SMTP to send bill reminders
+
+
set('enabled', v)} label="Enable email notifications" />
+
+ Sender
+
+ set('sender_name', e.target.value)} placeholder="BillTracker" />
+
+
+ set('sender_address', e.target.value)} placeholder="no-reply@example.com" type="email" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Test Email
+
+
+ setTestEmail(e.target.value)}
+ placeholder="you@example.com"
+ type="email"
+ />
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/client/components/admin/LoginModeCard.jsx b/client/components/admin/LoginModeCard.jsx
new file mode 100644
index 0000000..6392937
--- /dev/null
+++ b/client/components/admin/LoginModeCard.jsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import {
+ Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@/components/ui/select';
+import {
+ AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
+ AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
+} from '@/components/ui/alert-dialog';
+
+export default function LoginModeCard({ users }) {
+ const [modeData, setModeData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [selectedUser, setSelectedUser] = useState('');
+
+ const [confirmSingle, setConfirmSingle] = useState(false);
+ const [pendingUserId, setPendingUserId] = useState(null);
+
+ useEffect(() => {
+ api.authModeConfig()
+ .then(d => { setModeData(d); setSelectedUser(d.default_user_id?.toString() || ''); })
+ .catch(() => {})
+ .finally(() => setLoading(false));
+ }, []);
+
+ const doSetMode = async (mode, userId) => {
+ setSaving(true);
+ try {
+ await api.setAuthMode({
+ auth_mode: mode,
+ default_user_id: mode === 'single' ? parseInt(userId, 10) : null,
+ });
+ const d = await api.authModeConfig();
+ setModeData(d);
+ toast.success(mode === 'single' ? 'Single-user mode enabled.' : 'Login requirement restored.');
+ } catch (err) {
+ toast.error(err.message || 'Failed to update auth mode.');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handleRequestSingle = () => {
+ if (!selectedUser) { toast.error('Select a user first.'); return; }
+ setPendingUserId(selectedUser);
+ setConfirmSingle(true);
+ };
+
+ const handleConfirmSingle = () => {
+ setConfirmSingle(false);
+ doSetMode('single', pendingUserId);
+ };
+
+ if (loading) return
Loading…;
+
+ const isMulti = !modeData || modeData.auth_mode === 'multi';
+ const activeUser = users?.find(u => u.id === modeData?.default_user_id);
+ const selectedUsername = users?.find(u => u.id.toString() === selectedUser)?.username ?? selectedUser;
+
+ return (
+ <>
+
+
+
+ Login Mode
+
+ {isMulti ? 'Multi-user' : 'Single-user'}
+
+
+
+
+ {isMulti ? (
+ <>
+
+ Single-user mode bypasses the login screen and automatically signs in as the selected user.
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+ Currently auto-signing in as{' '}
+ {activeUser?.username ?? '—'}.
+ Restoring login requirement will require all users to sign in manually.
+
+
+
+ )}
+
+
+
+
+
+
+ Enable Single-User Mode?
+
+ Anyone who opens the app will be automatically signed in as{' '}
+ {selectedUsername}.
+ The admin login still requires a password.
+
+
+
+ Cancel
+
+ Enable Single-User Mode
+
+
+
+
+
+ );
+}
diff --git a/client/components/admin/OnboardingWizard.jsx b/client/components/admin/OnboardingWizard.jsx
new file mode 100644
index 0000000..7944df2
--- /dev/null
+++ b/client/components/admin/OnboardingWizard.jsx
@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+export default function OnboardingWizard({ onComplete }) {
+ const [step, setStep] = useState(0);
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [confirm, setConfirm] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleCreate = async (e) => {
+ e.preventDefault();
+ setError('');
+
+ let validationError = '';
+ if (password !== confirm) {
+ validationError = 'Passwords do not match.';
+ } else if (password.length < 8) {
+ validationError = 'Password must be at least 8 characters.';
+ }
+
+ if (validationError) {
+ setError(validationError);
+ toast.error(validationError);
+ return;
+ }
+
+ setLoading(true);
+ try {
+ await api.createUser({ username, password });
+ toast.success('User created successfully.');
+ onComplete();
+ } catch (err) {
+ const errorMessage = err.message || 'Failed to create user.';
+ setError(errorMessage);
+ toast.error(errorMessage);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ {[0, 1].map(i => (
+
+ ))}
+
+
+ {step === 0 && (
+
+
+ Welcome, Administrator
+
+ Before creating your first user, please understand what your admin account can and cannot do.
+
+
+
+
+ {[
+ { can: true, text: 'Create and manage user accounts' },
+ { can: true, text: 'Reset user passwords' },
+ { can: true, text: 'Configure email notifications' },
+ { can: true, text: 'Toggle single-user / multi-user mode' },
+ { can: false, text: 'Cannot view bills or financial data' },
+ { can: false, text: 'Cannot access user settings or history' },
+ ].map(({ can, text }) => (
+
+
+ {can ? '✓' : '✗'}
+
+ {text}
+
+ ))}
+
+
+
+
+
+ )}
+
+ {step === 1 && (
+
+
+ Create first user
+
+ This account will be used to access the bill tracker.
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/client/components/admin/UsersTable.jsx b/client/components/admin/UsersTable.jsx
new file mode 100644
index 0000000..ab692fd
--- /dev/null
+++ b/client/components/admin/UsersTable.jsx
@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+import { api } from '@/api';
+import { cn } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import {
+ AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
+ AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
+} from '@/components/ui/alert-dialog';
+
+export default function UsersTable({ users, onRefresh, currentUser }) {
+ const [resetForms, setResetForms] = useState({});
+ const [deleting, setDeleting] = useState(null);
+ const [resetting, setResetting] = useState(null);
+ const [roleUpdating, setRoleUpdating] = useState(null);
+ const [activeUpdating, setActiveUpdating] = useState(null);
+ const [deleteTarget, setDeleteTarget] = useState(null);
+
+ const setReset = (id, v) => setResetForms(p => ({ ...p, [id]: { ...(p[id] || {}), ...v } }));
+ const getForm = (id) => resetForms[id] || { pw: '', open: false };
+
+ const handleReset = async (user) => {
+ const form = getForm(user.id);
+ if (!form.pw || form.pw.length < 8) { toast.error('Password must be at least 8 characters.'); return; }
+ setResetting(user.id);
+ try {
+ await api.resetPassword(user.id, { password: form.pw });
+ toast.success(`Password reset for ${user.username}.`);
+ setReset(user.id, { pw: '', open: false });
+ } catch (err) {
+ toast.error(err.message || 'Failed to reset password.');
+ } finally {
+ setResetting(null);
+ }
+ };
+
+ const handleDelete = async () => {
+ if (!deleteTarget) return;
+ setDeleting(deleteTarget.id);
+ try {
+ await api.deleteUser(deleteTarget.id);
+ toast.success(`User ${deleteTarget.username} deleted.`);
+ setDeleteTarget(null);
+ onRefresh();
+ } catch (err) {
+ toast.error(err.message || 'Failed to delete user.');
+ } finally {
+ setDeleting(null);
+ }
+ };
+
+ const handleRoleChange = async (user, role) => {
+ if (user.role === role) return;
+ setRoleUpdating(user.id);
+ try {
+ await api.updateUserRole(user.id, { role });
+ toast.success(`${user.username} is now ${role === 'admin' ? 'an admin' : 'a user'}.`);
+ onRefresh();
+ } catch (err) {
+ toast.error(err.message || 'Failed to update user role.');
+ } finally {
+ setRoleUpdating(null);
+ }
+ };
+
+ const handleActiveChange = async (user, active) => {
+ setActiveUpdating(user.id);
+ try {
+ await api.updateUserActive(user.id, { active });
+ toast.success(`${user.username} is now ${active ? 'active' : 'inactive'}.`);
+ onRefresh();
+ } catch (err) {
+ toast.error(err.message || 'Failed to update user status.');
+ } finally {
+ setActiveUpdating(null);
+ }
+ };
+
+ return (
+ <>
+
+
+ Users
+
+
+
+
+
+
+ | Username |
+ Role |
+ Status |
+ Password |
+ Reset Password |
+ |
+
+
+
+ {(users || []).map(user => {
+ const form = getForm(user.id);
+ const isSelf = currentUser?.id === user.id;
+ return (
+
+ |
+
+ {user.username}
+ {user.is_default_admin && default admin}
+
+ |
+
+
+ {user.role}
+
+
+ |
+
+
+ |
+
+ {user.must_change_password
+ ? Temporary
+ : Set
+ }
+ |
+
+ {form.open ? (
+
+ setReset(user.id, { pw: e.target.value })}
+ className="h-8 text-sm w-36"
+ />
+
+
+
+ ) : (
+
+ )}
+ |
+
+ {!isSelf && (
+
+ )}
+ |
+
+ );
+ })}
+ {!users?.length && (
+
+ | No users found. |
+
+ )}
+
+
+
+
+
{ if (!open) setDeleteTarget(null); }}>
+
+
+ Delete {deleteTarget?.username}?
+
+ This is permanent in 2026. The user account and all user-owned data will be deleted, including bills,
+ payments, categories, monthly state, monthly starting amounts, imports, import history, and sessions.
+ This cannot be undone from BillTracker.
+
+
+
+ Cancel
+
+ {deleting ? 'Deleting…' : 'Delete User'}
+
+
+
+
+
+ );
+}
diff --git a/client/components/admin/adminShared.jsx b/client/components/admin/adminShared.jsx
new file mode 100644
index 0000000..0c99fb2
--- /dev/null
+++ b/client/components/admin/adminShared.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+
+export function SectionHeading({ children }) {
+ return
{children}
;
+}
+
+export function FieldRow({ label, children }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+export function Toggle({ checked, onChange, label, disabled = false }) {
+ return (
+
+ );
+}
+
+export function formatDateTime(value) {
+ if (!value) return '—';
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return value;
+ return date.toLocaleString();
+}
+
+export function BackupTypeBadge({ type }) {
+ const cls = {
+ manual: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
+ scheduled: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
+ imported: 'bg-violet-500/15 text-violet-400 border-violet-500/20',
+ 'pre-restore': 'bg-amber-500/15 text-amber-400 border-amber-500/20',
+ }[type] || 'bg-muted text-muted-foreground border-border';
+
+ return
{type || 'backup'};
+}
diff --git a/client/components/data/DownloadMyDataSection.jsx b/client/components/data/DownloadMyDataSection.jsx
new file mode 100644
index 0000000..7a44904
--- /dev/null
+++ b/client/components/data/DownloadMyDataSection.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+import { Database, Download, FileSpreadsheet, AlertTriangle, CheckCircle2, XCircle, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { SectionCard } from './dataShared';
+
+const USER_EXPORTS_AVAILABLE = true;
+
+function ExportCard({ icon: Icon, title, description, filename, endpoint }) {
+ const [loading, setLoading] = useState(false);
+
+ const handleDownload = async () => {
+ setLoading(true);
+ try {
+ const res = await fetch(endpoint, { credentials: 'include' });
+ if (!res.ok) {
+ let data = {};
+ try { data = await res.json(); } catch {}
+ throw new Error(data.error || `HTTP ${res.status}`);
+ }
+ const disposition = res.headers.get('Content-Disposition');
+ const match = disposition?.match(/filename="?([^"]+)"?/i);
+ const name = match ? match[1] : filename;
+ const blob = await res.blob();
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url; a.download = name; a.click();
+ URL.revokeObjectURL(url);
+ toast.success(`${title} downloaded.`);
+ } catch (err) {
+ toast.error(err.message || 'Download failed.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const disabled = !USER_EXPORTS_AVAILABLE || loading;
+ return (
+
+
+
+
+
+
+
+
{title}
+ {!USER_EXPORTS_AVAILABLE && (
+
+ Coming soon
+
+ )}
+
+
{description}
+
+
+
+
+
+
+ );
+}
+
+export default function DownloadMyDataSection() {
+ return (
+
+
+
+
+
+
Exports may contain sensitive account metadata (website URLs, usernames, account info). Store exported files securely and avoid sharing them unencrypted.
+
+
+
What's included
+
+ {['Bills','Payments','Categories','Monthly bill state','Monthly starting amounts','History ranges','Notes','Export metadata'].map(i => (
+ -
+ {i}
+
+ ))}
+
+
+
+
What's not included
+
+ {['Passwords','Sessions','Admin settings','Server configuration',"Other users' data",'Full system backup files'].map(i => (
+ -
+ {i}
+
+ ))}
+
+
+
+ );
+}
diff --git a/client/components/data/ImportHistorySection.jsx b/client/components/data/ImportHistorySection.jsx
new file mode 100644
index 0000000..32746b8
--- /dev/null
+++ b/client/components/data/ImportHistorySection.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { RefreshCw, Clock } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { SectionCard, fmt } from './dataShared';
+
+export default function ImportHistorySection({ history, loading, onRefresh }) {
+ if (loading) {
+ return (
+
+ Loading…
+
+ );
+ }
+
+ const rows = history ?? [];
+
+ return (
+
+
+
+ {rows.length === 0 ? 'No imports yet.' : `${rows.length} import${rows.length === 1 ? '' : 's'}`}
+
+
+
+
+
+
+ {['Date','File','Sheet','Parsed','Created','Updated','Skipped','Errors'].map(h => (
+ | {h} |
+ ))}
+
+
+
+ {rows.map(r => (
+
+ |
+ {fmt(r.imported_at)}
+ |
+ {r.source_filename || '—'} |
+ {r.sheet_name || '—'} |
+ {r.rows_parsed} |
+ {r.rows_created} |
+ {r.rows_updated} |
+ {r.rows_skipped} |
+ {r.rows_errored} |
+
+ ))}
+
+
+
+ );
+}
diff --git a/client/components/data/ImportMyDataSection.jsx b/client/components/data/ImportMyDataSection.jsx
new file mode 100644
index 0000000..6a94d31
--- /dev/null
+++ b/client/components/data/ImportMyDataSection.jsx
@@ -0,0 +1,217 @@
+import React, { useState, useRef } from 'react';
+import { toast } from 'sonner';
+import { Database, Upload, AlertTriangle, Loader2 } from 'lucide-react';
+import { api } from '@/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+ AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+ AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { SectionCard, CountPill, fmt, importErrorState } from './dataShared';
+
+export default function ImportMyDataSection({ onHistoryRefresh }) {
+ const fileRef = useRef(null);
+ const [file, setFile] = useState(null);
+ const [preview, setPreview] = useState({ status: 'idle', data: null, error: null });
+ const [applyState, setApplyState] = useState({ status: 'idle', result: null, error: null });
+ const [confirmOpen, setConfirmOpen] = useState(false);
+
+ const reset = () => {
+ setFile(null);
+ setPreview({ status: 'idle', data: null, error: null });
+ setApplyState({ status: 'idle', result: null, error: null });
+ if (fileRef.current) fileRef.current.value = '';
+ };
+
+ const handlePreview = async () => {
+ if (!file) {
+ toast.error('Choose a SQLite data export first.');
+ return;
+ }
+ setPreview({ status: 'loading', data: null, error: null });
+ setApplyState({ status: 'idle', result: null, error: null });
+ try {
+ const data = await api.previewUserDbImport(file);
+ setPreview({ status: 'ready', data, error: null });
+ toast.success('SQLite export preview ready.');
+ } catch (err) {
+ setPreview({ status: 'error', data: null, error: importErrorState(err, 'SQLite import preview failed.') });
+ toast.error(err.message || 'SQLite import preview failed.');
+ }
+ };
+
+ const handleApply = () => {
+ if (!preview.data?.import_session_id) return;
+ setConfirmOpen(true);
+ };
+
+ const handleConfirmImport = async () => {
+ setConfirmOpen(false);
+ setApplyState({ status: 'loading', result: null, error: null });
+ try {
+ const result = await api.applyUserDbImport({
+ import_session_id: preview.data.import_session_id,
+ options: { overwrite: false },
+ });
+ setApplyState({ status: 'done', result, error: null });
+ toast.success('SQLite data import applied.');
+ onHistoryRefresh?.();
+ } catch (err) {
+ setApplyState({ status: 'error', result: null, error: importErrorState(err, 'SQLite import apply failed.') });
+ toast.error(err.message || 'SQLite import apply failed.');
+ }
+ };
+
+ const counts = preview.data?.counts || {};
+ const summary = preview.data?.summary || {};
+
+ return (
+ <>
+
+
+
+
+
+
+
Import a SQLite data export created by this app.
+
+ This is not a full system restore. Existing records are skipped by default, and admin/system data is never imported.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {preview.status === 'error' && (
+
+
+ {preview.error?.message || 'SQLite import preview failed.'}
+ {preview.error?.details?.length > 0 && (
+
+ {preview.error.details.map((d, i) => (
+ - {d.message || d.table || JSON.stringify(d)}
+ ))}
+
+ )}
+
+ )}
+
+ {preview.status === 'ready' && preview.data && (
+
+
+
+
+
Preview ready
+
+ Exported {fmt(preview.data.metadata?.exported_at)} · {preview.data.source_filename || 'SQLite export'}
+
+
+
+ User data only
+
+
+
+
+
+
+
+
+
+
+ {Object.entries(summary).filter(([, v]) => v && typeof v === 'object').map(([key, value]) => (
+
+
{key.replace(/_/g, ' ')}
+
+ create {value.create || 0} · skip {value.skip || 0} · conflict {value.conflict || 0}
+
+
+ ))}
+
+ {preview.data.warnings?.length > 0 && (
+
+ {preview.data.warnings.map((warning, i) => (
+
+ {warning}
+
+ ))}
+
+ )}
+
+
+
+
Review the preview before applying. Nothing is imported until you confirm.
+
+
+
+ )}
+
+ {applyState.status === 'done' && applyState.result && (
+
+
SQLite import applied
+
+
+
+
+
+
+
+ )}
+
+ {applyState.status === 'error' && (
+
+
{applyState.error?.message || 'SQLite import apply failed.'}
+
+ )}
+
+ {/* Import confirmation dialog */}
+
+
+
+ Import SQLite data export?
+
+ Import this SQLite data export into your account? Existing records will be skipped by default.
+
+
+
+ Cancel
+
+ Confirm Import
+
+
+
+
+
+ );
+}
diff --git a/client/components/data/ImportSpreadsheetSection.jsx b/client/components/data/ImportSpreadsheetSection.jsx
new file mode 100644
index 0000000..3e4038c
--- /dev/null
+++ b/client/components/data/ImportSpreadsheetSection.jsx
@@ -0,0 +1,1435 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { toast } from 'sonner';
+import {
+ Upload, FileSpreadsheet, AlertTriangle, CheckCircle2, CheckCheck,
+ Loader2, RefreshCw, ChevronDown, ChevronUp, SkipForward, Plus,
+ List, Building2, ChevronLeft, FileText, XCircle, Sparkles,
+} from 'lucide-react';
+import { api } from '@/api';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import {
+ AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+ AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+ AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { SectionCard, CountPill, fmt, importErrorState } from './dataShared';
+
+function groupRowsBySheet(rows) {
+ const map = new Map();
+ for (const row of rows) {
+ const key = row.sheet_name || '(unknown sheet)';
+ if (!map.has(key)) map.set(key, []);
+ map.get(key).push(row);
+ }
+ return Array.from(map.entries()).map(([name, rows]) => ({ name, rows }));
+}
+
+function initialDecisionFromRecommendation(row) {
+ const rec = row.recommendation || {};
+ const action = rec.action === 'ambiguous' ? null : (rec.action || row.proposed_action || null);
+
+ if (!action || row.requires_user_decision) return { action: null };
+ if (action === 'skip_row') return { action: 'skip_row' };
+ if (action === 'match_existing_bill') {
+ return {
+ action,
+ bill_id: rec.bill_id ?? row.possible_bill_matches?.[0]?.bill_id ?? null,
+ bill_name: null,
+ due_day: rec.due_day ?? null,
+ actual_amount: rec.actual_amount ?? row.detected_amount ?? null,
+ payment_amount: rec.payment_amount ?? row.detected_payment_amount ?? null,
+ payment_date: rec.payment_date ?? row.detected_paid_date ?? null,
+ notes: row.detected_notes ?? null,
+ };
+ }
+ if (action === 'create_new_bill') {
+ return {
+ action,
+ bill_id: null,
+ bill_name: rec.bill_name || row.detected_bill_name || '',
+ category_id: rec.category_id ?? null,
+ due_day: rec.due_day ?? null,
+ expected_amount: rec.expected_amount ?? row.detected_amount ?? null,
+ actual_amount: rec.actual_amount ?? row.detected_amount ?? null,
+ payment_amount: rec.payment_amount ?? row.detected_payment_amount ?? null,
+ payment_date: rec.payment_date ?? row.detected_paid_date ?? null,
+ notes: row.detected_notes ?? null,
+ };
+ }
+ return { action };
+}
+
+function safeRawBillName(row) {
+ const raw = row.raw_values?.find((v) => {
+ const text = String(v || '').trim();
+ if (!text || text.length > 80) return false;
+ if (/^(?:total|subtotal|sum|grand\s*total)$/i.test(text)) return false;
+ if (/^\$?\(?\d[\d,]*(?:\.\d{1,2})?\)?$/.test(text)) return false;
+ if (/^\d{1,2}\/\d{1,2}(?:\/\d{2,4})?$/.test(text)) return false;
+ if (/^\d{4}-\d{2}-\d{2}$/.test(text)) return false;
+ return true;
+ });
+ return raw ? String(raw).trim() : '';
+}
+
+function buildCreateNewDecision(row, currentDecision = {}) {
+ const rec = row.recommendation || {};
+ const billName = currentDecision.bill_name
+ || row.detected_bill_name
+ || rec.bill_name
+ || safeRawBillName(row);
+
+ return {
+ ...currentDecision,
+ action: 'create_new_bill',
+ previous_match_bill_id: currentDecision.bill_id ?? currentDecision.previous_match_bill_id ?? rec.bill_id ?? row.possible_bill_matches?.[0]?.bill_id ?? null,
+ bill_id: null,
+ bill_name: billName,
+ category_id: currentDecision.category_id ?? rec.category_id ?? null,
+ due_day: currentDecision.due_day ?? rec.due_day ?? null,
+ expected_amount: currentDecision.expected_amount ?? rec.expected_amount ?? row.detected_amount ?? null,
+ actual_amount: currentDecision.actual_amount ?? rec.actual_amount ?? row.detected_amount ?? null,
+ payment_amount: currentDecision.payment_amount ?? rec.payment_amount ?? row.detected_payment_amount ?? null,
+ payment_date: currentDecision.payment_date ?? rec.payment_date ?? row.detected_paid_date ?? null,
+ notes: currentDecision.notes ?? row.detected_notes ?? null,
+ };
+}
+
+function buildInitialDecisions(rows) {
+ const d = {};
+ for (const row of rows) {
+ const hasError = row.errors?.length > 0;
+ if (hasError || row.proposed_action === 'skip_row') {
+ d[row.row_id] = { action: 'skip_row' };
+ } else {
+ d[row.row_id] = initialDecisionFromRecommendation(row);
+ }
+ }
+ return d;
+}
+
+function isDecisionComplete(action, decision) {
+ if (!action) return false;
+ if (action === 'skip_row') return true;
+ if (action === 'create_new_bill') return !!(decision?.bill_name?.trim());
+ if (['match_existing_bill', 'update_monthly_state', 'add_monthly_note', 'create_payment'].includes(action)) {
+ return !!decision?.bill_id;
+ }
+ return true;
+}
+
+// ─── Badges ───────────────────────────────────────────────────────────────────
+
+function SourceBadge({ source }) {
+ const MAP = {
+ row_date: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
+ sheet_name: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
+ default: 'bg-amber-500/15 text-amber-600 dark:text-amber-500',
+ ambiguous: 'bg-red-500/15 text-red-600 dark:text-red-400',
+ };
+ const LABELS = { row_date: 'date cell', sheet_name: 'tab name', default: 'default', ambiguous: 'ambiguous' };
+ return (
+
+ {LABELS[source] ?? source}
+
+ );
+}
+
+function ConfidenceBadge({ confidence }) {
+ const MAP = { high: 'text-emerald-600 dark:text-emerald-400', medium: 'text-amber-600 dark:text-amber-500', low: 'text-red-500' };
+ return
{confidence};
+}
+
+function actionLabel(action) {
+ const MAP = {
+ match_existing_bill: 'Match existing bill',
+ create_new_bill: 'Create new bill',
+ skip_row: 'Skip row',
+ ambiguous: 'Needs decision',
+ update_monthly_state: 'Update monthly record',
+ add_monthly_note: 'Add monthly note',
+ create_payment: 'Record as payment',
+ };
+ return MAP[action] || (action ? action.replace(/_/g, ' ') : 'Needs decision');
+}
+
+
+function SheetStatusBadge({ status }) {
+ const MAP = {
+ parsed: 'bg-emerald-500/15 text-emerald-600',
+ parsed_month_only: 'bg-amber-500/15 text-amber-600',
+ ambiguous: 'bg-orange-500/15 text-orange-600',
+ skipped: 'bg-muted text-muted-foreground',
+ };
+ const LABELS = {
+ parsed: 'parsed', parsed_month_only: 'month only', ambiguous: 'ambiguous', skipped: 'skipped',
+ };
+ return (
+
+ {LABELS[status] ?? status}
+
+ );
+}
+function WorkbookSummaryCard({ workbook }) {
+ const isMulti = workbook.parse_mode === 'all_sheets';
+
+ return (
+
+
+
Workbook Summary
+
+ {isMulti ? `${workbook.total_row_count} rows across ${workbook.sheet_names.length} tabs` : `${workbook.row_count} rows · ${workbook.selected_sheet}`}
+
+
+ {isMulti && workbook.sheets?.length > 0 && (
+
+ {workbook.sheets.map(s => (
+
+
{s.name}
+
+ {s.detected_year && s.detected_month && (
+
+ {String(s.detected_month).padStart(2,'0')}/{s.detected_year}
+
+ )}
+
+ {s.status !== 'skipped' && {s.row_count} rows}
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+// ─── XLSX Import: Row Decision Controls ──────────────────────────────────────
+
+const ACTIONS_NEEDING_BILL = new Set(['match_existing_bill','update_monthly_state','add_monthly_note','create_payment']);
+
+function RowDecisionRow({ row, decision, onDecisionChange, allBills, categories, selected, onSelectedChange }) {
+ const [expanded, setExpanded] = useState(row.requires_user_decision || !decision?.action);
+
+ const action = decision?.action ?? null;
+ const isSkip = action === 'skip_row';
+ const hasError = row.errors?.length > 0;
+ const complete = isDecisionComplete(action, decision);
+ const rec = row.recommendation || {};
+
+ const suggestedBills = row.possible_bill_matches ?? [];
+ const suggestedIds = new Set(suggestedBills.map(b => b.bill_id));
+ const otherBills = allBills.filter(b => !suggestedIds.has(b.id));
+
+ const handleAction = (val) => {
+ const next = { ...decision, action: val };
+ if (val === 'create_new_bill') {
+ Object.assign(next, buildCreateNewDecision(row, decision));
+ } else if (ACTIONS_NEEDING_BILL.has(val)) {
+ next.bill_name = null;
+ next.bill_id = decision?.bill_id ?? decision?.previous_match_bill_id ?? rec.bill_id ?? suggestedBills[0]?.bill_id ?? null;
+ next.actual_amount = decision?.actual_amount ?? rec.actual_amount ?? row.detected_amount ?? null;
+ next.payment_amount = decision?.payment_amount ?? rec.payment_amount ?? row.detected_payment_amount ?? null;
+ next.payment_date = decision?.payment_date ?? rec.payment_date ?? row.detected_paid_date ?? null;
+ } else {
+ next.bill_id = null;
+ next.bill_name = null;
+ }
+ onDecisionChange(row.row_id, next);
+ if (val === 'skip_row') setExpanded(false);
+ };
+
+ const handleBill = (e) => {
+ onDecisionChange(row.row_id, { ...decision, bill_id: parseInt(e.target.value, 10) || null });
+ };
+
+ const handleBillName = (e) => {
+ onDecisionChange(row.row_id, { ...decision, bill_name: e.target.value });
+ };
+
+ const handleDecisionField = (field, value) => {
+ onDecisionChange(row.row_id, { ...decision, [field]: value });
+ };
+
+ return (
+
+ {/* Main row */}
+
setExpanded(e => !e)}
+ >
+ {/* Selection */}
+
e.stopPropagation()}>
+ onSelectedChange(row.row_id, e.target.checked)}
+ aria-label={`Select row ${row.source_row_number}`}
+ className="h-4 w-4 rounded border-border accent-primary"
+ />
+
+
+ {/* Status icon */}
+
+ {hasError ?
:
+ isSkip ?
:
+ complete ?
:
+ action !== null ?
:
+
}
+
+
+ {/* Content */}
+
+
+ #{row.source_row_number}
+ {row.sheet_name && {row.sheet_name}}
+ {row.detected_year && row.detected_month && (
+
+ {String(row.detected_month).padStart(2,'0')}/{row.detected_year}
+
+ )}
+ {row.year_month_source && }
+
+
+
+ {row.detected_bill_name || '(no bill name)'}
+
+ {row.detected_amount != null && (
+
+ ${row.detected_amount.toFixed(2)}
+
+ )}
+ {row.detected_paid_date && (
+
+ paid {row.detected_paid_date}
+
+ )}
+ {row.detected_labels?.length > 0 && (
+ {row.detected_labels.join(', ')}
+ )}
+ {row.detected_notes && (
+ {row.detected_notes}
+ )}
+
+
+
+ {/* Right: action status + expand */}
+
+ {action === null ? (
+ Needs decision
+ ) : isSkip ? (
+ Skipped
+ ) : (
+ {action.replace(/_/g,' ')}
+ )}
+ {action !== 'skip_row' && (
+ expanded ? :
+ )}
+
+
+
+ {/* Expanded decision controls */}
+ {expanded && !hasError && (
+
+ {/* Recommendation */}
+ {rec.action && (
+
+
+ Recommended: {actionLabel(rec.action)}
+ {rec.bill_name && rec.action === 'match_existing_bill' && (
+ → {rec.bill_name}
+ )}
+ {rec.category_name && (
+ Category: {rec.category_name}
+ )}
+ {rec.due_day && Due day: {rec.due_day}}
+ {rec.actual_amount != null && ${Number(rec.actual_amount).toFixed(2)}}
+
+
+ {rec.reason &&
Reason: {rec.reason}
}
+
+ )}
+
+ {/* Warnings */}
+ {(rec.warnings?.length > 0 || row.warnings?.length > 0) && (
+
+ {Array.from(new Set([...(rec.warnings || []), ...(row.warnings || [])])).map((w, i) => (
+
+ {w}
+
+ ))}
+
+ )}
+
+ {/* Possible matches hint */}
+ {suggestedBills.length > 0 && (
+
+ Suggested:
+ {suggestedBills.slice(0, 3).map(b => (
+
+ ))}
+
+ )}
+
+ {/* Action selector */}
+
+
+
+
+
+ {/* Bill selector (for actions that need a bill) */}
+ {ACTIONS_NEEDING_BILL.has(action) && (
+
+
+
+
+ )}
+
+ {/* Bill name input for create_new_bill */}
+ {action === 'create_new_bill' && (
+
+ )}
+
+ {action && action !== 'skip_row' && (
+
+
+ handleDecisionField('payment_date', e.target.value || null)}
+ className="h-8 text-sm w-40"
+ />
+ handleDecisionField('payment_amount', e.target.value === '' ? null : parseFloat(e.target.value))}
+ placeholder="Paid amount"
+ className="h-8 text-sm w-36"
+ />
+
+ )}
+
+ {/* Quick skip */}
+ {action !== 'skip_row' && (
+
+ )}
+
+ )}
+
+ );
+}
+
+// ─── XLSX Import: Preview Table ───────────────────────────────────────────────
+
+function PreviewTable({ rows, decisions, onDecisionChange, allBills, categories, selectedRows, onSelectedChange }) {
+ const groups = groupRowsBySheet(rows);
+ const multiTab = groups.length > 1;
+
+ return (
+
+ {groups.map(({ name, rows: groupRows }) => (
+
+ {multiTab && (
+
+
+ {name}
+ · {groupRows.length} rows
+
+ )}
+ {groupRows.map(row => (
+
+ ))}
+
+ ))}
+
+ );
+}
+
+function BulkActionBar({
+ rows,
+ selectedRows,
+ onSelectAll,
+ onClearSelection,
+ onBulkSkip,
+ onBulkCreateNew,
+ onBulkReset,
+}) {
+ const allSelected = rows.length > 0 && rows.every(r => selectedRows.has(r.row_id));
+ const selectedCount = selectedRows.size;
+
+ return (
+
+
+
+
+
+ {selectedCount > 0 && (
+ {selectedCount} row{selectedCount === 1 ? '' : 's'} selected
+ )}
+ {selectedCount > 0 && (
+ <>
+
+
+
+
+
+ )}
+
+
+
+ );
+}
+
+// ─── Section 1: Import Spreadsheet History ────────────────────────────────────
+
+const INITIAL_OPTIONS = {
+ parseAllSheets: true,
+ defaultYear: new Date().getFullYear(),
+ defaultMonth: '',
+};
+
+// ─── Bill History Import helpers ──────────────────────────────────────────────
+
+function ConfidenceDot({ level }) {
+ const cls = level === 'high' ? 'bg-emerald-500'
+ : level === 'medium' ? 'bg-amber-500'
+ : 'bg-muted-foreground/30';
+ return
;
+}
+
+function useBillGroups(previewRows, allBills) {
+ return useMemo(() => {
+ const billMap = new Map(allBills.map(b => [b.id, b]));
+ const groups = new Map();
+
+ for (const row of previewRows) {
+ for (const match of (row.possible_bill_matches ?? [])) {
+ if (!billMap.has(match.bill_id)) continue;
+ if (!groups.has(match.bill_id)) {
+ groups.set(match.bill_id, {
+ bill: billMap.get(match.bill_id),
+ rows: [],
+ counts: { high: 0, medium: 0, low: 0 },
+ });
+ }
+ const g = groups.get(match.bill_id);
+ if (!g.rows.find(r => r.row_id === row.row_id)) {
+ g.rows.push({ ...row, _match: match });
+ g.counts[match.match_confidence] = (g.counts[match.match_confidence] || 0) + 1;
+ }
+ }
+ }
+ return [...groups.values()].sort((a, b) =>
+ b.rows.length !== a.rows.length ? b.rows.length - a.rows.length : b.counts.high - a.counts.high
+ );
+ }, [previewRows, allBills]);
+}
+
+function rowDateLabel(row) {
+ if (row.detected_year && row.detected_month)
+ return `${row.detected_year}-${String(row.detected_month).padStart(2, '0')}`;
+ return row.detected_paid_date ?? '—';
+}
+
+function billImportProgress(rows, importResult) {
+ const completedRowIds = importResult?.completedRowIds ?? new Set();
+ const remainingRows = rows.filter(row => !completedRowIds.has(row.row_id));
+ return {
+ completedCount: rows.length - remainingRows.length,
+ remainingRows,
+ remainingCount: remainingRows.length,
+ };
+}
+
+function detailImportedAnything(detail) {
+ return ['created', 'updated', 'overwritten', 'imported'].includes(detail?.result)
+ || detail?.payment === 'created';
+}
+
+function detailCompletesImport(detail) {
+ if (!detail?.row_id) return false;
+ if (['error', 'ambiguous', 'skipped_conflict'].includes(detail.result)) return false;
+ if (detail.result === 'skipped') return false;
+ return detailImportedAnything(detail)
+ || detail.result === 'skipped_duplicate'
+ || detail.payment === 'skipped_duplicate';
+}
+
+function BillDetailView({ group, onBack, onImport, isImporting, importResult }) {
+ const { bill, rows } = group;
+ const { completedCount, remainingCount } = billImportProgress(rows, importResult);
+ const sorted = [...rows].sort((a, b) => {
+ const da = (a.detected_year ?? 0) * 100 + (a.detected_month ?? 0);
+ const db = (b.detected_year ?? 0) * 100 + (b.detected_month ?? 0);
+ return da - db;
+ });
+
+ return (
+
+
+
+
{bill.name}
+
+ {importResult && (
+
+
+ {completedCount === rows.length
+ ? 'All imported'
+ : `${completedCount} imported · ${remainingCount} remaining`}
+ {importResult.duplicates > 0
+ && ` · ${importResult.duplicates} dupes`}
+
+ {importResult.duplicates > 0 && importResult.earliestDup && (
+
+ {importResult.duplicates} dup{importResult.duplicates > 1 ? 's' : ''} · recorded{' '}
+ {importResult.earliestDup.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
+
+ )}
+
+ )}
+
+
+
+
+ {sorted.map(row => (
+
+
+ {rowDateLabel(row)}
+
+ {row.detected_amount != null ? `$${Number(row.detected_amount).toFixed(2)}` : '—'}
+
+ {row.detected_name ?? '—'}
+
+ {row._match.match_confidence}
+
+
+ ))}
+
+
+ );
+}
+
+function BillHistoryView({ previewRows, allBills, importingBillId, billImportResults, onImportBill }) {
+ const [selectedBillId, setSelectedBillId] = useState(null);
+ const billGroups = useBillGroups(previewRows, allBills);
+
+ if (billGroups.length === 0) {
+ return (
+
+ No existing bills matched rows in this file.
+
+ );
+ }
+
+ if (selectedBillId) {
+ const group = billGroups.find(g => g.bill.id === selectedBillId);
+ return group
+ ?
setSelectedBillId(null)}
+ onImport={() => onImportBill(group)} />
+ : null;
+ }
+
+ return (
+
+ {billGroups.map(g => {
+ const { bill, rows, counts } = g;
+ const isImporting = importingBillId === bill.id;
+ const importResult = billImportResults.get(bill.id) ?? null;
+ const { completedCount, remainingCount } = billImportProgress(rows, importResult);
+
+ const sorted3 = [...rows]
+ .sort((a, b) => {
+ const da = (a.detected_year ?? 0) * 100 + (a.detected_month ?? 0);
+ const db = (b.detected_year ?? 0) * 100 + (b.detected_month ?? 0);
+ return da - db;
+ })
+ .slice(0, 3);
+
+ return (
+
+
+
+
{bill.name}
+
+ {rows.length} row{rows.length !== 1 ? 's' : ''}
+
+ {counts.high > 0 &&
{counts.high} high}
+ {counts.medium > 0 &&
{counts.medium} med}
+ {counts.low > 0 &&
{counts.low} low}
+ {importResult && (() => {
+ const allImported = completedCount === rows.length;
+ const fmtDate = d => d?.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+ const dupDate = importResult.earliestDup ? ` · ${fmtDate(importResult.earliestDup)}` : '';
+ return (
+
+
+ {allImported ? 'All imported' : `${completedCount} imported · ${remainingCount} remaining`}
+ {importResult.duplicates > 0 && ` · ${importResult.duplicates} dupes`}
+ {importResult.errored > 0 && ` · ${importResult.errored} errors`}
+
+ {importResult.duplicates > 0 && (
+
+ {importResult.duplicates} duplicate{importResult.duplicates > 1 ? 's' : ''}{dupDate}
+
+ )}
+
+ );
+ })()}
+
+
+ {sorted3.map(row => (
+
+
+ {rowDateLabel(row)}
+ {row.detected_amount != null && (
+ ${Number(row.detected_amount).toFixed(2)}
+ )}
+ {row.detected_name &&
+ row.detected_name.toLowerCase() !== bill.name.toLowerCase() && (
+ "{row.detected_name}"
+ )}
+
+ ))}
+ {rows.length > 3 && (
+
+ )}
+
+
+
+ {importResult ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+ })}
+
+
+ {/* File picker */}
+
+
+
+ setFile(e.target.files?.[0] ?? null)} />
+
+ {file && (
+
+ {file.name}
+
+ )}
+
+
+
+ {/* Options */}
+
+
+ opt('parseAllSheets', v)}
+ id="parse-all" />
+
+
+
+
+ opt('defaultYear', e.target.value)}
+ className="w-24 h-8 text-sm" />
+
+ {!options.parseAllSheets && (
+
+
+ opt('defaultMonth', e.target.value)}
+ className="w-20 h-8 text-sm" />
+
+ )}
+
+
+ {/* Preview button */}
+
+
+ {(preview.status === 'ready' || preview.status === 'error' || applyState.status !== 'idle') && (
+
+ )}
+
+
+ {/* Error from preview */}
+ {preview.status === 'error' && (
+
+
{preview.error?.message || preview.error || 'Preview failed.'}
+ {preview.error?.details?.length > 0 && (
+
+ {preview.error.details.map((d, i) => (
+ - {d.row_id ? `${d.row_id}: ` : ''}{d.message}
+ ))}
+
+ )}
+
+ )}
+
+
+ {/* Workbook summary */}
+
+
+ {/* Row decision table */}
+ {previewRows.length > 0 ? (
+
+ {/* Tab header */}
+
+
+
+
+
+
+ {viewMode === 'rows'
+ ? 'Select rows, apply bulk decisions, then import.'
+ : 'Click a bill to queue its entire history from this file.'}
+
+
+
+ {/* Rows view */}
+ {viewMode === 'rows' && (
+ <>
+
+
+
+ )}
+
+ {/* Bills view */}
+ {viewMode === 'bills' && (
+
+ )}
+
+ ) : (
+
No data rows found in this file.
+ )}
+
+ {/* Apply bar */}
+ {previewRows.length > 0 && (
+
+
+ {previewRows.length} rows reviewed
+ {pendingRows.length} to apply
+ {skipRows.length} skipped
+ {unresolvedRows.length > 0 && (
+ {unresolvedRows.length} need a decision
+ )}
+
+
+
+ )}
+
+
+ Applying import…
+
+ )}
+
+ {/* ── Apply result ──────────────────────────────────────────────────────── */}
+ {applyState.status === 'done' && applyState.result && (
+
+
+
+
+
Import applied successfully
+
+
+ {[
+ { label: 'Created', value: applyState.result.rows_created, color: 'text-emerald-600' },
+ { label: 'Updated', value: applyState.result.rows_updated, color: 'text-blue-600' },
+ { label: 'Skipped', value: applyState.result.rows_skipped, color: 'text-muted-foreground' },
+ { label: 'Errors', value: applyState.result.rows_errored, color: 'text-red-500' },
+ ].map(({ label, value, color }) => (
+
+ ))}
+
+
+
+
+
+
{applyState.error?.message || applyState.error || 'Apply failed.'}
+ {applyState.error?.details?.length > 0 && (
+
+ {applyState.error.details.map((d, i) => (
+ -
+ {d.row_id ? `${d.row_id}: ` : ''}
+ {d.field ? `${d.field} - ` : ''}
+ {d.message}
+
+ ))}
+
+ )}
+ {applyState.error?.error_id && (
+
Error ID: {applyState.error.error_id}
+ )}
+
+
+ {CSV_IMPORT_STEPS.map((step, index) => {
+ const complete = index < activeIndex;
+ const active = index === activeIndex;
+ return (
+
+
+ {complete ? : index + 1}
+
+ {step}
+
+ );
+ })}
+
+
+
+
{label}
+
+ {requirement}
+
+
+
{field}
+
+
+
+
+
+ {current && current === suggested && (
+ Suggested match
+ )}
+ {suggestedAvailable && !disabled && (
+
+ )}
+ {missingRequired && (
+ Needs a column
+ )}
+
+
+
+
+ {samples.length > 0 ? (
+
+ {samples.map(value => (
+
+ {value}
+
+ ))}
+
+ ) : (
+
+ {current ? 'No sample values' : 'Map a column to preview values'}
+
+ )}
+
+
+
+
+
Column mapping
+
+ {mappedCount} of {mappingFields.length} fields mapped
+ {missingRequired.length > 0 && ` · missing ${missingRequired.join(' and ')}`}
+
+
+
+
+
+
+
+
+
+ Field
+ CSV Column
+ Sample Values
+
+
+
+ {mappingFields.map(field => (
+
+ ))}
+
+
No sample rows found.
;
+ }
+
+ return (
+
+
+
+
+ {visibleHeaders.map(header => (
+ | {header} |
+ ))}
+ {hiddenCount > 0 && (
+ +{hiddenCount} |
+ )}
+
+
+
+ {sampleRows.map((row, index) => (
+
+ {visibleHeaders.map(header => (
+ |
+ {row[header] || '—'}
+ |
+ ))}
+ {hiddenCount > 0 && (
+ more columns |
+ )}
+
+ ))}
+
+
+
+
+
+
+
+
Import transaction rows from CSV.
+
+ This importer creates shared transaction records only. It does not match transactions to bills yet.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {preview.status === 'error' && (
+
+
+ {preview.error?.message || 'CSV preview failed.'}
+ {preview.error?.details?.length > 0 && (
+
+ {preview.error.details.map((d, i) => (
+ - {d.message || JSON.stringify(d)}
+ ))}
+
+ )}
+
+ )}
+
+ {preview.status === 'ready' && preview.data && (
+
+
+
+
+
CSV Preview
+
{file?.name || 'Transaction CSV'}
+
+
+
+
+
+
+
+
+ {preview.data.errors?.length > 0 && (
+
+
Review mapping
+
+ {preview.data.errors.map((issue, i) => (
+ -
+
+ {issue.message || JSON.stringify(issue)}
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {canCommitCsvMapping(mapping) ? 'Ready to commit' : 'Mapping incomplete'}
+
+
+ Duplicates are skipped using a CSV transaction ID when available, otherwise a stable row hash.
+
+
+ {commitState.status === 'done' ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+ {commitState.status === 'done' && commitState.result && (
+
+
+
+
CSV transaction import complete
+
+
+
+
+
+
+ {skippedRows.length > 0 && (
+
+
Skipped duplicates ({skippedRows.length})
+
+ {skippedRows.map(row => (
+ -
+ Row {row.row}: {row.provider_transaction_id}
+
+ ))}
+
+
+ )}
+ {failedRows.length > 0 && (
+
+
Failed rows ({failedRows.length})
+
+
+ )}
+
+ )}
+
+ {commitState.status === 'error' && (
+
+
+ {commitState.error?.message || 'CSV import failed.'}
+ {commitState.error?.details?.length > 0 && (
+
+ {commitState.error.details.map((d, i) => (
+ - {d.message || JSON.stringify(d)}
+ ))}
+
+ )}
+
+ )}
+
+ {statusLoading ? (
+
Loading…
+ ) : seeded ? (
+ <>
+
Demo data seeded
+
+
+
Bills
+
{counts.bills}
+
+
+
Categories
+
{counts.categories}
+
+
+
+ ) : (
+
+ Create 20 realistic demo bills and 8 demo categories for testing purposes.
+ The data will be associated with your account.
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ Clear Demo Data
+
+ This will remove {counts.bills} demo bills and {counts.categories} demo categories from your account. This cannot be undone.
+
+
+
+ Cancel
+
+ {clearing ? <>Clearing… : 'Clear Data'}
+
+
+
+
+
+
+
+
+
+
+
+
+
Suggested matches
+
{loading ? 'Checking transactions' : `${suggestions.length} ready for review`}
+
+
+
+
+ {loading ? (
+
+
+ Finding likely bill matches...
+
+ ) : suggestions.length === 0 ? (
+
+ No suggested matches right now.
+
+ ) : (
+
+ {suggestions.map(suggestion => {
+ const tx = suggestion.transaction || {};
+ const bill = suggestion.bill || {};
+ const acceptBusy = actionId === `suggestion-match:${suggestion.id}`;
+ const rejectBusy = actionId === `suggestion-reject:${suggestion.id}`;
+ const busy = acceptBusy || rejectBusy;
+
+ return (
+
+
+
+
+
+ {suggestion.score}
+
+
{transactionTitle(tx)}
+
+
+ {transactionDate(tx)} · {tx.source_label || tx.source_type_label || 'Transaction'}
+
+
+
+ {formatTransactionAmount(tx.amount, tx.currency)}
+
+
+
+
+
+
+
{bill.name || `Bill ${suggestion.billId}`}
+
+ Expected ${Number(bill.expected_amount || 0).toFixed(2)}
+
+
+
+
+ {suggestion.reasons?.length > 0 && (
+
+ {suggestion.reasons.slice(0, 4).map(reason => (
+
+ {reason}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+ );
+ })}
+
+ )}
+
+
+
+ {TRANSACTION_FILTERS.map(item => (
+
+ ))}
+
+
+
+
+
+
+
+ {loading ? (
+
Loading transactions…
+ ) : transactions.length === 0 ? (
+
+ No transactions found for this filter.
+
+ ) : (
+
+
+
+ | Date |
+ Transaction |
+ Match |
+ Amount |
+ Actions |
+
+
+
+ {transactions.map(tx => {
+ const status = transactionStatus(tx);
+ const busy = actionId?.endsWith(`:${tx.id}`);
+ return (
+
+ |
+ {transactionDate(tx)}
+ |
+
+
+ {transactionTitle(tx)}
+
+ {[tx.description, tx.account_name, tx.source_label].filter(Boolean).join(' · ') || '—'}
+
+ |
+
+
+
+ {tx.matched_bill_name ? (
+ {tx.matched_bill_name}
+ ) : (
+ No bill linked
+ )}
+
+ |
+
+ {formatTransactionAmount(tx.amount, tx.currency)}
+ |
+
+
+ {status === 'ignored' ? (
+
+ ) : (
+ <>
+ {status === 'matched' ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+ |
+
+ );
+ })}
+
+
+ )}
+
+
+
+
{title}
+ {subtitle &&
{subtitle}
}
+
+
{children}
+
+
{label}
+
{value ?? 0}
+
{children}
;
-}
-
-function FieldRow({ label, children }) {
- return (
-
-
- {children}
-
- );
-}
-
-function Toggle({ checked, onChange, label, disabled = false }) {
- return (
-
- );
-}
-
-function defaultOidcRedirectUri() {
- if (typeof window === 'undefined') return '';
- return `${window.location.origin}/api/auth/oidc/callback`;
-}
-
-function looksLikeOidcEndpoint(url) {
- const value = String(url || '').toLowerCase();
- return /\/(?:authorize|token|userinfo|jwks|certs)\/?$/.test(value);
-}
-
-function formatDateTime(value) {
- if (!value) return '—';
- const date = new Date(value);
- if (Number.isNaN(date.getTime())) return value;
- return date.toLocaleString();
-}
-
-function BackupTypeBadge({ type }) {
- const cls = {
- manual: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
- scheduled: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
- imported: 'bg-violet-500/15 text-violet-400 border-violet-500/20',
- 'pre-restore': 'bg-amber-500/15 text-amber-400 border-amber-500/20',
- }[type] || 'bg-muted text-muted-foreground border-border';
-
- return {type || 'backup'};
-}
-
-// ─── Onboarding Wizard ────────────────────────────────────────────────────────
-
-function OnboardingWizard({ onComplete }) {
- const [step, setStep] = useState(0);
- const [username, setUsername] = useState('');
- const [password, setPassword] = useState('');
- const [confirm, setConfirm] = useState('');
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState('');
-
- const handleCreate = async (e) => {
- e.preventDefault();
- setError('');
-
- let validationError = '';
- if (password !== confirm) {
- validationError = 'Passwords do not match.';
- } else if (password.length < 8) {
- validationError = 'Password must be at least 8 characters.';
- }
-
- if (validationError) {
- setError(validationError);
- toast.error(validationError);
- return;
- }
-
- setLoading(true);
- try {
- await api.createUser({ username, password });
- toast.success('User created successfully.');
- onComplete();
- } catch (err) {
- const errorMessage = err.message || 'Failed to create user.';
- setError(errorMessage);
- toast.error(errorMessage);
- } finally {
- setLoading(false);
- }
- };
-
- return (
-
-
- {/* Step dots */}
-
- {[0, 1].map(i => (
-
- ))}
-
-
- {step === 0 && (
-
-
- Welcome, Administrator
-
- Before creating your first user, please understand what your admin account can and cannot do.
-
-
-
-
- {[
- { can: true, text: 'Create and manage user accounts' },
- { can: true, text: 'Reset user passwords' },
- { can: true, text: 'Configure email notifications' },
- { can: true, text: 'Toggle single-user / multi-user mode' },
- { can: false, text: 'Cannot view bills or financial data' },
- { can: false, text: 'Cannot access user settings or history' },
- ].map(({ can, text }) => (
-
-
- {can ? '✓' : '✗'}
-
- {text}
-
- ))}
-
-
-
-
-
- )}
-
- {step === 1 && (
-
-
- Create first user
-
- This account will be used to access the bill tracker.
-
-
-
-
-
-
- )}
-
-
-
-
Enable email notifications
-
Configure SMTP to send bill reminders
-
-
set('enabled', v)} label="Enable email notifications" />
-
- Sender
-
- set('sender_name', e.target.value)} placeholder="BillTracker" />
-
-
- set('sender_address', e.target.value)} placeholder="no-reply@example.com" type="email" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Test Email
-
-
- setTestEmail(e.target.value)}
- placeholder="you@example.com"
- type="email"
- />
-
-
-
-
-
-
-
-
- );
-}
-
-// ─── Login Mode Card ──────────────────────────────────────────────────────────
-
-function LoginModeCard({ users }) {
- const [modeData, setModeData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [saving, setSaving] = useState(false);
- const [selectedUser, setSelectedUser] = useState('');
-
- // Single-user mode confirmation dialog
- const [confirmSingle, setConfirmSingle] = useState(false);
- const [pendingUserId, setPendingUserId] = useState(null);
-
- useEffect(() => {
- api.authModeConfig()
- .then(d => { setModeData(d); setSelectedUser(d.default_user_id?.toString() || ''); })
- .catch(() => {})
- .finally(() => setLoading(false));
- }, []);
-
- const doSetMode = async (mode, userId) => {
- setSaving(true);
- try {
- await api.setAuthMode({
- auth_mode: mode,
- default_user_id: mode === 'single' ? parseInt(userId, 10) : null,
- });
- const d = await api.authModeConfig();
- setModeData(d);
- toast.success(mode === 'single' ? 'Single-user mode enabled.' : 'Login requirement restored.');
- } catch (err) {
- toast.error(err.message || 'Failed to update auth mode.');
- } finally {
- setSaving(false);
- }
- };
-
- const handleRequestSingle = () => {
- if (!selectedUser) { toast.error('Select a user first.'); return; }
- setPendingUserId(selectedUser);
- setConfirmSingle(true);
- };
-
- const handleConfirmSingle = () => {
- setConfirmSingle(false);
- doSetMode('single', pendingUserId);
- };
-
- if (loading) return Loading…;
-
- const isMulti = !modeData || modeData.auth_mode === 'multi';
- const activeUser = users?.find(u => u.id === modeData?.default_user_id);
- const selectedUsername = users?.find(u => u.id.toString() === selectedUser)?.username ?? selectedUser;
-
- return (
- <>
-
-
-
- Login Mode
-
- {isMulti ? 'Multi-user' : 'Single-user'}
-
-
-
-
- {isMulti ? (
- <>
-
- Single-user mode bypasses the login screen and automatically signs in as the selected user.
-
-
-
-
-
-
-
- ) : (
- <>
-
- Currently auto-signing in as{' '}
- {activeUser?.username ?? '—'}.
- Restoring login requirement will require all users to sign in manually.
-
-
-
- )}
-
-
-
- {/* Single-user mode confirmation */}
-
-
-
- Enable Single-User Mode?
-
- Anyone who opens the app will be automatically signed in as{' '}
- {selectedUsername}.
- The admin login still requires a password.
-
-
-
- Cancel
-
- Enable Single-User Mode
-
-
-
-
-
- );
-}
-
-// ─── AuthMethodsCard ─────────────────────────────────────────────────────────
-// Controls login methods and DB-backed authentik/OIDC provider settings.
-// Client secret is write-only; the API returns only a "set" marker.
-
-function AuthMethodsCard() {
- const [data, setData] = useState(null);
- const [form, setForm] = useState(null);
- const [loading, setLoading] = useState(true);
- const [saving, setSaving] = useState(false);
- const [testingOidc, setTestingOidc] = useState(false);
- const [oidcTest, setOidcTest] = useState(null);
-
- const load = useCallback(async () => {
- try {
- const d = await api.authModeConfig();
- setData(d);
- setForm({
- local_login_enabled: d.local_login_enabled !== false,
- oidc_login_enabled: !!d.oidc_login_enabled,
- oidc_provider_name: d.oidc_provider_name || 'authentik',
- oidc_issuer_url: d.oidc_issuer_url || '',
- oidc_client_id: d.oidc_client_id || '',
- oidc_client_secret: '',
- oidc_client_secret_clear: false,
- oidc_token_auth_method: d.oidc_token_auth_method || 'client_secret_basic',
- oidc_redirect_uri: d.oidc_redirect_uri || defaultOidcRedirectUri(),
- oidc_scopes: d.oidc_scopes || 'openid email profile groups',
- oidc_auto_provision: d.oidc_auto_provision !== false,
- oidc_admin_group: d.oidc_admin_group || '',
- oidc_default_role: d.oidc_default_role || 'user',
- });
- } catch (err) {
- toast.error(err.message || 'Failed to load auth settings.');
- } finally {
- setLoading(false);
- }
- }, []);
-
- useEffect(() => { load(); }, [load]);
-
- const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
-
- async function handleSave() {
- setSaving(true);
- try {
- const d = await api.setAuthMode(form);
- setData(d);
- setForm({
- local_login_enabled: d.local_login_enabled !== false,
- oidc_login_enabled: !!d.oidc_login_enabled,
- oidc_provider_name: d.oidc_provider_name || 'authentik',
- oidc_issuer_url: d.oidc_issuer_url || '',
- oidc_client_id: d.oidc_client_id || '',
- oidc_client_secret: '',
- oidc_client_secret_clear: false,
- oidc_token_auth_method: d.oidc_token_auth_method || 'client_secret_basic',
- oidc_redirect_uri: d.oidc_redirect_uri || defaultOidcRedirectUri(),
- oidc_scopes: d.oidc_scopes || 'openid email profile groups',
- oidc_auto_provision: d.oidc_auto_provision !== false,
- oidc_admin_group: d.oidc_admin_group || '',
- oidc_default_role: d.oidc_default_role || 'user',
- });
- toast.success('Auth method settings saved.');
- } catch (err) {
- toast.error(err.message || 'Failed to save auth method settings.');
- } finally {
- setSaving(false);
- }
- }
-
- async function handleTestOidc() {
- setTestingOidc(true);
- setOidcTest(null);
- try {
- const result = await api.testOidcConfig(form);
- setOidcTest(result);
- toast.success('authentik configuration test passed.');
- } catch (err) {
- const result = err.data || { ok: false, error: err.message || 'OIDC configuration test failed.' };
- setOidcTest(result);
- toast.error(result.error || 'OIDC configuration test failed.');
- } finally {
- setTestingOidc(false);
- }
- }
-
- if (loading || !form) {
- return (
-
-
- Loading auth settings…
-
-
- );
- }
-
- const secretAvailable = form.oidc_client_secret.trim()
- ? true
- : form.oidc_client_secret_clear
- ? false
- : !!data?.oidc_client_secret_set;
- const oidcConfigured = !!(
- form.oidc_issuer_url.trim() &&
- form.oidc_client_id.trim() &&
- secretAvailable &&
- form.oidc_redirect_uri.trim()
- );
- const adminGroupConfigured = !!form.oidc_admin_group.trim();
- const wouldLockOut = !form.local_login_enabled && !form.oidc_login_enabled;
- const cantDisableLocal = !form.local_login_enabled && (!oidcConfigured || !form.oidc_login_enabled || !adminGroupConfigured);
- const oidcEnabledButIncomplete = form.oidc_login_enabled && !oidcConfigured;
- const canSave = !wouldLockOut && !cantDisableLocal && !oidcEnabledButIncomplete && !saving;
- const canTestOidc = oidcConfigured && !testingOidc;
- const missingFields = [
- !form.oidc_issuer_url.trim() && 'Issuer URL',
- !form.oidc_client_id.trim() && 'Client ID',
- !secretAvailable && 'Client Secret',
- !form.oidc_redirect_uri.trim() && 'Redirect URI',
- ].filter(Boolean);
- const issuerEndpointWarning = looksLikeOidcEndpoint(form.oidc_issuer_url);
-
- return (
-
-
-
-
-
Authentication Methods
-
- Control local login and authentik/OIDC. Settings are saved in the database;
- environment variables only fill blank fields as bootstrap defaults.
-
-
-
- {wouldLockOut && (
-
- Cannot disable all login methods; at least one must remain enabled.
-
- )}
- {cantDisableLocal && !wouldLockOut && (
-
- Cannot disable local login without authentik/OIDC configured, enabled, and mapped to an admin group.
-
- )}
- {oidcEnabledButIncomplete && (
-
- authentik/OIDC needs {missingFields.join(', ')} before it can be enabled.
-
- )}
- {data?.warnings?.map((w, i) => (
-
{w}
- ))}
-
- set('local_login_enabled', v)}
- label="Enable local login"
- />
-
- {form.local_login_enabled ? 'Enabled' : 'Disabled'}
-
-
-
-
- {/* OIDC / authentik login toggle */}
-
-
- set('oidc_login_enabled', v)}
- label="Enable OIDC login"
- />
-
- {!oidcConfigured
- ? 'Not fully configured'
- : form.oidc_login_enabled ? 'Enabled' : 'Disabled'}
-
-
-
-
-
-
-
-
authentik / OIDC configuration
-
-
-
- set('oidc_provider_name', e.target.value)}
- placeholder="authentik"
- className="max-w-xs h-8 text-sm"
- />
-
-
-
-
-
set('oidc_issuer_url', e.target.value)}
- placeholder="https://yourURL.com/application/o/bills/.well-known/openid-configuration"
- className="max-w-xl h-8 text-sm"
- />
-
- Use the authentik provider issuer URL or full discovery URL, for example https://yourURL.com/application/o/bills/.well-known/openid-configuration.
-
- {issuerEndpointWarning && (
-
- This looks like an authorization endpoint. In authentik, copy the provider issuer or OpenID Configuration URL.
-
- )}
-
-
-
- set('oidc_client_id', e.target.value)}
- placeholder="authentik client ID"
- className="max-w-xl h-8 text-sm"
- />
-
-
-
-
-
-
-
-
-
-
- Advanced. Keep client_secret_basic unless your authentik provider explicitly requires client_secret_post.
-
-
-
-
-
-
- set('oidc_redirect_uri', e.target.value)}
- placeholder={defaultOidcRedirectUri()}
- className="h-8 text-sm"
- />
-
-
-
- Add this exact URL to the Redirect URIs allowed by authentik.
-
-
-
-
- set('oidc_scopes', e.target.value)}
- placeholder="openid email profile groups"
- className="max-w-xl h-8 text-sm"
- />
-
-
-
-
-
set('oidc_admin_group', e.target.value)}
- placeholder="e.g. bill-tracker-admins"
- className="max-w-sm h-8 text-sm"
- />
-
- Only users in this authentik group become app admins. Admin is never granted by default.
-
-
-
-
-
-
- set('oidc_auto_provision', v)}
- label="Auto-provision users"
- />
-
- {form.oidc_auto_provision ? 'Enabled' : 'Disabled'}
-
-
-
- When enabled, valid authentik users are created in this app on first login.
-
-
-
-
-
-
-
- Admin role only via admin group.
-
-
-
-
- {data?.oidc_env_fallback_used && (
-
- One or more blank database fields are currently using environment fallback values. Saving values here takes precedence.
-
- )}
-
- {oidcTest && (
-
- {oidcTest.ok
- ? `Configuration test passed for ${oidcTest.issuer || form.oidc_issuer_url}.`
- : oidcTest.error || 'Configuration test failed.'}
-
- )}
-
-
-
-
-
-
-
-
- | Username |
- Role |
- Status |
- Password |
- Reset Password |
- |
-
-
-
- {(users || []).map(user => {
- const form = getForm(user.id);
- const isSelf = currentUser?.id === user.id;
- return (
-
- |
-
- {user.username}
- {user.is_default_admin && default admin}
-
- |
-
-
-
- {user.role}
-
-
-
- |
-
-
- |
-
- {user.must_change_password
- ? Temporary
- : Set
- }
- |
-
- {form.open ? (
-
- setReset(user.id, { pw: e.target.value })}
- className="h-8 text-sm w-36"
- />
-
-
-
- ) : (
-
- )}
- |
-
- {!isSelf && (
-
- )}
- |
-
- );
- })}
- {!users?.length && (
-
- | No users found. |
-
- )}
-
-
-
-
-
Database Backups
-
- Admin-only SQLite backup, import, download, restore, and schedule controls.
-
-
-
- {settings.last_error ? 'Attention' : 'Ready'}
-
-
- {[
- ['Managed backups', backups.length],
- ['Latest backup', latest ? formatDateTime(latest.modified_at) : '—'],
- ['Latest size', latest ? fmtBytes(latest.size_bytes) : '—'],
- ['Scheduled', settings.enabled ? `${settings.frequency} ${settings.time}` : 'Disabled'],
- ].map(([label, value]) => (
-
- ))}
-
- {settings.last_error}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- | Backup |
- Type |
- Modified |
- Size |
- Checksum |
- |
-
-
-
- {backups.map(backup => (
-
- | {backup.id} |
- |
- {formatDateTime(backup.modified_at)} |
- {fmtBytes(backup.size_bytes)} |
-
- {backup.checksum || '—'}
- |
-
-
-
-
-
-
- |
-
- ))}
- {!backups.length && (
-
- |
- No managed backups yet.
- |
-
- )}
-
-
-
-
-
-
Scheduled Backups
-
- Scheduled runs create managed backups and only apply retention to scheduled backups.
-
-
-
setSchedule('enabled', v)} label="Enable scheduled backups" />
-
-
-
-
-
-
-
-
-
- setSchedule('time', e.target.value)} />
-
-
-
- setSchedule('retention_count', e.target.value)}
- />
-
-
-
-
- {formatDateTime(settings.next_run_at)}
-
-
-
-
-
-
- Last run: {formatDateTime(settings.last_run_at)}
-
-
- Last error: {settings.last_error || '—'}
-
-
-
-
-
-
-
-
-
-
-
-
Cleanup / Maintenance
-
- Automatic daily cleanup: expired import sessions, stale export temp files, orphaned backup partials. Runs at 6:00 AM.
-
-
-
-
Auto
-
-
-
Last Run
-
{status?.last_run_at ? formatDateTime(status.last_run_at) : '—'}
-
-
-
Last Result
- {resultLines.length > 0 ? (
-
- {resultLines.map(line => (
- - {line}
- ))}
-
- ) : (
-
No runs recorded yet
- )}
-
-
-
Task Settings
-
- {[
- ['import_sessions_enabled', 'Prune expired import sessions (24h TTL)'],
- ['temp_exports_enabled', 'Remove stale SQLite export temp files'],
- ['backup_partials_enabled', 'Remove orphaned backup .partial / .upload files'],
- ].map(([key, label]) => (
-
- set(key, v)} label={label} />
-
- ))}
-
-
- set('temp_export_max_age_hours', parseInt(e.target.value, 10) || 2)}
- disabled={!form.temp_exports_enabled}
- className="max-w-[120px] h-8 text-sm"
- />
-
-
-
- set('import_history_enabled', v)} label="Trim import history rows" />
-
-
- {form.import_history_enabled && (
- <>
-
- set('import_history_max_age_days', parseInt(e.target.value, 10) || 365)}
- className="max-w-[120px] h-8 text-sm"
- />
-
-
- Warning: Import history trimming permanently deletes audit records older than {form.import_history_max_age_days} days. This cannot be undone.
-
-
- )}
-
-
-
-
@@ -1887,7 +64,6 @@ export default function AdminPage() {
- {/* Content */}
{!hasUsers ? (
) : (
diff --git a/client/pages/DataPage.jsx b/client/pages/DataPage.jsx
index 7e43ff8..4b96676 100644
--- a/client/pages/DataPage.jsx
+++ b/client/pages/DataPage.jsx
@@ -1,3084 +1,12 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { toast } from 'sonner';
-import {
- Upload, FileSpreadsheet, Database, Download, CheckCircle2, XCircle,
- AlertTriangle, Loader2, RefreshCw, Clock, ChevronDown,
- ChevronUp, SkipForward, Plus, CheckCheck, Sparkles,
- List, Building2, ChevronLeft, FileText, Link2, Link2Off,
- EyeOff, Eye, Search,
-} from 'lucide-react';
+import React, { useState, useEffect } from 'react';
import { api } from '@/api';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Switch } from '@/components/ui/switch';
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
- AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from '@/components/ui/dialog';
-
-// ─── User export availability flag ───────────────────────────────────────────
-// Flip to true when GET /api/export/user-db and GET /api/export/user-excel exist.
-const USER_EXPORTS_AVAILABLE = true;
-
-// ─── Utilities ────────────────────────────────────────────────────────────────
-
-function fmt(isoStr) {
- if (!isoStr) return '—';
- const d = new Date(isoStr);
- return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
- + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-}
-
-function groupRowsBySheet(rows) {
- const map = new Map();
- for (const row of rows) {
- const key = row.sheet_name || '(unknown sheet)';
- if (!map.has(key)) map.set(key, []);
- map.get(key).push(row);
- }
- return Array.from(map.entries()).map(([name, rows]) => ({ name, rows }));
-}
-
-function initialDecisionFromRecommendation(row) {
- const rec = row.recommendation || {};
- const action = rec.action === 'ambiguous' ? null : (rec.action || row.proposed_action || null);
-
- if (!action || row.requires_user_decision) return { action: null };
- if (action === 'skip_row') return { action: 'skip_row' };
- if (action === 'match_existing_bill') {
- return {
- action,
- bill_id: rec.bill_id ?? row.possible_bill_matches?.[0]?.bill_id ?? null,
- bill_name: null,
- due_day: rec.due_day ?? null,
- actual_amount: rec.actual_amount ?? row.detected_amount ?? null,
- payment_amount: rec.payment_amount ?? row.detected_payment_amount ?? null,
- payment_date: rec.payment_date ?? row.detected_paid_date ?? null,
- notes: row.detected_notes ?? null,
- };
- }
- if (action === 'create_new_bill') {
- return {
- action,
- bill_id: null,
- bill_name: rec.bill_name || row.detected_bill_name || '',
- category_id: rec.category_id ?? null,
- due_day: rec.due_day ?? null,
- expected_amount: rec.expected_amount ?? row.detected_amount ?? null,
- actual_amount: rec.actual_amount ?? row.detected_amount ?? null,
- payment_amount: rec.payment_amount ?? row.detected_payment_amount ?? null,
- payment_date: rec.payment_date ?? row.detected_paid_date ?? null,
- notes: row.detected_notes ?? null,
- };
- }
- return { action };
-}
-
-function safeRawBillName(row) {
- const raw = row.raw_values?.find((v) => {
- const text = String(v || '').trim();
- if (!text || text.length > 80) return false;
- if (/^(?:total|subtotal|sum|grand\s*total)$/i.test(text)) return false;
- if (/^\$?\(?\d[\d,]*(?:\.\d{1,2})?\)?$/.test(text)) return false;
- if (/^\d{1,2}\/\d{1,2}(?:\/\d{2,4})?$/.test(text)) return false;
- if (/^\d{4}-\d{2}-\d{2}$/.test(text)) return false;
- return true;
- });
- return raw ? String(raw).trim() : '';
-}
-
-function buildCreateNewDecision(row, currentDecision = {}) {
- const rec = row.recommendation || {};
- const billName = currentDecision.bill_name
- || row.detected_bill_name
- || rec.bill_name
- || safeRawBillName(row);
-
- return {
- ...currentDecision,
- action: 'create_new_bill',
- previous_match_bill_id: currentDecision.bill_id ?? currentDecision.previous_match_bill_id ?? rec.bill_id ?? row.possible_bill_matches?.[0]?.bill_id ?? null,
- bill_id: null,
- bill_name: billName,
- category_id: currentDecision.category_id ?? rec.category_id ?? null,
- due_day: currentDecision.due_day ?? rec.due_day ?? null,
- expected_amount: currentDecision.expected_amount ?? rec.expected_amount ?? row.detected_amount ?? null,
- actual_amount: currentDecision.actual_amount ?? rec.actual_amount ?? row.detected_amount ?? null,
- payment_amount: currentDecision.payment_amount ?? rec.payment_amount ?? row.detected_payment_amount ?? null,
- payment_date: currentDecision.payment_date ?? rec.payment_date ?? row.detected_paid_date ?? null,
- notes: currentDecision.notes ?? row.detected_notes ?? null,
- };
-}
-
-function buildInitialDecisions(rows) {
- const d = {};
- for (const row of rows) {
- const hasError = row.errors?.length > 0;
- if (hasError || row.proposed_action === 'skip_row') {
- d[row.row_id] = { action: 'skip_row' };
- } else {
- d[row.row_id] = initialDecisionFromRecommendation(row);
- }
- }
- return d;
-}
-
-function isDecisionComplete(action, decision) {
- if (!action) return false;
- if (action === 'skip_row') return true;
- if (action === 'create_new_bill') return !!(decision?.bill_name?.trim());
- if (['match_existing_bill', 'update_monthly_state', 'add_monthly_note', 'create_payment'].includes(action)) {
- return !!decision?.bill_id;
- }
- return true;
-}
-
-// ─── Badges ───────────────────────────────────────────────────────────────────
-
-function SourceBadge({ source }) {
- const MAP = {
- row_date: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
- sheet_name: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
- default: 'bg-amber-500/15 text-amber-600 dark:text-amber-500',
- ambiguous: 'bg-red-500/15 text-red-600 dark:text-red-400',
- };
- const LABELS = { row_date: 'date cell', sheet_name: 'tab name', default: 'default', ambiguous: 'ambiguous' };
- return (
-
- {LABELS[source] ?? source}
-
- );
-}
-
-function ConfidenceBadge({ confidence }) {
- const MAP = { high: 'text-emerald-600 dark:text-emerald-400', medium: 'text-amber-600 dark:text-amber-500', low: 'text-red-500' };
- return
{confidence};
-}
-
-function actionLabel(action) {
- const MAP = {
- match_existing_bill: 'Match existing bill',
- create_new_bill: 'Create new bill',
- skip_row: 'Skip row',
- ambiguous: 'Needs decision',
- update_monthly_state: 'Update monthly record',
- add_monthly_note: 'Add monthly note',
- create_payment: 'Record as payment',
- };
- return MAP[action] || (action ? action.replace(/_/g, ' ') : 'Needs decision');
-}
-
-function importErrorState(err, fallback) {
- const data = err?.data || {};
- return {
- message: err?.message || data.message || data.error || fallback,
- error: data.error || fallback,
- code: data.code || err?.code || null,
- details: Array.isArray(data.details) ? data.details : (Array.isArray(err?.details) ? err.details : []),
- error_id: data.error_id || null,
- };
-}
-
-function SheetStatusBadge({ status }) {
- const MAP = {
- parsed: 'bg-emerald-500/15 text-emerald-600',
- parsed_month_only: 'bg-amber-500/15 text-amber-600',
- ambiguous: 'bg-orange-500/15 text-orange-600',
- skipped: 'bg-muted text-muted-foreground',
- };
- const LABELS = {
- parsed: 'parsed', parsed_month_only: 'month only', ambiguous: 'ambiguous', skipped: 'skipped',
- };
- return (
-
- {LABELS[status] ?? status}
-
- );
-}
-
-// ─── Shared SectionCard ───────────────────────────────────────────────────────
-
-function SectionCard({ title, subtitle, children, className }) {
- return (
-
-
-
{title}
- {subtitle &&
{subtitle}
}
-
-
{children}
-
- );
-}
-
-// ─── Section 2: Download My Data ─────────────────────────────────────────────
-
-function ExportCard({ icon: Icon, title, description, filename, endpoint }) {
- const [loading, setLoading] = useState(false);
-
- const handleDownload = async () => {
- setLoading(true);
- try {
- const res = await fetch(endpoint, { credentials: 'include' });
- if (!res.ok) {
- let data = {};
- try { data = await res.json(); } catch {}
- throw new Error(data.error || `HTTP ${res.status}`);
- }
- const disposition = res.headers.get('Content-Disposition');
- const match = disposition?.match(/filename="?([^"]+)"?/i);
- const name = match ? match[1] : filename;
- const blob = await res.blob();
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url; a.download = name; a.click();
- URL.revokeObjectURL(url);
- toast.success(`${title} downloaded.`);
- } catch (err) {
- toast.error(err.message || 'Download failed.');
- } finally {
- setLoading(false);
- }
- };
-
- const disabled = !USER_EXPORTS_AVAILABLE || loading;
- return (
-
-
-
-
-
-
-
-
{title}
- {!USER_EXPORTS_AVAILABLE && (
-
- Coming soon
-
- )}
-
-
{description}
-
-
-
-
-
-
- );
-}
-
-export function DownloadMyDataSection() {
- return (
-
-
-
-
-
-
Exports may contain sensitive account metadata (website URLs, usernames, account info). Store exported files securely and avoid sharing them unencrypted.
-
-
-
What's included
-
- {['Bills','Payments','Categories','Monthly bill state','Monthly starting amounts','History ranges','Notes','Export metadata'].map(i => (
- -
- {i}
-
- ))}
-
-
-
-
What's not included
-
- {['Passwords','Sessions','Admin settings','Server configuration',"Other users' data",'Full system backup files'].map(i => (
- -
- {i}
-
- ))}
-
-
-
- );
-}
-
-function CountPill({ label, value }) {
- return (
-
-
{label}
-
{value ?? 0}
-
- );
-}
-
-// ─── Section 2: Transaction Matching ─────────────────────────────────────────
-
-const TRANSACTION_FILTERS = [
- { id: 'open', label: 'Open', params: { ignored: 'false' } },
- { id: 'unmatched', label: 'Unmatched', params: { match_status: 'unmatched', ignored: 'false' } },
- { id: 'matched', label: 'Matched', params: { match_status: 'matched', ignored: 'false' } },
- { id: 'ignored', label: 'Ignored', params: { match_status: 'ignored', ignored: 'true' } },
- { id: 'all', label: 'All', params: { ignored: 'all' } },
-];
-
-function transactionStatus(tx) {
- if (tx?.ignored) return 'ignored';
- return tx?.match_status || 'unmatched';
-}
-
-function TransactionStatusBadge({ tx }) {
- const status = transactionStatus(tx);
- const styles = {
- matched: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600',
- ignored: 'border-muted-foreground/30 bg-muted/40 text-muted-foreground',
- unmatched: 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400',
- };
-
- return (
-
- {status}
-
- );
-}
-
-function formatTransactionAmount(amount, currency = 'USD') {
- const value = Math.abs(Number(amount || 0)) / 100;
- const sign = Number(amount || 0) < 0 ? '-' : '+';
- return `${sign}${new Intl.NumberFormat(undefined, {
- style: 'currency',
- currency: currency || 'USD',
- }).format(value)}`;
-}
-
-function transactionDate(tx) {
- return tx?.posted_date || String(tx?.transacted_at || '').slice(0, 10) || '—';
-}
-
-function transactionTitle(tx) {
- return tx?.payee || tx?.description || tx?.memo || 'Transaction';
-}
-
-function matchScoreTone(score) {
- const value = Number(score) || 0;
- if (value >= 80) return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400';
- if (value >= 55) return 'border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400';
- return 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400';
-}
-
-function SuggestedMatchesPanel({ suggestions, loading, actionId, onAccept, onReject }) {
- return (
-
-
-
-
-
-
-
-
Suggested matches
-
{loading ? 'Checking transactions' : `${suggestions.length} ready for review`}
-
-
-
-
- {loading ? (
-
-
- Finding likely bill matches...
-
- ) : suggestions.length === 0 ? (
-
- No suggested matches right now.
-
- ) : (
-
- {suggestions.map(suggestion => {
- const tx = suggestion.transaction || {};
- const bill = suggestion.bill || {};
- const acceptBusy = actionId === `suggestion-match:${suggestion.id}`;
- const rejectBusy = actionId === `suggestion-reject:${suggestion.id}`;
- const busy = acceptBusy || rejectBusy;
-
- return (
-
-
-
-
-
- {suggestion.score}
-
-
{transactionTitle(tx)}
-
-
- {transactionDate(tx)} · {tx.source_label || tx.source_type_label || 'Transaction'}
-
-
-
- {formatTransactionAmount(tx.amount, tx.currency)}
-
-
-
-
-
-
-
{bill.name || `Bill ${suggestion.billId}`}
-
- Expected ${Number(bill.expected_amount || 0).toFixed(2)}
-
-
-
-
- {suggestion.reasons?.length > 0 && (
-
- {suggestion.reasons.slice(0, 4).map(reason => (
-
- {reason}
-
- ))}
-
- )}
-
-
-
-
-
-
- );
- })}
-
- )}
-
- );
-}
-
-function MatchBillDialog({ open, onOpenChange, transaction, bills, onConfirm, loading }) {
- const [query, setQuery] = useState('');
- const [selectedBillId, setSelectedBillId] = useState('');
-
- useEffect(() => {
- if (open) {
- setQuery('');
- setSelectedBillId(transaction?.matched_bill_id ? String(transaction.matched_bill_id) : '');
- }
- }, [open, transaction?.id, transaction?.matched_bill_id]);
-
- const filteredBills = useMemo(() => {
- const q = query.trim().toLowerCase();
- if (!q) return bills.slice(0, 40);
- return bills
- .filter(bill => String(bill.name || '').toLowerCase().includes(q))
- .slice(0, 40);
- }, [bills, query]);
-
- const selectedBill = bills.find(bill => String(bill.id) === String(selectedBillId));
-
- return (
-
- );
-}
-
-function TransactionMatchingSection({ refreshKey }) {
- const [transactions, setTransactions] = useState([]);
- const [suggestions, setSuggestions] = useState([]);
- const [bills, setBills] = useState([]);
- const [filter, setFilter] = useState('open');
- const [loading, setLoading] = useState(true);
- const [suggestionsLoading, setSuggestionsLoading] = useState(true);
- const [billsLoading, setBillsLoading] = useState(true);
- const [actionId, setActionId] = useState(null);
- const [matchOpen, setMatchOpen] = useState(false);
- const [matchTransaction, setMatchTransaction] = useState(null);
-
- const currentFilter = TRANSACTION_FILTERS.find(item => item.id === filter) || TRANSACTION_FILTERS[0];
-
- const loadTransactions = async () => {
- setLoading(true);
- try {
- const data = await api.transactions({ limit: 100, ...currentFilter.params });
- setTransactions(data || []);
- } catch (err) {
- toast.error(err.message || 'Failed to load transactions.');
- setTransactions([]);
- } finally {
- setLoading(false);
- }
- };
-
- const loadSuggestions = async () => {
- setSuggestionsLoading(true);
- try {
- const data = await api.matchSuggestions({ limit: 8 });
- setSuggestions(data || []);
- } catch (err) {
- toast.error(err.message || 'Failed to load match suggestions.');
- setSuggestions([]);
- } finally {
- setSuggestionsLoading(false);
- }
- };
-
- const refreshTransactionWorkbench = async () => {
- await Promise.all([loadTransactions(), loadSuggestions()]);
- };
-
- const loadBills = async () => {
- setBillsLoading(true);
- try {
- const data = await api.bills();
- setBills(data || []);
- } catch {
- setBills([]);
- } finally {
- setBillsLoading(false);
- }
- };
-
- useEffect(() => { loadBills(); }, []);
- useEffect(() => { loadTransactions(); }, [filter, refreshKey]);
- useEffect(() => { loadSuggestions(); }, [refreshKey]);
-
- const openMatchDialog = (tx) => {
- setMatchTransaction(tx);
- setMatchOpen(true);
- if (!bills.length && !billsLoading) loadBills();
- };
-
- const runTransactionAction = async (tx, action) => {
- setActionId(`${action}:${tx.id}`);
- try {
- if (action === 'unmatch') {
- await api.unmatchTransaction(tx.id);
- toast.success('Transaction unmatched.');
- } else if (action === 'ignore') {
- await api.ignoreTransaction(tx.id);
- toast.success('Transaction ignored.');
- } else if (action === 'unignore') {
- await api.unignoreTransaction(tx.id);
- toast.success('Transaction restored.');
- }
- await refreshTransactionWorkbench();
- } catch (err) {
- toast.error(err.message || 'Transaction action failed.');
- } finally {
- setActionId(null);
- }
- };
-
- const confirmMatch = async (billId) => {
- if (!matchTransaction) return;
- setActionId(`match:${matchTransaction.id}`);
- try {
- await api.matchTransaction(matchTransaction.id, billId);
- toast.success('Transaction matched to bill.');
- setMatchOpen(false);
- setMatchTransaction(null);
- await refreshTransactionWorkbench();
- } catch (err) {
- toast.error(err.message || 'Transaction match failed.');
- } finally {
- setActionId(null);
- }
- };
-
- const acceptSuggestion = async (suggestion) => {
- setActionId(`suggestion-match:${suggestion.id}`);
- try {
- await api.matchTransaction(suggestion.transactionId, suggestion.billId);
- toast.success('Suggested match confirmed.');
- await refreshTransactionWorkbench();
- } catch (err) {
- toast.error(err.message || 'Suggested match failed.');
- } finally {
- setActionId(null);
- }
- };
-
- const rejectSuggestion = async (suggestion) => {
- setActionId(`suggestion-reject:${suggestion.id}`);
- try {
- await api.rejectMatchSuggestion(suggestion.id);
- toast.success('Suggestion rejected.');
- await loadSuggestions();
- } catch (err) {
- toast.error(err.message || 'Suggestion could not be rejected.');
- } finally {
- setActionId(null);
- }
- };
-
- return (
-
-
-
-
- {TRANSACTION_FILTERS.map(item => (
-
- ))}
-
-
-
-
-
-
-
- {loading ? (
-
Loading transactions…
- ) : transactions.length === 0 ? (
-
- No transactions found for this filter.
-
- ) : (
-
-
-
- | Date |
- Transaction |
- Match |
- Amount |
- Actions |
-
-
-
- {transactions.map(tx => {
- const status = transactionStatus(tx);
- const busy = actionId?.endsWith(`:${tx.id}`);
- return (
-
- |
- {transactionDate(tx)}
- |
-
-
- {transactionTitle(tx)}
-
- {[tx.description, tx.account_name, tx.source_label].filter(Boolean).join(' · ') || '—'}
-
- |
-
-
-
- {tx.matched_bill_name ? (
- {tx.matched_bill_name}
- ) : (
- No bill linked
- )}
-
- |
-
- {formatTransactionAmount(tx.amount, tx.currency)}
- |
-
-
- {status === 'ignored' ? (
-
- ) : (
- <>
- {status === 'matched' ? (
-
- ) : (
-
- )}
-
-
- )}
-
- |
-
- );
- })}
-
-
- )}
-
-
- );
-}
-
-// ─── Section 1: Import Transaction CSV ───────────────────────────────────────
-
-const CSV_MAPPING_FIELDS = [
- 'posted_date',
- 'amount',
- 'debit_amount',
- 'credit_amount',
- 'description',
- 'payee',
- 'memo',
- 'category',
- 'account',
- 'transaction_id',
- 'transaction_type',
- 'currency',
- 'transacted_at',
-];
-
-function compactMapping(mapping) {
- return Object.fromEntries(
- Object.entries(mapping || {}).filter(([, value]) => value),
- );
-}
-
-function canCommitCsvMapping(mapping) {
- return !!mapping?.posted_date && !!(mapping.amount || mapping.debit_amount || mapping.credit_amount);
-}
-
-const CSV_IMPORT_STEPS = ['Upload', 'Preview', 'Map', 'Commit', 'Results'];
-
-function csvImportStepIndex(preview, mapping, commitState) {
- if (commitState.status === 'done') return 4;
- if (commitState.status === 'loading') return 3;
- if (preview.status === 'ready') return canCommitCsvMapping(mapping) ? 3 : 2;
- if (preview.status === 'loading' || preview.status === 'error') return 1;
- return 0;
-}
-
-function CsvImportStepper({ activeIndex }) {
- return (
-
- {CSV_IMPORT_STEPS.map((step, index) => {
- const complete = index < activeIndex;
- const active = index === activeIndex;
- return (
-
-
- {complete ? : index + 1}
-
- {step}
-
- );
- })}
-
- );
-}
-
-function csvFieldRequirement(field, mapping) {
- if (field === 'posted_date') return 'Required';
- if (['amount', 'debit_amount', 'credit_amount'].includes(field)) {
- return canCommitCsvMapping({ ...mapping, posted_date: mapping?.posted_date || '__date__' })
- ? 'Amount source'
- : 'One required';
- }
- return 'Optional';
-}
-
-function csvFieldSamples(preview, header) {
- if (!header) return [];
- const values = [];
- for (const row of preview?.sampleRows || []) {
- const value = String(row?.[header] || '').trim();
- if (value && !values.includes(value)) values.push(value);
- if (values.length >= 3) break;
- }
- return values;
-}
-
-function CsvMappingRow({ field, label, preview, mapping, onChange, disabled = false }) {
- const headers = preview?.headers || [];
- const suggested = preview?.suggestedMapping?.[field] || '';
- const current = mapping[field] || '';
- const used = new Set(Object.entries(mapping)
- .filter(([key, value]) => key !== field && value)
- .map(([, value]) => value));
- const requirement = csvFieldRequirement(field, mapping);
- const missingRequired = (requirement === 'Required' || requirement === 'One required') && !current;
- const samples = csvFieldSamples(preview, current);
- const suggestedAvailable = suggested && suggested !== current && !used.has(suggested);
-
- return (
-
-
-
-
{label}
-
- {requirement}
-
-
-
{field}
-
-
-
-
-
- {current && current === suggested && (
- Suggested match
- )}
- {suggestedAvailable && !disabled && (
-
- )}
- {missingRequired && (
- Needs a column
- )}
-
-
-
-
- {samples.length > 0 ? (
-
- {samples.map(value => (
-
- {value}
-
- ))}
-
- ) : (
-
- {current ? 'No sample values' : 'Map a column to preview values'}
-
- )}
-
-
- );
-}
-
-function CsvMappingReview({ preview, fields, mapping, onMappingChange, onUseSuggested, onClearMapping, disabled = false }) {
- const mappingFields = CSV_MAPPING_FIELDS.filter(field => fields[field]);
- const mappedCount = mappingFields.filter(field => mapping[field]).length;
- const hasSuggestedMapping = Object.values(preview?.suggestedMapping || {}).some(Boolean);
- const missingRequired = [
- !mapping.posted_date ? 'Posted date' : null,
- !(mapping.amount || mapping.debit_amount || mapping.credit_amount) ? 'Amount' : null,
- ].filter(Boolean);
-
- return (
-
-
-
-
Column mapping
-
- {mappedCount} of {mappingFields.length} fields mapped
- {missingRequired.length > 0 && ` · missing ${missingRequired.join(' and ')}`}
-
-
-
-
-
-
-
-
-
- Field
- CSV Column
- Sample Values
-
-
-
- {mappingFields.map(field => (
-
- ))}
-
-
- );
-}
-
-function CsvSampleTable({ preview }) {
- const headers = preview?.headers || [];
- const sampleRows = preview?.sampleRows || [];
- const visibleHeaders = headers.slice(0, 8);
- const hiddenCount = Math.max(0, headers.length - visibleHeaders.length);
-
- if (sampleRows.length === 0) {
- return
No sample rows found.
;
- }
-
- return (
-
-
-
-
- {visibleHeaders.map(header => (
- | {header} |
- ))}
- {hiddenCount > 0 && (
- +{hiddenCount} |
- )}
-
-
-
- {sampleRows.map((row, index) => (
-
- {visibleHeaders.map(header => (
- |
- {row[header] || '—'}
- |
- ))}
- {hiddenCount > 0 && (
- more columns |
- )}
-
- ))}
-
-
-
- );
-}
-
-function formatCsvRowDetail(detail) {
- if (!detail) return '';
- const field = detail.field ? `${detail.field}: ` : '';
- return `${field}${detail.message || detail.value || JSON.stringify(detail)}`;
-}
-
-export function ImportTransactionCsvSection({ onHistoryRefresh }) {
- const fileRef = useRef(null);
- const [file, setFile] = useState(null);
- const [preview, setPreview] = useState({ status: 'idle', data: null, error: null });
- const [mapping, setMapping] = useState({});
- const [commitState, setCommitState] = useState({ status: 'idle', result: null, error: null });
-
- const reset = () => {
- setFile(null);
- setPreview({ status: 'idle', data: null, error: null });
- setMapping({});
- setCommitState({ status: 'idle', result: null, error: null });
- if (fileRef.current) fileRef.current.value = '';
- };
-
- const handleMappingChange = (field, header) => {
- if (commitState.status === 'done') return;
- setMapping(prev => {
- const next = { ...prev };
- if (header) next[field] = header;
- else delete next[field];
- return next;
- });
- setCommitState({ status: 'idle', result: null, error: null });
- };
-
- const handlePreview = async () => {
- if (!file) {
- toast.error('Choose a CSV file first.');
- return;
- }
- setPreview({ status: 'loading', data: null, error: null });
- setMapping({});
- setCommitState({ status: 'idle', result: null, error: null });
- try {
- const data = await api.previewCsvTransactionImport(file);
- setPreview({ status: 'ready', data, error: null });
- setMapping(compactMapping(data.suggestedMapping || {}));
- toast.success('CSV preview ready.');
- } catch (err) {
- const errorState = importErrorState(err, 'CSV preview failed.');
- setPreview({ status: 'error', data: null, error: errorState });
- toast.error(errorState.message || 'CSV preview failed.');
- }
- };
-
- const handleCommit = async () => {
- if (!preview.data?.import_session_id || !canCommitCsvMapping(mapping)) return;
- setCommitState({ status: 'loading', result: null, error: null });
- try {
- const result = await api.commitCsvTransactionImport({
- import_session_id: preview.data.import_session_id,
- mapping: compactMapping(mapping),
- });
- setCommitState({ status: 'done', result, error: null });
- toast.success(`CSV imported — ${result.imported} imported, ${result.skipped} skipped.`);
- onHistoryRefresh?.();
- } catch (err) {
- const errorState = importErrorState(err, 'CSV import failed.');
- setCommitState({ status: 'error', result: null, error: errorState });
- toast.error(errorState.message || 'CSV import failed.');
- }
- };
-
- const applySuggestedMapping = () => {
- if (commitState.status === 'done') return;
- setMapping(compactMapping(preview.data?.suggestedMapping || {}));
- setCommitState({ status: 'idle', result: null, error: null });
- };
-
- const clearMapping = () => {
- if (commitState.status === 'done') return;
- setMapping({});
- setCommitState({ status: 'idle', result: null, error: null });
- };
-
- const fields = preview.data?.fields || {};
- const canCommit = preview.status === 'ready'
- && preview.data?.import_session_id
- && canCommitCsvMapping(mapping)
- && commitState.status !== 'loading'
- && commitState.status !== 'done';
- const activeStep = csvImportStepIndex(preview, mapping, commitState);
- const failedRows = (commitState.result?.details || []).filter(d => d.result === 'failed');
- const skippedRows = (commitState.result?.details || []).filter(d => d.result === 'skipped_duplicate');
-
- return (
-
-
-
-
-
-
-
Import transaction rows from CSV.
-
- This importer creates shared transaction records only. It does not match transactions to bills yet.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {preview.status === 'error' && (
-
-
- {preview.error?.message || 'CSV preview failed.'}
- {preview.error?.details?.length > 0 && (
-
- {preview.error.details.map((d, i) => (
- - {d.message || JSON.stringify(d)}
- ))}
-
- )}
-
- )}
-
- {preview.status === 'ready' && preview.data && (
-
-
-
-
-
CSV Preview
-
{file?.name || 'Transaction CSV'}
-
-
-
-
-
-
-
-
- {preview.data.errors?.length > 0 && (
-
-
Review mapping
-
- {preview.data.errors.map((issue, i) => (
- -
-
- {issue.message || JSON.stringify(issue)}
-
- ))}
-
-
- )}
-
-
-
-
-
-
-
-
-
- {canCommitCsvMapping(mapping) ? 'Ready to commit' : 'Mapping incomplete'}
-
-
- Duplicates are skipped using a CSV transaction ID when available, otherwise a stable row hash.
-
-
- {commitState.status === 'done' ? (
-
- ) : (
-
- )}
-
-
- )}
-
- {commitState.status === 'done' && commitState.result && (
-
-
-
-
CSV transaction import complete
-
-
-
-
-
-
- {skippedRows.length > 0 && (
-
-
Skipped duplicates ({skippedRows.length})
-
- {skippedRows.map(row => (
- -
- Row {row.row}: {row.provider_transaction_id}
-
- ))}
-
-
- )}
- {failedRows.length > 0 && (
-
-
Failed rows ({failedRows.length})
-
-
- )}
-
- )}
-
- {commitState.status === 'error' && (
-
-
- {commitState.error?.message || 'CSV import failed.'}
- {commitState.error?.details?.length > 0 && (
-
- {commitState.error.details.map((d, i) => (
- - {d.message || JSON.stringify(d)}
- ))}
-
- )}
-
- )}
-
- );
-}
-
-// ─── Section 3: Import My Data Export ────────────────────────────────────────
-
-export function ImportMyDataSection({ onHistoryRefresh }) {
- const fileRef = useRef(null);
- const [file, setFile] = useState(null);
- const [preview, setPreview] = useState({ status: 'idle', data: null, error: null });
- const [applyState, setApplyState] = useState({ status: 'idle', result: null, error: null });
- const [confirmOpen, setConfirmOpen] = useState(false);
-
- const reset = () => {
- setFile(null);
- setPreview({ status: 'idle', data: null, error: null });
- setApplyState({ status: 'idle', result: null, error: null });
- if (fileRef.current) fileRef.current.value = '';
- };
-
- const handlePreview = async () => {
- if (!file) {
- toast.error('Choose a SQLite data export first.');
- return;
- }
- setPreview({ status: 'loading', data: null, error: null });
- setApplyState({ status: 'idle', result: null, error: null });
- try {
- const data = await api.previewUserDbImport(file);
- setPreview({ status: 'ready', data, error: null });
- toast.success('SQLite export preview ready.');
- } catch (err) {
- setPreview({ status: 'error', data: null, error: importErrorState(err, 'SQLite import preview failed.') });
- toast.error(err.message || 'SQLite import preview failed.');
- }
- };
-
- const handleApply = () => {
- if (!preview.data?.import_session_id) return;
- setConfirmOpen(true);
- };
-
- const handleConfirmImport = async () => {
- setConfirmOpen(false);
- setApplyState({ status: 'loading', result: null, error: null });
- try {
- const result = await api.applyUserDbImport({
- import_session_id: preview.data.import_session_id,
- options: { overwrite: false },
- });
- setApplyState({ status: 'done', result, error: null });
- toast.success('SQLite data import applied.');
- onHistoryRefresh?.();
- } catch (err) {
- setApplyState({ status: 'error', result: null, error: importErrorState(err, 'SQLite import apply failed.') });
- toast.error(err.message || 'SQLite import apply failed.');
- }
- };
-
- const counts = preview.data?.counts || {};
- const summary = preview.data?.summary || {};
-
- return (
- <>
-
-
-
-
-
-
-
Import a SQLite data export created by this app.
-
- This is not a full system restore. Existing records are skipped by default, and admin/system data is never imported.
-
-
-
-
-
-
-
-
-
-
-
-
-
- {preview.status === 'error' && (
-
-
- {preview.error?.message || 'SQLite import preview failed.'}
- {preview.error?.details?.length > 0 && (
-
- {preview.error.details.map((d, i) => (
- - {d.message || d.table || JSON.stringify(d)}
- ))}
-
- )}
-
- )}
-
- {preview.status === 'ready' && preview.data && (
-
-
-
-
-
Preview ready
-
- Exported {fmt(preview.data.metadata?.exported_at)} · {preview.data.source_filename || 'SQLite export'}
-
-
-
- User data only
-
-
-
-
-
-
-
-
-
-
- {Object.entries(summary).filter(([, v]) => v && typeof v === 'object').map(([key, value]) => (
-
-
{key.replace(/_/g, ' ')}
-
- create {value.create || 0} · skip {value.skip || 0} · conflict {value.conflict || 0}
-
-
- ))}
-
- {preview.data.warnings?.length > 0 && (
-
- {preview.data.warnings.map((warning, i) => (
-
- {warning}
-
- ))}
-
- )}
-
-
-
-
Review the preview before applying. Nothing is imported until you confirm.
-
-
-
- )}
-
- {applyState.status === 'done' && applyState.result && (
-
-
SQLite import applied
-
-
-
-
-
-
-
- )}
-
- {applyState.status === 'error' && (
-
-
{applyState.error?.message || 'SQLite import apply failed.'}
-
- )}
-
- {/* Import confirmation dialog */}
-
-
-
- Import SQLite data export?
-
- Import this SQLite data export into your account? Existing records will be skipped by default.
-
-
-
- Cancel
-
- Confirm Import
-
-
-
-
-
- );
-}
-
-// ─── Section 4: Import History ────────────────────────────────────────────────
-
-export function ImportHistorySection({ history, loading, onRefresh }) {
- if (loading) {
- return (
-
- Loading…
-
- );
- }
-
- const rows = history ?? [];
-
- return (
-
-
-
- {rows.length === 0 ? 'No imports yet.' : `${rows.length} import${rows.length === 1 ? '' : 's'}`}
-
-
-
-
-
-
- {['Date','File','Sheet','Parsed','Created','Updated','Skipped','Errors'].map(h => (
- | {h} |
- ))}
-
-
-
- {rows.map(r => (
-
- |
- {fmt(r.imported_at)}
- |
- {r.source_filename || '—'} |
- {r.sheet_name || '—'} |
- {r.rows_parsed} |
- {r.rows_created} |
- {r.rows_updated} |
- {r.rows_skipped} |
- {r.rows_errored} |
-
- ))}
-
-
-
- );
-}
-
-// ─── XLSX Import: Workbook Summary ────────────────────────────────────────────
-
-function WorkbookSummaryCard({ workbook }) {
- const isMulti = workbook.parse_mode === 'all_sheets';
-
- return (
-
-
-
Workbook Summary
-
- {isMulti ? `${workbook.total_row_count} rows across ${workbook.sheet_names.length} tabs` : `${workbook.row_count} rows · ${workbook.selected_sheet}`}
-
-
- {isMulti && workbook.sheets?.length > 0 && (
-
- {workbook.sheets.map(s => (
-
-
{s.name}
-
- {s.detected_year && s.detected_month && (
-
- {String(s.detected_month).padStart(2,'0')}/{s.detected_year}
-
- )}
-
- {s.status !== 'skipped' && {s.row_count} rows}
-
-
- ))}
-
- )}
-
- );
-}
-
-// ─── XLSX Import: Row Decision Controls ──────────────────────────────────────
-
-const ACTIONS_NEEDING_BILL = new Set(['match_existing_bill','update_monthly_state','add_monthly_note','create_payment']);
-
-function RowDecisionRow({ row, decision, onDecisionChange, allBills, categories, selected, onSelectedChange }) {
- const [expanded, setExpanded] = useState(row.requires_user_decision || !decision?.action);
-
- const action = decision?.action ?? null;
- const isSkip = action === 'skip_row';
- const hasError = row.errors?.length > 0;
- const complete = isDecisionComplete(action, decision);
- const rec = row.recommendation || {};
-
- const suggestedBills = row.possible_bill_matches ?? [];
- const suggestedIds = new Set(suggestedBills.map(b => b.bill_id));
- const otherBills = allBills.filter(b => !suggestedIds.has(b.id));
-
- const handleAction = (val) => {
- const next = { ...decision, action: val };
- if (val === 'create_new_bill') {
- Object.assign(next, buildCreateNewDecision(row, decision));
- } else if (ACTIONS_NEEDING_BILL.has(val)) {
- next.bill_name = null;
- next.bill_id = decision?.bill_id ?? decision?.previous_match_bill_id ?? rec.bill_id ?? suggestedBills[0]?.bill_id ?? null;
- next.actual_amount = decision?.actual_amount ?? rec.actual_amount ?? row.detected_amount ?? null;
- next.payment_amount = decision?.payment_amount ?? rec.payment_amount ?? row.detected_payment_amount ?? null;
- next.payment_date = decision?.payment_date ?? rec.payment_date ?? row.detected_paid_date ?? null;
- } else {
- next.bill_id = null;
- next.bill_name = null;
- }
- onDecisionChange(row.row_id, next);
- if (val === 'skip_row') setExpanded(false);
- };
-
- const handleBill = (e) => {
- onDecisionChange(row.row_id, { ...decision, bill_id: parseInt(e.target.value, 10) || null });
- };
-
- const handleBillName = (e) => {
- onDecisionChange(row.row_id, { ...decision, bill_name: e.target.value });
- };
-
- const handleDecisionField = (field, value) => {
- onDecisionChange(row.row_id, { ...decision, [field]: value });
- };
-
- return (
-
- {/* Main row */}
-
setExpanded(e => !e)}
- >
- {/* Selection */}
-
e.stopPropagation()}>
- onSelectedChange(row.row_id, e.target.checked)}
- aria-label={`Select row ${row.source_row_number}`}
- className="h-4 w-4 rounded border-border accent-primary"
- />
-
-
- {/* Status icon */}
-
- {hasError ?
:
- isSkip ?
:
- complete ?
:
- action !== null ?
:
-
}
-
-
- {/* Content */}
-
-
- #{row.source_row_number}
- {row.sheet_name && {row.sheet_name}}
- {row.detected_year && row.detected_month && (
-
- {String(row.detected_month).padStart(2,'0')}/{row.detected_year}
-
- )}
- {row.year_month_source && }
-
-
-
- {row.detected_bill_name || '(no bill name)'}
-
- {row.detected_amount != null && (
-
- ${row.detected_amount.toFixed(2)}
-
- )}
- {row.detected_paid_date && (
-
- paid {row.detected_paid_date}
-
- )}
- {row.detected_labels?.length > 0 && (
- {row.detected_labels.join(', ')}
- )}
- {row.detected_notes && (
- {row.detected_notes}
- )}
-
-
-
- {/* Right: action status + expand */}
-
- {action === null ? (
- Needs decision
- ) : isSkip ? (
- Skipped
- ) : (
- {action.replace(/_/g,' ')}
- )}
- {action !== 'skip_row' && (
- expanded ? :
- )}
-
-
-
- {/* Expanded decision controls */}
- {expanded && !hasError && (
-
- {/* Recommendation */}
- {rec.action && (
-
-
- Recommended: {actionLabel(rec.action)}
- {rec.bill_name && rec.action === 'match_existing_bill' && (
- → {rec.bill_name}
- )}
- {rec.category_name && (
- Category: {rec.category_name}
- )}
- {rec.due_day && Due day: {rec.due_day}}
- {rec.actual_amount != null && ${Number(rec.actual_amount).toFixed(2)}}
-
-
- {rec.reason &&
Reason: {rec.reason}
}
-
- )}
-
- {/* Warnings */}
- {(rec.warnings?.length > 0 || row.warnings?.length > 0) && (
-
- {Array.from(new Set([...(rec.warnings || []), ...(row.warnings || [])])).map((w, i) => (
-
- {w}
-
- ))}
-
- )}
-
- {/* Possible matches hint */}
- {suggestedBills.length > 0 && (
-
- Suggested:
- {suggestedBills.slice(0, 3).map(b => (
-
- ))}
-
- )}
-
- {/* Action selector */}
-
-
-
-
-
- {/* Bill selector (for actions that need a bill) */}
- {ACTIONS_NEEDING_BILL.has(action) && (
-
-
-
-
- )}
-
- {/* Bill name input for create_new_bill */}
- {action === 'create_new_bill' && (
-
- )}
-
- {action && action !== 'skip_row' && (
-
-
- handleDecisionField('payment_date', e.target.value || null)}
- className="h-8 text-sm w-40"
- />
- handleDecisionField('payment_amount', e.target.value === '' ? null : parseFloat(e.target.value))}
- placeholder="Paid amount"
- className="h-8 text-sm w-36"
- />
-
- )}
-
- {/* Quick skip */}
- {action !== 'skip_row' && (
-
- )}
-
- )}
-
- );
-}
-
-// ─── XLSX Import: Preview Table ───────────────────────────────────────────────
-
-function PreviewTable({ rows, decisions, onDecisionChange, allBills, categories, selectedRows, onSelectedChange }) {
- const groups = groupRowsBySheet(rows);
- const multiTab = groups.length > 1;
-
- return (
-
- {groups.map(({ name, rows: groupRows }) => (
-
- {multiTab && (
-
-
- {name}
- · {groupRows.length} rows
-
- )}
- {groupRows.map(row => (
-
- ))}
-
- ))}
-
- );
-}
-
-function BulkActionBar({
- rows,
- selectedRows,
- onSelectAll,
- onClearSelection,
- onBulkSkip,
- onBulkCreateNew,
- onBulkReset,
-}) {
- const allSelected = rows.length > 0 && rows.every(r => selectedRows.has(r.row_id));
- const selectedCount = selectedRows.size;
-
- return (
-
-
-
-
-
- {selectedCount > 0 && (
- {selectedCount} row{selectedCount === 1 ? '' : 's'} selected
- )}
- {selectedCount > 0 && (
- <>
-
-
-
-
-
- )}
-
-
-
- );
-}
-
-// ─── Section 1: Import Spreadsheet History ────────────────────────────────────
-
-const INITIAL_OPTIONS = {
- parseAllSheets: true,
- defaultYear: new Date().getFullYear(),
- defaultMonth: '',
-};
-
-// ─── Bill History Import helpers ──────────────────────────────────────────────
-
-function ConfidenceDot({ level }) {
- const cls = level === 'high' ? 'bg-emerald-500'
- : level === 'medium' ? 'bg-amber-500'
- : 'bg-muted-foreground/30';
- return
;
-}
-
-function useBillGroups(previewRows, allBills) {
- return useMemo(() => {
- const billMap = new Map(allBills.map(b => [b.id, b]));
- const groups = new Map();
-
- for (const row of previewRows) {
- for (const match of (row.possible_bill_matches ?? [])) {
- if (!billMap.has(match.bill_id)) continue;
- if (!groups.has(match.bill_id)) {
- groups.set(match.bill_id, {
- bill: billMap.get(match.bill_id),
- rows: [],
- counts: { high: 0, medium: 0, low: 0 },
- });
- }
- const g = groups.get(match.bill_id);
- if (!g.rows.find(r => r.row_id === row.row_id)) {
- g.rows.push({ ...row, _match: match });
- g.counts[match.match_confidence] = (g.counts[match.match_confidence] || 0) + 1;
- }
- }
- }
- return [...groups.values()].sort((a, b) =>
- b.rows.length !== a.rows.length ? b.rows.length - a.rows.length : b.counts.high - a.counts.high
- );
- }, [previewRows, allBills]);
-}
-
-function rowDateLabel(row) {
- if (row.detected_year && row.detected_month)
- return `${row.detected_year}-${String(row.detected_month).padStart(2, '0')}`;
- return row.detected_paid_date ?? '—';
-}
-
-function billImportProgress(rows, importResult) {
- const completedRowIds = importResult?.completedRowIds ?? new Set();
- const remainingRows = rows.filter(row => !completedRowIds.has(row.row_id));
- return {
- completedCount: rows.length - remainingRows.length,
- remainingRows,
- remainingCount: remainingRows.length,
- };
-}
-
-function detailImportedAnything(detail) {
- return ['created', 'updated', 'overwritten', 'imported'].includes(detail?.result)
- || detail?.payment === 'created';
-}
-
-function detailCompletesImport(detail) {
- if (!detail?.row_id) return false;
- if (['error', 'ambiguous', 'skipped_conflict'].includes(detail.result)) return false;
- if (detail.result === 'skipped') return false;
- return detailImportedAnything(detail)
- || detail.result === 'skipped_duplicate'
- || detail.payment === 'skipped_duplicate';
-}
-
-function BillDetailView({ group, onBack, onImport, isImporting, importResult }) {
- const { bill, rows } = group;
- const { completedCount, remainingCount } = billImportProgress(rows, importResult);
- const sorted = [...rows].sort((a, b) => {
- const da = (a.detected_year ?? 0) * 100 + (a.detected_month ?? 0);
- const db = (b.detected_year ?? 0) * 100 + (b.detected_month ?? 0);
- return da - db;
- });
-
- return (
-
-
-
-
{bill.name}
-
- {importResult && (
-
-
- {completedCount === rows.length
- ? 'All imported'
- : `${completedCount} imported · ${remainingCount} remaining`}
- {importResult.duplicates > 0
- && ` · ${importResult.duplicates} dupes`}
-
- {importResult.duplicates > 0 && importResult.earliestDup && (
-
- {importResult.duplicates} dup{importResult.duplicates > 1 ? 's' : ''} · recorded{' '}
- {importResult.earliestDup.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
-
- )}
-
- )}
-
-
-
-
- {sorted.map(row => (
-
-
- {rowDateLabel(row)}
-
- {row.detected_amount != null ? `$${Number(row.detected_amount).toFixed(2)}` : '—'}
-
- {row.detected_name ?? '—'}
-
- {row._match.match_confidence}
-
-
- ))}
-
-
- );
-}
-
-function BillHistoryView({ previewRows, allBills, importingBillId, billImportResults, onImportBill }) {
- const [selectedBillId, setSelectedBillId] = useState(null);
- const billGroups = useBillGroups(previewRows, allBills);
-
- if (billGroups.length === 0) {
- return (
-
- No existing bills matched rows in this file.
-
- );
- }
-
- if (selectedBillId) {
- const group = billGroups.find(g => g.bill.id === selectedBillId);
- return group
- ?
setSelectedBillId(null)}
- onImport={() => onImportBill(group)} />
- : null;
- }
-
- return (
-
- {billGroups.map(g => {
- const { bill, rows, counts } = g;
- const isImporting = importingBillId === bill.id;
- const importResult = billImportResults.get(bill.id) ?? null;
- const { completedCount, remainingCount } = billImportProgress(rows, importResult);
-
- const sorted3 = [...rows]
- .sort((a, b) => {
- const da = (a.detected_year ?? 0) * 100 + (a.detected_month ?? 0);
- const db = (b.detected_year ?? 0) * 100 + (b.detected_month ?? 0);
- return da - db;
- })
- .slice(0, 3);
-
- return (
-
-
-
-
{bill.name}
-
- {rows.length} row{rows.length !== 1 ? 's' : ''}
-
- {counts.high > 0 &&
{counts.high} high}
- {counts.medium > 0 &&
{counts.medium} med}
- {counts.low > 0 &&
{counts.low} low}
- {importResult && (() => {
- const allImported = completedCount === rows.length;
- const fmtDate = d => d?.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
- const dupDate = importResult.earliestDup ? ` · ${fmtDate(importResult.earliestDup)}` : '';
- return (
-
-
- {allImported ? 'All imported' : `${completedCount} imported · ${remainingCount} remaining`}
- {importResult.duplicates > 0 && ` · ${importResult.duplicates} dupes`}
- {importResult.errored > 0 && ` · ${importResult.errored} errors`}
-
- {importResult.duplicates > 0 && (
-
- {importResult.duplicates} duplicate{importResult.duplicates > 1 ? 's' : ''}{dupDate}
-
- )}
-
- );
- })()}
-
-
- {sorted3.map(row => (
-
-
- {rowDateLabel(row)}
- {row.detected_amount != null && (
- ${Number(row.detected_amount).toFixed(2)}
- )}
- {row.detected_name &&
- row.detected_name.toLowerCase() !== bill.name.toLowerCase() && (
- "{row.detected_name}"
- )}
-
- ))}
- {rows.length > 3 && (
-
- )}
-
-
-
- {importResult ? (
-
- ) : (
-
- )}
-
-
-
- );
- })}
-
-
- {/* File picker */}
-
-
-
- setFile(e.target.files?.[0] ?? null)} />
-
- {file && (
-
- {file.name}
-
- )}
-
-
-
- {/* Options */}
-
-
- opt('parseAllSheets', v)}
- id="parse-all" />
-
-
-
-
- opt('defaultYear', e.target.value)}
- className="w-24 h-8 text-sm" />
-
- {!options.parseAllSheets && (
-
-
- opt('defaultMonth', e.target.value)}
- className="w-20 h-8 text-sm" />
-
- )}
-
-
- {/* Preview button */}
-
-
- {(preview.status === 'ready' || preview.status === 'error' || applyState.status !== 'idle') && (
-
- )}
-
-
- {/* Error from preview */}
- {preview.status === 'error' && (
-
-
{preview.error?.message || preview.error || 'Preview failed.'}
- {preview.error?.details?.length > 0 && (
-
- {preview.error.details.map((d, i) => (
- - {d.row_id ? `${d.row_id}: ` : ''}{d.message}
- ))}
-
- )}
-
- )}
-
-
- {/* Workbook summary */}
-
-
- {/* Row decision table */}
- {previewRows.length > 0 ? (
-
- {/* Tab header */}
-
-
-
-
-
-
- {viewMode === 'rows'
- ? 'Select rows, apply bulk decisions, then import.'
- : 'Click a bill to queue its entire history from this file.'}
-
-
-
- {/* Rows view */}
- {viewMode === 'rows' && (
- <>
-
-
-
- )}
-
- {/* Bills view */}
- {viewMode === 'bills' && (
-
- )}
-
- ) : (
-
No data rows found in this file.
- )}
-
- {/* Apply bar */}
- {previewRows.length > 0 && (
-
-
- {previewRows.length} rows reviewed
- {pendingRows.length} to apply
- {skipRows.length} skipped
- {unresolvedRows.length > 0 && (
- {unresolvedRows.length} need a decision
- )}
-
-
-
- )}
-
-
- Applying import…
-
- )}
-
- {/* ── Apply result ──────────────────────────────────────────────────────── */}
- {applyState.status === 'done' && applyState.result && (
-
-
-
-
-
Import applied successfully
-
-
- {[
- { label: 'Created', value: applyState.result.rows_created, color: 'text-emerald-600' },
- { label: 'Updated', value: applyState.result.rows_updated, color: 'text-blue-600' },
- { label: 'Skipped', value: applyState.result.rows_skipped, color: 'text-muted-foreground' },
- { label: 'Errors', value: applyState.result.rows_errored, color: 'text-red-500' },
- ].map(({ label, value, color }) => (
-
- ))}
-
-
-
-
-
-
{applyState.error?.message || applyState.error || 'Apply failed.'}
- {applyState.error?.details?.length > 0 && (
-
- {applyState.error.details.map((d, i) => (
- -
- {d.row_id ? `${d.row_id}: ` : ''}
- {d.field ? `${d.field} - ` : ''}
- {d.message}
-
- ))}
-
- )}
- {applyState.error?.error_id && (
-
Error ID: {applyState.error.error_id}
- )}
-
-
- {statusLoading ? (
-
Loading…
- ) : seeded ? (
- <>
-
Demo data seeded
-
-
-
Bills
-
{counts.bills}
-
-
-
Categories
-
{counts.categories}
-
-
-
- ) : (
-
- Create 20 realistic demo bills and 8 demo categories for testing purposes.
- The data will be associated with your account.
-
- )}
-
-
-
-
-
-
-
-
-
-
- Clear Demo Data
-
- This will remove {counts.bills} demo bills and {counts.categories} demo categories from your account. This cannot be undone.
-
-
-
- Cancel
-
- {clearing ? <>Clearing… : 'Clear Data'}
-
-
-
-
-
-