sure/app/views/sophtron_items/_sophtron_item.html.erb

<%# locals: (sophtron_item:) %>

<%= tag.div id: dom_id(sophtron_item) do %>
  <% provider_display_name = sophtron_item.provider_display_name %>
  <% manual_sync_required = sophtron_item.manual_sync_required? %>
  <% connected_institution_options = sophtron_item.connected_institution_options %>
  <details open class="group bg-container p-4 shadow-border-xs rounded-xl">
    <summary class="flex items-center justify-between gap-2">
      <div class="flex items-center gap-2">
        <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>

        <div class="flex items-center justify-center h-8 w-8 bg-orange-600/10 rounded-full">
          <% if sophtron_item.logo.attached? %>
            <%= image_tag sophtron_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
          <% else %>
            <div class="flex items-center justify-center">
              <%= tag.p provider_display_name.first.upcase, class: "text-orange-600 text-xs font-medium" %>
            </div>
          <% end %>
        </div>

        <div class="pl-1 text-sm">
          <div class="flex items-center gap-2">
            <%= tag.p provider_display_name, class: "font-medium text-primary" %>
            <% if manual_sync_required %>
              <span class="rounded-full bg-warning/10 px-2 py-0.5 text-xs font-medium text-warning"><%= t(".manual_sync") %></span>
            <% end %>
            <% if sophtron_item.scheduled_for_deletion? %>
              <p class="text-destructive text-sm animate-pulse"><%= t(".deletion_in_progress") %></p>
            <% end %>
          </div>
          <% if sophtron_item.accounts.any? %>
            <p class="text-xs text-secondary">
              <%= sophtron_item.institution_summary %>
            </p>
          <% end %>
          <% if sophtron_item.syncing? %>
            <div class="text-secondary flex items-center gap-1">
              <%= icon "loader", size: "sm", class: "animate-spin" %>
              <%= tag.span t(".syncing") %>
            </div>
          <% elsif sophtron_item.sync_error.present? %>
            <div class="text-secondary flex items-center gap-1">
              <%= render DS::Tooltip.new(text: sophtron_item.sync_error, icon: "alert-circle", size: "sm", color: "destructive") %>
              <%= tag.span t(".error"), class: "text-destructive" %>
            </div>
          <% else %>
            <p class="text-secondary">
              <% if sophtron_item.last_synced_at %>
                <% if sophtron_item.sync_status_summary %>
                  <%= t(".status_with_summary", timestamp: time_ago_in_words(sophtron_item.last_synced_at), summary: sophtron_item.sync_status_summary) %>
                <% else %>
                  <%= t(".status", timestamp: time_ago_in_words(sophtron_item.last_synced_at)) %>
                <% end %>
              <% else %>
                <%= t(".status_never") %>
              <% end %>
            </p>
          <% end %>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <% if manual_sync_required || Rails.env.development? %>
          <%= render DS::Button.new(
            variant: :icon,
            icon: "refresh-cw",
            href: sync_sophtron_item_path(sophtron_item),
            frame: (manual_sync_required ? "modal" : nil),
            title: t(".sync_now")
          ) %>
        <% end %>

        <%= render DS::Menu.new do |menu| %>
          <% if connected_institution_options.many? %>
            <% connected_institution_options.each do |institution| %>
              <% institution_manual_sync_required = sophtron_item.manual_sync_required_for_institution?(institution[:institution_key]) %>
              <% menu.with_item(
                variant: "button",
                text: t(institution_manual_sync_required ? ".automatic_sync_for" : ".manual_sync_action_for", institution: institution[:name]),
                icon: institution_manual_sync_required ? "refresh-cw" : "pause-circle",
                href: toggle_manual_sync_sophtron_item_path(sophtron_item, institution_key: institution[:institution_key]),
                method: :post
              ) %>
            <% end %>
          <% else %>
            <% menu.with_item(
              variant: "button",
              text: t(manual_sync_required ? ".automatic_sync" : ".manual_sync_action"),
              icon: manual_sync_required ? "refresh-cw" : "pause-circle",
              href: toggle_manual_sync_sophtron_item_path(sophtron_item),
              method: :post
            ) %>
          <% end %>
          <% menu.with_item(
            variant: "button",
            text: t(".delete"),
            icon: "trash-2",
            href: sophtron_item_path(sophtron_item),
            method: :delete,
            confirm: CustomConfirm.for_resource_deletion(provider_display_name, high_severity: true)
          ) %>
        <% end %>
      </div>
    </summary>

    <% unless sophtron_item.scheduled_for_deletion? %>
      <div class="space-y-4 mt-4">
        <% if sophtron_item.accounts.any? %>
          <%= render "accounts/index/account_groups", accounts: sophtron_item.accounts %>
        <% end %>

        <%# Sync summary (collapsible) - using shared ProviderSyncSummary component %>
        <% stats = if defined?(@sophtron_sync_stats_map) && @sophtron_sync_stats_map
             @sophtron_sync_stats_map[sophtron_item.id] || {}
           else
             sophtron_item.syncs.ordered.first&.sync_stats || {}
           end %>
        <%= render ProviderSyncSummary.new(
          stats: stats,
          provider_item: sophtron_item,
          institutions_count: sophtron_item.connected_institutions.size
        ) %>

        <%# Use model methods for consistent counts %>
        <% unlinked_count = sophtron_item.unlinked_accounts_count %>
        <% linked_count = sophtron_item.linked_accounts_count %>
        <% total_count = sophtron_item.total_accounts_count %>

        <% if unlinked_count > 0 %>
          <div class="p-4 flex flex-col gap-3 items-center justify-center">
            <p class="text-primary font-medium text-sm"><%= t(".setup_needed") %></p>
            <p class="text-secondary text-sm"><%= t(".setup_description", linked: linked_count, total: total_count) %></p>
            <%= render DS::Link.new(
              text: t(".setup_action"),
              icon: "settings",
              variant: "primary",
              href: setup_accounts_sophtron_item_path(sophtron_item),
              frame: :modal
            ) %>
          </div>
        <% elsif sophtron_item.accounts.empty? && total_count == 0 %>
          <div class="p-4 flex flex-col gap-3 items-center justify-center">
            <p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
            <p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
            <%= render DS::Link.new(
              text: t(".setup_action"),
              icon: "settings",
              variant: "primary",
              href: setup_accounts_sophtron_item_path(sophtron_item),
              frame: :modal
            ) %>
          </div>
        <% end %>
      </div>
    <% end %>
  </details>
<% end %>