@accounter/scraper-app 0.0.1

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

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useState, type ReactElement } from 'react';
+import { SkeletonRow } from '../../components/skeleton.js';
+import { createSource, deleteSource, getSources, updateSource } from '../../lib/api.js';
+import { SourceForm } from './source-forms.js';
+import { SOURCE_LABELS, type SourceConfig, type SourceType } from './source-types.js';
+
+type DialogState =
+  | { mode: 'add'; sourceType: SourceType }
+  | { mode: 'edit'; source: SourceConfig }
+  | { mode: 'confirm-delete'; source: SourceConfig }
+  | null;
+
+export function SourcesTab(): ReactElement {
+  const [sources, setSources] = useState<SourceConfig[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialog, setDialog] = useState<DialogState>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [addType, setAddType] = useState<SourceType>('poalim');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const list = await getSources<SourceConfig>();
+      setSources(list);
+    } catch {
+      setError('Failed to load sources');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function handleAdd(data: Omit<SourceConfig, 'id' | 'type'>) {
+    try {
+      const list = await createSource<SourceConfig>({
+        ...data,
+        type: (dialog as { mode: 'add'; sourceType: SourceType }).sourceType,
+      });
+      setSources(list);
+      setDialog(null);
+    } catch {
+      setError('Failed to add source');
+    }
+  }
+
+  async function handleEdit(data: Omit<SourceConfig, 'id' | 'type'>) {
+    const source = (dialog as { mode: 'edit'; source: SourceConfig }).source;
+    try {
+      const list = await updateSource<SourceConfig>(source.id, data);
+      setSources(list);
+      setDialog(null);
+    } catch {
+      setError('Failed to update source');
+    }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      const list = await deleteSource<SourceConfig>(id);
+      setSources(list);
+      setDialog(null);
+    } catch {
+      setError('Failed to delete source');
+    }
+  }
+
+  function displayName(s: SourceConfig): string {
+    if (s.nickname) return s.nickname;
+    if (s.type === 'poalim') return `Poalim (${s.userCode})`;
+    if (s.type === 'discount') return `Discount (${s.ID})`;
+    if (s.type === 'isracard' || s.type === 'amex')
+      return `${SOURCE_LABELS[s.type]} (${s.ownerId})`;
+    if (s.type === 'cal' || s.type === 'max') return `${SOURCE_LABELS[s.type]} (${s.username})`;
+    return '';
+  }
+
+  return (
+    <div>
+      <h2>Sources</h2>
+
+      {error && (
+        <p role="alert" style={{ color: 'red' }}>
+          {error}
+        </p>
+      )}
+
+      {loading ? (
+        <div aria-busy="true">
+          <SkeletonRow width="60%" />
+          <SkeletonRow width="75%" />
+          <SkeletonRow width="50%" />
+        </div>
+      ) : sources.length === 0 && !dialog ? (
+        <p>No sources configured yet.</p>
+      ) : null}
+
+      <ul style={{ listStyle: 'none', padding: 0 }}>
+        {sources.map(s => (
+          <li
+            key={s.id}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '6px 0',
+              borderBottom: '1px solid #eee',
+            }}
+          >
+            <span style={{ flex: 1 }}>
+              <strong>{SOURCE_LABELS[s.type]}</strong> — {displayName(s)}
+            </span>
+            <button onClick={() => setDialog({ mode: 'edit', source: s })}>Edit</button>
+            <button onClick={() => setDialog({ mode: 'confirm-delete', source: s })}>Delete</button>
+          </li>
+        ))}
+      </ul>
+
+      {!dialog && (
+        <div style={{ display: 'flex', gap: 8, marginTop: 16, alignItems: 'center' }}>
+          <select
+            aria-label="Source type"
+            value={addType}
+            onChange={e => setAddType(e.target.value as SourceType)}
+          >
+            {(Object.keys(SOURCE_LABELS) as SourceType[]).map(t => (
+              <option key={t} value={t}>
+                {SOURCE_LABELS[t]}
+              </option>
+            ))}
+          </select>
+          <button onClick={() => setDialog({ mode: 'add', sourceType: addType })}>
+            Add Source
+          </button>
+        </div>
+      )}
+
+      {dialog && (
+        <div style={{ marginTop: 16, padding: 16, border: '1px solid #ccc', borderRadius: 4 }}>
+          {dialog.mode === 'confirm-delete' ? (
+            <>
+              <h3 style={{ marginTop: 0 }}>Delete source?</h3>
+              <p>
+                This will permanently remove{' '}
+                <strong>
+                  {SOURCE_LABELS[dialog.source.type]} — {displayName(dialog.source)}
+                </strong>{' '}
+                and its stored credentials.
+              </p>
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button onClick={() => void handleDelete(dialog.source.id)}>Confirm delete</button>
+                <button onClick={() => setDialog(null)}>Cancel</button>
+              </div>
+            </>
+          ) : (
+            <>
+              <h3 style={{ marginTop: 0 }}>
+                {dialog.mode === 'add'
+                  ? `Add ${SOURCE_LABELS[dialog.sourceType]}`
+                  : `Edit ${SOURCE_LABELS[dialog.source.type]}`}
+              </h3>
+              <SourceForm
+                sourceType={dialog.mode === 'add' ? dialog.sourceType : dialog.source.type}
+                initial={dialog.mode === 'edit' ? dialog.source : undefined}
+                onSave={dialog.mode === 'add' ? handleAdd : handleEdit}
+                onCancel={() => setDialog(null)}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/screens/history.tsx

@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useState, type ReactElement } from 'react';
+import type { RunRecord, SourceRunRecord } from '../../shared/types.js';
+import { SkeletonTable } from '../components/skeleton.js';
+import { getHistory } from '../lib/api.js';
+
+function formatDateTime(iso: string): string {
+  return new Date(iso).toLocaleString();
+}
+
+export function formatDuration(startedAt: string, completedAt: string): string {
+  const ms = new Date(completedAt).getTime() - new Date(startedAt).getTime();
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+}
+
+const SOURCE_STATUS_STYLE: Record<string, { background: string; color: string }> = {
+  done: { background: '#dcfce7', color: '#15803d' },
+  error: { background: '#fee2e2', color: '#b91c1c' },
+  blocked: { background: '#fef9c3', color: '#854d0e' },
+};
+
+const SOURCE_STATUS_LABEL: Record<string, string> = {
+  done: 'done',
+  error: 'error',
+  blocked: 'blocked',
+};
+
+function SourceRow({ src }: { src: SourceRunRecord }): ReactElement {
+  const style = SOURCE_STATUS_STYLE[src.status] ?? SOURCE_STATUS_STYLE['done']!;
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <>
+      <tr>
+        <td key={src.sourceId} style={{ padding: '4px 8px', color: '#555' }}>
+          {src.nickname || src.sourceId}
+        </td>
+        <td style={{ padding: '4px 8px', color: '#555' }}>{src.sourceType}</td>
+        <td style={{ padding: '4px 8px' }}>
+          <span
+            style={{
+              ...style,
+              padding: '1px 7px',
+              borderRadius: 10,
+              fontSize: '0.78em',
+              fontWeight: 600,
+            }}
+          >
+            {SOURCE_STATUS_LABEL[src.status] ?? src.status}
+          </span>
+        </td>
+        <td style={{ padding: '4px 8px', textAlign: 'right' }}>{src.inserted}</td>
+        <td style={{ padding: '4px 8px', textAlign: 'right' }}>{src.skipped}</td>
+        <td style={{ padding: '4px 8px', color: '#b91c1c' }}>
+          {src.status === 'blocked' ? (
+            <button
+              type="button"
+              onClick={() => setExpanded(e => !e)}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: '#854d0e',
+                fontSize: '0.85em',
+                padding: 0,
+              }}
+            >
+              {expanded ? '▲' : '▼'} {src.blockedAccounts?.length ?? 0} unknown
+            </button>
+          ) : (
+            (src.error ?? '—')
+          )}
+        </td>
+      </tr>
+      {expanded && src.blockedAccounts && src.blockedAccounts.length > 0 && (
+        <tr>
+          <td
+            colSpan={6}
+            style={{ padding: '2px 8px 8px 24px', color: '#854d0e', fontSize: '0.82em' }}
+          >
+            {src.blockedAccounts.join(', ')}
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function RunRow({ record }: { record: RunRecord }): ReactElement {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <>
+      <tr
+        onClick={() => setExpanded(e => !e)}
+        onKeyDown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setExpanded(prev => !prev);
+          }
+        }}
+        tabIndex={0}
+        role="button"
+        style={{ cursor: 'pointer', background: expanded ? '#f9fafb' : undefined }}
+        aria-expanded={expanded}
+      >
+        <td style={{ padding: '8px 10px' }}>{formatDateTime(record.startedAt)}</td>
+        <td style={{ padding: '8px 10px' }}>
+          {formatDuration(record.startedAt, record.completedAt)}
+        </td>
+        <td style={{ padding: '8px 10px', textAlign: 'right' }}>{record.sources.length}</td>
+        <td style={{ padding: '8px 10px', textAlign: 'right' }}>{record.totalInserted}</td>
+        <td style={{ padding: '8px 10px', textAlign: 'right' }}>{record.totalSkipped}</td>
+        <td
+          style={{
+            padding: '8px 10px',
+            textAlign: 'right',
+            color: record.errorCount > 0 ? '#b91c1c' : undefined,
+            fontWeight: record.errorCount > 0 ? 600 : undefined,
+          }}
+        >
+          {record.errorCount}
+        </td>
+        <td style={{ padding: '8px 10px', color: '#888', fontSize: '0.85em' }}>
+          {expanded ? '▲' : '▼'}
+        </td>
+      </tr>
+
+      {expanded && record.sources.length > 0 && (
+        <tr>
+          <td colSpan={7} style={{ padding: '0 16px 12px' }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.88em' }}>
+              <thead>
+                <tr style={{ color: '#888', textAlign: 'left' }}>
+                  <th style={{ padding: '4px 8px', fontWeight: 500 }}>Source</th>
+                  <th style={{ padding: '4px 8px', fontWeight: 500 }}>Type</th>
+                  <th style={{ padding: '4px 8px', fontWeight: 500 }}>Status</th>
+                  <th style={{ padding: '4px 8px', fontWeight: 500, textAlign: 'right' }}>New</th>
+                  <th style={{ padding: '4px 8px', fontWeight: 500, textAlign: 'right' }}>
+                    Skipped
+                  </th>
+                  <th style={{ padding: '4px 8px', fontWeight: 500 }}>Error</th>
+                </tr>
+              </thead>
+              <tbody>
+                {record.sources.map(src => (
+                  <SourceRow key={src.sourceId} src={src} />
+                ))}
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      )}
+
+      {expanded && record.sources.length === 0 && (
+        <tr>
+          <td colSpan={7} style={{ padding: '4px 16px 12px', color: '#aaa', fontSize: '0.88em' }}>
+            No per-source breakdown available.
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+export function History(): ReactElement {
+  const [records, setRecords] = useState<RunRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    getHistory()
+      .then(setRecords)
+      .catch(err => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
+        <h2 style={{ margin: 0 }}>Scrape History</h2>
+        <button
+          type="button"
+          onClick={load}
+          disabled={loading}
+          style={{
+            padding: '4px 14px',
+            cursor: loading ? 'default' : 'pointer',
+            opacity: loading ? 0.7 : 1,
+          }}
+        >
+          Refresh
+        </button>
+      </div>
+
+      {loading ? (
+        <SkeletonTable rows={4} cols={7} />
+      ) : error ? (
+        <p style={{ color: '#b91c1c' }}>{error}</p>
+      ) : records.length === 0 ? (
+        <p style={{ color: '#888' }}>No scrape runs recorded yet.</p>
+      ) : (
+        <table
+          style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.93em' }}
+          aria-label="Scrape history"
+        >
+          <thead>
+            <tr style={{ borderBottom: '2px solid #e5e7eb', color: '#374151', textAlign: 'left' }}>
+              <th style={{ padding: '8px 10px', fontWeight: 600 }}>Date / Time</th>
+              <th style={{ padding: '8px 10px', fontWeight: 600 }}>Duration</th>
+              <th style={{ padding: '8px 10px', fontWeight: 600, textAlign: 'right' }}>Sources</th>
+              <th style={{ padding: '8px 10px', fontWeight: 600, textAlign: 'right' }}>New</th>
+              <th style={{ padding: '8px 10px', fontWeight: 600, textAlign: 'right' }}>Skipped</th>
+              <th style={{ padding: '8px 10px', fontWeight: 600, textAlign: 'right' }}>Errors</th>
+              <th style={{ padding: '8px 10px' }} />
+            </tr>
+          </thead>
+          <tbody>
+            {records.map(r => (
+              <RunRow key={r.id} record={r} />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/src/ui/screens/run.tsx

@@ -0,0 +1,266 @@
+import { ChangeEvent, useEffect, useState, type ReactElement } from 'react';
+import { Settings } from '../../server/vault.js';
+import { OtpModal } from '../components/otp-modal.js';
+import { SkeletonRow } from '../components/skeleton.js';
+import { TaskRow } from '../components/task-row.js';
+import { getSources, loadSettings, saveSettings } from '../lib/api.js';
+import type { UseRunSocketResult } from '../lib/ws.js';
+import type { SourceConfig } from './config/source-types.js';
+import { SOURCE_LABELS } from './config/source-types.js';
+
+function nickname(src: SourceConfig): string {
+  if (src.nickname) return `${SOURCE_LABELS[src.type]}: ${src.nickname}`;
+  return `${SOURCE_LABELS[src.type]} (${src.id.slice(0, 6)})`;
+}
+
+type RunProps = UseRunSocketResult & { onNavigateAccounts?: () => void; isVisible?: boolean };
+
+export function Run({
+  send,
+  taskStates,
+  runStatus,
+  summary,
+  onNavigateAccounts,
+  isVisible = true,
+}: RunProps): ReactElement {
+  const [sources, setSources] = useState<SourceConfig[]>([]);
+  const [sourcesLoading, setSourcesLoading] = useState(true);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [months, setMonths] = useState(3);
+  const [useCustomRange, setUseCustomRange] = useState(false);
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [shouldFetchRates, setShouldFetchRates] = useState(false);
+
+  useEffect(() => {
+    loadSettings()
+      .then(s => setShouldFetchRates(s.fetchBankOfIsraelRates))
+      .catch(() => setError('Failed to load settings'));
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible || selected.size > 0) return;
+    setSourcesLoading(true);
+    getSources<SourceConfig>()
+      .then(srcs => {
+        setSources(
+          srcs.sort(
+            (a, b) =>
+              SOURCE_LABELS[a.type].localeCompare(SOURCE_LABELS[b.type]) ||
+              (a.nickname || a.id).localeCompare(b.nickname || b.id),
+          ),
+        );
+        setSelected(new Set(srcs.map(s => s.id)));
+      })
+      .finally(() => setSourcesLoading(false));
+  }, [isVisible]);
+
+  function toggleSource(id: string) {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  async function autoSave(patch: Partial<Settings>) {
+    try {
+      const updated = await saveSettings(patch);
+      setShouldFetchRates(updated.fetchBankOfIsraelRates);
+    } catch {
+      setError('Failed to toggle currency rates setting');
+    }
+  }
+
+  const handleToggleRates = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.checked;
+    setShouldFetchRates(value);
+    void autoSave({ fetchBankOfIsraelRates: value });
+  };
+
+  function handleRun() {
+    const sourceIds = [...selected];
+    const msg = {
+      type: 'run-start' as const,
+      sourceIds,
+      dateFrom: useCustomRange
+        ? dateFrom || undefined
+        : new Date(new Date().getFullYear(), new Date().getMonth() - months, new Date().getDate())
+            .toISOString()
+            .split('T')[0],
+      dateTo: useCustomRange ? dateTo || undefined : undefined,
+    };
+    send(msg);
+  }
+
+  // Find any task waiting for OTP
+  const otpEntry = [...taskStates.entries()].find(([, s]) => s.status === 'otp-required');
+
+  return (
+    <div>
+      <h2 style={{ margin: '0 0 16px' }}>Run Scrapers</h2>
+
+      {error && (
+        <p role="alert" style={{ color: 'red' }}>
+          {error}
+        </p>
+      )}
+
+      {/* Source checklist */}
+      <section style={{ marginBottom: 20 }}>
+        <h3 style={{ margin: '0 0 10px', fontSize: '1em' }}>Sources</h3>
+        {sourcesLoading ? (
+          <div aria-busy="true">
+            <SkeletonRow width="55%" />
+            <SkeletonRow width="70%" />
+            <SkeletonRow width="45%" />
+          </div>
+        ) : sources.length === 0 ? (
+          <p style={{ color: '#888' }}>No sources configured.</p>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {sources.map(src => (
+              <label
+                key={src.id}
+                style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}
+              >
+                <input
+                  type="checkbox"
+                  checked={selected.has(src.id)}
+                  onChange={() => toggleSource(src.id)}
+                />
+                {nickname(src)}
+              </label>
+            ))}
+
+            <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+              <input type="checkbox" checked={shouldFetchRates} onChange={handleToggleRates} />
+              Currency Rates (Bank of Israel)
+            </label>
+          </div>
+        )}
+      </section>
+
+      {/* Date range */}
+      <section style={{ marginBottom: 20 }}>
+        <h3 style={{ margin: '0 0 10px', fontSize: '1em' }}>Date Range</h3>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          <input
+            type="checkbox"
+            checked={useCustomRange}
+            onChange={e => setUseCustomRange(e.target.checked)}
+          />
+          Use custom date range
+        </label>
+        {useCustomRange ? (
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              From
+              <input
+                type="date"
+                value={dateFrom}
+                onChange={e => setDateFrom(e.target.value)}
+                aria-label="date from"
+              />
+            </label>
+            <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              To
+              <input
+                type="date"
+                value={dateTo}
+                onChange={e => setDateTo(e.target.value)}
+                aria-label="date to"
+              />
+            </label>
+          </div>
+        ) : (
+          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            Last{' '}
+            <input
+              type="number"
+              min={1}
+              max={24}
+              value={months}
+              onChange={e => setMonths(Number(e.target.value))}
+              style={{ width: 60, padding: '4px 6px' }}
+              aria-label="months"
+            />{' '}
+            months
+          </label>
+        )}
+      </section>
+
+      {/* Run button */}
+      <button
+        type="button"
+        onClick={handleRun}
+        disabled={runStatus === 'running' || selected.size === 0}
+        style={{
+          padding: '8px 24px',
+          background: runStatus === 'running' ? '#9ca3af' : '#2563eb',
+          color: '#fff',
+          border: 'none',
+          borderRadius: 6,
+          cursor: runStatus === 'running' || selected.size === 0 ? 'default' : 'pointer',
+          fontSize: '1em',
+          marginBottom: 24,
+        }}
+      >
+        {runStatus === 'running' ? 'Running…' : 'Run'}
+      </button>
+
+      {/* Task list */}
+      {taskStates.size > 0 && (
+        <section style={{ marginBottom: 20 }}>
+          <h3 style={{ margin: '0 0 10px', fontSize: '1em' }}>Tasks</h3>
+          {[...taskStates.entries()].map(([sourceId, state]) => {
+            const src = sources.find(s => s.id === sourceId);
+            return (
+              <TaskRow
+                key={sourceId}
+                sourceId={sourceId}
+                nickname={src ? nickname(src) : sourceId}
+                state={state}
+                onNavigateAccounts={onNavigateAccounts}
+              />
+            );
+          })}
+        </section>
+      )}
+
+      {/* Summary panel */}
+      {runStatus === 'complete' && summary && (
+        <section
+          aria-label="Run summary"
+          style={{
+            background: '#f0fdf4',
+            border: '1px solid #bbf7d0',
+            borderRadius: 8,
+            padding: 16,
+          }}
+        >
+          <h3 style={{ margin: '0 0 8px', fontSize: '1em' }}>Run Complete</h3>
+          <div style={{ display: 'flex', gap: 24 }}>
+            <span>↑ {summary.totalInserted} new</span>
+            <span>↷ {summary.totalSkipped} skipped</span>
+            {summary.errors > 0 && (
+              <span style={{ color: '#b91c1c' }}>✕ {summary.errors} errors</span>
+            )}
+          </div>
+        </section>
+      )}
+
+      {/* OTP modal */}
+      {otpEntry && (
+        <OtpModal
+          sourceId={otpEntry[0]}
+          onSubmit={msg => {
+            send(msg);
+          }}
+        />
+      )}
+    </div>
+  );
+}