Feat: transit agency home dashboard

benefits/admin.py

@@ -0,0 +1,36 @@
+from django.conf import settings
+from django.contrib import admin
+from django.contrib.auth.models import Group
+from django.template.response import TemplateResponse
+from benefits.core.models import TransitAgency
+from benefits.core import session
+
+
+class BenefitsAdminSite(admin.AdminSite):
+
+    def index(self, request, extra_context=None):
+        """
+        Display the main admin index page if the user is a superuser or a "staff_group" user.
+        Display the agency dashboard index page if the user is an agency user.
+        get_app_list returns a sorted list of all the installed apps that have been
+        registered in this site.
+        """
+        app_list = self.get_app_list(request)
+
+        context = {
+            **self.each_context(request),
+            "title": self.index_title,
+            "subtitle": None,
+            "app_list": app_list,
+            **(extra_context or {}),
+        }
+
+        request.current_app = self.name
+
+        staff_group = Group.objects.get(name=settings.STAFF_GROUP_NAME)
+        if request.user.is_superuser or request.user.groups.filter(name=staff_group).exists():
+            return TemplateResponse(request, "admin/index.html", context)
+        else:
+            agency = TransitAgency.for_user(request.user)
+            session.update(request, agency=agency)
+            return TemplateResponse(request, "admin/agency-dashboard-index.html", context)

benefits/apps.py

@@ -0,0 +1,5 @@
+from django.contrib.admin.apps import AdminConfig
+
+
+class BenefitsAdminConfig(AdminConfig):
+    default_site = "benefits.admin.BenefitsAdminSite"

benefits/core/admin.py

@@ -15,7 +15,6 @@
 
 
 GOOGLE_USER_INFO_URL = "https://www.googleapis.com/oauth2/v3/userinfo"
-STAFF_GROUP_NAME = "Cal-ITP"
 
 logger.debug("Register models with admin site")
 admin.site.register(models.PemData)
@@ -150,5 +149,5 @@ def add_google_sso_userinfo(user, request):
 
 def add_staff_user_to_group(user, request):
     if user.email in settings.GOOGLE_SSO_STAFF_LIST:
-        staff_group = Group.objects.get(name=STAFF_GROUP_NAME)
+        staff_group = Group.objects.get(name=settings.STAFF_GROUP_NAME)
         user.groups.add(staff_group)

benefits/settings.py

@@ -43,7 +43,7 @@ def RUNTIME_ENVIRONMENT():
 # Application definition
 
 INSTALLED_APPS = [
-    "django.contrib.admin",
+    "benefits.apps.BenefitsAdminConfig",
     "django.contrib.auth",
     "django.contrib.contenttypes",
     "django.contrib.messages",
@@ -73,6 +73,7 @@ def RUNTIME_ENVIRONMENT():
     "https://www.googleapis.com/auth/userinfo.profile",
 ]
 SSO_SHOW_FORM_ON_ADMIN_PAGE = False
+STAFF_GROUP_NAME = "Cal-ITP"
 
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
@@ -337,6 +338,7 @@ def RUNTIME_ENVIRONMENT():
     "'unsafe-inline'",
     "https://california.azureedge.net/",
     "https://fonts.googleapis.com/css",
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
 ]
 env_style_src = _filter_empty(os.environ.get("DJANGO_CSP_STYLE_SRC", "").split(","))
 CSP_STYLE_SRC.extend(env_style_src)

benefits/static/css/admin/styles.css

@@ -0,0 +1,60 @@
+@import "../variables.css";
+
+/* Buttons */
+/* Primary Button: Use all three classes: btn btn-lg btn-primary */
+/* Set button width in parent with Bootstrap column */
+/* Height: 60px on Desktop; 72 on mobile*/
+
+:root {
+  --primary-button-padding: 19px 0;
+}
+
+@media (min-width: 992px) {
+  :root {
+    --primary-button-padding: 13px 0;
+  }
+}
+
+.btn.btn-lg.btn-primary {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  border-width: 2px;
+  font-weight: var(--medium-font-weight);
+  font-size: var(--font-size-20px);
+  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
+  width: 100%;
+  padding: var(--primary-button-padding);
+}
+
+.btn.btn-lg.btn-primary:hover {
+  background-color: var(--hover-color);
+  border-color: var(--hover-color);
+}
+
+.btn.btn-lg.btn-primary:focus,
+.btn.btn-lg.btn-primary:focus-visible,
+.btn.btn-lg:focus,
+.btn.btn-lg:focus-visible,
+.btn-outline-dark:focus,
+.btn-outline-dark:focus-visible,
+.btn-outline-light:focus,
+.btn-ouline-dark:focus-visible {
+  outline: 3px solid var(--focus-color) !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important; /* override CA State Web Template */
+  text-decoration: none;
+}
+
+.btn-text {
+  font-weight: var(--medium-font-weight);
+  font-size: var(--font-size-20px);
+  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
+}
+
+html[data-theme="light"],
+:root {
+  --primary: #ffffff;
+  --secondary: var(--dark-color);
+  --link-fg: #ffffff;
+  --body-quiet-color: var(--dark-color);
+}

