Update ListTable display of items.

src/app/(main)/websites/[id]/WebsiteDetails.js

@@ -9,7 +9,7 @@ import WebsiteChart from './WebsiteChart';
 import WebsiteMenuView from './WebsiteMenuView';
 import WebsiteHeader from './WebsiteHeader';
 import WebsiteMetricsBar from './WebsiteMetricsBar';
-import WebsiteTableView from '../WebsiteTableView';
+import WebsiteTableView from './WebsiteTableView';
 
 export default function WebsiteDetails({ websiteId }) {
   const { data: website, isLoading, error } = useWebsite(websiteId);

src/app/(main)/websites/[id]/WebsiteMenuView.js

@@ -1,4 +1,4 @@
-import { Text } from 'react-basics';
+import { Icons, Icon, Text } from 'react-basics';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import CountriesTable from 'components/metrics/CountriesTable';
 import RegionsTable from 'components/metrics/RegionsTable';
@@ -110,6 +110,9 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
     <div className={styles.layout}>
       <div className={styles.menu}>
         <LinkButton href={pathname} className={styles.back}>
+          <Icon rotate={180}>
+            <Icons.ArrowRight />
+          </Icon>
           <Text>{formatMessage(labels.back)}</Text>
         </LinkButton>
         <SideNav items={items} selectedKey={view} shallow={true} />
@@ -122,6 +125,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
           animate={false}
           showFilters={true}
           virtualize={true}
+          itemCount={25}
         />
       </div>
     </div>

src/app/(main)/websites/[id]/WebsiteTableView.js

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { Grid, GridRow } from 'components/layout/Grid';
+import PagesTable from 'components/metrics/PagesTable';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import BrowsersTable from 'components/metrics/BrowsersTable';
+import OSTable from 'components/metrics/OSTable';
+import DevicesTable from 'components/metrics/DevicesTable';
+import WorldMap from 'components/common/WorldMap';
+import CountriesTable from 'components/metrics/CountriesTable';
+import EventsTable from 'components/metrics/EventsTable';
+import EventsChart from 'components/metrics/EventsChart';
+
+export default function WebsiteTableView({ websiteId }) {
+  const [countryData, setCountryData] = useState();
+  const tableProps = {
+    websiteId,
+    limit: 10,
+  };
+
+  return (
+    <Grid>
+      <GridRow columns="two">
+        <PagesTable {...tableProps} />
+        <ReferrersTable {...tableProps} />
+      </GridRow>
+      <GridRow columns="three">
+        <BrowsersTable {...tableProps} />
+        <OSTable {...tableProps} />
+        <DevicesTable {...tableProps} />
+      </GridRow>
+      <GridRow columns="two-one">
+        <WorldMap data={countryData} />
+        <CountriesTable {...tableProps} onDataLoad={setCountryData} />
+      </GridRow>
+      <GridRow columns="one-two">
+        <EventsTable {...tableProps} />
+        <EventsChart websiteId={websiteId} />
+      </GridRow>
+    </Grid>
+  );
+}