feat: implement backend aggregates processor

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,

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,
             {

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,

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>
     );
   }

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>

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}`}

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" }}
                 >

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}

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}
     />