@accounter/scraper-app 0.0.1

package/src/ui/screens/config/accounts-tab.tsx

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useMemo, useState, type ReactElement } from 'react';
+import { AccountRecord } from '../../../server/vault.js';
+import { deleteAccount, fetchAccounts, updateStatus } from '../../lib/api.js';
+import { SOURCE_LABELS } from './source-types.js';
+
+type SourceType = 'poalim' | 'discount' | 'isracard' | 'amex' | 'cal' | 'max';
+type AccountStatus = 'accepted' | 'ignored' | 'pending';
+
+const STATUS_COLORS: Record<AccountStatus, string> = {
+  accepted: '#2a7a2a',
+  ignored: '#999',
+  pending: '#b85c00',
+};
+
+function StatusBadge({ status }: { status: AccountStatus }): ReactElement {
+  return (
+    <span
+      style={{
+        padding: '2px 8px',
+        borderRadius: 4,
+        fontSize: '0.8em',
+        color: '#fff',
+        background: STATUS_COLORS[status],
+      }}
+    >
+      {status}
+    </span>
+  );
+}
+
+type AccountRowProps = {
+  account: AccountRecord;
+  onStatusChange(id: string, status: 'accepted' | 'ignored'): void;
+  onDelete(id: string): void;
+};
+
+function AccountRow({ account, onStatusChange, onDelete }: AccountRowProps): ReactElement {
+  const label = account.branchNumber
+    ? `${account.accountNumber} / branch ${account.branchNumber}`
+    : account.accountNumber;
+
+  return (
+    <li
+      style={{
+        padding: '8px 0',
+        borderBottom: '1px solid #eee',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={{ flex: 1 }}>{label}</span>
+        <StatusBadge status={account.status} />
+        <select
+          aria-label={`Status for ${label}`}
+          value={account.status}
+          onChange={e => {
+            const v = e.target.value as 'accepted' | 'ignored';
+            if (v === 'accepted' || v === 'ignored') onStatusChange(account.id, v);
+          }}
+        >
+          <option value="pending">pending</option>
+          <option value="accepted">accepted</option>
+          <option value="ignored">ignored</option>
+        </select>
+        <button
+          aria-label={`Delete ${label}`}
+          onClick={() => onDelete(account.id)}
+          style={{
+            color: '#c00',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '0 4px',
+          }}
+        >
+          ✕
+        </button>
+      </div>
+      {account.status === 'pending' && (
+        <p style={{ margin: '4px 0 0', fontSize: '0.85em', color: '#b85c00' }}>
+          Visit the Accounter client to set up this account.
+        </p>
+      )}
+    </li>
+  );
+}
+
+export function AccountsTab(): ReactElement {
+  const [accounts, setAccounts] = useState<(AccountRecord & { nickname?: string })[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingOnly, setPendingOnly] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      setAccounts(await fetchAccounts());
+    } catch {
+      setError('Failed to load accounts');
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function handleStatusChange(id: string, status: 'accepted' | 'ignored') {
+    try {
+      setAccounts(await updateStatus(id, status));
+    } catch {
+      setError('Failed to update account');
+    }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      setAccounts(await deleteAccount(id));
+    } catch {
+      setError('Failed to delete account');
+    }
+  }
+
+  const grouped = useMemo(
+    () =>
+      accounts.reduce<Record<string, (AccountRecord & { nickname?: string })[]>>((acc, a) => {
+        const key = `${a.sourceType}:${a.nickname ?? a.sourceId}`;
+        acc[key] ||= [];
+        acc[key].push(a);
+        return acc;
+      }, {}),
+    [accounts],
+  );
+
+  const pending = useMemo(() => accounts.filter(a => a.status === 'pending'), [accounts]);
+
+  const sections = useMemo(() => {
+    if (pendingOnly) {
+      return [{ key: 'pending', label: 'Pending accounts', accounts: pending }];
+    }
+    return Object.entries(grouped).map(([key, accs]) => {
+      const [sourceType, sourceId] = key.split(':') as [SourceType, string];
+      return {
+        key,
+        label: `${SOURCE_LABELS[sourceType]} (${sourceId})`,
+        accounts: accs,
+      };
+    });
+  }, [pendingOnly, pending, grouped]);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
+        <h2 style={{ margin: 0 }}>Account Records</h2>
+        {pending.length > 0 && (
+          <button onClick={() => setPendingOnly(p => !p)} style={{ fontSize: '0.85em' }}>
+            {pendingOnly ? 'Show all' : `Classify ${pending.length} pending`}
+          </button>
+        )}
+      </div>
+
+      {error && (
+        <p role="alert" style={{ color: 'red' }}>
+          {error}
+        </p>
+      )}
+
+      {accounts.length === 0 && (
+        <p>No account records discovered yet. Run a scrape to populate this list.</p>
+      )}
+
+      {sections.map(section => (
+        <section key={section.key} style={{ marginBottom: 20 }}>
+          <h3 style={{ marginBottom: 6 }}>{section.label}</h3>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            {section.accounts.map(a => (
+              <AccountRow
+                key={a.id}
+                account={a}
+                onStatusChange={(id, status) => void handleStatusChange(id, status)}
+                onDelete={id => void handleDelete(id)}
+              />
+            ))}
+          </ul>
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/ui/screens/config/config.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState, type ChangeEvent, type ReactElement } from 'react';
+import { loadSettings, saveSettings, testConnection } from '../../lib/api.js';
+import { AccountsTab } from './accounts-tab.js';
+import { SettingsTab } from './settings-tab.js';
+import { SourcesTab } from './sources-tab.js';
+
+type TabId = 'sources' | 'accounts' | 'settings';
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: 'sources', label: 'Credentials' },
+  { id: 'accounts', label: 'Accounts' },
+  { id: 'settings', label: 'Settings' },
+];
+
+type TestResult = { ok: true; latencyMs: number } | { ok: false; error: string };
+
+function ConnectionBar(): ReactElement {
+  const [serverUrl, setServerUrl] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<TestResult | null>(null);
+
+  useEffect(() => {
+    loadSettings().then(s => {
+      setServerUrl(s.serverUrl ?? '');
+      setApiKey(s.apiKey ?? '');
+    });
+  }, []);
+
+  function handleUrlBlur(e: ChangeEvent<HTMLInputElement>) {
+    setTestResult(null);
+    void saveSettings({ serverUrl: e.target.value || undefined });
+  }
+
+  function handleKeyBlur(e: ChangeEvent<HTMLInputElement>) {
+    setTestResult(null);
+    void saveSettings({ apiKey: e.target.value || undefined });
+  }
+
+  async function handleTestConnection() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await testConnection();
+      setTestResult(
+        result.ok
+          ? { ok: true, latencyMs: result.latencyMs ?? 0 }
+          : { ok: false, error: result.error ?? 'Unknown error' },
+      );
+    } catch (err) {
+      setTestResult({ ok: false, error: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        padding: '12px 0 16px',
+        marginBottom: 16,
+        borderBottom: '1px solid #ddd',
+      }}
+    >
+      <h3 style={{ margin: '0 0 10px' }}>Server connection</h3>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <div>
+          <label
+            htmlFor="conn-server-url"
+            style={{ display: 'block', marginBottom: 4, fontSize: '0.9em' }}
+          >
+            Server URL
+          </label>
+          <input
+            id="conn-server-url"
+            type="text"
+            value={serverUrl}
+            onChange={e => setServerUrl(e.target.value)}
+            onBlur={handleUrlBlur}
+            placeholder="https://your-accounter-server"
+            style={{ padding: '4px 8px', width: 260 }}
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="conn-api-key"
+            style={{ display: 'block', marginBottom: 4, fontSize: '0.9em' }}
+          >
+            API Key
+          </label>
+          <input
+            id="conn-api-key"
+            type="password"
+            value={apiKey}
+            onChange={e => setApiKey(e.target.value)}
+            onBlur={handleKeyBlur}
+            placeholder="your-api-key"
+            style={{ padding: '4px 8px', width: 200 }}
+          />
+        </div>
+        <button type="button" onClick={() => void handleTestConnection()} disabled={testing}>
+          {testing ? 'Testing…' : 'Test connection'}
+        </button>
+      </div>
+      {testResult && (
+        <p
+          role="status"
+          style={{
+            margin: '8px 0 0',
+            fontSize: '0.85em',
+            color: testResult.ok ? '#15803d' : '#b91c1c',
+          }}
+        >
+          {testResult.ok ? `✓ Connected (${testResult.latencyMs} ms)` : `✕ ${testResult.error}`}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function Config(): ReactElement {
+  const [active, setActive] = useState<TabId>('sources');
+
+  return (
+    <div>
+      <nav
+        role="tablist"
+        style={{ display: 'flex', gap: 4, borderBottom: '2px solid #ddd', marginBottom: 20 }}
+      >
+        {TABS.map(t => (
+          <button
+            key={t.id}
+            role="tab"
+            aria-selected={active === t.id}
+            onClick={() => setActive(t.id)}
+            style={{
+              padding: '8px 16px',
+              border: 'none',
+              background: 'none',
+              cursor: 'pointer',
+              borderBottom: active === t.id ? '2px solid #333' : '2px solid transparent',
+              fontWeight: active === t.id ? 'bold' : 'normal',
+              marginBottom: -2,
+            }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </nav>
+
+      <div role="tabpanel">
+        {active === 'sources' && (
+          <>
+            <ConnectionBar />
+            <SourcesTab />
+          </>
+        )}
+        {active === 'accounts' && <AccountsTab />}
+        {active === 'settings' && <SettingsTab />}
+      </div>
+    </div>
+  );
+}

package/src/ui/screens/config/settings-tab.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState, type ChangeEvent, type ReactElement } from 'react';
+import type { Settings } from '../../../server/vault.js';
+import { getVaultPath, loadSettings, saveSettings } from '../../lib/api.js';
+
+export function SettingsTab(): ReactElement {
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [vaultPath, setVaultPath] = useState<string>('');
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadSettings()
+      .then(s => setSettings(s))
+      .catch(() => setError('Failed to load settings'));
+    getVaultPath()
+      .then(r => setVaultPath(r.path))
+      .catch(() => setVaultPath(''));
+  }, []);
+
+  function handleCopyPath() {
+    void navigator.clipboard.writeText(vaultPath).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  async function autoSave(patch: Partial<Settings>) {
+    try {
+      const updated = await saveSettings(patch);
+      setSettings(updated);
+    } catch {
+      setError('Failed to save settings');
+    }
+  }
+
+  function handleToggle(key: 'showBrowser' | 'fetchBankOfIsraelRates' | 'concurrentScraping') {
+    return (e: ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.checked;
+      setSettings(s => (s ? { ...s, [key]: value } : s));
+      void autoSave({ [key]: value });
+    };
+  }
+
+  function handleNumberBlur(e: ChangeEvent<HTMLInputElement>) {
+    const parsed = e.target.value ? parseInt(e.target.value, 10) : undefined;
+    if (parsed !== undefined && Number.isNaN(parsed)) return;
+    // Fall back to current value when field is cleared; server default takes over on next load
+    const value = parsed ?? settings?.defaultDateRangeMonths ?? 3;
+    setSettings(s => (s ? { ...s, defaultDateRangeMonths: value } : s));
+    void autoSave({ defaultDateRangeMonths: parsed });
+  }
+
+  function handleTextBlur(key: 'historyFilePath') {
+    return (e: ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value || settings?.[key] || './history.json';
+      setSettings(s => (s ? { ...s, [key]: value } : s));
+      void autoSave({ [key]: e.target.value || undefined });
+    };
+  }
+
+  if (!settings) return <p>{error ?? 'Loading…'}</p>;
+
+  return (
+    <div>
+      <h2>Settings</h2>
+
+      {error && (
+        <p role="alert" style={{ color: 'red' }}>
+          {error}
+        </p>
+      )}
+
+      <fieldset style={{ border: 'none', padding: 0, margin: 0 }}>
+        <legend style={{ fontWeight: 'bold', marginBottom: 12 }}>Scraper options</legend>
+
+        <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          <input
+            id="showBrowser"
+            type="checkbox"
+            checked={settings.showBrowser}
+            onChange={handleToggle('showBrowser')}
+          />
+          Show browser during scraping
+        </label>
+
+        <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          <input
+            id="fetchBankOfIsraelRates"
+            type="checkbox"
+            checked={settings.fetchBankOfIsraelRates}
+            onChange={handleToggle('fetchBankOfIsraelRates')}
+          />
+          Fetch Bank of Israel exchange rates
+        </label>
+
+        <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          <input
+            id="concurrentScraping"
+            type="checkbox"
+            checked={settings.concurrentScraping}
+            onChange={handleToggle('concurrentScraping')}
+          />
+          Scrape sources concurrently
+        </label>
+
+        <div style={{ marginBottom: 10 }}>
+          <label htmlFor="defaultDateRangeMonths" style={{ display: 'block', marginBottom: 4 }}>
+            Default date range (months)
+          </label>
+          <input
+            id="defaultDateRangeMonths"
+            type="number"
+            min={1}
+            defaultValue={settings.defaultDateRangeMonths ?? ''}
+            onBlur={handleNumberBlur}
+            style={{ padding: '4px 8px', width: 80 }}
+            placeholder="e.g. 6"
+          />
+        </div>
+
+        <div style={{ marginBottom: 10 }}>
+          <label htmlFor="historyFilePath" style={{ display: 'block', marginBottom: 4 }}>
+            History file path
+          </label>
+          <input
+            id="historyFilePath"
+            type="text"
+            defaultValue={settings.historyFilePath ?? ''}
+            onBlur={handleTextBlur('historyFilePath')}
+            style={{ padding: '4px 8px', width: '100%', maxWidth: 400 }}
+            placeholder="/path/to/history.json"
+          />
+        </div>
+      </fieldset>
+
+      {vaultPath && (
+        <fieldset style={{ border: 'none', padding: 0, margin: '20px 0 0' }}>
+          <legend style={{ fontWeight: 'bold', marginBottom: 12 }}>Vault file</legend>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+            <input
+              readOnly
+              value={vaultPath}
+              style={{
+                padding: '4px 8px',
+                width: '100%',
+                maxWidth: 360,
+                color: '#555',
+                background: '#f9fafb',
+              }}
+              aria-label="Vault file path"
+            />
+            <button
+              type="button"
+              onClick={handleCopyPath}
+              style={{ padding: '4px 12px', whiteSpace: 'nowrap' }}
+            >
+              {copied ? '✓ Copied' : 'Copy path'}
+            </button>
+          </div>
+          <p style={{ margin: 0, fontSize: '0.85em', color: '#6b7280' }}>
+            Back up this file to preserve your credentials.
+          </p>
+        </fieldset>
+      )}
+    </div>
+  );
+}