From ccd3c08c178a87576b764fba97e38d8640d094b6 Mon Sep 17 00:00:00 2001
From: John Eric <rimorin@gmail.com>
Date: Thu, 29 Aug 2024 08:34:44 +0800
Subject: [PATCH] feat: implement backend aggregates processor

---
 src/components/modal/inviteuser.tsx          |   4 +-
 src/components/modal/updatestatus.tsx        |   2 +
 src/components/modal/updateuser.tsx          |   2 +-
 src/components/navigation/aggrbadge.tsx      |  23 ++--
 src/components/navigation/territorylist.tsx  |  10 +-
 src/components/table/admin.tsx               |   6 +-
 src/components/table/privatetable.tsx        |   4 +-
 src/components/table/publictable.tsx         |   4 +-
 src/components/table/publisher.tsx           |   6 +-
 src/pages/admin.tsx                          | 111 +++++++------------
 src/pages/slip.tsx                           |  13 ++-
 src/utils/constants.tsx                      |   6 +-
 src/utils/helpers/getcompletedpercent.ts     |  25 -----
 src/utils/helpers/getterritorydetails.ts     |  47 ++++----
 src/utils/helpers/maxunitlength.ts           |  13 +--
 src/utils/helpers/processcompletedpercent.ts |  14 ---
 src/utils/helpers/processpostalno.ts         |   2 +
 src/utils/helpers/updateaddressdelta.ts      |  13 +++
 src/utils/interface.tsx                      |  22 ++--
 19 files changed, 143 insertions(+), 184 deletions(-)
 delete mode 100644 src/utils/helpers/getcompletedpercent.ts
 delete mode 100644 src/utils/helpers/processcompletedpercent.ts
 create mode 100644 src/utils/helpers/updateaddressdelta.ts

