ORV2-2578 - FE: Staff Manage Queue List (#1627)

Co-authored-by: praju-aot <[email protected]> Co-authored-by: Praveen Raju <[email protected]> Co-authored-by: GlenAOT <[email protected]> Co-authored-by: zgong-gov <[email protected]>
bcgov · Oct 10, 2024 · 99a3b58 · 99a3b58
1 parent 82180c0
commit 99a3b58
Show file tree

Hide file tree

Showing 88 changed files with 2,375 additions and 891 deletions.
diff --git a/frontend/src/common/authentication/LoginRedirect.tsx b/frontend/src/common/authentication/LoginRedirect.tsx
@@ -18,15 +18,23 @@ import {
   useUserContext,
   useUserContextQuery,
 } from "../../features/manageProfile/apiManager/hooks";
+import { canViewApplicationQueue } from "../../features/queue/helpers/canViewApplicationQueue";
+import { getDefaultRequiredVal } from "../helpers/util";
 
 const navigateBCeID = (
   userContextData: BCeIDUserContextType,
 ): string | undefined => {
   const { associatedCompanies, pendingCompanies, migratedClient, user } =
     userContextData;
 
-  const isAssociatedSuspended = associatedCompanies?.find((company) => company?.isSuspended);
-  const isPendingSuspended = pendingCompanies?.find((company) => company?.isSuspended);
+  const isAssociatedSuspended = getDefaultRequiredVal(
+    [],
+    associatedCompanies,
+  ).find((company) => Boolean(company.isSuspended));
+
+  const isPendingSuspended = getDefaultRequiredVal([], pendingCompanies).find(
+    (company) => Boolean(company.isSuspended),
+  );
 
   // If the user does not exist
   if (!user?.userGUID) {
@@ -109,7 +117,10 @@ export const LoginRedirect = () => {
       } else if (userFromToken?.profile?.identity_provider === IDPS.IDIR) {
         const userContextData: Optional<IDIRUserContextType> =
           queryClient.getQueryData<IDIRUserContextType>(["userContext"]);
-        if (userContextData?.user?.userGUID) {
+        // only IDIR users with PC, SA, CTPO or TRAIN should redirect to STAFF_HOME
+        if (canViewApplicationQueue(userContextData?.user?.userRole)) {
+          navigate(IDIR_ROUTES.STAFF_HOME);
+        } else if (userContextData?.user?.userGUID) {
           navigate(IDIR_ROUTES.WELCOME);
         } else {
           navigate(ERROR_ROUTES.UNAUTHORIZED);

diff --git a/frontend/src/common/authentication/PermissionMatrix.ts b/frontend/src/common/authentication/PermissionMatrix.ts
@@ -312,7 +312,7 @@ const MANAGE_SETTINGS = {
   /**
    * View Credit Account tab - Non-Holder/user
    * Comment: Info box
-   * 
+   *
    * Todo: ORV2-2771 Implement info box.
    */
   VIEW_CREDIT_ACCOUNT_TAB_NON_HOLDER_OR_USER: {
@@ -410,8 +410,8 @@ const GLOBAL_SEARCH = {
  * Application review queue on staff home screen
  */
 const STAFF_HOME_SCREEN = {
-  VIEW_QUEUE: { allowedIDIRRoles: [PC, SA] },
-  MANAGE_QUEUE: { allowedIDIRRoles: [PC, SA] },
+  VIEW_QUEUE: { allowedIDIRRoles: [PC, SA, CTPO] },
+  MANAGE_QUEUE: { allowedIDIRRoles: [PC, SA, CTPO] },
 } as const;
 
 const MISCELLANEOUS = {

diff --git a/frontend/src/common/components/naviconsidebar/NavIconHomeButton.tsx b/frontend/src/common/components/naviconsidebar/NavIconHomeButton.tsx
@@ -5,6 +5,7 @@ import { IDIR_ROUTES } from "../../../routes/constants";
 import OnRouteBCContext from "../../authentication/OnRouteBCContext";
 import { NavButton } from "./NavButton";
 import { NAV_BUTTON_TYPES } from "./types/NavButtonType";
+import { canViewApplicationQueue } from "../../../features/queue/helpers/canViewApplicationQueue";
 
 /**
  * Displays the navigation icon for Home on the NavIconSideBar
@@ -13,14 +14,18 @@ export const NavIconHomeButton = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const isActive = pathname === IDIR_ROUTES.WELCOME;
-  const { clearCompanyContext } = useContext(OnRouteBCContext);
+  const { clearCompanyContext, idirUserDetails } = useContext(OnRouteBCContext);
 
   return (
     <NavButton
       type={NAV_BUTTON_TYPES.HOME}
       onClick={() => {
         clearCompanyContext?.();
-        navigate(IDIR_ROUTES.WELCOME);
+        navigate(
+          canViewApplicationQueue(idirUserDetails?.userRole)
+            ? IDIR_ROUTES.STAFF_HOME
+            : IDIR_ROUTES.WELCOME,
+        );
       }}
       isActive={isActive}
     />

diff --git a/frontend/src/common/types/common.ts b/frontend/src/common/types/common.ts
@@ -49,7 +49,7 @@ export interface PaginationOptions {
    * Max. value is 25.
    */
   take: number;
-};
+}
 
 /**
  * The sort directions.
@@ -75,7 +75,7 @@ export interface SortingConfig {
    * If not given a value, defaulted to false.
    */
   descending?: boolean;
-};
+}
 
 /**
  * Additional data filters that could be used for
@@ -86,16 +86,23 @@ export interface DataFilterOptions {
    * The search value entered by the user.
    */
   searchString?: string;
+  /**
+   * The column to which the searchString will be applied.
+   */
+  // TODO create a type for the searchColumn which provides "applicationNumber" & "plate" and ensure that a default value is passed where necessary
+  searchColumn?: string;
   /**
    * The sorting configuration selected by the user.
    */
   orderBy?: Array<SortingConfig>;
-};
+}
 
 /**
  * The options for pagination and filtering data.
  */
-export interface PaginationAndFilters extends PaginationOptions, DataFilterOptions {};
+export interface PaginationAndFilters
+  extends PaginationOptions,
+    DataFilterOptions {}
 
 /**
  * The metadata containing info about a page in the paginated response.
@@ -117,7 +124,7 @@ export interface PageMetadataInResponse extends PaginationOptions {
    * Is there a next page?
    */
   hasNextPage: boolean;
-};
+}
 
 /**
  * A generic paginated response structure for all the paginated responses from APIs.
@@ -131,7 +138,7 @@ export interface PaginatedResponse<T> {
    * Metadata about a page.
    */
   meta: PageMetadataInResponse;
-};
+}
 
 export type Optional<T> = T | undefined;
 export type RequiredOrNull<T> = T | null;

