[WIP] Regulation Page - Hardcoded data

src/DashboardUI/src/App.tsx

@@ -17,6 +17,7 @@ import { useEffect, useState } from "react";
 import ReactGA from 'react-ga4';
 import WaterRightDetailsPage from "./pages/WaterRightDetailsPage";
 import SiteDetailsPage from "./pages/SiteDetailsPage";
+import RegulationDetailsPage from "./pages/RegulationDetailsPage";
 import { clarity } from 'clarity-js'
 
 export interface AppProps {
@@ -74,6 +75,7 @@ function App({ msalInstance }: AppProps) {
                 <Route path="details" element={<DetailLayout />}>
                   <Route path="site/:id" element={<SiteDetailsPage />} />
                   <Route path="right/:id" element={<WaterRightDetailsPage />} />
+                  <Route path="regulation/:id" element={<RegulationDetailsPage />} />
                 </Route>
               </Route>
             </Routes>

src/DashboardUI/src/accessors/regulationAccessor.ts

@@ -0,0 +1,40 @@
+import {
+  RegulationDetails,
+  RegulatoryOverlayInfoListItem,
+} from "@data-contracts";
+import axios from "axios";
+
+// TODO: Wire to API when route is created
+export const getRegulationDetails = async (areaUuid: string) => {
+  /*const { data } = await axios.get<RegulationDetails>(
+                                    `${process.env.REACT_APP_WEBAPI_URL}Regulation/${areaUuid}`,
+                                  ); */
+
+  const data = {
+    waDEAreaReportingUuid: "C0o_RUCO356",
+    reportingAreaNativeId: "CO356",
+    waDEReportingAreaName: "WaDE Blank",
+    waDEOverlayAreaType: "Administration",
+    nativeReportingAreaType: "Groundwater Management District",
+    reportingAreaName: "Arikaree",
+    reportingAreaState: "CO",
+    // areaLastUpdated: new Date("08/05/2005"),
+    managingAgencyOrganizationName: "Colorado Division of Water Resources",
+    managingAgencyState: "CO",
+    managingAgencyWebsite: "https://water.state.co.us/",
+  } as RegulationDetails;
+
+  return data;
+};
+
+export const getRegulatoryOverlayInfoList = async (areaUuid: string) => {
+  const data = [
+    {
+      waDEOverlayUuid: "C0o_RUCO356",
+      overlayNativeId: "WaDE Blank",
+      overlayType: "Groundwater Management District",
+    },
+  ] as RegulatoryOverlayInfoListItem[];
+
+  return data;
+};

src/DashboardUI/src/components/details-page/detail-page.scss

@@ -11,12 +11,11 @@
     padding: 10px;
     border-bottom: 1px solid $bs-gray-600;
   }
-  
-  .water-rights-card, .site-card {
+
+  .water-rights-card, .site-card, .regulation-card {
     .card-header{
       font-size: 20px;
       color: $white;
-      color: $white;
       padding: 10px;
       display: flex;
       align-items: center;

src/DashboardUI/src/components/details-page/regulation/Layout.tsx

@@ -0,0 +1,26 @@
+import { DetailsPage } from "../DetailsPageLayout";
+import RegulationProperties from "./RegulationProperties";
+import RegulationTabs from "./RegulationTabs";
+
+//import { useAlerts } from "./hooks/useAlerts";
+
+import "./regulation.scss";
+import RegulationMap from "./RegulationMap";
+
+export function Layout() {
+  // useAlerts(); // TODO: Wire up / for the popup alerts for loading/errors
+  return (
+    <DetailsPage>
+      <DetailsPage.Header>Overlay Landing Page</DetailsPage.Header>
+      <DetailsPage.Properties>
+        <RegulationProperties />
+      </DetailsPage.Properties>
+      <DetailsPage.Map>
+        <RegulationMap />
+      </DetailsPage.Map>
+      <DetailsPage.Tabs>
+        <RegulationTabs />
+      </DetailsPage.Tabs>
+    </DetailsPage>
+  );
+}

src/DashboardUI/src/components/details-page/regulation/Provider.tsx

@@ -0,0 +1,93 @@
+import { useParams } from "react-router-dom";
+import { createContext, FC, useContext, useState } from "react";
+import { UseQueryResult } from "react-query";
+import { FeatureCollection, GeoJsonProperties, Geometry } from "geojson";
+import {
+  useWaterRightSiteLocations,
+  useRegulationDetails,
+  useWaterRightInfoList,
+  useRegulatoryOverlayInfoList,
+} from "../../../hooks/queries";
+import {
+  RegulationDetails,
+  RegulatoryOverlayInfoListItem,
+  WaterRightInfoListItem,
+} from "@data-contracts";
+
+type Query<T> = Pick<
+  UseQueryResult<T, unknown>,
+  "data" | "isError" | "isLoading"
+>;
+
+const defaultQuery = { data: undefined, isError: false, isLoading: false };
+
+export interface HostData {
+  detailsQuery: Query<RegulationDetails>;
+  locationsQuery: Query<FeatureCollection<Geometry, GeoJsonProperties>>;
+  regulatoryOverlayInfoListQuery: Query<RegulatoryOverlayInfoListItem[]>;
+  waterRightInfoListQuery: Query<WaterRightInfoListItem[]>;
+}
+
+type ActiveTabType = "right" | "regulatory";
+
+interface RegulationDetailsPageContextState {
+  allocationUuid: string | undefined;
+  activeTab: ActiveTabType;
+  setActiveTab: (tab: ActiveTabType) => void;
+  hostData: HostData;
+}
+
+const defaultState: RegulationDetailsPageContextState = {
+  allocationUuid: undefined,
+  activeTab: "regulatory",
+  setActiveTab: () => {},
+  hostData: {
+    detailsQuery: defaultQuery,
+    locationsQuery: defaultQuery,
+    regulatoryOverlayInfoListQuery: defaultQuery,
+    waterRightInfoListQuery: defaultQuery,
+  },
+};
+
+const RegulationDetailsContext =
+  createContext<RegulationDetailsPageContextState>(defaultState);
+export const useRegulationDetailsContext = () =>
+  useContext(RegulationDetailsContext);
+
+export const RegulationDetailsProvider: FC = ({ children }) => {
+  const { id: areaUuid } = useParams();
+
+  const [activeTab, setActiveTab] = useState<ActiveTabType>(
+    defaultState.activeTab,
+  );
+
+  const detailsQuery = useRegulationDetails(areaUuid);
+  const regulationLocationsQuery = useWaterRightSiteLocations(areaUuid); // TODO: Create a hook for RegulatoryOverlay
+  const regulatoryOverlayInfoListQuery = useRegulatoryOverlayInfoList(
+    areaUuid,
+    {
+      enabled: activeTab === "regulatory",
+    },
+  );
+  const waterRightInfoListQuery = useWaterRightInfoList(areaUuid, {
+    enabled: activeTab === "right",
+  });
+
+  const filterContextProviderValue: RegulationDetailsPageContextState = {
+    allocationUuid: areaUuid,
+    activeTab,
+    setActiveTab,
+    hostData: {
+      detailsQuery: detailsQuery,
+      locationsQuery: regulationLocationsQuery,
+      regulatoryOverlayInfoListQuery: regulatoryOverlayInfoListQuery,
+      waterRightInfoListQuery: waterRightInfoListQuery,
+    },
+  };
+
+  return (
+    <RegulationDetailsContext.Provider value={filterContextProviderValue}>
+      {children}
+    </RegulationDetailsContext.Provider>
+  );
+};

src/DashboardUI/src/components/details-page/regulation/RegulationMap.tsx

@@ -0,0 +1,27 @@
+import useSiteDigestMapPopup from "../../../hooks/map-popups/useSiteDigestMapPopup";
+import DetailsMap from "../DetailsMap";
+import { useRegulationDetailsContext } from "./Provider";
+import MapProvider from "../../../contexts/MapProvider";
+import { useMapLegend } from "./hooks/useMapLegend";
+
+function RegulationMap() {
+  return (
+    <MapProvider>
+      <Layout />
+    </MapProvider>
+  );
+}
+
+function Layout() {
+  const {
+    hostData: { locationsQuery },
+  } = useRegulationDetailsContext();
+
+  useSiteDigestMapPopup();
+  useMapLegend();
+
+  if (locationsQuery.isLoading || !locationsQuery.data) return null;
+  return <DetailsMap mapData={locationsQuery.data} />;
+}
+
+export default RegulationMap;

src/DashboardUI/src/components/details-page/regulation/RegulationProperties.tsx

@@ -0,0 +1,99 @@
+import { Card, Col, Row } from "react-bootstrap";
+import Domain from "mdi-react/DomainIcon";
+import HexagonOutlineIcon from "mdi-react/HexagonOutlineIcon";
+
+import { PropertyValue } from "../PropertyValue";
+
+import { useRegulationDetailsContext } from "./Provider";
+
+function RegulationProperties() {
+  const {
+    hostData: {
+      detailsQuery: { data: regulationDetails },
+    },
+  } = useRegulationDetailsContext();
+
+  return (
+    <div>
+      {regulationDetails && (
+        <Row className="pt-2">
+          <Row className="pt-2">
+            <Col>
+              <Card className="regulation-card h-100 shadow-sm rounded-3">
+                <Card.Header>
+                  <HexagonOutlineIcon className="rotate-90" />
+                  <span>Reporting Area Information</span>
+                </Card.Header>
+                <Card.Body>
+                  <div className="d-flex p-2 flex-column">
+                    <PropertyValue
+                      label="WaDE Area Reporting UUID"
+                      value={regulationDetails.waDEAreaReportingUuid}
+                    />
+                    <PropertyValue
+                      label="Reporting Area Native ID"
+                      value={regulationDetails.reportingAreaNativeId}
+                    />
+                    <PropertyValue
+                      label="WaDE Reporting Area Name"
+                      value={regulationDetails.waDEReportingAreaName}
+                    />
+                    <PropertyValue
+                      label="WaDE Overlay Area Type"
+                      value={regulationDetails.waDEOverlayAreaType}
+                    />
+                    <PropertyValue
+                      label="Native Reporting Area Type"
+                      value={regulationDetails.nativeReportingAreaType}
+                    />
+                    <PropertyValue
+                      label="Reporting Area Name"
+                      value={regulationDetails.reportingAreaName}
+                    />
+                    <PropertyValue
+                      label="State"
+                      value={regulationDetails.reportingAreaState}
+                    />
+                    <PropertyValue
+                      label="Area Last Updated Date"
+                      value={regulationDetails.areaLastUpdated}
+                    />
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+          <Row className="pt-2">
+            <Col>
+              <Card className="regulation-card h-100 shadow-sm rounded-3">
+                <Card.Header>
+                  <Domain />
+                  <span>Managing Agency</span>
+                </Card.Header>
+                <Card.Body>
+                  <div className="d-flex p-2 flex-column">
+                    <PropertyValue
+                      label="Organization Name"
+                      value={regulationDetails.managingAgencyOrganizationName}
+                    />
+                    <PropertyValue
+                      label="State"
+                      value={regulationDetails.managingAgencyState}
+                    />
+                    <PropertyValue
+                      label="Website"
+                      value={regulationDetails.managingAgencyWebsite}
+                      isUrl={true}
+                    />
+                  </div>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Row>
+      )}
+    </div>
+  );
+}
+
+export default RegulationProperties;