feat: Add contribution management mock-up pages
Add non-functional preview pages for Contribution Types, Settings, and Member Contribution Periods with German translations
This commit is contained in:
parent
8391122426
commit
cd1af5aff5
9 changed files with 2187 additions and 21 deletions
345
lib/mv_web/live/contribution_period_live/show.ex
Normal file
345
lib/mv_web/live/contribution_period_live/show.ex
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
defmodule MvWeb.ContributionPeriodLive.Show do
|
||||
@moduledoc """
|
||||
Mock-up LiveView for Member Contribution Periods (Admin/Treasurer View).
|
||||
|
||||
This is a preview-only page that displays the planned UI for viewing
|
||||
and managing contribution periods for a specific member.
|
||||
It shows static mock data and is not functional.
|
||||
|
||||
## Planned Features (Future Implementation)
|
||||
- Display all contribution periods for a member
|
||||
- Show period dates, interval, amount, and status
|
||||
- Quick status change (paid/unpaid/suspended)
|
||||
- Bulk marking of multiple periods
|
||||
- Notes per period
|
||||
|
||||
## Note
|
||||
This page is intentionally non-functional and serves as a UI mockup
|
||||
for the upcoming Membership Contributions feature.
|
||||
"""
|
||||
use MvWeb, :live_view
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
{:ok,
|
||||
socket
|
||||
|> assign(:page_title, gettext("Member Contributions"))
|
||||
|> assign(:member, mock_member())
|
||||
|> assign(:periods, mock_periods())
|
||||
|> assign(:selected_periods, MapSet.new())}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<Layouts.app flash={@flash} current_user={@current_user}>
|
||||
<.mockup_warning />
|
||||
|
||||
<.header>
|
||||
{gettext("Contributions for %{name}", name: "#{@member.first_name} #{@member.last_name}")}
|
||||
<:subtitle>
|
||||
{gettext("Contribution type")}:
|
||||
<span class="font-semibold">{@member.contribution_type}</span>
|
||||
· {gettext("Member since")}: <span class="font-mono">{@member.joined_at}</span>
|
||||
</:subtitle>
|
||||
<:actions>
|
||||
<.link navigate={~p"/contribution_settings"} class="btn btn-ghost btn-sm">
|
||||
<.icon name="hero-arrow-left" class="size-4" />
|
||||
{gettext("Back to Settings")}
|
||||
</.link>
|
||||
</:actions>
|
||||
</.header>
|
||||
|
||||
<%!-- Member Info Card --%>
|
||||
<div class="mb-6 shadow card bg-base-100">
|
||||
<div class="card-body">
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<div>
|
||||
<span class="text-sm text-base-content/60">{gettext("Email")}</span>
|
||||
<p class="font-medium">{@member.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-base-content/60">{gettext("Contribution Start")}</span>
|
||||
<p class="font-mono">{@member.contribution_start}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-base-content/60">{gettext("Total Contributions")}</span>
|
||||
<p class="font-semibold">{length(@periods)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-base-content/60">{gettext("Open Contributions")}</span>
|
||||
<p class="font-semibold text-error">
|
||||
{Enum.count(@periods, &(&1.status == :unpaid))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%!-- Contribution Type Change --%>
|
||||
<div class="mb-6 card bg-base-200">
|
||||
<div class="py-4 card-body">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<span class="font-semibold">{gettext("Change Contribution Type")}:</span>
|
||||
<select class="w-64 select select-bordered select-sm" disabled>
|
||||
<option selected>{@member.contribution_type} (60,00 €, {gettext("Yearly")})</option>
|
||||
<option>{gettext("Reduced")} (30,00 €, {gettext("Yearly")})</option>
|
||||
<option>{gettext("Honorary")} (0,00 €, {gettext("Yearly")})</option>
|
||||
</select>
|
||||
<span
|
||||
class="text-sm text-base-content/60 cursor-help tooltip tooltip-bottom"
|
||||
data-tip={
|
||||
gettext(
|
||||
"Members can only switch between contribution types with the same payment interval (e.g., yearly to yearly). This prevents complex period overlaps."
|
||||
)
|
||||
}
|
||||
>
|
||||
<.icon name="hero-question-mark-circle" class="inline size-4" />
|
||||
{gettext("Why are not all contribution types shown?")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%!-- Bulk Actions --%>
|
||||
<div class="flex flex-wrap items-center gap-4 mb-4">
|
||||
<span class="text-sm text-base-content/60">
|
||||
{ngettext(
|
||||
"%{count} period selected",
|
||||
"%{count} periods selected",
|
||||
MapSet.size(@selected_periods),
|
||||
count: MapSet.size(@selected_periods)
|
||||
)}
|
||||
</span>
|
||||
<button class="btn btn-sm btn-success" disabled>
|
||||
<.icon name="hero-check" class="size-4" />
|
||||
{gettext("Mark as Paid")}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-ghost" disabled>
|
||||
<.icon name="hero-minus-circle" class="size-4" />
|
||||
{gettext("Mark as Suspended")}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-ghost" disabled>
|
||||
<.icon name="hero-x-circle" class="size-4" />
|
||||
{gettext("Mark as Unpaid")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<%!-- Periods Table --%>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" class="checkbox checkbox-sm" disabled />
|
||||
</th>
|
||||
<th>{gettext("Time Period")}</th>
|
||||
<th>{gettext("Interval")}</th>
|
||||
<th>{gettext("Amount")}</th>
|
||||
<th>{gettext("Status")}</th>
|
||||
<th>{gettext("Notes")}</th>
|
||||
<th>{gettext("Actions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr :for={period <- @periods} class={period_row_class(period.status)}>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm"
|
||||
checked={MapSet.member?(@selected_periods, period.id)}
|
||||
disabled
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div class="font-mono">
|
||||
{period.period_start} – {period.period_end}
|
||||
</div>
|
||||
<div :if={period.is_current} class="mt-1 badge badge-info badge-sm">
|
||||
{gettext("Current")}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-outline badge-sm">{format_interval(period.interval)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-mono">{format_currency(period.amount)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<.status_badge status={period.status} />
|
||||
</td>
|
||||
<td>
|
||||
<span :if={period.notes} class="text-sm italic text-base-content/60">
|
||||
{period.notes}
|
||||
</span>
|
||||
<span :if={!period.notes} class="text-base-content/30">—</span>
|
||||
</td>
|
||||
<td class="w-0 font-semibold whitespace-nowrap">
|
||||
<div class="flex gap-4">
|
||||
<.link
|
||||
href="#"
|
||||
class={[
|
||||
"cursor-not-allowed",
|
||||
if(period.status == :paid, do: "invisible", else: "opacity-50")
|
||||
]}
|
||||
>
|
||||
{gettext("Paid")}
|
||||
</.link>
|
||||
<.link
|
||||
href="#"
|
||||
class={[
|
||||
"cursor-not-allowed",
|
||||
if(period.status == :suspended, do: "invisible", else: "opacity-50")
|
||||
]}
|
||||
>
|
||||
{gettext("Suspend")}
|
||||
</.link>
|
||||
<.link
|
||||
href="#"
|
||||
class={[
|
||||
"cursor-not-allowed",
|
||||
if(period.status != :paid, do: "invisible", else: "opacity-50")
|
||||
]}
|
||||
>
|
||||
{gettext("Reopen")}
|
||||
</.link>
|
||||
<.link href="#" class="opacity-50 cursor-not-allowed">
|
||||
{gettext("Note")}
|
||||
</.link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Layouts.app>
|
||||
"""
|
||||
end
|
||||
|
||||
# Mock-up warning banner component - subtle orange style
|
||||
defp mockup_warning(assigns) do
|
||||
~H"""
|
||||
<div class="flex items-center gap-3 px-4 py-3 mb-6 border rounded-lg border-warning text-warning bg-base-100">
|
||||
<.icon name="hero-exclamation-triangle" class="size-5 shrink-0" />
|
||||
<div>
|
||||
<span class="font-semibold">{gettext("Preview Mockup")}</span>
|
||||
<span class="ml-2 text-sm text-base-content/70">
|
||||
– {gettext("This page is not functional and only displays the planned features.")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
# Status badge component
|
||||
attr :status, :atom, required: true
|
||||
|
||||
defp status_badge(%{status: :paid} = assigns) do
|
||||
~H"""
|
||||
<span class="gap-1 badge badge-success">
|
||||
<.icon name="hero-check-circle-mini" class="size-3" />
|
||||
{gettext("Paid")}
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp status_badge(%{status: :unpaid} = assigns) do
|
||||
~H"""
|
||||
<span class="gap-1 badge badge-error">
|
||||
<.icon name="hero-x-circle-mini" class="size-3" />
|
||||
{gettext("Unpaid")}
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp status_badge(%{status: :suspended} = assigns) do
|
||||
~H"""
|
||||
<span class="gap-1 badge badge-neutral">
|
||||
<.icon name="hero-pause-circle-mini" class="size-3" />
|
||||
{gettext("Suspended")}
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp period_row_class(:unpaid), do: "bg-error/5"
|
||||
defp period_row_class(:suspended), do: "bg-base-200/50"
|
||||
defp period_row_class(_), do: ""
|
||||
|
||||
# Mock member data
|
||||
defp mock_member do
|
||||
%{
|
||||
id: "123",
|
||||
first_name: "Maria",
|
||||
last_name: "Weber",
|
||||
email: "maria.weber@example.de",
|
||||
contribution_type: gettext("Regular"),
|
||||
joined_at: "15.03.2021",
|
||||
contribution_start: "01.01.2021"
|
||||
}
|
||||
end
|
||||
|
||||
# Mock periods data
|
||||
defp mock_periods do
|
||||
[
|
||||
%{
|
||||
id: "p1",
|
||||
period_start: "01.01.2025",
|
||||
period_end: "31.12.2025",
|
||||
interval: :yearly,
|
||||
amount: Decimal.new("60.00"),
|
||||
status: :unpaid,
|
||||
notes: nil,
|
||||
is_current: true
|
||||
},
|
||||
%{
|
||||
id: "p2",
|
||||
period_start: "01.01.2024",
|
||||
period_end: "31.12.2024",
|
||||
interval: :yearly,
|
||||
amount: Decimal.new("60.00"),
|
||||
status: :paid,
|
||||
notes: gettext("Paid via bank transfer"),
|
||||
is_current: false
|
||||
},
|
||||
%{
|
||||
id: "p3",
|
||||
period_start: "01.01.2023",
|
||||
period_end: "31.12.2023",
|
||||
interval: :yearly,
|
||||
amount: Decimal.new("50.00"),
|
||||
status: :paid,
|
||||
notes: nil,
|
||||
is_current: false
|
||||
},
|
||||
%{
|
||||
id: "p4",
|
||||
period_start: "01.01.2022",
|
||||
period_end: "31.12.2022",
|
||||
interval: :yearly,
|
||||
amount: Decimal.new("50.00"),
|
||||
status: :paid,
|
||||
notes: nil,
|
||||
is_current: false
|
||||
},
|
||||
%{
|
||||
id: "p5",
|
||||
period_start: "01.01.2021",
|
||||
period_end: "31.12.2021",
|
||||
interval: :yearly,
|
||||
amount: Decimal.new("50.00"),
|
||||
status: :suspended,
|
||||
notes: gettext("Joining year - reduced to 0"),
|
||||
is_current: false
|
||||
}
|
||||
]
|
||||
end
|
||||
|
||||
defp format_currency(%Decimal{} = amount) do
|
||||
"#{Decimal.to_string(amount)} €"
|
||||
end
|
||||
|
||||
defp format_interval(:monthly), do: gettext("Monthly")
|
||||
defp format_interval(:quarterly), do: gettext("Quarterly")
|
||||
defp format_interval(:half_yearly), do: gettext("Half-yearly")
|
||||
defp format_interval(:yearly), do: gettext("Yearly")
|
||||
end
|
||||
Loading…
Add table
Add a link
Reference in a new issue