feat: add On This Day section to dashboard showing ancestor anniversaries

atomantic · atomantic · commit e18b7a20b40d · 2026-04-09T18:30:00.000Z
Queries vital_event table for birth/death dates matching today's month
and day, displays matching ancestors with photos, years ago, and places
on the main dashboard. Parses date_original text (e.g. "12 Mar 1847")
to extract month/day for matching.
diff --git a/.changelog/NEXT.md b/.changelog/NEXT.md
@@ -2,6 +2,7 @@
 
 ## Added
 
+- On This Day: dashboard section showing ancestors with birth/death anniversaries on today's date
 - Tree auditor agent: BFS-walks family tree validating data integrity (impossible dates, parent age conflicts, placeholder names, unlinked providers)
 - Audit persistence in SQLite with pause/resume/cancel support via cursor serialization
 - Audit REST API with SSE event streaming, issue accept/reject/undo, bulk operations
diff --git a/client/src/components/Dashboard.tsx b/client/src/components/Dashboard.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Trash2, Users, GitBranch, Search, Route, Loader2, Database, FlaskConical, Eye, EyeOff, RefreshCw, Calculator, Download, BarChart3 } from 'lucide-react';
 import { CopyButton } from './ui/CopyButton';
+import { OnThisDay } from './dashboard/OnThisDay';
 import toast from 'react-hot-toast';
 import type { DatabaseInfo } from '@fsf/shared';
 import { api } from '../services/api';
@@ -173,6 +174,9 @@ export function Dashboard() {
         )}
       </div>
 
