feat(overview): show suspended cycles separately in the payment tooltip

test/mv_web/member_live/index_membership_fee_status_test.exs

@@ -83,6 +83,31 @@ defmodule MvWeb.MemberLive.IndexMembershipFeeStatusTest do
       assert has_element?(view, "#payment-tip-#{member.id}[popover]")
     end
 
+    test "the tooltip lists suspended cycles in a separate labeled section (§1.14)", %{conn: conn} do
+      fee_type = create_fee_type(%{interval: :yearly})
+      member = create_member(%{first_name: "Mixed", membership_fee_type_id: fee_type.id})
+      create_cycle(member, fee_type, %{cycle_start: ~D[2023-01-01], status: :unpaid})
+      create_cycle(member, fee_type, %{cycle_start: ~D[2024-01-01], status: :suspended})
+
+      {:ok, view, _html} = live(conn, "/members")
+
+      tip = "#payment-tip-#{member.id}"
+
+      # Suspended cycles are shown separately, under their own text label — the
+      # distinction is not color-only. The suspended cycle's period lives in the
+      # suspended section and is absent from the unpaid list.
+      assert has_element?(view, "#{tip} [data-testid='payment-tooltip-suspended']", "Suspended")
+
+      suspended =
+        view |> element("#{tip} [data-testid='payment-tooltip-suspended']") |> render()
+
+      assert suspended =~ "2024"
+
+      unpaid = view |> element("#{tip} [data-testid='payment-tooltip-unpaid']") |> render()
+      assert unpaid =~ "2023"
+      refute unpaid =~ "2024"
+    end
+
     test "a fully-paid member renders the badge but no tooltip popover", %{conn: conn} do
       fee_type = create_fee_type(%{interval: :yearly})
       member = create_member(%{first_name: "Clean", membership_fee_type_id: fee_type.id})