diff --git a/src/components/modal/inviteuser.tsx b/src/components/modal/inviteuser.tsx
index c05cd323..4bcf33f1 100644
--- a/src/components/modal/inviteuser.tsx
+++ b/src/components/modal/inviteuser.tsx
@@ -42,7 +42,7 @@ const InviteUser = NiceModal.create(
         }
         const getUserByEmail = httpsCallable(
           functions,
-          CLOUD_FUNCTIONS_CALLS.GET_USER_BY_EMAIL
+          `${import.meta.env.VITE_SYSTEM_ENVIRONMENT}-${CLOUD_FUNCTIONS_CALLS.GET_USER_BY_EMAIL}`
         );
         const user = await getUserByEmail({ email: userEmail });
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -61,7 +61,7 @@ const InviteUser = NiceModal.create(
         }
         const updateUserAccess = httpsCallable(
           functions,
-          CLOUD_FUNCTIONS_CALLS.UPDATE_USER_ACCESS
+          `${import.meta.env.VITE_SYSTEM_ENVIRONMENT}-${CLOUD_FUNCTIONS_CALLS.UPDATE_USER_ACCESS}`
         );
         await updateUserAccess({
           uid: userId,
diff --git a/src/components/modal/updatestatus.tsx b/src/components/modal/updatestatus.tsx
index 51ba903d..08225a19 100644
--- a/src/components/modal/updatestatus.tsx
+++ b/src/components/modal/updatestatus.tsx
@@ -47,6 +47,7 @@ import HelpButton from "../navigation/help";
 import ChangeAddressGeolocation from "./changegeolocation";
 import { getGenerativeModel } from "firebase/vertexai-preview";
 import { usePostHog } from "posthog-js/react";
+import updateAddressDelta from "../../utils/helpers/updateaddressdelta";
 
 const UpdateUnitStatus = NiceModal.create(
   ({
@@ -172,6 +173,7 @@ const UpdateUnitStatus = NiceModal.create(
         );
         const updatedStatusType = updateData.status as string;
         if (updatedStatusType !== status) {
+          await updateAddressDelta(congregation, postalCode);
           posthog?.capture(
             PH_STATUS_KEYS[updatedStatusType] || PH_STATUS_KEYS.DEFAULT,
             {
diff --git a/src/components/modal/updateuser.tsx b/src/components/modal/updateuser.tsx
index dcb4b98f..05cbd4df 100644
--- a/src/components/modal/updateuser.tsx
+++ b/src/components/modal/updateuser.tsx
@@ -36,7 +36,7 @@ const UpdateUser = NiceModal.create(
       try {
         const updateUserAccess = httpsCallable(
           functions,
-          CLOUD_FUNCTIONS_CALLS.UPDATE_USER_ACCESS
+          `${import.meta.env.VITE_SYSTEM_ENVIRONMENT}-${CLOUD_FUNCTIONS_CALLS.UPDATE_USER_ACCESS}`
         );
         await updateUserAccess({
           uid: uid,
diff --git a/src/components/navigation/aggrbadge.tsx b/src/components/navigation/aggrbadge.tsx
index 9f250604..cf9c83dd 100644
--- a/src/components/navigation/aggrbadge.tsx
+++ b/src/components/navigation/aggrbadge.tsx
@@ -1,9 +1,9 @@
 import { memo } from "react";
-import { Badge, Spinner } from "react-bootstrap";
-import { aggregateProp } from "../../utils/interface";
+import { Badge } from "react-bootstrap";
+import { aggregateBadgeProp } from "../../utils/interface";
 
 const AggregationBadge = memo(
-  ({ aggregate = 0, isDataFetched }: aggregateProp) => {
+  ({ aggregate = 0, width = "2.5rem" }: aggregateBadgeProp) => {
     let badgeStyle = "";
     let statusColor = "success";
     if (aggregate > 70 && aggregate <= 90) {
@@ -12,14 +12,15 @@ const AggregationBadge = memo(
     }
     if (aggregate > 90) statusColor = "danger";
     return (
-      <span style={{ marginRight: "0.25rem" }}>
-        {isDataFetched ? (
-          <Badge pill bg={statusColor} className={badgeStyle}>
-            {aggregate}%
-          </Badge>
-        ) : (
-          <Spinner as="span" animation="border" size="sm" aria-hidden="true" />
-        )}
+      <span style={{ margin: "0 0.25rem" }}>
+        <Badge
+          pill
+          bg={statusColor}
+          className={badgeStyle}
+          style={{ width: width }}
+        >
+          {aggregate}%
+        </Badge>
       </span>
     );
   }
diff --git a/src/components/navigation/territorylist.tsx b/src/components/navigation/territorylist.tsx
index 2e5281d7..ec059e59 100644
--- a/src/components/navigation/territorylist.tsx
+++ b/src/components/navigation/territorylist.tsx
@@ -2,6 +2,7 @@ import { memo } from "react";
 import { Offcanvas, ListGroup } from "react-bootstrap";
 import { TERRITORY_SELECTOR_VIEWPORT_HEIGHT } from "../../utils/constants";
 import { TerritoryListingProps } from "../../utils/interface";
+import AggregationBadge from "./aggrbadge";
 
 const TerritoryListing = memo(
   ({
@@ -36,8 +37,15 @@ const TerritoryListing = memo(
                   key={`list-group-item-${element.code}`}
                   eventKey={element.code}
                   active={selectedTerritory === element.code}
+                  className="d-flex justify-content-between align-items-start"
                 >
-                  {element.code} - {element.name}
+                  <>
+                    {element.code} - {element.name} ({element.aggregates})
+                  </>
+                  <AggregationBadge
+                    aggregate={element.aggregates}
+                    width="3rem"
+                  />
                 </ListGroup.Item>
               ))}
           </ListGroup>
diff --git a/src/components/table/admin.tsx b/src/components/table/admin.tsx
index 815a3ef8..12b6f589 100644
--- a/src/components/table/admin.tsx
+++ b/src/components/table/admin.tsx
@@ -15,7 +15,7 @@ const AdminTable = ({
   postalCode,
   floors,
   maxUnitNumberLength,
-  completedPercent,
+  aggregates,
   policy,
   adminUnitHeaderStyle,
   handleUnitNoUpdate,
@@ -30,7 +30,7 @@ const AdminTable = ({
         isAdmin={true}
         postalCode={postalCode}
         houses={floors[0]}
-        completedPercent={completedPercent}
+        aggregates={aggregates}
         handleHouseUpdate={handleUnitStatusUpdate}
         policy={policy}
       />
@@ -97,7 +97,7 @@ const AdminTable = ({
                 <td
                   className={`text-center align-middle inline-cell ${policy?.getUnitColor(
                     detailsElement,
-                    completedPercent.completedValue
+                    aggregates.value
                   )}`}
                   onClick={handleUnitStatusUpdate}
                   key={`${index}-${detailsElement.number}`}
diff --git a/src/components/table/privatetable.tsx b/src/components/table/privatetable.tsx
index 36ebc7bd..f55163c0 100644
--- a/src/components/table/privatetable.tsx
+++ b/src/components/table/privatetable.tsx
@@ -5,7 +5,7 @@ import UnitStatus from "./unit";
 const PrivateTerritoryTable = ({
   isAdmin,
   houses,
-  completedPercent,
+  aggregates,
   policy: hhpolicy,
   handleHouseUpdate
 }: territoryLandedProps) => (
@@ -39,7 +39,7 @@ const PrivateTerritoryTable = ({
                 <div
                   className={`landed-unit fluid-bolding fluid-text ${hhpolicy?.getUnitColor(
                     element,
-                    completedPercent.completedValue
+                    aggregates.value
                   )}`}
                   style={{ padding: "0.3rem 0" }}
                 >
diff --git a/src/components/table/publictable.tsx b/src/components/table/publictable.tsx
index 25a8ed92..f2fa03ca 100644
--- a/src/components/table/publictable.tsx
+++ b/src/components/table/publictable.tsx
@@ -7,7 +7,7 @@ const PublicTerritoryTable = ({
   postalCode,
   floors,
   maxUnitNumberLength,
-  completedPercent,
+  aggregates,
   policy: hhPolicy,
   handleUnitStatusUpdate
 }: territoryTableProps) => (
@@ -29,7 +29,7 @@ const PublicTerritoryTable = ({
                 <td
                   className={`text-center align-middle inline-cell ${hhPolicy?.getUnitColor(
                     element,
-                    completedPercent.completedValue
+                    aggregates.value
                   )}`}
                   onClick={handleUnitStatusUpdate}
                   data-floor={item.floor}
diff --git a/src/components/table/publisher.tsx b/src/components/table/publisher.tsx
index bc96f41e..f5e3f7ab 100644
--- a/src/components/table/publisher.tsx
+++ b/src/components/table/publisher.tsx
@@ -7,7 +7,7 @@ const PublisherTerritoryTable = ({
   postalCode,
   floors,
   maxUnitNumberLength,
-  completedPercent,
+  aggregates,
   policy: policy,
   territoryType,
   handleUnitStatusUpdate
@@ -19,7 +19,7 @@ const PublisherTerritoryTable = ({
         postalCode={postalCode}
         houses={floors[0]}
         policy={policy}
-        completedPercent={completedPercent}
+        aggregates={aggregates}
         handleHouseUpdate={handleUnitStatusUpdate}
       />
     );
@@ -29,7 +29,7 @@ const PublisherTerritoryTable = ({
       postalCode={postalCode}
       floors={floors}
       maxUnitNumberLength={maxUnitNumberLength}
-      completedPercent={completedPercent}
+      aggregates={aggregates}
       handleUnitStatusUpdate={handleUnitStatusUpdate}
       policy={policy}
     />
diff --git a/src/pages/admin.tsx b/src/pages/admin.tsx
index dc97bd0e..c2f0ea28 100644
--- a/src/pages/admin.tsx
+++ b/src/pages/admin.tsx
@@ -67,11 +67,9 @@ import errorHandler from "../utils/helpers/errorhandler";
 import ZeroPad from "../utils/helpers/zeropad";
 import assignmentMessage from "../utils/helpers/assignmentmsg";
 import getMaxUnitLength from "../utils/helpers/maxunitlength";
-import getCompletedPercent from "../utils/helpers/getcompletedpercent";
 import checkCongregationExpireHours from "../utils/helpers/checkcongexp";
 import SetPollerInterval from "../utils/helpers/pollinginterval";
 import pollingVoidFunction from "../utils/helpers/pollingvoid";
-import processCompletedPercentage from "../utils/helpers/processcompletedpercent";
 import checkCongregationMaxTries from "../utils/helpers/checkmaxtries";
 import TerritoryListing from "../components/navigation/territorylist";
 import UserListing from "../components/navigation/userlist";
@@ -113,6 +111,7 @@ import getCongregationDetails from "../utils/helpers/getcongdetails";
 import setLink from "../utils/helpers/setlink";
 import getTerritoryData from "../utils/helpers/getterritorydetails";
 import { usePostHog } from "posthog-js/react";
+import updateAddressDelta from "../utils/helpers/updateaddressdelta";
 
 const UnauthorizedPage = SuspenseComponent(
   lazy(() => import("../components/statics/unauth"))
@@ -189,11 +188,11 @@ function Admin({ user }: adminProps) {
   const [territories, setTerritories] = useState(
     new Map<string, territoryDetails>()
   );
-  const [sortedAddressList, setSortedAddressList] = useState<
-    Array<territoryDetails>
-  >([]);
+  const [sortedAddressList, setSortedAddressList] = useState<Array<string>>([]);
   const [selectedTerritoryCode, setSelectedTerritoryCode] = useState<string>();
   const [selectedTerritoryName, setSelectedTerritoryName] = useState<string>();
+  const [selectedTerritoryAggregates, setSelectedTerritoryAggregates] =
+    useState<number>(0);
   const [addressData, setAddressData] = useState(
     new Map<string, addressDetails>()
   );
@@ -247,7 +246,7 @@ function Admin({ user }: adminProps) {
   const getUsers = useCallback(async () => {
     const getCongregationUsers = httpsCallable(
       functions,
-      CLOUD_FUNCTIONS_CALLS.GET_CONGREGATION_USERS
+      `${import.meta.env.VITE_SYSTEM_ENVIRONMENT}-${CLOUD_FUNCTIONS_CALLS.GET_CONGREGATION_USERS}`
     );
     try {
       setIsShowingUserListing(true);
@@ -287,11 +286,13 @@ function Admin({ user }: adminProps) {
 
   const processSelectedTerritory = async (selectedTerritoryCode: string) => {
     try {
-      const { territoryAddsResult, territoryNameResult } =
+      const { territoryAddsResult, territoryNameResult, territoryAggregates } =
         await getTerritoryData(code, selectedTerritoryCode);
-
       setSelectedTerritoryCode(selectedTerritoryCode);
       setSelectedTerritoryName(territoryNameResult.val());
+      setSelectedTerritoryAggregates(
+        territoryAggregates.exists() ? territoryAggregates.val().value : 0
+      );
 
       refreshAddressState();
       unsubscribers.current = [] as Array<Unsubscribe>;
@@ -301,7 +302,7 @@ function Admin({ user }: adminProps) {
 
       const pollerId = SetPollerInterval();
 
-      await processDetailsListing(detailsListing, pollerId);
+      await processAddressListing(detailsListing, pollerId);
     } catch (error) {
       console.error("Error processing selected territory: ", error);
       errorHandler(error, rollbar);
@@ -309,40 +310,34 @@ function Admin({ user }: adminProps) {
   };
 
   const getDetailsListing = (territoryAddsResult: DataSnapshot) => {
-    const detailsListing = [] as Array<territoryDetails>;
+    const detailsListing = [] as Array<string>;
     territoryAddsResult.forEach((addElement: DataSnapshot) => {
-      detailsListing.push({
-        code: addElement.val(),
-        name: "",
-        addresses: ""
-      });
-      return false;
+      detailsListing.push(addElement.val());
     });
     return detailsListing;
   };
 
-  const processDetailsListing = async (
-    detailsListing: Array<territoryDetails>,
+  const processAddressListing = async (
+    addressCodeListing: Array<string>,
     pollerId: NodeJS.Timeout
   ) => {
-    for (const details of detailsListing) {
-      const postalCode = details.code;
-      setAccordionKeys((existingKeys) => [...existingKeys, postalCode]);
+    for (const addressCode of addressCodeListing) {
+      setAccordionKeys((existingKeys) => [...existingKeys, addressCode]);
       unsubscribers.current.push(
         onValue(
-          child(ref(database), `addresses/${code}/${postalCode}`),
+          child(ref(database), `addresses/${code}/${addressCode}`),
           async (snapshot) => {
             clearInterval(pollerId);
             if (snapshot.exists()) {
               const addressData = await getAddressData(
                 code,
-                postalCode,
+                addressCode,
                 snapshot.val()
               );
               setAddressData(
                 (existingAddresses) =>
                   new Map<string, addressDetails>(
-                    existingAddresses.set(postalCode, addressData)
+                    existingAddresses.set(addressCode, addressData)
                   )
               );
             }
@@ -374,7 +369,9 @@ function Admin({ user }: adminProps) {
       type: postalSnapshot.type,
       instructions: postalSnapshot.instructions,
       location: postalSnapshot.location,
-      coordinates: postalSnapshot.coordinates
+      coordinates: postalSnapshot.coordinates,
+      aggregates: postalSnapshot.aggregates,
+      maxUnitLength: getMaxUnitLength(floorData)
     };
   };
 
@@ -530,6 +527,7 @@ function Admin({ user }: adminProps) {
       });
       try {
         await pollingVoidFunction(() => update(ref(database), unitUpdates));
+        await updateAddressDelta(code, postalcode);
         posthog?.capture(`${lowerFloor ? "add_lower" : "add_upper"}_floor`, {
           mapId: postalcode
         });
@@ -589,6 +587,7 @@ function Admin({ user }: adminProps) {
       }
       try {
         await pollingVoidFunction(() => update(ref(database), unitUpdates));
+        await updateAddressDelta(code, postalcode);
         posthog?.capture("reset_block", {
           mapId: postalcode
         });
@@ -729,10 +728,13 @@ function Admin({ user }: adminProps) {
       for (const territory in congregationTerritories) {
         const name = congregationTerritories[territory]["name"];
         const addresses = congregationTerritories[territory]["addresses"];
+        const aggregates =
+          congregationTerritories[territory]["aggregates"]?.value || 0;
         territoryList.set(territory, {
           code: territory,
           name: name,
-          addresses: addresses
+          addresses: addresses,
+          aggregates: aggregates
         });
       }
       setTerritories(territoryList);
@@ -991,33 +993,6 @@ function Admin({ user }: adminProps) {
       });
   }, [code]);
 
-  const territoryAddressData = useMemo(() => {
-    const addressDataMap = new Map();
-    let totalPercent = 0;
-
-    addressData.forEach((address) => {
-      const postalCode = address.postalCode;
-      const maxUnitNumberLength = getMaxUnitLength(address.floors);
-      const completedPercent = getCompletedPercent(policy, address.floors);
-      addressDataMap.set(postalCode, {
-        length: maxUnitNumberLength,
-        percent: completedPercent
-      });
-      totalPercent += completedPercent.completedValue;
-    });
-
-    const { completedValue } = processCompletedPercentage(
-      totalPercent,
-      100 * addressData.size
-    );
-
-    return {
-      total: completedValue,
-      aggregates: addressDataMap,
-      data: addressData
-    };
-  }, [addressData, policy]);
-
   if (isLoading) return <Loader />;
   if (isUnauthorised) {
     posthog?.capture("unauthorised_access", { email: user.email });
@@ -1026,7 +1001,6 @@ function Admin({ user }: adminProps) {
     );
   }
 
-  const isDataCompletelyFetched = addressData.size === sortedAddressList.length;
   const isAdmin = userAccessLevel === USER_ACCESS_LEVELS.TERRITORY_SERVANT.CODE;
   const isReadonly = userAccessLevel === USER_ACCESS_LEVELS.READ_ONLY.CODE;
 
@@ -1094,8 +1068,7 @@ function Admin({ user }: adminProps) {
                   {selectedTerritoryCode ? (
                     <>
                       <AggregationBadge
-                        isDataFetched={isDataCompletelyFetched}
-                        aggregate={territoryAddressData.total}
+                        aggregate={selectedTerritoryAggregates}
                       />
                       {selectedTerritoryCode}
                     </>
@@ -1502,26 +1475,16 @@ function Admin({ user }: adminProps) {
         alwaysOpen={!isReadonly}
         flush
       >
-        {sortedAddressList.map((currentAdd) => {
-          const currentPostalcode = currentAdd.code;
-          const addressElement = territoryAddressData.data.get(currentAdd.code);
-
+        {sortedAddressList.map((currentPostalcode) => {
+          const addressElement = addressData.get(currentPostalcode);
           if (!addressElement)
             return <div key={`empty-div-${currentPostalcode}`}></div>;
-
           const currentPostalname = addressElement.name;
-          const aggregate =
-            territoryAddressData.aggregates.get(currentPostalcode);
-
-          if (!aggregate)
-            throw new Error(
-              `No aggregate found for postal code ${currentPostalcode}`
-            );
-
-          const maxUnitNumberLength = aggregate.length;
-          const completedPercent = aggregate.percent;
+          const completeValue = addressElement.aggregates.value;
+          const completedPercent = addressElement.aggregates.display;
           const assigneeCount = addressElement.assigneeDetailsList.length;
           const personalCount = addressElement.personalDetailsList.length;
+          const maxUnitNumberLength = addressElement.maxUnitLength;
           return (
             <Accordion.Item
               key={`accordion-${currentPostalcode}`}
@@ -1535,8 +1498,8 @@ function Admin({ user }: adminProps) {
               <Accordion.Body className="p-0">
                 <ProgressBar
                   style={{ borderRadius: 0 }}
-                  now={completedPercent.completedValue}
-                  label={completedPercent.completedDisplay}
+                  now={completeValue}
+                  label={completedPercent}
                 />
                 <div key={`div-${currentPostalcode}`}>
                   <Navbar
@@ -2055,7 +2018,7 @@ function Admin({ user }: adminProps) {
                     floors={addressElement.floors}
                     maxUnitNumberLength={maxUnitNumberLength}
                     policy={policy}
-                    completedPercent={completedPercent}
+                    aggregates={addressElement.aggregates}
                     postalCode={currentPostalcode}
                     territoryType={addressElement.type}
                     userAccessLevel={userAccessLevel}
diff --git a/src/pages/slip.tsx b/src/pages/slip.tsx
index 41f4c896..2aa8ad1d 100644
--- a/src/pages/slip.tsx
+++ b/src/pages/slip.tsx
@@ -3,6 +3,7 @@ import { ref, child, onValue, onChildRemoved, get } from "firebase/database";
 import { database } from "../firebase";
 import { Container, Nav, Navbar } from "react-bootstrap";
 import {
+  AggregatesProps,
   OptionProps,
   floorDetails,
   latlongInterface,
@@ -13,7 +14,6 @@ import { LinkSession, Policy } from "../utils/policies";
 import ZeroPad from "../utils/helpers/zeropad";
 import processAddressData from "../utils/helpers/processadddata";
 import getMaxUnitLength from "../utils/helpers/maxunitlength";
-import getCompletedPercent from "../utils/helpers/getcompletedpercent";
 import getOptions from "../utils/helpers/getcongoptions";
 import Legend from "../components/navigation/legend";
 import Loader from "../components/statics/loader";
@@ -76,6 +76,10 @@ const Map = () => {
   const [territoryType, setTerritoryType] = useState<number>(
     TERRITORY_TYPES.PUBLIC
   );
+  const [aggregate, setAggregate] = useState<AggregatesProps>({
+    value: 0,
+    display: ""
+  });
   const rollbar = useRollbar();
   const posthog = usePostHog();
 
@@ -192,6 +196,7 @@ const Map = () => {
             setCoordinates(
               postalSnapshot.coordinates || DEFAULT_COORDINATES.Singapore
             );
+            setAggregate(postalSnapshot.aggregates);
             processAddressData(code, postalcode, postalSnapshot.units)
               .then((data) => {
                 setFloors(data);
@@ -209,10 +214,6 @@ const Map = () => {
   }, [postalcode, code]);
 
   const maxUnitNumberLength = useMemo(() => getMaxUnitLength(floors), [floors]);
-  const completedPercent = useMemo(
-    () => getCompletedPercent(policy as Policy, floors),
-    [policy, floors]
-  );
   if (isLoading) return <Loader />;
   if (isLinkExpired) {
     document.title = "Ministry Mapper";
@@ -264,7 +265,7 @@ const Map = () => {
         floors={floors}
         maxUnitNumberLength={maxUnitNumberLength}
         policy={policy}
-        completedPercent={completedPercent}
+        aggregates={aggregate}
         territoryType={territoryType}
         handleUnitStatusUpdate={(event) => {
           const { floor, unitno } = event.currentTarget.dataset;
diff --git a/src/utils/constants.tsx b/src/utils/constants.tsx
index 02d75402..ef9a5643 100644
--- a/src/utils/constants.tsx
+++ b/src/utils/constants.tsx
@@ -76,7 +76,7 @@ const COUNTABLE_HOUSEHOLD_STATUS = [
 const MIN_START_FLOOR = 1;
 const MAX_TOP_FLOOR = 50;
 
-const TERRITORY_SELECTOR_VIEWPORT_HEIGHT = "75vh";
+const TERRITORY_SELECTOR_VIEWPORT_HEIGHT = "85vh";
 const LINK_SELECTOR_VIEWPORT_HEIGHT = "40vh";
 
 const TERRITORY_VIEW_WINDOW_WELCOME_TEXT =
@@ -164,8 +164,8 @@ const DEFAULT_COORDINATES = {
 };
 
 const CLOUD_FUNCTIONS_CALLS = {
-  UPDATE_USER_ACCESS: "updateUserAccessV2",
-  GET_CONGREGATION_USERS: "getCongregationUsersV2",
+  UPDATE_USER_ACCESS: "updateUserAccess",
+  GET_CONGREGATION_USERS: "getCongregationUsers",
   GET_USER_BY_EMAIL: "getUserByEmail"
 };
 
diff --git a/src/utils/helpers/getcompletedpercent.ts b/src/utils/helpers/getcompletedpercent.ts
deleted file mode 100644
index b5fd5199..00000000
--- a/src/utils/helpers/getcompletedpercent.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { floorDetails } from "../interface";
-import { Policy } from "../policies";
-import processCompletedPercentage from "./processcompletedpercent";
-
-const getCompletedPercent = (policy: Policy, floors: floorDetails[]) => {
-  if (!policy || !floors)
-    return {
-      completedValue: 0,
-      completedDisplay: ""
-    };
-  let totalUnits = 0;
-  let completedUnits = 0;
-
-  floors.forEach((element) => {
-    element.units.forEach((uElement) => {
-      const isCountable = policy.isCountable(uElement);
-      if (!isCountable) return;
-      totalUnits++;
-      if (policy.isCompleted(uElement)) completedUnits++;
-    });
-  });
-  return processCompletedPercentage(completedUnits, totalUnits);
-};
-
-export default getCompletedPercent;
diff --git a/src/utils/helpers/getterritorydetails.ts b/src/utils/helpers/getterritorydetails.ts
index 339c43b6..1817ce16 100644
--- a/src/utils/helpers/getterritorydetails.ts
+++ b/src/utils/helpers/getterritorydetails.ts
@@ -6,29 +6,38 @@ const getTerritoryData = async (
   code: string,
   selectedTerritoryCode: string
 ) => {
-  const [territoryAddsResult, territoryNameResult] = await Promise.all([
-    pollingQueryFunction(() =>
-      get(
-        query(
-          ref(
-            database,
-            `congregations/${code}/territories/${selectedTerritoryCode}/addresses`
-          ),
-          orderByValue()
+  const [territoryAddsResult, territoryNameResult, territoryAggregates] =
+    await Promise.all([
+      pollingQueryFunction(() =>
+        get(
+          query(
+            ref(
+              database,
+              `congregations/${code}/territories/${selectedTerritoryCode}/addresses`
+            ),
+            orderByValue()
+          )
         )
-      )
-    ),
-    pollingQueryFunction(() =>
-      get(
-        child(
-          ref(database),
-          `congregations/${code}/territories/${selectedTerritoryCode}/name`
+      ),
+      pollingQueryFunction(() =>
+        get(
+          child(
+            ref(database),
+            `congregations/${code}/territories/${selectedTerritoryCode}/name`
+          )
+        )
+      ),
+      pollingQueryFunction(() =>
+        get(
+          child(
+            ref(database),
+            `congregations/${code}/territories/${selectedTerritoryCode}/aggregates`
+          )
         )
       )
-    )
-  ]);
+    ]);
 
-  return { territoryAddsResult, territoryNameResult };
+  return { territoryAddsResult, territoryNameResult, territoryAggregates };
 };
 
 export default getTerritoryData;
diff --git a/src/utils/helpers/maxunitlength.ts b/src/utils/helpers/maxunitlength.ts
index c192a5f2..18269c5c 100644
--- a/src/utils/helpers/maxunitlength.ts
+++ b/src/utils/helpers/maxunitlength.ts
@@ -1,15 +1,12 @@
 import { floorDetails } from "../interface";
 
 const getMaxUnitLength = (floors: floorDetails[]) => {
-  let maxUnitNumberLength = 1;
-  if (floors.length === 0) return maxUnitNumberLength;
-  floors[0].units.forEach((element) => {
+  if (floors.length === 0 || floors[0].units.length === 0) return 1;
+
+  return floors[0].units.reduce((maxLength, element) => {
     const lengthOfUnitNumber = element.number.length;
-    if (maxUnitNumberLength < lengthOfUnitNumber) {
-      maxUnitNumberLength = lengthOfUnitNumber;
-    }
-  });
-  return maxUnitNumberLength;
+    return Math.max(maxLength, lengthOfUnitNumber);
+  }, 1);
 };
 
 export default getMaxUnitLength;
diff --git a/src/utils/helpers/processcompletedpercent.ts b/src/utils/helpers/processcompletedpercent.ts
deleted file mode 100644
index 3d8c44f4..00000000
--- a/src/utils/helpers/processcompletedpercent.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { MIN_PERCENTAGE_DISPLAY } from "../constants";
-
-const processCompletedPercentage = (
-  completedUnits: number,
-  totalUnits: number
-) => {
-  const completedValue =
-    totalUnits > 0 ? Math.round((completedUnits / totalUnits) * 100) : 0;
-  const completedDisplay =
-    completedValue > MIN_PERCENTAGE_DISPLAY ? `${completedValue}%` : "";
-  return { completedValue, completedDisplay };
-};
-
-export default processCompletedPercentage;
diff --git a/src/utils/helpers/processpostalno.ts b/src/utils/helpers/processpostalno.ts
index 73f5d60f..38ef547b 100644
--- a/src/utils/helpers/processpostalno.ts
+++ b/src/utils/helpers/processpostalno.ts
@@ -3,6 +3,7 @@ import { database } from "../../firebase";
 import { STATUS_CODES, NOT_HOME_STATUS_CODES } from "../constants";
 import { addressDetails, unitMaps } from "../interface";
 import pollingVoidFunction from "./pollingvoid";
+import updateAddressDelta from "./updateaddressdelta";
 
 const processPostalUnitNumber = async (
   congregationCode: string,
@@ -47,6 +48,7 @@ const processPostalUnitNumber = async (
     });
   }
   await pollingVoidFunction(() => update(ref(database), unitUpdates));
+  await updateAddressDelta(congregationCode, postalCode);
 };
 
 export default processPostalUnitNumber;
diff --git a/src/utils/helpers/updateaddressdelta.ts b/src/utils/helpers/updateaddressdelta.ts
new file mode 100644
index 00000000..1c660873
--- /dev/null
+++ b/src/utils/helpers/updateaddressdelta.ts
@@ -0,0 +1,13 @@
+import { ref, update, increment } from "firebase/database";
+import { database } from "../../firebase";
+import pollingVoidFunction from "./pollingvoid";
+
+async function updateAddressDelta(congregation: string, addressCode: string) {
+  await pollingVoidFunction(() =>
+    update(ref(database, `addresses/${congregation}/${addressCode}`), {
+      delta: increment(1)
+    })
+  );
+}
+
+export default updateAddressDelta;
diff --git a/src/utils/interface.tsx b/src/utils/interface.tsx
index 04139b02..d97771fe 100644
--- a/src/utils/interface.tsx
+++ b/src/utils/interface.tsx
@@ -88,6 +88,7 @@ export type adminProps = userInterface;
 
 export interface territoryDetails extends nameInterface {
   code: string;
+  aggregates: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   addresses: any;
 }
@@ -103,6 +104,8 @@ export interface addressDetails
   type: number;
   instructions: string;
   location?: string;
+  aggregates: AggregatesProps;
+  maxUnitLength: number;
 }
 
 export interface FormProps {
@@ -201,9 +204,9 @@ export interface AuthorizerProp {
   children: React.ReactElement;
 }
 
-export interface aggregateProp {
+export interface aggregateBadgeProp {
   aggregate?: number;
-  isDataFetched?: boolean;
+  width?: string;
 }
 
 export interface ExpiryButtonProp {
@@ -231,10 +234,7 @@ export interface territoryTableProps extends postalInterface {
   floors: floorDetails[];
   maxUnitNumberLength: number;
   policy: Policy | undefined;
-  completedPercent: {
-    completedValue: number;
-    completedDisplay: string;
-  };
+  aggregates: AggregatesProps;
   adminUnitHeaderStyle?: string;
   userAccessLevel?: number;
   territoryType?: number;
@@ -247,10 +247,7 @@ export interface territoryLandedProps extends postalInterface {
   isAdmin: boolean;
   houses: floorDetails;
   policy: Policy | undefined;
-  completedPercent: {
-    completedValue: number;
-    completedDisplay: string;
-  };
+  aggregates: AggregatesProps;
   adminUnitHeaderStyle?: string;
   userAccessLevel?: number;
   handleHouseUpdate: (event: React.MouseEvent<HTMLElement>) => void;
@@ -519,3 +516,8 @@ export interface UpdateUnitModalProps
 }
 
 export interface ShowExpiryModalProps extends ExpiryButtonProp {}
+
+export interface AggregatesProps {
+  value: number;
+  display: string;
+}