[ADE-208] fixes for ADE-66

.husky/pre-commit

@@ -5,14 +5,20 @@ sh ./lizard.sh
 
 # Only run frontend lint if the directory exists
 if [ -d "frontend" ]; then
-  cd frontend && npm run lint
+  cd frontend
+  npx lint-staged
+  npm run lint
+  cd ..
 fi
 
 cd $project_root
 
-# Add backend linting
+# Add backend linting and formatting
 if [ -d "backend" ]; then
-  cd backend && npm run lint
+  cd backend
+  npx lint-staged
+  npm run lint
+  cd ..
 fi
 
 exit 0

backend/package.json

@@ -26,6 +26,11 @@
     "cdk:destroy": "dotenv -- npx cdk destroy",
     "cdk:synth": "dotenv -- npx cdk synth"
   },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --write"
+    ]
+  },
   "dependencies": {
     "@aws-sdk/client-bedrock": "^3.782.0",
     "@aws-sdk/client-bedrock-runtime": "^3.782.0",

frontend/package.json

@@ -28,8 +28,12 @@
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix",
+      "prettier --write",
       "vitest related --run"
     ],
+    "*.{js,jsx,css,scss,md,json}": [
+      "prettier --write"
+    ],
     "*.scss": [
       "stylelint --fix"
     ]

frontend/src/common/components/Icon/SvgIcon.scss

@@ -8,13 +8,15 @@
     max-width: 100%;
     height: auto;
     /* CSS filter to display SVGs in #ABBCCD color */
-    filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1013%) hue-rotate(178deg) brightness(89%) contrast(84%);
+    filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1013%) hue-rotate(178deg)
+      brightness(89%) contrast(84%);
   }
 
   &--active {
     img {
       /* The active pink color from the design - using precise filter values for #FD7BF4 */
-      filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%) hue-rotate(292deg) brightness(99%) contrast(98%);
+      filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%) hue-rotate(292deg)
+        brightness(99%) contrast(98%);
     }
   }
 }

frontend/src/common/components/Icon/SvgIcon.tsx

