feat: implement responsive dashboard with accessibility improvements

frontend/.babelrc

@@ -1,4 +1,27 @@
 {
-  "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-modules-commonjs"]
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }],
+    ["@babel/preset-typescript", {
+      "isTSX": true,
+      "allExtensions": true
+    }],
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-modules-commonjs",
+    "@babel/plugin-transform-runtime"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "@babel/plugin-transform-modules-commonjs"
+      ]
+    }
+  }
 }

frontend/config-overrides.js

@@ -1,7 +1,9 @@
-const { override, addBabelPlugin, disableEsLint } = require('customize-cra');
+const { override, addBabelPlugin, disableEsLint, addBabelPreset } = require('customize-cra');
 
 module.exports = override(
   disableEsLint(),
+  addBabelPreset('@babel/preset-typescript'),
+  addBabelPreset('@babel/preset-react'),
   (config) => {
     config.resolve.modules.push(process.cwd() + '/node_modules');
 
@@ -10,6 +12,31 @@ module.exports = override(
       (plugin) => plugin.constructor.name !== 'ModuleScopePlugin'
     );
 
+    // Configure Jest
+    if (process.env.NODE_ENV === 'test') {
+      config.transform = {
+        '^.+\\.(ts|tsx)$': 'ts-jest',
+        '^.+\\.(js|jsx)$': 'babel-jest'
+      };
+      // Add Jest configuration
+      config.jest = {
+        ...config.jest,
+        testEnvironment: 'jsdom',
+        testEnvironmentOptions: {
+          url: 'http://localhost',
+          features: {
+            FetchAPI: true,
+            ProcessExternalResources: true,
+            SkipExternalResources: false
+          }
+        },
+        setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+        moduleNameMapper: {
+          '^@/(.*)$': '<rootDir>/src/$1'
+        }
+      };
+    }
+
     return config;
   }
 );

frontend/package.json

@@ -13,8 +13,6 @@
     "@chakra-ui/utils": "^2.2.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.2",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.7",
     "framer-motion": "^11.11.1",
@@ -63,19 +61,26 @@
     "@babel/plugin-transform-optional-chaining": "^7.25.7",
     "@babel/plugin-transform-private-methods": "^7.25.7",
     "@babel/plugin-transform-private-property-in-object": "^7.23.4",
+    "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.23.8",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/sheet": "^1.4.0",
     "@eslint/js": "^8.56.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
-    "@types/jest": "^29.5.13",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.8.0",
     "@typescript-eslint/parser": "^8.8.0",
     "ansi-styles": "^6.2.1",
@@ -96,6 +101,8 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "express": "^4.21.0",
     "has-flag": "^5.0.1",
+    "jest": "29",
+    "jest-environment-jsdom": "29",
     "nth-check": "^2.1.1",
     "postcss": "^8.4.47",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -114,6 +121,7 @@
     "tailwind-merge": "^2.5.4",
     "terser": "^5.36.0",
     "tough-cookie": "^4.1.3",
+    "ts-jest": "^29.2.5",
     "type-fest": "^0.17.0",
     "typescript": "^4.9.5",
     "webpack": "^5.89.0",