Update dependencies, refactor authentication, and enhance UI components

- Upgraded @reduxjs/toolkit to version 2.9.0 and added new dependencies including @techniker-me/pcast-api and moment.
- Refactored authentication logic and added middleware for improved request handling.
- Introduced new UI components such as buttons, loaders, and forms, along with a theme system following SOLID principles.
- Updated routing to include protected routes and improved the login form with better error handling.
- Removed unused CSS and organized the project structure for better maintainability.

src/components/buttons/radio-button/index.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {Fragment} from 'react';
+import {Tooltip, Position} from 'components/tooltip';
+import {Label} from 'components/label';
+import {
+  RadioGroup,
+  RadioWrapper,
+  RadioButtonContainer,
+  VisibleCheckBox
+} from './style';
+
+interface IRadioItems {
+  label: string;
+  value: string;
+  tooltipMessage?: string;
+  tooltipPosition?: Position;
+  className?: string;
+  children?: JSX.Element;
+  disabled?: boolean;
+}
+
+interface IRadioButtonGroup {
+  items: IRadioItems[];
+  handleOnChange: (value) => void;
+  currentValue: string;
+}
+
+const RadioButton = (props: {currentValue: string; value: string}) => {
+  const {currentValue, value} = props;
+
+  return (
+    <RadioButtonContainer>
+      <input type="radio" readOnly={true} value={value} checked={currentValue === value}/>
+      <VisibleCheckBox checked={currentValue === value}><div/></VisibleCheckBox>
+    </RadioButtonContainer>
+  );
+};
+
+const RadioButtonGroup = (props: IRadioButtonGroup): JSX.Element => {
+  const {items, handleOnChange, currentValue} = props;
+
+  return (
+    <RadioGroup>
+      {items.map((
+        {
+          label,
+          value,
+          disabled,
+          tooltipPosition,
+          tooltipMessage,
+          children,
+          className
+        }: IRadioItems,
+        index: number
+      ) => (
+        <RadioWrapper tabIndex={-1}
+          onKeyPress={() => null}
+          disabled={disabled}
+          className="button-container"
+          role="button"
+          key={label + index}
+          onClick={() => handleOnChange(value)}>
+          <RadioButton value={value} currentValue={currentValue} />
+          <Fragment>
+            {tooltipMessage ? (
+              <Tooltip position={tooltipPosition} message={tooltipMessage}>
+                <Label
+                  className={className}
+                  text={label}
+                />
+              </Tooltip>
+            ) :
+              <Label
+                className={className}
+                text={label}
+              />
+            }
+            {children}
+          </Fragment>
+        </RadioWrapper>
+      ))}
+    </RadioGroup>
+  );
+};
+
+export default RadioButtonGroup;

src/components/buttons/radio-button/style.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+import {theme, paddings} from 'components/shared/theme';
+
+const {
+  spacing,
+  primaryFontSize,
+  colors
+} = theme;
+
+export const RadioGroup = styled.default.div`
+  display: flex;
+`;
+
+export const RadioWrapper = styled.default.div<{disabled?: boolean}>`
+  padding: ${paddings.small};
+  display: flex;
+
+  ${({disabled}) => disabled && styled.css`
+    pointer-events: none;
+    opacity: .5;
+  `}
+`;
+
+export const RadioButtonContainer = styled.default.div`
+  margin-right: ${spacing.xSmall};
+  align-self: center;
+
+  input {
+    position: absolute;
+    visibility: hidden;
+  }
+`;
+
+export const VisibleCheckBox = styled.default.div<{checked?: boolean}>`
+  border: 2px solid ${colors.gray400};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${primaryFontSize};
+  height: ${primaryFontSize};
+  border-radius: 50%;
+
+  ${({checked}) => checked && styled.css`
+    border: none;
+    background-color: ${colors.red};
+
+    div {
+      background-color: ${colors.black};
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+    }
+  `}
+`;