benefits/static/css/styles.css

@@ -1,52 +1,4 @@
-:root {
-  --primary-color: #045b86;
-  --primary-color-rgb: 4, 91, 134;
-  --bs-blue: var(--primary-color);
-  --bs-primary: var(--primary-color);
-  --bs-primary-rgb: var(--primary-color-rgb);
-  --text-primary-color: #212121;
-  --bs-body-color: var(--text-primary-color);
-  --bs-body-text-align: left;
-  --bs-body-font-weight: 400;
-  --medium-font-weight: 500;
-  --bold-font-weight: 700;
-  --bs-body-font-size: calc(18rem / 16);
-  --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */
-  --heading-line-height: 1.3; /* Displayed as 130% on Figma */
-  --form-field-text-line-height: 1.25; /*Displayed as 125% on Figma */
-  --h4-line-height: 1.2; /* Displayed as 120% on Figma */
-  --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */
-  --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */
-  --letter-spacing-5: 0.05; /* Displayed as 5% on Figma */
-  --dark-color: #212121;
-  --hover-color: #044869;
-  --error-color: #ea1010;
-  --selected-color: #562b97;
-  --focus-color: #fdb714;
-  --secondary-bg-color: #fafafa;
-  --error-color-rgb: 234, 16, 16;
-  --bs-danger: var(--error-color);
-  --bs-danger-rgb: var(--error-color-rgb);
-  --standout-color: #323a45;
-  --h1-text-align: left;
-  --h3-font-size: calc(20rem / 16);
-  --font-size-24px: calc(24rem / 16);
-  --font-size-20px: calc(20rem / 16);
-  --font-size-18px: calc(18rem / 16);
-  --font-size-15px: calc(15rem / 16);
-  --font-size-16px: calc(16rem / 16);
-  --font-size-14px: calc(14rem / 16);
-  --font-size-12px: calc(12rem / 16);
-  --border-width: calc(2rem / 16);
-  --border-radius: calc(3rem / 16);
-  --focus-style: 3px solid var(--focus-color);
-  --focus-border-radius: calc(2rem / 16);
-  --focus-outline-offset: calc(2rem / 16);
-  --focus-border-radius: calc(2rem / 16);
-}
+@import "variables.css";
 
 @font-face {
   font-family: "Public Sans";

benefits/static/css/variables.css

@@ -0,0 +1,49 @@
+:root {
+  --primary-color: #045b86;
+  --primary-color-rgb: 4, 91, 134;
+  --bs-blue: var(--primary-color);
+  --bs-primary: var(--primary-color);
+  --bs-primary-rgb: var(--primary-color-rgb);
+  --text-primary-color: #212121;
+  --bs-body-color: var(--text-primary-color);
+  --bs-body-text-align: left;
+  --bs-body-font-weight: 400;
+  --medium-font-weight: 500;
+  --bold-font-weight: 700;
+  --bs-body-font-size: calc(18rem / 16);
+  --bs-font-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */
+  --heading-line-height: 1.3; /* Displayed as 130% on Figma */
+  --form-field-text-line-height: 1.25; /*Displayed as 125% on Figma */
+  --h4-line-height: 1.2; /* Displayed as 120% on Figma */
+  --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */
+  --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */
+  --letter-spacing-5: 0.05; /* Displayed as 5% on Figma */
+  --dark-color: #212121;
+  --hover-color: #044869;
+  --error-color: #ea1010;
+  --selected-color: #562b97;
+  --focus-color: #fdb714;
+  --secondary-bg-color: #fafafa;
+  --error-color-rgb: 234, 16, 16;
+  --bs-danger: var(--error-color);
+  --bs-danger-rgb: var(--error-color-rgb);
+  --standout-color: #323a45;
+  --h1-text-align: left;
+  --h3-font-size: calc(20rem / 16);
+  --font-size-24px: calc(24rem / 16);
+  --font-size-20px: calc(20rem / 16);
+  --font-size-18px: calc(18rem / 16);
+  --font-size-15px: calc(15rem / 16);
+  --font-size-16px: calc(16rem / 16);
+  --font-size-14px: calc(14rem / 16);
+  --font-size-12px: calc(12rem / 16);
+  --border-width: calc(2rem / 16);
+  --border-radius: calc(3rem / 16);
+  --focus-style: 3px solid var(--focus-color);
+  --focus-border-radius: calc(2rem / 16);
+  --focus-outline-offset: calc(2rem / 16);
+  --focus-border-radius: calc(2rem / 16);
+}

benefits/templates/admin/agency-dashboard-index.html

@@ -0,0 +1,69 @@
+{% extends "admin/base.html" %}
+{% load i18n static %}
+
+{% block extrastyle %}
+    <link href="{% static "css/admin/styles.css" %}" rel="stylesheet">
+    <link href="{% static "img/favicon.ico" %}" rel="icon" type="image/x-icon" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+          crossorigin="anonymous">
+{% endblock extrastyle %}
+
+{% block title %}
+    Agency dashboard
+{% endblock title %}
+
+{% block branding %}
+    <div id="header-container" class="navbar navbar-expand-sm navbar-dark justify-content-between">
+        <div class="container">
+            <span class="navbar-brand p-0">
+                <img class="sm d-lg-none" src="{% static "img/logo-sm.svg" %}" width="90" height="51.3" alt="{% translate "California Integrated Travel Project: Benefits logo (small)" context "image alt text" %}" />
+                <img class="lg d-none d-lg-block" src="{% static "img/logo-lg.svg" %}" width="220" height="50" alt="{% translate "California Integrated Travel Project: Benefits logo (large)" context "image alt text" %}" />
+            </span>
+        </div>
+        <h1 class="p-0 m-0 text-white">Administrator</h1>
+    </div>
+{% endblock branding %}
+
+{% block usertools %}
+{% endblock usertools %}
+
+{% block coltype %}
+    w-100
+{% endblock coltype %}
+
+{% block bodyclass %}
+    {{ block.super }} dashboard
+{% endblock bodyclass %}
+
+{% block nav-breadcrumbs %}
+{% endblock nav-breadcrumbs %}
+
+{% block nav-sidebar %}
+{% endblock nav-sidebar %}
+
+{% block content_title %}
+{% endblock content_title %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-lg-12">
+            <h1 class="pt-0 pb-3 text-left">{{ agency.long_name }}</h1>
+            <div class="border border-3 p-3">
+                <h2 class="pt-0 pb-2 text-left">In-person enrollment</h2>
+                <p>Verify transit benefit eligibility using agency criteria and complete a rider’s open-loop card enrollment.</p>
+                {% url routes.IN_PERSON_ELIGIBILITY as url_eligibility %}
+                <div class="row pt-4">
+                    <div class="col-lg-2">
+                        <a href="{{ url_eligibility }}" class="btn btn-lg btn-primary d-block">New enrollment</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock content %}
+
+{% block sidebar %}
+{% endblock sidebar %}

tests/pytest/core/test_admin.py

@@ -1,7 +1,8 @@
 import pytest
+from django.conf import settings
 from django.contrib.auth.models import User, Group
 import benefits.core.admin
-from benefits.core.admin import GOOGLE_USER_INFO_URL, STAFF_GROUP_NAME, pre_login_user
+from benefits.core.admin import GOOGLE_USER_INFO_URL, pre_login_user
 
 
 @pytest.fixture
@@ -73,7 +74,7 @@ def test_pre_login_user_add_staff_to_group(mocker, model_AdminUser):
 
     pre_login_user(model_AdminUser, mocked_request)
 
-    staff_group = Group.objects.get(name=STAFF_GROUP_NAME)
+    staff_group = Group.objects.get(name=settings.STAFF_GROUP_NAME)
     assert model_AdminUser.groups.contains(staff_group)
 
 
@@ -90,6 +91,6 @@ def test_pre_login_user_does_not_add_transit_staff_to_group(mocker, settings):
     pre_login_user(agency_user, mocked_request)
 
     # assert that a transit agency user does not get added to the Cal-ITP user group
-    staff_group = Group.objects.get(name=STAFF_GROUP_NAME)
+    staff_group = Group.objects.get(name=settings.STAFF_GROUP_NAME)
     assert staff_group.user_set.count() == 0
     assert agency_user.groups.count() == 0