Added metrics bar and date range to sessions.

src/components/common/DataTable.tsx

@@ -4,13 +4,13 @@ import { Banner, Loading, SearchField } from 'react-basics';
 import { useMessages, useNavigation } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
-import { FilterQueryResult } from 'lib/types';
+import { PagedQueryResult } from 'lib/types';
 import styles from './DataTable.module.css';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
 export interface DataTableProps {
-  queryResult: FilterQueryResult<any>;
+  queryResult: PagedQueryResult<any>;
   searchDelay?: number;
   allowSearch?: boolean;
   allowPaging?: boolean;

src/components/common/TypeIcon.tsx

@@ -1,17 +1,24 @@
+import { ReactNode } from 'react';
+
 export function TypeIcon({
   type,
   value,
+  children,
 }: {
   type: 'browser' | 'country' | 'device' | 'os';
   value: string;
+  children?: ReactNode;
 }) {
   return (
-    <img
-      src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
-      alt={value}
-      width={type === 'country' ? undefined : 16}
-      height={type === 'country' ? undefined : 16}
-    />
+    <>
+      <img
+        src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
+        alt={value}
+        width={type === 'country' ? undefined : 16}
+        height={type === 'country' ? undefined : 16}
+      />
+      {children}
+    </>
   );
 }