diff --git a/frontend/src/features/idir/StaffDashboard.tsx b/frontend/src/features/idir/StaffDashboard.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { ApplicationQueueLists } from "../queue/components/ApplicationQueueLists";
+import { ErrorFallback } from "../../common/pages/ErrorFallback";
+
+export const StaffDashboard = React.memo(() => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ApplicationQueueLists />
+    </ErrorBoundary>
+  );
+});
+
+StaffDashboard.displayName = "StaffDashboard";
diff --git a/frontend/src/features/idir/search/components/IDIRPermitSearchResults.tsx b/frontend/src/features/idir/search/components/IDIRPermitSearchResults.tsx
@@ -184,7 +184,7 @@ export const IDIRPermitSearchResults = memo(
                   permitNumber={row.original.permitNumber}
                   permitId={row.original.permitId}
                   userRole={idirUserDetails?.userRole}
-                  companyId={row.original.companyId?.toString()}
+                  companyId={row.original.companyId}
                 />
               </Box>
             );

diff --git a/frontend/src/features/idir/search/components/IDIRPermitSearchRowActions.tsx b/frontend/src/features/idir/search/components/IDIRPermitSearchRowActions.tsx
@@ -113,8 +113,7 @@ export const IDIRPermitSearchRowActions = ({
    * The role for the current user (eg. PPCCLERK or EOFFICER)
    */
   userRole?: string;
-
-  companyId?: string;
+  companyId: number;
 }) => {
   const [openResendDialog, setOpenResendDialog] = useState<boolean>(false);
   const navigate = useNavigate();
@@ -129,7 +128,11 @@ export const IDIRPermitSearchRowActions = ({
     if (selectedOption === PERMIT_ACTION_TYPES.RESEND) {
       setOpenResendDialog(() => true);
     } else if (selectedOption === PERMIT_ACTION_TYPES.VIEW_RECEIPT) {
-      viewReceiptPdf(permitId, () => navigate(routes.ERROR_ROUTES.DOCUMENT_UNAVAILABLE), companyId );
+      viewReceiptPdf(
+        companyId,
+        permitId,
+        () => navigate(routes.ERROR_ROUTES.DOCUMENT_UNAVAILABLE),
+      );
     } else if (selectedOption === PERMIT_ACTION_TYPES.VOID_REVOKE) {
       navigate(`${routes.PERMITS_ROUTES.VOID(companyId, permitId)}`);
     } else if (selectedOption === PERMIT_ACTION_TYPES.AMEND) {

diff --git a/frontend/src/features/idir/search/table/PermitSearchResultColumnDef.tsx b/frontend/src/features/idir/search/table/PermitSearchResultColumnDef.tsx
@@ -13,7 +13,9 @@ import {
   formatCellValuetoDatetime,
 } from "../../../../common/helpers/tableHelper";
 
-export const PermitSearchResultColumnDef = (onDocumentUnavailable: () => void): MRT_ColumnDef<PermitListItem>[] => [
+export const PermitSearchResultColumnDef = (
+  onDocumentUnavailable: () => void,
+): MRT_ColumnDef<PermitListItem>[] => [
   {
     accessorKey: "permitNumber",
     header: "Permit #",
@@ -27,7 +29,11 @@ export const PermitSearchResultColumnDef = (onDocumentUnavailable: () => void):
         <>
           <CustomActionLink
             onClick={() =>{
-              viewPermitPdf(permitId.toString(), () => onDocumentUnavailable(), companyId.toString());
+              viewPermitPdf(
+                companyId,
+                permitId,
+                () => onDocumentUnavailable(),
+              );
             }  
           }
           >

diff --git a/frontend/src/features/manageProfile/apiManager/hooks.ts b/frontend/src/features/manageProfile/apiManager/hooks.ts
@@ -8,8 +8,6 @@ import { IDPS } from "../../../common/types/idp";
 import { Nullable } from "../../../common/types/common";
 import { ERROR_ROUTES } from "../../../routes/constants";
 import { DeleteResponse } from "../types/manageProfile";
-import { getCompanyIdFromSession } from "../../../common/apiManager/httpRequestHandler";
-import { getDefaultRequiredVal } from "../../../common/helpers/util";
 import {
   FIVE_MINUTES,
   FOUR_MINUTES,
@@ -39,7 +37,7 @@ import {
 
 /**
  * Fetches company info of current user.
- * @returns company info of current user, or error if failed
+ * @returns Query object containing company info of current user
  */
 export const useCompanyInfoQuery = () => {
   return useQuery({
@@ -53,19 +51,15 @@ export const useCompanyInfoQuery = () => {
 
 /**
  * Fetches company info of specific company.
- * @returns company info or error if failed
+ * @param companyId Id of the company to get the info for
+ * @returns Query object containing company info
  */
 export const useCompanyInfoDetailsQuery = (
-  companyIdParam?: Nullable<string>,
+  companyId: number,
 ) => {
-  const companyId = getDefaultRequiredVal(
-    "",
-    getCompanyIdFromSession(),
-    companyIdParam,
-  );
   return useQuery({
     queryKey: ["companyInfo"],
-    queryFn: () => getCompanyInfoById(Number(companyId)),
+    queryFn: () => getCompanyInfoById(companyId),
     enabled: Boolean(companyId),
     refetchInterval: FIVE_MINUTES,
     refetchOnWindowFocus: false, // fixes issue where a query is run everytime the screen is brought to foreground

diff --git a/frontend/src/features/manageVehicles/apiManager/vehiclesAPI.tsx b/frontend/src/features/manageVehicles/apiManager/vehiclesAPI.tsx
@@ -30,7 +30,7 @@ const emptyUnitNumberToNull = (unitNumber?: Nullable<string>) => {
  * @return Response of all power units
  */
 export const getAllPowerUnits = async (
-  companyId: string,
+  companyId: number,
 ): Promise<PowerUnit[]> => {
   const url = VEHICLES_API.POWER_UNITS.ALL(companyId);
   return httpGETRequest(url).then((response) => response.data);
@@ -44,7 +44,7 @@ export const getAllPowerUnits = async (
  */
 export const getPowerUnit = async (
   powerUnitId: string,
-  companyId: string,
+  companyId: number,
 ): Promise<PowerUnit> => {
   const url = VEHICLES_API.POWER_UNITS.DETAIL(companyId, powerUnitId);
   return httpGETRequest(url).then((response) => response.data);
@@ -69,7 +69,7 @@ export const addPowerUnit = async ({
   companyId,
   powerUnit,
 }: {
-  companyId: string | number;
+  companyId: number;
   powerUnit: PowerUnitCreateData;
 }) => {
   const url = VEHICLES_API.POWER_UNITS.ADD(companyId);
@@ -95,7 +95,7 @@ export const updatePowerUnit = async ({
   powerUnit,
   powerUnitId,
 }: {
-  companyId: string;
+  companyId: number;
   powerUnit: PowerUnitUpdateData;
   powerUnitId: string;
 }) => {
@@ -114,7 +114,7 @@ export const updatePowerUnit = async ({
  * @param companyId Id of the company to fetch for.
  * @return Response of all trailers
  */
-export const getAllTrailers = async (companyId: string): Promise<Trailer[]> => {
+export const getAllTrailers = async (companyId: number): Promise<Trailer[]> => {
   const url = VEHICLES_API.TRAILERS.ALL(companyId);
   return httpGETRequest(url).then((response) => response.data);
 };
@@ -127,7 +127,7 @@ export const getAllTrailers = async (companyId: string): Promise<Trailer[]> => {
  */
 export const getTrailer = async (
   trailerId: string,
-  companyId: string,
+  companyId: number,
 ): Promise<Trailer> => {
   const url = VEHICLES_API.TRAILERS.DETAIL(companyId, trailerId);
   return httpGETRequest(url).then((response) => response.data);
@@ -152,7 +152,7 @@ export const addTrailer = async ({
   companyId,
   trailer,
 }: {
-  companyId: string;
+  companyId: number;
   trailer: TrailerCreateData;
 }) => {
   const url = VEHICLES_API.TRAILERS.ADD(companyId);
@@ -176,7 +176,7 @@ export const updateTrailer = async ({
   trailerId,
   trailer,
 }: {
-  companyId: string;
+  companyId: number;
   trailerId: string;
   trailer: TrailerUpdateData;
 }) => {
@@ -197,7 +197,7 @@ export const updateTrailer = async ({
  */
 export const deletePowerUnits = async (
   vehicleIds: string[],
-  companyId: string,
+  companyId: number,
 ) => {
   const url = VEHICLES_API.POWER_UNITS.DELETE(companyId);
   return await httpPOSTRequest(url, replaceEmptyValuesWithNull({ powerUnits: vehicleIds }));
@@ -211,7 +211,7 @@ export const deletePowerUnits = async (
  */
 export const deleteTrailers = async (
   vehicleIds: string[],
-  companyId: string,
+  companyId: number,
 ) => {
   const url = VEHICLES_API.TRAILERS.DELETE(companyId);
   return await httpPOSTRequest(url, replaceEmptyValuesWithNull({ trailers: vehicleIds }));

diff --git a/frontend/src/features/manageVehicles/components/dashboard/AddVehicleDashboard.tsx b/frontend/src/features/manageVehicles/components/dashboard/AddVehicleDashboard.tsx
@@ -12,13 +12,13 @@ import { TrailerForm } from "../form/TrailerForm";
 import { VEHICLES_ROUTES } from "../../../../routes/constants";
 import { BANNER_MESSAGES } from "../../../../common/constants/bannerMessages";
 import { VEHICLE_TYPES, VehicleType } from "../../types/Vehicle";
-import { getDefaultRequiredVal } from "../../../../common/helpers/util";
+import { applyWhenNotNullable } from "../../../../common/helpers/util";
 import { getCompanyIdFromSession } from "../../../../common/apiManager/httpRequestHandler";
 
 export const AddVehicleDashboard = React.memo(
   ({ vehicleType }: { vehicleType: VehicleType }) => {
     const navigate = useNavigate();
-    const companyId = getDefaultRequiredVal("", getCompanyIdFromSession());
+    const companyId: number = applyWhenNotNullable(id => Number(id), getCompanyIdFromSession(), 0);
     const isTrailer = vehicleType === VEHICLE_TYPES.TRAILER;
 
     const backToVehicleInventory = () => {

diff --git a/frontend/src/features/manageVehicles/components/dashboard/EditVehicleDashboard.tsx b/frontend/src/features/manageVehicles/components/dashboard/EditVehicleDashboard.tsx
@@ -31,7 +31,7 @@ export const EditVehicleDashboard = React.memo(
   ({ vehicleType }: { vehicleType: VehicleType }) => {
     const navigate = useNavigate();
     const { vehicleId } = useParams();
-    const companyId = getDefaultRequiredVal("", getCompanyIdFromSession());
+    const companyId: number = applyWhenNotNullable(id => Number(id), getCompanyIdFromSession(), 0);
     const isTrailer = vehicleType === VEHICLE_TYPES.TRAILER;
 
     const { data: vehicleToEdit, isError } = useVehicleByIdQuery(

diff --git a/frontend/src/features/manageVehicles/components/dashboard/ManageVehiclesDashboard.tsx b/frontend/src/features/manageVehicles/components/dashboard/ManageVehiclesDashboard.tsx
@@ -8,7 +8,7 @@ import { List } from "../list/List";
 import { DoesUserHaveClaimWithContext } from "../../../../common/authentication/util";
 import { CLAIMS } from "../../../../common/authentication/types";
 import { getCompanyIdFromSession } from "../../../../common/apiManager/httpRequestHandler";
-import { getDefaultRequiredVal } from "../../../../common/helpers/util";
+import { applyWhenNotNullable } from "../../../../common/helpers/util";
 import { VEHICLES_DASHBOARD_TABS } from "../../../../routes/constants";
 import { VEHICLE_TYPES } from "../../types/Vehicle";
 import { usePowerUnitsQuery } from "../../hooks/powerUnits";
@@ -35,7 +35,12 @@ const useTabIndexFromURL = (): number => {
  * React component to render the vehicle inventory
  */
 export const ManageVehiclesDashboard = memo(() => {
-  const companyId = getDefaultRequiredVal("", getCompanyIdFromSession());
+  const companyId: number = applyWhenNotNullable(
+    id => Number(id),
+    getCompanyIdFromSession(),
+    0,
+  );
+
   const staleTime = 5000;
   const powerUnitsQuery = usePowerUnitsQuery(companyId, staleTime);
   const trailersQuery = useTrailersQuery(companyId, staleTime);