mirror of
https://github.com/we-promise/sure.git
synced 2026-05-24 13:04:56 +00:00
e67ff3e3dc
* refactor(design-system): migrate single-color semantic tokens to @theme + lint @utility /N footgun Closes #1653. Tailwind v4 auto-generates the `/N` opacity-modifier pipeline (`color-mix(in oklab, var(--color-X) N%, transparent)`) only for colors declared in `@theme`. Tokens emitted as `@utility name { @apply ... }` bypass that pipeline entirely, so `text-link/70`, `bg-surface/50`, etc. silently compile to nothing — the workaround from #1626 was `text-inverse opacity-70`. Migrate the 11 single-color semantic tokens whose class names match Tailwind's color-utility convention (`bg-X`, `text-X`, `border-X`) and have no cross-prefix collision: bg-surface, bg-surface-hover, bg-surface-inset, bg-surface-inset-hover bg-container, bg-container-hover, bg-container-inset, bg-container-inset-hover bg-nav-indicator text-link border-tertiary After migration, `--color-surface`, `--color-container`, etc. live in `@theme` and Tailwind auto-generates every prefix variant (`bg-surface`, `text-surface`, `border-surface`, plus `/10`..`/100`). The original utility class names are preserved (now via auto-generation instead of `@utility` blocks), so every existing callsite continues to work. NOT migrated, by design: - **inverse family** (`bg-inverse`, `text-inverse`, `bg-inverse-hover`, `border-inverse`): bg- and text- variants have *different* colors, cannot share one `--color-inverse`. Renaming the family (`bg-strong-surface` + `text-on-strong-surface`) would touch ~61 view files and trade one footgun for semantic loss; deferred until a concrete `bg-inverse/N` use case appears. - **primary/secondary/subdued/destructive** (cross-prefix collision): `text-primary` (gray.900) and `border-primary` (alpha-black.300) carry deliberately distinct values, can't share `--color-primary`. Same for the secondary/subdued pairs. Migrating either alone would force a rename of the other. - **button-bg-*, tab-item-*, tab-bg-group**: class names don't follow Tailwind's `<prefix>-<name>` convention, so auto-generation would emit `bg-button-bg-primary` not `button-bg-primary`. - **composites** (`bg-loader`, `bg-overlay`, `shadow-border-*`, `border-divider`): compile to multiple properties or alias-reference other utilities — must stay as @utility. Add an `erb_lint` DeprecatedClasses rule covering the @utility-only tokens with `\d+` regex modifiers so any future `text-inverse/70` etc. fails CI with the explanation that `opacity-N` is the workaround and #1653 is the tracking issue. Verified the rule fires on synthetic input; verified zero new violations on the existing app. Stats: `@utility` blocks dropped from 45 → 34; @theme primitives grew from 183 → 194. * fix(review): cover remaining @utility /N footgun tokens in erb_lint CodeRabbit flagged that the new DeprecatedClasses /N rule missed seven still-defined @utility color tokens: border-destructive, border-solid, button-bg-secondary-strong, button-bg-secondary-strong-hover, button-bg-disabled, button-bg-ghost-hover, button-bg-outline-hover. Without them, classes like button-bg-disabled/50 pass lint while Tailwind silently drops the class. Adding the patterns surfaced two pre-existing offenders (border-destructive/30, border-destructive/20). Swap both to solid border-destructive — the @utility override defines red-500 (light) while --color-destructive in @theme is red-600, so the /N modifier was rendering an off-shade rather than the intended faded variant. Verified the rule fires on synthetic input for all seven new patterns, then verified zero remaining violations on the new patterns across app/**/*.erb. * chore(erb_lint): add trailing newline to .erb_lint.yml Per review feedback on #1849. Some editors flag the missing newline; keeps style consistent with the rest of the codebase.
272 lines
13 KiB
Plaintext
272 lines
13 KiB
Plaintext
<details class="group bg-surface rounded-lg border border-secondary">
|
|
<summary class="flex items-center justify-between gap-2 p-3 cursor-pointer">
|
|
<div class="flex items-center gap-2">
|
|
<%= helpers.icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
|
|
<span class="text-sm text-primary font-medium"><%= t("provider_sync_summary.title") %></span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs text-secondary">
|
|
<% if last_synced_at %>
|
|
<span><%= t("provider_sync_summary.last_sync", time_ago: last_synced_ago) %></span>
|
|
<% end %>
|
|
</div>
|
|
</summary>
|
|
|
|
<div class="p-3 text-sm text-secondary grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<%# Accounts section - always shown if we have account stats %>
|
|
<% if total_accounts > 0 || stats.key?("total_accounts") %>
|
|
<div>
|
|
<h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.accounts.title") %></h4>
|
|
<div class="flex items-center gap-3 flex-wrap">
|
|
<span><%= t("provider_sync_summary.accounts.total", count: total_accounts) %></span>
|
|
<span><%= t("provider_sync_summary.accounts.linked", count: linked_accounts) %></span>
|
|
<span><%= t("provider_sync_summary.accounts.unlinked", count: unlinked_accounts) %></span>
|
|
<% if institutions_count.present? %>
|
|
<span><%= t("provider_sync_summary.accounts.institutions", count: institutions_count) %></span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Transactions section - shown if provider collects transaction stats %>
|
|
<% if has_transaction_stats? || activities_pending? %>
|
|
<div>
|
|
<h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.transactions.title") %></h4>
|
|
<% if activities_pending? && !has_transaction_stats? %>
|
|
<div class="flex items-center gap-2">
|
|
<%= helpers.icon "loader-circle", size: "sm", class: "animate-spin text-secondary" %>
|
|
<span class="text-secondary"><%= t("provider_sync_summary.transactions.fetching") %></span>
|
|
</div>
|
|
<% else %>
|
|
<div class="flex items-center gap-3 flex-wrap">
|
|
<span><%= t("provider_sync_summary.transactions.seen", count: tx_seen) %></span>
|
|
<span><%= t("provider_sync_summary.transactions.imported", count: tx_imported) %></span>
|
|
<span><%= t("provider_sync_summary.transactions.updated", count: tx_updated) %></span>
|
|
<span><%= t("provider_sync_summary.transactions.skipped", count: tx_skipped) %></span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Protected entries detail - shown when entries were skipped due to protection %>
|
|
<% if has_skipped_entries? %>
|
|
<div class="mt-2">
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "shield-check", size: "sm" %>
|
|
<span class="text-secondary"><%= t("provider_sync_summary.transactions.protected", count: tx_skipped) %></span>
|
|
</div>
|
|
<% if skip_summary.any? %>
|
|
<div class="text-xs text-secondary mt-1">
|
|
<% skip_summary.each do |reason, count| %>
|
|
<span class="mr-2"><%= t("provider_sync_summary.skip_reasons.#{reason}", default: reason.humanize) %>: <%= count %></span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% if skip_details.any? %>
|
|
<details class="mt-1">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary">
|
|
<%= t("provider_sync_summary.transactions.view_protected") %>
|
|
</summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
|
|
<% skip_details.each do |detail| %>
|
|
<p class="text-xs text-secondary">
|
|
<%= detail["name"] %> (<%= t("provider_sync_summary.skip_reasons.#{detail["reason"]}", default: detail["reason"].humanize) %>)
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Holdings section - shown if provider collects holdings stats %>
|
|
<% if has_holdings_stats? %>
|
|
<div>
|
|
<h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.holdings.title") %></h4>
|
|
<div class="flex items-center gap-3">
|
|
<span><%= t("provider_sync_summary.holdings.#{holdings_label_key}", count: holdings_count) %></span>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Trades section - shown if provider collects trades stats (investment activities) %>
|
|
<% if has_trades_stats? || activities_pending? %>
|
|
<div>
|
|
<h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.trades.title") %></h4>
|
|
<% if activities_pending? && !has_trades_stats? %>
|
|
<div class="flex items-center gap-2">
|
|
<%= helpers.icon "loader-circle", size: "sm", class: "animate-spin text-secondary" %>
|
|
<span class="text-secondary"><%= t("provider_sync_summary.trades.fetching") %></span>
|
|
</div>
|
|
<% else %>
|
|
<div class="flex items-center gap-3 flex-wrap">
|
|
<span><%= t("provider_sync_summary.trades.imported", count: trades_imported) %></span>
|
|
<% if trades_skipped > 0 %>
|
|
<span><%= t("provider_sync_summary.trades.skipped", count: trades_skipped) %></span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Health section - always shown %>
|
|
<div>
|
|
<h4 class="text-primary font-medium mb-1"><%= t("provider_sync_summary.health.title") %></h4>
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-3 flex-wrap">
|
|
<% if rate_limited? %>
|
|
<span class="text-warning">
|
|
<%= t("provider_sync_summary.health.rate_limited", time_ago: rate_limited_ago || t("provider_sync_summary.health.recently")) %>
|
|
</span>
|
|
<% end %>
|
|
<% if has_errors? %>
|
|
<span class="text-destructive"><%= t("provider_sync_summary.health.errors", count: total_errors) %></span>
|
|
<% if error_details.any? %>
|
|
<details class="mt-1">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary"><%= t("provider_sync_summary.health.view_error_details") %></summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-destructive space-y-1">
|
|
<% error_details.each do |detail| %>
|
|
<p class="text-xs text-destructive">
|
|
<% if detail["name"].present? %><strong><%= detail["name"] %>:</strong> <% end %><%= detail["message"] %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
<% elsif import_started? %>
|
|
<span class="text-success"><%= t("provider_sync_summary.health.errors", count: 0) %></span>
|
|
<% else %>
|
|
<span><%= t("provider_sync_summary.health.errors", count: 0) %></span>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# Pending→posted reconciliation %>
|
|
<% if has_pending_reconciled? %>
|
|
<div class="mt-1">
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "check-circle", size: "sm", color: "success" %>
|
|
<span class="text-success"><%= t("provider_sync_summary.health.pending_reconciled", count: pending_reconciled) %></span>
|
|
</div>
|
|
<% if pending_reconciled_details.any? %>
|
|
<details class="mt-1">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary">
|
|
<%= t("provider_sync_summary.health.view_reconciled") %>
|
|
</summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
|
|
<% pending_reconciled_details.each do |detail| %>
|
|
<p class="text-xs text-success">
|
|
<%= detail["account_name"] %>: <%= detail["pending_name"] %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Duplicate suggestions needing review %>
|
|
<% if has_duplicate_suggestions_created? %>
|
|
<div class="mt-1">
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "alert-triangle", size: "sm", color: "warning" %>
|
|
<span class="text-warning"><%= t("provider_sync_summary.health.duplicate_suggestions", count: duplicate_suggestions_created) %></span>
|
|
</div>
|
|
<% if duplicate_suggestions_details.any? %>
|
|
<details class="mt-1">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary">
|
|
<%= t("provider_sync_summary.health.view_duplicate_suggestions") %>
|
|
</summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
|
|
<% duplicate_suggestions_details.each do |detail| %>
|
|
<p class="text-xs text-warning">
|
|
<%= detail["account_name"] %>: <%= detail["pending_name"] %> → <%= detail["posted_name"] %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Stale pending transactions (auto-excluded) %>
|
|
<% if has_stale_pending? %>
|
|
<div class="mt-1">
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "clock", size: "sm", color: "warning" %>
|
|
<span class="text-warning"><%= t("provider_sync_summary.health.stale_pending", count: stale_pending_excluded) %></span>
|
|
</div>
|
|
<% if stale_pending_details.any? %>
|
|
<details class="mt-1">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary">
|
|
<%= t("provider_sync_summary.health.view_stale_pending") %>
|
|
</summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
|
|
<% stale_pending_details.each do |detail| %>
|
|
<p class="text-xs text-warning">
|
|
<%= detail["account_name"] %>: <%= t("provider_sync_summary.health.stale_pending_count", count: detail["count"]) %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Stale unmatched pending (need manual review) %>
|
|
<% if has_stale_unmatched_pending? %>
|
|
<div class="mt-1">
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "help-circle", size: "sm" %>
|
|
<span class="text-secondary"><%= t("provider_sync_summary.health.stale_unmatched", count: stale_unmatched_pending) %></span>
|
|
</div>
|
|
<% if stale_unmatched_details.any? %>
|
|
<details class="mt-1">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary">
|
|
<%= t("provider_sync_summary.health.view_stale_unmatched") %>
|
|
</summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
|
|
<% stale_unmatched_details.each do |detail| %>
|
|
<p class="text-xs text-secondary">
|
|
<%= detail["account_name"] %>: <%= t("provider_sync_summary.health.stale_unmatched_count", count: detail["count"]) %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Data quality warnings %>
|
|
<% if has_data_quality_issues? %>
|
|
<div class="flex items-center gap-3 mt-1">
|
|
<% if data_warnings > 0 %>
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "alert-triangle", size: "sm", color: "warning" %>
|
|
<span class="text-warning"><%= t("provider_sync_summary.health.data_warnings", count: data_warnings) %></span>
|
|
</div>
|
|
<% end %>
|
|
<% if notices > 0 %>
|
|
<div class="flex items-center gap-1">
|
|
<%= helpers.icon "info", size: "sm" %>
|
|
<span><%= t("provider_sync_summary.health.notices", count: notices) %></span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if data_quality_details.any? %>
|
|
<details class="mt-2">
|
|
<summary class="text-xs cursor-pointer text-secondary hover:text-primary">
|
|
<%= t("provider_sync_summary.health.view_data_quality") %>
|
|
</summary>
|
|
<div class="mt-1 pl-2 border-l-2 border-surface-inset space-y-1">
|
|
<% data_quality_details.each do |detail| %>
|
|
<p class="text-xs <%= severity_color_class(detail["severity"]) %>"><%= detail["message"] %></p>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|