Enhance table header interfaces with optional render methods for improved flexibility; refactor router component structure for better readability and maintainability; ensure newline at end of file in url-routes.ts.

.npmrc

@@ -1,3 +1,3 @@
 save-exact=true
 package-lock=false
-@techniker-me:registry=https://registry-node.techniker.me
+@techniker-me:registry=https://npm.techniker.me

bun.lock

@@ -14,8 +14,9 @@
         "react-dom": "19.1.1",
         "react-redux": "9.2.0",
         "react-router-dom": "7.8.2",
+        "redux-persist": "6.0.0",
         "styled-components": "6.1.19",
-        "uuid": "11.1.0",
+        "uuid": "11.1.0"
       },
       "devDependencies": {
         "@eslint/js": "9.34.0",
@@ -745,6 +746,8 @@
 
     "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
 
+    "redux-persist": ["redux-persist@6.0.0", "", { "peerDependencies": { "redux": ">4.0.0" } }, "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ=="],
+
     "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
 
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],

package.json

@@ -15,42 +15,43 @@
   "dependencies": {
     "@phenixrts/sdk": "2025.2.2",
     "@reduxjs/toolkit": "2.9.0",
-    "@techniker-me/pcast-api": "2025.1.5",
+    "@techniker-me/pcast-api": "2025.1.8",
     "@techniker-me/tools": "2025.0.16",
     "moment": "2.30.1",
+    "phenix-edge-auth": "1.2.7",
     "phenix-web-proto": "2020.0.3",
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-redux": "9.2.0",
-    "react-router-dom": "7.8.2",
+    "react-router-dom": "7.9.1",
     "redux-persist": "6.0.0",
     "styled-components": "6.1.19",
-    "uuid": "11.1.0"
+    "uuid": "13.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.34.0",
+    "@eslint/js": "9.35.0",
     "@fortawesome/fontawesome-svg-core": "7.0.1",
     "@fortawesome/free-regular-svg-icons": "7.0.1",
     "@fortawesome/free-solid-svg-icons": "7.0.1",
     "@fortawesome/react-fontawesome": "3.0.2",
-    "@types/node": "24.3.0",
+    "@types/node": "24.5.0",
-    "@types/react": "19.1.12",
+    "@types/react": "19.1.13",
     "@types/react-dom": "19.1.9",
     "@vitejs/plugin-react-swc": "4.0.1",
     "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-amd-to-commonjs": "1.6.0",
-    "eslint": "9.34.0",
+    "eslint": "9.35.0",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.20",
-    "globals": "16.3.0",
+    "globals": "16.4.0",
     "prettier": "3.6.2",
     "react-datepicker": "8.7.0",
     "react-toastify": "11.0.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.42.0",
+    "typescript-eslint": "8.44.0",
     "typescript-plugin-styled-components": "3.0.0",
-    "vite": "7.1.4",
+    "vite": "7.1.5",
     "vite-plugin-babel": "1.3.2",
     "vite-plugin-commonjs": "0.10.4"
   }

src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './buttons';
 export * from './channel-icon-menu';
 export * from './error-renderer';
+export * from './ui/header';
 export * from './layout';
 export * from './loaders';
 export * from './modal';

src/components/layout/index.tsx

@@ -22,6 +22,7 @@ export const AppContainer = styled.default.div`
 export const Body = styled.default.div`
   flex: 1;
   padding: 1rem ${Theme.spacing.xlarge};
+  padding-top: 5.5rem; /* Account for fixed header height (3.5rem) + padding */
   background: ${Theme.colors.gray900};
   overflow: hidden;
   display: flex;

src/components/menu/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {useLocation} from 'react-router-dom';
+import {useSelector} from 'react-redux';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+import {RootState} from 'store';
+import urlRoute from 'routers/url-routes';
+
+import {MenuLayout, MenuItem} from './style';
+
+interface IMenu {
+  toggleShowMenu: () => void;
+}
+
+const menuTitles = Object.keys(urlRoute).filter((menuTitle: string) => menuTitle !== 'login');
+const Menu = (props: IMenu) => {
+  const {toggleShowMenu} = props;
+  const applicationId = useSelector((state: RootState) => state.authentication.applicationId);
+  const {pathname} = useLocation();
+  const currentLocation = pathname.split('/')[2];
+
+  return (
+    <MenuLayout>
+      {menuTitles.map((menuItem: string): JSX.Element | null => {
+        const {path, icon, notSupported} = urlRoute[menuItem];
+
+        if (notSupported) {
+          return null;
+        }
+
+        const active = currentLocation === path;
+
+        return (
+          <MenuItem className={active ? 'active' : ''} onClick={toggleShowMenu} key={menuItem} to={`/${applicationId}/${path}`}>
+            <span>
+              <FontAwesomeIcon icon={icon} />
+            </span>
+            <p>{menuItem}</p>
+          </MenuItem>
+        );
+      })}
+    </MenuLayout>
+  );
+};
+
+export default Menu;

src/components/menu/style.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+import {Link} from 'components/ui';
+import {theme, paddings} from 'components/shared/theme';
+
+const {colors, primaryThemeColor} = theme;
+
+export const MenuLayout = styled.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+
+export const MenuItem = styled.default(Link)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  padding: 0 ${paddings.xlarge};
+  color: ${colors.white};
+  text-transform: capitalize;
+  text-decoration: none;
+  cursor: pointer;
+  &.active {
+    color: ${primaryThemeColor};
+  }
+  &:hover {
+    background: ${colors.headerColor};
+  }
+  & span {
+    font-size: 22px;
+    margin: 0 ${paddings.medium} 0 0;
+  }
+`;

src/components/shared/utils.ts

@@ -2,7 +2,7 @@
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
 import moment, {DurationInputArg1, unitOfTime} from 'moment';
-import PlatformDetectionService from 'services/platformDetection.service';
+import PlatformDetectionService from 'services/PlatformDetection.service';
 
 export const truncateWord = (word = '', length = 30): string => {
   if (word.length >= length) {

src/components/side-menu/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {JSX} from 'react';
+import {useAppDispatch, useAppSelector, RootState} from 'store';
+import {setPreferredTimeFormat} from 'store/action/preferred-time-format';
+import {TimeFormats} from 'utility';
+
+import {documentationLinks} from 'constants/links';
+
+import Menu from 'components/menu';
+import NewTabLink from 'components/new-tab-link';
+import Toggle from 'components/toggle';
+
+import {Overlay, MenuView, SnapToBottom, FooterContainer} from './style';
+import config from 'config';
+
+export const SideMenu = ({showMenu}: {showMenu: () => void}): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const timeFormat = useAppSelector((state: RootState) => state.preferredTimeFormat.timeFormat);
+  const handleToggleChange = () => {
+    if (timeFormat === TimeFormats.Utc) {
+      dispatch(setPreferredTimeFormat(TimeFormats.LocalTime));
+    } else {
+      dispatch(setPreferredTimeFormat(TimeFormats.Utc));
+    }
+  };
+
+  return (
+    <>
+      <Overlay onClick={showMenu} />
+      <MenuView className="menuItems">
+        <Menu toggleShowMenu={showMenu} />
+        <SnapToBottom>
+          <FooterContainer>
+            <Toggle onTitle="UTC" offTitle="Local Time" handleChange={handleToggleChange} position={timeFormat === TimeFormats.Utc ? 'on' : 'off'} />
+            <NewTabLink link={documentationLinks.releaseNotes} text={config.controlCenterVersion} />
+          </FooterContainer>
+        </SnapToBottom>
+      </MenuView>
+    </>
+  );
+};

src/components/side-menu/style.ts

@@ -0,0 +1,61 @@
+/**
+ * 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';
+import {ToggleContainer} from 'components/toggle/style';
+
+const {
+  colors,
+  footerHeight,
+  typography: {fontSizeS}
+} = theme;
+
+export const Overlay = styled.default.div`
+  position: fixed;
+  width: 100%;
+  min-height: calc(100% - 3.5rem - ${footerHeight});
+  top: 3.5rem;
+  right: 0;
+  background: ${colors.headerColor};
+  opacity: .7;
+  z-index: 9;
+`;
+
+export const MenuView = styled.default.div`
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 3.5rem;
+  height: calc(100% - 3.5rem - ${footerHeight});
+  background-color: ${colors.black};
+  width: 292px;
+  padding-top: ${paddings.small};
+  z-index: 11;
+  box-shadow: 2px 0px 1px rgba(1,1,1, .9);
+`;
+
+export const SnapToBottom = styled.default.div`
+  width: inherit;
+  position: absolute;
+  bottom: 0;
+`;
+
+export const FooterContainer = styled.default.div`
+  width: 100%;
+  position: relative;
+  color: ${colors.gray300};
+  font-size: ${fontSizeS};
+  padding: 0 ${paddings.medium};
+
+  a {
+    text-decoration: none;
+    color: ${colors.lightBlue};
+    padding: 1rem 0;
+    display: block;
+  }
+
+  ${ToggleContainer} {
+    justify-content: flex-start;
+  }
+`;

src/components/table-screen-header/style.tsx

@@ -12,7 +12,8 @@ export const ScreenHeader = styled.default.div`
   align-items: baseline;
   flex-wrap: wrap;
   width: 100%;
