feat: display number of rows in routing form reporting (#17334)

* add rows and row to english common.json

* feat: display number of rows in routing form reporting

apps/web/public/static/locales/en/common.json

@@ -2699,5 +2699,7 @@
   "confirm_reassign_unavailable": "Manual Reassign to unavailable host",
   "reassign_unavailable_team_member_description": "Are you sure you want to reassign this booking to an unavailable host?",
   "yes_reassign": "Yes, reassign",
+  "row": "row",
+  "rows": "rows",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/app-store/routing-forms/pages/reporting/[...appPages].tsx

@@ -61,9 +61,15 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
     return <div>Error loading report {error?.message} </div>;
   }
   headers.current = (data?.pages && data?.pages[0]?.headers) || headers.current;
+  const numberOfRows = data?.pages.reduce((total, page) => total + (page.responses?.length || 0), 0);
 
   return (
     <div className="w-full max-w-[2000px] overflow-x-scroll">
+      {!isPending && (
+        <div className="text-default text-md mx-4 mb-2">
+          {`${numberOfRows} ` + (numberOfRows === 1 ? t("row") : t("rows"))}
+        </div>
+      )}
       <table
         data-testid="reporting-table"
         className="border-default bg-subtle mx-3 mb-4 table-fixed border-separate border-spacing-0 overflow-hidden rounded-md border">