added EmptyStateScreen.tsx to ReportsRoute.tsx

public/locales/en/translation.json

@@ -168,6 +168,10 @@
         },
         "ReportsRoute": {
             "title": "Reports",
+            "emptyState": {
+                "title": "Welcome to your Reports!",
+                "description": "Here you will find your email reports. Currently, you don't have any reports. Wait until you receive an email"
+            },
             "pageActions": {
                 "sort": {
                     "List": "List reports by their date",

src/route-widgets/ReportsRoute/EmptyStateScreen.tsx

@@ -0,0 +1,28 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+
+import {Grid, Typography} from "@mui/material"
+import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi"
+import Icon from "@mdi/react"
+
+export default function EmptyStateScreen(): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<Grid container spacing={4} direction="column" alignItems="center">
+			<Grid item>
+				<Typography variant="h6" component="h2">
+					{t("routes.ReportsRoute.emptyState.title")}
+				</Typography>
+			</Grid>
+			<Grid item>
+				<Icon path={mdiTextBoxMultiple} size={2.5} />,
+			</Grid>
+			<Grid item>
+				<Typography variant="body1">
+					{t("routes.ReportsRoute.emptyState.description")}
+				</Typography>
+			</Grid>
+		</Grid>
+	)
+}

src/routes/ReportsRoute.tsx

@@ -14,6 +14,7 @@ import {getReports} from "~/apis"
 import {WithEncryptionRequired} from "~/hocs"
 import {DecryptReport} from "~/components"
 import {createEnumMapFromTranslation} from "~/utils"
+import EmptyStateScreen from "~/route-widgets/ReportsRoute/EmptyStateScreen"
 import QueryResult from "~/components/QueryResult"
 import ReportInformationItem from "~/route-widgets/ReportsRoute/ReportInformationItem"
 import SimplePage from "~/components/SimplePage"
@@ -43,6 +44,7 @@ function ReportsRoute(): ReactElement {
 		<SimplePage
 			title="Reports"
 			pageOptionsActions={
+				(query.data?.items?.length || 0) > 0 && (
 					<TextField
 						value={sortingView}
 						onChange={event => setSortingView(event.target.value as SortingView)}
@@ -63,6 +65,7 @@ function ReportsRoute(): ReactElement {
 							</MenuItem>
 						))}
 					</TextField>
+				)
 			}
 		>
 			<QueryResult<PaginationResult<Report>> query={query}>
@@ -72,6 +75,10 @@ function ReportsRoute(): ReactElement {
 							{reports => (
 								<>
 									{(() => {
+										if (result.items.length === 0) {
+											return <EmptyStateScreen />
+										}
+
 										switch (sortingView) {
 											case SortingView.List:
 												return sortArray(