Add funding status alerts

atst/models/task_order.py

@@ -1,4 +1,5 @@
 from enum import Enum
+from datetime import date
 
 import pendulum
 from sqlalchemy import Column, Numeric, String, ForeignKey, Date, Integer
@@ -111,6 +112,11 @@ class TaskOrder(Base, mixins.TimestampsMixin):
     def display_status(self):
         return self.status.value
 
+    @property
+    def days_to_expiration(self):
+        if self.end_date:
+            return (self.end_date - date.today()).days
+
     @property
     def budget(self):
         return sum(

atst/routes/portfolios/task_orders.py

@@ -22,6 +22,7 @@ def portfolio_funding(portfolio_id):
             "start_date",
             "end_date",
             "display_status",
+            "days_to_expiration",
             "balance",
         ]
     }

js/components/tables/task_order_list.js

@@ -46,8 +46,8 @@ export default {
         displayName: 'Period of Performance',
         attr: 'start_date',
         sortFunc: numericSort,
-        width: "50%",
-        class: "period-of-performance"
+        width: '50%',
+        class: 'period-of-performance',
       },
       {
         displayName: 'Initial Value',

styles/components/_portfolio_layout.scss

@@ -126,5 +126,27 @@
     .label--expired {
       background-color: $color-gray-light;
     }
+
+    .to-expiring-soon {
+      font-weight: $font-bold;
+      font-size: 1.5rem;
+      margin-left: $gap;
+
+      &.funded {
+        color: $color-blue;
+
+        .icon {
+          @include icon-color($color-blue);
+        }
+      }
+
+      &.unfunded {
+        color: $color-red;
+
+        .icon {
+          @include icon-color($color-red);
+        }
+      }
+    }
   }
 }

templates/portfolios/task_orders/index.html

@@ -44,15 +44,26 @@
             </td>
             <td class='table-cell--grow'>
               <span>
-              <local-datetime
-                v-bind:timestamp="taskOrder.start_date"
-                format="M/D/YYYY">
-                </local-datetime>
-                -
-              <local-datetime
-                v-bind:timestamp="taskOrder.end_date"
-                format="M/D/YYYY">
+                <local-datetime
+                  v-bind:timestamp="taskOrder.start_date"
+                  format="M/D/YYYY">
+                  </local-datetime>
+                  -
+                <local-datetime
+                  v-bind:timestamp="taskOrder.end_date"
+                  format="M/D/YYYY">
                 </local-datetime>
+                <span
+                  v-if="taskOrder.display_status ==='Active' && (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30) && taskOrders.length > 1"
+                  class="to-expiring-soon funded">
+                    {{ Icon('ok') }} Period ending in !{ taskOrder.days_to_expiration } days, but new period funded
+                </span>
+                <span
+                  v-if="taskOrder.display_status ==='Active' && (taskOrder.days_to_expiration > 0 && taskOrder.days_to_expiration <= 30) && taskOrders.length === 1"
+                  class="to-expiring-soon unfunded">
+                  {{ Icon('alert') }} Period ends in !{ taskOrder.days_to_expiration } days, submit a new task order
+                </span>
+              </span>
             </td>
             <td class="table-cell--align-right">
               <span v-html='formatDollars(taskOrder.budget)'></span>