community_foundation/app/views/scenarios/_summary.html.erb at d9f43cc580058ade56531ec1934e0654ffe9802a · rubyforgood/community_foundation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<%# locals: (scenario:) %>
<% ongoing_total  = scenario.ongoing_percentage_total %>
<% ongoing_amount = scenario.ongoing_giving_amount %>
<% one_time_amount = scenario.one_time_giving_amount %>
<% total_amount   = scenario.total_giving_amount %>
<div class="rounded-2xl border border-line bg-surface p-6 shadow-sm">
  <h2 class="font-serif font-medium text-xl text-ink">Allocation summary</h2>
  <% if total_amount.present? && total_amount.positive? %>
    <p class="mt-2 text-sm text-ink-soft">
      Ongoing <span class="font-medium text-brand"><%= number_to_currency(ongoing_amount) %></span>
      + One-time <span class="font-medium text-ink"><%= number_to_currency(one_time_amount) %></span>
      = Total <span class="font-medium text-ink"><%= number_to_currency(total_amount) %></span>
    </p>
  <% else %>
    <p class="mt-2 text-sm text-ink-soft">Set your total above to see a full breakdown.</p>
  <% end %>

  <div class="mt-5">
    <h3 class="text-[11px] font-semibold uppercase tracking-wide text-ink-faint">Ongoing giving</h3>
    <p class="mt-1 font-serif text-4xl font-medium text-ink"><%= number_to_currency(ongoing_amount) %></p>
    <% if scenario.ongoing_allocations.any? %>
      <p class="mt-1 text-sm text-ink-soft">
        <%= ongoing_total %>% allocated across <%= pluralize(scenario.ongoing_allocations.count, "cause") %>
      </p>

      <% remaining = [100 - ongoing_total, 0].max %>

      <div data-controller="tabs"
           data-tabs-active-tab-class="bg-accent text-white"
           data-tabs-inactive-tab-class="text-ink-soft hover:text-ink">
        <div class="mt-4 inline-flex items-center gap-1 rounded-full border border-line bg-surface-soft p-1">
          <button type="button" data-action="tabs#switch" data-tabs-type-param="bar"
                  data-tabs-target="tab" data-type="bar" data-active="true"
                  class="flex items-center gap-1.5 rounded-full bg-accent px-3 py-1 text-xs font-medium text-white transition">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 13.5h3.5v6.75H4v-6.75Zm6.25-4.5h3.5v11.25h-3.5V9Zm6.25-4.5H20v15.75h-3.5V4.5Z" />
            </svg>
            Bar
          </button>
          <button type="button" data-action="tabs#switch" data-tabs-type-param="pie"
                  data-tabs-target="tab" data-type="pie"
                  class="flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-ink-soft transition hover:text-ink">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z" />
            </svg>
            Pie
          </button>
        </div>

        <div data-tabs-target="panel" data-type="bar" class="mt-4 flex h-3 gap-1 overflow-hidden rounded-full">
          <% scenario.ongoing_allocations.each_with_index do |allocation, index| %>
            <div style="width: <%= allocation.percentage %>%; background-color: <%= allocation_chart_color(index) %>"></div>
          <% end %>
          <% if remaining.positive? %>
            <div class="bg-line-soft" style="width: <%= remaining %>%"></div>
          <% end %>
        </div>

        <div data-tabs-target="panel" data-type="pie" class="mt-4 hidden">
          <div class="mx-auto h-40 w-40 rounded-full" style="background: <%= allocation_pie_gradient(scenario.ongoing_allocations, remaining, ongoing_total) %>"></div>
        </div>
      </div>

      <ul class="mt-4 space-y-3">
        <% scenario.ongoing_allocations.each_with_index do |allocation, index| %>
          <li>
            <div class="flex items-baseline justify-between">
              <span class="flex items-center gap-2 text-ink">
                <span class="h-2.5 w-2.5 shrink-0 rounded-full" style="background-color: <%= allocation_chart_color(index) %>"></span>
                <%= allocation.display_label %>
              </span>
              <span class="flex items-baseline gap-3">
                <span class="font-medium text-ink"><%= allocation.percentage %>%</span>
                <span class="text-ink-soft"><%= number_to_currency(allocation.dollar_amount) %></span>
              </span>
            </div>
            <p class="ml-[18px] mt-0.5 text-xs text-ink-faint">
              &infin; Est. <%= number_to_currency(allocation.perpetuity_annual_amount) %> /yr in perpetuity
            </p>
          </li>
        <% end %>
      </ul>
    <% else %>
      <p class="mt-3 text-ink-faint">No ongoing allocations yet.</p>
    <% end %>
  </div>

  <% if scenario.one_time_allocations.any? %>
    <div class="mt-6 border-t border-line pt-6">
      <div class="flex items-center justify-between">
        <h3 class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
          One time giving
          <span class="rounded border border-line px-1.5 py-0.5 text-[10px] font-medium tracking-normal text-ink-soft">ADD-ON</span>
        </h3>
<span class="font-medium text-ink"><%= number_to_currency(one_time_amount) %></span>
      </div>
      <ul class="mt-3 space-y-2">
        <% scenario.one_time_allocations.each do |allocation| %>
          <li class="flex items-baseline justify-between">
            <span class="flex items-center gap-2 text-ink">
              <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-danger"></span>
              <%= allocation.display_label %>
            </span>
            <span class="flex items-baseline gap-3">
              <span class="font-medium text-ink-soft"><%= allocation.share_percentage %>%</span>
              <span class="text-ink-soft"><%= number_to_currency(allocation.amount) %></span>
            </span>
          </li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <% if total_amount.present? && total_amount.positive? %>
    <div class="mt-6 rounded-xl border border-line bg-surface-soft p-4 text-sm text-ink-soft">
      Ongoing <span class="font-medium text-brand"><%= number_to_currency(ongoing_amount) %></span>
      + One-time <span class="font-medium text-ink"><%= number_to_currency(one_time_amount) %></span>
      = Total <span class="font-medium text-ink"><%= number_to_currency(total_amount) %></span>
    </div>
  <% end %>
</div>