Redirect employee to tab list for missing documents

When an email link points to an employee signature or approval document
that has been deleted or is no longer accessible to the user, the detail
pages rendered an infinite spinner. Redirect to the signatures/approvals
tab list instead, both when the document resolves to null and when it has
no accessible versions.

Signed-off-by: Sacha Al Himdani <sacha@probo.com>

apps/console/src/pages/organizations/documents/approve/DocumentApprovePage.tsx

@@ -38,7 +38,7 @@ import {
   useMutation,
   usePreloadedQuery,
 } from "react-relay";
-import { useNavigate } from "react-router";
+import { Navigate, useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
 import { useWindowSize } from "usehooks-ts";
 
@@ -142,6 +142,7 @@ export function DocumentApprovePage(props: {
   queryRef: PreloadedQuery<DocumentApprovePageQuery>;
 }) {
   const { queryRef } = props;
+  const organizationId = useOrganizationId();
   const data = usePreloadedQuery<DocumentApprovePageQuery>(
     documentApprovePageQuery,
     queryRef,
@@ -150,9 +151,10 @@ export function DocumentApprovePage(props: {
   const document = data.viewer.approvableDocument;
   if (!document) {
     return (
-      <div className="flex items-center justify-center h-full">
+      <Navigate
-        <Spinner />
+        to={`/organizations/${organizationId}/employee/approvals`}
-      </div>
+        replace
+      />
     );
   }
 
@@ -497,6 +499,15 @@ function DocumentApproveContent({
     };
   }, [selectedVersion?.id, exportPDF, toast, __]);
 
+  if (versions.length === 0) {
+    return (
+      <Navigate
+        to={`/organizations/${organizationId}/employee/approvals`}
+        replace
+      />
+    );
+  }
+
   return (
     <div className="fixed inset-0 top-12 bg-level-2 flex flex-col">
       <div className="grid lg:grid-cols-2 min-h-0 h-full">

apps/console/src/pages/organizations/employee/EmployeeDocumentSignaturePage.tsx

@@ -15,7 +15,7 @@
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
 import { useTranslate } from "@probo/i18n";
-import { Card, Spinner, useToast } from "@probo/ui";
+import { Card, useToast } from "@probo/ui";
 import { useEffect, useRef, useState } from "react";
 import {
   type PreloadedQuery,
@@ -24,7 +24,7 @@ import {
   usePreloadedQuery,
 } from "react-relay";
 import { graphql } from "react-relay";
-import { useNavigate } from "react-router";
+import { Navigate, useNavigate } from "react-router";
 import { useWindowSize } from "usehooks-ts";
 
 import type { EmployeeDocumentSignaturePageDocumentFragment$key } from "#/__generated__/core/EmployeeDocumentSignaturePageDocumentFragment.graphql";
@@ -94,6 +94,7 @@ export function EmployeeDocumentSignaturePage(props: {
   queryRef: PreloadedQuery<EmployeeDocumentSignaturePageQuery>;
 }) {
   const { queryRef } = props;
+  const organizationId = useOrganizationId();
   const { viewer } = usePreloadedQuery<EmployeeDocumentSignaturePageQuery>(
     employeeDocumentSignaturePageQuery,
     queryRef,
@@ -102,9 +103,10 @@ export function EmployeeDocumentSignaturePage(props: {
 
   if (!document) {
     return (
-      <div className="flex items-center justify-center h-full">
+      <Navigate
-        <Spinner />
+        to={`/organizations/${organizationId}/employee/signatures`}
-      </div>
+        replace
+      />
     );
   }
 
@@ -232,6 +234,15 @@ function DocumentSignatureContent({
     };
   }, [selectedVersion?.id, exportEmployeeDocumentVersionPDF, toast, __]);
 
+  if (versions.length === 0) {
+    return (
+      <Navigate
+        to={`/organizations/${organizationId}/employee/signatures`}
+        replace
+      />
+    );
+  }
+
   return (
     <div
       className="fixed bg-level-2 flex flex-col"