Added alerts table empty state

apps/backoffice-v2/src/common/components/organisms/Header/Header.Navbar.tsx

@@ -60,7 +60,7 @@ export const Navbar: FunctionComponent = () => {
                           href={childNavItem.href}
                           key={childNavItem.key}
                           className={ctw(
-                            `gap-x-1 px-1.5 py-2 text-xs capitalize text-[#8990AC] hover:bg-[#EBEEF9] hover:text-[#5E688E] active:bg-[#e0e4f6]`,
+                            `gap-x-1 px-1.5 py-2 text-xs capitalize hover:bg-[#EBEEF9] hover:text-[#5E688E] active:bg-[#e0e4f6] [&:not([aria-current=page])]:text-[#8990AC]`,
                             childNavItem.filterId
                               ? {
                                   'font-semibold text-[#20232E]':

apps/backoffice-v2/src/pages/Entities/Entities.page.tsx

@@ -3,12 +3,12 @@ import { ctw } from '@ballerine/ui';
 import { FunctionComponent } from 'react';
 import { Outlet } from 'react-router-dom';
 import { TAssignee } from '../../common/components/atoms/AssignDropdown/AssignDropdown';
-import { NoCasesSvg } from '../../common/components/atoms/icons';
 import { MotionScrollArea } from '../../common/components/molecules/MotionScrollArea/MotionScrollArea';
 import { Pagination } from '../../common/components/organisms/Pagination/Pagination';
 import { Case } from '../Entity/components/Case/Case';
 import { Cases } from './components/Cases/Cases';
 import { useEntities } from './hooks/useEntities/useEntities';
+import { NoCases } from '@/pages/Entities/components/NoCases/NoCases';
 
 export const Entities: FunctionComponent = () => {
   const {
@@ -90,40 +90,7 @@ export const Entities: FunctionComponent = () => {
           </Case.Content>
         </Case>
       )}
-      {Array.isArray(cases) && !cases.length && !isLoading ? (
-        <div className="mb-72 flex items-center justify-center border-l-[1px] p-4">
-          <div className="inline-flex flex-col  items-start gap-4 rounded-md border-[1px] border-[#CBD5E1] p-6">
-            <div className="flex w-[464px] items-center justify-center">
-              <NoCasesSvg width={96} height={81} />
-            </div>
-
-            <div className="flex w-[464px] flex-col items-start gap-2">
-              <h2 className="text-lg font-[600]">No cases found</h2>
-
-              <div className="text-sm leading-[20px]">
-                <p className="font-[400]">
-                  It looks like there aren&apos;t any cases in your queue right now.
-                </p>
-
-                <div className="mt-[20px] flex flex-col">
-                  <span className="font-[700]">What can you do now?</span>
-
-                  <ul className="list-disc pl-6 pr-2">
-                    <li>Make sure to refresh or check back often for new cases.</li>
-                    <li>Ensure that your filters aren&apos;t too narrow.</li>
-                    <li>
-                      If you suspect a technical issue, reach out to your technical team to diagnose
-                      the issue.
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <Outlet />
-      )}
+      {Array.isArray(cases) && !cases.length && !isLoading ? <NoCases /> : <Outlet />}
     </>
   );
 };

apps/backoffice-v2/src/pages/Entities/components/NoCases/NoCases.tsx

@@ -0,0 +1,37 @@
+import { FunctionComponent } from 'react';
+import { NoCasesSvg } from '@/common/components/atoms/icons';
+
+export const NoCases: FunctionComponent = () => {
+  return (
+    <div className="mb-72 flex items-center justify-center border-l-[1px] p-4">
+      <div className="inline-flex flex-col  items-start gap-4 rounded-md border-[1px] border-[#CBD5E1] p-6">
+        <div className="flex w-[464px] items-center justify-center">
+          <NoCasesSvg width={96} height={81} />
+        </div>
+
+        <div className="flex w-[464px] flex-col items-start gap-2">
+          <h2 className="text-lg font-[600]">No cases found</h2>
+
+          <div className="text-sm leading-[20px]">
+            <p className="font-[400]">
+              It looks like there aren&apos;t any cases in your queue right now.
+            </p>
+
+            <div className="mt-[20px] flex flex-col">
+              <span className="font-[700]">What can you do now?</span>
+
+              <ul className="list-disc pl-6 pr-2">
+                <li>Make sure to refresh or check back often for new cases.</li>
+                <li>Ensure that your filters aren&apos;t too narrow.</li>
+                <li>
+                  If you suspect a technical issue, reach out to your technical team to diagnose the
+                  issue.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page.tsx

@@ -3,10 +3,13 @@ import { AlertsHeader } from 'src/pages/TransactionMonitoringAlerts/components/A
 import { AlertsPagination } from '@/pages/TransactionMonitoringAlerts/AlertsPagination/AlertsPagination';
 import { useTransactionMonitoringAlertsLogic } from '@/pages/TransactionMonitoringAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic';
 import { Outlet } from 'react-router-dom';
+import { isNonEmptyArray } from '@ballerine/common';
+import { NoAlerts } from '@/pages/TransactionMonitoringAlerts/components/NoAlerts/NoAlerts';
 
 export const TransactionMonitoringAlerts = () => {
   const {
     alerts,
+    isLoadingAlerts,
     assignees,
     authenticatedUser,
     page,
@@ -28,7 +31,8 @@ export const TransactionMonitoringAlerts = () => {
           search={search}
           onSearch={onSearch}
         />
-        <AlertsTable data={alerts ?? []} />
+        {isNonEmptyArray(alerts) && <AlertsTable data={alerts ?? []} />}
+        {Array.isArray(alerts) && !alerts.length && !isLoadingAlerts && <NoAlerts />}
         <div className={`flex items-center gap-x-2`}>
           <AlertsPagination
             page={page}

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/NoAlerts/NoAlerts.tsx

@@ -0,0 +1,37 @@
+import { NoCasesSvg } from '@/common/components/atoms/icons';
+import { FunctionComponent } from 'react';
+
+export const NoAlerts: FunctionComponent = () => {
+  return (
+    <div className="flex items-center justify-center p-4 pb-72">
+      <div className="inline-flex flex-col  items-start gap-4 rounded-md border-[1px] border-[#CBD5E1] p-6">
+        <div className="flex w-[464px] items-center justify-center">
+          <NoCasesSvg width={96} height={81} />
+        </div>
+
+        <div className="flex w-[464px] flex-col items-start gap-2">
+          <h2 className="text-lg font-[600]">No alerts found</h2>
+
+          <div className="text-sm leading-[20px]">
+            <p className="font-[400]">
+              It looks like there aren&apos;t any alerts in your queue right now.
+            </p>
+
+            <div className="mt-[20px] flex flex-col">
+              <span className="font-[700]">What can you do now?</span>
+
+              <ul className="list-disc pl-6 pr-2">
+                <li>Make sure to refresh or check back often for new alerts.</li>
+                <li>Ensure that your filters aren&apos;t too narrow.</li>
+                <li>
+                  If you suspect a technical issue, reach out to your technical team to diagnose the
+                  issue.
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx

@@ -12,7 +12,7 @@ export const useTransactionMonitoringAlertsLogic = () => {
   const AlertsSearchSchema = getAlertsSearchSchema(session?.user?.id);
   const [{ filter, sortBy, sortDir, page, pageSize, search: searchValue }] =
     useZodSearchParams(AlertsSearchSchema);
-  const { data: alerts } = useAlertsQuery({
+  const { data: alerts, isLoading: isLoadingAlerts } = useAlertsQuery({
     filter,
     page,
     pageSize,
@@ -37,6 +37,7 @@ export const useTransactionMonitoringAlertsLogic = () => {
 
   return {
     alerts,
+    isLoadingAlerts,
     assignees: sortedAssignees,
     authenticatedUser: session?.user,
     page,

apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page.tsx

@@ -1,4 +1,4 @@
-import { AlertAnalysisSheet } from '@/pages/TransactionMonitoringAlerts/components/AlertAnalysisSheet';
+import { AlertAnalysisSheet } from 'src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisSheet';
 import { useTransactionsQuery } from '@/domains/transactions/hooks/queries/useTransactionsQuery/useTransactionsQuery';
 import { useSerializedSearchParams } from '@/common/hooks/useSerializedSearchParams/useSerializedSearchParams';
 import { useNavigateBack } from '@/common/hooks/useNavigateBack/useNavigateBack';

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertAnalysisSheet/AlertAnalysisSheet.tsx → apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisSheet/AlertAnalysisSheet.tsx

@@ -1,6 +1,6 @@
 import { SheetContent } from '@/common/components/atoms/Sheet';
 import { Sheet } from '@/common/components/atoms/Sheet/Sheet';
-import { AlertAnalysisTable } from '@/pages/TransactionMonitoringAlerts/components/AlertAnalysisSheet/components/AlertAnalysisTable';
+import { AlertAnalysisTable } from 'src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisTable';
 import { FunctionComponent } from 'react';
 import { TTransactionsList } from '@/domains/transactions/fetchers';
 
@@ -29,7 +29,7 @@ export const AlertAnalysisSheet: FunctionComponent<IAlertAnalysisProps> = ({
             </div>
           </div>
           <div>
-            <AlertAnalysisTable transactions={transactions} />
+            <AlertAnalysisTable transactions={transactions ?? []} />
           </div>
         </div>
       </SheetContent>

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertAnalysisSheet/components/AlertAnalysisTable/AlertAnalysisTable.tsx → apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisTable/AlertAnalysisTable.tsx

@@ -19,15 +19,15 @@ export const AlertAnalysisTable: FunctionComponent<{
 }> = ({ transactions }) => {
   const table = useReactTable({
     columns,
-    data: transactions ?? [],
+    data: transactions,
     getCoreRowModel: getCoreRowModel(),
     enableSortingRemoval: false,
     enableSorting: false,
   });
 
   return (
     <div className="d-full relative overflow-auto rounded-md border bg-white shadow">
-      <ScrollArea orientation="both" className="h-[295px]">
+      <ScrollArea orientation="both" className="h-[47vh]">
         <Table>
           <TableHeader className="border-0">
             {table.getHeaderGroups().map(({ id, headers }) => {