Initial view of the enviromental impact without calculations

device/environmental_impact/calculator.py

@@ -0,0 +1,10 @@
+from dataclasses import dataclass
+
+
+@dataclass
+class EnvironmentalImpact:
+    carbon_saved: float
+
+
+def get_device_environmental_impact() -> EnvironmentalImpact:
+    return EnvironmentalImpact(carbon_saved=225.0)

device/templates/details.html

@@ -32,6 +32,9 @@
         <li class="nav-item">
           <a class="nav-link" href="{% url 'device:device_web' object.id %}" target="_blank">Web</a>
         </li>
+        <li class="nav-item">
+          <a href="#enviromental_impact" class="nav-link" data-bs-toggle="tab" data-bs-target="#enviromental_impact">{% trans 'Enviromental impact' %}</a>
+        </li>
       </ul>
     </div>
   </div>
@@ -229,6 +232,62 @@
         {% endfor %}
       </div>
     </div>
+    <div class="tab-pane fade" id="enviromental_impact">
+      <div class="container-fluid py-3">
+        {% comment %} <h5 class="card-title text-success">Environmental Impact Assessment</h5> {% endcomment %}
+
+        <div class="row g-4 mb-4">
+          <div class="col-md-4">
+            <div class="card h-100 border-success">
+              <div class="card-body text-center">
+                <div class="mb-3">
+                  <i class="bi bi-arrow-down-circle text-success" style="font-size: 2rem;"></i>
+                </div>
+                <h5 class="card-title text-success">Carbon Reduction</h5>
+                <h2 class="mb-2">{{ impact.carbon_saved }}</h2>
+                <p class="card-text text-muted">kg CO₂e saved</p>
+              </div>
+            </div>
+          </div>
+          {% comment %} <div class="col-md-4">
+            <div class="card h-100 border-success">
+              <div class="card-body text-center">
+                <div class="mb-3">
+                  <i class="bi bi-recycle text-success" style="font-size: 2rem;"></i>
+                </div>
+                <h5 class="card-title text-success">Whatever other metric we might wanna show</h5>
+                <h2 class="mb-2">85%</h2>
+                <p class="card-text text-muted">whatever</p>
+              </div>
+            </div>
+          </div> {% endcomment %}
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title">Impact Details</h5>
+
+            <div class="table-responsive">
+              <table class="table table-bordered">
+                <tbody>
+                  <tr>
+                    <th scope="row" class="bg-light" style="width: 30%;">Manufacturing Impact Avoided</th>
+                    <td>
+                      <span class="text-success">{{ impact.carbon_saved }}</span> kg CO₂e
+                      <br />
+                      <small class="text-muted">Based on average laptop manufacturing emissions</small>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="mt-3">
+              <h6>Calculation Method</h6>
+              <small class="text-muted">Based on industry standards X Y and Z</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 {% endblock %}
 

device/views.py

@@ -16,6 +16,7 @@ from evidence.models import Annotation
 from lot.models import LotTag
 from device.models import Device
 from device.forms import DeviceFormSet
+from device.environmental_impact.calculator import get_device_environmental_impact
 
 
 class NewDeviceView(DashboardView, FormView):
@@ -107,6 +108,7 @@ class DetailsView(DashboardView, TemplateView):
             'object': self.object,
             'snapshot': self.object.get_last_evidence(),
             'lot_tags': lot_tags,
+            'impact': get_device_environmental_impact()
         })
         return context