Refactor imports and improve code organization across multiple components and hooks

- Consolidated and reordered imports in various files for better readability and maintainability.
- Removed unused imports and ensured consistent import styles.
- Enhanced the structure of components by grouping related imports together.
- Updated the layout and organization of hooks to streamline functionality.
- Improved the overall code quality by following best practices in import management.

src/components/common/traffic-error-boundary.tsx

@@ -1,10 +1,10 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
-import { Box, Typography, Button, Alert, Collapse } from "@mui/material";
 import {
   ErrorOutlineRounded,
   RefreshRounded,
   BugReportRounded,
 } from "@mui/icons-material";
+import { Box, Typography, Button, Alert, Collapse } from "@mui/material";
+import React, { Component, ErrorInfo, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 interface Props {