summaryrefslogtreecommitdiffstats
path: root/engagements/templates
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--engagements/templates/engagements/engagement_create.html29
-rw-r--r--engagements/templates/engagements/engagement_detail.html78
-rw-r--r--engagements/templates/engagements/engagement_effort_create.html20
-rw-r--r--engagements/templates/engagements/engagement_form.html32
-rw-r--r--engagements/templates/engagements/engagement_plan_for_site.html35
-rw-r--r--engagements/templates/engagements/ep_org.html427
-rw-r--r--engagements/templates/engagements/index.html30
-rw-r--r--engagements/templates/engagements/organisations.html50
-rw-r--r--engagements/templates/engagements/snippets/effort_summary_panel.html41
9 files changed, 742 insertions, 0 deletions
diff --git a/engagements/templates/engagements/engagement_create.html b/engagements/templates/engagements/engagement_create.html
new file mode 100644
index 0000000..1e72ca0
--- /dev/null
+++ b/engagements/templates/engagements/engagement_create.html
@@ -0,0 +1,29 @@
+{% extends "core/base.html" %}
+
+{% block title %}Create new engagement{% endblock title %}
+
+{% block content %}
+
+<div class="w3-container w3-cell-row w3-margin-bottom">
+ <h2>{{ title }}</h2>
+ <div class="w3-panel w3-light-blue w3-round w3-leftbar w3-border-blue w3-display-container">
+
+ <span onclick="this.parentElement.style.display='none'"
+ class="w3-button w3-display-topright">&times;</span>
+ <h4>Step 1</h4>
+ <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+ <h4>Step 2</h4>
+ <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+ </div>
+
+ <hr>
+ <div class="w3-container w3-cell-middle">
+ <h4>Enter main details:</h4>
+ <form method="post">{% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" class="w3-btn w3-green" value="Save">
+ </form>
+ </div>
+</div>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/engagement_detail.html b/engagements/templates/engagements/engagement_detail.html
new file mode 100644
index 0000000..85ef220
--- /dev/null
+++ b/engagements/templates/engagements/engagement_detail.html
@@ -0,0 +1,78 @@
+{% extends "core/base.html" %}
+{% load table_extras %}
+
+{% block title %}{{ engagement }}{% endblock title %}
+
+{% block content %}
+
+<div class="w3-container">
+ <div class="w3-container w3-center">
+ <h2>{{ engagement.friendly_type }} at {{ engagement.external_party }}</h2>
+ </div>
+ <div class="w3-row">
+ <div class="w3-container">
+ <div>
+ <a href="{% url 'engagements:edit' engagement.pk %}">Edit Engagement</a>
+ </div>
+ <section class="w3-container w3-blue">
+ <h3>Details</h3>
+ </section>
+ <table class="w3-table w3-border w3-light-gray w3-bordered">
+ <tr>
+ <td><strong>Date</strong></td>
+ <td>{{ engagement.proposed_start_date|date:'l' }} - {{ engagement.proposed_start_date|date:'j M Y' }}</td>
+ </tr>
+ <tr>
+ <td><strong>Site/Operation:</strong></td>
+ <td>{{ engagement.external_party }} </td>
+ </tr>
+ <tr>
+ <td><strong>Subject of Activity</strong></td>
+ <td>
+ <p>Summmary text</p>
+ <ul class="w3-ul">
+ {% for t in dscs %}
+ <li><a href='#'>{{ t }}</a></li>
+ {% endfor %}
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><strong>Inspectors:</strong></td>
+ <td>{{ engagement.officers.all|commalist }}</td>
+ </tr>
+ <tr>
+ <td><strong>Planned Effort:</strong></td>
+ <td>{{ effort_planned|floatformat }} hrs</td>
+ </tr>
+ <tr>
+ <td><strong>Actual Effort:</strong></td>
+ <td>{{ effort_actual|floatformat }} hrs</td>
+ </tr>
+ <tr>
+ <td><strong>Total Effort:</strong></td>
+ <td>{{ effort_total|floatformat }} hrs</td>
+ </tr>
+ </table>
+ <hr>
+ </div>
+
+ <div class="w3-container w3-light-gray">
+ <h3>Effort for this engagement</h3>
+ Add:
+ <a href="{% url 'engagements:effort_create' engagement.pk "TRAVEL" %}">Travel</a> |
+ <a href="{% url 'engagements:effort_create' engagement.pk "PLANNING" %}">Planning</a> |
+ <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}">Regulation</a> |
+ <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}">Reporting</a>
+
+ {% if effort %}
+ {% for e in effort.all %}
+ <div id="planned_swap_{{ e.id }}">
+ {% include "engagements/snippets/effort_summary_panel.html" with e=e %}
+ </div>
+ {% endfor %}
+ {% endif %}
+ </div>
+ </div>
+
+ {% endblock content %}
diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html
new file mode 100644
index 0000000..65e2e21
--- /dev/null
+++ b/engagements/templates/engagements/engagement_effort_create.html
@@ -0,0 +1,20 @@
+{% extends "core/base.html" %}
+
+{% load crispy_forms_tags %}
+
+{% block title %}Add {{ etype }} effort to Engagement{% endblock title %}
+
+{% block content %}
+
+ <div class="w3-container w3-cell-row w3-margin-bottom">
+ <h2>Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event at {{ engagement.external_party }} on {{ engagement.proposed_start_date }}</h2>
+
+ <div class="w3-container w3-cell-middle">
+ <h4>Enter details:</h4>
+ <form method="post">{% csrf_token %}
+ {% crispy form form.helper %}
+ </form>
+ </div>
+ </div>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html
new file mode 100644
index 0000000..e05c639
--- /dev/null
+++ b/engagements/templates/engagements/engagement_form.html
@@ -0,0 +1,32 @@
+{% extends "core/base.html" %}
+
+{% load static %}
+
+{% block title %}Create new engagement{% endblock title %}
+{% block extra_head_tags %}
+<link rel="stylesheet" href="{% static 'css/styles.css' %}"/>
+{% endblock extra_head_tags %}
+
+{% block content %}
+
+<div class="format-container">
+ <div class="form-thing">
+ <h2>{{ title }}</h2>
+ <p>TAKE THIS OUT</p>
+ <span onclick="this.parentElement.style.display='none'"
+ class="w3-button w3-display-topright">&times;</span>
+ <h4>Step 1</h4>
+ <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+ <h4>Step 2</h4>
+ <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+ </div>
+ <div class="form-thing">
+ <h4>Enter main details:</h4>
+ <form method="post">{% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" class="w3-btn w3-green" value="Save">
+ </form>
+ </div>
+</div>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/engagement_plan_for_site.html b/engagements/templates/engagements/engagement_plan_for_site.html
new file mode 100644
index 0000000..55ab54b
--- /dev/null
+++ b/engagements/templates/engagements/engagement_plan_for_site.html
@@ -0,0 +1,35 @@
+{% extends "core/base.html" %}
+
+{% block title %}Create new engagement{% endblock title %}
+
+{% block content %}
+
+<div class="w3-container w3-cell-row w3-margin-bottom">
+ <h2>{{ title }}</h2>
+ <div class="w3-panel w3-light-blue w3-round w3-leftbar w3-border-blue w3-display-container">
+
+ <span onclick="this.parentElement.style.display='none'"
+ class="w3-button w3-display-topright">&times;</span>
+ <h4>Step 1</h4>
+ <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+ <h4>Step 2</h4>
+ <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+ </div>
+
+ <hr>
+ <div class="w3-cell-row">
+ <div class="w3-container w3-cell">
+ <h4>Enter main details:</h4>
+ <form method="post">{% csrf_token %}
+ {{ form.as_p }}
+ <input type="submit" class="w3-btn w3-green" value="Save">
+ </form>
+ </div>
+ <div class="w3-container w3-cell">
+ <h4>Current Engagement Plan for X</h4>
+ </div>
+
+ </div>
+</div>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/ep_org.html b/engagements/templates/engagements/ep_org.html
new file mode 100644
index 0000000..202100a
--- /dev/null
+++ b/engagements/templates/engagements/ep_org.html
@@ -0,0 +1,427 @@
+{% extends "core/base.html" %}
+
+{% block title %}Create new engagement{% endblock title %}
+
+{% load table_extras %}
+
+{% load static %}
+
+{% block content %}
+
+<div class="w3-container">
+ <h2>Engagement Plans for {{ entity.name }}</h2>
+ <a href="{% url 'engagements:create' entity.slug 'reg' %}">Add New Regulatory Engagement</a> | <a href="{% url 'engagements:create' entity.slug %}">Add New Engagement</a>
+</div>
+
+<div class="w3-container">
+ <h3>2023</h3>
+ <table class="ep-table">
+ <thead>
+ <tr>
+ <th>Start Date</th>
+ <th>End Date</th>
+ <th>Engagement</th>
+ <th>Engagement Type</th>
+ <th>Area/Theme</th>
+ <th>Inspectors Involved</th>
+ <th>DSCs</th>
+ <th>Travel Effort</th>
+ <th>Planning and Regulation Effort</th>
+ <th>Completion Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for e in engagements %}
+ <tr>
+ <td>{{ e.proposed_start_date|date:'j M Y' }}</td>
+ <td>{{ e.proposed_end_date|date:'j M Y' }}</td>
+ <td><a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a></td>
+ <td>{{ e.friendly_type }}</td>
+ <td>Area Theme</td>
+ <td>
+ <ul class="w3-ul">
+ {% for inspector in e.officers.all %}
+ <li>{{ inspector }} </li>
+ {% endfor %}
+ </ul>
+ </td>
+ <td>
+ <ul class="w3-ul">
+ {% for dsc in e.dscs %}
+ <li><a href="#">{{ dsc.short }}</a></li>
+ {% endfor %}
+ </ul>
+ </td>
+ <td>TBC</td>
+ <td>TBC</td>
+ <td class="ep-table">Incomplete</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+
+</div>
+
+<hr>
+
+<div class="w3-container">
+ <div class="w3-cell-row">
+ <div class="w3-container w3-cell">
+ <h3>Total DSC coverage</h3>
+ <table class="summary-table">
+ <tr>
+ <th>DSC</th>
+ <th>Allocated time</th>
+ </tr>
+ {% for dsc in dscs %}
+ <tr>
+ <td>{{ dsc }} </td>
+ <td>{{ dsc | effort_for_org:entity }}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+ <div class="w3-container w3-cell">
+ <h3>Another table of data</h3>
+ <table class="summary-table">
+ <tr>
+ <th>DSC</th>
+ <th>Allocated time</th>
+ </tr>
+ {% for dsc in dscs %}
+ <tr>
+ <td>{{ dsc }} </td>
+ <td>{{ dsc | effort_for_org:entity }}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+
+ </div>
+</div>
+
+<style type="text/css" media="screen">
+
+ /* (A) CONTAINER */
+ /* https://code-boxx.com/beginner-create-grid-html-css/ */
+ #grid-col {
+
+ /* (A1) GRID LAYOUT */
+ display: grid;
+
+ /* (A2) SPECIFY COLUMNS */
+ grid-template-columns: 75px repeat(31, 40px);
+
+ /* we can also specify exact pixels, percentage, repeat
+ grid-template-columns: 50px 100px 150px;
+ grid-template-columns: 25% 50% 25%;
+ grid-template-columns: 100px 20% auto;
+ grih-template-columns: repeat(3, auto); */
+ }
+
+ /* (B) GRID CELLS */
+ div.cell {
+ background: white;
+ border: 1px solid lightgray;
+ padding: 10px;
+ }
+
+ div.cellred{
+ background: red;
+ border: 1px solid lightgray;
+ padding: 10px;
+ }
+
+ div.cellyellow{
+ background: yellow;
+ border: 1px solid lightgray;
+ padding: 10px;
+ }
+ div.cellorange{
+ background: orange;
+ border: 1px solid lightgray;
+ padding: 10px;
+ }
+ /* (C) RESPONSIVE - 1 COLUMN ON SMALL SCREENS */
+ /* @media screen and (max-width: 640px) {
+ #grid-col { grid-template-columns: 100%; }
+ }
+ */
+/* </style>
+<!-- <div class="w3-container w3-padding-16"> -->
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell"></div><div class="cell">1</div> -->
+<!-- <div class="cell">2</div><div class="cell">3</div> -->
+<!-- <div class="cell">4</div><div class="cell">5</div> -->
+<!-- <div class="cell">6</div><div class="cell">7</div> -->
+<!-- <div class="cell">8</div><div class="cell">9</div> -->
+<!-- <div class="cell">10</div><div class="cell">11</div> -->
+<!-- <div class="cell">12</div><div class="cell">13</div> -->
+<!-- <div class="cell">14</div><div class="cell">15</div> -->
+<!-- <div class="cell">16</div><div class="cell">17</div> -->
+<!-- <div class="cell">18</div><div class="cell">19</div> -->
+<!-- <div class="cell">20</div><div class="cell">21</div> -->
+<!-- <div class="cell">22</div><div class="cell">23</div> -->
+<!-- <div class="cell">24</div><div class="cell">25</div> -->
+<!-- <div class="cell">26</div><div class="cell">27</div> -->
+<!-- <div class="cell">28</div><div class="cell">29</div> -->
+<!-- <div class="cell">30</div><div class="cell">31</div> -->
+<!-- </div> -->
+<!-- </div> -->
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Jan</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
+<!-- <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Feb</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
+<!-- <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Mar</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
+<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
+<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
+<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- <div class="cell">-</div><div class="cell">-</div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Apr</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">May</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Jun</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Jul</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Aug</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Sep</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Oct</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Nov</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+<!-- <div class="grid"> -->
+<!-- <div id="grid-col"> -->
+<!-- <div class="cell">Dec</div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- <div class="cell"></div><div class="cell"></div> -->
+<!-- </div> -->
+<!-- </div> -->
+
+
+<script src="{% static 'js/yoap.js' %}"></script>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/index.html b/engagements/templates/engagements/index.html
new file mode 100644
index 0000000..8d5df36
--- /dev/null
+++ b/engagements/templates/engagements/index.html
@@ -0,0 +1,30 @@
+{% extends "core/base.html" %}
+
+{% block title %}Engagements{% endblock title %}
+
+{% block content %}
+
+<div class="w3-container">
+ <h2>Engagement Planning</h2>
+ <div class="w3-container">
+
+ <h3>Your entities</h3>
+
+ <table class="w3-table w3-bordered">
+ <tr>
+ <th>Engagement Plan</th>
+ <th>Scheduled Engagements</th>
+ <th>Total time</th>
+ </tr>
+ {% for e in entities %}
+ <tr>
+ <td><a href="{% url 'engagements:plan_for_org' e.slug %}">{{ e.name }}</a></td>
+ <td>{{ e.engagement_set.all.count }}</td>
+ <td>NA</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+</div>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/organisations.html b/engagements/templates/engagements/organisations.html
new file mode 100644
index 0000000..5bbd1b5
--- /dev/null
+++ b/engagements/templates/engagements/organisations.html
@@ -0,0 +1,50 @@
+{% extends "core/base.html" %}
+{% load table_extras %}
+
+{% block title %}Regulated Entities{% endblock title %}
+
+{% block content %}
+
+<div class="w3-container">
+ <h1>Regulated Entities</h1>
+ <div class="w3-container">
+ <table class="w3-table w3-bordered w3-striped">
+ <tr>
+ <th>Entity</th>
+ <th>Team</th>
+ <th>Lead Inspector[s]</th>
+ <th>Responsible Person[s]</th>
+ <th>Accountable Person[s]</th>
+ </tr>
+ {% for e in entities %}
+ <tr>
+ <td>{{ e.name }}</td>
+ <td>{{ e.lead_team }}</td>
+ <td>
+ {% if e.lead_inspector.all %}
+ {{ e.lead_inspector.all|commalist }}
+ {% endif %}
+ </td>
+ <td>
+ <!-- rp -->
+ {% if e.rp.all %}
+ {% for p in e.rp.all %}
+ {{ p }}
+ {% endfor %}
+ {% endif %}
+ </td>
+ <td>
+ <!-- ap -->
+ {% if e.ap.all %}
+ {% for p in e.ap.all %}
+ {{ p }}
+ {% endfor %}
+ {% endif %}
+ </td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+</div>
+
+{% endblock content %}
diff --git a/engagements/templates/engagements/snippets/effort_summary_panel.html b/engagements/templates/engagements/snippets/effort_summary_panel.html
new file mode 100644
index 0000000..235a67a
--- /dev/null
+++ b/engagements/templates/engagements/snippets/effort_summary_panel.html
@@ -0,0 +1,41 @@
+{% load table_extras %}
+
+{% if e.is_planned %}
+ <div class="w3-panel w3-pale-green w3-topbar w3-border-green">
+{% else %}
+ <div class="w3-panel w3-light-gray w3-topbar w3-border-green">
+{% endif %}
+ <div class="w3-cell-row">
+ <div class="w3-cell w3-align-left">
+ <h5>{{ e.proposed_start_date|date:'j M Y' }} - {{ e.effort_type }}</h5>
+ </div>
+ <div class="w3-cell w3-right-align">
+ <p> {{ e.effort_total_hours|floatformat }} hrs</p>
+ Planned: {{ e.is_planned }}
+ <button hx-get="{% url 'engagements:htmx-effort-planned' e.id %}" hx-target="#planned_swap_{{ e.id }}">
+ Flip
+ </button>
+ </div>
+ </div>
+ <div>
+ <strong>Inspectors:</strong> {{ e.officers.all|commalist }}
+ </div>
+ <div>
+ <strong>Start time</strong>: {{ e.proposed_start_date|date:'H:i' }}
+ {% if e.proposed_end_date %}
+ - {{ e.proposed_end_date|date:'H:i' }}
+ {% endif %}
+ </div>
+
+ <div>
+ {% if e.sub_instruments.all %}
+ <strong>DSCs</strong>:
+ <ul>
+ {% for dsc in e.sub_instruments.all %}
+ <li><a href="#">{{ dsc.title }}</a></li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+
+ </div>
+</div>