Merge pull request dimagi#981 from dimagi/ze/progress-map-page

Expanding on Progress Map Page

Author: zandre-eng

commcare_connect/microplanning/tests/__init__.py

@@ -0,0 +1,64 @@
+from __future__ import annotations
+
+from datetime import date
+from types import SimpleNamespace
+from unittest import mock
+
+import pytest
+from django.test import Client
+from django.urls import reverse
+
+from commcare_connect.flags.flag_names import MICROPLANNING
+from commcare_connect.flags.models import Flag
+from commcare_connect.microplanning import views as microplanning_views
+
+
+@pytest.mark.django_db
+class TestGetMetricsForMicroplanning:
+    def test_end_date_missing(self):
+        opp = SimpleNamespace(end_date=None)
+        metrics = microplanning_views.get_metrics_for_microplanning(opp)
+        assert metrics == [{"name": "Days Remaining", "value": "--"}]
+
+    def test_end_date_in_future(self):
+        with mock.patch.object(microplanning_views, "localdate", return_value=date(2026, 1, 1)):
+            opp = SimpleNamespace(end_date=date(2026, 1, 11))
+            metrics = microplanning_views.get_metrics_for_microplanning(opp)
+            assert metrics == [{"name": "Days Remaining", "value": 10}]
+
+    def test_end_date_in_past(self):
+        with mock.patch.object(microplanning_views, "localdate", return_value=date(2026, 1, 1)):
+            opp = SimpleNamespace(end_date=date(2025, 12, 30))
+            metrics = microplanning_views.get_metrics_for_microplanning(opp)
+            assert metrics == [{"name": "Days Remaining", "value": 0}]
+
+
+@pytest.mark.django_db
+class TestMicroplanningHomeView:
+    def url(self, org_slug: str, opp_id: str):
+        return reverse("microplanning:microplanning_home", args=(org_slug, opp_id))
+
+    def test_success(self, client: Client, settings, organization, org_user_admin, opportunity):
+        settings.MAPBOX_TOKEN = "test-mapbox-token"
+
+        flag, _ = Flag.objects.get_or_create(name=MICROPLANNING)
+        flag.opportunities.add(opportunity)
+
+        client.force_login(org_user_admin)
+        response = client.get(self.url(organization.slug, str(opportunity.opportunity_id)))
+
+        assert response.status_code == 200
+        assert any(t.name == "microplanning/home.html" for t in response.templates)
+
+    def test_flag_disabled(self, client: Client, organization, org_user_admin, opportunity):
+        client.force_login(org_user_admin)
+        response = client.get(self.url(organization.slug, str(opportunity.opportunity_id)))
+        assert response.status_code == 404
+
+    def test_unauthenticated(self, client: Client, organization, org_user_member, opportunity):
+        flag, _ = Flag.objects.get_or_create(name=MICROPLANNING)
+        flag.opportunities.add(opportunity)
+
+        client.force_login(org_user_member)
+        response = client.get(self.url(organization.slug, str(opportunity.opportunity_id)))
+        assert response.status_code == 404

commcare_connect/microplanning/tests/test_views.py

@@ -1,5 +1,7 @@
 from django.conf import settings
 from django.shortcuts import render
+from django.utils.timezone import localdate
+from django.utils.translation import gettext as _
 from django.views.decorators.http import require_GET
 
 from commcare_connect.flags.decorators import require_flag_for_opp
@@ -12,10 +14,22 @@
 @opportunity_required
 @require_flag_for_opp(MICROPLANNING)
 def microplanning_home(request, *args, **kwargs):
+    opportunity = request.opportunity
     return render(
         request,
         template_name="microplanning/home.html",
         context={
             "mapbox_api_key": settings.MAPBOX_TOKEN,
+            "opportunity": opportunity,
+            "metrics": get_metrics_for_microplanning(opportunity),
         },
     )
+
+
+def get_metrics_for_microplanning(opportunity):
+    return [
+        {
+            "name": _("Days Remaining"),
+            "value": max((opportunity.end_date - localdate()).days, 0) if opportunity.end_date else "--",
+        },
+    ]

commcare_connect/microplanning/views.py

@@ -12,23 +12,54 @@
 {% endblock javascript %}
 
 {% block content %}
