WYGIWYH/app/templates/dca/fragments/strategy/details.html

{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
    <div>{{ strategy.name }}</div>
  </div>

  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-3 gx-3">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Total Invested" %}</h5>
          <div class="card-text">
            <c-amount.display
                :amount="strategy.total_invested"
                :prefix="strategy.payment_currency.prefix"
                :suffix="strategy.payment_currency.suffix"
                :decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Total Received" %}</h5>
          <div class="card-text">
            <c-amount.display
                :amount="strategy.total_received"
                :prefix="strategy.target_currency.prefix"
                :suffix="strategy.target_currency.suffix"
                :decimal_places="strategy.target_currency.decimal_places"></c-amount.display>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Average Entry Price" %}</h5>
          <div class="card-text">
            <c-amount.display
                :amount="strategy.average_entry_price"
                :prefix="strategy.payment_currency.prefix"
                :suffix="strategy.payment_currency.suffix"
                :decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Current Total Value" %}</h5>
          <div class="card-text">
            <c-amount.display
                :amount="strategy.current_total_value"
                :prefix="strategy.payment_currency.prefix"
                :suffix="strategy.payment_currency.suffix"
                :decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Total P/L" %}</h5>
          <div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
            <c-amount.display
                :amount="strategy.total_profit_loss"
                :prefix="strategy.payment_currency.prefix"
                :suffix="strategy.payment_currency.suffix"
                :decimal_places="strategy.payment_currency.decimal_places">
            </c-amount.display>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Total % P/L" %}</h5>
          <div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
            {{ strategy.total_profit_loss_percentage|floatformat:2 }}%
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Entries Table -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          {% spaceless %}
          <div class="card-title tw-text-xl">{% trans "Entries" %}<span>
                <a class="text-decoration-none p-1 category-action"
                   role="button"
                   data-bs-toggle="tooltip"
                   data-bs-title="{% translate "Add" %}"
                   hx-get="{% url 'dca_entry_add' strategy_id=strategy.id%}"
                   hx-target="#generic-offcanvas">
                      <i class="fa-solid fa-circle-plus fa-fw"></i>
                </a>
              </span>
          </div>
          {% endspaceless %}
          
          {% if entries %}
          <div class="table-responsive">
            <table class="table table-hover text-nowrap">
            <thead>
            <tr>
              <th></th>
              <th>{% trans "Date" %}</th>
              <th>{% trans "Amount Paid" %}</th>
              <th>{% trans "Amount Received" %}</th>
              <th>{% trans "Current Value" %}</th>
              <th>{% trans "P/L" %}</th>
            </tr>
            </thead>
            <tbody>
            {% for entry in entries %}
              <tr>
                <td class="col-auto">
                  <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
                    <a class="btn btn-secondary btn-sm"
                          role="button"
                          data-bs-toggle="tooltip"
                          data-bs-title="{% translate "Edit" %}"
                          hx-get="{% url 'dca_entry_edit' entry_id=entry.id strategy_id=entry.strategy.id %}"
                          hx-target="#generic-offcanvas"
                          hx-swap="innerHTML">
                      <i class="fa-solid fa-pencil fa-fw"></i></a>
                    <a class="btn btn-secondary btn-sm text-danger"
                            role="button"
                            data-bs-toggle="tooltip"
                            data-bs-title="{% translate "Delete" %}"
                            hx-delete="{% url 'dca_entry_delete' entry_id=entry.id strategy_id=entry.strategy.id %}"
                            hx-trigger='confirmed'
                            hx-swap="innerHTML"
                            data-bypass-on-ctrl="true"
                            data-title="{% translate "Are you sure?" %}"
                            data-text="{% translate "You won't be able to revert this!" %}"
                            data-confirm-text="{% translate "Yes, delete it!" %}"
                            _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
                  </div>
                </td>
                <td>{{ entry.date|date:"SHORT_DATE_FORMAT" }}</td>
                <td><c-amount.display
                        :amount="entry.amount_paid"
                        :prefix="entry.strategy.payment_currency.prefix"
                        :suffix="entry.strategy.payment_currency.suffix"
                        :decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
                <td><c-amount.display
                        :amount="entry.amount_received"
                        :prefix="entry.strategy.target_currency.prefix"
                        :suffix="entry.strategy.target_currency.suffix"
                        :decimal_places="entry.strategy.target_currency.decimal_places"></c-amount.display></td>
                <td><c-amount.display
                        :amount="entry.current_value"
                        :prefix="entry.strategy.payment_currency.prefix"
                        :suffix="entry.strategy.payment_currency.suffix"
                        :decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
                <td>
                  {% if entry.profit_loss_percentage > 0 %}
                    <span class="badge text-bg-success"><i class="fa-solid fa-up-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
                  {% elif entry.profit_loss_percentage < 0 %}
                    <span class="badge text-bg-danger"><i class="fa-solid fa-down-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          </div>
          {% else %}
            <c-msg.empty
                title="{% translate 'No entries for this DCA' %}"
                subtitle="{% translate "Try adding one" %}" :remove-padding="True"></c-msg.empty>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{% trans "Performance Over Time" %}</h5>
          <canvas id="performanceChart"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script defer>
    // Add Chart.js initialization for performance visualization
    var perfomancectx = document.getElementById('performanceChart').getContext('2d');
    new Chart(perfomancectx, {
        type: 'line',
        data: {
            labels: [{% for entry in entries_data %}'{{ entry.entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
            datasets: [{
                label: '{% trans "P/L %" %}',
                data: [{% for entry in entries_data %}{{ entry.profit_loss_percentage|floatformat:"-40u" }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });
</script>