ADE-200 Updates to the UI

frontend/src/common/utils/i18n/resources/en/report.json

@@ -49,9 +49,10 @@
     "filterBookmarked": "Bookmarked",
     "noBookmarksTitle": "No Bookmarked Reports",
     "noBookmarksMessage": "Bookmark reports to find them quickly here",
-    "noMatchesTitle": "No Matching Reports",
-    "noMatchesMessage": "No reports match your current filters. Try changing or clearing your filters.",
+    "noMatchesTitle": "No matching reports found",
+    "noMatchesMessage": "Try clearing or adjusting your filters to see available results.",
     "clearFilters": "Clear Filters",
+    "changeFilters": "Change Filters",
     "sortButton": "Sort reports",
     "filterButton": "Filter reports"
   },

frontend/src/common/utils/i18n/resources/es/report.json

@@ -49,9 +49,10 @@
     "filterBookmarked": "Guardados",
     "noBookmarksTitle": "No Hay Informes Guardados",
     "noBookmarksMessage": "Guarda informes como favoritos para encontrarlos rápidamente aquí",
-    "noMatchesTitle": "No Hay Informes Coincidentes",
-    "noMatchesMessage": "Ningún informe coincide con los filtros actuales. Intenta cambiar o eliminar los filtros.",
+    "noMatchesTitle": "No se encontraron informes coincidentes",
+    "noMatchesMessage": "Intente borrar o ajustar sus filtros para ver los resultados disponibles.",
     "clearFilters": "Eliminar Filtros",
+    "changeFilters": "Cambiar Filtros",
     "sortButton": "Ordenar informes",
     "filterButton": "Filtrar informes"
   },

frontend/src/common/utils/i18n/resources/fr/report.json

@@ -49,9 +49,10 @@
     "filterBookmarked": "Favoris",
     "noBookmarksTitle": "Aucun Rapport en Favoris",
     "noBookmarksMessage": "Marquez des rapports comme favoris pour les trouver rapidement ici",
-    "noMatchesTitle": "Aucun Rapport Correspondant",
-    "noMatchesMessage": "Aucun rapport ne correspond à vos filtres actuels. Essayez de modifier ou de supprimer vos filtres.",
+    "noMatchesTitle": "Aucun rapport correspondant trouvé",
+    "noMatchesMessage": "Essayez de supprimer ou d'ajuster vos filtres pour voir les résultats disponibles.",
     "clearFilters": "Effacer les Filtres",
+    "changeFilters": "Modifier les Filtres",
     "sortButton": "Trier les rapports",
     "filterButton": "Filtrer les rapports"
   },

frontend/src/pages/Reports/ReportsListPage.tsx

@@ -28,6 +28,7 @@ import sortSvg from 'assets/icons/sort.svg';
 import filterOutlineIcon from 'assets/icons/filter-outline.svg';
 import FilterPanel, { CategoryOption } from './components/FilterPanel/FilterPanel';
 import CategoryTag from './components/CategoryTag/CategoryTag';
+import ReportsFilterEmpty from './components/ReportsFilterEmpty/ReportsFilterEmpty';
 
 import './ReportsListPage.scss';
 
@@ -225,13 +226,11 @@ const ReportsListPage: React.FC = () => {
               <p>{t('list.noBookmarksMessage', { ns: 'report' })}</p>
             </div>
           ) : selectedCategories.length > 0 ? (
-            <div className="reports-list-page__no-matches">
-              <h3>{t('list.noMatchesTitle', { ns: 'report' })}</h3>
-              <p>{t('list.noMatchesMessage', { ns: 'report' })}</p>
-              <IonButton onClick={handleClearAllCategories}>
-                {t('list.clearFilters', { ns: 'report' })}
-              </IonButton>
-            </div>
+            <ReportsFilterEmpty
+              onChangeFilters={handleFilterClick}
+              onClearFilters={handleClearAllCategories}
+              hasSelectedFilters={selectedCategories.length > 0}
+            />
           ) : (
             <NoReportsMessage onUpload={handleUpload} onRetry={handleRetry} />
           )}
