QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-08 05:04:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
0954200ad43ca4e7aec7a5504aee6bc71f3ffe7a
sure/app/components/provider_sync_summary.html.erb
Guillem Arias Fauste 2bcdf6c554 fix(design-system): replace undefined utility classes and broken /N modifiers (#1660) 
* fix(design-system): replace undefined utility classes and broken /N modifiers

Audit of class-name resolution in views surfaced two related silent
failures across ~17 files:

1. Class names that don't exist anywhere in the design system. Tailwind
   silently drops them and the element renders with no CSS for that
   property.
   - bg-primary (and bg-primary/5, /10, /90): never defined as a
     custom utility, no --color-primary in @theme. Used as a CTA bg
     in 8 places, all rendered transparent.
   - text-inverted: typo of text-inverse.
   - text-primary-foreground: shadcn/Radix vocabulary, not in our
     token system.
   - bg-accent / border-accent / text-accent: same shadcn vocabulary;
     not defined.

2. Slash modifier (/N) used on custom @utility blocks. Modifiers only
   resolve on Tailwind theme colors (anything in tokens.json color.*).
   Custom @utility blocks compile to static @apply statements and
   silently drop the /N variant. Affected uses:
   - border-surface-inset/50 across provider account selectors.
   - border-secondary/30, /40 in admin SSO form and simplefin setup.
   - bg-surface-inset/30, /40 in settings preferences and simplefin.

Fixes:

| From                                              | To                                                  |
|---------------------------------------------------|------------------------------------------------------|
| bg-primary text-white (and similar primary CTAs)  | button-bg-primary text-inverse                      |
| bg-primary text-primary-foreground (badges)       | button-bg-primary text-inverse                      |
| bg-primary text-inverted (typo)                   | button-bg-primary text-inverse                      |
| bg-primary text-primary (broken active pill)      | bg-inverse text-inverse                             |
| bg-primary (status dot)                           | bg-inverse                                          |
| bg-primary/5, bg-primary/10 (subtle accent bg)    | bg-gray-tint-5, bg-gray-tint-10                     |
| hover:bg-primary/90                               | hover:button-bg-primary-hover                       |
| border-accent bg-accent/10 text-accent (badges)   | border-secondary bg-surface-inset text-secondary    |
| border-surface-inset/50                           | border-secondary                                     |
| border-secondary/30, /40                          | border-tertiary                                      |
| bg-surface-inset/30                               | bg-surface-inset (full strength)                     |
| bg-surface-inset/40                               | bg-container-inset                                   |

Also documents the alpha-modifier limitation in design/tokens/README.md
under a new "Alpha modifiers in views (/N syntax)" section, with the
opacity-N convention for custom utilities and a note that the
gray-tint-5 / gray-tint-10 family (and similar pre-resolved tints) are
theme colors and accept /N modifiers natively.

The accent-badge mapping uses neutral semantics for now. A dedicated
brand-accent token (text-link-tint-10 etc.) is worth considering as a
follow-up if the "highlighted metadata badge" pattern recurs.

* fix(design-system): replace undefined divide-primary / divide-secondary with alpha tokens

Same class of bug as the rest of this PR: divide-{name} requires the
name to be a theme color (i.e. expose --color-{name}), and our custom
@utility utilities (primary, secondary, etc.) do not. Tailwind silently
drops the unrecognized class and rows render with no separator.

Spotted six instances during the visual audit:

- admin/users/index.html.erb (×2): users table + pending invitations
- admin/sso_providers/index.html.erb (×2): configured + legacy lists
- transactions/categorizes/_transaction_list.html.erb: categorize sidebar
- settings/preferences/show.html.erb: divide-secondary/60 (also broken)

Swapped to the alpha-black/white pattern already used elsewhere in the
codebase (imports/cleans/show, transactions/_summary, etc.):

  divide-y divide-primary
  -> divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200

  divide-y divide-secondary/60
  -> divide-y divide-alpha-black-100 theme-dark:divide-alpha-white-100

The lighter (-100) variant on the preferences list matches the original
intent of /60 (more subtle).
2026-05-04 21:40:17 +02:00

272 lines
13 KiB
Plaintext
Raw Blame History

<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/30 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>
Reference in New Issue View Git Blame Copy Permalink