-  margin: 0 0 .5rem;
+  margin: 0 0 0.75rem;
+  padding: 0 ${Theme.spacing.medium};
 `;
 
 export const ScreenHeaderControls = styled.default.div`
@@ -29,9 +30,12 @@ export const HeaderTitle = styled.default.div`
   align-items: baseline;
   h2 {
     color: ${colors.white};
-    margin: 0 .5rem 0 0;
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
   }
   p {
     color: ${colors.gray200};
+    margin: 0;
   }
 `;

src/components/table-screen-header/table-screen-header.tsx

@@ -11,7 +11,7 @@ export interface ITableScreenHeader {
   title: string;
   subtitle?: string;
   screenHeader: ScreenHeaderProps;
-  renderControl: (screenHeader: ScreenHeaderProps, key: TableHeaderKey) => JSX.Element | null;
+  renderControl?: (key: TableHeaderKey) => JSX.Element | null;
 }
 
 export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderControl}: ITableScreenHeader): JSX.Element => {
@@ -23,7 +23,7 @@ export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderCon
       </HeaderTitle>
       <ScreenHeaderControls>
         {Object.keys(screenHeader).map(key => {
-          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl(screenHeader, key as TableHeaderKey);
+          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl?.(key as TableHeaderKey);
 
           return headerControl ? <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper> : null;
         })}

src/components/table-with-pagination/table-with-pagination.tsx

@@ -1,7 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import {DataRowType, Table, TableHeaderKey, ITable, ITableWithPaginationHeader, ITableSort} from 'components/table';
 import {isEqual} from 'utility/validators';
@@ -17,7 +17,7 @@ import {useSort, useSearch} from 'utility/custom-hooks';
 interface ITableWithPagination extends ITable {
   screenHeader: ITableWithPaginationHeader;
   paginationItemText?: string;
-  getCurrentDisplayList?: (data: Record<string, string | number | null>[]) => void;
+  getCurrentDisplayList?: (data: Record<string, string | number | null | undefined>[]) => void;
 }
 
 const TableWithPagination = ({
@@ -34,7 +34,7 @@ const TableWithPagination = ({
   changeSortProps,
   searchValue: propsSearchValue = '',
   changeSearch
-}: ITableWithPagination): JSX.Element => {
+}: ITableWithPagination): React.JSX.Element => {
   const [currentPageNumber, setCurrentPageNumber] = useState<number>(1);
   const [currentData, setCurrentData] = useState<DataRowType[]>([]);
   const [filteredData, setFilteredData] = useState<DataRowType[]>(data || []);
@@ -78,9 +78,9 @@ const TableWithPagination = ({
   useEffect(() => {
     let pxRatioBeforeZoom = window.devicePixelRatio;
     let windowHeightBeforeResize = window.innerHeight;
-    const trackResize = e => {
+    const trackResize = () => {
-      const pxRatioAfterZoom = e.devicePixelRatio;
+      const pxRatioAfterZoom = window.devicePixelRatio;
-      const windowHeightAfterResize = e.target.innerHeight;
+      const windowHeightAfterResize = window.innerHeight;
 
       if (pxRatioAfterZoom !== pxRatioBeforeZoom || windowHeightAfterResize !== windowHeightBeforeResize) {
         pxRatioBeforeZoom = pxRatioAfterZoom;
@@ -153,27 +153,53 @@ const TableWithPagination = ({
     }
   };
 
-  const renderControl = (screenHeader: ITableWithPaginationHeader, key: TableHeaderKey) => {
+  // Create enhanced screenHeader with render methods
-    switch (key) {
+  const enhancedScreenHeader = React.useMemo(() => {
-      case TableHeaderKey.Search:
+    const result = {...screenHeader};
-        return <SearchInput search={search} defaultValue={searchValue} />;
+
-      case TableHeaderKey.AddRow:
+    // Add render methods for controls that need them
-        return <AddButton onClick={screenHeader[key]?.openAddRowModal} className="testId-hashAddButton" />;
+    if (result[TableHeaderKey.Search]) {
-      case TableHeaderKey.SelectType:
+      result[TableHeaderKey.Search] = {
-        return <Select {...screenHeader[key]} />;
+        ...result[TableHeaderKey.Search],
-      default:
+        render: () => <SearchInput search={search} defaultValue={searchValue} />
-        return null;
+      };
     }
-  };
+
+    if (result[TableHeaderKey.AddRow]) {
+      const addRowConfig = result[TableHeaderKey.AddRow];
+      result[TableHeaderKey.AddRow] = {
+        ...addRowConfig,
+        render: () => <AddButton onClick={addRowConfig.openAddRowModal} className="testId-hashAddButton" />
+      };
+    }
+
+    if (result[TableHeaderKey.SelectType]) {
+      const selectTypeConfig = result[TableHeaderKey.SelectType];
+      result[TableHeaderKey.SelectType] = {
+        ...selectTypeConfig,
+        render: () => <Select {...selectTypeConfig} />
+      };
+    }
+
+    return result;
+  }, [screenHeader, search, searchValue]);
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
       <div style={{flexShrink: 0}}>
-        <TableScreenHeader title={title} screenHeader={screenHeader} renderControl={renderControl} />
+        <TableScreenHeader title={title} screenHeader={enhancedScreenHeader} />
       </div>
       <div style={{flex: 1, overflow: 'auto', minHeight: 0, position: 'relative'}}>
         <div style={{overflow: 'visible'}}>
-          <Table columns={columns} data={currentData} sortColumn={sortColumn} sortDirection={sortDirection} style={style} sort={sort} errorMessage={errorMessage} />
+          <Table
+            columns={columns}
+            data={currentData}
+            sortColumn={sortColumn}
+            sortDirection={sortDirection}
+            style={style}
+            sort={sort}
+            errorMessage={errorMessage}
+          />
         </div>
       </div>
       <div style={{flexShrink: 0}} className="pagination-container">

src/components/table/props.ts

@@ -42,6 +42,7 @@ export interface ITableColumn {
   isHidden?: boolean;
   width?: number;
   path?: string;
+  applicationId?: string;
 }
 
 export type ColumnsType = Record<string, ITableColumn>;

src/components/table/style.tsx

@@ -23,10 +23,17 @@ export const Thead = styled.default.thead`
     & th {
       top: -1px;
       background-color: ${primaryBackground};
-      padding: ${Theme.spacing.small} 0;
+      padding: ${Theme.spacing.small} ${Theme.spacing.small};
       z-index: 10;
+      text-align: left;
+      font-weight: 600;
+
+      &:first-child {
+        padding-left: ${Theme.spacing.medium};
+      }
 
       &:last-child {
+        padding-right: ${Theme.spacing.medium};
         border: none;
       }
     }
@@ -49,21 +56,30 @@ export const Tbody = styled.default.tbody`
   }
   & tr {
     border-color: transparent transparent ${colors.black} transparent;
-    height: 3rem;
+    height: 2.5rem;
     & td {
       color: ${colors.white};
-      padding: ${Theme.spacing.small};
+      padding: ${Theme.spacing.xxSmall};
       word-wrap: break-word;
       font-size: ${typography.fontSizeS};
       position: relative;
-      text-align: center;
+      text-align: left;
       white-space: nowrap;
-      overflow: visible;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:first-child {
+        padding-left: ${Theme.spacing.medium};
+      }
+
+      &:last-child {
+        padding-right: ${Theme.spacing.medium};
+      }
 
       & > div,
       & > p {
-        text-align: center;
+        text-align: left;
-        justify-content: center;
+        justify-content: flex-start;
       }
 
       & a {

src/components/table/table-row.tsx

@@ -18,7 +18,7 @@ export const TableRow = ({columns, row}: ITableRow): React.JSX.Element | null =>
   return (
     <tr className="table-row">
       {Object.keys(columns).map((key, idx) => {
-        const {isHidden, renderCell, dropdownCell, textCell, type, path = '', tdStyle, width} = columns[key];
+        const {isHidden, renderCell, dropdownCell, textCell, type, path = '', tdStyle, width, applicationId} = columns[key];
 
         if (isHidden) {
           return null;
@@ -60,12 +60,13 @@ export const TableRow = ({columns, row}: ITableRow): React.JSX.Element | null =>
               </td>
             );
           } else if (type === CellType.Link) {
-            let link = path || '';
+            // For channel names, use channelId for the URL but display the name
+            const channelId = globalThis.encodeURIComponent(row.channelId || value);
+            let link = path ? `${path}/${channelId}` : `/channels/${channelId}`;
 
             if (row.extraPath) {
               link += `${path ? '/' : ''}${row.extraPath}`;
             }
-
             return (
               <td key={`tableData${idx}`} style={tdStyle}>
                 <div>

src/components/toggle/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {ToggleContainer, ToggleHiddenInput, ToggleSwitchContainer, ToggleSwitch, ToggleTitleOn, ToggleTitleOff} from './style';
+
+interface IToggle {
+  handleChange: () => void;
+  onTitle?: string;
+  offTitle?: string;
+  position?: 'on' | 'off';
+}
+const Toggle = (props: IToggle): JSX.Element => {
+  const {onTitle, offTitle, handleChange, position} = props;
+
+  return (
+    <ToggleContainer>
+      <ToggleHiddenInput type="checkbox" name="" id="toggle" checked={position === 'on'} onChange={handleChange} />
+      {offTitle && <ToggleTitleOff>{offTitle}</ToggleTitleOff>}
+      <ToggleSwitchContainer htmlFor="toggle">
+        <ToggleSwitch />
+      </ToggleSwitchContainer>
+      {onTitle && <ToggleTitleOn>{onTitle}</ToggleTitleOn>}
+    </ToggleContainer>
+  );
+};
+
+export default Toggle;

src/components/toggle/style.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+
+import {theme} from 'components/shared/theme';
+
+const {
+  colors,
+  typography: {fontSizeS}
+} = theme;
+
+export const ToggleContainer = styled.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ToggleTitle = styled.default.p`
+  color: ${colors.white};
+  font-size: ${fontSizeS};
+  transition: all .2s ease-in-out;
+`;
+
+export const ToggleTitleOn = styled.default(ToggleTitle)`
+  opacity: 1;
+`;
+export const ToggleTitleOff = styled.default(ToggleTitle)`
+  opacity: 0.5;
+`;
+
+export const ToggleSwitchContainer = styled.default.label`
+  margin: 0 1rem;
+  width: 3rem;
+  height: 1.5rem;
+  background-color: transparent;
+  border: 2px solid ${colors.gray700};
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+`;
+
+export const ToggleSwitch = styled.default.div`
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  background-color: ${colors.lightBlue};
+  border-radius: 40px;
+  left: .2rem;
+  transition: left 200ms linear;
+`;
+
+export const ToggleHiddenInput = styled.default.input`
+  display: none;
+
+  &:checked {
+    ~${ToggleTitleOff} {
+      opacity: 0.5;
+    }
+    ~${ToggleTitleOn} {
+      opacity: 1;
+    }
+    ~${ToggleSwitchContainer} {
+      ${ToggleSwitch} {
+        left: 1.6rem;
+      }
+    }
+  }
+`;

src/components/ui/header/index.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {useState, useEffect, useRef, JSX} from 'react';
+import {useNavigate, useLocation} from 'react-router-dom';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
+
+import UserStoreService from 'services/user-store';
+import {RootState, useAppDispatch, useAppSelector} from 'store';
+import {selectIsAuthenticated, signoutThunk} from 'store/slices/Authentication.slice';
+import text from './text';
+
+import {SideMenu} from 'components/side-menu';
+import urlRoutes from 'routers/url-routes';
+
+import {TopNavigation, User, ApplicationId, UserInitials, MenuIcon, NavigationLeftSide} from './style';
+
+import logo from 'assets/images/phenix-logo-101x41.png';
+import menuIcon from 'assets/images/icon/menu.svg';
+
+const Header = (): JSX.Element => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const dispatch = useAppDispatch();
+  const {search, pathname}: {search: string; pathname: string} = useLocation();
+  const applicationId = useAppSelector((state: RootState) => state.authentication.applicationId);
+  const [viewUserDetails, setViewUserDetails] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const isLoggedIn = useAppSelector(selectIsAuthenticated);
+  const navigate = useNavigate();
+  const {phenixText} = text;
+  let userInitials = '';
+
+  if (applicationId) {
+    userInitials = applicationId.substring(0, 2);
+  }
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setViewUserDetails(false);
+    }
+  };
+
+  const checkAndRedirect = async (): Promise<void> => {
+    const applicationId = (await UserStoreService.get('applicationId')) as string;
+
+    if (!applicationId) {
+      return navigate(`/login/${search}`);
+    }
+
+    const lastVisitedRoutes = (await UserStoreService.get<Record<string, string>>('lastVisitedRouteByApplicationId')) as Record<string, string>;
+    const lastVisitedRoute = lastVisitedRoutes[applicationId];
+    const channelsPath = `/${urlRoutes.channels.path}/`;
+
+    if (!pathname.includes(applicationId)) {
+      if (lastVisitedRoute) {
+        return navigate(`${lastVisitedRoute}${search}`);
+      }
+
+      return navigate(`${applicationId}${channelsPath}${search}`);
+    }
+  };
+
+  useEffect(() => {
+    checkAndRedirect();
+  }, [isLoggedIn]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  });
+
+  const handleLogout = async (): Promise<void> => {
+    dispatch(signoutThunk());
+  };
+
+  const handleCaretClick = () => setViewUserDetails(!viewUserDetails);
+
+  return (
+    <TopNavigation isLoggedIn={isLoggedIn}>
+      <NavigationLeftSide>
+        {isLoggedIn && applicationId && <MenuIcon onClick={() => setShowMenu(!showMenu)} src={menuIcon} alt="menuIcon" />}
+        <img src={logo} alt={phenixText} />
+      </NavigationLeftSide>
+      {isLoggedIn && applicationId && (
+        <>
+          <User ref={ref} onClick={handleCaretClick} className="user-info">
+            <UserInitials>{userInitials}</UserInitials>
+            <ApplicationId className="testId-applicationId">{applicationId}</ApplicationId>
+            <div className="testId-logoutButton" onClick={handleLogout} onKeyDown={undefined} role="button" tabIndex={-10}>
+              <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
+            </div>
+          </User>
+          {showMenu && <SideMenu showMenu={() => setShowMenu(!showMenu)} />}
+        </>
+      )}
+    </TopNavigation>
+  );
+};
+
+export default Header;

src/components/ui/header/style.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 {colors, mediaPhone} = theme;
+
+export const TopNavigation = styled.default.div<{isLoggedIn: boolean}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  padding: ${paddings.medium};
+  height: 3.5rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  ${({isLoggedIn}) =>
+    isLoggedIn &&
+    styled.css`
+      background-color: ${colors.headerColor};
+      padding: ${paddings.small} ${paddings.xlarge};
+    `}
+`;
+
+export const NavigationLeftSide = styled.default.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const MenuIcon = styled.default.img`
+  margin-right: ${paddings.medium};
+  width: 1.5rem;
+`;
+
+export const User = styled.default.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  color: ${colors.white};
+  gap: ${paddings.small};
+
+  & div[role="button"] {
+    cursor: pointer;
+    padding: ${paddings.xsmall};
+    border-radius: 4px;
+    transition: background-color 0.2s;
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+`;
+
+export const ApplicationId = styled.default.p`
+  margin: 0;
+  padding: 0 ${paddings.small};
+`;
+
+export const UserInitials = styled.default.div`
+  color: ${colors.white};
+  background-color: ${colors.lightBlue};
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-transform: uppercase;
+  ${mediaPhone} {
+    display: none;
+  }
+`;

src/components/ui/header/text.ts

@@ -1,5 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-
+export default {
-export {columns} from './columns-data';
+  applicationIdText: 'Application Id',
+  phenixText: 'Phenix'
+};

src/interfaces/tableProps.ts

@@ -22,14 +22,18 @@ export enum TableHeaderKey {
 interface ICommonTableHeader {
   [TableHeaderKey.Search]?: {
     searchProps?: string[];
+    render?: (key: string) => React.JSX.Element;
   };
 }
 
 export interface ITableWithPaginationHeader extends ICommonTableHeader {
   [TableHeaderKey.AddRow]?: {
     openAddRowModal: () => void;
+    render?: (key: string) => React.JSX.Element;
+  };
+  [TableHeaderKey.SelectType]?: ISelectComponent & {
+    render?: (key: string) => React.JSX.Element;
   };
-  [TableHeaderKey.SelectType]?: ISelectComponent;
 }
 
 export interface ITableWithLoadMoreHeader extends ICommonTableHeader {

src/routers/index.tsx

@@ -1,20 +1,47 @@
 import {BrowserRouter, Route, Routes, Navigate} from 'react-router-dom';
 import {ProtectedRoute} from 'components';
-import {LoginForm, ChannelList, ChannelDetail} from 'views';
+import {LoginForm} from 'views';
+import Header from 'components/ui/header';
+import {lazy, Suspense} from 'react';
+
+const ChannelList = lazy(() => import('views/ChannelList').then(module => ({default: module.ChannelList})));
+const ChannelDetail = lazy(() => import('views/ChannelDetail').then(module => ({default: module.ChannelDetail})));
 
 export default function Router() {
   return (
     <BrowserRouter>
+      <Header />
       <Routes>
         {/* Public routes */}
-        <Route path="/login" element={<LoginForm />} />
+        <Route
+          path="/login"
+          element={
+            <Suspense fallback={null}>
+              <LoginForm />
+            </Suspense>
+          }
+        />
 
         {/* Protected routes */}
         <Route path="/" element={<Navigate to="/channels" replace />} />
-        <Route path="/channels" element={<ProtectedRoute component={<ChannelList />} />} />
+        <Route
-        <Route path="/channels/:channelId" element={<ProtectedRoute component={<ChannelDetail />} />} />
+          path="/:applicationId/channels"
+          element={
+            <Suspense fallback={null}>
+              <ProtectedRoute component={<ChannelList />} />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/channels/:channelId"
+          element={
+            <Suspense fallback={null}>
+              <ProtectedRoute component={<ChannelDetail />} />
+            </Suspense>
+          }
+        />
         {/* Fallback route */}
-        <Route path="*" element={<Navigate to="/login" replace />} />
+        {/* <Route path="*" element={<Navigate to="/login" replace />} /> */}
       </Routes>
     </BrowserRouter>
   );

src/routers/url-routes.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {faStream, faChartBar, faLayerGroup, faCheckSquare, faTh} from '@fortawesome/free-solid-svg-icons';
+
+export default {
+  login: {path: '/login'},
+  channels: {
+    path: 'channels',
+    icon: faStream
+  },
+  rooms: {
+    path: 'rooms',
+    icon: faLayerGroup
+  },
+  analytics: {
+    path: 'analytics',
+    icon: faChartBar
+  },
+  qos: {
+    path: 'qos',
+    icon: faCheckSquare,
+    notSupported: true
+  },
+  dashboard: {
+    path: 'dashboard',
+    icon: faTh
+  }
+};

src/services/Authentication.service.ts

@@ -31,6 +31,10 @@ class AuthenticationService {
     return this._token;
   }
 
+  public hasLoginToken(): boolean {
+    return this._token !== null;
+  }
+
   async authenticate(applicationId: string, secret: string): Promise<AuthenticationResponse> {
     const authenticate = {
       // @ts-expect-error TODO(AZ): phenix-web-proto does not have Typescript types defined definition
@@ -39,8 +43,8 @@ class AuthenticationService {
       deviceId: '',
       platform: PlatformDetectionService.platform,
       platformVersion: PlatformDetectionService.platformVersion,
-      browser: PlatformDetectionService.browser,
+      browser: PlatformDetectionService.browserName,
-      browserVersion: PlatformDetectionService.version,
+      browserVersion: PlatformDetectionService.browserVersion,
       applicationId,
       authenticationToken: secret,
       sessionId: this.sessionId

src/services/EdgeAuth.service.ts

@@ -0,0 +1,18 @@
+// @ts-ignore - phenix-edge-auth doesn't have TypeScript definitions
+import TokenBuilder from 'phenix-edge-auth';
+
+export default class PhenixEdgeAuthService {
+    private constructor() {
+      throw new Error('PhenixEdgeAuthService is a static class that may not be instantiated');
+    }
+  
+    public static createChannelToken({id, secret, channelId}: {id: string; secret: string; channelId: string}): string {
+      return new TokenBuilder()
+        .expiresIn(3600)
+        .withUri('https://pcast-stg.phenixrts.com')
+        .withApplicationId(id)
+        .withSecret(secret)
+        .forChannel(channelId)
+        .build();
+    }
+  }

src/services/PhenixChannel.service.ts

@@ -0,0 +1,24 @@
+import {Channels} from '@phenixrts/sdk';
+import type PhenixChannel from '@phenixrts/sdk/types/sdk/channels/Channel';
+import {ApplicationCredentials, Channel} from '@techniker-me/pcast-api';
+import PhenixEdgeAuthService from './EdgeAuth.service';
+
+
+
+export default class PhenixChannelService {
+  private constructor() {
+    throw new Error('PhenixChannelService is a static class that may not be instantiated');
+  }
+
+  public static subscribeToChannel({id, secret}: ApplicationCredentials, channel: Channel, videoElement: HTMLVideoElement): PhenixChannel {
+    const token = PhenixEdgeAuthService.createChannelToken({id, secret, channelId: channel.channelId});
+
+    console.log('token', token);
+    console.log('channel', channel);
+    
+    return Channels.createChannel({
+      token,
+      videoElement
+    });
+  }
+}

src/services/files/countries_mapping.json

@@ -0,0 +1,179 @@
+{
+  "AF": "Afghanistan",
+  "AO": "Angola",
+  "AL": "Albania",
+  "AE": "United Arab Emirates",
+  "AR": "Argentina",
+  "AM": "Armenia",
+  "AQ": "Antarctica",
+  "TF": "French Southern and Antarctic Lands",
+  "AU": "Australia",
+  "AT": "Austria",
+  "AZ": "Azerbaijan",
+  "BI": "Burundi",
+  "BE": "Belgium",
+  "BJ": "Benin",
+  "BF": "Burkina Faso",
+  "BD": "Bangladesh",
+  "BG": "Bulgaria",
+  "BS": "The Bahamas",
+  "BA": "Bosnia and Herzegovina",
+  "BY": "Belarus",
+  "BZ": "Belize",
+  "BO": "Bolivia",
+  "BR": "Brazil",
+  "BN": "Brunei",
+  "BT": "Bhutan",
+  "BW": "Botswana",
+  "CF": "Central African Republic",
+  "CA": "Canada",
+  "CH": "Switzerland",
+  "CL": "Chile",
+  "CN": "China",
+  "CI": "Ivory Coast",
+  "CM": "Cameroon",
+  "CD": "Democratic Republic of the Congo",
+  "CG": "Republic of the Congo",
+  "CO": "Colombia",
+  "CR": "Costa Rica",
+  "CU": "Cuba",
+  "-99": "Northern Cyprus",
+  "CY": "Cyprus",
+  "CZ": "Czech Republic",
+  "DE": "Germany",
+  "DJ": "Djibouti",
+  "DK": "Denmark",
+  "DO": "Dominican Republic",
+  "DZ": "Algeria",
+  "EC": "Ecuador",
+  "EG": "Egypt",
+  "ER": "Eritrea",
+  "ES": "Spain",
+  "EE": "Estonia",
+  "ET": "Ethiopia",
+  "FI": "Finland",
+  "FJ": "Fiji",
+  "FK": "Falkland Islands",
+  "FR": "France",
+  "GA": "Gabon",
+  "GB": "England",
+  "GE": "Georgia",
+  "GH": "Ghana",
+  "GN": "Guinea",
+  "GM": "Gambia",
+  "GW": "Guinea Bissau",
+  "GQ": "Equatorial Guinea",
+  "GR": "Greece",
+  "GL": "Greenland",
+  "GT": "Guatemala",
+  "GY": "Guyana",
+  "HN": "Honduras",
+  "HR": "Croatia",
+  "HT": "Haiti",
+  "HU": "Hungary",
+  "ID": "Indonesia",
+  "IN": "India",
+  "IE": "Ireland",
+  "IR": "Iran",
+  "IQ": "Iraq",
+  "IS": "Iceland",
+  "IL": "Israel",
+  "IT": "Italy",
+  "JM": "Jamaica",
+  "JO": "Jordan",
+  "JP": "Japan",
+  "KZ": "Kazakhstan",
+  "KE": "Kenya",
+  "KG": "Kyrgyzstan",
+  "KH": "Cambodia",
+  "KR": "South Korea",
+  "OSA": "Kosovo",
+  "KW": "Kuwait",
+  "LA": "Laos",
+  "LB": "Lebanon",
+  "LR": "Liberia",
+  "LY": "Libya",
+  "LK": "Sri Lanka",
+  "LS": "Lesotho",
+  "LT": "Lithuania",
+  "LU": "Luxembourg",
+  "LV": "Latvia",
+  "MA": "Morocco",
+  "MD": "Moldova",
+  "MG": "Madagascar",
+  "MX": "Mexico",
+  "MK": "Macedonia",
+  "ML": "Mali",
+  "MM": "Myanmar",
+  "MNE": "Montenegro",
+  "MN": "Mongolia",
+  "MZ": "Mozambique",
+  "MR": "Mauritania",
+  "MW": "Malawi",
+  "MY": "Malaysia",
+  "NA": "Namibia",
+  "NC": "New Caledonia",
+  "NE": "Niger",
+  "NG": "Nigeria",
+  "NI": "Nicaragua",
+  "NL": "Netherlands",
+  "NO": "Norway",
+  "NP": "Nepal",
+  "NZ": "New Zealand",
+  "OM": "Oman",
+  "PK": "Pakistan",
+  "PA": "Panama",
+  "PE": "Peru",
+  "PH": "Philippines",
+  "PG": "Papua New Guinea",
+  "PL": "Poland",
+  "PR": "Puerto Rico",
+  "KP": "North Korea",
+  "PT": "Portugal",
+  "PY": "Paraguay",
+  "QA": "Qatar",
+  "RO": "Romania",
+  "RU": "Russia",
+  "RW": "Rwanda",
+  "EH": "Western Sahara",
+  "SA": "Saudi Arabia",
+  "SD": "Sudan",
+  "SDS": "South Sudan",
+  "SN": "Senegal",
+  "SB": "Solomon Islands",
+  "SL": "Sierra Leone",
+  "SV": "El Salvador",
+  "ABV": "Somaliland",
+  "SO": "Somalia",
+  "SRB": "Republic of Serbia",
+  "SR": "Suriname",
+  "SK": "Slovakia",
+  "SI": "Slovenia",
+  "SE": "Sweden",
+  "SZ": "Swaziland",
+  "SY": "Syria",
+  "TD": "Chad",
+  "TG": "Togo",
+  "TH": "Thailand",
+  "TJ": "Tajikistan",
+  "TM": "Turkmenistan",
+  "TL": "East Timor",
+  "TT": "Trinidad and Tobago",
+  "TN": "Tunisia",
+  "TR": "Turkey",
+  "TW": "Taiwan",
+  "TZ": "United Republic of Tanzania",
+  "UG": "Uganda",
+  "UA": "Ukraine",
+  "UY": "Uruguay",
+  "US": "USA",
+  "UZ": "Uzbekistan",
+  "VE": "Venezuela",
+  "VN": "Vietnam",
+  "VU": "Vanuatu",
+  "PS": "West Bank",
+  "YE": "Yemen",
+  "ZA": "South Africa",
+  "ZM": "Zambia",
+  "ZW": "Zimbabwe"
+}

src/services/net/websockets/PhenixWebSocket.ts

@@ -2,6 +2,7 @@ import Strings from 'lang/Strings';
 import ILogger from '../../logger/LoggerInterface';
 import LoggerFactory from '../../logger/LoggerFactory';
 import {Subject, ReadOnlySubject} from '@techniker-me/tools';
+// @ts-expect-error TODO(AZ): phenix-web-proto does not have Typescript types defined definition
 import {MQWebSocket} from 'phenix-web-proto'; //TODO(AZ): add types
 import PCastProtobuf from './proto/pcast.proto.json' with {type: 'json'};
 import AnalyticsProtobuf from './proto/Analytics.proto.json' with {type: 'json'};

src/services/user-store/IUserDataStore.ts

@@ -1,4 +1,4 @@
 export default interface IUserDataStore {
-  get(key: string, defaultValue: string): Promise<string>;
+  get<T>(key: string, defaultValue?: T): Promise<T>;
   set(key: string, value: string): Promise<void>;
 }

src/store/action/preferred-time-format.ts

@@ -0,0 +1,128 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {Dispatch} from 'redux';
+import userStore from 'services/user-store';
+import {TimeFormats} from 'utility';
+import {transformToPortalError} from 'utility/error-handler';
+
+/**
+ * ACTION TYPES
+ */
+
+export const GET_PREFERRED_TIME_FORMAT = 'preferred-time-format::GET_PREFERRED_TIME_FORMAT' as const;
+export const GET_PREFERRED_TIME_FORMAT_DONE = 'preferred-time-format::GET_PREFERRED_TIME_FORMAT_DONE' as const;
+export const GET_PREFERRED_TIME_FORMAT_ERROR = 'preferred-time-format::GET_PREFERRED_TIME_FORMAT_ERROR' as const;
+export const SET_PREFERRED_TIME_FORMAT = 'preferred-time-format::SET_PREFERRED_TIME_FORMAT' as const;
+export const SET_PREFERRED_TIME_FORMAT_DONE = 'preferred-time-format::SET_PREFERRED_TIME_FORMAT_DONE' as const;
+export const SET_PREFERRED_TIME_FORMAT_ERROR = 'preferred-time-format::SET_PREFERRED_TIME_FORMAT_ERROR' as const;
+
+/**
+ * INTERFACES
+ */
+
+interface IRequestGetPreferredTimeFormat {
+  type: typeof GET_PREFERRED_TIME_FORMAT;
+}
+interface IReceiveGetPreferredTimeFormat {
+  type: typeof GET_PREFERRED_TIME_FORMAT_DONE;
+  payload: {data: TimeFormats};
+}
+interface IFailedGetPreferredTimeFormat {
+  type: typeof GET_PREFERRED_TIME_FORMAT_ERROR;
+  error: null | string;
+}
+interface IRequestSetPreferredTimeFormat {
+  type: typeof SET_PREFERRED_TIME_FORMAT;
+}
+interface IReceiveSetPreferredTimeFormat {
+  type: typeof SET_PREFERRED_TIME_FORMAT_DONE;
+  payload: {data: TimeFormats};
+}
+interface IFailedSetPreferredTimeFormat {
+  type: typeof SET_PREFERRED_TIME_FORMAT_ERROR;
+  error: null | string;
+}
+
+export type GetPreferredTimeFormatActionType = IRequestGetPreferredTimeFormat | IReceiveGetPreferredTimeFormat | IFailedGetPreferredTimeFormat;
+export type SetPreferredTimeFormatActionType = IRequestSetPreferredTimeFormat | IReceiveSetPreferredTimeFormat | IFailedSetPreferredTimeFormat;
+
+interface IGetPreferredTimeFormatActions {
+  request: () => GetPreferredTimeFormatActionType;
+  receive: (payload: {data: TimeFormats}) => GetPreferredTimeFormatActionType;
+  failed: (error: null | string) => GetPreferredTimeFormatActionType;
+}
+interface ISetPreferredTimeFormatActions {
+  request: () => SetPreferredTimeFormatActionType;
+  receive: (payload: {data: TimeFormats}) => SetPreferredTimeFormatActionType;
+  failed: (error: null | string) => SetPreferredTimeFormatActionType;
+}
+
+/**
+ * ACTIONS
+ */
+
+const getPreferredTimeFormatActions: IGetPreferredTimeFormatActions = {
+  request: () => ({type: GET_PREFERRED_TIME_FORMAT}),
+  receive: payload => ({
+    type: GET_PREFERRED_TIME_FORMAT_DONE,
+    payload
+  }),
+  failed: error => ({
+    type: GET_PREFERRED_TIME_FORMAT_ERROR,
+    error
+  })
+};
+
+export const getPreferredTimeFormat =
+  () =>
+  async (dispatch: Dispatch<GetPreferredTimeFormatActionType>): Promise<void> => {
+    const {request, receive, failed} = getPreferredTimeFormatActions;
+
+    dispatch(request());
+
+    try {
+      let preferredTimeFormat = await userStore.get('timeFormat');
+
+      if (!preferredTimeFormat) {
+        await userStore.set('timeFormat', TimeFormats.Utc);
+        preferredTimeFormat = await userStore.get('timeFormat');
+      }
+
+      dispatch(receive({data: preferredTimeFormat as TimeFormats}));
+    } catch (e) {
+      const {message} = transformToPortalError(e);
+
+      dispatch(failed(message || 'An error occurred while getting the preferred time format'));
+    }
+  };
+
+const setPreferredTimeFormatActions: ISetPreferredTimeFormatActions = {
+  request: () => ({type: SET_PREFERRED_TIME_FORMAT}),
+  receive: payload => ({
+    type: SET_PREFERRED_TIME_FORMAT_DONE,
+    payload
+  }),
+  failed: error => ({
+    type: SET_PREFERRED_TIME_FORMAT_ERROR,
+    error
+  })
+};
+
+export const setPreferredTimeFormat =
+  (format: TimeFormats) =>
+  async (dispatch: Dispatch<SetPreferredTimeFormatActionType>): Promise<void> => {
+    const {request, receive, failed} = setPreferredTimeFormatActions;
+
+    dispatch(request());
+
+    try {
+      await userStore.set('timeFormat', format);
+
+      dispatch(receive({data: format}));
+    } catch (e) {
+      const {message} = transformToPortalError(e);
+
+      dispatch(failed(message || 'An error occurred while setting the preferred time format'));
+    }
+  };

src/store/middlewares/authenticationMiddleware.ts

@@ -1,5 +1,5 @@
 import {
-  authenticateCredentialsThunk,
+  authenticateCredentials,
   selectIsAuthenticated,
   selectIsLoading,
   selectApplicationId,
@@ -56,7 +56,7 @@ export const authenticateRequestMiddleware: Middleware = store => next => async
   try {
     console.log('[authenticateRequest] Attempting auto-authentication');
     // Use the Redux thunk to properly update the state
-    const authResult = await store.dispatch(authenticateCredentialsThunk({applicationId, secret}) as any);
+    const authResult = await store.dispatch(authenticateCredentials({applicationId, secret}) as any);
 
     if (authResult.type.endsWith('/rejected') || authResult.payload === 'Authentication failed') {
       console.log('[authenticateRequest] Authentication failed');

src/store/slices/Authentication.slice.ts

@@ -60,7 +60,7 @@ export const selectHasRole = createSelector([selectAuthentication, (_, role: str
 
 export const selectIsOnline = createSelector([selectAuthentication], authentication => authentication.status === 'Online');
 
-const authenticateCredentialsThunk = createAsyncThunk<IPhenixWebSocketResponse, {applicationId: string; secret: string}>(
+const authenticateCredentials = createAsyncThunk<IPhenixWebSocketResponse, {applicationId: string; secret: string}>(
   'authentication/authenticate',
   async (credentials, {rejectWithValue}) => {
     try {
@@ -76,7 +76,7 @@ const authenticateCredentialsThunk = createAsyncThunk<IPhenixWebSocketResponse,
   }
 );
 
-const signoutThunk = createAsyncThunk('authentication/signout', async (_, {rejectWithValue}) => {
+export const signoutThunk = createAsyncThunk('authentication/signout', async (_, {rejectWithValue}) => {
   try {
     return await AuthenticationService.signout();
   } catch (error) {
@@ -95,8 +95,15 @@ const authenticationSlice = createSlice({
       state.isLoading = action.payload;
     },
     setCredentials: (state, action: PayloadAction<{applicationId: string; secret: string}>) => {
-      state.applicationId = action.payload.applicationId;
+      const {applicationId, secret} = action.payload;
-      state.secret = action.payload.secret;
+
+      if (applicationId) {
+        state.applicationId = applicationId;
+      }
+
+      if (secret) {
+        state.secret = secret;
+      }
     },
     clearState: state => {
       state.applicationId = null;
@@ -125,15 +132,14 @@ const authenticationSlice = createSlice({
   },
   extraReducers: builder => {
     builder
-      .addCase(authenticateCredentialsThunk.pending, state => {
+      .addCase(authenticateCredentials.pending, state => {
         state.isLoading = true;
         state.error = null;
       })
-      .addCase(authenticateCredentialsThunk.fulfilled, (state, action) => {
+      .addCase(authenticateCredentials.fulfilled, (state, action) => {
         const authenticationResponse = action.payload;
 
         if (authenticationResponse.status === 'ok') {
-          state.applicationId = authenticationResponse.applicationId ?? null;
           state.sessionId = authenticationResponse.sessionId ?? null;
           state.isAuthenticated = true;
           state.roles = authenticationResponse.roles ?? [];
@@ -156,7 +162,7 @@ const authenticationSlice = createSlice({
           state.isLoading = false;
         }
       })
-      .addCase(authenticateCredentialsThunk.rejected, (state, action) => {
+      .addCase(authenticateCredentials.rejected, (state, action) => {
         state.applicationId = null;
         state.sessionId = null;
         state.isAuthenticated = false;
@@ -190,5 +196,5 @@ const authenticationSlice = createSlice({
 });
 
 export const {setUnauthorized, setIsLoading, setCredentials, clearState, setSessionId, setError} = authenticationSlice.actions;
-export {authenticateCredentialsThunk};
+export {authenticateCredentials};
 export default authenticationSlice.reducer;

src/store/slices/PreferredTimeFormat.slice.ts

@@ -0,0 +1,27 @@
+import {createSlice, PayloadAction} from '@reduxjs/toolkit';
+import {TimeFormats} from 'utility';
+
+export interface IPreferredTimeFormatState {
+  isLoading: boolean;
+  error: null | string;
+  timeFormat: TimeFormats;
+}
+
+export const initialPreferredTimeFormatState: IPreferredTimeFormatState = {
+  isLoading: false,
+  error: null,
+  timeFormat: TimeFormats.Utc
+};
+
+export const preferredTimeFormatSlice = createSlice({
+  name: 'preferredTimeFormat',
+  initialState: initialPreferredTimeFormatState,
+  reducers: {
+    setPreferredTimeFormat: (state: IPreferredTimeFormatState, action: PayloadAction<TimeFormats>) => {
+      state.timeFormat = action.payload;
+    }
+  }
+});
+
+export const {setPreferredTimeFormat} = preferredTimeFormatSlice.actions;
+export default preferredTimeFormatSlice.reducer;

src/store/store.ts

@@ -3,6 +3,7 @@ import AuthenticationReducer from './slices/Authentication.slice';
 import ChannelsReducer from './slices/Channels.slice';
 import ChannelsPublishingReducer from './action/channels-publishing';
 import ScreensReducer from './action/screens';
+import PreferredTimeFormatReducer from './slices/PreferredTimeFormat.slice';
 import {authenticateRequestMiddleware, loggerMiddleware, vanillaPromiseMiddleware} from './middlewares';
 
 const store = configureStore({
@@ -10,7 +11,8 @@ const store = configureStore({
     authentication: AuthenticationReducer,
     channels: ChannelsReducer,
     channelsPublishing: ChannelsPublishingReducer,
-    screens: ScreensReducer
+    screens: ScreensReducer,
+    preferredTimeFormat: PreferredTimeFormatReducer
   },
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({

src/utility/custom-hooks.ts

@@ -29,7 +29,7 @@ export const useComponentVisible = (
   setIsComponentVisible: Dispatch<SetStateAction<boolean>>;
 } => {
   const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement | null>(null);
   const handleClickOutside = () => {
     setIsComponentVisible(false);
   };
@@ -98,7 +98,7 @@ export const useLoginStatus = (applicationId: string): [boolean] => {
   const [isLoggedIn, setLoginStatus] = useState(false);
 
   useEffect(() => {
-    AuthService.hasLoginToken().then((response: boolean) => setLoginStatus(response));
+    setLoginStatus(AuthService.hasLoginToken());
   }, [applicationId]);
 
   return [isLoggedIn];

src/utility/date.ts

@@ -26,7 +26,9 @@ export const fetchPlatformTimeFromServer = async (): Promise<void> => {
   const localTimeBeforeCall = moment.utc().utc().valueOf();
   const headers = new Headers();
 
-  headers.set('Authorization', `Basic ${await userStore.get(AuthService.token, '')}`);
+  if (AuthService.token) {
+    headers.set('Authorization', `Basic ${await userStore.get(AuthService.token, '')}`);
+  }
 
   const response = await fetch('https://phenixrts.com/video/dash/time.txt', {headers});
   const localTimeAfterCall = moment.utc().utc().valueOf();
@@ -44,11 +46,7 @@ export const getAdjustedTime = (): Moment => {
 };
 
 export const getTimezoneAbbreviation = (date: Date): string => {
-  const timezone = date
+  const timezone = date.toString().match(/\(.+\)/g)?.[0] ?? ''.replace('(', '') ?? ''.replace(')', '');
-    .toString()
-    .match(/\(.+\)/g)[0]
-    .replace('(', '')
-    .replace(')', '');
   let abbreviation = '';
 
   timezone.split(' ').forEach(word => {

src/views/ChannelList/ChannelList.tsx

@@ -1,11 +1,10 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import React, {useEffect, useRef, useState, useCallback} from 'react';
+import React, {useEffect, useState} from 'react';
 import {channelListErrorMessages} from 'constants/index';
-import {ITableSortSearch} from 'interfaces/tableProps';
 
-import {AppDispatch, useAppDispatch, useAppSelector} from 'store';
+import {useAppDispatch, useAppSelector} from 'store';
 import {selectChannelList, selectChannelsLoading, selectChannelsError, listChannels} from 'store/action/channels';
 
 import {LoadingWheel as Loader} from 'components/loaders';
@@ -14,31 +13,12 @@ import {TableHeaderKey, ITableWithPaginationHeader} from 'components/table';
 import {TableWithPagination} from 'components';
 
 import {Error} from 'components/error-renderer/style';
-import {columns} from './columns-config';
+import {createColumnsWithContext} from './columns-data';
 import {CreateChannelModal} from './create-channel';
 
-const POLLING_INTERVAL = 5000; // 5 seconds
-const ChannelListLoading = () => (
-  <Main>
-    <Loader />
-  </Main>
-);
-
-const ChannelListError = ({error, dispatch}: {error: string, dispatch: AppDispatch}) => (
-  <Body className="table-container">
-    <Error>
-      {(channelListErrorMessages as Record<string, string>)[error] || error}
-      <button onClick={() => dispatch(listChannels())} style={{marginLeft: '10px', padding: '5px 10px'}}>
-        Retry
-      </button>
-    </Error>
-  </Body>
-);
-
-
 export const ChannelList = (): React.JSX.Element => {
   const dispatch = useAppDispatch();
-  const interval = useRef<NodeJS.Timeout | null>(null);
+  const [hasLoaded, setHasLoaded] = useState(false);
 
   // Redux state
   const channels = useAppSelector(selectChannelList);
@@ -48,80 +28,57 @@ export const ChannelList = (): React.JSX.Element => {
   // Local state
   const [isCreateChannelModalOpened, setCreateChannelModalOpened] = useState(false);
 
-  // Memoized columns to prevent unnecessary re-renders
+  // Create columns with React context for channel name navigation
-  const channelsColumns = React.useMemo(() => ({...columns}), []);
+  const columns = React.useMemo(() => createColumnsWithContext(), []);
 
   // Load channels on component mount
   useEffect(() => {
     dispatch(listChannels());
   }, [dispatch]);
 
-  // // Set up polling for channel updates
+  // Screen header configuration
-  // useEffect(() => {
+  const screenHeader: ITableWithPaginationHeader = {
-  //   if (interval.current) {
+    [TableHeaderKey.Search]: {},
-  //     clearInterval(interval.current);
+    [TableHeaderKey.AddRow]: {
-  //   }
+      openAddRowModal: () => setCreateChannelModalOpened(true)
+    }
+  };
 
-  //   // Only start polling if we have channels and not currently fetching
+  // Handle loading state
-  //   if (channels.length > 0 && !isFetching) {
+  if (isFetching && !hasLoaded) {
-  //     interval.current = setInterval(() => {
+    setHasLoaded(true);
-  //       dispatch(listChannels());
+    return (
-  //     }, POLLING_INTERVAL);
+      <Main>
-  //   }
+        <Loader />
+      </Main>
+    );
+  }
 
-  //   return () => {
+  // Handle error state
-  //     if (interval.current) {
-  //       clearInterval(interval.current);
-  //     }
-  //   };
-  // }, [dispatch, channels.length, isFetching]);
-
-  // Memoized screen header to prevent unnecessary re-renders
-  const screenHeader: ITableWithPaginationHeader = React.useMemo(
-    () => ({
-      [TableHeaderKey.Search]: {},
-      [TableHeaderKey.AddRow]: {
-        openAddRowModal: () => {
-          setCreateChannelModalOpened(true);
-        }
-      }
-    }),
-    []
-  );
-
-  // Callback for handling search and sort changes (no-op since TableWithPagination handles internally)
-  const changeScreenProps = useCallback((_data: Partial<ITableSortSearch>) => {
-    // TableWithPagination handles search and sort internally
-    // This is kept for compatibility with the component interface
-  }, []);
-
-  // Memoized callback for refreshing channel list
-  const refreshChannelList = useCallback(async (): Promise<void> => {
-    await dispatch(listChannels());
-  }, [dispatch]);
-
-  // Early return for error state
   if (error) {
-    return <ChannelListError error={error} dispatch={dispatch} />;
+    return (
+      <Body className="table-container">
+        <Error>
+          {(channelListErrorMessages as Record<string, string>)[error] || error}
+          <button onClick={() => dispatch(listChannels())} style={{marginLeft: '10px', padding: '5px 10px'}}>
+            Retry
+          </button>
+        </Error>
+      </Body>
+    );
   }
 
-  if (isFetching) {
+  return (
-    return <ChannelListLoading />;
-  }
-
-  return (<>
     <Body className="table-container">
-      <TableWithPagination
+      <TableWithPagination title="Channels" screenHeader={screenHeader} columns={columns} data={channels as any[]} paginationItemText="channels" />
-        title="Channels"
+      {isCreateChannelModalOpened && (
-        screenHeader={screenHeader}
+        <CreateChannelModal
-        columns={channelsColumns}
+          getChannelList={async () => {
-        data={channels as any[]}
+            await dispatch(listChannels());
-        paginationItemText="channels"
+          }}
-        changeSortProps={changeScreenProps}
+          setCreateChannelModalOpened={setCreateChannelModalOpened}
-        changeSearch={changeScreenProps}
+        />
-      />
+      )}
-      {isCreateChannelModalOpened && <CreateChannelModal getChannelList={refreshChannelList} setCreateChannelModalOpened={setCreateChannelModalOpened} />}
     </Body>
-  </>
   );
 };

src/views/ChannelList/columns-data.tsx

@@ -1,14 +1,50 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
+import React from 'react';
 import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
-import {CellType, ColumnsType} from 'components/table';
+import {CellType, ColumnsType, DataRowType} from 'components/table';
 import {ChannelIconMenu} from 'components/channel-icon-menu';
 import {IconMenuPosition} from 'components/icon-menu/types';
 import {ChannelPublishingStateIndicator} from './channel-publishing-state-indicator';
 import {theme} from 'theme';
+import {useAppDispatch} from 'store';
+import {setSelectedChannel} from 'store/slices/Channels.slice';
+import {useNavigate} from 'react-router-dom';
+import styled from 'styled-components';
 
-export const columns: ColumnsType = {
+const ChannelNameLink = styled.a`
+  color: ${theme.colors.linkBlue};
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+// Component that needs to be rendered within a React context
+const ChannelNameCellComponent = (row?: DataRowType) => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (row?.channelId && row?.name) {
+      dispatch(setSelectedChannel(row as any));
+      navigate(`/channels/${row.channelId}`);
+    }
+  };
+
+  return (
+    <ChannelNameLink onClick={handleClick}>
+      {row?.name || 'N/A'}
+    </ChannelNameLink>
+  );
+};
+
+// Factory function to create columns with React context
+export const createColumnsWithContext = (): ColumnsType => ({
   indicator: {
     title: '',
     hasBorder: false,
@@ -18,8 +54,8 @@ export const columns: ColumnsType = {
   },
   name: {
     title: 'Channel Name',
-    type: CellType.Link,
+    type: CellType.Component,
-    textCell: {propName: 'name'},
+    renderCell: ChannelNameCellComponent,
     thStyle: {
       textAlign: 'left',
       paddingLeft: 16
@@ -60,4 +96,4 @@ export const columns: ColumnsType = {
       }
     }
   }
-};
+});

src/views/LoginForm/LoginForm.tsx

@@ -4,7 +4,7 @@
 import {FC, useState, useEffect} from 'react';
 import text from './text';
 import {useAppDispatch, useAppSelector} from 'store/index';
-import {authenticateCredentialsThunk, selectIsLoading, selectError, setError, selectIsAuthenticated, setCredentials} from 'store/slices/Authentication.slice';
+import {authenticateCredentials, selectIsLoading, selectError, setError, selectIsAuthenticated, setCredentials} from 'store/slices/Authentication.slice';
 import {
   LoginFormBackground,
   LogoContainer,
@@ -38,7 +38,7 @@ export const LoginForm: FC = () => {
 
   useEffect(() => {
     if (isAuthenticated) {
-      navigate('/channels', {replace: true});
+      navigate(`/${applicationId}/channels`, {replace: true});
     }
   }, [isAuthenticated, navigate]);
 
@@ -55,11 +55,10 @@ export const LoginForm: FC = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     dispatch(setCredentials({applicationId, secret}));
-    dispatch(authenticateCredentialsThunk({applicationId, secret}));
+    dispatch(authenticateCredentials({applicationId, secret}));
   };
 
   const handleInputChange = (setter: (value: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Clear error when user starts typing
     if (error) {
       dispatch(setError(null));
     }