[WIFI-11223] Migrating to prov-ui style

Signed-off-by: Charles <charles.bourque96@gmail.com>

src/App.tsx

@@ -2,10 +2,10 @@ import React, { Suspense } from 'react';
 import { Spinner } from '@chakra-ui/react';
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { HashRouter } from 'react-router-dom';
-import Router from 'router';
 import { AuthProvider } from 'contexts/AuthProvider';
-import { ProvisioningSocketProvider } from 'contexts/ProvisioningSocketProvider';
 import { ControllerSocketProvider } from 'contexts/ControllerSocketProvider';
+import { ProvisioningSocketProvider } from 'contexts/ProvisioningSocketProvider';
+import Router from 'router';
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/components/Buttons/DeviceActionDropdown/RebootButton.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { MenuItem, useToast } from '@chakra-ui/react';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { GatewayDevice } from 'models/Device';
 import { useControllerStore } from 'contexts/ControllerSocketProvider/useStore';
 import { useRebootDevice } from 'hooks/Network/Devices';
 import { useMutationResult } from 'hooks/useMutationResult';
+import { GatewayDevice } from 'models/Device';
 
 type Props = {
   device: GatewayDevice;

src/components/Buttons/WarningButton/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ThemeProps } from 'models/Theme';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { Warning } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
+import { ThemeProps } from 'models/Theme';
 
 export interface WarningButtonProps extends ThemeProps {
   onClick: () => void;

src/components/Containers/GraphStatDisplay/index.tsx

@@ -3,8 +3,8 @@ import { Box, Heading, IconButton, Spacer, Tooltip, useDisclosure } from '@chakr
 import { ArrowsOut, Info } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../Card';
-import { CardHeader } from '../Card/CardHeader';
 import { CardBody } from '../Card/CardBody';
+import { CardHeader } from '../Card/CardHeader';
 import { Modal } from 'components/Modals/Modal';
 
 type Props = {

src/components/DataTables/SortableDataTable/index.tsx

@@ -39,9 +39,9 @@ import {
   TableInstance,
 } from 'react-table';
 import { v4 as uuid } from 'uuid';
-import { LoadingOverlay } from 'components/LoadingOverlay';
 import SortIcon from './SortIcon';
 import { isColumnSorted, isSortedDesc, onSortClick } from './utils';
+import { LoadingOverlay } from 'components/LoadingOverlay';
 import { Column, PageInfo, SortInfo } from 'models/Table';
 
 interface Props {

src/components/Form/Fields/NumberField/index.tsx

@@ -1,7 +1,7 @@
-import { useFastField } from 'hooks/useFastField';
-import { FieldProps } from 'models/Form';
 import React, { useCallback } from 'react';
 import Field from './NumberInput';
+import { useFastField } from 'hooks/useFastField';
+import { FieldProps } from 'models/Form';
 
 const parseToInt = (val: string, acceptEmptyValue: boolean) => {
   if (acceptEmptyValue && val === '') return undefined;

src/components/Form/Fields/PortRangeField/index.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { LayoutProps } from '@chakra-ui/react';
 import Input from './Input';
-import { FieldProps } from 'models/Form';
 import { useFastField } from 'hooks/useFastField';
+import { FieldProps } from 'models/Form';
 
 const parseToInt = (val: string, acceptEmptyValue: boolean) => {
   if (acceptEmptyValue && val === '') return undefined;

src/components/Form/Fields/SelectField/index.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import { SelectInput } from './FastSelectInput';
-import { FormFieldProps } from 'models/FormField';
 import { useFastField } from 'hooks/useFastField';
+import { FormFieldProps } from 'models/FormField';
 
 export interface SelectFieldProps extends FormFieldProps {
   options: { label: string; value: string | number }[];

src/components/Form/Fields/StringField/index.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { LayoutProps } from '@chakra-ui/react';
 import { StringInput } from './StringInput';
-import { FieldProps } from 'models/Form';
 import { useFastField } from 'hooks/useFastField';
+import { FieldProps } from 'models/Form';
 
 export interface StringFieldProps extends FieldProps, LayoutProps {
   hideButton?: boolean;

src/components/Form/Fields/ToggleField/FastToggleInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { FormControl, FormErrorMessage, FormLabel, Switch } from '@chakra-ui/react';
 import { ConfigurationFieldExplanation } from '../../ConfigurationFieldExplanation';
 import { FieldInputProps } from 'models/Form';
-import { FormControl, FormErrorMessage, FormLabel, Switch } from '@chakra-ui/react';
 
 interface Props extends FieldInputProps<boolean> {
   element?: React.ReactNode;

src/components/Form/Fields/ToggleField/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import Field from './FastToggleInput';
-import { FieldProps } from 'models/Form';
 import { useFastField } from 'hooks/useFastField';
+import { FieldProps } from 'models/Form';
 
 export interface ToggleFieldProps extends FieldProps {
   falseIsUndefined?: boolean;

src/components/Modals/FactoryResetModal/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useBoolean, Center, Spinner, Alert, FormControl, FormLabel, Switch, Button } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useFactoryReset } from 'hooks/Network/Devices';
 import { Modal } from '../Modal';
+import { useFactoryReset } from 'hooks/Network/Devices';
 import { ModalProps } from 'models/Modal';
 
 interface Props {

src/components/Modals/FirmwareUpgradeModal/FirmwareList.tsx

@@ -2,9 +2,9 @@ import React, { useMemo } from 'react';
 import { Box, Button, Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import { Firmware } from 'models/Firmware';
 import { compactDate } from 'helpers/dateFormatting';
 import { bytesString } from 'helpers/stringHelper';
+import { Firmware } from 'models/Firmware';
 
 interface Props {
   firmware: Firmware[];

src/components/Modals/FirmwareUpgradeModal/index.tsx

@@ -13,14 +13,14 @@ import {
   Heading,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { CloseButton } from 'components/Buttons/CloseButton';
-import { ModalHeader } from 'components/Containers/Modal/ModalHeader';
 import ConfirmIgnoreCommand from '../ConfirmIgnoreCommand';
 import FirmwareList from './FirmwareList';
-import { ModalProps } from 'models/Modal';
+import { CloseButton } from 'components/Buttons/CloseButton';
+import { ModalHeader } from 'components/Containers/Modal/ModalHeader';
 import { useGetDevice } from 'hooks/Network/Devices';
 import { useGetAvailableFirmware, useUpdateDeviceFirmware } from 'hooks/Network/Firmware';
 import useCommandModal from 'hooks/useCommandModal';
+import { ModalProps } from 'models/Modal';
 
 export type FirmwareUpgradeModalProps = {
   modalProps: ModalProps;

src/components/Modals/Modal/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HStack, Modal as ChakraModal, ModalBody, ModalContent, ModalOverlay } from '@chakra-ui/react';
-import { CloseButton } from 'components/Buttons/CloseButton';
 import { ModalHeader } from '../GenericModal/ModalHeader';
+import { CloseButton } from 'components/Buttons/CloseButton';
 
 export type ModalProps = {
   isOpen: boolean;

src/components/Modals/TelemetryModal/index.tsx

@@ -23,8 +23,8 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Modal } from '../Modal';
-import { useTelemetry } from 'hooks/Network/Telemetry';
 import { lowercaseFirstLetter } from 'helpers/stringHelper';
+import { useTelemetry } from 'hooks/Network/Telemetry';
 
 export type TelemetryModalProps = {
   serialNumber: string;

src/components/Modals/WifiScanModal/Form.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { SelectField } from '../../Form/Fields/SelectField';
 import { ToggleField } from '../../Form/Fields/ToggleField';
-import { ModalProps } from 'models/Modal';
 import { WifiScanCommand } from 'models/Device';
+import { ModalProps } from 'models/Modal';
 
 const defaultValues: WifiScanCommand = {
   activeScan: false,

src/components/Modals/WifiScanModal/ResultDisplay.tsx

@@ -3,8 +3,8 @@ import { Alert, Heading, SimpleGrid } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import ResultCard from './ResultCard';
-import { DeviceScanResult, ScanChannel, WifiScanResult } from 'models/Device';
 import { parseDbm } from 'helpers/stringHelper';
+import { DeviceScanResult, ScanChannel, WifiScanResult } from 'models/Device';
 
 interface Props {
   results: WifiScanResult;

src/components/Modals/WifiScanModal/index.tsx

@@ -3,18 +3,18 @@ import { Modal, ModalOverlay, ModalContent, ModalBody, Center, Spinner } from '@
 import { ArrowLeft, Download, Gauge } from 'phosphor-react';
 import { CSVLink } from 'react-csv';
 import { useTranslation } from 'react-i18next';
-import { CloseButton } from 'components/Buttons/CloseButton';
-import { ResponsiveButton } from 'components/Buttons/ResponsiveButton';
-import { ModalHeader } from 'components/Containers/Modal/ModalHeader';
 import ConfirmIgnoreCommand from '../ConfirmIgnoreCommand';
 import WifiScanForm from './Form';
 import WifiScanResultDisplay from './ResultDisplay';
-import { DeviceScanResult, WifiScanCommand } from 'models/Device';
+import { CloseButton } from 'components/Buttons/CloseButton';
+import { ResponsiveButton } from 'components/Buttons/ResponsiveButton';
+import { ModalHeader } from 'components/Containers/Modal/ModalHeader';
+import { dateForFilename } from 'helpers/dateFormatting';
 import { useWifiScanDevice } from 'hooks/Network/Devices';
 import useCommandModal from 'hooks/useCommandModal';
 import { useFormRef } from 'hooks/useFormRef';
+import { DeviceScanResult, WifiScanCommand } from 'models/Device';
 import { ModalProps } from 'models/Modal';
-import { dateForFilename } from 'helpers/dateFormatting';
 
 export type WifiScanModalProps = {
   modalProps: ModalProps;

src/components/TableCells/DataCell/index.tsx

@@ -1,5 +1,5 @@
-import { bytesString } from 'helpers/stringHelper';
 import React, { useMemo } from 'react';
+import { bytesString } from 'helpers/stringHelper';
 
 const DataCell: React.FC<{ bytes?: number }> = ({ bytes }) => {
   const data = useMemo(() => {

src/contexts/AuthProvider/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { AuthProviderProps, AuthProviderReturn, useGetConfigurationDescriptions } from './utils';
 import {
   axiosAnalytics,
   axiosFms,
@@ -20,7 +21,6 @@ import {
 import { useGetEndpoints } from 'hooks/Network/Endpoints';
 import { Endpoint } from 'models/Endpoint';
 import { Preference } from 'models/Preference';
-import { AuthProviderProps, AuthProviderReturn, useGetConfigurationDescriptions } from './utils';
 
 const AuthContext = React.createContext({} as AuthProviderReturn);
 

src/contexts/ProvisioningSocketProvider/hooks/Commands/useDeviceSearch.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import debounce from 'helpers/debounce';
 import useWebSocketCommand from './useWebSocketCommand';
 import { ProviderCommandResponse } from 'contexts/ProvisioningSocketProvider/utils';
+import debounce from 'helpers/debounce';
 
 export type UseDeviceSearchProps = {
   minLength?: number;

src/hooks/Network/Account.ts

@@ -4,10 +4,10 @@ import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
-import { axiosSec } from 'constants/axiosInstances';
-import { Preference } from 'models/Preference';
 import { User } from '../../models/User';
+import { axiosSec } from 'constants/axiosInstances';
 import { Note } from 'models/Note';
+import { Preference } from 'models/Preference';
 
 export const useUpdatePreferences = () => {
   const queryClient = useQueryClient();

src/hooks/Network/DeviceTypes.ts

@@ -1,5 +1,5 @@
-import { axiosFms } from 'constants/axiosInstances';
 import { useQuery } from 'react-query';
+import { axiosFms } from 'constants/axiosInstances';
 
 const useGetDeviceTypes = () =>
   useQuery(['get-device-types'], () => axiosFms.get('/firmwares?deviceSet=true').then(({ data }) => data.deviceTypes), {

src/hooks/Network/Devices.ts

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
 import { axiosGw } from 'constants/axiosInstances';
-import { DeviceRttyApiResponse, GatewayDevice, WifiScanCommand, WifiScanResult } from 'models/Device';
 import { useAuth } from 'contexts/AuthProvider';
 import { useEndpointStatus } from 'hooks/useEndpointStatus';
+import { DeviceRttyApiResponse, GatewayDevice, WifiScanCommand, WifiScanResult } from 'models/Device';
 import { Note } from 'models/Note';
 import { PageInfo } from 'models/Table';
 

src/hooks/Network/Inventory.ts

@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
 import { AxiosError } from 'axios';
+import { useQuery } from 'react-query';
 import { axiosProv } from 'constants/axiosInstances';
 import { Note } from 'models/Note';
-import { useQuery } from 'react-query';
 
 export type InventoryTag = {
   contact: string;

src/hooks/Network/Users.ts

@@ -2,8 +2,8 @@ import { useToast } from '@chakra-ui/react';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { User } from 'models/User';
 import { axiosSec } from 'constants/axiosInstances';
+import { User } from 'models/User';
 
 const getAvatarPromises = (userList: User[]) => {
   const promises = userList.map(async (user) => {

src/layout/Navbar/index.tsx

@@ -20,9 +20,9 @@ import {
 import { ArrowCircleLeft } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import routes from 'router/routes';
-import { useAuth } from 'contexts/AuthProvider';
 import LanguageSwitcher from 'components/LanguageSwitcher';
+import { useAuth } from 'contexts/AuthProvider';
+import routes from 'router/routes';
 
 interface Props {
   secondary: boolean;

src/layout/Sidebar/Devices.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Flex, Heading, Tooltip, VStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useGetDevicesStats } from 'hooks/Network/Devices';
 import { compactSecondsToDetailed, minimalSecondsToDetailed } from 'helpers/dateFormatting';
+import { useGetDevicesStats } from 'hooks/Network/Devices';
 
 const SidebarDevices = () => {
   const { t } = useTranslation();

src/layout/Sidebar/NavLinkButton.tsx

@@ -3,8 +3,8 @@ import { Button, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
-import { Route } from 'models/Routes';
 import IconBox from 'components/Containers/IconBox';
+import { Route } from 'models/Routes';
 
 const variantChange = '0.2s linear';
 

src/layout/Sidebar/index.tsx

@@ -19,8 +19,8 @@ import createLinks from './CreateLinks';
 import SidebarDevices from './Devices';
 import darkLogo from 'assets/Logo_Dark_Mode.svg';
 import lightLogo from 'assets/Logo_Light_Mode.svg';
-import { Route } from 'models/Routes';
 import { useAuth } from 'contexts/AuthProvider';
+import { Route } from 'models/Routes';
 
 const variantChange = '0.2s linear';
 

src/pages/DefaultConfigurations/List/CreateModal.tsx

@@ -5,17 +5,17 @@ import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { DefaultConfigurationSchema } from '../utils';
+import { CreateButton } from 'components/Buttons/CreateButton';
+import { EditButton } from 'components/Buttons/EditButton';
+import { SaveButton } from 'components/Buttons/SaveButton';
+import { StringField } from 'components/Form/Fields/StringField';
 import MultiSelectField from 'components/Form/MultiSelectField';
+import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
+import { Modal } from 'components/Modals/Modal';
 import { DefaultConfigurationResponse, useCreateDefaultConfig } from 'hooks/Network/DefaultConfigurations';
 import { useGetDeviceTypes } from 'hooks/Network/Firmware';
-import { useFormRef } from 'hooks/useFormRef';
 import { useFormModal } from 'hooks/useFormModal';
-import { CreateButton } from 'components/Buttons/CreateButton';
+import { useFormRef } from 'hooks/useFormRef';
-import { Modal } from 'components/Modals/Modal';
-import { SaveButton } from 'components/Buttons/SaveButton';
-import { EditButton } from 'components/Buttons/EditButton';
-import { StringField } from 'components/Form/Fields/StringField';
-import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
 
 const CreateDefaultConfigurationModal = () => {
   const { t } = useTranslation();

src/pages/DefaultConfigurations/List/EditModal.tsx

@@ -5,16 +5,16 @@ import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { DefaultConfigurationSchema } from '../utils';
+import { EditButton } from 'components/Buttons/EditButton';
+import { SaveButton } from 'components/Buttons/SaveButton';
+import { StringField } from 'components/Form/Fields/StringField';
 import MultiSelectField from 'components/Form/MultiSelectField';
+import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
+import { Modal } from 'components/Modals/Modal';
 import { DefaultConfigurationResponse, useUpdateDefaultConfig } from 'hooks/Network/DefaultConfigurations';
 import { useGetDeviceTypes } from 'hooks/Network/Firmware';
-import { useFormRef } from 'hooks/useFormRef';
 import { useFormModal } from 'hooks/useFormModal';
-import { Modal } from 'components/Modals/Modal';
+import { useFormRef } from 'hooks/useFormRef';
-import { SaveButton } from 'components/Buttons/SaveButton';
-import { EditButton } from 'components/Buttons/EditButton';
-import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
-import { StringField } from 'components/Form/Fields/StringField';
 
 type Props = {
   modalProps: UseDisclosureReturn;

src/pages/DefaultConfigurations/List/index.tsx

@@ -4,15 +4,15 @@ import { useTranslation } from 'react-i18next';
 import Actions from './Actions';
 import CreateDefaultConfigurationModal from './CreateModal';
 import EditDefaultConfiguration from './EditModal';
-import { DefaultConfigurationResponse, useGetDefaultConfigurations } from 'hooks/Network/DefaultConfigurations';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
-import { Column } from 'models/Table';
-import { Card } from 'components/Containers/Card';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { Card } from 'components/Containers/Card';
 import { CardBody } from 'components/Containers/Card/CardBody';
-import { LoadingOverlay } from 'components/LoadingOverlay';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { DataTable } from 'components/DataTables/DataTable';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { LoadingOverlay } from 'components/LoadingOverlay';
+import { DefaultConfigurationResponse, useGetDefaultConfigurations } from 'hooks/Network/DefaultConfigurations';
+import { Column } from 'models/Table';
 
 const DefaultConfigurationsList = () => {
   const { t } = useTranslation();

src/pages/DefaultConfigurations/utils.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
-import { testJson } from 'helpers/formTests';
 import * as Yup from 'yup';
+import { testJson } from 'helpers/formTests';
 
 export const DefaultConfigurationSchema = (t: (str: string) => string) =>
   Yup.object()

src/pages/Device/Details.tsx

@@ -5,13 +5,13 @@ import { useTranslation } from 'react-i18next';
 import ViewCapabilitiesModal from './ViewCapabilitiesModal';
 import ViewConfigurationModal from './ViewConfigurationModal';
 import { Card } from 'components/Containers/Card';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { compactDate } from 'helpers/dateFormatting';
 import { useGetDevice } from 'hooks/Network/Devices';
 import { useGetProvUi } from 'hooks/Network/Endpoints';
-import { DeviceConfiguration } from 'models/Device';
-import { compactDate } from 'helpers/dateFormatting';
 import { useGetTag } from 'hooks/Network/Inventory';
+import { DeviceConfiguration } from 'models/Device';
 
 type Props = {
   serialNumber: string;

src/pages/Device/LogsCard/CommandHistory/Modal.tsx

@@ -13,17 +13,18 @@ import {
   Tabs,
   useColorMode,
 } from '@chakra-ui/react';
+import { JsonViewer } from '@textea/json-viewer';
 import { Download } from 'phosphor-react';
 import { CSVLink } from 'react-csv';
 import { useTranslation } from 'react-i18next';
-import { JsonViewer } from '@textea/json-viewer';
+import { ResponsiveButton } from 'components/Buttons/ResponsiveButton';
+import { Modal } from 'components/Modals/Modal';
+import WifiScanResultDisplay from 'components/Modals/WifiScanModal/ResultDisplay';
+import { compactDate, dateForFilename } from 'helpers/dateFormatting';
+import { uppercaseFirstLetter } from 'helpers/stringHelper';
+import { DeviceCommandHistory } from 'hooks/Network/Commands';
 import { useDownloadTrace } from 'hooks/Network/Trace';
 import { DeviceScanResult } from 'models/Device';
-import { Modal } from 'components/Modals/Modal';
-import { uppercaseFirstLetter } from 'helpers/stringHelper';
-import { compactDate, dateForFilename } from 'helpers/dateFormatting';
-import { ResponsiveButton } from 'components/Buttons/ResponsiveButton';
-import { DeviceCommandHistory } from 'hooks/Network/Commands';
 
 type Props = {
   modalProps: {

src/pages/Device/LogsCard/CommandHistory/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ColumnPicker } from 'components/DataTables/ColumnPicker';
-import { Column } from 'models/Table';
-import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { DataTable } from 'components/DataTables/DataTable';
 import { Box, Button, Center, Heading } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import CommandDetailsModal from './Modal';
 import useCommandHistoryTable from './useCommandHistoryTable';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { ColumnPicker } from 'components/DataTables/ColumnPicker';
+import { DataTable } from 'components/DataTables/DataTable';
+import { Column } from 'models/Table';
 
 type Props = {
   serialNumber: string;

src/pages/Device/LogsCard/CommandHistory/useCommandHistoryTable.tsx

@@ -3,9 +3,9 @@ import { Badge, Box, HStack, IconButton, Tooltip, useDisclosure, useToast } from
 import { AxiosError } from 'axios';
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import { DeviceCommandHistory, useDeleteCommand, useGetCommandHistory } from 'hooks/Network/Commands';
-import { uppercaseFirstLetter } from 'helpers/stringHelper';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { uppercaseFirstLetter } from 'helpers/stringHelper';
+import { DeviceCommandHistory, useDeleteCommand, useGetCommandHistory } from 'hooks/Network/Commands';
 import { Column } from 'models/Table';
 
 type Props = {

src/pages/Device/LogsCard/HealthCheckHistory/DeleteModal.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { DeleteButton } from 'components/Buttons/DeleteButton';
-import { Modal } from 'components/Modals/Modal';
 import { Alert, AlertIcon, Box, Button, Center, useDisclosure, useToast } from '@chakra-ui/react';
 import { AxiosError } from 'axios';
 import ReactDatePicker from 'react-datepicker';
 import { useTranslation } from 'react-i18next';
+import { DeleteButton } from 'components/Buttons/DeleteButton';
+import { Modal } from 'components/Modals/Modal';
 import 'react-datepicker/dist/react-datepicker.css';
 import { useDeleteHealthChecks } from 'hooks/Network/HealthChecks';
 

src/pages/Device/LogsCard/HealthCheckHistory/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { ColumnPicker } from 'components/DataTables/ColumnPicker';
-import { Column } from 'models/Table';
-import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { DataTable } from 'components/DataTables/DataTable';
 import { Box, Button, Center, Flex, Heading, HStack, Spacer } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import DeleteHealthChecksModal from './DeleteModal';
 import useHealthCheckTable from './useHealthCheckTable';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { ColumnPicker } from 'components/DataTables/ColumnPicker';
+import { DataTable } from 'components/DataTables/DataTable';
+import { Column } from 'models/Table';
 
 type Props = {
   serialNumber: string;

src/pages/Device/LogsCard/LogHistory/DeleteModal.tsx

@@ -4,9 +4,9 @@ import { AxiosError } from 'axios';
 import ReactDatePicker from 'react-datepicker';
 import { useTranslation } from 'react-i18next';
 import 'react-datepicker/dist/react-datepicker.css';
-import { useDeleteLogs } from 'hooks/Network/DeviceLogs';
 import { DeleteButton } from 'components/Buttons/DeleteButton';
 import { Modal } from 'components/Modals/Modal';
+import { useDeleteLogs } from 'hooks/Network/DeviceLogs';
 
 const CustomInputButton = React.forwardRef(
   ({ value, onClick }: { value: string; onClick: () => void }, ref: React.LegacyRef<HTMLButtonElement>) => (

src/pages/Device/LogsCard/LogHistory/index.tsx

@@ -3,10 +3,10 @@ import { Box, Button, Center, Flex, Heading, HStack, Spacer } from '@chakra-ui/r
 import { useTranslation } from 'react-i18next';
 import DeleteLogModal from './DeleteModal';
 import useDeviceLogsTable from './useDeviceLogsTable';
-import { ColumnPicker } from 'components/DataTables/ColumnPicker';
-import { Column } from 'models/Table';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { ColumnPicker } from 'components/DataTables/ColumnPicker';
 import { DataTable } from 'components/DataTables/DataTable';
+import { Column } from 'models/Table';
 
 type Props = {
   serialNumber: string;

src/pages/Device/LogsCard/LogHistory/useDeviceLogsTable.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Box } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { DeviceLog, useGetDeviceLogs } from 'hooks/Network/DeviceLogs';
 import { Column } from 'models/Table';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
 
 type Props = {
   serialNumber: string;

src/pages/Device/Notes.tsx

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import { Card } from 'components/Containers/Card';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { CardBody } from 'components/Containers/Card/CardBody';
 import {
   Box,
   Button,
@@ -23,11 +20,14 @@ import {
 } from '@chakra-ui/react';
 import { Plus } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import { useGetDevice, useUpdateDevice } from 'hooks/Network/Devices';
+import { Card } from 'components/Containers/Card';
+import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { DataTable } from 'components/DataTables/DataTable';
-import { Column } from 'models/Table';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { useGetDevice, useUpdateDevice } from 'hooks/Network/Devices';
 import { Note } from 'models/Note';
+import { Column } from 'models/Table';
 
 type Props = {
   serialNumber: string;

src/pages/Device/StatisticsCard/DatePickers.tsx

@@ -19,8 +19,8 @@ import {
 import { Clock, Prohibit } from 'phosphor-react';
 import ReactDatePicker from 'react-datepicker';
 import { useTranslation } from 'react-i18next';
-import { SaveButton } from 'components/Buttons/SaveButton';
 import { CloseButton } from 'components/Buttons/CloseButton';
+import { SaveButton } from 'components/Buttons/SaveButton';
 
 const CustomInputButton = React.forwardRef(
   ({ value, onClick }: { value: string; onClick: () => void }, ref: React.LegacyRef<HTMLButtonElement>) => (

src/pages/Device/StatisticsCard/ViewLastStatsModal.tsx

@@ -15,13 +15,13 @@ import {
   useColorMode,
   useDisclosure,
 } from '@chakra-ui/react';
+import { JsonViewer } from '@textea/json-viewer';
 import { ClockCounterClockwise } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import { useGetDeviceLastStats } from 'hooks/Network/Statistics';
-import { Modal } from 'components/Modals/Modal';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
 import { LoadingOverlay } from 'components/LoadingOverlay';
-import { JsonViewer } from '@textea/json-viewer';
+import { Modal } from 'components/Modals/Modal';
+import { useGetDeviceLastStats } from 'hooks/Network/Statistics';
 
 type Props = {
   serialNumber: string;

src/pages/Device/StatisticsCard/index.tsx

@@ -6,16 +6,16 @@ import StatisticsCardDatePickers from './DatePickers';
 import InterfaceChart from './InterfaceChart';
 import DeviceMemoryChart from './MemoryChart';
 import ViewLastStatsModal from './ViewLastStatsModal';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { Card } from 'components/Containers/Card';
+import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { LoadingOverlay } from 'components/LoadingOverlay';
 import {
   DeviceStatistics,
   useGetDeviceStatsLatestHour,
   useGetDeviceStatsWithTimestamps,
 } from 'hooks/Network/Statistics';
-import { Card } from 'components/Containers/Card';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { CardBody } from 'components/Containers/Card/CardBody';
-import { LoadingOverlay } from 'components/LoadingOverlay';
 
 const extractMemory = (stat: DeviceStatistics) => {
   let used: number | undefined;

src/pages/Device/Summary.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Card } from 'components/Containers/Card';
-import { CardBody } from 'components/Containers/Card/CardBody';
 import { Flex, Grid, GridItem, Heading, Image, Tag } from '@chakra-ui/react';
 import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
-import { bytesString, getRevision } from 'helpers/stringHelper';
+import { Card } from 'components/Containers/Card';
-import COUNTRY_LIST from 'constants/countryList';
+import { CardBody } from 'components/Containers/Card/CardBody';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import COUNTRY_LIST from 'constants/countryList';
 import { compactDate, compactSecondsToDetailed } from 'helpers/dateFormatting';
+import { bytesString, getRevision } from 'helpers/stringHelper';
 import { useGetDevice, useGetDeviceStatus } from 'hooks/Network/Devices';
 import { useGetDeviceLastStats } from 'hooks/Network/Statistics';
 

src/pages/Device/ViewCapabilitiesModal.tsx

@@ -14,13 +14,13 @@ import {
   useColorMode,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
 import { JsonViewer } from '@textea/json-viewer';
-import { useGetDeviceCapabilities } from 'hooks/Network/Devices';
+import { useTranslation } from 'react-i18next';
-import { Modal } from 'components/Modals/Modal';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { LoadingOverlay } from 'components/LoadingOverlay';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { LoadingOverlay } from 'components/LoadingOverlay';
+import { Modal } from 'components/Modals/Modal';
+import { useGetDeviceCapabilities } from 'hooks/Network/Devices';
 
 type Props = {
   serialNumber: string;

src/pages/Device/ViewConfigurationModal.tsx

@@ -11,8 +11,8 @@ import {
   useColorMode,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
 import { JsonViewer } from '@textea/json-viewer';
+import { useTranslation } from 'react-i18next';
 import { Modal } from 'components/Modals/Modal';
 import { DeviceConfiguration } from 'models/Device';
 

src/pages/Device/WifiAnalysis/AssocationsTable.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { Box, Flex, Heading, Spacer } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { ParsedRadio } from './RadiosTable';
-import { Column } from 'models/Table';
-import DataCell from 'components/TableCells/DataCell';
-import { DataTable } from 'components/DataTables/DataTable';
 import { ColumnPicker } from 'components/DataTables/ColumnPicker';
+import { DataTable } from 'components/DataTables/DataTable';
+import DataCell from 'components/TableCells/DataCell';
+import { Column } from 'models/Table';
 
 export type ParsedAssociation = {
   radio?: ParsedRadio;

src/pages/Device/WifiAnalysis/RadiosTable.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Box, Flex, Heading, Spacer } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { Column } from 'models/Table';
 import { ColumnPicker } from 'components/DataTables/ColumnPicker';
 import { DataTable } from 'components/DataTables/DataTable';
+import { Column } from 'models/Table';
 
 export type ParsedRadio = {
   recorded: number;

src/pages/Device/WifiAnalysis/index.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
-import { Card } from 'components/Containers/Card';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { Box, Flex, Heading, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import WifiAnalysisAssocationsTable, { ParsedAssociation } from './AssocationsTable';
 import WifiAnalysisRadioTable, { ParsedRadio } from './RadiosTable';
-import { DeviceStatistics, useGetDeviceNewestStats, useGetMacOuis } from 'hooks/Network/Statistics';
+import { Card } from 'components/Containers/Card';
-import { parseDbm } from 'helpers/stringHelper';
 import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { compactSecondsToDetailed } from 'helpers/dateFormatting';
+import { parseDbm } from 'helpers/stringHelper';
+import { DeviceStatistics, useGetDeviceNewestStats, useGetMacOuis } from 'hooks/Network/Statistics';
 
 type Props = {
   serialNumber: string;

src/pages/Device/Wrapper.tsx

@@ -10,18 +10,18 @@ import DeviceStatisticsCard from './StatisticsCard';
 import DeviceSummary from './Summary';
 import WifiAnalysisCard from './WifiAnalysis';
 import DeviceActionDropdown from 'components/Buttons/DeviceActionDropdown';
-import FactoryResetModal from 'components/Modals/FactoryResetModal';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { useGetDevice, useGetDeviceHealthChecks, useGetDeviceStatus } from 'hooks/Network/Devices';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { Card } from 'components/Containers/Card';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { RefreshButton } from 'components/Buttons/RefreshButton';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
-import { WifiScanModal } from 'components/Modals/WifiScanModal';
-import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal';
-import { TraceModal } from 'components/Modals/TraceModal';
-import { EventQueueModal } from 'components/Modals/EventQueueModal';
 import { ConfigureModal } from 'components/Modals/ConfigureModal';
+import { EventQueueModal } from 'components/Modals/EventQueueModal';
+import FactoryResetModal from 'components/Modals/FactoryResetModal';
+import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal';
 import { TelemetryModal } from 'components/Modals/TelemetryModal';
+import { TraceModal } from 'components/Modals/TraceModal';
+import { WifiScanModal } from 'components/Modals/WifiScanModal';
+import { useGetDevice, useGetDeviceHealthChecks, useGetDeviceStatus } from 'hooks/Network/Devices';
 
 type Props = {
   serialNumber: string;

src/pages/Devices/Blacklist/CreateModal.tsx

@@ -14,10 +14,10 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useCreateBlacklist } from 'hooks/Network/Blacklist';
 import { CreateButton } from 'components/Buttons/CreateButton';
-import { Modal } from 'components/Modals/Modal';
 import { SaveButton } from 'components/Buttons/SaveButton';
+import { Modal } from 'components/Modals/Modal';
+import { useCreateBlacklist } from 'hooks/Network/Blacklist';
 
 const CreateBlacklistModal = () => {
   const { t } = useTranslation();

src/pages/Devices/Blacklist/EditModal.tsx

@@ -11,9 +11,9 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { BlacklistDevice, useUpdateBlacklist } from 'hooks/Network/Blacklist';
 import { SaveButton } from 'components/Buttons/SaveButton';
 import { Modal } from 'components/Modals/Modal';
+import { BlacklistDevice, useUpdateBlacklist } from 'hooks/Network/Blacklist';
 
 type Props = {
   modalProps: {

src/pages/Devices/Blacklist/index.tsx

@@ -5,14 +5,14 @@ import { useNavigate } from 'react-router-dom';
 import Actions from './Actions';
 import CreateBlacklistModal from './CreateModal';
 import EditBlacklistModal from './EditModal';
-import { Column, PageInfo } from 'models/Table';
-import { BlacklistDevice, useGetBlacklistCount, useGetBlacklistDevices } from 'hooks/Network/Blacklist';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { ColumnPicker } from 'components/DataTables/ColumnPicker';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
 import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { ColumnPicker } from 'components/DataTables/ColumnPicker';
 import { DataTable } from 'components/DataTables/DataTable';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { BlacklistDevice, useGetBlacklistCount, useGetBlacklistDevices } from 'hooks/Network/Blacklist';
+import { Column, PageInfo } from 'models/Table';
 
 const DeviceListCard = () => {
   const { t } = useTranslation();

src/pages/Devices/Dashboard/index.tsx

@@ -13,12 +13,12 @@ import OverallHealthSimple from './OverallHealth';
 import OverallHealthPieChart from './OverallHealthPieChart';
 import UptimesBarChart from './UptimesBarChart';
 import VendorBarChart from './VendorBarChart';
-import SimpleIconStatDisplay from 'components/Containers/SimpleIconStatDisplay';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
 import { CardBody } from 'components/Containers/Card/CardBody';
-import { useGetControllerDashboard } from 'hooks/Network/Controller';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import SimpleIconStatDisplay from 'components/Containers/SimpleIconStatDisplay';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { useGetControllerDashboard } from 'hooks/Network/Controller';
 
 const DevicesDashboard = () => {
   const { t } = useTranslation();

src/pages/Devices/ListCard/index.tsx

@@ -10,24 +10,24 @@ import AP from './icons/AP.png';
 import IOT from './icons/IOT.png';
 import MESH from './icons/MESH.png';
 import SWITCH from './icons/SWITCH.png';
-import FactoryResetModal from 'components/Modals/FactoryResetModal';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { DeviceWithStatus, useGetDeviceCount, useGetDevices } from 'hooks/Network/Devices';
+import { CardBody } from 'components/Containers/Card/CardBody';
-import { useGetFirmwareAges } from 'hooks/Network/Firmware';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { ColumnPicker } from 'components/DataTables/ColumnPicker';
+import { DataTable } from 'components/DataTables/DataTable';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { ConfigureModal } from 'components/Modals/ConfigureModal';
+import { EventQueueModal } from 'components/Modals/EventQueueModal';
+import FactoryResetModal from 'components/Modals/FactoryResetModal';
+import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal';
+import { TelemetryModal } from 'components/Modals/TelemetryModal';
+import { TraceModal } from 'components/Modals/TraceModal';
+import { WifiScanModal } from 'components/Modals/WifiScanModal';
 import DataCell from 'components/TableCells/DataCell';
 import NumberCell from 'components/TableCells/NumberCell';
+import { DeviceWithStatus, useGetDeviceCount, useGetDevices } from 'hooks/Network/Devices';
+import { useGetFirmwareAges } from 'hooks/Network/Firmware';
 import { Column, PageInfo } from 'models/Table';
-import { ColumnPicker } from 'components/DataTables/ColumnPicker';
-import { RefreshButton } from 'components/Buttons/RefreshButton';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { DataTable } from 'components/DataTables/DataTable';
-import { CardBody } from 'components/Containers/Card/CardBody';
-import { WifiScanModal } from 'components/Modals/WifiScanModal';
-import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal';
-import { TraceModal } from 'components/Modals/TraceModal';
-import { EventQueueModal } from 'components/Modals/EventQueueModal';
-import { ConfigureModal } from 'components/Modals/ConfigureModal';
-import { TelemetryModal } from 'components/Modals/TelemetryModal';
 
 const ICON_STYLE = { width: '24px', height: '24px', borderRadius: '20px' };
 

src/pages/Devices/index.tsx

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 import Blacklist from './Blacklist';
 import DevicesDashboard from './Dashboard';
 import DeviceListCard from './ListCard';
-import { useAuth } from 'contexts/AuthProvider';
 import { Card } from 'components/Containers/Card';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { useAuth } from 'contexts/AuthProvider';
 
 const getDefaultTabIndex = () => {
   const index = localStorage.getItem('devices-tab-index') || '0';

src/pages/Firmware/Dashboard/EndpointsDisplay.tsx

@@ -3,9 +3,9 @@ import { Heading, Table, Tbody, Td, Th, Thead, Tooltip, Tr } from '@chakra-ui/re
 import { Info } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { Card } from 'components/Containers/Card';
 import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { FirmwareDashboardEndpoint } from 'hooks/Network/Firmware';
 
 type Props = {

src/pages/Firmware/Dashboard/index.tsx

@@ -11,12 +11,12 @@ import FirmwareLatestPieChart from './LatestPieChart';
 import OuisBarChart from './OuisBarChart';
 import UnknownFirmwareBarChart from './UnknownFirmwareBarChart';
 import UpToDateDevicesSimple from './UpToDateDevices';
-import SimpleIconStatDisplay from 'components/Containers/SimpleIconStatDisplay';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { useGetFirmwareDashboard } from 'hooks/Network/Firmware';
-import { CardBody } from 'components/Containers/Card/CardBody';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import SimpleIconStatDisplay from 'components/Containers/SimpleIconStatDisplay';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { useGetFirmwareDashboard } from 'hooks/Network/Firmware';
 
 const FirmwareDashboard = () => {
   const { t } = useTranslation();

src/pages/Firmware/List/Modal.tsx

@@ -24,15 +24,16 @@ import {
 } from '@chakra-ui/react';
 import { Pen, Plus, X } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import { getRevision } from 'helpers/stringHelper';
+import { SaveButton } from 'components/Buttons/SaveButton';
-import { Firmware } from 'models/Firmware';
-import { useUpdateUpdateFirmware } from 'hooks/Network/Firmware';
-import { Column } from 'models/Table';
-import { Note } from 'models/Note';
-import { Modal } from 'components/Modals/Modal';
 import { DataTable } from 'components/DataTables/DataTable';
-import DataCell from 'components/TableCells/DataCell';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { Modal } from 'components/Modals/Modal';
+import DataCell from 'components/TableCells/DataCell';
+import { getRevision } from 'helpers/stringHelper';
+import { useUpdateUpdateFirmware } from 'hooks/Network/Firmware';
+import { Firmware } from 'models/Firmware';
+import { Note } from 'models/Note';
+import { Column } from 'models/Table';
 
 type Props = {
   modalProps: UseDisclosureReturn;
@@ -190,7 +191,6 @@ const FirmwareDetailsModal = ({ modalProps, firmware }: Props) => {
               ml={2}
             />
             {isEditingDescription && (
-              // @ts-ignore
               <SaveButton onClick={onSaveDescription} ml={2} isCompact size="sm" isLoading={updateFirmware.isLoading} />
             )}
           </FormLabel>

src/pages/Firmware/List/index.tsx

@@ -17,17 +17,17 @@ import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import FirmwareDetailsModal from './Modal';
 import UriCell from './UriCell';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { DataTable } from 'components/DataTables/DataTable';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { LoadingOverlay } from 'components/LoadingOverlay';
+import DataCell from 'components/TableCells/DataCell';
 import { getRevision } from 'helpers/stringHelper';
 import { useGetDeviceTypes, useGetFirmwareDeviceType } from 'hooks/Network/Firmware';
 import { Firmware } from 'models/Firmware';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
-import DataCell from 'components/TableCells/DataCell';
 import { Column } from 'models/Table';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { CardBody } from 'components/Containers/Card/CardBody';
-import { LoadingOverlay } from 'components/LoadingOverlay';
-import { DataTable } from 'components/DataTables/DataTable';
-import { RefreshButton } from 'components/Buttons/RefreshButton';
 
 const FirmwareListTable = () => {
   const { t } = useTranslation();

src/pages/Firmware/index.tsx

@@ -3,9 +3,9 @@ import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/r
 import { useTranslation } from 'react-i18next';
 import FirmwareDashboard from './Dashboard';
 import FirmwareListTable from './List';
-import { useAuth } from 'contexts/AuthProvider';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { Card } from 'components/Containers/Card';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { useAuth } from 'contexts/AuthProvider';
 
 const STORAGE_KEY = 'firmware-tab-index';
 

src/pages/LoginPage/ChangePasswordForm.tsx

@@ -17,11 +17,11 @@ import { Formik, Form } from 'formik';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import { StringField } from 'components/Form/Fields/StringField';
-import { LoginFormProps } from 'models/Login';
 import { useAuth } from 'contexts/AuthProvider';
-import { useChangePassword } from 'hooks/Network/Login';
 import { testRegex } from 'helpers/formTests';
+import { useChangePassword } from 'hooks/Network/Login';
 import { useApiRequirements } from 'hooks/useApiRequirements';
+import { LoginFormProps } from 'models/Login';
 
 const LoginSchema = (t: (str: string) => string, { passRegex }: { passRegex: string }) =>
   Yup.object().shape({

src/pages/LoginPage/ForgotPasswordForm.tsx

@@ -17,9 +17,9 @@ import { Formik, Form } from 'formik';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import { StringField } from '../../components/Form/Fields/StringField';
-import { LoginFormProps } from 'models/Login';
-import { useApiRequirements } from 'hooks/useApiRequirements';
 import { useForgotPassword } from 'hooks/Network/Login';
+import { useApiRequirements } from 'hooks/useApiRequirements';
+import { LoginFormProps } from 'models/Login';
 
 const ForgotPasswordSchema = Yup.object().shape({
   userId: Yup.string().email('Invalid email').required('Required'),

src/pages/LoginPage/LoginForm.tsx

@@ -20,11 +20,11 @@ import { Formik, Field, Form } from 'formik';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import { StringField } from 'components/Form/Fields/StringField';
-import { LoginFormProps } from 'models/Login';
-import { useApiRequirements } from 'hooks/useApiRequirements';
-import { useLogin } from 'hooks/Network/Login';
-import { FormFieldProps } from 'models/FormField';
 import { useAuth } from 'contexts/AuthProvider';
+import { useLogin } from 'hooks/Network/Login';
+import { useApiRequirements } from 'hooks/useApiRequirements';
+import { FormFieldProps } from 'models/FormField';
+import { LoginFormProps } from 'models/Login';
 
 const LoginSchema = Yup.object().shape({
   email: Yup.string().email('Invalid email').required('Required'),

src/pages/LoginPage/MfaForm.tsx

@@ -18,8 +18,8 @@ import {
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from 'contexts/AuthProvider';
-import { LoginFormProps } from 'models/Login';
 import { useSendPhoneCode, useSendVerifyCode } from 'hooks/Network/Login';
+import { LoginFormProps } from 'models/Login';
 
 export interface MfaFormProps {
   setActiveForm: React.Dispatch<React.SetStateAction<LoginFormProps>>;

src/pages/Profile/GeneralInformation.tsx

@@ -12,12 +12,12 @@ import { CardBody } from 'components/Containers/Card/CardBody';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { StringField } from 'components/Form/Fields/StringField';
 import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
-import { useApiRequirements } from 'hooks/useApiRequirements';
 import { useAuth } from 'contexts/AuthProvider';
-import { useUpdateAccount } from 'hooks/Network/Account';
-import { useFormRef } from 'hooks/useFormRef';
-import { useFormModal } from 'hooks/useFormModal';
 import { testRegex } from 'helpers/formTests';
+import { useUpdateAccount } from 'hooks/Network/Account';
+import { useApiRequirements } from 'hooks/useApiRequirements';
+import { useFormModal } from 'hooks/useFormModal';
+import { useFormRef } from 'hooks/useFormRef';
 
 const FormSchema = (t: (str: string) => string, { passRegex }: { passRegex: string }) =>
   Yup.object().shape({

src/pages/Profile/MultiFactorAuth/ActivateGoogleAuthenticatorButton.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Button, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useUpdateAccount } from 'hooks/Network/Account';
-import { useAuth } from 'contexts/AuthProvider';
 import GoogleAuthenticatorModal from './GoogleAuthenticatorModal';
+import { useAuth } from 'contexts/AuthProvider';
+import { useUpdateAccount } from 'hooks/Network/Account';
 
 const ActivateGoogleAuthenticatorButton = () => {
   const { t } = useTranslation();

src/pages/Profile/MultiFactorAuth/ActivateSmsAuthButton.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Button, IconButton, Text, Tooltip, useDisclosure } from '@chakra-ui/react';
 import { Pen } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import { useUpdateAccount } from 'hooks/Network/Account';
-import { useAuth } from 'contexts/AuthProvider';
 import AddPhoneNumberModal from './AddPhoneNumberModal';
+import { useAuth } from 'contexts/AuthProvider';
+import { useUpdateAccount } from 'hooks/Network/Account';
 
 type Props = {
   currentMfaMethod?: string;

src/pages/Profile/MultiFactorAuth/AddPhoneNumberModal/index.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
-import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
 import ValidatePhoneNumberIntro from './ValidatePhoneNumberIntro';
 import ValidatePhoneNumberSuccess from './ValidatePhoneNumberSuccess';
 import ValidatePhoneNumberTests from './ValidatePhoneNumberTests';
+import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
+import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
 
 const AddPhoneNumberModal: React.FC<{
   isOpen: boolean;

src/pages/Profile/MultiFactorAuth/GoogleAuthenticatorModal/index.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { SaveButton } from 'components/Buttons/SaveButton';
-import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
-import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
 import GoogleAuthenticatorActivationSuccess from './GoogleAuthenticatorActivationSuccess';
 import GoogleAuthenticatorIntro from './GoogleAuthenticatorIntro';
 import GoogleAuthenticatorQrDisplay from './GoogleAuthenticatorQrDisplay';
 import GoogleAuthenticatorTests from './GoogleAuthenticatorTests';
+import { SaveButton } from 'components/Buttons/SaveButton';
+import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
+import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
 
 interface Props {
   isOpen: boolean;

src/pages/Profile/MultiFactorAuth/index.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { Divider, Flex, Heading, Spacer, Tag, Text, VStack } from '@chakra-ui/react';
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { useTranslation } from 'react-i18next';
-import { Card } from 'components/Containers/Card';
-import { CardBody } from 'components/Containers/Card/CardBody';
-import { CardHeader } from 'components/Containers/Card/CardHeader';
 import ActivateEmailMfaButton from './ActivateEmailMfaButton';
 import ActivateGoogleAuthenticatorButton from './ActivateGoogleAuthenticatorButton';
 import ActivateSmsAuthButton from './ActivateSmsAuthButton';
 import DeactivateMfaButton from './DeactivateMfaButton';
+import { Card } from 'components/Containers/Card';
+import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { useAuth } from 'contexts/AuthProvider';
 
 const MultiFactorAuthProfile = () => {

src/pages/Profile/Notes.tsx

@@ -20,13 +20,13 @@ import {
 } from '@chakra-ui/react';
 import { Plus } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
+import { DataTable } from '../../components/DataTables/DataTable';
+import FormattedDate from '../../components/InformationDisplays/FormattedDate';
 import { Card } from 'components/Containers/Card';
 import { CardBody } from 'components/Containers/Card/CardBody';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
-import { DataTable } from '../../components/DataTables/DataTable';
-import FormattedDate from '../../components/InformationDisplays/FormattedDate';
-import { useUpdateAccount } from 'hooks/Network/Account';
 import { useAuth } from 'contexts/AuthProvider';
+import { useUpdateAccount } from 'hooks/Network/Account';
 import { Note } from 'models/Note';
 import { Column } from 'models/Table';
 

src/pages/Profile/Summary.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Avatar, AvatarBadge, Box, Center, Heading, Text, useDisclosure } from '@chakra-ui/react';
 import { Pen } from 'phosphor-react';
+import AvatarModal from './AvatarModal';
 import { Card } from 'components/Containers/Card';
 import { CardBody } from 'components/Containers/Card/CardBody';
-import AvatarModal from './AvatarModal';
 import { useAuth } from 'contexts/AuthProvider';
 import { uppercaseFirstLetter } from 'helpers/stringHelper';
 

src/pages/SystemPage/SystemTile/SystemCertificatesTable.tsx

@@ -1,8 +1,8 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { DataTable } from 'components/DataTables/DataTable';
 import { compactDate } from 'helpers/dateFormatting';
 import { Column } from 'models/Table';
-import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 
 interface Props {
   certificates?: { expiresOn: number; filename: string }[];

src/pages/SystemPage/SystemTile/index.tsx

@@ -20,12 +20,12 @@ import { MultiValue, Select } from 'chakra-react-select';
 import { ArrowsClockwise } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import SystemCertificatesTable from './SystemCertificatesTable';
-import { useGetSubsystems, useGetSystemInfo, useReloadSubsystems } from 'hooks/Network/System';
 import { Card } from 'components/Containers/Card';
 import { CardBody } from 'components/Containers/Card/CardBody';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { compactSecondsToDetailed } from 'helpers/dateFormatting';
 import { EndpointApiResponse } from 'hooks/Network/Endpoints';
+import { useGetSubsystems, useGetSystemInfo, useReloadSubsystems } from 'hooks/Network/System';
 
 interface Props {
   endpoint: EndpointApiResponse;

src/pages/SystemPage/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Flex, SimpleGrid } from '@chakra-ui/react';
 import { v4 as uuid } from 'uuid';
 import SystemTile from './SystemTile';
-import { useGetEndpoints } from 'hooks/Network/Endpoints';
-import { useAuth } from 'contexts/AuthProvider';
 import { axiosSec } from 'constants/axiosInstances';
+import { useAuth } from 'contexts/AuthProvider';
+import { useGetEndpoints } from 'hooks/Network/Endpoints';
 
 const SystemPage = () => {
   const { token, isUserLoaded } = useAuth();

src/pages/UsersPage/Table/ActionsDropdown.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip, useToast } from '@chakra-ui/react';
+import axios from 'axios';
 import { Wrench } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { useSendUserEmailValidation, useSuspendUser, useResetMfa, useResetPassword } from 'hooks/Network/Users';
 import { useMutationResult } from 'hooks/useMutationResult';
-import axios from 'axios';
 
 interface Props {
   id: string;

src/pages/UsersPage/Table/CreateUserModal/Form.jsx

@@ -6,12 +6,12 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import * as Yup from 'yup';
-import { testRegex } from 'helpers/formTests';
-import { useAuth } from 'contexts/AuthProvider';
-import { useApiRequirements } from 'hooks/useApiRequirements';
-import { StringField } from 'components/Form/Fields/StringField';
 import { SelectField } from 'components/Form/Fields/SelectField';
+import { StringField } from 'components/Form/Fields/StringField';
 import { ToggleField } from 'components/Form/Fields/ToggleField';
+import { useAuth } from 'contexts/AuthProvider';
+import { testRegex } from 'helpers/formTests';
+import { useApiRequirements } from 'hooks/useApiRequirements';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/pages/UsersPage/Table/CreateUserModal/index.jsx

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import CreateUserForm from './Form';
+import { CloseButton } from 'components/Buttons/CloseButton';
+import { SaveButton } from 'components/Buttons/SaveButton';
+import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
+import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
+import { axiosSec } from 'constants/axiosInstances';
 import { useAuth } from 'contexts/AuthProvider';
 import { useFormRef } from 'hooks/useFormRef';
-import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
-import { SaveButton } from 'components/Buttons/SaveButton';
-import { CloseButton } from 'components/Buttons/CloseButton';
-import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
-import { axiosSec } from 'constants/axiosInstances';
 
 const propTypes = {
   requirements: PropTypes.shape({

src/pages/UsersPage/Table/EditUserModal/Form.jsx

@@ -6,13 +6,13 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import * as Yup from 'yup';
-import { useAuth } from 'contexts/AuthProvider';
-import { useApiRequirements } from 'hooks/useApiRequirements';
-import { StringField } from 'components/Form/Fields/StringField';
-import { SelectField } from 'components/Form/Fields/SelectField';
-import { ToggleField } from 'components/Form/Fields/ToggleField';
 import { NotesField } from 'components/Form/Fields/NotesField';
-import { testObjectName } from 'helpers/formTests';
+import { SelectField } from 'components/Form/Fields/SelectField';
+import { StringField } from 'components/Form/Fields/StringField';
+import { ToggleField } from 'components/Form/Fields/ToggleField';
+import { useAuth } from 'contexts/AuthProvider';
+import { testObjectName, testRegex } from 'helpers/formTests';
+import { useApiRequirements } from 'hooks/useApiRequirements';
 
 const UpdateUserSchema = (t, { passRegex }) =>
   Yup.object().shape({

src/pages/UsersPage/Table/EditUserModal/index.jsx

@@ -14,14 +14,14 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import UpdateUserForm from './Form';
+import { CloseButton } from 'components/Buttons/CloseButton';
+import { EditButton } from 'components/Buttons/EditButton';
+import { SaveButton } from 'components/Buttons/SaveButton';
+import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
+import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
+import { axiosSec } from 'constants/axiosInstances';
 import { useGetUser } from 'hooks/Network/Users';
 import { useFormRef } from 'hooks/useFormRef';
-import { SaveButton } from 'components/Buttons/SaveButton';
-import { EditButton } from 'components/Buttons/EditButton';
-import { CloseButton } from 'components/Buttons/CloseButton';
-import { ConfirmCloseAlertModal } from 'components/Modals/ConfirmCloseAlert';
-import { axiosSec } from 'constants/axiosInstances';
-import { ModalHeader } from 'components/Modals/GenericModal/ModalHeader';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/pages/UsersPage/Table/index.jsx

@@ -1,21 +1,21 @@
 import React, { useCallback, useState } from 'react';
 import { Avatar, Box, Button, Flex, Heading, useDisclosure, useToast } from '@chakra-ui/react';
 import { ArrowsClockwise } from 'phosphor-react';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import CreateUserModal from './CreateUserModal';
 import EditUserModal from './EditUserModal';
-import PropTypes from 'prop-types';
 import UserActions from './UserActions';
-import { useGetUsers } from 'hooks/Network/Users';
-import { useAuth } from 'contexts/AuthProvider';
-import { useGetRequirements } from 'hooks/Network/Requirements';
-import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { Card } from 'components/Containers/Card';
+import { CardBody } from 'components/Containers/Card/CardBody';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { ColumnPicker } from 'components/DataTables/ColumnPicker';
-import { CardBody } from 'components/Containers/Card/CardBody';
 import { DataTable } from 'components/DataTables/DataTable';
+import FormattedDate from 'components/InformationDisplays/FormattedDate';
+import { useAuth } from 'contexts/AuthProvider';
+import { useGetRequirements } from 'hooks/Network/Requirements';
+import { useGetUsers } from 'hooks/Network/Users';
 
 const propTypes = {
   title: PropTypes.string,

src/router/index.tsx

@@ -1,8 +1,8 @@
-import { useAuth } from 'contexts/AuthProvider';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import darkLogo from 'assets/Logo_Dark_Mode.svg';
 import lightLogo from 'assets/Logo_Light_Mode.svg';
+import { useAuth } from 'contexts/AuthProvider';
 
 const Layout = React.lazy(() => import('layout'));
 const Login = React.lazy(() => import('pages/LoginPage'));