+      {/* On This Day section */}
+      <OnThisDay databases={visibleDatabases} />
+
       {visibleDatabases.length === 0 ? (
         <div className="text-center py-8 text-app-text-muted">
           <p>No roots found.</p>
diff --git a/client/src/components/dashboard/OnThisDay.tsx b/client/src/components/dashboard/OnThisDay.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Calendar, Cake, Cross } from 'lucide-react';
+import type { OnThisDayEvent, DatabaseInfo } from '@fsf/shared';
+import { api } from '../../services/api';
+
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+function formatOrdinal(day: number): string {
+  const s = ['th', 'st', 'nd', 'rd'];
+  const v = day % 100;
+  return day + (s[(v - 20) % 10] || s[v] || s[0]);
+}
+
+function yearsAgo(year: number | null): string {
+  if (!year) return '';
+  const current = new Date().getFullYear();
+  const diff = current - year;
+  if (diff <= 0) return '';
+  return `${diff} years ago`;
+}
+
+interface OnThisDayProps {
+  databases: DatabaseInfo[];
+}
+
+export function OnThisDay({ databases }: OnThisDayProps) {
+  const [events, setEvents] = useState<(OnThisDayEvent & { dbId: string })[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const today = new Date();
+  const month = today.getMonth() + 1;
+  const day = today.getDate();
+
+  useEffect(() => {
+    if (databases.length === 0) {
+      setLoading(false);
+      return;
+    }
+
+    Promise.all(
+      databases.map(db =>
+        api.getOnThisDay(db.id, month, day)
+          .then(list => list.map(e => ({ ...e, dbId: db.id })))
+          .catch(() => [] as (OnThisDayEvent & { dbId: string })[])
+      )
+    )
+      .then(results => {
+        // Flatten and deduplicate by personId+eventType across databases
+        const seen = new Set<string>();
+        const merged: (OnThisDayEvent & { dbId: string })[] = [];
+        for (const list of results) {
+          for (const evt of list) {
+            const key = `${evt.personId}:${evt.eventType}`;
+            if (!seen.has(key)) {
+              seen.add(key);
+              merged.push(evt);
+            }
+          }
+        }
+        // Sort: births first, then by year
+        merged.sort((a, b) => {
+          if (a.eventType !== b.eventType) return a.eventType === 'birth' ? -1 : 1;
+          return (a.year ?? 0) - (b.year ?? 0);
+        });
+        setEvents(merged);
+      })
+      .finally(() => setLoading(false));
+  }, [databases.length, month, day]);
+
+  if (loading || events.length === 0) return null;
+
+  return (
+    <div className="bg-app-card border border-app-border rounded-lg p-4 mb-4">
+      <h2 className="text-sm font-semibold text-app-text mb-3 flex items-center gap-2">
+        <Calendar size={14} className="text-app-accent" />
+        On This Day — {MONTH_NAMES[month - 1]} {formatOrdinal(day)}
+      </h2>
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {events.map(evt => (
+          <Link
+            key={`${evt.personId}-${evt.eventType}`}
+            to={`/person/${evt.dbId}/${evt.personId}`}
+            className="flex items-center gap-3 p-2 rounded hover:bg-app-accent/10 transition-colors group"
+          >
+            {/* Photo or icon */}
+            {evt.hasPhoto ? (
+              <img
+                src={api.getPhotoUrl(evt.personId)}
+                alt={evt.displayName}
+                className="w-8 h-8 rounded-full object-cover border border-app-border flex-shrink-0"
+              />
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-app-border flex items-center justify-center flex-shrink-0">
+                {evt.eventType === 'birth' ? (
+                  <Cake size={14} className="text-blue-400" />
+                ) : (
+                  <Cross size={14} className="text-app-text-muted" />
+                )}
+              </div>
+            )}
+
+            {/* Details */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-app-text truncate group-hover:text-app-accent transition-colors">
+                  {evt.displayName}
+                </span>
+                <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
+                  evt.eventType === 'birth'
+                    ? 'bg-blue-500/20 text-blue-400'
+                    : 'bg-app-text-muted/20 text-app-text-muted'
+                }`}>
+                  {evt.eventType === 'birth' ? 'Born' : 'Died'}
+                </span>
+              </div>
+              <div className="text-xs text-app-text-muted flex items-center gap-2">
+                {evt.year && <span>{evt.year}</span>}
+                {evt.year && <span className="text-app-text-subtle">({yearsAgo(evt.year)})</span>}
+                {evt.place && <span className="truncate">{evt.place}</span>}
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/services/api.ts b/client/src/services/api.ts
@@ -43,6 +43,7 @@ import type {
   AuditIssue,
   AuditChange,
   AuditSummary,
+  OnThisDayEvent,
 } from '@fsf/shared';
 
 export const BASE_URL = '/api';
@@ -89,6 +90,14 @@ export const api = {
   getTreeStats: (id: string) =>
     fetchJson<TreeStats>(`/databases/${id}/stats`),
 
+  getOnThisDay: (id: string, month?: number, day?: number) => {
+    const params = new URLSearchParams();
+    if (month !== undefined) params.set('month', String(month));
+    if (day !== undefined) params.set('day', String(day));
+    const qs = params.toString();
+    return fetchJson<OnThisDayEvent[]>(`/databases/${id}/on-this-day${qs ? `?${qs}` : ''}`);
+  },
+
   deleteDatabase: (id: string) =>
     fetchJson<void>(`/databases/${id}`, { method: 'DELETE' }),
 
diff --git a/server/src/routes/database.routes.ts b/server/src/routes/database.routes.ts
@@ -56,6 +56,19 @@ databaseRoutes.get('/:id/stats', async (req, res, next) => {
   if (result) res.json({ success: true, data: result });
 });
 
+// GET /api/databases/:id/on-this-day - Ancestors with anniversaries on a given date
+databaseRoutes.get('/:id/on-this-day', (req, res) => {
+  const month = req.query.month ? parseInt(req.query.month as string) : new Date().getMonth() + 1;
+  const day = req.query.day ? parseInt(req.query.day as string) : new Date().getDate();
+
+  if (month < 1 || month > 12 || day < 1 || day > 31) {
+    return res.status(400).json({ success: false, error: 'Invalid month or day' });
+  }
+
+  const result = databaseService.getOnThisDay(req.params.id, month, day);
+  res.json({ success: true, data: result });
+});
+
 // DELETE /api/databases/:id - Delete database (root)
 databaseRoutes.delete('/:id', async (req, res, next) => {
   const ok = await databaseService.deleteDatabase(req.params.id).then(() => true).catch(next);
diff --git a/server/src/services/database.service.ts b/server/src/services/database.service.ts
@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import type { Database, DatabaseInfo, Person, PersonWithId } from '@fsf/shared';
+import type { Database, DatabaseInfo, Person, PersonWithId, OnThisDayEvent } from '@fsf/shared';
 import { sqliteService } from '../db/sqlite.service.js';
 import { idMappingService } from './id-mapping.service.js';
 import { scraperService } from './scraper.service.js';
@@ -1346,4 +1346,101 @@ export const databaseService = {
       occupations: occupationRows.map(r => ({ occupation: r.occupation, count: r.count })),
     };
   },
+
+  /**
+   * Get ancestors with birth/death anniversaries on a given month/day.
+   */
+  getOnThisDay(rootId: string, month: number, day: number): OnThisDayEvent[] {
+    if (!useSqlite) return [];
+
+    const canonical = idMappingService.resolveId(rootId, 'familysearch') || rootId;
+    const rootInfo = sqliteService.queryOne<{ db_id: string }>(
+      'SELECT db_id FROM database_info WHERE db_id = @canonical',
+      { canonical }
+    );
+    if (!rootInfo) return [];
+
+    const dbId = canonical;
+
+    // Query all birth/death events with date_original text
+    const rows = sqliteService.queryAll<{
+      person_id: string;
+      display_name: string;
+      gender: string | null;
+      event_type: string;
+      date_original: string;
+      date_year: number | null;
+      place: string | null;
+    }>(
+      `SELECT ve.person_id, p.display_name, p.gender,
+              ve.event_type, ve.date_original, ve.date_year, ve.place
+       FROM vital_event ve
+       JOIN database_membership dm ON ve.person_id = dm.person_id AND dm.db_id = @dbId
+       JOIN person p ON ve.person_id = p.person_id
+       WHERE ve.event_type IN ('birth', 'death')
+       AND ve.date_original IS NOT NULL`,
+      { dbId }
+    );
+
+    // Check which persons have photos
+    const photoPersons = new Set(
+      sqliteService.queryAll<{ person_id: string }>(
+        `SELECT DISTINCT m.person_id
+         FROM media m
+         JOIN database_membership dm ON m.person_id = dm.person_id AND dm.db_id = @dbId`,
+        { dbId }
+      ).map(r => r.person_id)
+    );
+
+    // Parse dates and filter for matching month/day
+    const results: OnThisDayEvent[] = [];
+    const seen = new Set<string>(); // Dedupe by personId+eventType
+
+    for (const row of rows) {
+      const parsed = parseDateMonthDay(row.date_original);
+      if (!parsed || parsed.month !== month || parsed.day !== day) continue;
+
+      const key = `${row.person_id}:${row.event_type}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+
+      results.push({
+        personId: row.person_id,
+        displayName: row.display_name,
+        gender: (row.gender as OnThisDayEvent['gender']) ?? undefined,
+        eventType: row.event_type as 'birth' | 'death',
+        dateOriginal: row.date_original,
+        year: row.date_year,
+        place: row.place ?? undefined,
+        hasPhoto: photoPersons.has(row.person_id),
+      });
+    }
+
+    // Sort: births first, then by year ascending
+    results.sort((a, b) => {
+      if (a.eventType !== b.eventType) return a.eventType === 'birth' ? -1 : 1;
+      return (a.year ?? 0) - (b.year ?? 0);
+    });
+
+    return results;
+  },
+};
+
+const MONTH_NAMES: Record<string, number> = {
+  january: 1, february: 2, march: 3, april: 4, may: 5, june: 6,
+  july: 7, august: 8, september: 9, october: 10, november: 11, december: 12,
+  jan: 1, feb: 2, mar: 3, apr: 4, jun: 6, jul: 7, aug: 8, sep: 9, oct: 10, nov: 11, dec: 12,
 };
+
+/** Extract month and day from a date string like "12 March 1847" or "12 Mar 1847" */
+function parseDateMonthDay(dateOriginal: string): { month: number; day: number } | null {
+  const match = dateOriginal.match(/(\d{1,2})\s+([A-Za-z]+)\s+/);
+  if (!match) return null;
+
+  const day = parseInt(match[1]);
+  const monthStr = match[2].toLowerCase();
+  const month = MONTH_NAMES[monthStr];
+  if (!month || day < 1 || day > 31) return null;
+
+  return { month, day };
+}
diff --git a/shared/src/index.ts b/shared/src/index.ts
@@ -523,6 +523,18 @@ export interface TreeStats {
   occupations: { occupation: string; count: number }[];
 }
 
+// On This Day - ancestors with anniversaries on a given date
+export interface OnThisDayEvent {
+  personId: string;
+  displayName: string;
+  gender?: 'male' | 'female' | 'unknown';
+  eventType: 'birth' | 'death';
+  dateOriginal: string;
+  year: number | null;
+  place?: string;
+  hasPhoto: boolean;
+}
+
 // Person with ID included
 export interface PersonWithId extends Person {
   id: string;                  // Canonical ULID for URL routing
