mirror of
https://github.com/we-promise/sure.git
synced 2026-05-08 13:14:58 +00:00
2bcdf6c554
* 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).
220 lines
12 KiB
Plaintext
220 lines
12 KiB
Plaintext
<%= content_for :page_title, t(".title") %>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4">
|
|
<div class="mb-6">
|
|
<p class="text-sm text-secondary"><%= t(".description") %></p>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="mb-6">
|
|
<%= form_with url: admin_users_path, method: :get, class: "flex gap-4 items-end flex-wrap" do |f| %>
|
|
<div class="w-full md:w-auto">
|
|
<%= f.label :role, t(".filters.role"), class: "block text-sm font-medium text-primary mb-1" %>
|
|
<%= f.select :role,
|
|
options_for_select(
|
|
[[t(".filters.role_all"), ""], [t(".roles.guest"), "guest"], [t(".roles.member", default: "Member"), "member"], [t(".roles.admin"), "admin"], [t(".roles.super_admin"), "super_admin"]],
|
|
params[:role]
|
|
),
|
|
{},
|
|
class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary w-full" %>
|
|
</div>
|
|
<div class="w-full md:w-auto">
|
|
<%= f.label :trial_status, t(".filters.trial_status"), class: "block text-sm font-medium text-primary mb-1" %>
|
|
<%= f.select :trial_status,
|
|
options_for_select(
|
|
[[t(".filters.trial_all"), ""], [t(".filters.trial_expiring_soon"), "expiring_soon"], [t(".filters.trial_trialing"), "trialing"]],
|
|
params[:trial_status]
|
|
),
|
|
{},
|
|
class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary w-full" %>
|
|
</div>
|
|
<%= render DS::Button.new(variant: :primary, size: :md, type: "submit", text: t(".filters.submit"), class: "md:w-auto w-full justify-center") %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Summary: trials expiring in next 7 days -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-container-inset rounded-lg p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<%= icon "calendar-clock", class: "w-5 h-5 text-secondary" %>
|
|
<p class="text-xs font-medium text-secondary uppercase"><%= t(".summary.trials_expiring_7_days") %></p>
|
|
</div>
|
|
<p class="text-2xl font-semibold text-primary"><%= @trials_expiring_in_7_days %></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Families/Groups & Users -->
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-primary mb-3"><%= t(".section_title") %></h2>
|
|
|
|
<% if @families_with_users.any? %>
|
|
<div class="space-y-4">
|
|
<% @families_with_users.each do |family, users| %>
|
|
<% pending_invitations = @invitations_by_family[family.id] || [] %>
|
|
<details class="bg-container-inset rounded-lg overflow-hidden group"
|
|
data-controller="admin-invitation-delete"
|
|
data-admin-invitation-delete-delete-all-label-value="<%= t(".invitations.delete_all") %>">
|
|
<summary class="flex items-center justify-between gap-4 px-4 py-3 cursor-pointer select-none hover:bg-surface-hover">
|
|
<div class="flex items-center gap-3">
|
|
<%= icon "users", class: "w-5 h-5 text-secondary shrink-0" %>
|
|
<div>
|
|
<p class="font-semibold text-primary"><%= family.name.presence || t(".unnamed_family") %></p>
|
|
<p class="text-xs text-secondary">
|
|
<%= t(".family_summary",
|
|
members: users.size,
|
|
accounts: number_with_delimiter(@accounts_count_by_family[family.id] || 0),
|
|
transactions: number_with_delimiter(@entries_count_by_family[family.id] || 0)) %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 shrink-0">
|
|
<% sub = family.subscription %>
|
|
<% if sub&.trialing? %>
|
|
<span class="text-xs text-secondary">
|
|
<%= t(".table.trial_ends_at") %>: <%= sub.trial_ends_at&.to_fs(:long) || t(".not_available") %>
|
|
</span>
|
|
<% elsif sub %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
|
|
<%= sub.active? ? "bg-green-100 text-green-800" : "bg-surface text-secondary" %>">
|
|
<%= sub.status.humanize %>
|
|
</span>
|
|
<% else %>
|
|
<span class="text-xs text-secondary"><%= t(".no_subscription") %></span>
|
|
<% end %>
|
|
<%= icon "chevron-down", class: "w-4 h-4 text-secondary transition-transform group-open:rotate-180" %>
|
|
</div>
|
|
</summary>
|
|
|
|
<div class="border-t border-primary">
|
|
<table class="w-full">
|
|
<thead class="bg-surface-default border-b border-primary">
|
|
<tr>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-secondary uppercase"><%= t(".table.user") %></th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-secondary uppercase"><%= t(".table.last_login") %></th>
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-secondary uppercase"><%= t(".table.session_count") %></th>
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-secondary uppercase"><%= t(".table.role") %></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
|
|
<% users.each do |user| %>
|
|
<tr>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-surface flex items-center justify-center shrink-0">
|
|
<span class="text-sm font-medium text-primary"><%= user.initials %></span>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-primary"><%= user.display_name %></p>
|
|
<p class="text-sm text-secondary"><%= user.email %></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
|
|
<%= @last_login_by_user[user.id]&.to_fs(:long) || t(".table.never") %>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-primary text-right whitespace-nowrap">
|
|
<%= number_with_delimiter(@sessions_count_by_user[user.id] || 0) %>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<% if user.id == Current.user.id %>
|
|
<span class="text-sm text-secondary"><%= t(".you") %></span>
|
|
<% else %>
|
|
<%= form_with model: [:admin, user], method: :patch, class: "flex items-center justify-end gap-2", data: { controller: "auto-submit-form" } do |form| %>
|
|
<%= form.select :role,
|
|
options_for_select([
|
|
[t(".roles.guest"), "guest"],
|
|
[t(".roles.member", default: "Member"), "member"],
|
|
[t(".roles.admin"), "admin"],
|
|
[t(".roles.super_admin"), "super_admin"]
|
|
], user.role),
|
|
{},
|
|
class: "text-sm rounded-lg border border-primary bg-container text-primary px-2 py-1",
|
|
data: { auto_submit_form_target: "auto" } %>
|
|
<% end %>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
<% if pending_invitations.any? %>
|
|
<tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200 border-t border-dashed border-primary">
|
|
<% pending_invitations.each do |invitation| %>
|
|
<tr class="bg-red-50/30 dark:bg-red-950/20">
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<%= icon "mail", class: "w-5 h-5 text-secondary shrink-0" %>
|
|
<div>
|
|
<p class="font-medium text-secondary italic"><%= invitation.email %></p>
|
|
<p class="text-xs text-secondary"><%= t(".invitations.pending_label") %></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-secondary whitespace-nowrap">
|
|
<%= t(".invitations.expires", date: invitation.expires_at.to_fs(:long)) %>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-secondary text-right whitespace-nowrap">
|
|
—
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<%= form_with url: admin_invitation_path(invitation), method: :delete, class: "inline" do |f| %>
|
|
<button type="submit"
|
|
data-admin-invitation-delete-target="button"
|
|
data-action="click->admin-invitation-delete#handleClick"
|
|
class="text-sm text-red-600 hover:text-red-800 border border-red-300 rounded-lg px-2 py-1 hover:bg-red-50 transition-colors">
|
|
<%= t(".invitations.delete") %>
|
|
</button>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
<% end %>
|
|
</table>
|
|
<% if pending_invitations.any? %>
|
|
<%= form_with url: invitations_admin_family_path(family), method: :delete,
|
|
data: { admin_invitation_delete_target: "destroyAllForm" },
|
|
class: "hidden" do |f| %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<div class="bg-container-inset rounded-lg p-8 text-center">
|
|
<%= icon "users", class: "w-12 h-12 mx-auto text-secondary mb-3" %>
|
|
<p class="text-secondary"><%= t(".no_users") %></p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= settings_section title: t(".role_descriptions_title"), collapsible: true, open: true do %>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex items-start gap-3">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-primary shrink-0">
|
|
<%= t(".roles.guest") %>
|
|
</span>
|
|
<p class="text-secondary"><%= t(".role_descriptions.guest") %></p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-primary shrink-0">
|
|
<%= t(".roles.member", default: "Member") %>
|
|
</span>
|
|
<p class="text-secondary"><%= t(".role_descriptions.member", default: "Basic user access. Can manage their own accounts, transactions, and settings.") %></p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-primary shrink-0">
|
|
<%= t(".roles.admin") %>
|
|
</span>
|
|
<p class="text-secondary"><%= t(".role_descriptions.admin") %></p>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 shrink-0">
|
|
<%= t(".roles.super_admin") %>
|
|
</span>
|
|
<p class="text-secondary"><%= t(".role_descriptions.super_admin") %></p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|