-<h2 class="mb-4 text-brand-deep-purple font-medium">{% translate "Select Opportunity Area" %}</h2>
-<div x-ref="mapContainer" class="w-full grid grid-cols-12 gap-2 h-[max(calc(100vh-150px),200px)]"
-    x-data="mapController()">
-    <div id="map-wrapper" class="relative h-full shadow-md" :class="panelOpen ? 'col-span-9' : 'col-span-12'">
-        <div id="map" class="w-full h-full"></div>
-        <button id="toggle-sidebar" title="{% translate 'Toggle Settings Panel' %}"
-            class="absolute top-4 right-4 z-50 bg-white p-2 rounded shadow-md hover:cursor-pointer"
-            @click="togglePanel()" aria-label="{% translate 'Toggle Settings Panel' %}" :aria-expanded="panelOpen"
-            aria-controls="sidebar" type="button">
-            <i x-show="panelOpen" class="fa fa-chevron-right"></i>
-            <i x-show="!panelOpen" class="fa fa-chevron-left"></i>
-        </button>
+<div class="min-w-0">
+    <h2 class="mb-4 text-brand-deep-purple font-medium">{% translate "Select Opportunity Area" %}</h2>
+
+    <!-- Top header section -->
+    <header class="mb-4">
+        <div class="w-full rounded-lg bg-brand-indigo p-5 shadow-sm sm:p-6">
+            <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+                <div class="min-w-0 flex-1">
+                    <h1 class="multi-line-clamp-2 text-2xl font-semibold text-white break-words hyphens-auto leading-snug">
+                        {{ opportunity.name }}
+                    </h1>
+                </div>
+
+                <div class="w-full border-t border-white/20 pt-4 lg:w-auto lg:border-t-0 lg:border-l lg:border-white/20 lg:pl-8 lg:pt-0">
+                    <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 lg:w-auto lg:max-w-3xl xl:grid-cols-6">
+                        {% for metric in metrics %}
+                            <div class="rounded-md border border-brand-sky/30 bg-brand-cornflower-blue/25 p-3 text-center">
+                                <div class="text-xl font-semibold text-white">
+                                    {{ metric.value|default:"--" }}
+                                </div>
+                                <div class="mt-0.5 text-xs text-white/80">{{ metric.name }}</div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="flex flex-col gap-2 xl:flex-row xl:items-stretch xl:h-[max(calc(100vh-300px),200px)]" x-data="mapController()">
+        <!-- Map section -->
+        <div id="map-wrapper" x-ref="mapContainer" class="relative min-w-0 flex-1 shadow-md h-[max(calc(100vh-300px),200px)] xl:h-full">
+            <div id="map" class="w-full h-full"></div>
+        </div>
+
+        <!-- Sidebars (stacked) -->
+        <div class="w-full xl:w-96 shrink-0 flex flex-col gap-2 min-h-0 xl:h-full">
+            <aside id="sidebar" class="bg-white shadow-md p-4 overflow-auto xl:flex-1 min-h-0">
+                <h2 class="text-lg font-semibold mb-2">{% translate "Settings" %}</h2>
+                <!-- Sidebar content goes here -->
+            </aside>
+
+            <aside id="right-sidebar" class="bg-white shadow-md p-4 overflow-auto xl:flex-1 min-h-0">
+                <h2 class="text-lg font-semibold mb-2">{% translate "Modify Work Area" %}</h2>
+                <!-- Outer sidebar content goes here -->
+            </aside>
+        </div>
     </div>
-    <aside id="sidebar" class="col-span-3 h-full bg-white shadow-md p-4 overflow-auto" x-transition x-show="panelOpen">
-        <h2 class="text-lg font-semibold mb-2">{% translate "Settings" %}</h2>
-        <!-- Sidebar content goes here -->
-    </aside>
 </div>
 {% include "microplanning/map_handler.html" %}
 {% endblock %}

commcare_connect/templates/microplanning/home.html

@@ -1,7 +1,6 @@
 <script>
     document.addEventListener("alpine:init", () => {
         Alpine.data("mapController", () => ({
-            panelOpen: true,
             map: null,
 
             init() {
@@ -35,10 +34,6 @@
                     this.map.resize();
                 });
                 observer.observe($mapContainer);
-            },
-
-            togglePanel() {
-                this.panelOpen = !this.panelOpen;
             }
         }));
     });

commcare_connect/templates/microplanning/map_handler.html

@@ -757,3 +757,12 @@ select:disabled,
 .textinput:disabled {
   @apply pointer-events-none opacity-50;
 }
+
+/* Multi-line truncation helper (2 lines). */
+.multi-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}