Data Sync & Multi-Model Management Page

[ElioNeto]

Data Sync & Multi-Model Management Page

Create an Angular page for managing data synchronization (two-way sync) and toggling multi-model query modes.

Backend Endpoints Needed

GET    /admin/sync/status           — Current sync status, last sync time
POST   /admin/sync/start            — Start a sync operation
POST   /admin/sync/stop             — Stop ongoing sync
GET    /admin/sync/diff             — Show diff between local and remote
GET    /admin/sync/history          — Past sync results
PUT    /admin/sync/config           — Update sync configuration

GET    /admin/models                — List enabled data models
PUT    /admin/models/{model}        — Enable/disable a model (documents, time-series, graph)
GET    /admin/models/{model}/stats  — Per-model statistics

UI Requirements

Data Sync Panel

• Status: Idle/Syncing/Error with status badge
• Last Sync: Timestamp + result summary
• Direction: Pull / Push / Two-Way selector
• Diff Preview: Show keys that differ (local vs remote) with value comparison
• Conflicts: Display conflicting keys with resolution options (keep local, keep remote, merge)
• Start/Stop: Control buttons with confirmation for stop
• Schedule: Cron or interval configuration

Multi-Model Panel

• Toggle Cards: Document, Time-Series, Graph — each with enable/disable switch
• Per-model Stats: Key count, query count, size
• Quick Links: Links to model-specific queries

Component Structure

app/
  pages/
    data-sync/
      data-sync.component.ts
      data-sync.component.html
      data-sync.component.scss
      diff-viewer.component.ts
      diff-viewer.component.html
      diff-viewer.component.scss

Acceptance Criteria

• Sync status displayed correctly
• Diff preview shows local vs remote differences
• Conflict resolution options available
• Multi-model toggles work
• Error states for all operations
• Responsive layout

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)