Add StatisticsLive: overview, bars by year, pie chart

- Summary cards: active/inactive members, open amount
- Joins and exits by year (horizontal bars)
- Contributions by year: table with stacked bar above amounts
- Column order: Paid, Unpaid, Suspended, Total; color dots for legend
- All years combined pie chart
- LiveView tests

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/mv_web/live/statistics_live.ex

@@ -0,0 +1,498 @@
+defmodule MvWeb.StatisticsLive do
+  @moduledoc """
+  LiveView for the statistics page at /statistics.
+
+  Displays aggregated member and membership fee cycle statistics.
+  """
+  use MvWeb, :live_view
+
+  import MvWeb.LiveHelpers, only: [current_actor: 1]
+  alias Mv.Statistics
+  alias MvWeb.Helpers.MembershipFeeHelpers
+
+  @impl true
+  def mount(_params, _session, socket) do
+    socket =
+      socket
+      |> load_statistics()
+      |> assign(:page_title, gettext("Statistics"))
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def handle_params(_params, _uri, socket) do
+    {:noreply, load_statistics(socket)}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <Layouts.app flash={@flash} current_user={@current_user}>
+      <.header>
+        {gettext("Statistics")}
+        <:subtitle>{gettext("Overview from first membership to today")}</:subtitle>
+      </.header>
+
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        <div class="card bg-base-200 shadow-md border border-base-300">
+          <div class="card-body p-5">
+            <h2 class="card-title text-sm font-medium text-base-content/80">
+              {gettext("Active members")}
+            </h2>
+            <p
+              class="text-3xl font-bold tabular-nums"
+              aria-label={gettext("Active members") <> ": " <> to_string(@active_count)}
+            >
+              {@active_count}
+            </p>
+          </div>
+        </div>
+        <div class="card bg-base-200 shadow-md border border-base-300">
+          <div class="card-body p-5">
+            <h2 class="card-title text-sm font-medium text-base-content/80">
+              {gettext("Inactive members")}
+            </h2>
+            <p
+              class="text-3xl font-bold tabular-nums"
+              aria-label={gettext("Inactive members") <> ": " <> to_string(@inactive_count)}
+            >
+              {@inactive_count}
+            </p>
+          </div>
+        </div>
+        <div class="card bg-base-200 shadow-md border border-base-300">
+          <div class="card-body p-5">
+            <h2 class="card-title text-sm font-medium text-base-content/80">
+              {gettext("Open amount")}
+            </h2>
+            <p
+              class="text-3xl font-bold tabular-nums"
+              aria-label={gettext("Open amount") <> ": " <> MembershipFeeHelpers.format_currency(@open_amount_total)}
+            >
+              {MembershipFeeHelpers.format_currency(@open_amount_total)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <section
+        class="card bg-base-200 shadow-md border border-base-300 mb-8"
+        aria-labelledby="joins-exits-heading"
+      >
+        <div class="card-body">
+          <h2 id="joins-exits-heading" class="card-title text-lg mb-4">
+            {gettext("Joins and exits by year")}
+          </h2>
+          <p class="text-sm text-base-content/70 mb-4">
+            {gettext("From %{first} to %{last} (relevant years with membership data)",
+              first: @years |> List.last() |> to_string(),
+              last: @years |> List.first() |> to_string()
+            )}
+          </p>
+          <.joins_exits_bars joins_exits_by_year={@joins_exits_by_year} />
+        </div>
+      </section>
+
+      <section
+        class="card bg-base-200 shadow-md border border-base-300 mb-8"
+        aria-labelledby="contributions-heading"
+      >
+        <div class="card-body">
+          <h2 id="contributions-heading" class="card-title text-lg mb-4">
+            {gettext("Contributions by year")}
+          </h2>
+          <div class="flex flex-col gap-8 items-start">
+            <div class="w-full">
+              <.contributions_bars_by_year
+                contributions_by_year={@contributions_by_year}
+                totals_over_all_years={@totals_over_all_years}
+              />
+            </div>
+            <div class="w-full flex flex-col items-center pt-6 mt-2 border-t border-base-300">
+              <h3 class="text-sm font-semibold mb-3">{gettext("All years combined (pie)")}</h3>
+              <.contributions_pie cycle_totals={@totals_over_all_years} />
+              <p class="text-xs text-base-content/70 mt-2">
+                <span class="inline-block w-2 h-2 rounded-full bg-success align-middle mr-1"></span>
+                {gettext("Paid")}
+                <span class="inline-block w-2 h-2 rounded-full bg-warning align-middle mx-2 mr-1">
+                </span>
+                {gettext("Unpaid")}
+                <span class="inline-block w-2 h-2 rounded-full bg-base-content/20 align-middle mx-2 mr-1">
+                </span>
+                {gettext("Suspended")}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Layouts.app>
+    """
+  end
+
+  attr :joins_exits_by_year, :list, required: true
+
+  defp joins_exits_bars(assigns) do
+    join_values = Enum.map(assigns.joins_exits_by_year, & &1.joins)
+    exit_values = Enum.map(assigns.joins_exits_by_year, & &1.exits)
+    max_joins = max((join_values != [] && Enum.max(join_values)) || 0, 1)
+    max_exits = max((exit_values != [] && Enum.max(exit_values)) || 0, 1)
+
+    assigns = assign(assigns, :max_joins, max_joins)
+    assigns = assign(assigns, :max_exits, max_exits)
+
+    ~H"""
+    <div
+      class="space-y-4"
+      role="img"
+      aria-label={gettext("Joins and exits by year as horizontal bar chart")}
+    >
+      <div class="flex gap-4 text-sm mb-2">
+        <span class="flex items-center gap-2">
+          <span class="inline-block w-4 h-3 rounded bg-success" aria-hidden="true"></span>
+          {gettext("Joins")}
+        </span>
+        <span class="flex items-center gap-2">
+          <span class="inline-block w-4 h-3 rounded bg-error" aria-hidden="true"></span>
+          {gettext("Exits")}
+        </span>
+      </div>
+      <div class="space-y-3">
+        <%= for item <- @joins_exits_by_year do %>
+          <div class="flex flex-col sm:flex-row sm:items-center gap-2">
+            <span class="w-12 font-mono text-sm shrink-0" id={"year-#{item.year}"}>{item.year}</span>
+            <div class="flex-1 min-w-0 space-y-1">
+              <div class="flex items-center gap-2">
+                <span class="text-xs w-8 shrink-0">{item.joins}</span>
+                <div
+                  class="h-6 bg-base-300 rounded overflow-hidden flex min-w-[4rem]"
+                  role="presentation"
+                >
+                  <div
+                    class="h-full bg-success transition-all min-w-[2px]"
+                    style={"width: #{max(0, min(100, Float.round(item.joins / @max_joins * 100, 1)))}%"}
+                    aria-hidden="true"
+                  >
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-xs w-8 shrink-0">{item.exits}</span>
+                <div
+                  class="h-6 bg-base-300 rounded overflow-hidden flex min-w-[4rem]"
+                  role="presentation"
+                >
+                  <div
+                    class="h-full bg-error transition-all min-w-[2px]"
+                    style={"width: #{max(0, min(100, Float.round(item.exits / @max_exits * 100, 1)))}%"}
+                    aria-hidden="true"
+                  >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+
+  attr :contributions_by_year, :list, required: true
+  attr :totals_over_all_years, :map, required: true
+
+  defp contributions_bars_by_year(assigns) do
+    rows = assigns.contributions_by_year
+    totals = assigns.totals_over_all_years
+
+    all_rows_with_decimals =
+      Enum.map(rows, fn row ->
+        %{
+          year: row.year,
+          summary: false,
+          total: row.total,
+          paid: row.paid,
+          unpaid: row.unpaid,
+          suspended: row.suspended
+        }
+      end) ++
+        [
+          %{
+            year: nil,
+            summary: true,
+            total: totals.total,
+            paid: totals.paid,
+            unpaid: totals.unpaid,
+            suspended: totals.suspended
+          }
+        ]
+
+    max_total = max_decimal(all_rows_with_decimals, :total)
+
+    rows_with_pct =
+      Enum.map(all_rows_with_decimals, fn row ->
+        bar_pct = bar_pct(row.total, max_total)
+
+        sum_positive =
+          Decimal.add(Decimal.add(row.paid, row.unpaid), row.suspended)
+
+        seg_scale =
+          if Decimal.compare(sum_positive, 0) == :gt, do: sum_positive, else: Decimal.new(1)
+
+        paid_pct =
+          row.paid |> Decimal.div(seg_scale) |> Decimal.mult(100) |> Decimal.to_float()
+
+        unpaid_pct =
+          row.unpaid |> Decimal.div(seg_scale) |> Decimal.mult(100) |> Decimal.to_float()
+
+        suspended_pct =
+          row.suspended |> Decimal.div(seg_scale) |> Decimal.mult(100) |> Decimal.to_float()
+
+        %{
+          year: row.year,
+          summary: row.summary,
+          total_formatted: MembershipFeeHelpers.format_currency(row.total),
+          paid_formatted: MembershipFeeHelpers.format_currency(row.paid),
+          unpaid_formatted: MembershipFeeHelpers.format_currency(row.unpaid),
+          suspended_formatted: MembershipFeeHelpers.format_currency(row.suspended),
+          bar_pct: bar_pct,
+          paid_pct: paid_pct,
+          unpaid_pct: unpaid_pct,
+          suspended_pct: suspended_pct
+        }
+      end)
+
+    assigns = assign(assigns, :rows, rows_with_pct)
+
+    ~H"""
+    <div
+      class="overflow-x-auto"
+      role="img"
+      aria-label={gettext("Contributions by year as table with stacked bars")}
+    >
+      <table class="table table-sm w-full">
+        <thead class="bg-base-300">
+          <tr>
+            <th scope="col" class="text-base-content font-semibold w-20">{gettext("Year")}</th>
+            <th scope="col" class="text-base-content font-semibold">{gettext("Paid")}</th>
+            <th scope="col" class="text-base-content font-semibold">{gettext("Unpaid")}</th>
+            <th scope="col" class="text-base-content font-semibold">{gettext("Suspended")}</th>
+            <th scope="col" class="text-base-content font-semibold">{gettext("Total")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <%= for row <- @rows do %>
+            <tr class={row.summary && "border-t-2 border-base-300 bg-base-300/30"}>
+              <td
+                rowspan="2"
+                class={"font-mono align-middle border-b-0 #{if row.summary, do: "font-semibold", else: ""}"}
+              >
+                <%= if row.summary do %>
+                  {gettext("Total")}
+                <% else %>
+                  {row.year}
+                <% end %>
+              </td>
+              <td colspan="4" class="align-top p-1 pb-0 border-b-0">
+                <div class="h-6 rounded overflow-hidden bg-base-300 relative min-w-[4rem]">
+                  <div
+                    class="flex h-full absolute left-0 top-0 bottom-0 min-w-0 rounded"
+                    style={"width: #{max(0, Float.round(row.bar_pct, 1))}%"}
+                  >
+                    <div
+                      class="h-full bg-success min-w-0 rounded-l"
+                      style={"width: #{Float.round(row.paid_pct, 1)}%"}
+                      title={gettext("Paid")}
+                    >
+                    </div>
+                    <div
+                      class="h-full bg-warning min-w-0"
+                      style={"width: #{Float.round(row.unpaid_pct, 1)}%"}
+                      title={gettext("Unpaid")}
+                    >
+                    </div>
+                    <div
+                      class="h-full bg-base-content/20 min-w-0 rounded-r"
+                      style={"width: #{Float.round(row.suspended_pct, 1)}%"}
+                      title={gettext("Suspended")}
+                    >
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr class={row.summary && "bg-base-300/30"}>
+              <td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
+                <span class="inline-flex items-center gap-1.5">
+                  {row.paid_formatted}
+                  <span
+                    class="inline-block w-2 h-2 rounded-full bg-success shrink-0"
+                    aria-hidden="true"
+                    title={gettext("Paid")}
+                  >
+                  </span>
+                </span>
+              </td>
+              <td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
+                <span class="inline-flex items-center gap-1.5">
+                  {row.unpaid_formatted}
+                  <span
+                    class="inline-block w-2 h-2 rounded-full bg-warning shrink-0"
+                    aria-hidden="true"
+                    title={gettext("Unpaid")}
+                  >
+                  </span>
+                </span>
+              </td>
+              <td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
+                <span class="inline-flex items-center gap-1.5">
+                  {row.suspended_formatted}
+                  <span
+                    class="inline-block w-2 h-2 rounded-full bg-base-content/20 shrink-0"
+                    aria-hidden="true"
+                    title={gettext("Suspended")}
+                  >
+                  </span>
+                </span>
+              </td>
+              <td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
+                {row.total_formatted}
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+    """
+  end
+
+  defp max_decimal(rows, key) do
+    Enum.reduce(rows, Decimal.new(0), fn row, acc ->
+      val = Map.get(row, key)
+      if Decimal.compare(val, acc) == :gt, do: val, else: acc
+    end)
+  end
+
+  defp bar_pct(value, max) do
+    scale = if Decimal.compare(max, 0) == :gt, do: max, else: Decimal.new(1)
+    value |> Decimal.div(scale) |> Decimal.mult(100) |> Decimal.to_float()
+  end
+
+  attr :cycle_totals, :map, required: true
+
+  defp contributions_pie(assigns) do
+    paid = assigns.cycle_totals.paid
+    unpaid = assigns.cycle_totals.unpaid
+    suspended = assigns.cycle_totals.suspended
+
+    sum_positive = Decimal.add(Decimal.add(paid, unpaid), suspended)
+    scale = if Decimal.compare(sum_positive, 0) == :gt, do: sum_positive, else: Decimal.new(1)
+
+    paid_pct = Decimal.div(paid, scale) |> Decimal.mult(100) |> Decimal.to_float()
+    unpaid_pct = Decimal.div(unpaid, scale) |> Decimal.mult(100) |> Decimal.to_float()
+    suspended_pct = Decimal.div(suspended, scale) |> Decimal.mult(100) |> Decimal.to_float()
+
+    # Conic gradient: 0deg = top, clockwise. Success (paid), warning (unpaid), base-300 (suspended)
+    # Use theme CSS variables (--color-*) so the pie renders in all themes
+    paid_deg = paid_pct * 3.6
+    unpaid_deg = unpaid_pct * 3.6
+
+    gradient_stops =
+      "var(--color-success) 0deg, var(--color-success) #{paid_deg}deg, var(--color-warning) #{paid_deg}deg, var(--color-warning) #{paid_deg + unpaid_deg}deg, var(--color-base-300) #{paid_deg + unpaid_deg}deg, var(--color-base-300) 360deg"
+
+    assigns =
+      assigns
+      |> assign(:paid_pct, paid_pct)
+      |> assign(:unpaid_pct, unpaid_pct)
+      |> assign(:suspended_pct, suspended_pct)
+      |> assign(:gradient_stops, gradient_stops)
+
+    ~H"""
+    <div
+      class="w-40 h-40 min-h-[10rem] rounded-full shrink-0 border-2 border-base-300 bg-base-300"
+      style={"background: conic-gradient(#{@gradient_stops});"}
+      role="img"
+      aria-label={
+        gettext(
+          "Contributions pie: paid %{paid}%%, unpaid %{unpaid}%%, suspended %{suspended}%%",
+          paid: Float.round(@paid_pct, 1),
+          unpaid: Float.round(@unpaid_pct, 1),
+          suspended: Float.round(@suspended_pct, 1)
+        )
+      }
+      title={"#{gettext("Paid")}: #{Float.round(@paid_pct, 1)}%, #{gettext("Unpaid")}: #{Float.round(@unpaid_pct, 1)}%, #{gettext("Suspended")}: #{Float.round(@suspended_pct, 1)}%"}
+    >
+    </div>
+    """
+  end
+
+  defp load_statistics(socket) do
+    actor = current_actor(socket)
+    opts = [actor: actor]
+
+    current_year = Date.utc_today().year
+    first_year = Statistics.first_join_year(opts) || current_year
+    years = first_year..current_year |> Enum.to_list() |> Enum.reverse()
+
+    active_count = Statistics.active_member_count(opts)
+    inactive_count = Statistics.inactive_member_count(opts)
+    open_amount_total = Statistics.open_amount_total(opts)
+    joins_exits_by_year = build_joins_exits_by_year(years, opts)
+    contributions_by_year = build_contributions_by_year(years, opts)
+    totals_over_all_years = sum_cycle_totals(contributions_by_year)
+
+    assign(socket,
+      years: years,
+      active_count: active_count,
+      inactive_count: inactive_count,
+      open_amount_total: open_amount_total,
+      joins_exits_by_year: joins_exits_by_year,
+      contributions_by_year: contributions_by_year,
+      totals_over_all_years: totals_over_all_years
+    )
+  end
+
+  defp build_joins_exits_by_year(years, opts) do
+    Enum.map(years, fn y ->
+      %{
+        year: y,
+        joins: Statistics.joins_by_year(y, opts),
+        exits: Statistics.exits_by_year(y, opts)
+      }
+    end)
+  end
+
+  defp build_contributions_by_year(years, opts) do
+    Enum.map(years, fn y ->
+      totals = Statistics.cycle_totals_by_year(y, opts)
+
+      %{
+        year: y,
+        total: totals.total,
+        paid: totals.paid,
+        unpaid: totals.unpaid,
+        suspended: totals.suspended
+      }
+    end)
+  end
+
+  defp sum_cycle_totals(contributions_by_year) do
+    Enum.reduce(
+      contributions_by_year,
+      %{
+        total: Decimal.new(0),
+        paid: Decimal.new(0),
+        unpaid: Decimal.new(0),
+        suspended: Decimal.new(0)
+      },
+      fn row, acc ->
+        %{
+          total: Decimal.add(acc.total, row.total),
+          paid: Decimal.add(acc.paid, row.paid),
+          unpaid: Decimal.add(acc.unpaid, row.unpaid),
+          suspended: Decimal.add(acc.suspended, row.suspended)
+        }
+      end
+    )
+  end
+end

test/mv_web/live/statistics_live_test.exs

@@ -0,0 +1,32 @@
+defmodule MvWeb.StatisticsLiveTest do
+  @moduledoc """
+  Tests for the Statistics LiveView at /statistics.
+  """
+  use MvWeb.ConnCase, async: true
+
+  import Phoenix.LiveViewTest
+
+  describe "statistics page" do
+    test "renders statistics page with title and key labels for authenticated user with access",
+         %{
+           conn: conn
+         } do
+      {:ok, _view, html} = live(conn, ~p"/statistics")
+
+      assert html =~ "Statistics"
+      assert html =~ "Active members"
+      assert html =~ "Open amount"
+      assert html =~ "Contributions by year"
+      assert html =~ "Joins and exits by year"
+    end
+
+    test "page shows overview of all relevant years without year selector", %{conn: conn} do
+      {:ok, _view, html} = live(conn, ~p"/statistics")
+
+      # No year dropdown: single select for year should not be present as main control
+      assert html =~ "Overview" or html =~ "overview"
+      # table header or legend
+      assert html =~ "Year"
+    end
+  end
+end