Add portfolio funding header

atst/routes/portfolios/task_orders.py

@@ -1,4 +1,5 @@
 from collections import defaultdict
+from operator import itemgetter
 
 from flask import g, render_template, url_for
 
@@ -34,12 +35,20 @@ def portfolio_task_orders(portfolio_id):
         )
         task_orders_by_status[task_order.status].append(serialized_task_order)
 
+    active_task_orders = task_orders_by_status.get(TaskOrderStatus.ACTIVE, [])
+    funding_end_date = (
+        sorted(active_task_orders, key=itemgetter("end_date"))[-1]["end_date"]
+        if active_task_orders
+        else None
+    )
+
     return render_template(
         "portfolios/task_orders/index.html",
         portfolio=portfolio,
         pending_task_orders=task_orders_by_status.get(TaskOrderStatus.PENDING, []),
-        active_task_orders=task_orders_by_status.get(TaskOrderStatus.ACTIVE, []),
+        active_task_orders=active_task_orders,
         expired_task_orders=task_orders_by_status.get(TaskOrderStatus.EXPIRED, []),
+        funding_end_date=funding_end_date,
     )
 
 

styles/components/_portfolio_layout.scss

@@ -31,6 +31,27 @@
 }
 
 .portfolio-funding {
+  .portfolio-funding__header {
+    padding: 0;
+    margin: 0 $gap;
+
+    align-items: center;
+
+    .portfolio-funding__header--funded-through {
+      padding: 2 * $gap;
+      flex-grow: 1;
+      text-align: left;
+      font-weight: bold;
+    }
+
+    .funded {
+      color: $color-green;
+      .icon {
+        @include icon-color($color-green);
+      }
+    }
+  }
+
   .pending-task-order {
     background-color: $color-gold-lightest;
 

templates/portfolios/task_orders/index.html

@@ -73,6 +73,24 @@
 {% endmacro %}
 
 <div class="portfolio-funding">
+
+  <div class='panel'>
+    <div class='panel__content portfolio-funding__header row'>
+      <h3>Portfolio Funding</h3>
+      <div class='portfolio-funding__header--funded-through {{ "funded" if funding_end_date is not none }}'>
+        {% if funding_end_date %}
+          {{ Icon('ok') }}
+          Funded through
+          <local-datetime
+            timestamp="{{ funding_end_date }}"
+            format="M/D/YYYY">
+            </local-datetime>
+          {% endif %}
+      </div>
+      <a href="{{ url_for("task_orders.new", screen=1, portfolio_id=portfolio.id) }}" class="usa-button">Start a New Task Order</a>
+    </div>
+  </div>
+
   {% for task_order in pending_task_orders %}
     <div class='panel'>
       <div class='panel__content pending-task-order row'>