@@ -331,8 +330,8 @@ const ReportsListPage: React.FC = () => {
         isOpen={showFilterModal}
         onDidDismiss={() => setShowFilterModal(false)}
         className="reports-list-page__filter-modal"
-        initialBreakpoint={0.9}
-        breakpoints={[0, 0.9]}
+        initialBreakpoint={1}
+        breakpoints={[0, 0.25, 0.5, 0.75, 1]}
       >
         <FilterPanel
           categories={categories}

frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss

@@ -53,7 +53,7 @@
   }
 
   &__apply-button {
-    --background: #4355B9;
+    --background: #435FF0;
     --color: white;
     height: 48px;
     font-weight: 600;

frontend/src/pages/Reports/components/ReportsFilterEmpty/ReportsFilterEmpty.scss

@@ -0,0 +1,65 @@
+.reports-filter-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  height: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+
+  &__icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: #EFF2F9;
+    margin-bottom: 1.5rem;
+  }
+
+  &__icon {
+    font-size: 36px;
+    color: #9BA7BF;
+  }
+
+  &__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    color: var(--ion-color-dark);
+  }
+
+  &__message {
+    margin-bottom: 2rem;
+    color: var(--ion-color-medium);
+    line-height: 1.5;
+    font-size: 1rem;
+  }
+
+  &__buttons {
+    width: 100%;
+    max-width: 300px;
+    margin-top: 1rem;
+  }
+
+  &__button {
+    margin-bottom: 0.75rem;
+    --border-radius: 8px;
+    font-weight: 500;
+    font-size: 1rem;
+
+    &--primary {
+      --background: var(--ion-color-primary);
+      --color: var(--ion-color-primary-contrast);
+    }
+
+    &--secondary {
+      --background: transparent;
+      --color: var(--ion-color-primary);
+      --border-color: var(--ion-color-primary);
+    }
+  }
+}

frontend/src/pages/Reports/components/ReportsFilterEmpty/ReportsFilterEmpty.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { useTranslation } from 'react-i18next';
+import { searchOutline } from 'ionicons/icons';
+import './ReportsFilterEmpty.scss';
+
+interface ReportsFilterEmptyProps {
+  onChangeFilters: () => void;
+  onClearFilters: () => void;
+  showClearButton?: boolean;
+  hasSelectedFilters?: boolean;
+}
+
+/**
+ * Component to display when no reports match the current filter criteria
+ */
+const ReportsFilterEmpty: React.FC<ReportsFilterEmptyProps> = ({
+  onChangeFilters,
+  onClearFilters,
+  showClearButton = true,
+  hasSelectedFilters = true,
+}) => {
+  const { t } = useTranslation(['report', 'common']);
+
+  return (
+    <div className="reports-filter-empty">
+      <div className="reports-filter-empty__icon-container">
+        <IonIcon icon={searchOutline} className="reports-filter-empty__icon" />
+      </div>
+
+      <h3 className="reports-filter-empty__title">
+        {t('list.noMatchesTitle', { ns: 'report' })}
+      </h3>
+
+      <p className="reports-filter-empty__message">
+        {t('list.noMatchesMessage', { ns: 'report' })}
+      </p>
+
+      <div className="reports-filter-empty__buttons">
+        <IonButton
+          expand="block"
+          className="reports-filter-empty__button reports-filter-empty__button--primary"
+          onClick={onChangeFilters}
+        >
+          {t('list.changeFilters', { ns: 'report' })}
+        </IonButton>
+
+        {showClearButton && hasSelectedFilters && (
+          <IonButton
+            expand="block"
+            fill="outline"
+            className="reports-filter-empty__button reports-filter-empty__button--secondary"
+            onClick={onClearFilters}
+          >
+            {t('list.clearFilters', { ns: 'report' })}
+          </IonButton>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ReportsFilterEmpty;

frontend/src/pages/Reports/components/ReportsFilterEmpty/index.ts

@@ -0,0 +1 @@
+export { default } from './ReportsFilterEmpty';

frontend/src/types/custom.d.ts

@@ -0,0 +1,26 @@
+declare module '*.svg' {
+  import * as React from 'react';
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}

frontend/tsconfig.json

@@ -25,6 +25,6 @@
       "test/*": ["./src/test/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "src/types"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }