Tidying up effort interface

4 files changed, 454 insertions, 158 deletions

diff --git a/core/static/css/output.css b/core/static/css/output.css
index e70dbcf..a371851 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -913,6 +913,69 @@ html {
   margin-inline-end: -1rem;
 }
 
+.join {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--rounded-btn, 0.5rem);
+}
+
+.join :where(.join-item) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.join .join-item:not(:first-child):not(:last-child),
+  .join *:not(:first-child):not(:last-child) .join-item {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.join .join-item:first-child:not(:last-child),
+  .join *:first-child:not(:last-child) .join-item {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.join .dropdown .join-item:first-child:not(:last-child),
+  .join *:first-child:not(:last-child) .dropdown .join-item {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+.join :where(.join-item:first-child:not(:last-child)),
+  .join :where(*:first-child:not(:last-child) .join-item) {
+  border-end-start-radius: inherit;
+  border-start-start-radius: inherit;
+}
+
+.join .join-item:last-child:not(:first-child),
+  .join *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.join :where(.join-item:last-child:not(:first-child)),
+  .join :where(*:last-child:not(:first-child) .join-item) {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+@supports not selector(:has(*)) {
+  :where(.join *) {
+    border-radius: inherit;
+  }
+}
+
+@supports selector(:has(*)) {
+  :where(.join *:has(.join-item)) {
+    border-radius: inherit;
+  }
+}
+
 .link {
   cursor: pointer;
   text-decoration-line: underline;
@@ -1085,6 +1148,16 @@ html {
   text-align: inherit;
 }
 
+.join > :where(*:not(:first-child)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: -1px;
+}
+
+.join > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
+
 .link:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1251,6 +1324,78 @@ html {
   }
 }
 
+.join.join-vertical {
+  flex-direction: column;
+}
+
+.join.join-vertical .join-item:first-child:not(:last-child),
+  .join.join-vertical *:first-child:not(:last-child) .join-item {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.join.join-vertical .join-item:last-child:not(:first-child),
+  .join.join-vertical *:last-child:not(:first-child) .join-item {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+.join.join-horizontal {
+  flex-direction: row;
+}
+
+.join.join-horizontal .join-item:first-child:not(:last-child),
+  .join.join-horizontal *:first-child:not(:last-child) .join-item {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-start-start-radius: inherit;
+}
+
+.join.join-horizontal .join-item:last-child:not(:first-child),
+  .join.join-horizontal *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  border-end-end-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.join.join-vertical > :where(*:not(:first-child)) {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: -1px;
+}
+
+.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
+  margin-top: calc(var(--border-btn) * -1);
+}
+
+.join.join-horizontal > :where(*:not(:first-child)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: -1px;
+}
+
+.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
+
+.table-sm :not(thead):not(tfoot) tr {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.table-sm :where(th, td) {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .static {
   position: static;
 }
@@ -1271,6 +1416,10 @@ html {
   top: 0.5rem;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1281,6 +1430,11 @@ html {
   margin-bottom: 0.5rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -1614,11 +1768,21 @@ html {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1629,6 +1793,16 @@ html {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1664,6 +1838,11 @@ html {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1674,6 +1853,11 @@ html {
   padding-right: 2rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1814,6 +1998,11 @@ html {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -1839,6 +2028,11 @@ html {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1963,6 +2157,11 @@ html {
   color: rgb(191 219 254 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-900:hover {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1988,6 +2187,11 @@ html {
   color: rgb(49 46 129 / var(--tw-text-opacity));
 }
 
+.hover\:text-red-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
diff --git a/engagements/models.py b/engagements/models.py
index 20bed8d..b0dfe2b 100644
--- a/engagements/models.py
+++ b/engagements/models.py
@@ -154,6 +154,9 @@ class Engagement(Common):
         "L4RIF": "L4 RIF",
     }
 
+    def get_officers(self):
+        return [" ".join([x.first_name, x.last_name]) for x in self.officers.all()]
+
     def total_planning_effort(self):
         p_effort = self.engagementeffort_set.all().filter(is_planned=True)
         return sum([x.effort_total_hours() for x in p_effort])
@@ -173,7 +176,7 @@ class Engagement(Common):
     def dscs(self):
         "Return all declared DSCs as part of REGULATION effort"
         dscs = set()
-        for ee in EngagementEffort.objects.filter(engagement=self, effort_type="REGULATION"):
+        for ee in EngagementEffort.objects.filter(engagement=self):
             for si in ee.sub_instruments.all():
                 dscs.add(si)
         return dscs
@@ -191,7 +194,7 @@ class EngagementEffort(Common):
         ("PLANNING", "Planning"),
         ("REGULATION", "Regulation (On-site or Remote)"),
         ("DISCUSSION", "Discussion"),
-        ("REPORT", "Reporting"),
+        ("REPORTING", "Reporting"),
     )
     is_planned = models.BooleanField(null=True, blank=True, verbose_name="Planned", default=True)
     effort_type = models.CharField(max_length=32, choices=choices, verbose_name="Effort Type")
@@ -206,6 +209,9 @@ class EngagementEffort(Common):
         verbose_name_plural = "Engagement Effort"
         ordering = ("proposed_start_date",)
 
+    def get_officers(self):
+        return [" ".join([x.first_name, x.last_name]) for x in self.officers.all()]
+
     def effort_total_hours(self):
         "Returns total effort for this engagement."
         delta = self.proposed_end_date - self.proposed_start_date
diff --git a/engagements/templates/engagements/engagement_detail.html b/engagements/templates/engagements/engagement_detail.html
index 848b9f6..72f069d 100644
--- a/engagements/templates/engagements/engagement_detail.html
+++ b/engagements/templates/engagements/engagement_detail.html
@@ -6,160 +6,206 @@
 
 {% block content %}
     <div class="container mx-auto px-4 py-8">
-        <div class="p-4">
+        <h3 class="font-semibold text-3xl">{{ engagement.friendly_type }}
+            at {{ engagement.external_party }}</h3>
+        <h4 class="text-gray-600">{{ engagement.proposed_start_date|date:"l j M Y" }}</h4>
+        <p class="py-2">{% lorem %}</p>
+
+        <h3 class="text-2xl">Executive summary</h3>
+
+        <blockquote>
+            <p class="mt-4 px-5">
+                <q>{% lorem %}</q>
+            </p>
+        </blockquote>
+
+        <div class="flex flex-col md:flex-row gap-8">
+            <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 w-full border border-gray-400">
+                <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
+                    <h3 class="font-semibold">{{ engagement.engagement_type|lower|capfirst }} Data</h3>
+                </div>
+                <table class="border-collapse border rounded border-slate-400 min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                            DSC
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                            Outcome
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
+                            Comments
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                    <tr>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-bold text-gray-900">DSC 1</td>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-white bg-green-500">ADEQUATE</td>
+                        <td class="px-6 py-2 text-sm font-medium text-gray-900">{% lorem 30 w random %}</td>
+                    </tr>
+                    <tr>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-bold text-gray-900">DSC 5</td>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900 bg-yellow-300">BELOW ADEQUATE</td>
+                        <td class="px-6 py-2 text-sm font-medium text-gray-900">{% lorem %}</td>
+                    </tr>
+                    <tr>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-bold text-gray-900">DSC 12</td>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-white bg-red-500">UNSUSTAINABLE</td>
+                        <td class="px-6 py-2 text-sm font-medium text-gray-900">{% lorem 50 w random %}</td>
+                    </tr>
+                    <tr>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-bold text-gray-900">DSC 16</td>
+                        <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-white bg-yellow-500">NEAR ADEQUATE</td>
+                        <td class="px-6 py-2 text-sm font-medium text-gray-900">{% lorem 50 w random %}</td>
+                    </tr>
+                    </tbody>
+                </table>
 
-            <div class="flex flex-col md:flex-row gap-8">
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 md:w-1/3 border border-gray-400">
-                    <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
-                        <h3 class="font-semibold">{{ engagement.friendly_type }}
-                            at {{ engagement.external_party }}</h3>
-                    </div>
-                    <div class="border-t border-gray-200">
-                        <div class="px-4 py-5 sm:p-2">
-                            <div class="w-full p-4 space-y-4">
-                                <!-- Date -->
-                                <div class="flex items-center space-x-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                         stroke-width="1.5"
-                                         stroke="currentColor" class="size-6 mr-2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                              d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
-                                    </svg>
-                                    <span class="text-black">Tuesday - 10 May 2022</span>
-                                </div>
-
-                                <!-- Site/Operation -->
-                                <div class="flex items-center space-x-2">
-                                    <svg id="map-pin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                         stroke-width="1.5"
-                                         stroke="currentColor"
-                                         class="size-6 mr-2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                              d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
-                                    </svg>
-
-                                    <span class="text-black">Smith, Short and Brookes</span>
-                                </div>
-
-                                <!-- Subject of Activity -->
-                                <div class="flex items-center space-x-2">
-
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                         stroke-width="1.5" stroke="currentColor" class="size-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                              d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"/>
-                                    </svg>
-
-                                    <span class="text-black">DSC 1 - Title 1</span>
-                                </div>
-
-                                <!-- Inspectors -->
-                                <div class="flex items-center space-x-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                         stroke-width="1.5" stroke="currentColor" class="size-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                              d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"/>
-                                    </svg>
-
-                                    <span class="text-black">Hilary James, Carly Robinson, Alison Smart</span>
-                                </div>
-
-                                <!-- Actual Effort -->
-                                <div class="flex items-center space-x-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                         stroke-width="1.5" stroke="currentColor" class="size-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                              d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-                                    </svg>
-
-                                    <span class="text-black">Actual Effort: 5.3 hrs</span>
-                                </div>
-
-
-                                <div>
-                                    <a href="{% url 'engagements:edit' engagement.pk %}"
-                                       class="text-blue-600 hover:underline">Edit
-                                        Engagement</a>
-                                </div>
+            </div>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-8">
+            <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 md:w-1/3 border border-gray-400">
+                <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
+                    <h3 class="font-semibold">Summary</h3>
+                </div>
+                <div class="border-t border-gray-200">
+                    <div class="px-4 py-5 sm:p-2">
+                        <div class="w-full p-4 space-y-4">
+                            <!-- Date -->
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke-width="1.5"
+                                     stroke="currentColor" class="size-6 mr-2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
+                                </svg>
+                                <span class="text-black">Tuesday - 10 May 2022</span>
+                            </div>
+
+                            <!-- Site/Operation -->
+                            <div class="flex items-center space-x-2">
+                                <svg id="map-pin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke-width="1.5"
+                                     stroke="currentColor"
+                                     class="size-6 mr-2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
+                                </svg>
+
+                                <span class="text-black">Smith, Short and Brookes</span>
+                            </div>
+
+                            <!-- Subject of Activity -->
+                            <div class="flex items-center space-x-2">
+
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke-width="1.5" stroke="currentColor" class="size-6 mr-2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"/>
+                                </svg>
+
+                                <span class="text-black">{{ engagement.dscs| }}</span>
+                            </div>
+
+                            <!-- Inspectors -->
+                            <div class="flex items-center space-x-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke-width="1.5" stroke="currentColor" class="size-6 mr-2">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"/>
+                                </svg>
+
+                                <span class="text-black">{{ engagement.get_officers|join:", " }}</span>
+                            </div>
+
+                            <div>
+                                <a href="{% url 'engagements:edit' engagement.pk %}"
+                                   class="text-blue-600 hover:underline">Edit
+                                    Engagement</a>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 md:w-2/3 border border-gray-400">
-                    <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
-                        <h3 class="font-semibold">Effort</h3>
-                    </div>
-                    <div class="border-t border-gray-200">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="mb-4">
-                                <span class="font-medium">Add:</span>
-                                <a href="{% url 'engagements:effort_create' engagement.pk 'TRAVEL' %}"
-                                   class="text-blue-600 hover:underline ml-2">Travel</a>
-                                <a href="{% url 'engagements:effort_create' engagement.pk 'PLANNING' %}"
-                                   class="text-blue-600 hover:underline ml-2">Planning</a>
-                                <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}"
-                                   class="text-blue-600 hover:underline ml-2">Regulation</a>
-                                <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}"
-                                   class="text-blue-600 hover:underline ml-2">Reporting</a>
-                            </div>
+            <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 md:w-2/3 border border-gray-400">
+                <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
+                    <h3 class="font-semibold">Effort</h3>
+                </div>
+                <div class="border-t border-gray-200">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="mb-4">
+                            <span class="font-medium">Add:</span>
+                            <a href="{% url 'engagements:effort_create' engagement.pk 'TRAVEL' %}"
+                               class="text-blue-600 hover:underline ml-2">Travel</a>
+                            <a href="{% url 'engagements:effort_create' engagement.pk 'PLANNING' %}"
+                               class="text-blue-600 hover:underline ml-2">Planning</a>
+                            <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}"
+                               class="text-blue-600 hover:underline ml-2">Regulation</a>
+                            <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}"
+                               class="text-blue-600 hover:underline ml-2">Reporting</a>
+                        </div>
 
-                            {% if effort %}
-                                <table class="border-collapse border border-slate-400 min-w-full divide-y divide-gray-200">
-                                    <thead class="bg-gray-50">
+                        {% if effort %}
+                            <table class="border-collapse border border-slate-400 min-w-full divide-y divide-gray-200">
+                                <thead class="bg-gray-50">
+                                <tr>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Type
+                                    </th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Date
+                                    </th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Planned Hours
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Actual Hours
+                                    </th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Actions
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody class="bg-white divide-y divide-gray-200">
+                                {% for e in effort.all %}
                                     <tr>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Type
-                                        </th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Date
-                                        </th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Hours
-                                        </th>
-                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                            Actions
-                                        </th>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ e.effort_type|lower|capfirst }}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                            {{ e.proposed_start_date|date:"d M Y" }}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.effort_ }}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.effort_actual }}</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <button class="text-indigo-600 hover:text-indigo-900"
+                                                    hx-get="{% url 'engagements:effort_detail' e.id %}"
+                                                    hx-target="#effort-detail-{{ e.id }}"
+                                                    hx-swap="outerHTML"
+                                                    hx-trigger="click">
+                                                View Details
+                                            </button>
+
+                                        </td>
                                     </tr>
-                                    </thead>
-                                    <tbody class="bg-white divide-y divide-gray-200">
-                                    {% for e in effort.all %}
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ e.effort_type|lower }}</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                                {{ e.proposed_start_date|date:"d M Y" }}</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.hours }}</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <button class="text-indigo-600 hover:text-indigo-900"
-                                                        hx-get="{% url 'engagements:effort_detail' e.id %}"
-                                                        hx-target="#effort-detail-{{ e.id }}"
-                                                        hx-swap="outerHTML"
-                                                        hx-trigger="click">
-                                                    View Details
-                                                </button>
-
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td colspan="4">
-                                                <div id="effort-detail-{{ e.id }}"
-                                                     class="hidden bg-gray-100 p-4"></div>
-                                            </td>
-                                        </tr>
-                                    {% endfor %}
-                                    </tbody>
-                                </table>
-                                <!-- Total Effort -->
-                                <div class="flex items-center space-x-2 my-2">
-                                    <span class="text-black text-sm font-semibold underline decoration-pink-500">Total Effort: 5.3 hrs</span>
-                                </div>
-
-                            {% else %}
-                                <p class="text-gray-500">No effort records found for this engagement.</p>
-                            {% endif %}
-                        </div>
+                                    <tr>
+                                        <td colspan="5">
+                                            <div id="effort-detail-{{ e.id }}"
+                                                 class="hidden bg-gray-100 p-4"></div>
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                            <!-- Total Effort -->
+                            <div class="flex items-center space-x-2 my-2">
+                                <span class="text-black text-sm font-semibold">Total Actual Effort: {{ effort_total }} hrs</span>
+                            </div>
+
+                        {% else %}
+                            <p class="text-gray-500">No effort records found for this engagement.</p>
+                        {% endif %}
                     </div>
                 </div>
             </div>
diff --git a/engagements/templates/engagements/snippets/effort_detail.html b/engagements/templates/engagements/snippets/effort_detail.html
index 16c64b4..bfa6fc5 100644
--- a/engagements/templates/engagements/snippets/effort_detail.html
+++ b/engagements/templates/engagements/snippets/effort_detail.html
@@ -1,6 +1,7 @@
-<div id="effort-detail-{{ effort.id }}" class="bg-gray-100 p-4">
+<div id="effort-detail-{{ effort.id }}" class="bg-gray-100 p-4 w-full">
     <div class="flex justify-between items-center mb-2">
-        <h4 class="text-lg font-semibold">Effort Details</h4>
+        {{ effort_total }}
+        <h4 class="text-lg font-semibold">Details</h4>
         <button onclick="closeEffortDetail({{ effort.id }})" class="text-gray-500 hover:text-gray-700">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
@@ -8,13 +9,53 @@
             </svg>
         </button>
     </div>
-    <div class="p-4">
-        <h4 class="text-lg font-semibold mb-2">Effort Details</h4>
-        <p><strong>Type:</strong> {{ effort.effort_type }}</p>
-        <p><strong>Date:</strong> {{ effort.proposed_start_date|date:"d M Y" }}</p>
-        <p><strong>Hours:</strong> {{ effort.hours }}</p>
-        <p><strong>Notes:</strong> {{ effort.notes|default:"No notes available" }}</p>
-        <!-- Add more fields as needed -->
+
+    <!-- Add w-full and min-w-full to enforce full width -->
+    <div class="relative z-10 w-full">
+        <div class="bg-white border border-gray-300 rounded-lg shadow-sm p-4 w-full min-w-full">
+            <table class="w-full table-sm">
+                <tbody>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Type:</td>
+                        <td class="py-0 text-gray-800">{{ effort.effort_type|lower|capfirst }}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Start:</td>
+                        <td class="py-0 text-gray-800">{{ effort.proposed_start_date|date:"H:i - l j M Y" }}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">End:</td>
+                        <td class="py-0 text-gray-800">{{ effort.proposed_end_date|date:"H:i - l j M Y" }}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Planned Hours:</td>
+                        <td class="py-0 text-gray-800">{{ effort.effort_total_planned_hours|floatformat:1 }}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Actual Hours:</td>
+                        <td class="py-0 text-gray-800">{{ effort.effort_actual|floatformat:1 }}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Hours per Inspector:</td>
+                        <td class="py-0 text-gray-800">{{ effort.effort_per_officer_hours|floatformat:1 }}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Inspectors:</td>
+                        <td class="py-0 text-gray-800">{% if effort.get_officers %}{{ effort.get_officers|join:", " }} {% else %} None listed {% endif %}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-0 font-bold text-gray-600">Notes:</td>
+                        <td class="py-0 text-gray-800">No notes available</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <hr class="my-4 border-t border-gray-300">
+            <div class="mt-4 flex justify-between">
+                <a href="#" class="text-blue-500 hover:text-blue-700">Edit</a>
+                <a href="#" class="text-red-500 hover:text-red-700">Delete</a>
+            </div>
+        </div>
     </div>
 </div>
 
@@ -23,5 +64,4 @@
         const detailDiv = document.getElementById(`effort-detail-${effortId}`);
         detailDiv.classList.add('hidden');
     }
-
-</script>
+</script>
\ No newline at end of file