feat: add payment status filter and paid column to member list

Add PaymentFilterComponent dropdown and colored paid column. Filter supports URL bookmarking and combines with search/sort.

lib/mv_web/live/components/payment_filter_component.ex

@@ -0,0 +1,140 @@
+defmodule MvWeb.Components.PaymentFilterComponent do
+  @moduledoc """
+  Provides the PaymentFilter Live-Component.
+
+  A dropdown filter for filtering members by payment status (paid/not paid/all).
+  Uses DaisyUI dropdown styling and sends filter changes to parent LiveView.
+
+  ## Props
+  - `:paid_filter` - Current filter state: `nil` (all), `:paid`, or `:not_paid`
+  - `:id` - Component ID (required)
+  - `:member_count` - Number of filtered members to display in badge (optional, default: 0)
+
+  ## Events
+  - Sends `{:payment_filter_changed, filter}` to parent when filter changes
+  """
+  use MvWeb, :live_component
+
+  @impl true
+  def mount(socket) do
+    {:ok, assign(socket, :open, false)}
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    socket =
+      socket
+      |> assign(:id, assigns.id)
+      |> assign(:paid_filter, assigns[:paid_filter])
+      |> assign(:member_count, assigns[:member_count] || 0)
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="relative" id={@id}>
+      <button
+        type="button"
+        class={[
+          "btn btn-ghost gap-2",
+          @paid_filter && "btn-active"
+        ]}
+        phx-click="toggle_dropdown"
+        phx-target={@myself}
+        aria-haspopup="true"
+        aria-expanded={to_string(@open)}
+        aria-label={gettext("Filter by payment status")}
+      >
+        <.icon name="hero-funnel" class="h-5 w-5" />
+        <span class="hidden sm:inline">{filter_label(@paid_filter)}</span>
+        <span :if={@paid_filter} class="badge badge-primary badge-sm">{@member_count}</span>
+      </button>
+
+      <ul
+        :if={@open}
+        class="menu dropdown-content bg-base-100 rounded-box z-10 w-52 p-2 shadow-lg absolute right-0 mt-2"
+        role="menu"
+        aria-label={gettext("Payment filter")}
+        phx-click-away="close_dropdown"
+        phx-target={@myself}
+      >
+        <li>
+          <button
+            type="button"
+            role="menuitemradio"
+            aria-checked={to_string(@paid_filter == nil)}
+            class={@paid_filter == nil && "active"}
+            phx-click="select_filter"
+            phx-value-filter=""
+            phx-target={@myself}
+          >
+            <.icon name="hero-users" class="h-4 w-4" />
+            {gettext("All")}
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            role="menuitemradio"
+            aria-checked={to_string(@paid_filter == :paid)}
+            class={@paid_filter == :paid && "active"}
+            phx-click="select_filter"
+            phx-value-filter="paid"
+            phx-target={@myself}
+          >
+            <.icon name="hero-check-circle" class="h-4 w-4 text-success" />
+            {gettext("Paid")}
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            role="menuitemradio"
+            aria-checked={to_string(@paid_filter == :not_paid)}
+            class={@paid_filter == :not_paid && "active"}
+            phx-click="select_filter"
+            phx-value-filter="not_paid"
+            phx-target={@myself}
+          >
+            <.icon name="hero-x-circle" class="h-4 w-4 text-error" />
+            {gettext("Not paid")}
+          </button>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("toggle_dropdown", _params, socket) do
+    {:noreply, assign(socket, :open, !socket.assigns.open)}
+  end
+
+  @impl true
+  def handle_event("close_dropdown", _params, socket) do
+    {:noreply, assign(socket, :open, false)}
+  end
+
+  @impl true
+  def handle_event("select_filter", %{"filter" => filter_str}, socket) do
+    filter = parse_filter(filter_str)
+
+    # Close dropdown and notify parent
+    socket = assign(socket, :open, false)
+    send(self(), {:payment_filter_changed, filter})
+
+    {:noreply, socket}
+  end
+
+  # Parse filter string to atom
+  defp parse_filter("paid"), do: :paid
+  defp parse_filter("not_paid"), do: :not_paid
+  defp parse_filter(_), do: nil
+
+  # Get display label for current filter
+  defp filter_label(nil), do: gettext("All")
+  defp filter_label(:paid), do: gettext("Paid")
+  defp filter_label(:not_paid), do: gettext("Not paid")
+end