Merge remote-tracking branch 'upstream/master'

components/common/Pager.js

@@ -0,0 +1,45 @@
+import styles from './Pager.module.css';
+import { Button, Flexbox, Icon, Icons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
+
+export function Pager({ page, pageSize, count, onPageChange }) {
+  const { formatMessage, labels } = useMessages();
+  const maxPage = Math.ceil(count / pageSize);
+  const lastPage = page === maxPage;
+  const firstPage = page === 1;
+
+  if (count === 0) {
+    return null;
+  }
+
+  const handlePageChange = value => {
+    const nextPage = page + value;
+    if (nextPage > 0 && nextPage <= maxPage) {
+      onPageChange(nextPage);
+    }
+  };
+
+  if (maxPage === 1) {
+    return null;
+  }
+
+  return (
+    <Flexbox justifyContent="center" className={styles.container}>
+      <Button onClick={() => handlePageChange(-1)} disabled={firstPage}>
+        <Icon rotate={90}>
+          <Icons.ChevronDown />
+        </Icon>
+      </Button>
+      <Flexbox alignItems="center" className={styles.text}>
+        {formatMessage(labels.pageOf, { current: page, total: maxPage })}
+      </Flexbox>
+      <Button onClick={() => handlePageChange(1)} disabled={lastPage}>
+        <Icon rotate={270}>
+          <Icons.ChevronDown />
+        </Icon>
+      </Button>
+    </Flexbox>
+  );
+}
+
+export default Pager;

components/common/Pager.module.css

@@ -0,0 +1,7 @@
+.container {
+  margin-top: 20px;
+}
+
+.text {
+  margin: 0 16px;
+}

components/common/SettingsTable.js

@@ -1,37 +1,99 @@
-import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useMessages from 'hooks/useMessages';
+import { useState } from 'react';
+import {
+  SearchField,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from 'react-basics';
 import styles from './SettingsTable.module.css';
+import Pager from 'components/common/Pager';
+
+export function SettingsTable({
+  columns = [],
+  data,
+  children,
+  cellRender,
+  showSearch,
+  showPaging,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+  filterValue,
+}) {
+  const { formatMessage, messages } = useMessages();
+  const [filter, setFilter] = useState(filterValue);
+  const { data: value, page, count, pageSize } = data;
+
+  const handleFilterChange = value => {
+    setFilter(value);
+    onFilterChange(value);
+  };
 
-export function SettingsTable({ columns = [], data = [], children, cellRender }) {
   return (
-    <Table columns={columns} rows={data}>
-      <TableHeader className={styles.header}>
-        {(column, index) => {
-          return (
-            <TableColumn key={index} className={styles.cell} style={columns[index].style}>
-              {column.label}
-            </TableColumn>
-          );
-        }}
-      </TableHeader>
-      <TableBody className={styles.body}>
-        {(row, keys, rowIndex) => {
-          row.action = children(row, keys, rowIndex);
+    <>
+      {showSearch && (
+        <SearchField
+          onChange={handleFilterChange}
+          delay={1000}
+          value={filter}
+          autoFocus={true}
+          placeholder="Search"
+          style={{ maxWidth: '300px', marginBottom: '10px' }}
+        />
+      )}
+      {value.length === 0 && filterValue && (
+        <EmptyPlaceholder message={formatMessage(messages.noResultsFound)}></EmptyPlaceholder>
+      )}
+      {value.length > 0 && (
+        <Table columns={columns} rows={value}>
+          <TableHeader className={styles.header}>
+            {(column, index) => {
+              return (
+                <TableColumn key={index} className={styles.cell} style={columns[index].style}>
+                  {column.label}
+                </TableColumn>
+              );
+            }}
+          </TableHeader>
+          <TableBody className={styles.body}>
+            {(row, keys, rowIndex) => {
+              row.action = children(row, keys, rowIndex);
 
-          return (
-            <TableRow key={rowIndex} data={row} keys={keys} className={styles.row}>
-              {(data, key, colIndex) => {
-                return (
-                  <TableCell key={colIndex} className={styles.cell} style={columns[colIndex].style}>
-                    <label className={styles.label}>{columns[colIndex].label}</label>
-                    {cellRender ? cellRender(row, data, key, colIndex) : data[key]}
-                  </TableCell>
-                );
-              }}
-            </TableRow>
-          );
-        }}
-      </TableBody>
-    </Table>
+              return (
+                <TableRow key={rowIndex} data={row} keys={keys} className={styles.row}>
+                  {(data, key, colIndex) => {
+                    return (
+                      <TableCell
+                        key={colIndex}
+                        className={styles.cell}
+                        style={columns[colIndex].style}
+                      >
+                        <label className={styles.label}>{columns[colIndex].label}</label>
+                        {cellRender ? cellRender(row, data, key, colIndex) : data[key]}
+                      </TableCell>
+                    );
+                  }}
+                </TableRow>
+              );
+            }}
+          </TableBody>
+          {showPaging && (
+            <Pager
+              page={page}
+              pageSize={pageSize}
+              count={count}
+              onPageChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          )}
+        </Table>
+      )}
+    </>
   );
 }
 

components/icons.ts

@@ -11,6 +11,7 @@ import Gear from 'assets/gear.svg';
 import Globe from 'assets/globe.svg';
 import Lock from 'assets/lock.svg';
 import Logo from 'assets/icon.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';
@@ -35,6 +36,7 @@ const icons = {
   Globe,
   Lock,
   Logo,
+  Magnet,
   Moon,
   Nodes,
   Overview,

components/input/DateFilter.js

@@ -3,7 +3,7 @@ import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
 import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
@@ -135,8 +135,8 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
         <Icons.Calendar />
       </Icon>
       <Text>
-        {dateFormat(startDate, 'd LLL y', locale)}
-        {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
+        {formatDate(startDate, 'd LLL y', locale)}
+        {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
       </Text>
     </Flexbox>
   );

components/input/MonthSelect.js

@@ -0,0 +1,71 @@
+import { useRef } from 'react';
+import {
+  Text,
+  Icon,
+  CalendarMonthSelect,
+  CalendarYearSelect,
+  Button,
+  PopupTrigger,
+  Popup,
+} from 'react-basics';
+import { startOfMonth, endOfMonth } from 'date-fns';
+import Icons from 'components/icons';
+import { useLocale } from 'hooks';
+import { formatDate } from 'lib/date';
+import { getDateLocale } from 'lib/lang';
+import styles from './MonthSelect.module.css';
+
+export function MonthSelect({ date = new Date(), onChange }) {
+  const { locale } = useLocale();
+  const month = formatDate(date, 'MMMM', locale);
+  const year = date.getFullYear();
+  const ref = useRef();
+
+  const handleChange = (close, date) => {
+    onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
+    close();
+  };
+
+  return (
+    <>
+      <div ref={ref} className={styles.container}>
+        <PopupTrigger>
+          <Button className={styles.input} variant="quiet">
+            <Text>{month}</Text>
+            <Icon size="sm">
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+          <Popup className={styles.popup} alignment="start">
+            {close => (
+              <CalendarMonthSelect
+                date={date}
+                locale={getDateLocale(locale)}
+                onSelect={handleChange.bind(null, close)}
+              />
+            )}
+          </Popup>
+        </PopupTrigger>
+        <PopupTrigger>
+          <Button className={styles.input} variant="quiet">
+            <Text>{year}</Text>
+            <Icon size="sm">
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+          <Popup className={styles.popup} alignment="start">
+            {close => (
+              <CalendarYearSelect
+                date={date}
+                locale={getDateLocale(locale)}
+                onSelect={handleChange.bind(null, close)}
+              />
+            )}
+          </Popup>
+        </PopupTrigger>
+      </div>
+    </>
+  );
+}
+
+export default MonthSelect;

components/input/MonthSelect.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.popup {
+  border: 1px solid var(--base400);
+  background: var(--base50);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  margin-top: 5px;
+}

components/input/WebsiteSelect.js

@@ -8,12 +8,12 @@ export function WebsiteSelect({ websiteId, onSelect }) {
   const { data } = useQuery(['websites:me'], () => get('/me/websites'));
 
   const renderValue = value => {
-    return data?.find(({ id }) => id === value)?.name;
+    return data?.data?.find(({ id }) => id === value)?.name;
   };
 
   return (
     <Dropdown
-      items={data}
+      items={data?.data}
       value={websiteId}
       renderValue={renderValue}
       onChange={onSelect}

components/layout/AppLayout.js

@@ -2,9 +2,7 @@ import { Container } from 'react-basics';
 import Head from 'next/head';
 import NavBar from 'components/layout/NavBar';
 import UpdateNotice from 'components/common/UpdateNotice';
-import useRequireLogin from 'hooks/useRequireLogin';
-import useConfig from 'hooks/useConfig';
-import { CURRENT_VERSION } from 'lib/constants';
+import { useRequireLogin, useConfig } from 'hooks';
 import styles from './AppLayout.module.css';
 
 export function AppLayout({ title, children }) {
@@ -16,7 +14,7 @@ export function AppLayout({ title, children }) {
   }
 
   return (
-    <div className={styles.layout} data-app-version={CURRENT_VERSION}>
+    <div className={styles.layout}>
       <UpdateNotice user={user} config={config} />
       <Head>
         <title>{title ? `${title} | Triton Analytics` : 'Triton'}</title>

components/layout/AppLayout.module.css

@@ -10,6 +10,7 @@
   width: 100vw;
   grid-column: 1;
   grid-row: 1 / 2;
+  z-index: 1;
 }
 
 .body {

components/layout/NavBar.js

@@ -18,6 +18,8 @@ export function NavBar() {
 
   const links = [
     { label: formatMessage(labels.dashboard), url: '/dashboard' },
+    { label: formatMessage(labels.websites), url: '/websites' },
+    { label: formatMessage(labels.reports), url: '/reports' },
     !cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
   ].filter(n => n);
 

components/layout/SettingsLayout.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   padding-top: 40px;
+  padding-right: 20px;
 }
 
 .content {

components/messages.js

@@ -21,6 +21,8 @@ export const labels = defineMessages({
   details: { id: 'label.details', defaultMessage: 'Details' },
   website: { id: 'label.website', defaultMessage: 'Website' },
   websites: { id: 'label.websites', defaultMessage: 'Websites' },
+  myWebsites: { id: 'label.my-websites', defaultMessage: 'My websites' },
+  teamWebsites: { id: 'label.team-websites', defaultMessage: 'Team websites' },
   created: { id: 'label.created', defaultMessage: 'Created' },
   edit: { id: 'label.edit', defaultMessage: 'Edit' },
   name: { id: 'label.name', defaultMessage: 'Name' },
@@ -28,6 +30,7 @@ export const labels = defineMessages({
   accessCode: { id: 'label.access-code', defaultMessage: 'Access code' },
   teamId: { id: 'label.team-id', defaultMessage: 'Team ID' },
   team: { id: 'label.team', defaultMessage: 'Team' },
+  teamName: { id: 'label.team-name', defaultMessage: 'Team name' },
   regenerate: { id: 'label.regenerate', defaultMessage: 'Regenerate' },
   remove: { id: 'label.remove', defaultMessage: 'Remove' },
   join: { id: 'label.join', defaultMessage: 'Join' },
@@ -77,7 +80,7 @@ export const labels = defineMessages({
   referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
   screens: { id: 'label.screens', defaultMessage: 'Screens' },
   browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
-  os: { id: 'label.operating-systems', defaultMessage: 'Operating systems' },
+  os: { id: 'label.os', defaultMessage: 'OS' },
   devices: { id: 'label.devices', defaultMessage: 'Devices' },
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
@@ -133,35 +136,48 @@ export const labels = defineMessages({
   runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
   field: { id: 'label.field', defaultMessage: 'Field' },
   fields: { id: 'label.fields', defaultMessage: 'Fields' },
-  createReport: { id: 'labels.create-report', defaultMessage: 'Create report' },
-  description: { id: 'labels.description', defaultMessage: 'Description' },
-  untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' },
-  type: { id: 'labels.type', defaultMessage: 'Type' },
-  filters: { id: 'labels.filters', defaultMessage: 'Filters' },
-  breakdown: { id: 'labels.breakdown', defaultMessage: 'Breakdown' },
-  true: { id: 'labels.true', defaultMessage: 'True' },
-  false: { id: 'labels.false', defaultMessage: 'False' },
-  equals: { id: 'labels.equals', defaultMessage: 'Equals' },
-  doesNotEqual: { id: 'labels.does-not-equal', defaultMessage: 'Does not equal' },
-  greaterThan: { id: 'labels.greater-than', defaultMessage: 'Greater than' },
-  lessThan: { id: 'labels.less-than', defaultMessage: 'Less than' },
-  greaterThanEquals: { id: 'labels.greater-than-equals', defaultMessage: 'Greater than or equals' },
-  lessThanEquals: { id: 'labels.less-than-equals', defaultMessage: 'Less than or equals' },
-  contains: { id: 'labels.contains', defaultMessage: 'Contains' },
-  doesNotContain: { id: 'labels.does-not-contain', defaultMessage: 'Does not contain' },
-  before: { id: 'labels.before', defaultMessage: 'Before' },
-  after: { id: 'labels.after', defaultMessage: 'After' },
-  total: { id: 'labels.total', defaultMessage: 'Total' },
-  sum: { id: 'labels.sum', defaultMessage: 'Sum' },
-  average: { id: 'labels.average', defaultMessage: 'Average' },
-  min: { id: 'labels.min', defaultMessage: 'Min' },
-  max: { id: 'labels.max', defaultMessage: 'Max' },
-  unique: { id: 'labels.unique', defaultMessage: 'Unique' },
-  value: { id: 'labels.value', defaultMessage: 'Value' },
-  overview: { id: 'labels.overview', defaultMessage: 'Overview' },
-  totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' },
+  createReport: { id: 'label.create-report', defaultMessage: 'Create report' },
+  description: { id: 'label.description', defaultMessage: 'Description' },
+  untitled: { id: 'label.untitled', defaultMessage: 'Untitled' },
+  type: { id: 'label.type', defaultMessage: 'Type' },
+  filters: { id: 'label.filters', defaultMessage: 'Filters' },
+  breakdown: { id: 'label.breakdown', defaultMessage: 'Breakdown' },
+  true: { id: 'label.true', defaultMessage: 'True' },
+  false: { id: 'label.false', defaultMessage: 'False' },
+  is: { id: 'label.is', defaultMessage: 'Is' },
+  isNot: { id: 'label.is-not', defaultMessage: 'Is not' },
+  isSet: { id: 'label.is-set', defaultMessage: 'Is set' },
+  isNotSet: { id: 'label.is-not-set', defaultMessage: 'Is not set' },
+  greaterThan: { id: 'label.greater-than', defaultMessage: 'Greater than' },
+  lessThan: { id: 'label.less-than', defaultMessage: 'Less than' },
+  greaterThanEquals: { id: 'label.greater-than-equals', defaultMessage: 'Greater than or equals' },
+  lessThanEquals: { id: 'label.less-than-equals', defaultMessage: 'Less than or equals' },
+  contains: { id: 'label.contains', defaultMessage: 'Contains' },
+  doesNotContain: { id: 'label.does-not-contain', defaultMessage: 'Does not contain' },
+  before: { id: 'label.before', defaultMessage: 'Before' },
+  after: { id: 'label.after', defaultMessage: 'After' },
+  total: { id: 'label.total', defaultMessage: 'Total' },
+  sum: { id: 'label.sum', defaultMessage: 'Sum' },
+  average: { id: 'label.average', defaultMessage: 'Average' },
+  min: { id: 'label.min', defaultMessage: 'Min' },
+  max: { id: 'label.max', defaultMessage: 'Max' },
+  unique: { id: 'label.unique', defaultMessage: 'Unique' },
+  value: { id: 'label.value', defaultMessage: 'Value' },
+  overview: { id: 'label.overview', defaultMessage: 'Overview' },
+  totalRecords: { id: 'label.total-records', defaultMessage: 'Total records' },
   insights: { id: 'label.insights', defaultMessage: 'Insights' },
+  retention: { id: 'label.retention', defaultMessage: 'Retention' },
   dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' },
+  referrer: { id: 'label.referrer', defaultMessage: 'Referrer' },
+  country: { id: 'label.country', defaultMessage: 'Country' },
+  region: { id: 'label.region', defaultMessage: 'Region' },
+  city: { id: 'label.city', defaultMessage: 'City' },
+  browser: { id: 'label.browser', defaultMessage: 'Browser' },
+  device: { id: 'label.device', defaultMessage: 'Device' },
+  pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' },
+  day: { id: 'label.day', defaultMessage: 'Day' },
+  date: { id: 'label.date', defaultMessage: 'Date' },
+  pageOf: { id: 'label.page-of', defaultMessage: 'Page {current} of {total}' },
 });
 
 export const messages = defineMessages({
@@ -230,7 +246,7 @@ export const messages = defineMessages({
   },
   noResultsFound: {
     id: 'message.no-results-found',
-    defaultMessage: 'No results were found.',
+    defaultMessage: 'No results found.',
   },
   noWebsitesConfigured: {
     id: 'message.no-websites-configured',

components/metrics/BrowsersTable.js

@@ -1,16 +1,17 @@
+import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
 import MetricsTable from 'components/metrics/MetricsTable';
-import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
-import { useRouter } from 'next/router';
+import useFormat from 'hooks/useFormat';
 
 export function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { basePath } = useRouter();
+  const { formatBrowser } = useFormat();
 
   function renderLink({ x: browser }) {
     return (
-      <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser}>
+      <FilterLink id="browser" value={browser} label={formatBrowser(browser)}>
         <img
           src={`${basePath}/images/browsers/${browser || 'unknown'}.png`}
           alt={browser}

components/metrics/CountriesTable.js

@@ -1,8 +1,7 @@
 import { useRouter } from 'next/router';
 import FilterLink from 'components/common/FilterLink';
 import useCountryNames from 'hooks/useCountryNames';
-import useLocale from 'hooks/useLocale';
-import useMessages from 'hooks/useMessages';
+import { useLocale, useMessages, useFormat } from 'hooks';
 import MetricsTable from './MetricsTable';
 
 export function CountriesTable({ websiteId, ...props }) {
@@ -10,6 +9,7 @@ export function CountriesTable({ websiteId, ...props }) {
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
   const { basePath } = useRouter();
+  const { formatCountry } = useFormat();
 
   function renderLink({ x: code }) {
     return (
@@ -17,7 +17,7 @@ export function CountriesTable({ websiteId, ...props }) {
         id="country"
         className={locale}
         value={countryNames[code] && code}
-        label={countryNames[code]}
+        label={formatCountry(code)}
       >
         <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
       </FilterLink>

components/metrics/DevicesTable.js

@@ -2,18 +2,16 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 import { useRouter } from 'next/router';
+import { useFormat } from 'hooks';
 
 export function DevicesTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { basePath } = useRouter();
+  const { formatDevice } = useFormat();
 
   function renderLink({ x: device }) {
     return (
-      <FilterLink
-        id="device"
-        value={labels[device] && device}
-        label={formatMessage(labels[device] || labels.unknown)}
-      >
+      <FilterLink id="device" value={labels[device] && device} label={formatDevice(device)}>
         <img
           src={`${basePath}/images/device/${device?.toLowerCase() || 'unknown'}.png`}
           alt={device}

components/pages/console/TestConsole.js

@@ -72,7 +72,7 @@ export function TestConsole() {
   }
 
   const [websiteId] = id || [];
-  const website = data.find(({ id }) => websiteId === id);
+  const website = data?.data.find(({ id }) => websiteId === id);
 
   return (
     <Page loading={isLoading} error={error}>

components/pages/dashboard/Dashboard.js

@@ -12,16 +12,17 @@ import useDashboard from 'store/dashboard';
 import useMessages from 'hooks/useMessages';
 import useLocale from 'hooks/useLocale';
 
-export function Dashboard({ userId }) {
+export function Dashboard() {
   const { formatMessage, labels, messages } = useMessages();
   const dashboard = useDashboard();
   const { showCharts, limit, editing } = dashboard;
   const [max, setMax] = useState(limit);
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['websites'], () =>
-    get('/websites', { userId, includeTeams: 1 }),
+    get('/websites', { includeTeams: 1 }),
   );
-  const hasData = data && data.length !== 0;
+  const hasData = data && data?.data.length !== 0;
+
   const { dir } = useLocale();
 
   function handleMore() {
@@ -47,8 +48,10 @@ export function Dashboard({ userId }) {
       )}
       {hasData && (
         <>
-          {editing && <DashboardEdit websites={data} />}
-          {!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
+          {editing && <DashboardEdit websites={data?.data} />}
+          {!editing && (
+            <WebsiteChartList websites={data?.data} showCharts={showCharts} limit={max} />
+          )}
           {max < data.length && (
             <Flexbox justifyContent="center">
               <Button onClick={handleMore}>

components/pages/event-data/EventDataMetricsBar.js

@@ -28,6 +28,11 @@ export function EventDataMetricsBar({ websiteId }) {
         <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
           {!error && isFetched && (
             <>
+              <MetricCard
+                className={styles.card}
+                label={formatMessage(labels.events)}
+                value={data?.events}
+              />
               <MetricCard
                 className={styles.card}
                 label={formatMessage(labels.fields)}

components/pages/event-data/EventDataTable.js

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages, usePageQuery } from 'hooks';
 import Empty from 'components/common/Empty';
+import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
@@ -13,15 +14,18 @@ export function EventDataTable({ data = [] }) {
 
   return (
     <GridTable data={data}>
-      <GridColumn name="event" label={formatMessage(labels.event)}>
+      <GridColumn name="eventName" label={formatMessage(labels.event)}>
         {row => (
-          <Link href={resolveUrl({ event: row.event })} shallow={true}>
-            {row.event}
+          <Link href={resolveUrl({ event: row.eventName })} shallow={true}>
+            {row.eventName}
           </Link>
         )}
       </GridColumn>
-      <GridColumn name="field" label={formatMessage(labels.field)}>
-        {row => row.field}
+      <GridColumn name="fieldName" label={formatMessage(labels.field)}>
+        {row => row.fieldName}
+      </GridColumn>
+      <GridColumn name="dataType" label={formatMessage(labels.type)}>
+        {row => DATA_TYPES[row.dataType]}
       </GridColumn>
       <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}

components/pages/event-data/EventDataValueTable.js

@@ -1,9 +1,10 @@
-import { GridTable, GridColumn, Button, Icon, Text, Flexbox } from 'react-basics';
+import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
 import { useMessages, usePageQuery } from 'hooks';
 import Link from 'next/link';
 import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
+import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataValueTable({ data = [], event }) {
   const { formatMessage, labels } = useMessages();
@@ -31,8 +32,11 @@ export function EventDataValueTable({ data = [], event }) {
       {data.length <= 0 && <Empty />}
       {data.length > 0 && (
         <GridTable data={data}>
-          <GridColumn name="field" label={formatMessage(labels.field)} />
-          <GridColumn name="value" label={formatMessage(labels.value)} />
+          <GridColumn name="fieldName" label={formatMessage(labels.field)} />
+          <GridColumn name="dataType" label={formatMessage(labels.type)}>
+            {row => DATA_TYPES[row.dataType]}
+          </GridColumn>
+          <GridColumn name="fieldValue" label={formatMessage(labels.value)} />
           <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
             {({ total }) => total.toLocaleString()}
           </GridColumn>

components/pages/realtime/RealtimeLog.js

@@ -8,7 +8,7 @@ import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
 import { stringToColor } from 'lib/format';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import { safeDecodeURI } from 'next-basics';
 import Icons from 'components/icons';
 import styles from './RealtimeLog.module.css';
@@ -50,7 +50,7 @@ export function RealtimeLog({ data, websiteDomain }) {
     },
   ];
 
-  const getTime = ({ createdAt }) => dateFormat(new Date(createdAt), 'pp', locale);
+  const getTime = ({ createdAt }) => formatDate(new Date(createdAt), 'pp', locale);
 
   const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
 

components/pages/reports/BaseParameters.js

@@ -6,7 +6,12 @@ import { useContext } from 'react';
 import { ReportContext } from './Report';
 import { useMessages } from 'hooks';
 
-export function BaseParameters() {
+export function BaseParameters({
+  showWebsiteSelect = true,
+  allowWebsiteSelect = true,
+  showDateSelect = true,
+  allowDateSelect = true,
+}) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
 
@@ -24,17 +29,25 @@ export function BaseParameters() {
 
   return (
     <>
-      <FormRow label={formatMessage(labels.website)}>
-        <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
-      </FormRow>
-      <FormRow label={formatMessage(labels.dateRange)}>
-        <DateFilter
-          value={value}
-          startDate={startDate}
-          endDate={endDate}
-          onChange={handleDateChange}
-        />
-      </FormRow>
+      {showWebsiteSelect && (
+        <FormRow label={formatMessage(labels.website)}>
+          {allowWebsiteSelect && (
+            <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
+          )}
+        </FormRow>
+      )}
+      {showDateSelect && (
+        <FormRow label={formatMessage(labels.dateRange)}>
+          {allowDateSelect && (
+            <DateFilter
+              value={value}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={handleDateChange}
+            />
+          )}
+        </FormRow>
+      )}
     </>
   );
 }

components/pages/reports/FieldFilterForm.js

@@ -1,55 +1,58 @@
 import { useState } from 'react';
-import { Form, FormRow, Menu, Item, Flexbox, Dropdown, TextField, Button } from 'react-basics';
-import { useFilters } from 'hooks';
+import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
+import { useMessages, useFilters, useFormat } from 'hooks';
 import styles from './FieldFilterForm.module.css';
 
-export default function FieldFilterForm({ name, type, onSelect }) {
-  const [filter, setFilter] = useState('');
-  const [value, setValue] = useState('');
-  const { filters, types } = useFilters();
-  const items = types[type];
+export default function FieldFilterForm({ name, label, type, values, onSelect }) {
+  const { formatMessage, labels } = useMessages();
+  const [filter, setFilter] = useState('eq');
+  const [value, setValue] = useState();
+  const { getFilters } = useFilters();
+  const { formatValue } = useFormat();
+  const filters = getFilters(type);
 
-  const renderValue = value => {
-    return filters[value];
+  const renderFilterValue = value => {
+    return filters.find(f => f.value === value)?.label;
   };
 
-  if (type === 'boolean') {
-    return (
-      <Form>
-        <FormRow label={name}>
-          <Menu onSelect={value => onSelect({ name, type, value: ['eq', value] })}>
-            {items.map(value => {
-              return <Item key={value}>{filters[value]}</Item>;
-            })}
-          </Menu>
-        </FormRow>
-      </Form>
-    );
-  }
+  const renderValue = value => {
+    return formatValue(value, name);
+  };
+
+  const handleAdd = () => {
+    onSelect({ name, type, filter, value });
+  };
 
   return (
     <Form>
-      <FormRow label={name} className={styles.filter}>
+      <FormRow label={label} className={styles.filter}>
         <Flexbox gap={10}>
           <Dropdown
             className={styles.dropdown}
-            items={items}
+            items={filters}
             value={filter}
-            renderValue={renderValue}
+            renderValue={renderFilterValue}
             onChange={setFilter}
           >
-            {value => {
-              return <Item key={value}>{filters[value]}</Item>;
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+          <Dropdown
+            className={styles.dropdown}
+            menuProps={{ className: styles.menu }}
+            items={values}
+            value={value}
+            renderValue={renderValue}
+            onChange={setValue}
+          >
+            {value => {
+              return <Item key={value}>{formatValue(value, name)}</Item>;
             }}
           </Dropdown>
-          <TextField value={value} onChange={e => setValue(e.target.value)} autoFocus={true} />
         </Flexbox>
-        <Button
-          variant="primary"
-          onClick={() => onSelect({ name, type, value: [filter, value] })}
-          disabled={!filter || !value}
-        >
-          Add
+        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
+          {formatMessage(labels.add)}
         </Button>
       </FormRow>
     </Form>

components/pages/reports/FieldFilterForm.module.css

@@ -15,3 +15,8 @@
 .dropdown {
   min-width: 180px;
 }
+
+.menu {
+  min-width: 360px;
+  max-height: 300px;
+}

components/pages/reports/FieldSelectForm.js

@@ -2,18 +2,18 @@ import { Menu, Item, Form, FormRow } from 'react-basics';
 import { useMessages } from 'hooks';
 import styles from './FieldSelectForm.module.css';
 
-export default function FieldSelectForm({ fields, onSelect }) {
+export default function FieldSelectForm({ items, onSelect, showType = true }) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <Form>
       <FormRow label={formatMessage(labels.fields)}>
-        <Menu className={styles.menu} onSelect={key => onSelect(fields[key])}>
-          {fields.map(({ label, name, type }, index) => {
+        <Menu className={styles.menu} onSelect={key => onSelect(items[key])}>
+          {items.map(({ name, label, type }, index) => {
             return (
               <Item key={index} className={styles.item}>
                 <div>{label || name}</div>
-                <div className={styles.type}>{type}</div>
+                {showType && type && <div className={styles.type}>{type}</div>}
               </Item>
             );
           })}

components/pages/reports/FilterSelectForm.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import FieldSelectForm from './FieldSelectForm';
+import FieldFilterForm from './FieldFilterForm';
+import { useApi } from 'hooks';
+import { Loading } from 'react-basics';
+
+function useValues(websiteId, type) {
+  const { get, useQuery } = useApi();
+  const { data, error, isLoading } = useQuery(
+    ['websites:values', websiteId, type],
+    () =>
+      get(`/websites/${websiteId}/values`, {
+        type,
+      }),
+    { enabled: !!(websiteId && type) },
+  );
+
+  return { data, error, isLoading };
+}
+
+export default function FilterSelectForm({ websiteId, items, onSelect }) {
+  const [field, setField] = useState();
+  const { data, isLoading } = useValues(websiteId, field?.name);
+
+  if (!field) {
+    return <FieldSelectForm items={items} onSelect={setField} showType={false} />;
+  }
+
+  if (isLoading) {
+    return <Loading position="center" icon="dots" />;
+  }
+
+  return (
+    <FieldFilterForm
+      name={field?.name}
+      label={field?.label}
+      type={field?.type}
+      values={data}
+      onSelect={onSelect}
+    />
+  );
+}

components/pages/reports/PopupForm.js

@@ -1,29 +1,15 @@
-import { createPortal } from 'react-dom';
-import { useDocumentClick, useKeyDown } from 'react-basics';
 import classNames from 'classnames';
 import styles from './PopupForm.module.css';
 
-export function PopupForm({ element, className, children, onClose }) {
-  const { right, top } = element.getBoundingClientRect();
-  const style = { position: 'absolute', left: right, top };
-
-  useKeyDown('Escape', onClose);
-
-  useDocumentClick(e => {
-    if (e.target !== element && !element?.parentElement?.contains(e.target)) {
-      onClose();
-    }
-  });
-
-  const handleClick = e => {
-    e.stopPropagation();
-  };
-
-  return createPortal(
-    <div className={classNames(styles.form, className)} style={style} onClick={handleClick}>
+export function PopupForm({ className, style, children }) {
+  return (
+    <div
+      className={classNames(styles.form, className)}
+      style={style}
+      onClick={e => e.stopPropagation()}
+    >
       {children}
-    </div>,
-    document.body,
+    </div>
   );
 }
 

components/pages/reports/PopupForm.module.css

@@ -3,8 +3,8 @@
   background: var(--base50);
   min-width: 300px;
   padding: 20px;
-  margin-left: 30px;
   border: 1px solid var(--base400);
   border-radius: var(--border-radius);
   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
 }

components/pages/reports/Report.js

@@ -8,6 +8,8 @@ export const ReportContext = createContext(null);
 export function Report({ reportId, defaultParameters, children, ...props }) {
   const report = useReport(reportId, defaultParameters);
 
+  //console.log({ report });
+
   return (
     <ReportContext.Provider value={{ ...report }}>
       <Page {...props} className={styles.container}>

components/pages/reports/ReportDetails.js

@@ -1,9 +1,13 @@
 import FunnelReport from './funnel/FunnelReport';
 import EventDataReport from './event-data/EventDataReport';
+import InsightsReport from './insights/InsightsReport';
+import RetentionReport from './retention/RetentionReport';
 
 const reports = {
   funnel: FunnelReport,
   'event-data': EventDataReport,
+  insights: InsightsReport,
+  retention: RetentionReport,
 };
 
 export default function ReportDetails({ reportId, reportType }) {

components/pages/reports/ReportTemplates.js

@@ -4,6 +4,7 @@ import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import Funnel from 'assets/funnel.svg';
 import Lightbulb from 'assets/lightbulb.svg';
+import Magnet from 'assets/magnet.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages } from 'hooks';
 
@@ -33,20 +34,24 @@ export function ReportTemplates() {
   const { formatMessage, labels } = useMessages();
 
   const reports = [
-    /*
     {
       title: formatMessage(labels.insights),
       description: 'Dive deeper into your data by using segments and filters.',
       url: '/reports/insights',
       icon: <Lightbulb />,
     },
-     */
     {
       title: formatMessage(labels.funnel),
       description: 'Understand the conversion and drop-off rate of users.',
       url: '/reports/funnel',
       icon: <Funnel />,
     },
+    {
+      title: formatMessage(labels.retention),
+      description: 'Measure you website stickiness by tracking how often users return.',
+      url: '/reports/retention',
+      icon: <Magnet />,
+    },
   ];
 
   return (

components/pages/reports/ReportTemplates.module.css

@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
   gap: 20px;
-  width: 360px;
 }
 
 .report {

components/pages/reports/ReportsPage.js

@@ -1,13 +1,25 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
+import { useMessages, useReports } from 'hooks';
 import Link from 'next/link';
 import { Button, Icon, Icons, Text } from 'react-basics';
-import { useMessages, useReports } from 'hooks';
 import ReportsTable from './ReportsTable';
 
 export function ReportsPage() {
-  const { formatMessage, labels } = useMessages();
-  const { reports, error, isLoading } = useReports();
+  const { formatMessage, labels, messages } = useMessages();
+  const {
+    reports,
+    error,
+    isLoading,
+    deleteReport,
+    filter,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+  } = useReports();
+
+  const hasData = (reports && reports?.data.length !== 0) || filter;
 
   return (
     <Page loading={isLoading} error={error}>
@@ -21,7 +33,23 @@ export function ReportsPage() {
           </Button>
         </Link>
       </PageHeader>
-      <ReportsTable data={reports} />
+
+      {hasData && (
+        <ReportsTable
+          data={reports}
+          showSearch={true}
+          showPaging={true}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          onDelete={deleteReport}
+          filterValue={filter}
+          showDomain={true}
+        />
+      )}
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noDataAvailable)}></EmptyPlaceholder>
+      )}
     </Page>
   );
 }

components/pages/reports/ReportsTable.js

@@ -1,18 +1,36 @@
-import { useState } from 'react';
-import { Flexbox, Icon, Icons, Text, Button, Modal } from 'react-basics';
+import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import LinkButton from 'components/common/LinkButton';
 import SettingsTable from 'components/common/SettingsTable';
-import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import { useMessages } from 'hooks';
+import useUser from 'hooks/useUser';
+import { useState } from 'react';
+import { Button, Flexbox, Icon, Icons, Modal, Text } from 'react-basics';
 
-export function ReportsTable({ data = [], onDelete = () => {} }) {
+export function ReportsTable({
+  data = [],
+  onDelete = () => {},
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+  showDomain,
+}) {
   const [report, setReport] = useState(null);
   const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  const domainColumn = [
+    {
+      name: 'domain',
+      label: formatMessage(labels.domain),
+    },
+  ];
 
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'description', label: formatMessage(labels.description) },
     { name: 'type', label: formatMessage(labels.type) },
+    ...(showDomain ? domainColumn : []),
     { name: 'action', label: ' ' },
   ];
 
@@ -22,13 +40,26 @@ export function ReportsTable({ data = [], onDelete = () => {} }) {
 
   return (
     <>
-      <SettingsTable columns={columns} data={data}>
+      <SettingsTable
+        columns={columns}
+        data={data}
+        showSearch={true}
+        showPaging={true}
+        onFilterChange={onFilterChange}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+        filterValue={filterValue}
+      >
         {row => {
-          const { id } = row;
+          const { id, userId: reportOwnerId, website } = row;
+          if (showDomain) {
+            row.domain = website.domain;
+          }
 
           return (
             <Flexbox gap={10}>
               <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
+              {!showDomain || user.id === reportOwnerId || user.id === website?.userId}
               <Button onClick={() => setReport(row)}>
                 <Icon>
                   <Icons.Trash />

components/pages/reports/funnel/FunnelChart.js

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useMemo } from 'react';
-import { Loading } from 'react-basics';
+import { Loading, StatusLight } from 'react-basics';
 import useMessages from 'hooks/useMessages';
 import useTheme from 'hooks/useTheme';
 import BarChart from 'components/metrics/BarChart';
@@ -22,14 +22,25 @@ export function FunnelChart({ className, loading }) {
   );
 
   const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
-    const { opacity, dataPoints } = model.tooltip;
+    const { opacity, labelColors, dataPoints } = model.tooltip;
 
     if (!dataPoints?.length || !opacity) {
       setTooltipPopup(null);
       return;
     }
 
-    setTooltipPopup(`${formatLongNumber(dataPoints[0].raw.y)} ${formatMessage(labels.visitors)}`);
+    setTooltipPopup(
+      <>
+        <div>
+          {formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
+        </div>
+        <div>
+          <StatusLight color={labelColors?.[0]?.backgroundColor}>
+            {formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
+          </StatusLight>
+        </div>
+      </>,
+    );
   }, []);
 
   const datasets = useMemo(() => {

components/pages/reports/funnel/FunnelParameters.js

@@ -16,6 +16,7 @@ import UrlAddForm from './UrlAddForm';
 import { ReportContext } from 'components/pages/reports/Report';
 import BaseParameters from '../BaseParameters';
 import ParameterList from '../ParameterList';
+import PopupForm from '../PopupForm';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@@ -53,7 +54,11 @@ export function FunnelParameters() {
         </Icon>
         <Popup position="bottom" alignment="start">
           {(close, element) => {
-            return <UrlAddForm element={element} onAdd={handleAddUrl} onClose={close} />;
+            return (
+              <PopupForm element={element} onClose={close}>
+                <UrlAddForm onAdd={handleAddUrl} />
+              </PopupForm>
+            );
           }}
         </Popup>
       </PopupTrigger>

components/pages/reports/funnel/FunnelReport.js

@@ -6,9 +6,10 @@ import ReportHeader from '../ReportHeader';
 import ReportMenu from '../ReportMenu';
 import ReportBody from '../ReportBody';
 import Funnel from 'assets/funnel.svg';
+import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
-  type: 'funnel',
+  type: REPORT_TYPES.funnel,
   parameters: { window: 60, urls: [] },
 };
 

components/pages/reports/funnel/UrlAddForm.js

@@ -2,16 +2,14 @@ import { useState } from 'react';
 import { useMessages } from 'hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
-import PopupForm from '../PopupForm';
 
-export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
+export function UrlAddForm({ defaultValue = '', onAdd }) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
 
   const handleSave = () => {
     onAdd(url);
     setUrl('');
-    onClose();
   };
 
   const handleChange = e => {
@@ -26,25 +24,23 @@ export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
   };
 
   return (
-    <PopupForm element={element}>
-      <Form>
-        <FormRow label={formatMessage(labels.url)}>
-          <Flexbox gap={10}>
-            <TextField
-              className={styles.input}
-              value={url}
-              onChange={handleChange}
-              autoFocus={true}
-              autoComplete="off"
-              onKeyDown={handleKeyDown}
-            />
-            <Button variant="primary" onClick={handleSave}>
-              {formatMessage(labels.add)}
-            </Button>
-          </Flexbox>
-        </FormRow>
-      </Form>
-    </PopupForm>
+    <Form>
+      <FormRow label={formatMessage(labels.url)}>
+        <Flexbox gap={10}>
+          <TextField
+            className={styles.input}
+            value={url}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+          <Button variant="primary" onClick={handleSave}>
+            {formatMessage(labels.add)}
+          </Button>
+        </Flexbox>
+      </FormRow>
+    </Form>
   );
 }
 

components/pages/reports/insights/InsightsParameters.js

@@ -1,69 +1,104 @@
 import { useContext, useRef } from 'react';
-import { useMessages } from 'hooks';
-import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
+import { useFormat, useMessages, useFilters } from 'hooks';
+import {
+  Form,
+  FormRow,
+  FormButtons,
+  SubmitButton,
+  PopupTrigger,
+  Icon,
+  Popup,
+  TooltipPopup,
+} from 'react-basics';
 import { ReportContext } from 'components/pages/reports/Report';
-import { REPORT_PARAMETERS, WEBSITE_EVENT_FIELDS } from 'lib/constants';
 import Icons from 'components/icons';
 import BaseParameters from '../BaseParameters';
-import FieldAddForm from '../FieldAddForm';
 import ParameterList from '../ParameterList';
 import styles from './InsightsParameters.module.css';
+import PopupForm from '../PopupForm';
+import FilterSelectForm from '../FilterSelectForm';
+import FieldSelectForm from '../FieldSelectForm';
 
 export function InsightsParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { filterLabels } = useFilters();
   const ref = useRef(null);
   const { parameters } = report || {};
-  const { websiteId, dateRange, fields, filters, groups } = parameters || {};
-  const queryEnabled = websiteId && dateRange && fields?.length;
-  const fieldOptions = Object.keys(WEBSITE_EVENT_FIELDS).map(key => WEBSITE_EVENT_FIELDS[key]);
+  const { websiteId, dateRange, fields, filters } = parameters || {};
+  const { startDate, endDate } = dateRange || {};
+  const parametersSelected = websiteId && startDate && endDate;
+  const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
+
+  const fieldOptions = [
+    { name: 'url', type: 'string', label: formatMessage(labels.url) },
+    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
+    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'query', type: 'string', label: formatMessage(labels.query) },
+    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
+    { name: 'os', type: 'string', label: formatMessage(labels.os) },
+    { name: 'device', type: 'string', label: formatMessage(labels.device) },
+    { name: 'country', type: 'string', label: formatMessage(labels.country) },
+    { name: 'region', type: 'string', label: formatMessage(labels.region) },
+    { name: 'city', type: 'string', label: formatMessage(labels.city) },
+  ];
 
   const parameterGroups = [
-    { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
-    { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
-    { label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups },
+    { id: 'fields', label: formatMessage(labels.fields) },
+    { id: 'filters', label: formatMessage(labels.filters) },
   ];
 
   const parameterData = {
     fields,
     filters,
-    groups,
   };
 
   const handleSubmit = values => {
     runReport(values);
   };
 
-  const handleAdd = (group, value) => {
-    const data = parameterData[group];
+  const handleAdd = (id, value) => {
+    const data = parameterData[id];
 
     if (!data.find(({ name }) => name === value.name)) {
-      updateReport({ parameters: { [group]: data.concat(value) } });
+      updateReport({ parameters: { [id]: data.concat(value) } });
     }
   };
 
-  const handleRemove = (group, index) => {
-    const data = [...parameterData[group]];
+  const handleRemove = (id, index) => {
+    const data = [...parameterData[id]];
     data.splice(index, 1);
-    updateReport({ parameters: { [group]: data } });
+    updateReport({ parameters: { [id]: data } });
   };
 
-  const AddButton = ({ group }) => {
+  const AddButton = ({ id }) => {
     return (
       <PopupTrigger>
-        <Icon>
-          <Icons.Plus />
-        </Icon>
-        <Popup position="bottom" alignment="start">
-          {(close, element) => {
+        <TooltipPopup label={formatMessage(labels.add)} position="top">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </TooltipPopup>
+        <Popup position="bottom" alignment="start" className={styles.popup}>
+          {close => {
             return (
-              <FieldAddForm
-                fields={fieldOptions}
-                group={group}
-                element={element}
-                onAdd={handleAdd}
-                onClose={close}
-              />
+              <PopupForm onClose={close}>
+                {id === 'fields' && (
+                  <FieldSelectForm
+                    items={fieldOptions}
+                    onSelect={handleAdd.bind(null, id)}
+                    showType={false}
+                  />
+                )}
+                {id === 'filters' && (
+                  <FilterSelectForm
+                    websiteId={websiteId}
+                    items={fieldOptions}
+                    onSelect={handleAdd.bind(null, id)}
+                  />
+                )}
+              </PopupForm>
             );
           }}
         </Popup>
@@ -74,41 +109,33 @@ export function InsightsParameters() {
   return (
     <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
       <BaseParameters />
-      {parameterGroups.map(({ label, group }) => {
-        return (
-          <FormRow key={label} label={label} action={<AddButton group={group} onAdd={handleAdd} />}>
-            <ParameterList
-              items={parameterData[group]}
-              onRemove={index => handleRemove(group, index)}
-            >
-              {({ name, value }) => {
-                return (
-                  <div className={styles.parameter}>
-                    {group === REPORT_PARAMETERS.fields && (
-                      <>
-                        <div>{name}</div>
-                        <div className={styles.op}>{value}</div>
-                      </>
-                    )}
-                    {group === REPORT_PARAMETERS.filters && (
-                      <>
-                        <div>{name}</div>
-                        <div className={styles.op}>{value[0]}</div>
-                        <div>{value[1]}</div>
-                      </>
-                    )}
-                    {group === REPORT_PARAMETERS.groups && (
-                      <>
-                        <div>{name}</div>
-                      </>
-                    )}
-                  </div>
-                );
-              }}
-            </ParameterList>
-          </FormRow>
-        );
-      })}
+      {parametersSelected &&
+        parameterGroups.map(({ id, label }) => {
+          return (
+            <FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
+              <ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
+                {({ name, filter, value }) => {
+                  return (
+                    <div className={styles.parameter}>
+                      {id === 'fields' && (
+                        <>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
+                        </>
+                      )}
+                      {id === 'filters' && (
+                        <>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
+                          <div className={styles.op}>{filterLabels[filter]}</div>
+                          <div>{formatValue(value, name)}</div>
+                        </>
+                      )}
+                    </div>
+                  );
+                }}
+              </ParameterList>
+            </FormRow>
+          );
+        })}
       <FormButtons>
         <SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
           {formatMessage(labels.runQuery)}

components/pages/reports/insights/InsightsParameters.module.css

@@ -10,3 +10,8 @@
 .op {
   font-weight: bold;
 }
+
+.popup {
+  margin-top: -10px;
+  margin-left: 30px;
+}

components/pages/reports/insights/InsightsReport.js

@@ -5,10 +5,11 @@ import ReportBody from '../ReportBody';
 import InsightsParameters from './InsightsParameters';
 import InsightsTable from './InsightsTable';
 import Lightbulb from 'assets/lightbulb.svg';
+import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
-  type: 'insights',
-  parameters: { fields: [], filters: [], groups: [] },
+  type: REPORT_TYPES.insights,
+  parameters: { fields: [], filters: [] },
 };
 
 export default function InsightsReport({ reportId }) {

components/pages/reports/insights/InsightsTable.js

@@ -1,17 +1,47 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
-import { useMessages } from 'hooks';
+import { useFormat, useMessages } from 'hooks';
 import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 
 export function InsightsTable() {
+  const [fields, setFields] = useState();
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+
+  useEffect(
+    () => {
+      setFields(report?.parameters?.fields);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [report?.data],
+  );
+
+  if (!fields || !report?.parameters) {
+    return <EmptyPlaceholder />;
+  }
 
   return (
     <GridTable data={report?.data || []}>
-      <GridColumn name="field" label={formatMessage(labels.field)} />
-      <GridColumn name="value" label={formatMessage(labels.value)} />
-      <GridColumn name="total" label={formatMessage(labels.total)} />
+      {fields.map(({ name, label }) => {
+        return (
+          <GridColumn key={name} name={name} label={label}>
+            {row => formatValue(row[name], name)}
+          </GridColumn>
+        );
+      })}
+      <GridColumn
+        name="visitors"
+        label={formatMessage(labels.visitors)}
+        width="100px"
+        alignment="end"
+      >
+        {row => row.visitors.toLocaleString()}
+      </GridColumn>
+      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
+        {row => row.views.toLocaleString()}
+      </GridColumn>
     </GridTable>
   );
 }

components/pages/reports/retention/RetentionParameters.js

@@ -0,0 +1,46 @@
+import { useContext, useRef } from 'react';
+import { useMessages } from 'hooks';
+import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
+import { ReportContext } from 'components/pages/reports/Report';
+import { MonthSelect } from 'components/input/MonthSelect';
+import BaseParameters from '../BaseParameters';
+import { parseDateRange } from 'lib/date';
+
+export function RetentionParameters() {
+  const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const ref = useRef(null);
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const { startDate } = dateRange || {};
+  const queryDisabled = !websiteId || !dateRange;
+
+  const handleSubmit = (data, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!queryDisabled) {
+      runReport(data);
+    }
+  };
+
+  const handleDateChange = value => {
+    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
+  return (
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={false} />
+      <FormRow label={formatMessage(labels.date)}>
+        <MonthSelect date={startDate} onChange={handleDateChange} />
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default RetentionParameters;

components/pages/reports/retention/RetentionReport.js

@@ -0,0 +1,33 @@
+import RetentionTable from './RetentionTable';
+import RetentionParameters from './RetentionParameters';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import Magnet from 'assets/magnet.svg';
+import { REPORT_TYPES } from 'lib/constants';
+import { parseDateRange } from 'lib/date';
+import { endOfMonth, startOfMonth } from 'date-fns';
+
+const defaultParameters = {
+  type: REPORT_TYPES.retention,
+  parameters: {
+    dateRange: parseDateRange(
+      `range:${startOfMonth(new Date()).getTime()}:${endOfMonth(new Date()).getTime()}`,
+    ),
+  },
+};
+
+export default function RetentionReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Magnet />} />
+      <ReportMenu>
+        <RetentionParameters />
+      </ReportMenu>
+      <ReportBody>
+        <RetentionTable />
+      </ReportBody>
+    </Report>
+  );
+}

components/pages/reports/retention/RetentionReport.module.css

@@ -0,0 +1,10 @@
+.filters {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  line-height: 32px;
+  padding: 10px;
+  overflow: hidden;
+}

components/pages/reports/retention/RetentionTable.js

@@ -0,0 +1,78 @@
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { useMessages } from 'hooks';
+import { formatDate } from 'lib/date';
+import styles from './RetentionTable.module.css';
+
+export function RetentionTable() {
+  const { formatMessage, labels } = useMessages();
+  const { report } = useContext(ReportContext);
+  const { data } = report || {};
+
+  if (!data) {
+    return <EmptyPlaceholder />;
+  }
+
+  const days = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
+
+  const rows = data.reduce((arr, row) => {
+    const { date, visitors, day } = row;
+    if (day === 0) {
+      return arr.concat({
+        date,
+        visitors,
+        records: days
+          .reduce((arr, day) => {
+            arr[day] = data.find(x => x.date === date && x.day === day);
+            return arr;
+          }, [])
+          .filter(n => n),
+      });
+    }
+    return arr;
+  }, []);
+
+  const totalDays = rows.length;
+
+  return (
+    <>
+      <div className={styles.table}>
+        <div className={classNames(styles.row, styles.header)}>
+          <div className={styles.date}>{formatMessage(labels.date)}</div>
+          <div className={styles.visitors}>{formatMessage(labels.visitors)}</div>
+          {days.map(n => (
+            <div key={n} className={styles.day}>
+              {formatMessage(labels.day)} {n}
+            </div>
+          ))}
+        </div>
+        {rows.map(({ date, visitors, records }, rowIndex) => {
+          return (
+            <div key={rowIndex} className={styles.row}>
+              <div className={styles.date}>{formatDate(`${date} 00:00:00`, 'PP')}</div>
+              <div className={styles.visitors}>{visitors}</div>
+              {days.map(day => {
+                if (totalDays - rowIndex < day) {
+                  return null;
+                }
+                const percentage = records[day]?.percentage;
+                return (
+                  <div
+                    key={day}
+                    className={classNames(styles.cell, { [styles.empty]: !percentage })}
+                  >
+                    {percentage ? `${percentage.toFixed(2)}%` : ''}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default RetentionTable;

components/pages/reports/retention/RetentionTable.module.css

@@ -0,0 +1,52 @@
+.table {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  font-weight: 700;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  margin-bottom: 1px;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: var(--blue200);
+  border-radius: var(--border-radius);
+}
+
+.date {
+  display: flex;
+  align-items: center;
+  min-width: 160px;
+}
+
+.visitors {
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+}
+
+.day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+}
+
+.empty {
+  background: var(--blue100);
+}

components/pages/settings/teams/TeamAddWebsiteForm.js

@@ -12,6 +12,8 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   const [newWebsites, setNewWebsites] = useState([]);
   const formRef = useRef();
 
+  const hasData = websites && websites.data.length > 0;
+
   const handleSubmit = () => {
     mutate(
       { websiteIds: newWebsites },
@@ -42,20 +44,22 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
 
   return (
     <>
-      <Form onSubmit={handleSubmit} error={error} ref={formRef}>
-        <FormRow label={formatMessage(labels.websites)}>
-          <Dropdown items={websites} onChange={handleAddWebsite} style={{ width: 300 }}>
-            {({ id, name }) => <Item key={id}>{name}</Item>}
-          </Dropdown>
-        </FormRow>
-        <WebsiteTags items={websites} websites={newWebsites} onClick={handleRemoveWebsite} />
-        <FormButtons flex>
-          <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
-            {formatMessage(labels.addWebsite)}
-          </SubmitButton>
-          <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
-        </FormButtons>
-      </Form>
+      {hasData && (
+        <Form onSubmit={handleSubmit} error={error} ref={formRef}>
+          <FormRow label={formatMessage(labels.websites)}>
+            <Dropdown items={websites.data} onChange={handleAddWebsite} style={{ width: 300 }}>
+              {({ id, name }) => <Item key={id}>{name}</Item>}
+            </Dropdown>
+          </FormRow>
+          <WebsiteTags items={websites.data} websites={newWebsites} onClick={handleRemoveWebsite} />
+          <FormButtons flex>
+            <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
+              {formatMessage(labels.addWebsite)}
+            </SubmitButton>
+            <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+          </FormButtons>
+        </Form>
+      )}
     </>
   );
 }

components/pages/settings/teams/TeamMembers.js

@@ -2,13 +2,22 @@ import { Loading, useToasts } from 'react-basics';
 import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
+import useApiFilter from 'hooks/useApiFilter';
 
 export function TeamMembers({ teamId, readOnly }) {
   const { showToast } = useToasts();
-  const { get, useQuery } = useApi();
   const { formatMessage, messages } = useMessages();
-  const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
-    get(`/teams/${teamId}/users`),
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
+  const { get, useQuery } = useApi();
+  const { data, isLoading, refetch } = useQuery(
+    ['teams:users', teamId, filter, page, pageSize],
+    () =>
+      get(`/teams/${teamId}/users`, {
+        filter,
+        page,
+        pageSize,
+      }),
   );
 
   if (isLoading) {
@@ -22,7 +31,15 @@ export function TeamMembers({ teamId, readOnly }) {
 
   return (
     <>
-      <TeamMembersTable onSave={handleSave} data={data} readOnly={readOnly} />
+      <TeamMembersTable
+        onSave={handleSave}
+        data={data}
+        readOnly={readOnly}
+        onFilterChange={handleFilterChange}
+        onPageChange={handlePageChange}
+        onPageSizeChange={handlePageSizeChange}
+        filterValue={filter}
+      />
     </>
   );
 }

components/pages/settings/teams/TeamMembersTable.js

@@ -4,7 +4,15 @@ import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 import SettingsTable from 'components/common/SettingsTable';
 
-export function TeamMembersTable({ data = [], onSave, readOnly }) {
+export function TeamMembersTable({
+  data = [],
+  onSave,
+  readOnly,
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -16,7 +24,7 @@ export function TeamMembersTable({ data = [], onSave, readOnly }) {
 
   const cellRender = (row, data, key) => {
     if (key === 'username') {
-      return row?.user?.username;
+      return row?.username;
     }
     if (key === 'role') {
       return formatMessage(
@@ -27,13 +35,23 @@ export function TeamMembersTable({ data = [], onSave, readOnly }) {
   };
 
   return (
-    <SettingsTable data={data} columns={columns} cellRender={cellRender}>
+    <SettingsTable
+      data={data}
+      columns={columns}
+      cellRender={cellRender}
+      showSearch={true}
+      showPaging={true}
+      onFilterChange={onFilterChange}
+      onPageChange={onPageChange}
+      onPageSizeChange={onPageSizeChange}
+      filterValue={filterValue}
+    >
       {row => {
         return (
           !readOnly && (
             <TeamMemberRemoveButton
               teamId={row.teamId}
-              userId={row.userId}
+              userId={row.id}
               disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
               onSave={onSave}
             />

components/pages/settings/teams/TeamWebsites.js

@@ -13,13 +13,22 @@ import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable
 import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
+import useApiFilter from 'hooks/useApiFilter';
 
 export function TeamWebsites({ teamId }) {
   const { showToast } = useToasts();
   const { formatMessage, labels, messages } = useMessages();
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
   const { get, useQuery } = useApi();
-  const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
-    get(`/teams/${teamId}/websites`),
+  const { data, isLoading, refetch } = useQuery(
+    ['teams:websites', teamId, filter, page, pageSize],
+    () =>
+      get(`/teams/${teamId}/websites`, {
+        filter,
+        page,
+        pageSize,
+      }),
   );
   const hasData = data && data.length !== 0;
 
@@ -49,7 +58,17 @@ export function TeamWebsites({ teamId }) {
   return (
     <div>
       <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
-      {hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
+      {hasData && (
+        <TeamWebsitesTable
+          teamId={teamId}
+          data={data}
+          onSave={handleSave}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+        />
+      )}
     </div>
   );
 }

components/pages/settings/teams/TeamWebsitesTable.js

@@ -6,9 +6,17 @@ import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
 import SettingsTable from 'components/common/SettingsTable';
 import useConfig from 'hooks/useConfig';
 
-export function TeamWebsitesTable({ data = [], onSave }) {
+export function TeamWebsitesTable({
+  data = [],
+  onSave,
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+}) {
   const { formatMessage, labels } = useMessages();
   const { openExternal } = useConfig();
+
   const { user } = useUser();
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
@@ -17,11 +25,19 @@ export function TeamWebsitesTable({ data = [], onSave }) {
   ];
 
   return (
-    <SettingsTable columns={columns} data={data}>
+    <SettingsTable
+      columns={columns}
+      data={data}
+      showSearch={true}
+      showPaging={true}
+      onFilterChange={onFilterChange}
+      onPageChange={onPageChange}
+      onPageSizeChange={onPageSizeChange}
+      filterValue={filterValue}
+    >
       {row => {
-        const { teamId } = row;
-        const { id: websiteId, name, domain, userId } = row.website;
-        const { teamUser } = row.team;
+        const { id: teamId, teamUser } = row.teamWebsite[0].team;
+        const { id: websiteId, name, domain, userId } = row;
         const owner = teamUser[0];
         const canRemove = user.id === userId || user.id === owner.userId;
 

components/pages/settings/teams/TeamsList.js

@@ -1,24 +1,37 @@
-import { useState } from 'react';
-import { Button, Icon, Modal, ModalTrigger, useToasts, Text, Flexbox } from 'react-basics';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
-import PageHeader from 'components/layout/PageHeader';
-import TeamsTable from 'components/pages/settings/teams/TeamsTable';
-import Page from 'components/layout/Page';
 import Icons from 'components/icons';
-import TeamJoinForm from './TeamJoinForm';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
+import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
-import { ROLES } from 'lib/constants';
 import useUser from 'hooks/useUser';
+import { ROLES } from 'lib/constants';
+import { useState } from 'react';
+import { Button, Flexbox, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
+import TeamJoinForm from './TeamJoinForm';
+import useApiFilter from 'hooks/useApiFilter';
 
 export default function TeamsList() {
   const { user } = useUser();
   const { formatMessage, labels, messages } = useMessages();
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
   const [update, setUpdate] = useState(0);
+
   const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
-  const hasData = data && data.length !== 0;
+  const { data, isLoading, error } = useQuery(['teams', update, filter, page, pageSize], () => {
+    return get(`/teams`, {
+      filter,
+      page,
+      pageSize,
+    });
+  });
+
+  const hasData = data && data?.data.length !== 0;
+  const isFiltered = filter;
+
   const { showToast } = useToasts();
 
   const handleSave = () => {
@@ -71,15 +84,26 @@ export default function TeamsList() {
   return (
     <Page loading={isLoading} error={error}>
       <PageHeader title={formatMessage(labels.teams)}>
-        {hasData && (
+        {(hasData || isFiltered) && (
           <Flexbox gap={10}>
             {joinButton}
             {createButton}
           </Flexbox>
         )}
       </PageHeader>
-      {hasData && <TeamsTable data={data} onDelete={handleDelete} />}
-      {!hasData && (
+
+      {(hasData || isFiltered) && (
+        <TeamsTable
+          data={data}
+          onDelete={handleDelete}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+        />
+      )}
+
+      {!hasData && !isFiltered && (
         <EmptyPlaceholder message={formatMessage(messages.noTeams)}>
           <Flexbox gap={10}>
             {joinButton}

components/pages/settings/teams/TeamsTable.js

@@ -1,14 +1,21 @@
+import SettingsTable from 'components/common/SettingsTable';
+import useLocale from 'hooks/useLocale';
+import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
+import { ROLES } from 'lib/constants';
 import Link from 'next/link';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamDeleteForm from './TeamDeleteForm';
 import TeamLeaveForm from './TeamLeaveForm';
-import useMessages from 'hooks/useMessages';
-import useUser from 'hooks/useUser';
-import { ROLES } from 'lib/constants';
-import SettingsTable from 'components/common/SettingsTable';
-import useLocale from 'hooks/useLocale';
 
-export function TeamsTable({ data = [], onDelete }) {
+export function TeamsTable({
+  data = { data: [] },
+  onDelete,
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { dir } = useLocale();
@@ -27,7 +34,17 @@ export function TeamsTable({ data = [], onDelete }) {
   };
 
   return (
-    <SettingsTable data={data} columns={columns} cellRender={cellRender}>
+    <SettingsTable
+      data={data}
+      columns={columns}
+      cellRender={cellRender}
+      showSearch={true}
+      showPaging={true}
+      onFilterChange={onFilterChange}
+      onPageChange={onPageChange}
+      onPageSizeChange={onPageSizeChange}
+      filterValue={filterValue}
+    >
       {row => {
         const { id, teamUser } = row;
         const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);

components/pages/settings/users/UsersList.js

@@ -7,14 +7,27 @@ import UserAddButton from './UserAddButton';
 import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
+import useApiFilter from 'hooks/useApiFilter';
 
 export function UsersList() {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
+
   const { get, useQuery } = useApi();
-  const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
-    enabled: !!user,
-  });
+  const { data, isLoading, error, refetch } = useQuery(
+    ['user', filter, page, pageSize],
+    () =>
+      get(`/users`, {
+        filter,
+        page,
+        pageSize,
+      }),
+    {
+      enabled: !!user,
+    },
+  );
   const { showToast } = useToasts();
   const hasData = data && data.length !== 0;
 
@@ -33,8 +46,17 @@ export function UsersList() {
       <PageHeader title={formatMessage(labels.users)}>
         <UserAddButton onSave={handleSave} />
       </PageHeader>
-      {hasData && <UsersTable data={data} onDelete={handleDelete} />}
-      {!hasData && (
+      {(hasData || filter) && (
+        <UsersTable
+          data={data}
+          onDelete={handleDelete}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+        />
+      )}
+      {!hasData && !filter && (
         <EmptyPlaceholder message={formatMessage(messages.noUsers)}>
           <UserAddButton onSave={handleSave} />
         </EmptyPlaceholder>

components/pages/settings/users/UsersTable.js

@@ -8,7 +8,14 @@ import useMessages from 'hooks/useMessages';
 import SettingsTable from 'components/common/SettingsTable';
 import useLocale from 'hooks/useLocale';
 
-export function UsersTable({ data = [], onDelete }) {
+export function UsersTable({
+  data = { data: [] },
+  onDelete,
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { dateLocale } = useLocale();
@@ -36,7 +43,17 @@ export function UsersTable({ data = [], onDelete }) {
   };
 
   return (
-    <SettingsTable data={data} columns={columns} cellRender={cellRender}>
+    <SettingsTable
+      data={data}
+      columns={columns}
+      cellRender={cellRender}
+      showSearch={true}
+      showPaging={true}
+      onFilterChange={onFilterChange}
+      onPageChange={onPageChange}
+      onPageSizeChange={onPageSizeChange}
+      filterValue={filterValue}
+    >
       {(row, keys, rowIndex) => {
         return (
           <>

components/pages/settings/websites/WebsitesList.js

@@ -1,25 +1,41 @@
-import { Button, Icon, Text, Modal, ModalTrigger, useToasts, Icons } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import useApi from 'hooks/useApi';
-import useUser from 'hooks/useUser';
+import useApiFilter from 'hooks/useApiFilter';
 import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
 import { ROLES } from 'lib/constants';
+import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 
-export function WebsitesList() {
+export function WebsitesList({
+  showTeam,
+  showEditButton = true,
+  showHeader = true,
+  includeTeams,
+  onlyTeams,
+  fetch,
+}) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
+
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
   const { get, useQuery } = useApi();
   const { data, isLoading, error, refetch } = useQuery(
-    ['websites', user?.id],
-    () => get(`/users/${user?.id}/websites`),
+    ['websites', fetch, user?.id, filter, page, pageSize, includeTeams, onlyTeams],
+    () =>
+      get(`/users/${user?.id}/websites`, {
+        filter,
+        page,
+        pageSize,
+        includeTeams,
+        onlyTeams,
+      }),
     { enabled: !!user },
   );
   const { showToast } = useToasts();
-  const hasData = data && data.length !== 0;
 
   const handleSave = async () => {
     await refetch();
@@ -46,13 +62,16 @@ export function WebsitesList() {
 
   return (
     <Page loading={isLoading} error={error}>
-      <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
-      {hasData && <WebsitesTable data={data} />}
-      {!hasData && (
-        <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
-          {addButton}
-        </EmptyPlaceholder>
-      )}
+      {showHeader && <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>}
+      <WebsitesTable
+        data={data}
+        showTeam={showTeam}
+        showEditButton={showEditButton}
+        onFilterChange={handleFilterChange}
+        onPageChange={handlePageChange}
+        onPageSizeChange={handlePageSizeChange}
+        filterValue={filter}
+      />
     </Page>
   );
 }

components/pages/settings/websites/WebsitesTable.js

@@ -1,46 +1,89 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons } from 'react-basics';
 import SettingsTable from 'components/common/SettingsTable';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
+import useUser from 'hooks/useUser';
 
-export function WebsitesTable({ data = [] }) {
-  const { formatMessage, labels } = useMessages();
+export function WebsitesTable({
+  data = [],
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+  showTeam,
+  showEditButton,
+}) {
+  const { formatMessage, labels, messages } = useMessages();
   const { openExternal } = useConfig();
+  const { user } = useUser();
+
+  const showTable = data && (filterValue || data?.data.length !== 0);
+
+  const teamColumns = [
+    { name: 'teamName', label: formatMessage(labels.teamName) },
+    { name: 'owner', label: formatMessage(labels.owner) },
+  ];
 
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'domain', label: formatMessage(labels.domain) },
+    ...(showTeam ? teamColumns : []),
     { name: 'action', label: ' ' },
   ];
 
   return (
-    <SettingsTable columns={columns} data={data}>
-      {row => {
-        const { id } = row;
+    <>
+      {showTable && (
+        <SettingsTable
+          columns={columns}
+          data={data}
+          showSearch={true}
+          showPaging={true}
+          onFilterChange={onFilterChange}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+          filterValue={filterValue}
+        >
+          {row => {
+            const {
+              id,
+              teamWebsite,
+              user: { username, id: ownerId },
+            } = row;
+            if (showTeam) {
+              row.teamName = teamWebsite[0]?.team.name;
+              row.owner = username;
+            }
 
-        return (
-          <>
-            <Link href={`/settings/websites/${id}`}>
-              <Button>
-                <Icon>
-                  <Icons.Edit />
-                </Icon>
-                <Text>{formatMessage(labels.edit)}</Text>
-              </Button>
-            </Link>
-            <Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
-              <Button>
-                <Icon>
-                  <Icons.External />
-                </Icon>
-                <Text>{formatMessage(labels.view)}</Text>
-              </Button>
-            </Link>
-          </>
-        );
-      }}
-    </SettingsTable>
+            return (
+              <>
+                {showEditButton && (!showTeam || ownerId === user.id) && (
+                  <Link href={`/settings/websites/${id}`}>
+                    <Button>
+                      <Icon>
+                        <Icons.Edit />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Button>
+                  </Link>
+                )}
+                <Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
+                  <Button>
+                    <Icon>
+                      <Icons.External />
+                    </Icon>
+                    <Text>{formatMessage(labels.view)}</Text>
+                  </Button>
+                </Link>
+              </>
+            );
+          }}
+        </SettingsTable>
+      )}
+      {!showTable && <EmptyPlaceholder message={formatMessage(messages.noDataAvailable)} />}
+    </>
   );
 }
 

components/pages/websites/WebsiteReportsPage.js

@@ -1,13 +1,25 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
-import Link from 'next/link';
-import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
-import { useMessages, useReports } from 'hooks';
 import ReportsTable from 'components/pages/reports/ReportsTable';
+import { useMessages, useWebsiteReports } from 'hooks';
+import Link from 'next/link';
+import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import WebsiteHeader from './WebsiteHeader';
 
 export function WebsiteReportsPage({ websiteId }) {
-  const { formatMessage, labels } = useMessages();
-  const { reports, error, isLoading, deleteReport } = useReports(websiteId);
+  const { formatMessage, labels, messages } = useMessages();
+  const {
+    reports,
+    error,
+    isLoading,
+    deleteReport,
+    filter,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+  } = useWebsiteReports(websiteId);
+
+  const hasData = (reports && reports.data.length !== 0) || filter;
 
   const handleDelete = async id => {
     await deleteReport(id);
@@ -26,7 +38,17 @@ export function WebsiteReportsPage({ websiteId }) {
           </Button>
         </Link>
       </Flexbox>
-      <ReportsTable data={reports} onDelete={handleDelete} />
+      {hasData && (
+        <ReportsTable
+          data={reports}
+          onDelete={handleDelete}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+        />
+      )}
+      {!hasData && <EmptyPlaceholder message={formatMessage(messages.noDataAvailable)} />}
     </Page>
   );
 }

components/pages/websites/WebsitesPage.js

@@ -0,0 +1,77 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
+import WebsiteList from 'components/pages/settings/websites/WebsitesList';
+import { useMessages } from 'hooks';
+import useUser from 'hooks/useUser';
+import useConfig from 'hooks/useConfig';
+import { ROLES } from 'lib/constants';
+import { useState } from 'react';
+import {
+  Button,
+  Icon,
+  Icons,
+  Item,
+  Modal,
+  ModalTrigger,
+  Tabs,
+  Text,
+  useToasts,
+} from 'react-basics';
+
+export function WebsitesPage() {
+  const { formatMessage, labels, messages } = useMessages();
+  const [tab, setTab] = useState('my-websites');
+  const [fetch, setFetch] = useState(1);
+  const { user } = useUser();
+  const { cloudMode } = useConfig();
+  const { showToast } = useToasts();
+
+  const handleSave = async () => {
+    setFetch(fetch + 1);
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  const addButton = (
+    <>
+      {user.role !== ROLES.viewOnly && (
+        <ModalTrigger>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.addWebsite)}</Text>
+          </Button>
+          <Modal title={formatMessage(labels.addWebsite)}>
+            {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+          </Modal>
+        </ModalTrigger>
+      )}
+    </>
+  );
+
+  return (
+    <Page>
+      <PageHeader title={formatMessage(labels.websites)}>{!cloudMode && addButton}</PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="my-websites">{formatMessage(labels.myWebsites)}</Item>
+        <Item key="team-webaites">{formatMessage(labels.teamWebsites)}</Item>
+      </Tabs>
+
+      {tab === 'my-websites' && (
+        <WebsiteList showEditButton={!cloudMode} showHeader={false} fetch={fetch} />
+      )}
+      {tab === 'team-webaites' && (
+        <WebsiteList
+          showEditButton={!cloudMode}
+          showHeader={false}
+          fetch={fetch}
+          showTeam={true}
+          onlyTeams={true}
+        />
+      )}
+    </Page>
+  );
+}
+
+export default WebsitesPage;