Add Agency Detail page (#545)

* Add Agency Detail page

* Flake8 Fix

Author: DMalone87

backend/dto/agency.py

@@ -56,7 +56,8 @@ def validate_include(cls, v):
             "officers",
             "complaints",
             "allegations",
-            "most_complaints",
+            "reported_units",
+            "location",
         }
         if v:
             invalid = set(v) - allowed_includes

backend/routes/agencies.py

@@ -7,7 +7,8 @@
 from backend.mixpanel.mix import track_to_mp
 from backend.database.models.user import UserRole
 from backend.database.models.agency import Agency
-from backend.routes.search import fetch_details, build_agency_result
+from backend.routes.search import (
+    fetch_details, build_agency_result, build_unit_result)
 from .tmp.pydantic.agencies import CreateAgency, UpdateAgency
 from flask import Blueprint, abort, request, jsonify
 from flask_jwt_extended.view_decorators import jwt_required
@@ -23,22 +24,29 @@
 }
 """
 
+LOCATION_CYPHER = """
+CALL (a) {
+    MATCH (a)-[]-(city:CityNode)-[]-(:CountyNode)
+    -[]-(state:StateNode)
+  RETURN {
+    coords: city.coordinates,
+    city: city.name,
+    state: state.name
+  } AS location
+}
+"""
+
 TOP_UNITS_BY_COMPLAINTS_CYPHER = """
 CALL (a) {
   MATCH (a)-[]-(u:Unit)<-[]-(:Employment)-[]->(o:Officer)
     -[:ACCUSED_OF]->(:Allegation)-[:ALLEGED]-(c:Complaint)
   WITH
     u,
     count(DISTINCT c) AS complaint_count,
-    count(DISTINCT o) AS officer_count
-  ORDER BY complaint_count DESC, coalesce(u.name, "") ASC
+    count(DISTINCT a) AS allegation_count
+  ORDER BY complaint_count DESC, allegation_count DESC
   LIMIT 3
-  RETURN collect({
-    unit_uid: u.uid,
-    unit_name: u.name,
-    complaint_count: complaint_count,
-    officer_count: officer_count
-  }) AS top_units_by_complaints
+  RETURN collect(u) AS most_reported_units
 }
 """
 
@@ -175,9 +183,12 @@ def get_agency(agency_uid: str):
         if "allegations" in params.include:
             subqueries += ALLEGATION_CYPHER
             return_clause += ", collect(type_summary) AS allegation_summary"
-        if "most_complaints" in params.include:
+        if "reported_units" in params.include:
             subqueries += TOP_UNITS_BY_COMPLAINTS_CYPHER
-            return_clause += ", top_units_by_complaints"
+            return_clause += ", most_reported_units"
+        if "location" in params.include:
+            subqueries += LOCATION_CYPHER
+            return_clause += ", location"
     cy = match_clause + subqueries + return_clause
 
     rows, _ = db.cypher_query(cy, {"agency_uid": agency_uid})
@@ -200,9 +211,28 @@ def get_agency(agency_uid: str):
             agency_data["allegation_summary"] = format_allegation_summary(
                 row[idx])
             idx += 1
-        if "most_complaints" in params.include:
-            agency_data["most_complaints"] = row[idx]
+        if "reported_units" in params.include:
+            details = fetch_details(
+                [u.get("uid") for u in row[idx]], "Unit")
+            units = [build_unit_result(
+                u, details.get(u.get("uid"), {})) for u in row[idx]]
+            item_dump = [
+                item.model_dump() for item in units if item
+            ]
+            for item in item_dump:
+                item["last_updated"] = item[
+                    "last_updated"].isoformat() if item.get(
+                    "last_updated", None) else None
+            agency_data["most_reported_units"] = item_dump
             idx += 1
+        if "location" in params.include:
+            loc = row[idx]
+            agency_data["location"] = {
+                "latitude": loc["coords"].y,
+                "longitude": loc["coords"].x,
+                "city": loc["city"],
+                "state": loc["state"]
+            } if loc and loc.get("coords", None) else None
     return ordered_jsonify(agency_data)
 
 

frontend/app/agency/[uid]/page.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useAuth } from "@/providers/AuthProvider"
+import { apiFetch } from "@/utils/apiFetch"
+import API_ROUTES, { apiBaseUrl } from "@/utils/apiRoutes"
+import { useParams } from "next/navigation"
+import { Agency } from "@/utils/api"
+import DetailsLayout from "@/components/Details/DetailsLayout"
+import AgencyIdentityCard from "@/components/Details/IdentityCard/AgencyIdentityCard"
+import AgencyDetailsTabs from "@/components/Details/tabs/AgencyDetailsTabs"
+import AgencyContentDetails from "@/components/Details/ContentDetails/AgencyContentDetails"
+
+export default function AgencyDetailsPage() {
+  const params = useParams<{ uid: string }>()
+  const uid = params.uid
+
+  const [agency, setAgency] = useState<Agency | null>(null)
+  const { accessToken } = useAuth()
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!accessToken || !uid) return
+
+    setLoading(true)
+
+    apiFetch(
+      `${apiBaseUrl}${API_ROUTES.agencies.profile(uid)}?include=complaints&include=officers&include=units&include=reported_units&include=location`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`
+        }
+      }
+    )
+      .then((res) => res.json())
+      .then((data) => setAgency(data.results || data))
+      .finally(() => setLoading(false))
+  }, [accessToken, uid])
+
+  if (loading) return <div>Loading...</div>
+  if (!agency) return <div>Agency not found</div>
+
+  return (
+    <DetailsLayout sidebar={<AgencyContentDetails agency={agency} />}>
+      <AgencyIdentityCard agency={agency} />
+      <AgencyDetailsTabs {...agency} />
+    </DetailsLayout>
+  )
+}

frontend/app/officer/[uid]/page.tsx

@@ -42,7 +42,7 @@ export default function OfficerDetailsPage() {
 
   return (
     <DetailsLayout sidebar={<OfficerContentDetails officer={officer} />}>
-      <OfficerIdentityCard {...officer} />
+      <OfficerIdentityCard officer={officer} />
       <OfficerDetailsTabs {...officer} />
     </DetailsLayout>
   )

frontend/app/unit/[uid]/page.tsx

@@ -42,7 +42,7 @@ export default function UnitDetailsPage() {
 
   return (
     <DetailsLayout sidebar={<UnitContentDetails unit={unit} />}>
-      <UnitIdentityCard {...unit} />
+      <UnitIdentityCard unit={unit} />
       <UnitDetailsTabs {...unit} />
     </DetailsLayout>
   )

frontend/components/Details/ContentDetails/AgencyContentDetails.tsx

@@ -0,0 +1,37 @@
+import ContentDetails from "./ContentDetails"
+import { Agency } from "@/utils/api"
+
+type AgencyContentDetailsProps = {
+  agency: Agency
+}
+
+export default function AgencyContentDetails({ agency }: AgencyContentDetailsProps) {
+  const totalComplaints = agency.total_complaints || 0
+
+  const totalOfficers = agency.total_officers || 0
+
+  const dataSources =
+    agency.sources?.map((source) => source.name).filter((name): name is string => Boolean(name)) ||
+    []
+
+  return (
+    <ContentDetails
+      contentType="Agency"
+      dataSources={dataSources}
+      lastUpdatedText="Nov 1, 2024 by"
+      lastUpdatedBy="Adam Zelitzky"
+      summaryItems={[
+        { label: "Officers", value: String(totalOfficers) },
+        { label: "Complaints", value: String(totalComplaints) },
+        { label: "Related Articles", value: "0" }
+      ]}
+      associatedTitle="Associated officers"
+      associatedPeople={[
+        { name: "Adam Zelitzky" },
+        { name: "Andrew Damora" },
+        { name: "John Dadamo" }
+      ]}
+      associatedHref="#"
+    />
+  )
+}

frontend/components/Details/IdentityCard/AgencyIdentityCard.tsx

@@ -1,33 +1,62 @@
 import IdentityCard from "./IdentityCard"
 import { Agency } from "@/utils/api"
 import { US_STATES } from "@/utils/constants"
+import type { ReactNode } from "react"
+import Link from "@mui/material/Link"
 
 function getStateName(abbreviation: string | undefined): string {
   if (!abbreviation) return ""
   const state = US_STATES.find((s) => s.abbreviation === abbreviation)
   return state ? state.name : abbreviation
 }
 
-function getAgencyLocation(agency: Agency): string | undefined {
-  const parts = [agency.hq_city, agency.hq_state ? getStateName(agency.hq_state) : null].filter(
-    Boolean
-  )
+function getAgencySubtitle(agency: Agency): string | undefined {
+  const locationParts = [
+    agency.hq_city,
+    agency.hq_state ? getStateName(agency.hq_state) : null
+  ].filter(Boolean)
+
+  if (!agency.jurisdiction) return undefined
+
+  if (agency.jurisdiction.toLowerCase() === "municipal") {
+    return `Municipal Police Department${
+      locationParts.length > 0 ? ` - ${locationParts.join(", ")}` : ""
+    }`
+  }
+
+  return locationParts.length > 0 ? `Headquartered in ${locationParts.join(", ")}` : undefined
+}
+
+function getAgencyDetail(agency: Agency): ReactNode {
+  const officers = agency.total_officers ?? "No"
+  const units = agency.total_units ?? "No"
+  const complaints = agency.total_complaints ?? "No"
 
-  return parts.length > 0 ? parts.join(", ") : undefined
+  return (
+    <>
+      {officers} known officers, {units} known units, and {complaints} registered complaints
+      {agency.website_url && (
+        <>
+          <br />
+          Website:{" "}
+          <Link href={agency.website_url} target="_blank" rel="noopener noreferrer">
+            Visit website
+          </Link>
+        </>
+      )}
+    </>
+  )
 }
 
-function getAgencyDetail(agency: Agency): string | undefined {
-  if (agency.jurisdiction) return agency.jurisdiction
-  if (agency.description) return agency.description
-  if (agency.website_url) return agency.website_url
-  return undefined
+type AgencyIdentityCardProps = {
+  agency: Agency
 }
 
-export default function AgencyIdentityCard(agency: Agency) {
+export default function AgencyIdentityCard({ agency }: AgencyIdentityCardProps) {
   return (
     <IdentityCard
       title={agency.name}
-      subtitle={getAgencyLocation(agency)}
+      subtitle={getAgencySubtitle(agency)}
       detail={getAgencyDetail(agency)}
     />
   )

frontend/components/Details/IdentityCard/IdentityCard.tsx

@@ -1,11 +1,12 @@
 import { Avatar, IconButton, Typography } from "@mui/material"
+import type { ReactNode } from "react"
 import styles from "./identityCard.module.css"
 import AddToPhotosOutlinedIcon from "@mui/icons-material/AddToPhotosOutlined"
 
 type IdentityCardProps = {
   title: string
   subtitle?: string
-  detail?: string
+  detail?: ReactNode
   imageSrc?: string
   onAddToCollection?: () => void
 }

frontend/components/Details/IdentityCard/OfficerIdentityCard.tsx

@@ -2,6 +2,10 @@ import IdentityCard from "./IdentityCard"
 import { Officer } from "@/utils/api"
 import { US_STATES } from "@/utils/constants"
 
+type OfficerIdentityCardProps = {
+  officer: Officer
+}
+
 function getAgeFromBirthYear(yearOfBirth: string | number): number {
   return new Date().getFullYear() - Number(yearOfBirth)
 }
@@ -22,7 +26,7 @@ function getOfficerFullName(officer: Officer): string {
   return [officer.first_name, middleName, officer.last_name].filter(Boolean).join(" ")
 }
 
-export default function OfficerIdentityCard(officer: Officer) {
+export default function OfficerIdentityCard({ officer }: OfficerIdentityCardProps) {
   const currentEmployment = officer.employment_history?.find((emp) => !emp.latest_date)
 
   const subtitleParts = [

frontend/components/Details/IdentityCard/UnitIdentityCard.tsx

@@ -2,25 +2,28 @@ import IdentityCard from "./IdentityCard"
 import { Unit } from "@/utils/api"
 import { US_STATES } from "@/utils/constants"
 
+type UnitIdentityCardProps = {
+  unit: Unit
+}
+
 function getStateName(abbreviation: string | undefined): string {
   if (!abbreviation) return ""
   const state = US_STATES.find((s) => s.abbreviation === abbreviation)
   return state ? state.name : abbreviation
 }
 
-export default function UnitIdentityCard(unit: Unit) {
-  const titleStr =
-    unit.name +
-    (unit.location && unit.location.city && unit.location.state
+export default function UnitIdentityCard({ unit }: UnitIdentityCardProps) {
+  const location =
+    unit.location?.city && unit.location?.state
       ? ` - ${unit.location.city}, ${getStateName(unit.location.state)}`
-      : "")
-
-  const subtitlestr = "Unit of " + (unit.agency ? unit.agency.name : "Unknown Agency")
+      : ""
 
-  const detailStr =
+  const title = `${unit.name}${location}`
+  const subtitle = `Unit of ${unit.agency?.name ?? "Unknown Agency"}`
+  const detail =
     unit.total_officers !== undefined
       ? `${unit.total_officers} known officers`
       : "Officer count not available"
 
-  return <IdentityCard title={titleStr} subtitle={subtitlestr} detail={detailStr} />
+  return <IdentityCard title={title} subtitle={subtitle} detail={detail} />
 }