@@ -73,11 +73,7 @@ const SvgIcon = ({
 
   return (
     <IonText
-      className={classNames(
-        'ls-svg-icon',
-        { 'ls-svg-icon--active': active },
-        className
-      )}
+      className={classNames('ls-svg-icon', { 'ls-svg-icon--active': active }, className)}
       data-testid={testid}
       {...props}
     >

frontend/src/common/components/Modal/ConfirmationModal.scss

@@ -75,7 +75,7 @@
 
   // Handle the pull indicator
   &::part(handle) {
-    background: #D9D9D9;
+    background: #d9d9d9;
     width: 36px;
     height: 4px;
     border-radius: 2px;

frontend/src/common/components/Modal/ConfirmationModal.tsx

@@ -30,10 +30,8 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   testid = 'confirmation-modal',
 }) => {
   // Replace placeholder with actual item name if provided
-  const formattedMessage = itemName 
-    ? message.replace('{itemName}', `"${itemName}"`)
-    : message;
-
+  const formattedMessage = itemName ? message.replace('{itemName}', `"${itemName}"`) : message;
+
   return (
     <IonModal
       isOpen={isOpen}
@@ -43,11 +41,9 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
     >
       <div className="confirmation-modal__container">
         <h2 className="confirmation-modal__title">{title}</h2>
-
-        <p className="confirmation-modal__message">
-          {formattedMessage}
-        </p>
-
+
+        <p className="confirmation-modal__message">{formattedMessage}</p>
+
         <div className="confirmation-modal__actions">
           <IonButton
             expand="block"
@@ -58,7 +54,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           >
             {cancelText}
           </IonButton>
-          
+
           <IonButton
             expand="block"
             fill="outline"
@@ -74,4 +70,4 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   );
 };
 
-export default ConfirmationModal;
+export default ConfirmationModal;

frontend/src/common/components/Router/TabNavigation.scss

@@ -10,7 +10,7 @@
     padding-bottom: 0;
 
     &-button {
-      --color: #ABBCCD;
+      --color: #abbccd;
       --color-selected: #fd7bf4;
 
       /* Ensure consistent alignment across platforms */
@@ -21,7 +21,7 @@
       &-icon {
         margin: 0;
         font-size: 1.25rem;
-        color: #ABBCCD;
+        color: #abbccd;
       }
 
       &.tab-selected {
@@ -31,7 +31,8 @@
           /* Apply to SvgIcon component */
           &.ls-svg-icon img {
             /* Pink color #FD7BF4 using precise filter values */
-            filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%) hue-rotate(292deg) brightness(99%) contrast(98%);
+            filter: brightness(0) saturate(100%) invert(65%) sepia(82%) saturate(5793%)
+              hue-rotate(292deg) brightness(99%) contrast(98%);
           }
         }
       }

frontend/src/common/components/Router/__tests__/TabNavigation.test.tsx

@@ -231,19 +231,19 @@ vi.mock('../../Icon/SvgIcon', () => ({
 
 // Mock the SVG icons
 vi.mock('assets/icons/home.svg', () => ({
-  default: 'mocked-home-icon.svg'
+  default: 'mocked-home-icon.svg',
 }));
 vi.mock('assets/icons/reports.svg', () => ({
-  default: 'mocked-reports-icon.svg'
+  default: 'mocked-reports-icon.svg',
 }));
 vi.mock('assets/icons/upload.svg', () => ({
-  default: 'mocked-upload-icon.svg'
+  default: 'mocked-upload-icon.svg',
 }));
 vi.mock('assets/icons/chat.svg', () => ({
-  default: 'mocked-chat-icon.svg'
+  default: 'mocked-chat-icon.svg',
 }));
 vi.mock('assets/icons/profile.svg', () => ({
-  default: 'mocked-profile-icon.svg'
+  default: 'mocked-profile-icon.svg',
 }));
 
 // Mock the UploadModal component

frontend/src/common/components/Upload/UploadModal.tsx

@@ -190,7 +190,8 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
             <div className="upload-modal__file-details">
               <div className="upload-modal__filename">{file.name}</div>
               <div className="upload-modal__file-info">
-                {formatFileSize(file.size)} • {Math.ceil((1 - progress) * 10)} {t('upload.secondsLeft', { ns: 'common' })}
+                {formatFileSize(file.size)} • {Math.ceil((1 - progress) * 10)}{' '}
+                {t('upload.secondsLeft', { ns: 'common' })}
               </div>
               {/* Progress bar */}
               <IonProgressBar value={progress} className="upload-modal__progress" />

frontend/src/pages/Home/components/ReportItem/ReportItem.scss

@@ -13,13 +13,13 @@
   }
 
   &__status-bullet {
-      width: 8px;
-      height: 8px;
-      margin-top: 5px;
-      display: inline-block;
-      background-color: #fead7f;
-      border-radius: 50%;
-      vertical-align: middle;
+    width: 8px;
+    height: 8px;
+    margin-top: 5px;
+    display: inline-block;
+    background-color: #fead7f;
+    border-radius: 50%;
+    vertical-align: middle;
   }
 
   &__category-label {
@@ -51,15 +51,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     border-radius: 50%;
     transition: background-color 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 
     &--active {
-      background-color: #435FF0;
+      background-color: #435ff0;
       height: 34px;
-
     }
 
     &-icon {

frontend/src/pages/Home/components/ReportItem/ReportItem.tsx

@@ -85,10 +85,10 @@ const ReportItem: React.FC<ReportItemProps> = ({
     <div className="report-item" onClick={onClick}>
       {getCategoryIcon()}
       {status === 'UNREAD' && (
-          <div className="report-item__status-bullet">
-            <figure className="circle"></figure>
-          </div>
-        )}
+        <div className="report-item__status-bullet">
+          <figure className="circle"></figure>
+        </div>
+      )}
       <div className="report-item__content">
         <div className="report-item__category-label">
           {t(getCategoryTranslationKey(), { ns: 'report' })}

frontend/src/pages/Processing/ProcessingPage.scss

@@ -127,16 +127,16 @@
   }
 
   &__error-subheading {
-    font-size: 22px;
+    font-size: 20px;
     font-weight: 600;
     color: #1c1c1e;
     margin: 0 0 16px;
   }
 
   &__error-message {
-    font-size: 17px;
-    line-height: 24px;
-    color: #8e8e93;
+    font-size: 15px;
+    line-height: 22px;
+    color: #505055; // Changed from #8e8e93 to a darker shade
     margin: 0 auto 40px;
     max-width: 290px;
   }
@@ -146,11 +146,11 @@
     flex-direction: row;
     gap: 12px;
     width: 100%;
-    padding: 0 16px;
-    max-width: 400px;
+    padding: 0 8px; // Reduced side padding to make buttons wider
+    max-width: 450px; // Increased max-width from 400px
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 32px;
+    margin-bottom: 8px; // Further reduced from 20px to 8px
 
     ion-button {
       margin: 0;

frontend/src/pages/Processing/ProcessingPage.tsx

@@ -26,7 +26,6 @@ const ProcessingPage: React.FC = () => {
   const [processingError, setProcessingError] = useState<string | null>(null);
   const [errorHeading, setErrorHeading] = useState<string | null>(null);
   const statusCheckIntervalRef = useRef<number | null>(null);
-  const lastTriggeredTime = useRef<number | null>(null);
 
   // Get the location state which may contain the reportId (previously filePath)
   const location = useLocation<{ reportId: string }>();
@@ -127,17 +126,12 @@ const ProcessingPage: React.FC = () => {
     // Reset error state and try processing the same file again
     setError(null, null);
     setIsProcessing(true);
-    lastTriggeredTime.current = Date.now();
     processFile();
   };
 
   // Send the API request when component mounts
   useEffect(() => {
-    // check last triggered time to prevent multiple calls, if it's within 100ms then ignore
-    if ((lastTriggeredTime.current && lastTriggeredTime.current > Date.now() - 100) || !reportId) {
-      return;
-    }
-
+    clearStatusCheckInterval();
     execute();
 
     // Clean up the interval when the component unmounts