Merge pull request #1220 from dod-ccpo/reporting-expired-funding-and-spend-table

Styling for expired funding and spend table sections of reporting

atst/domain/csp/reports.py

@@ -308,20 +308,37 @@ class MockReportingProvider(ReportingInterface):
         return {}
 
     def get_expired_task_orders(self, portfolio):
-        return [
+        def sorted_task_orders(to_list):
-            {
+            return sorted(to_list, key=lambda to: to["number"])
-                "id": task_order.id,
+
-                "number": task_order.number,
+        def sorted_clins(clin_list):
+            return sorted(clin_list, key=lambda clin: clin["number"])
+
+        def serialize_clin(clin):
+            return {
+                "number": clin.number,
+                "jedi_clin_type": clin.jedi_clin_type,
                 "period_of_performance": {
-                    "start_date": task_order.start_date,
+                    "start_date": clin.start_date,
-                    "end_date": task_order.end_date,
+                    "end_date": clin.end_date,
                 },
-                "total_obligated_funds": task_order.total_obligated_funds,
+                "total_value": clin.total_amount,
+                "total_obligated_funds": clin.obligated_amount,
                 "expended_funds": (
-                    task_order.total_obligated_funds
+                    clin.obligated_amount * Decimal(self.MOCK_PERCENT_EXPENDED_FUNDS)
-                    * Decimal(self.MOCK_PERCENT_EXPENDED_FUNDS)
                 ),
             }
-            for task_order in portfolio.task_orders
+
-            if task_order.is_expired
+        return sorted_task_orders(
-        ]
+            [
+                {
+                    "id": task_order.id,
+                    "number": task_order.number,
+                    "clins": sorted_clins(
+                        [serialize_clin(clin) for clin in task_order.clins]
+                    ),
+                }
+                for task_order in portfolio.task_orders
+                if task_order.is_expired
+            ]
+        )

styles/sections/_reports.scss

@@ -87,4 +87,32 @@
       font-size: $lead-font-size;
     }
   }
