sure/app/views/family_merchants/index.html.erb

<%= content_for :page_title, t(".title") %>
<%= content_for :page_actions do %>
  <%= render DS::Link.new(
    text: t(".merge"),
    variant: "outline",
    href: merge_family_merchants_path,
    frame: :modal
  ) %>
  <%= render DS::Link.new(
    text: t(".new"),
    variant: "primary",
    href: new_family_merchant_path,
    frame: :modal
  ) %>
<% end %>

<div class="bg-container rounded-xl shadow-border-xs p-4 space-y-6">
  <section class="space-y-3">
    <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
      <p><%= t(".family_title", moniker: family_moniker) %></p>
      <span class="text-subdued">&middot;</span>
      <p><%= @family_merchants.count %></p>
    </div>

    <% if @family_merchants.any? %>
      <div class="rounded-xl bg-container-inset space-y-1 p-1">
        <div class="bg-container rounded-lg shadow-border-xs overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="text-xs uppercase font-medium text-secondary border-b border-divider">
                <th scope="col" class="text-left py-3 px-4"><%= t(".table.merchant") %></th>
                <th scope="col" class="text-right py-3 px-4"><%= t(".table.actions") %></th>
              </tr>
            </thead>
            <tbody>
              <%= render partial: "family_merchants/family_merchant", collection: @family_merchants %>
            </tbody>
          </table>
        </div>
      </div>
    <% else %>
      <div class="flex justify-center items-center py-12">
        <div class="text-center flex flex-col items-center max-w-[300px]">
          <p class="text-primary mb-1 font-medium text-sm"><%= t(".family_empty", moniker: family_moniker_downcase) %></p>

          <%= render DS::Link.new(
            text: t(".new"),
            icon: "plus",
            href: new_family_merchant_path,
            frame: :modal
          ) %>
        </div>
      </div>
    <% end %>
  </section>

  <section class="space-y-3">
    <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
      <p><%= t(".provider_title") %></p>
      <span class="text-subdued">&middot;</span>
      <p><%= @provider_merchants.count %></p>
    </div>

    <div class="p-4 bg-container-inset border border-secondary rounded-lg">
      <div class="flex items-start gap-2">
        <%= icon "info", class: "w-5 h-5 text-link mt-0.5 flex-shrink-0" %>
        <p class="text-xs text-secondary leading-relaxed"><%= t(".provider_info") %></p>
      </div>
    </div>

    <% if @enhanceable_count > 0 && @llm_available %>
      <div class="flex items-center justify-between p-4 bg-container-inset border border-secondary rounded-lg">
        <div class="flex items-start gap-2">
          <%= icon "sparkles", class: "w-5 h-5 text-link mt-0.5 flex-shrink-0" %>
          <p class="text-xs text-secondary leading-relaxed"><%= t(".enhance_info", count: @enhanceable_count) %></p>
        </div>
        <%= render DS::Button.new(
          text: t(".enhance_button"),
          variant: :outline,
          size: :sm,
          icon: "sparkles",
          href: enhance_family_merchants_path
        ) %>
      </div>
    <% end %>

    <% if @provider_merchants.any? %>
      <div class="rounded-xl bg-container-inset space-y-1 p-1">
        <div class="bg-container rounded-lg shadow-border-xs overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="text-xs uppercase font-medium text-secondary border-b border-divider">
                <th scope="col" class="text-left py-3 px-4"><%= t(".table.merchant") %></th>
                <th scope="col" class="text-left py-3 px-4"><%= t(".table.source") %></th>
                <th scope="col" class="text-right py-3 px-4"><%= t(".table.actions") %></th>
              </tr>
            </thead>
            <tbody>
              <%= render partial: "family_merchants/provider_merchant", collection: @provider_merchants %>
            </tbody>
          </table>
        </div>
      </div>
    <% else %>
      <div class="flex justify-center items-center py-8">
        <p class="text-secondary text-sm text-center"><%= t(".provider_empty", moniker: family_moniker_downcase) %></p>
      </div>
    <% end %>
  </section>

  <% if @unlinked_merchants.any? %>
    <section class="space-y-3">
      <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
        <p><%= t(".unlinked_title") %></p>
        <span class="text-subdued">&middot;</span>
        <p><%= @unlinked_merchants.count %></p>
      </div>

      <div class="p-4 bg-container-inset border border-secondary rounded-lg">
        <div class="flex items-start gap-2">
          <%= icon "info", class: "w-5 h-5 text-subdued mt-0.5 flex-shrink-0" %>
          <p class="text-xs text-secondary leading-relaxed"><%= t(".unlinked_info") %></p>
        </div>
      </div>

      <div class="rounded-xl bg-container-inset space-y-1 p-1">
        <div class="bg-container rounded-lg shadow-border-xs overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="text-xs uppercase font-medium text-secondary border-b border-divider">
                <th scope="col" class="text-left py-3 px-4"><%= t(".table.merchant") %></th>
                <th scope="col" class="text-left py-3 px-4"><%= t(".table.source") %></th>
                <th scope="col" class="text-right py-3 px-4"><%= t(".table.actions") %></th>
              </tr>
            </thead>
            <tbody>
              <%= render partial: "family_merchants/provider_merchant", collection: @unlinked_merchants %>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  <% end %>
</div>