197 lines
7.3 KiB
HTML
197 lines
7.3 KiB
HTML
{% extends "base_workspace.html" %}
|
|
|
|
{% from "components/alert.html" import Alert %}
|
|
{% from "components/icon.html" import Icon %}
|
|
|
|
{% block workspace_content %}
|
|
|
|
{{ Alert("Funding Information & Reports for Workspace " + workspace.name,
|
|
message="<p>On this screen you'll find detailed reporting information on this workspace. This message needs to be written better and be dismissable.</p>",
|
|
actions=[
|
|
{"label": "Learn More", "href": "/", "icon": "info"},
|
|
{"label": "Dismiss", "href": "/"}
|
|
] ) }}
|
|
|
|
<div class='funding-summary-row'>
|
|
|
|
<div class='funding-summary-row__col'>
|
|
<div class='panel spend-summary'>
|
|
<div class='row'>
|
|
<h2 class='spend-summary__heading col'>Workspace Total Spend</h2>
|
|
<dl class='spend-summary__budget'>
|
|
<div>
|
|
<dt>Budget </dt>
|
|
<dd>$100,000,000</dd>
|
|
</div>
|
|
|
|
<div>
|
|
<dt>Remaining</dt>
|
|
<dd>$60,000,000</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div>
|
|
<meter value='40000000' min='0' max='100000000' title='$40,000,000 Total spend to date'></meter>
|
|
|
|
<dl class='spend-summary__spent'>
|
|
<dt>Total spend to date</dt>
|
|
<dd>$40,000,00</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='funding-summary-row__col'>
|
|
<div class='panel to-summary'>
|
|
<div class='to-summary__row'>
|
|
|
|
<div class='to-summary__to'>
|
|
<h2 class='to-summary__heading'>Task Order</h2>
|
|
<dl class='to-summary__to-number'>
|
|
<dt class='usa-sr-only'>Task Order Number</dt>
|
|
<dd>1234567890</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class='to-summary__expiration'>
|
|
<dl>
|
|
<div>
|
|
<dt>Expires</dt>
|
|
<dd>November 1, 2019</dd>
|
|
</div>
|
|
|
|
<div>
|
|
<dt>Remaining</dt>
|
|
<dd>200 days</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<a href='/' class='icon-link'>
|
|
Manage Task Order
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class='to-summary__co'>
|
|
<dt>Contracting Officer</dt>
|
|
<dd>
|
|
Pietro Quirines
|
|
<a class='icon-link' href='mailto:email@email.com'>email@email.com</a>
|
|
</dd>
|
|
</dl>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class='spend-table responsive-table-wrapper'>
|
|
<div class='spend-table__header'>
|
|
<h2 class='spend-table__title'>Total spend per month</h2>
|
|
|
|
<select name='month' id='month' class='spend-table__month-select'>
|
|
<option value='06/2018'>June 2018</option>
|
|
</select>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
|
|
<th scope='col' class='table-cell--align-right previous-month'>April 2018</th>
|
|
<th scope='col' class='table-cell--align-right previous-month'>May 2018</th>
|
|
<th scope='col' class='table-cell--align-right current-month'>June 2018</th>
|
|
<td class='current-month'></td>
|
|
</thead>
|
|
|
|
<tbody class='spend-table__workspace'>
|
|
<tr>
|
|
<th scope='row'>Workspace Total</th>
|
|
<td class='table-cell--align-right previous-month'>$58,000</td>
|
|
<td class='table-cell--align-right previous-month'>$60,000</td>
|
|
<td class='table-cell--align-right current-month'>$62,000</td>
|
|
<td class='table-cell--expand current-month meter-cell'>
|
|
<meter value='62000' min='0' max='62000'></meter>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tbody is='toggler' class='spend-table__project'>
|
|
<template slot-scope='{ isVisible, toggle }'>
|
|
<tr>
|
|
<th scope='rowgroup'>
|
|
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
|
|
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
|
<template v-else>{{ Icon('caret_right') }}</template>
|
|
Code.mil
|
|
</button>
|
|
</th>
|
|
<td class='table-cell--align-right previous-month'>$29,000</td>
|
|
<td class='table-cell--align-right previous-month'>$30,000</td>
|
|
<td class='table-cell--align-right current-month'>$31,000</td>
|
|
<td class='table-cell--expand current-month meter-cell'>
|
|
<span class='spend-table__meter-value'>50%</span>
|
|
<meter value='31000' min='0' max='62000'></meter>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr v-show='isVisible'>
|
|
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
|
|
<td class='table-cell--align-right previous-month'>$14,000</td>
|
|
<td class='table-cell--align-right previous-month'>$15,000</td>
|
|
<td class='table-cell--align-right current-month'>$16,000</td>
|
|
<td class='table-cell--expand current-month'></td>
|
|
</tr>
|
|
|
|
<tr v-show='isVisible'>
|
|
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
|
|
<td class='table-cell--align-right previous-month'>$12,000</td>
|
|
<td class='table-cell--align-right previous-month'>$13,000</td>
|
|
<td class='table-cell--align-right current-month'>$14,000</td>
|
|
<td class='table-cell--expand current-month'></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
|
|
<tbody is='toggler' class='spend-table__project'>
|
|
<template slot-scope='{ isVisible, toggle }'>
|
|
<tr>
|
|
<th scope='rowgroup'>
|
|
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
|
|
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
|
|
<template v-else>{{ Icon('caret_right') }}</template>
|
|
Digital Dojo
|
|
</button>
|
|
</th>
|
|
<td class='table-cell--align-right previous-month'>$29,000</td>
|
|
<td class='table-cell--align-right previous-month'>$30,000</td>
|
|
<td class='table-cell--align-right current-month'>$31,000</td>
|
|
<td class='table-cell--expand current-month meter-cell'>
|
|
<span class='spend-table__meter-value'>50%</span>
|
|
<meter value='31000' min='0' max='62000'></meter>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr v-show='isVisible'>
|
|
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
|
|
<td class='table-cell--align-right previous-month'>$14,000</td>
|
|
<td class='table-cell--align-right previous-month'>$15,000</td>
|
|
<td class='table-cell--align-right current-month'>$16,000</td>
|
|
<td class='table-cell--expand current-month'></td>
|
|
</tr>
|
|
|
|
<tr v-show='isVisible'>
|
|
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
|
|
<td class='table-cell--align-right previous-month'>$12,000</td>
|
|
<td class='table-cell--align-right previous-month'>$13,000</td>
|
|
<td class='table-cell--align-right current-month'>$14,000</td>
|
|
<td class='table-cell--expand current-month'></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
{% endblock %}
|