+
+  .reporting-expended-funding {
+    &__header {
+      margin: 0;
+    }
+    &__content {
+      padding: 0;
+      border-top: 1px solid $color-gray-lighter;
+    }
+  }
+
+  .reporting-spend-table {
+    &__env-row {
+      &-label {
+        margin-left: $gap * 5;
+      }
+      &--last {
+        & > td {
+          border-bottom: 1px solid black;
+        }
+        &:last-of-type {
+          & > td {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
 }

templates/components/accordion.html

@@ -1,23 +1,30 @@
-{% macro Accordion(title, id, heading_level="h2") %}
+{% macro Accordion(
-<accordion inline-template>
+  title, 
-  <div>
+  id, 
-    <{{heading_level}}>
+  wrapper_tag="div", 
-      <button
+  wrapper_classes="",
-        v-on:click="toggle($event)" 
+  heading_tag="h2",
-        class="usa-accordion-button"
+  heading_classes="",
-        aria-controls="{{ id }}"
+  content_tag="div",
-        v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
+  content_classes="") %}
-      >
+  <accordion v-cloak inline-template>
-        {{ title }}
+    <{{wrapper_tag}} class="{{ wrapper_classes }}">
-      </button>
+      <{{heading_tag}} class="{{ heading_classes }}">
-    </{{heading_level}}>
+        <button
-    <div 
+          v-on:click="toggle($event)" 
-      id="{{ id }}" 
+          class="usa-accordion-button"
-      class="usa-accordion-content" 
+          aria-controls="{{ id }}"
-      v-bind:aria-hidden="isVisible ? 'false' : 'true'"
+          v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
-    >
+        >
-      {{ caller() }}
+          {{ title }}
-    </div>
+        </button>
-  </div>
+      </{{heading_tag}}>
-</accordion>
+      <{{content_tag}}
+        id="{{ id }}" 
+        class="usa-accordion-content {{ content_classes }}"  
+        v-bind:aria-hidden="isVisible ? 'false' : 'true'">
+        {{ caller() }}
+      </{{content_tag}}>
+    </{{wrapper_tag}}>
+  </accordion>
 {% endmacro %}

templates/portfolios/reports/application_and_env_spending.html

@@ -59,9 +59,13 @@
                   <span v-html='formatDollars(application["total_spend_to_date"])'></span>
                 </td>
               </tr>
-              <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible'>
+              <tr 
+                v-for='(environment, envName, index) in environments[name]' 
+                v-show='application.isVisible'
+                v-bind:class="[ index == Object.keys(environments[name]).length -1 ? 'reporting-spend-table__env-row--last' : '']"
+              >
                 <td>
-                  <span v-html='envName'></span>
+                  <span class="reporting-spend-table__env-row-label" v-html='envName'></span>
                 </td>
                 <td class="table-cell--align-right">
                   <span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>

templates/portfolios/reports/expired_task_orders.html

@@ -1,34 +1,51 @@
 {% from "components/accordion.html" import Accordion %}
+{% from "components/icon.html" import Icon %}
 
 
 <section>
   <div class="usa-accordion">      
-    {% call Accordion("Expired Task Orders", "expired_task_orders", "h3") %}
+    {% call Accordion(
-      {% for task_order in expired_task_orders %}
+      "Expired funding", 
-        <a href="{{ url_for("task_orders.review_task_order", task_order_id=task_order["id"]) }}">
+      "expired_funding", 
-          Task Order {{ task_order["number"] }}
+      heading_classes="reporting-expended-funding__header",
-        </a>
+      content_tag="table",
-        <div>
+      content_classes="atat-table reporting-expended-funding__content") %}
-          <p>Period of Performance</p>
+        <thead>
-          <p>
+          <tr>
-            {{ task_order["period_of_performance"].start_date | formattedDate(formatter="%B %d, %Y") }}
+            <th>TO CLIN</th>
-            - 
+            <th>PoP</th>
-            {{ task_order["period_of_performance"].end_date | formattedDate(formatter="%B %d, %Y") }}
+            <th>CLIN Value</th>
-          </p>
+            <th>Amount Obligated</th>
-        </div>
+            <th>Amount Unspent</th>
-        <div>
+          </tr>
-          <p>Total Obligated</p>
+        </thead>
-          <p>{{ task_order["total_obligated_funds"] | dollars }}</p>
+        <tbody>
-        </div>
+        {% for task_order in expired_task_orders %}
-        <div>
+          <tr>
-          <p>Total Expended</p>
+            <td colspan="5">
-          <p>{{ task_order["expended_funds"] | dollars }}</p>
+              <span class="h4 reporting-expended-funding__header">Task Order</span> <a href="{{ url_for("task_orders.review_task_order", task_order_id=task_order.id) }}">
-        </div>
+                {{ task_order.number }} {{ Icon("caret_right", classes="icon--tiny icon--blue" ) }}
-        <div>
+              </a>
-          <p>Total Unused</p>
+            </td>
-          <p>{{ (task_order["total_obligated_funds"] - task_order["expended_funds"]) | dollars }}</p>
+          </tr>
-        </div>
+          {% for clin in task_order.clins %}
-      {% endfor %}
+            <tr>
+              <td>
+                <div class="h4 reporting-expended-funding__header">{{ clin.number }}</div>
+                <div>{{ ("{}".format(clin.jedi_clin_type) | translate)[15:] }}</div>
+              </td>
+              <td>
+                {{ clin.period_of_performance.start_date | formattedDate(formatter="%b %d, %Y") }}
+                - 
+                {{ clin.period_of_performance.end_date | formattedDate(formatter="%b %d, %Y") }}
+              </td>
+              <td>{{ clin.total_value | dollars }}</td>
+              <td>{{ clin.total_obligated_funds | dollars }}</td>
+              <td>{{ (clin.total_obligated_funds - clin.expended_funds) | dollars }}</td>
+            <tr>
+          {% endfor %}
+        {% endfor %}  
+        </tbody>
     {% endcall %}
   </div>
 </section>