Changed import path.

src/components/charts/BarChart.tsx

@@ -1,7 +1,7 @@
-import BarChartTooltip from 'components/charts/BarChartTooltip';
-import Chart, { ChartProps } from 'components/charts/Chart';
-import { useTheme } from 'components/hooks';
-import { renderNumberLabels } from 'lib/charts';
+import BarChartTooltip from '@/components/charts/BarChartTooltip';
+import Chart, { ChartProps } from '@/components/charts/Chart';
+import { useTheme } from '@/components/hooks';
+import { renderNumberLabels } from '@/lib/charts';
 import { useMemo, useState } from 'react';
 
 export interface BarChartProps extends ChartProps {

src/components/charts/BarChartTooltip.tsx

@@ -1,6 +1,6 @@
-import { useLocale } from 'components/hooks';
-import { formatDate } from 'lib/date';
-import { formatLongCurrency, formatLongNumber } from 'lib/format';
+import { useLocale } from '@/components/hooks';
+import { formatDate } from '@/lib/date';
+import { formatLongCurrency, formatLongNumber } from '@/lib/format';
 import { Flexbox, StatusLight } from 'react-basics';
 
 const formats = {

src/components/charts/BubbleChart.tsx

@@ -1,7 +1,7 @@
-import { Chart, ChartProps } from 'components/charts/Chart';
+import { Chart, ChartProps } from '@/components/charts/Chart';
 import { useState } from 'react';
 import { StatusLight } from 'react-basics';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumber } from '@/lib/format';
 
 export interface BubbleChartProps extends ChartProps {
   type?: 'bubble';

src/components/charts/Chart.tsx

@@ -2,9 +2,9 @@ import { useState, useRef, useEffect, useMemo, ReactNode } from 'react';
 import { Loading } from 'react-basics';
 import classNames from 'classnames';
 import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto';
-import HoverTooltip from 'components/common/HoverTooltip';
-import Legend from 'components/metrics/Legend';
-import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import HoverTooltip from '@/components/common/HoverTooltip';
+import Legend from '@/components/metrics/Legend';
+import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import styles from './Chart.module.css';
 
 export interface ChartProps {

src/components/charts/PieChart.tsx

@@ -1,7 +1,7 @@
-import { Chart, ChartProps } from 'components/charts/Chart';
+import { Chart, ChartProps } from '@/components/charts/Chart';
 import { useState } from 'react';
 import { StatusLight } from 'react-basics';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumber } from '@/lib/format';
 
 export interface PieChartProps extends ChartProps {
   type?: 'doughnut' | 'pie';

src/components/common/Avatar.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { createAvatar } from '@dicebear/core';
 import { lorelei } from '@dicebear/collection';
-import { getColor, getPastel } from 'lib/colors';
+import { getColor, getPastel } from '@/lib/colors';
 
 const lib = lorelei;
 

src/components/common/ConfirmationForm.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export interface ConfirmationFormProps {
   message: ReactNode;

src/components/common/DataTable.tsx

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Loading, SearchField } from 'react-basics';
-import { useMessages, useNavigation } from 'components/hooks';
-import Empty from 'components/common/Empty';
-import Pager from 'components/common/Pager';
-import { PagedQueryResult } from 'lib/types';
+import { useMessages, useNavigation } from '@/components/hooks';
+import Empty from '@/components/common/Empty';
+import Pager from '@/components/common/Pager';
+import { PagedQueryResult } from '@/lib/types';
 import styles from './DataTable.module.css';
-import { LoadingPanel } from 'components/common/LoadingPanel';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 const DEFAULT_SEARCH_DELAY = 600;
 

src/components/common/Empty.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './Empty.module.css';
 
 export interface EmptyProps {

src/components/common/EmptyPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Icon, Text, Flexbox } from 'react-basics';
-import Logo from 'assets/logo.svg';
+import Logo from '@/assets/logo.svg';
 
 export interface EmptyPlaceholderProps {
   message?: string;

src/components/common/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './ErrorBoundary.module.css';
 
 const logError = (error: Error, info: ErrorInfo) => {

src/components/common/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();

src/components/common/FilterLink.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useMessages, useNavigation } from 'components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
 import { ReactNode } from 'react';
 import { Icon, Icons } from 'react-basics';

src/components/common/LinkButton.tsx

@@ -1,8 +1,8 @@
+import { ReactNode } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { useLocale } from 'components/hooks';
+import { useLocale } from '@/components/hooks';
 import styles from './LinkButton.module.css';
-import { ReactNode } from 'react';
 
 export interface LinkButtonProps {
   href: string;

src/components/common/LoadingPanel.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Loading } from 'react-basics';
-import ErrorMessage from 'components/common/ErrorMessage';
-import Empty from 'components/common/Empty';
+import ErrorMessage from '@/components/common/ErrorMessage';
+import Empty from '@/components/common/Empty';
 import styles from './LoadingPanel.module.css';
 
 export function LoadingPanel({

src/components/common/Pager.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Button, Icon, Icons } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './Pager.module.css';
 
 export interface PagerProps {

src/components/common/TypeConfirmationForm.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
   SubmitButton,
 } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export function TypeConfirmationForm({
   confirmationValue,

src/components/hooks/queries/useConfig.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import useStore, { setConfig } from 'store/app';
-import { getConfig } from 'app/actions/getConfig';
+import useStore, { setConfig } from '@/store/app';
+import { getConfig } from '@/app/actions/getConfig';
 
 export function useConfig() {
   const { config } = useStore();

src/components/hooks/queries/useLogin.ts

@@ -1,5 +1,5 @@
 import { UseQueryResult } from '@tanstack/react-query';
-import useStore, { setUser } from 'store/app';
+import useStore, { setUser } from '@/store/app';
 import { useApi } from '../useApi';
 
 const selector = (state: { user: any }) => state.user;

src/components/hooks/queries/useRealtime.ts

@@ -1,6 +1,6 @@
-import { useTimezone } from 'components/hooks';
-import { REALTIME_INTERVAL } from 'lib/constants';
-import { RealtimeData } from 'lib/types';
+import { useTimezone } from '@/components/hooks';
+import { REALTIME_INTERVAL } from '@/lib/constants';
+import { RealtimeData } from '@/lib/types';
 import { useApi } from '../useApi';
 
 export function useRealtime(websiteId: string) {

src/components/hooks/queries/useShareToken.ts

@@ -1,4 +1,4 @@
-import useStore, { setShareToken } from 'store/app';
+import useStore, { setShareToken } from '@/store/app';
 import { useApi } from '../useApi';
 
 const selector = (state: { shareToken: string }) => state.shareToken;

src/components/hooks/queries/useWebsiteSessions.ts

@@ -1,7 +1,7 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import useModified from '../useModified';
-import { useFilterParams } from 'components/hooks/useFilterParams';
+import { useFilterParams } from '@/components/hooks/useFilterParams';
 
 export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
   const { get } = useApi();

src/components/hooks/queries/useWebsiteSessionsWeekly.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import useModified from '../useModified';
-import { useFilterParams } from 'components/hooks/useFilterParams';
+import { useFilterParams } from '@/components/hooks/useFilterParams';
 
 export function useWebsiteSessionsWeekly(
   websiteId: string,

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useCountryNames, useRegionNames } from 'components/hooks';
+import { useCountryNames, useRegionNames } from '@/components/hooks';
 import useLocale from '../useLocale';
 
 export function useWebsiteValues({

src/components/hooks/useApi.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import * as reactQuery from '@tanstack/react-query';
-import { getClientAuthToken } from 'lib/client';
-import { SHARE_TOKEN_HEADER } from 'lib/constants';
-import { httpGet, httpPost, httpPut, httpDelete } from 'lib/fetch';
-import useStore from 'store/app';
+import { getClientAuthToken } from '@/lib/client';
+import { SHARE_TOKEN_HEADER } from '@/lib/constants';
+import { httpGet, httpPost, httpPut, httpDelete } from '@/lib/fetch';
+import useStore from '@/store/app';
 
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 

src/components/hooks/useCountryNames.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { httpGet } from 'lib/fetch';
+import { httpGet } from '@/lib/fetch';
 import enUS from '../../../public/intl/country/en-US.json';
 
 const countryNames = {

src/components/hooks/useDateRange.ts

@@ -1,9 +1,9 @@
-import { getMinimumUnit, parseDateRange } from 'lib/date';
-import { setItem } from 'lib/storage';
-import { DATE_RANGE_CONFIG, DEFAULT_DATE_COMPARE, DEFAULT_DATE_RANGE } from 'lib/constants';
-import websiteStore, { setWebsiteDateRange, setWebsiteDateCompare } from 'store/websites';
-import appStore, { setDateRange } from 'store/app';
-import { DateRange } from 'lib/types';
+import { getMinimumUnit, parseDateRange } from '@/lib/date';
+import { setItem } from '@/lib/storage';
+import { DATE_RANGE_CONFIG, DEFAULT_DATE_COMPARE, DEFAULT_DATE_RANGE } from '@/lib/constants';
+import websiteStore, { setWebsiteDateRange, setWebsiteDateCompare } from '@/store/websites';
+import appStore, { setDateRange } from '@/store/app';
+import { DateRange } from '@/lib/types';
 import { useLocale } from './useLocale';
 import { useApi } from './useApi';
 

src/components/hooks/useFilters.ts

@@ -1,5 +1,5 @@
 import { useMessages } from './useMessages';
-import { OPERATORS } from 'lib/constants';
+import { OPERATORS } from '@/lib/constants';
 
 export function useFilters() {
   const { formatMessage, labels } = useMessages();

src/components/hooks/useFormat.ts

@@ -1,5 +1,5 @@
 import useMessages from './useMessages';
-import { BROWSERS, OS_NAMES } from 'lib/constants';
+import { BROWSERS, OS_NAMES } from '@/lib/constants';
 import useLocale from './useLocale';
 import useCountryNames from './useCountryNames';
 import useLanguageNames from './useLanguageNames';

src/components/hooks/useLanguageNames.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { httpGet } from 'lib/fetch';
+import { httpGet } from '@/lib/fetch';
 import enUS from '../../../public/intl/language/en-US.json';
 
 const languageNames = {

src/components/hooks/useLocale.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { httpGet } from 'lib/fetch';
-import { setItem } from 'lib/storage';
-import { LOCALE_CONFIG } from 'lib/constants';
-import { getDateLocale, getTextDirection } from 'lib/lang';
-import useStore, { setLocale } from 'store/app';
+import { httpGet } from '@/lib/fetch';
+import { setItem } from '@/lib/storage';
+import { LOCALE_CONFIG } from '@/lib/constants';
+import { getDateLocale, getTextDirection } from '@/lib/lang';
+import useStore, { setLocale } from '@/store/app';
 import { useForceUpdate } from './useForceUpdate';
 import enUS from '../../../public/intl/country/en-US.json';
 

src/components/hooks/useMessages.ts

@@ -1,5 +1,5 @@
 import { useIntl, FormattedMessage } from 'react-intl';
-import { messages, labels } from 'components/messages';
+import { messages, labels } from '@/components/messages';
 
 export function useMessages(): any {
   const intl = useIntl();

src/components/hooks/useModified.ts

@@ -1,4 +1,4 @@
-import useStore from 'store/modified';
+import useStore from '@/store/modified';
 
 export function useModified(key?: string) {
   const modified = useStore(state => state?.[key]);

src/components/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { buildUrl } from 'lib/url';
+import { buildUrl } from '@/lib/url';
 
 export function useNavigation(): {
   pathname: string;

src/components/hooks/usePagedQuery.ts

@@ -1,6 +1,6 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState } from 'react';
-import { PageResult, PageParams, PagedQueryResult } from 'lib/types';
+import { PageResult, PageParams, PagedQueryResult } from '@/lib/types';
 import { useApi } from './useApi';
 import { useNavigation } from './useNavigation';
 

src/components/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
-import useStore, { setTheme } from 'store/app';
-import { getItem, setItem } from 'lib/storage';
-import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from 'lib/constants';
+import useStore, { setTheme } from '@/store/app';
+import { getItem, setItem } from '@/lib/storage';
+import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from '@/lib/constants';
 import { colord } from 'colord';
 
 const selector = (state: { theme: string }) => state.theme;

src/components/hooks/useTimezone.ts

@@ -1,7 +1,7 @@
-import { setItem } from 'lib/storage';
-import { TIMEZONE_CONFIG } from 'lib/constants';
+import { setItem } from '@/lib/storage';
+import { TIMEZONE_CONFIG } from '@/lib/constants';
 import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
-import useStore, { setTimezone } from 'store/app';
+import useStore, { setTimezone } from '@/store/app';
 
 const selector = (state: { timezone: string }) => state.timezone;
 

src/components/icons.ts

@@ -1,30 +1,30 @@
 import { Icons } from 'react-basics';
-import AddUser from 'assets/add-user.svg';
-import Bars from 'assets/bars.svg';
-import BarChart from 'assets/bar-chart.svg';
-import Bolt from 'assets/bolt.svg';
-import Calendar from 'assets/calendar.svg';
-import Change from 'assets/change.svg';
-import Clock from 'assets/clock.svg';
-import Compare from 'assets/compare.svg';
-import Dashboard from 'assets/dashboard.svg';
-import Eye from 'assets/eye.svg';
-import Gear from 'assets/gear.svg';
-import Globe from 'assets/globe.svg';
-import Location from 'assets/location.svg';
-import Lock from 'assets/lock.svg';
-import Logo from 'assets/logo.svg';
-import Magnet from 'assets/magnet.svg';
-import Moon from 'assets/moon.svg';
-import Nodes from 'assets/nodes.svg';
-import Overview from 'assets/overview.svg';
-import Profile from 'assets/profile.svg';
-import PushPin from 'assets/pushpin.svg';
-import Reports from 'assets/reports.svg';
-import Sun from 'assets/sun.svg';
-import User from 'assets/user.svg';
-import Users from 'assets/users.svg';
-import Visitor from 'assets/visitor.svg';
+import AddUser from '@/assets/add-user.svg';
+import Bars from '@/assets/bars.svg';
+import BarChart from '@/assets/bar-chart.svg';
+import Bolt from '@/assets/bolt.svg';
+import Calendar from '@/assets/calendar.svg';
+import Change from '@/assets/change.svg';
+import Clock from '@/assets/clock.svg';
+import Compare from '@/assets/compare.svg';
+import Dashboard from '@/assets/dashboard.svg';
+import Eye from '@/assets/eye.svg';
+import Gear from '@/assets/gear.svg';
+import Globe from '@/assets/globe.svg';
+import Location from '@/assets/location.svg';
+import Lock from '@/assets/lock.svg';
+import Logo from '@/assets/logo.svg';
+import Magnet from '@/assets/magnet.svg';
+import Moon from '@/assets/moon.svg';
+import Nodes from '@/assets/nodes.svg';
+import Overview from '@/assets/overview.svg';
+import Profile from '@/assets/profile.svg';
+import PushPin from '@/assets/pushpin.svg';
+import Reports from '@/assets/reports.svg';
+import Sun from '@/assets/sun.svg';
+import User from '@/assets/user.svg';
+import Users from '@/assets/users.svg';
+import Visitor from '@/assets/visitor.svg';
 
 const icons = {
   ...Icons,

src/components/input/DateFilter.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
-import DatePickerForm from 'components/metrics/DatePickerForm';
-import { useLocale, useMessages } from 'components/hooks';
-import Icons from 'components/icons';
-import { formatDate, parseDateValue } from 'lib/date';
+import DatePickerForm from '@/components/metrics/DatePickerForm';
+import { useLocale, useMessages } from '@/components/hooks';
+import Icons from '@/components/icons';
+import { formatDate, parseDateValue } from '@/lib/date';
 import styles from './DateFilter.module.css';
 import classNames from 'classnames';
 

src/components/input/LanguageButton.tsx

@@ -1,8 +1,8 @@
 import { Icon, Button, PopupTrigger, Popup } from 'react-basics';
 import classNames from 'classnames';
-import { languages } from 'lib/lang';
-import { useLocale } from 'components/hooks';
-import Icons from 'components/icons';
+import { languages } from '@/lib/lang';
+import { useLocale } from '@/components/hooks';
+import Icons from '@/components/icons';
 import styles from './LanguageButton.module.css';
 
 export function LanguageButton() {

src/components/input/LogoutButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons, TooltipPopup } from 'react-basics';
 import Link from 'next/link';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export function LogoutButton({
   tooltipPosition = 'top',

src/components/input/MonthSelect.tsx

@@ -9,9 +9,9 @@ import {
   Popup,
 } from 'react-basics';
 import { startOfMonth, endOfMonth } from 'date-fns';
-import Icons from 'components/icons';
-import { useLocale } from 'components/hooks';
-import { formatDate } from 'lib/date';
+import Icons from '@/components/icons';
+import { useLocale } from '@/components/hooks';
+import { formatDate } from '@/lib/date';
 import styles from './MonthSelect.module.css';
 
 export function MonthSelect({ date = new Date(), onChange }) {

src/components/input/ProfileButton.tsx

@@ -1,9 +1,9 @@
 import { Key } from 'react';
 import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
 import { useRouter } from 'next/navigation';
-import Icons from 'components/icons';
-import { useMessages, useLogin, useLocale } from 'components/hooks';
-import { CURRENT_VERSION } from 'lib/constants';
+import Icons from '@/components/icons';
+import { useMessages, useLogin, useLocale } from '@/components/hooks';
+import { CURRENT_VERSION } from '@/lib/constants';
 import styles from './ProfileButton.module.css';
 
 export function ProfileButton() {

src/components/input/RefreshButton.tsx

@@ -1,8 +1,8 @@
 import { LoadingButton, Icon, TooltipPopup } from 'react-basics';
-import { setWebsiteDateRange } from 'store/websites';
-import { useDateRange } from 'components/hooks';
-import Icons from 'components/icons';
-import { useMessages } from 'components/hooks';
+import { setWebsiteDateRange } from '@/store/websites';
+import { useDateRange } from '@/components/hooks';
+import Icons from '@/components/icons';
+import { useMessages } from '@/components/hooks';
 
 export function RefreshButton({
   websiteId,

src/components/input/SettingsButton.tsx

@@ -1,8 +1,8 @@
 import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
-import TimezoneSetting from 'app/(main)/profile/TimezoneSetting';
-import DateRangeSetting from 'app/(main)/profile/DateRangeSetting';
-import Icons from 'components/icons';
-import { useMessages } from 'components/hooks';
+import TimezoneSetting from '@/app/(main)/profile/TimezoneSetting';
+import DateRangeSetting from '@/app/(main)/profile/DateRangeSetting';
+import Icons from '@/components/icons';
+import { useMessages } from '@/components/hooks';
 import styles from './SettingsButton.module.css';
 
 export function SettingsButton() {

src/components/input/TeamsButton.tsx

@@ -1,8 +1,8 @@
 import { Key } from 'react';
 import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
 import classNames from 'classnames';
-import Icons from 'components/icons';
-import { useLogin, useMessages, useTeams, useTeamUrl } from 'components/hooks';
+import Icons from '@/components/icons';
+import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
 import styles from './TeamsButton.module.css';
 
 export function TeamsButton({

src/components/input/ThemeButton.tsx

@@ -1,7 +1,7 @@
 import { useTransition, animated } from '@react-spring/web';
 import { Button, Icon } from 'react-basics';
-import { useTheme } from 'components/hooks';
-import Icons from 'components/icons';
+import { useTheme } from '@/components/hooks';
+import Icons from '@/components/icons';
 import styles from './ThemeButton.module.css';
 
 export function ThemeButton() {
@@ -28,7 +28,7 @@ export function ThemeButton() {
     <Button variant="quiet" className={styles.button} onClick={handleClick}>
       {transitions((style, item) => (
         <animated.div key={item} style={style}>
-          <Icon className={styles.icon}>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
+          <Icon>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
         </animated.div>
       ))}
     </Button>

src/components/input/WebsiteDateFilter.tsx

@@ -1,10 +1,10 @@
-import { useDateRange, useLocale } from 'components/hooks';
+import { useDateRange, useLocale } from '@/components/hooks';
 import { isAfter } from 'date-fns';
-import { getOffsetDateRange } from 'lib/date';
+import { getOffsetDateRange } from '@/lib/date';
 import { Button, Icon, Icons } from 'react-basics';
 import DateFilter from './DateFilter';
 import styles from './WebsiteDateFilter.module.css';
-import { DateRange } from 'lib/types';
+import { DateRange } from '@/lib/types';
 
 export function WebsiteDateFilter({
   websiteId,

src/components/input/WebsiteSelect.tsx

@@ -1,7 +1,7 @@
 import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
-import { useWebsite, useWebsites, useMessages } from 'components/hooks';
-import Empty from 'components/common/Empty';
+import { useWebsite, useWebsites, useMessages } from '@/components/hooks';
+import Empty from '@/components/common/Empty';
 import styles from './WebsiteSelect.module.css';
 
 export function WebsiteSelect({

src/components/layout/MenuLayout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
-import SideNav from 'components/layout/SideNav';
+import SideNav from '@/components/layout/SideNav';
 import styles from './MenuLayout.module.css';
 
 export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {

src/components/layout/NavGroup.module.css

@@ -51,11 +51,6 @@ a.item {
   color: var(--base900);
 }
 
-.item.disabled {
-  color: var(--base500) !important;
-  pointer-events: none;
-}
-
 .minimized .text,
 .minimized .header {
   display: none;

src/components/layout/NavGroup.tsx

@@ -3,7 +3,7 @@ import { Icon, Text, TooltipPopup } from 'react-basics';
 import classNames from 'classnames';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
-import Icons from 'components/icons';
+import Icons from '@/components/icons';
 import styles from './NavGroup.module.css';
 
 export interface NavGroupProps {

src/components/layout/Page.tsx

@@ -2,7 +2,7 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Banner, Loading } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './Page.module.css';
 
 export function Page({

src/components/messages.ts

@@ -280,6 +280,7 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
+  channels: { id: 'label.channels', defaultMessage: 'Channels' },
 });
 
 export const messages = defineMessages({

src/components/metrics/ActiveUsers.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { StatusLight } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
+import { useApi } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './ActiveUsers.module.css';
 
 export function ActiveUsers({

src/components/metrics/BrowsersTable.tsx

@@ -1,8 +1,8 @@
-import FilterLink from 'components/common/FilterLink';
-import MetricsTable, { MetricsTableProps } from 'components/metrics/MetricsTable';
-import { useMessages } from 'components/hooks';
-import { useFormat } from 'components/hooks';
-import TypeIcon from 'components/common/TypeIcon';
+import FilterLink from '@/components/common/FilterLink';
+import MetricsTable, { MetricsTableProps } from '@/components/metrics/MetricsTable';
+import { useMessages } from '@/components/hooks';
+import { useFormat } from '@/components/hooks';
+import TypeIcon from '@/components/common/TypeIcon';
 
 export function BrowsersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/ChannelsTable.tsx

@@ -0,0 +1,17 @@
+import MetricsTable, { MetricsTableProps } from '@/components/metrics/MetricsTable';
+import { useMessages } from '@/components/hooks';
+
+export function BrowsersTable(props: MetricsTableProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <MetricsTable
+      {...props}
+      title={formatMessage(labels.channels)}
+      type="channel"
+      metric={formatMessage(labels.visitors)}
+    />
+  );
+}
+
+export default BrowsersTable;

src/components/metrics/CitiesTable.tsx

@@ -1,8 +1,8 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import { emptyFilter } from 'lib/filters';
-import FilterLink from 'components/common/FilterLink';
-import { useMessages } from 'components/hooks';
-import { useFormat } from 'components/hooks';
+import { emptyFilter } from '@/lib/filters';
+import FilterLink from '@/components/common/FilterLink';
+import { useMessages } from '@/components/hooks';
+import { useFormat } from '@/components/hooks';
 
 export function CitiesTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/CountriesTable.tsx

@@ -1,8 +1,8 @@
-import FilterLink from 'components/common/FilterLink';
-import { useCountryNames } from 'components/hooks';
-import { useLocale, useMessages, useFormat } from 'components/hooks';
+import FilterLink from '@/components/common/FilterLink';
+import { useCountryNames } from '@/components/hooks';
+import { useLocale, useMessages, useFormat } from '@/components/hooks';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import TypeIcon from 'components/common/TypeIcon';
+import TypeIcon from '@/components/common/TypeIcon';
 
 export function CountriesTable({ ...props }: MetricsTableProps) {
   const { locale } = useLocale();

src/components/metrics/DatePickerForm.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
 import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
-import { useLocale } from 'components/hooks';
-import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
-import { useMessages } from 'components/hooks';
+import { useLocale } from '@/components/hooks';
+import { FILTER_DAY, FILTER_RANGE } from '@/lib/constants';
+import { useMessages } from '@/components/hooks';
 import styles from './DatePickerForm.module.css';
 
 export function DatePickerForm({

src/components/metrics/DevicesTable.tsx

@@ -1,8 +1,8 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import FilterLink from 'components/common/FilterLink';
-import { useMessages } from 'components/hooks';
-import { useFormat } from 'components/hooks';
-import TypeIcon from 'components/common/TypeIcon';
+import FilterLink from '@/components/common/FilterLink';
+import { useMessages } from '@/components/hooks';
+import { useFormat } from '@/components/hooks';
+import TypeIcon from '@/components/common/TypeIcon';
 
 export function DevicesTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/EventsChart.tsx

@@ -1,8 +1,8 @@
 import { colord } from 'colord';
-import BarChart from 'components/charts/BarChart';
-import { useDateRange, useLocale, useWebsiteEventsSeries } from 'components/hooks';
-import { renderDateLabels } from 'lib/charts';
-import { CHART_COLORS } from 'lib/constants';
+import BarChart from '@/components/charts/BarChart';
+import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
+import { renderDateLabels } from '@/lib/charts';
+import { CHART_COLORS } from '@/lib/constants';
 import { useMemo } from 'react';
 
 export interface EventsChartProps {

src/components/metrics/EventsTable.tsx

@@ -1,5 +1,5 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export function EventsTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/FilterTags.tsx

@@ -7,13 +7,13 @@ import {
   useMessages,
   useFormat,
   useFilters,
-} from 'components/hooks';
-import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
-import FieldFilterEditForm from 'app/(main)/reports/[reportId]/FieldFilterEditForm';
-import { OPERATOR_PREFIXES } from 'lib/constants';
-import { isSearchOperator, parseParameterValue } from 'lib/params';
+} from '@/components/hooks';
+import PopupForm from '@/app/(main)/reports/[reportId]/PopupForm';
+import FieldFilterEditForm from '@/app/(main)/reports/[reportId]/FieldFilterEditForm';
+import { OPERATOR_PREFIXES } from '@/lib/constants';
+import { isSearchOperator, parseParameterValue } from '@/lib/params';
 import styles from './FilterTags.module.css';
-import WebsiteFilterButton from 'app/(main)/websites/[websiteId]/WebsiteFilterButton';
+import WebsiteFilterButton from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
 
 export function FilterTags({
   websiteId,

src/components/metrics/HostsTable.tsx

@@ -1,6 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import FilterLink from 'components/common/FilterLink';
-import { useMessages } from 'components/hooks';
+import FilterLink from '@/components/common/FilterLink';
+import { useMessages } from '@/components/hooks';
 import { Flexbox } from 'react-basics';
 
 export function HostsTable(props: MetricsTableProps) {

src/components/metrics/LanguagesTable.tsx

@@ -1,8 +1,8 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import { percentFilter } from 'lib/filters';
-import { useLocale } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { useFormat } from 'components/hooks';
+import { percentFilter } from '@/lib/filters';
+import { useLocale } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
+import { useFormat } from '@/components/hooks';
 
 export function LanguagesTable({
   onDataLoad,

src/components/metrics/ListTable.tsx

@@ -1,9 +1,9 @@
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from '@react-spring/web';
 import classNames from 'classnames';
-import Empty from 'components/common/Empty';
-import { formatLongNumber } from 'lib/format';
-import { useMessages } from 'components/hooks';
+import Empty from '@/components/common/Empty';
+import { formatLongNumber } from '@/lib/format';
+import { useMessages } from '@/components/hooks';
 import styles from './ListTable.module.css';
 import { ReactNode } from 'react';
 

src/components/metrics/MetricCard.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { useSpring, animated } from '@react-spring/web';
-import { formatNumber } from 'lib/format';
-import ChangeLabel from 'components/metrics/ChangeLabel';
+import { formatNumber } from '@/lib/format';
+import ChangeLabel from '@/components/metrics/ChangeLabel';
 import styles from './MetricCard.module.css';
 
 export interface MetricCardProps {

src/components/metrics/MetricsBar.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Loading, cloneChildren } from 'react-basics';
-import ErrorMessage from 'components/common/ErrorMessage';
-import { formatLongNumber } from 'lib/format';
+import ErrorMessage from '@/components/common/ErrorMessage';
+import { formatLongNumber } from '@/lib/format';
 import styles from './MetricsBar.module.css';
 
 export interface MetricsBarProps {

src/components/metrics/MetricsTable.tsx

@@ -1,18 +1,18 @@
 import { ReactNode, useMemo, useState } from 'react';
 import { Loading, Icon, Text, SearchField } from 'react-basics';
 import classNames from 'classnames';
-import ErrorMessage from 'components/common/ErrorMessage';
-import LinkButton from 'components/common/LinkButton';
-import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import { percentFilter } from 'lib/filters';
+import ErrorMessage from '@/components/common/ErrorMessage';
+import LinkButton from '@/components/common/LinkButton';
+import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
+import { percentFilter } from '@/lib/filters';
 import {
   useNavigation,
   useWebsiteMetrics,
   useMessages,
   useLocale,
   useFormat,
-} from 'components/hooks';
-import Icons from 'components/icons';
+} from '@/components/hooks';
+import Icons from '@/components/icons';
 import ListTable, { ListTableProps } from './ListTable';
 import styles from './MetricsTable.module.css';
 

src/components/metrics/OSTable.tsx

@@ -1,7 +1,7 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import FilterLink from 'components/common/FilterLink';
-import { useMessages, useFormat } from 'components/hooks';
-import TypeIcon from 'components/common/TypeIcon';
+import FilterLink from '@/components/common/FilterLink';
+import { useMessages, useFormat } from '@/components/hooks';
+import TypeIcon from '@/components/common/TypeIcon';
 
 export function OSTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/PagesTable.tsx

@@ -1,8 +1,8 @@
-import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
-import FilterButtons from 'components/common/FilterButtons';
-import FilterLink from 'components/common/FilterLink';
-import { useMessages, useNavigation } from 'components/hooks';
-import { emptyFilter } from 'lib/filters';
+import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
+import FilterButtons from '@/components/common/FilterButtons';
+import FilterLink from '@/components/common/FilterLink';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { emptyFilter } from '@/lib/filters';
 import { useContext } from 'react';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 

src/components/metrics/PageviewsChart.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import BarChart, { BarChartProps } from 'components/charts/BarChart';
-import { useLocale, useTheme, useMessages } from 'components/hooks';
-import { renderDateLabels } from 'lib/charts';
+import BarChart, { BarChartProps } from '@/components/charts/BarChart';
+import { useLocale, useTheme, useMessages } from '@/components/hooks';
+import { renderDateLabels } from '@/lib/charts';
 
 export interface PagepageviewsChartProps extends BarChartProps {
   data: {

src/components/metrics/QueryParametersTable.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import FilterButtons from 'components/common/FilterButtons';
-import { emptyFilter, paramFilter } from 'lib/filters';
-import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
+import FilterButtons from '@/components/common/FilterButtons';
+import { emptyFilter, paramFilter } from '@/lib/filters';
+import { FILTER_RAW, FILTER_COMBINED } from '@/lib/constants';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 import styles from './QueryParametersTable.module.css';
 
 const filters = {

src/components/metrics/RealtimeChart.tsx

@@ -1,8 +1,8 @@
 import { useMemo, useRef } from 'react';
 import { startOfMinute, subMinutes, isBefore } from 'date-fns';
 import PageviewsChart from './PageviewsChart';
-import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
-import { RealtimeData } from 'lib/types';
+import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from '@/lib/constants';
+import { RealtimeData } from '@/lib/types';
 
 export interface RealtimeChartProps {
   data: RealtimeData;

src/components/metrics/ReferrersTable.tsx

@@ -1,6 +1,6 @@
-import FilterLink from 'components/common/FilterLink';
-import Favicon from 'components/common/Favicon';
-import { useMessages } from 'components/hooks';
+import FilterLink from '@/components/common/FilterLink';
+import Favicon from '@/components/common/Favicon';
+import { useMessages } from '@/components/hooks';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 
 export function ReferrersTable(props: MetricsTableProps) {

src/components/metrics/RegionsTable.tsx

@@ -1,8 +1,8 @@
-import FilterLink from 'components/common/FilterLink';
-import { emptyFilter } from 'lib/filters';
-import { useMessages, useLocale, useRegionNames } from 'components/hooks';
+import FilterLink from '@/components/common/FilterLink';
+import { emptyFilter } from '@/lib/filters';
+import { useMessages, useLocale, useRegionNames } from '@/components/hooks';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import TypeIcon from 'components/common/TypeIcon';
+import TypeIcon from '@/components/common/TypeIcon';
 
 export function RegionsTable(props: MetricsTableProps) {
   const { locale } = useLocale();

src/components/metrics/ScreenTable.tsx

@@ -1,5 +1,5 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import { useMessages } from 'components/hooks';
+import { useMessages } from '@/components/hooks';
 
 export function ScreenTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/TagsTable.tsx

@@ -1,6 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import FilterLink from 'components/common/FilterLink';
-import { useMessages } from 'components/hooks';
+import FilterLink from '@/components/common/FilterLink';
+import { useMessages } from '@/components/hooks';
 import { Flexbox } from 'react-basics';
 
 export function TagsTable(props: MetricsTableProps) {

src/components/metrics/WorldMap.tsx

@@ -2,14 +2,14 @@ import { useState, useMemo, HTMLAttributes } from 'react';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
-import HoverTooltip from 'components/common/HoverTooltip';
-import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
-import { useDateRange, useTheme, useWebsiteMetrics } from 'components/hooks';
-import { useCountryNames } from 'components/hooks';
-import { useLocale } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import { formatLongNumber } from 'lib/format';
-import { percentFilter } from 'lib/filters';
+import HoverTooltip from '@/components/common/HoverTooltip';
+import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
+import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks';
+import { useCountryNames } from '@/components/hooks';
+import { useLocale } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
+import { formatLongNumber } from '@/lib/format';
+import { percentFilter } from '@/lib/filters';
 import styles from './WorldMap.module.css';
 
 export function WorldMap({