Moved code into src folder. Added build for component library.

2023-08-21 02:06:09 -07:00
parent 7a7233ead4
commit ede658771e
490 changed files with 749 additions and 442 deletions
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -0,0 +1,19 @@
+import { Row, Column, Flexbox } from 'react-basics';
+import AppLayout from 'components/layout/AppLayout';
+import useMessages from 'components/hooks/useMessages';
+
+export default function Custom404() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.pageNotFound)}>
+      <Row>
+        <Column>
+          <Flexbox alignItems="center" justifyContent="center" flex={1} style={{ minHeight: 600 }}>
+            <h1>{formatMessage(labels.pageNotFound)}</h1>
+          </Flexbox>
+        </Column>
+      </Row>
+    </AppLayout>
+  );
+}
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -0,0 +1,82 @@
+import { IntlProvider } from 'react-intl';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactBasicsProvider } from 'react-basics';
+import Head from 'next/head';
+import Script from 'next/script';
+import { useRouter } from 'next/router';
+import ErrorBoundary from 'components/common/ErrorBoundary';
+import useLocale from 'components/hooks/useLocale';
+import useConfig from 'components/hooks/useConfig';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/700.css';
+import 'react-basics/dist/styles.css';
+import 'styles/variables.css';
+import 'styles/locale.css';
+import 'styles/index.css';
+import 'chartjs-adapter-date-fns';
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export default function App({ Component, pageProps }) {
+  const { locale, messages } = useLocale();
+  const { basePath, pathname } = useRouter();
+  const config = useConfig();
+
+  const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
+
+  if (config?.uiDisabled) {
+    return null;
+  }
+
+  return (
+    <QueryClientProvider client={client}>
+      <IntlProvider
+        locale={locale}
+        messages={messages[locale]}
+        textComponent={Wrapper}
+        onError={() => null}
+      >
+        <ReactBasicsProvider>
+          <ErrorBoundary>
+            <Head>
+              <link rel="icon" href={`${basePath}/favicon.ico`} />
+              <link
+                rel="apple-touch-icon"
+                sizes="180x180"
+                href={`${basePath}/apple-touch-icon.png`}
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                sizes="32x32"
+                href={`${basePath}/favicon-32x32.png`}
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                sizes="16x16"
+                href={`${basePath}/favicon-16x16.png`}
+              />
+              <link rel="manifest" href={`${basePath}/site.webmanifest`} />
+              <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
+              <meta name="msapplication-TileColor" content="#da532c" />
+              <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
+              <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
+              <meta name="viewport" content="width=device-width, initial-scale=1" />
+              <meta name="robots" content="noindex,nofollow" />
+            </Head>
+            <Component {...pageProps} />
+            {!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
+          </ErrorBoundary>
+        </ReactBasicsProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+}
--- a/src/pages/api/auth/login.ts
+++ b/src/pages/api/auth/login.ts
@@ -0,0 +1,75 @@
+import redis from '@umami/redis-client';
+import debug from 'debug';
+import { setAuthKey } from 'lib/auth';
+import { secret } from 'lib/crypto';
+import { useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, User } from 'lib/types';
+import { NextApiResponse } from 'next';
+import {
+  checkPassword,
+  createSecureToken,
+  forbidden,
+  methodNotAllowed,
+  ok,
+  unauthorized,
+} from 'next-basics';
+import { getUserByUsername } from 'queries';
+import * as yup from 'yup';
+
+const log = debug('umami:auth');
+
+export interface LoginRequestBody {
+  username: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  token: string;
+  user: User;
+}
+
+const schema = {
+  POST: yup.object().shape({
+    username: yup.string().required(),
+    password: yup.string().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<any, LoginRequestBody>,
+  res: NextApiResponse<LoginResponse>,
+) => {
+  if (process.env.DISABLE_LOGIN) {
+    return forbidden(res);
+  }
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'POST') {
+    const { username, password } = req.body;
+
+    const user = await getUserByUsername(username, { includePassword: true });
+
+    if (user && checkPassword(password, user.password)) {
+      if (redis.enabled) {
+        const token = await setAuthKey(user);
+
+        return ok(res, { token, user });
+      }
+
+      const token = createSecureToken({ userId: user.id }, secret());
+
+      return ok(res, {
+        token,
+        user: { id: user.id, username: user.username, role: user.role, createdAt: user.createdAt },
+      });
+    }
+
+    log('Login failed:', { username, user });
+
+    return unauthorized(res, 'message.incorrect-username-password');
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/auth/logout.ts
+++ b/src/pages/api/auth/logout.ts
@@ -0,0 +1,19 @@
+import { methodNotAllowed, ok } from 'next-basics';
+import redis from '@umami/redis-client';
+import { useAuth } from 'lib/middleware';
+import { getAuthToken } from 'lib/auth';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  await useAuth(req, res);
+
+  if (req.method === 'POST') {
+    if (redis.enabled) {
+      await redis.del(getAuthToken(req));
+    }
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/auth/sso.ts
+++ b/src/pages/api/auth/sso.ts
@@ -0,0 +1,18 @@
+import { NextApiRequestAuth } from 'lib/types';
+import { useAuth } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { badRequest, ok } from 'next-basics';
+import redis from '@umami/redis-client';
+import { setAuthKey } from 'lib/auth';
+
+export default async (req: NextApiRequestAuth, res: NextApiResponse) => {
+  await useAuth(req, res);
+
+  if (redis.enabled && req.auth.user) {
+    const token = await setAuthKey(req.auth.user, 86400);
+
+    return ok(res, { user: req.auth.user, token });
+  }
+
+  return badRequest(res);
+};
--- a/src/pages/api/auth/verify.ts
+++ b/src/pages/api/auth/verify.ts
@@ -0,0 +1,10 @@
+import { NextApiRequestAuth } from 'lib/types';
+import { useAuth } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { ok } from 'next-basics';
+
+export default async (req: NextApiRequestAuth, res: NextApiResponse) => {
+  await useAuth(req, res);
+
+  return ok(res, req.auth);
+};
--- a/src/pages/api/config.ts
+++ b/src/pages/api/config.ts
@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { ok, methodNotAllowed } from 'next-basics';
+
+export interface ConfigResponse {
+  basePath: string;
+  trackerScriptName: string;
+  updatesDisabled: boolean;
+  telemetryDisabled: boolean;
+  cloudMode: boolean;
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>) => {
+  if (req.method === 'GET') {
+    return ok(res, {
+      basePath: process.env.BASE_PATH || '',
+      trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
+      updatesDisabled: !!process.env.DISABLE_UPDATES,
+      telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
+      cloudMode: !!process.env.CLOUD_MODE,
+    });
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/event-data/events.ts
+++ b/src/pages/api/event-data/events.ts
@@ -0,0 +1,55 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getEventDataEvents } from 'queries';
+import * as yup from 'yup';
+
+export interface EventDataFieldsRequestQuery {
+  websiteId: string;
+  startAt: string;
+  endAt: string;
+  event: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    startAt: yup.number().integer().required(),
+    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    event: yup.string().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<EventDataFieldsRequestQuery, any>,
+  res: NextApiResponse<any>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    const { websiteId, startAt, endAt, event } = req.query;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const startDate = new Date(+startAt);
+    const endDate = new Date(+endAt);
+
+    const data = await getEventDataEvents(websiteId, {
+      startDate,
+      endDate,
+      event,
+    });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/event-data/fields.ts
+++ b/src/pages/api/event-data/fields.ts
@@ -0,0 +1,51 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getEventDataFields } from 'queries';
+import * as yup from 'yup';
+
+export interface EventDataFieldsRequestQuery {
+  websiteId: string;
+  startAt: string;
+  endAt: string;
+  field?: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    startAt: yup.number().integer().required(),
+    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    field: yup.string(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<EventDataFieldsRequestQuery>,
+  res: NextApiResponse<any>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    const { websiteId, startAt, endAt, field } = req.query;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const startDate = new Date(+startAt);
+    const endDate = new Date(+endAt);
+
+    const data = await getEventDataFields(websiteId, { startDate, endDate, field });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/event-data/stats.ts
+++ b/src/pages/api/event-data/stats.ts
@@ -0,0 +1,48 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import * as yup from 'yup';
+
+export interface EventDataStatsRequestQuery {
+  websiteId: string;
+  startAt: string;
+  endAt: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    startAt: yup.number().integer().required(),
+    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<EventDataStatsRequestQuery>,
+  res: NextApiResponse<any>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    const { websiteId, startAt, endAt } = req.query;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const startDate = new Date(+startAt);
+    const endDate = new Date(+endAt);
+
+    const data = await getEventDataStats(websiteId, { startDate, endDate });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/heartbeat.ts
+++ b/src/pages/api/heartbeat.ts
@@ -0,0 +1,6 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { ok } from 'next-basics';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  return ok(res);
+};
--- a/src/pages/api/me/index.ts
+++ b/src/pages/api/me/index.ts
@@ -0,0 +1,13 @@
+import { NextApiResponse } from 'next';
+import { useAuth } from 'lib/middleware';
+import { NextApiRequestQueryBody, User } from 'lib/types';
+import { ok } from 'next-basics';
+
+export default async (
+  req: NextApiRequestQueryBody<unknown, unknown>,
+  res: NextApiResponse<User>,
+) => {
+  await useAuth(req, res);
+
+  return ok(res, req.auth.user);
+};
--- a/src/pages/api/me/password.ts
+++ b/src/pages/api/me/password.ts
@@ -0,0 +1,63 @@
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, User } from 'lib/types';
+import { NextApiResponse } from 'next';
+import {
+  badRequest,
+  checkPassword,
+  forbidden,
+  hashPassword,
+  methodNotAllowed,
+  ok,
+} from 'next-basics';
+import { getUserById, updateUser } from 'queries';
+import * as yup from 'yup';
+
+export interface UserPasswordRequestQuery {
+  id: string;
+}
+
+export interface UserPasswordRequestBody {
+  currentPassword: string;
+  newPassword: string;
+}
+
+const schema = {
+  POST: yup.object().shape({
+    id: yup.string().uuid().required(),
+    currentPassword: yup.string().required(),
+    newPassword: yup.string().min(8).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<UserPasswordRequestQuery, UserPasswordRequestBody>,
+  res: NextApiResponse<User>,
+) => {
+  if (process.env.CLOUD_MODE) {
+    return forbidden(res);
+  }
+
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { currentPassword, newPassword } = req.body;
+  const { id } = req.auth.user;
+
+  if (req.method === 'POST') {
+    const user = await getUserById(id, { includePassword: true });
+
+    if (!checkPassword(currentPassword, user.password)) {
+      return badRequest(res, 'Current password is incorrect');
+    }
+
+    const password = hashPassword(newPassword);
+
+    const updated = await updateUser({ password }, { id });
+
+    return ok(res, updated);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/me/teams.ts
+++ b/src/pages/api/me/teams.ts
@@ -0,0 +1,35 @@
+import { useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, TeamSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed } from 'next-basics';
+import userTeams from 'pages/api/users/[id]/teams';
+import * as yup from 'yup';
+
+export interface MyTeamsRequestQuery extends SearchFilter<TeamSearchFilterType> {
+  id: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    ...getFilterValidation(/All|Name|Owner/i),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<MyTeamsRequestQuery, any>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    req.query.id = req.auth.user.id;
+
+    return userTeams(req, res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/me/websites.ts
+++ b/src/pages/api/me/websites.ts
@@ -0,0 +1,36 @@
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, WebsiteSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed } from 'next-basics';
+import userWebsites from 'pages/api/users/[id]/websites';
+import * as yup from 'yup';
+
+export interface MyWebsitesRequestQuery extends SearchFilter<WebsiteSearchFilterType> {
+  id: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    ...getFilterValidation(/All|Name|Domain/i),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<MyWebsitesRequestQuery, any>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    req.query.id = req.auth.user.id;
+
+    return userWebsites(req, res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/realtime/[id].ts
+++ b/src/pages/api/realtime/[id].ts
@@ -0,0 +1,51 @@
+import { subMinutes } from 'date-fns';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, RealtimeInit } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getRealtimeData } from 'queries';
+import * as yup from 'yup';
+export interface RealtimeRequestQuery {
+  id: string;
+  startAt: number;
+}
+
+const currentDate = new Date().getTime();
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+    startAt: yup.number().integer().max(currentDate).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<RealtimeRequestQuery>,
+  res: NextApiResponse<RealtimeInit>,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    const { id: websiteId, startAt } = req.query;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    let startTime = subMinutes(new Date(), 30);
+
+    if (+startAt > startTime.getTime()) {
+      startTime = new Date(+startAt);
+    }
+
+    const data = await getRealtimeData(websiteId, startTime);
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/reports/[id].ts
+++ b/src/pages/api/reports/[id].ts
@@ -0,0 +1,104 @@
+import { canDeleteReport, canUpdateReport, canViewReport } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, ReportType, YupRequest } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { deleteReport, getReportById, updateReport } from 'queries';
+import * as yup from 'yup';
+
+export interface ReportRequestQuery {
+  id: string;
+}
+
+export interface ReportRequestBody {
+  websiteId: string;
+  type: ReportType;
+  name: string;
+  description: string;
+  parameters: string;
+}
+
+const schema: YupRequest = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+  POST: yup.object().shape({
+    id: yup.string().uuid().required(),
+    websiteId: yup.string().uuid().required(),
+    type: yup
+      .string()
+      .matches(/funnel|insights|retention/i)
+      .required(),
+    name: yup.string().max(200).required(),
+    description: yup.string().max(500),
+    parameters: yup
+      .object()
+      .test('len', 'Must not exceed 6000 characters.', val => JSON.stringify(val).length < 6000),
+  }),
+  DELETE: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<ReportRequestQuery, ReportRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: reportId } = req.query;
+  const {
+    user: { id: userId },
+  } = req.auth;
+
+  if (req.method === 'GET') {
+    const report = await getReportById(reportId);
+
+    if (!(await canViewReport(req.auth, report))) {
+      return unauthorized(res);
+    }
+
+    report.parameters = JSON.parse(report.parameters);
+
+    return ok(res, report);
+  }
+
+  if (req.method === 'POST') {
+    const { websiteId, type, name, description, parameters } = req.body;
+
+    const report = await getReportById(reportId);
+
+    if (!(await canUpdateReport(req.auth, report))) {
+      return unauthorized(res);
+    }
+
+    const result = await updateReport(reportId, {
+      websiteId,
+      userId,
+      type,
+      name,
+      description,
+      parameters: JSON.stringify(parameters),
+    } as any);
+
+    return ok(res, result);
+  }
+
+  if (req.method === 'DELETE') {
+    const report = await getReportById(reportId);
+
+    if (!(await canDeleteReport(req.auth, report))) {
+      return unauthorized(res);
+    }
+
+    await deleteReport(reportId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/reports/funnel.ts
+++ b/src/pages/api/reports/funnel.ts
@@ -0,0 +1,74 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getFunnel } from 'queries';
+import * as yup from 'yup';
+
+export interface FunnelRequestBody {
+  websiteId: string;
+  urls: string[];
+  window: number;
+  dateRange: {
+    startDate: string;
+    endDate: string;
+  };
+}
+
+export interface FunnelResponse {
+  urls: string[];
+  window: number;
+  startAt: number;
+  endAt: number;
+}
+
+const schema = {
+  POST: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    urls: yup.array().min(2).of(yup.string()).required(),
+    window: yup.number().positive().required(),
+    dateRange: yup
+      .object()
+      .shape({
+        startDate: yup.date().required(),
+        endDate: yup.date().required(),
+      })
+      .required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<any, FunnelRequestBody>,
+  res: NextApiResponse<FunnelResponse>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'POST') {
+    const {
+      websiteId,
+      urls,
+      window,
+      dateRange: { startDate, endDate },
+    } = req.body;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const data = await getFunnel(websiteId, {
+      startDate: new Date(startDate),
+      endDate: new Date(endDate),
+      urls,
+      windowMinutes: +window,
+    });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/reports/index.ts
+++ b/src/pages/api/reports/index.ts
@@ -0,0 +1,84 @@
+import { uuid } from 'lib/crypto';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, ReportSearchFilterType, SearchFilter } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok } from 'next-basics';
+import { createReport, getReportsByUserId } from 'queries';
+import * as yup from 'yup';
+
+export interface ReportsRequestQuery extends SearchFilter<ReportSearchFilterType> {}
+
+export interface ReportRequestBody {
+  websiteId: string;
+  name: string;
+  type: string;
+  description: string;
+  parameters: {
+    [key: string]: any;
+  };
+}
+
+const schema = {
+  GET: yup.object().shape({
+    ...getFilterValidation(/All|Name|Description|Type|Username|Website Name|Website Domain/i),
+  }),
+  POST: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    name: yup.string().max(200).required(),
+    type: yup
+      .string()
+      .matches(/funnel|insights|retention/i)
+      .required(),
+    description: yup.string().max(500),
+    parameters: yup
+      .object()
+      .test('len', 'Must not exceed 6000 characters.', val => JSON.stringify(val).length < 6000),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<any, ReportRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    user: { id: userId },
+  } = req.auth;
+
+  if (req.method === 'GET') {
+    const { page, filter, pageSize } = req.query;
+
+    const data = await getReportsByUserId(userId, {
+      page,
+      filter,
+      pageSize: +pageSize || null,
+      includeTeams: true,
+    });
+
+    return ok(res, data);
+  }
+
+  if (req.method === 'POST') {
+    const { websiteId, type, name, description, parameters } = req.body;
+
+    const result = await createReport({
+      id: uuid(),
+      userId,
+      websiteId,
+      type,
+      name,
+      description,
+      parameters: JSON.stringify(parameters),
+    } as any);
+
+    return ok(res, result);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/reports/insights.ts
+++ b/src/pages/api/reports/insights.ts
@@ -0,0 +1,91 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getInsights } from 'queries';
+import * as yup from 'yup';
+
+export interface InsightsRequestBody {
+  websiteId: string;
+  dateRange: {
+    startDate: string;
+    endDate: string;
+  };
+  fields: { name: string; type: string; value: string }[];
+  filters: string[];
+  groups: { name: string; type: string }[];
+}
+
+const schema = {
+  POST: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    dateRange: yup
+      .object()
+      .shape({
+        startDate: yup.date().required(),
+        endDate: yup.date().required(),
+      })
+      .required(),
+    fields: yup
+      .array()
+      .of(
+        yup.object().shape({
+          name: yup.string().required(),
+          type: yup.string().required(),
+          value: yup.string().required(),
+        }),
+      )
+      .min(1)
+      .required(),
+    filters: yup.array().of(yup.string()).min(1).required(),
+    groups: yup.array().of(
+      yup.object().shape({
+        name: yup.string().required(),
+        type: yup.string().required(),
+      }),
+    ),
+  }),
+};
+
+function convertFilters(filters) {
+  return filters.reduce((obj, { name, ...value }) => {
+    obj[name] = value;
+
+    return obj;
+  }, {});
+}
+
+export default async (
+  req: NextApiRequestQueryBody<any, InsightsRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'POST') {
+    const {
+      websiteId,
+      dateRange: { startDate, endDate },
+      fields,
+      filters,
+    } = req.body;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const data = await getInsights(websiteId, fields, {
+      ...convertFilters(filters),
+      startDate: new Date(startDate),
+      endDate: new Date(endDate),
+    });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/reports/retention.ts
+++ b/src/pages/api/reports/retention.ts
@@ -0,0 +1,56 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getRetention } from 'queries';
+import * as yup from 'yup';
+
+export interface RetentionRequestBody {
+  websiteId: string;
+  dateRange: { startDate: string; endDate: string };
+}
+
+const schema = {
+  POST: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    dateRange: yup
+      .object()
+      .shape({
+        startDate: yup.date().required(),
+        endDate: yup.date().required(),
+      })
+      .required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<any, RetentionRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'POST') {
+    const {
+      websiteId,
+      dateRange: { startDate, endDate },
+    } = req.body;
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const data = await getRetention(websiteId, {
+      startDate: new Date(startDate),
+      endDate: new Date(endDate),
+    });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/scripts/telemetry.js
+++ b/src/pages/api/scripts/telemetry.js
@@ -0,0 +1,18 @@
+import { CURRENT_VERSION, TELEMETRY_PIXEL } from 'lib/constants';
+
+export default function handler(req, res) {
+  res.setHeader('content-type', 'text/javascript');
+
+  if (process.env.DISABLE_TELEMETRY) {
+    return res.send('/* telemetry disabled */');
+  }
+
+  const script = `
+    (()=>{const i=document.createElement('img');
+      i.setAttribute('src','${TELEMETRY_PIXEL}?v=${CURRENT_VERSION}');
+      i.setAttribute('style','width:0;height:0;position:absolute;pointer-events:none;');
+      document.body.appendChild(i);})();
+  `;
+
+  return res.send(script.replace(/\s\s+/g, ''));
+}
--- a/src/pages/api/send.ts
+++ b/src/pages/api/send.ts
@@ -0,0 +1,181 @@
+import { Resolver } from 'dns/promises';
+import ipaddr from 'ipaddr.js';
+import isbot from 'isbot';
+import { COLLECTION_TYPE, HOSTNAME_REGEX } from 'lib/constants';
+import { secret } from 'lib/crypto';
+import { getIpAddress, getJsonBody } from 'lib/detect';
+import { useCors, useSession, useValidate } from 'lib/middleware';
+import { CollectionType, YupRequest } from 'lib/types';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { badRequest, createToken, forbidden, ok, send } from 'next-basics';
+import { saveEvent, saveSessionData } from 'queries';
+import * as yup from 'yup';
+
+export interface CollectRequestBody {
+  payload: {
+    data: { [key: string]: any };
+    hostname: string;
+    language: string;
+    referrer: string;
+    screen: string;
+    title: string;
+    url: string;
+    website: string;
+    name: string;
+  };
+  type: CollectionType;
+}
+
+export interface NextApiRequestCollect extends NextApiRequest {
+  body: CollectRequestBody;
+  session: {
+    id: string;
+    websiteId: string;
+    ownerId: string;
+    hostname: string;
+    browser: string;
+    os: string;
+    device: string;
+    screen: string;
+    language: string;
+    country: string;
+    subdivision1: string;
+    subdivision2: string;
+    city: string;
+  };
+  headers: { [key: string]: any };
+  yup: YupRequest;
+}
+
+const schema = {
+  POST: yup.object().shape({
+    payload: yup
+      .object()
+      .shape({
+        data: yup.object(),
+        hostname: yup.string().matches(HOSTNAME_REGEX).max(100),
+        language: yup.string().max(35),
+        referrer: yup.string().max(500),
+        screen: yup.string().max(11),
+        title: yup.string().max(500),
+        url: yup.string().max(500),
+        website: yup.string().uuid().required(),
+        name: yup.string().max(50),
+      })
+      .required(),
+    type: yup
+      .string()
+      .matches(/event|identify/i)
+      .required(),
+  }),
+};
+
+export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
+  await useCors(req, res);
+
+  if (isbot(req.headers['user-agent']) && !process.env.DISABLE_BOT_CHECK) {
+    return ok(res);
+  }
+
+  const { type, payload } = getJsonBody<CollectRequestBody>(req);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (await hasBlockedIp(req)) {
+    return forbidden(res);
+  }
+
+  const { url, referrer, name: eventName, data: eventData, title: pageTitle } = payload;
+
+  await useSession(req, res);
+
+  const session = req.session;
+
+  if (type === COLLECTION_TYPE.event) {
+    // eslint-disable-next-line prefer-const
+    let [urlPath, urlQuery] = url?.split('?') || [];
+    let [referrerPath, referrerQuery] = referrer?.split('?') || [];
+    let referrerDomain;
+
+    if (!urlPath) {
+      urlPath = '/';
+    }
+
+    if (referrerPath?.startsWith('http')) {
+      const refUrl = new URL(referrer);
+      referrerPath = refUrl.pathname;
+      referrerQuery = refUrl.search.substring(1);
+      referrerDomain = refUrl.hostname.replace(/www\./, '');
+    }
+
+    if (process.env.REMOVE_TRAILING_SLASH) {
+      urlPath = urlPath.replace(/.+\/$/, '');
+    }
+
+    await saveEvent({
+      urlPath,
+      urlQuery,
+      referrerPath,
+      referrerQuery,
+      referrerDomain,
+      pageTitle,
+      eventName,
+      eventData,
+      ...session,
+      sessionId: session.id,
+    });
+  }
+
+  if (type === COLLECTION_TYPE.identify) {
+    if (!eventData) {
+      return badRequest(res, 'Data required.');
+    }
+
+    await saveSessionData({ ...session, sessionData: eventData, sessionId: session.id });
+  }
+
+  const token = createToken(session, secret());
+
+  return send(res, token);
+};
+
+async function hasBlockedIp(req: NextApiRequestCollect) {
+  const ignoreIps = process.env.IGNORE_IP;
+  const ignoreHostnames = process.env.IGNORE_HOSTNAME;
+
+  if (ignoreIps || ignoreHostnames) {
+    const ips = [];
+
+    if (ignoreIps) {
+      ips.push(...ignoreIps.split(',').map(n => n.trim()));
+    }
+
+    if (ignoreHostnames) {
+      const resolver = new Resolver();
+      const promises = ignoreHostnames
+        .split(',')
+        .map(n => resolver.resolve4(n.trim()).catch(() => {}));
+
+      await Promise.all(promises).then(resolvedIps => {
+        ips.push(...resolvedIps.filter(n => n).flatMap(n => n as string[]));
+      });
+    }
+
+    const clientIp = getIpAddress(req);
+
+    return ips.find(ip => {
+      if (ip === clientIp) return true;
+
+      // CIDR notation
+      if (ip.indexOf('/') > 0) {
+        const addr = ipaddr.parse(clientIp);
+        const range = ipaddr.parseCIDR(ip);
+
+        if (addr.kind() === range[0].kind() && addr.match(range)) return true;
+      }
+
+      return false;
+    });
+  }
+}
--- a/src/pages/api/share/[id].ts
+++ b/src/pages/api/share/[id].ts
@@ -0,0 +1,47 @@
+import { secret } from 'lib/crypto';
+import { useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { createToken, methodNotAllowed, notFound, ok } from 'next-basics';
+import { getWebsiteByShareId } from 'queries';
+import * as yup from 'yup';
+
+export interface ShareRequestQuery {
+  id: string;
+}
+
+export interface ShareResponse {
+  id: string;
+  token: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<ShareRequestQuery>,
+  res: NextApiResponse<ShareResponse>,
+) => {
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: shareId } = req.query;
+
+  if (req.method === 'GET') {
+    const website = await getWebsiteByShareId(shareId);
+
+    if (website) {
+      const data = { websiteId: website.id };
+      const token = createToken(data, secret());
+
+      return ok(res, { ...data, token });
+    }
+
+    return notFound(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/[id]/index.ts
+++ b/src/pages/api/teams/[id]/index.ts
@@ -0,0 +1,78 @@
+import { Team } from '@prisma/client';
+import { canDeleteTeam, canUpdateTeam, canViewTeam } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { deleteTeam, getTeamById, updateTeam } from 'queries';
+import * as yup from 'yup';
+
+export interface TeamRequestQuery {
+  id: string;
+}
+
+export interface TeamRequestBody {
+  name: string;
+  accessCode: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+  POST: yup.object().shape({
+    id: yup.string().uuid().required(),
+    name: yup.string().max(50).required(),
+    accessCode: yup.string().max(50).required(),
+  }),
+  DELETE: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<TeamRequestQuery, TeamRequestBody>,
+  res: NextApiResponse<Team>,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: teamId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewTeam(req.auth, teamId))) {
+      return unauthorized(res);
+    }
+
+    const user = await getTeamById(teamId, { includeTeamUser: true });
+
+    return ok(res, user);
+  }
+
+  if (req.method === 'POST') {
+    if (!(await canUpdateTeam(req.auth, teamId))) {
+      return unauthorized(res, 'You must be the owner of this team.');
+    }
+
+    const { name, accessCode } = req.body;
+    const data = { name, accessCode };
+
+    const updated = await updateTeam(teamId, data);
+
+    return ok(res, updated);
+  }
+
+  if (req.method === 'DELETE') {
+    if (!(await canDeleteTeam(req.auth, teamId))) {
+      return unauthorized(res, 'You must be the owner of this team.');
+    }
+
+    await deleteTeam(teamId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/[id]/users/[userId].ts
+++ b/src/pages/api/teams/[id]/users/[userId].ts
@@ -0,0 +1,39 @@
+import { canDeleteTeamUser } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { deleteTeamUser } from 'queries';
+import * as yup from 'yup';
+export interface TeamUserRequestQuery {
+  id: string;
+  userId: string;
+}
+
+const schema = {
+  DELETE: yup.object().shape({
+    id: yup.string().uuid().required(),
+    userId: yup.string().uuid().required(),
+  }),
+};
+
+export default async (req: NextApiRequestQueryBody<TeamUserRequestQuery>, res: NextApiResponse) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'DELETE') {
+    const { id: teamId, userId } = req.query;
+
+    if (!(await canDeleteTeamUser(req.auth, teamId, userId))) {
+      return unauthorized(res, 'You must be the owner of this team.');
+    }
+
+    await deleteTeamUser(teamId, userId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/[id]/users/index.ts
+++ b/src/pages/api/teams/[id]/users/index.ts
@@ -0,0 +1,42 @@
+import { canViewTeam } from 'lib/auth';
+import { useAuth } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, TeamSearchFilterType } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getUsersByTeamId } from 'queries';
+
+export interface TeamUserRequestQuery extends SearchFilter<TeamSearchFilterType> {
+  id: string;
+}
+
+export interface TeamUserRequestBody {
+  email: string;
+  roleId: string;
+}
+
+export default async (
+  req: NextApiRequestQueryBody<TeamUserRequestQuery, TeamUserRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useAuth(req, res);
+
+  const { id: teamId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewTeam(req.auth, teamId))) {
+      return unauthorized(res);
+    }
+
+    const { page, filter, pageSize } = req.query;
+
+    const users = await getUsersByTeamId(teamId, {
+      page,
+      filter,
+      pageSize: +pageSize || null,
+    });
+
+    return ok(res, users);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/[id]/websites/[websiteId].ts
+++ b/src/pages/api/teams/[id]/websites/[websiteId].ts
@@ -0,0 +1,43 @@
+import { canDeleteTeamWebsite } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { deleteTeamWebsite } from 'queries/admin/teamWebsite';
+import * as yup from 'yup';
+
+export interface TeamWebsitesRequestQuery {
+  id: string;
+  websiteId: string;
+}
+
+const schema = {
+  DELETE: yup.object().shape({
+    id: yup.string().uuid().required(),
+    websiteId: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<TeamWebsitesRequestQuery>,
+  res: NextApiResponse,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: teamId, websiteId } = req.query;
+
+  if (req.method === 'DELETE') {
+    if (!(await canDeleteTeamWebsite(req.auth, teamId, websiteId))) {
+      return unauthorized(res);
+    }
+
+    await deleteTeamWebsite(teamId, websiteId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/[id]/websites/index.ts
+++ b/src/pages/api/teams/[id]/websites/index.ts
@@ -0,0 +1,71 @@
+import { canViewTeam } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, WebsiteSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getWebsitesByTeamId } from 'queries';
+import { createTeamWebsites } from 'queries/admin/teamWebsite';
+
+export interface TeamWebsiteRequestQuery extends SearchFilter<WebsiteSearchFilterType> {
+  id: string;
+}
+
+export interface TeamWebsiteRequestBody {
+  websiteIds?: string[];
+}
+
+import * as yup from 'yup';
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+    ...getFilterValidation(/All|Name|Domain/i),
+  }),
+  POST: yup.object().shape({
+    id: yup.string().uuid().required(),
+    websiteIds: yup.array().of(yup.string()).min(1).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<TeamWebsiteRequestQuery, TeamWebsiteRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: teamId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewTeam(req.auth, teamId))) {
+      return unauthorized(res);
+    }
+
+    const { page, filter, pageSize } = req.query;
+
+    const websites = await getWebsitesByTeamId(teamId, {
+      page,
+      filter,
+      pageSize: +pageSize || null,
+    });
+
+    return ok(res, websites);
+  }
+
+  if (req.method === 'POST') {
+    if (!(await canViewTeam(req.auth, teamId))) {
+      return unauthorized(res);
+    }
+
+    const { websiteIds } = req.body;
+
+    const websites = await createTeamWebsites(teamId, websiteIds);
+
+    return ok(res, websites);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/index.ts
+++ b/src/pages/api/teams/index.ts
@@ -0,0 +1,69 @@
+import { Team } from '@prisma/client';
+import { canCreateTeam } from 'lib/auth';
+import { uuid } from 'lib/crypto';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, TeamSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { getRandomChars, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { createTeam, getTeamsByUserId } from 'queries';
+import * as yup from 'yup';
+
+export interface TeamsRequestQuery extends SearchFilter<TeamSearchFilterType> {}
+export interface TeamsRequestBody {
+  name: string;
+}
+
+export interface MyTeamsRequestQuery extends SearchFilter<TeamSearchFilterType> {}
+
+const schema = {
+  GET: yup.object().shape({
+    ...getFilterValidation(/All|Name|Owner/i),
+  }),
+  POST: yup.object().shape({
+    name: yup.string().max(50).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<TeamsRequestQuery, TeamsRequestBody>,
+  res: NextApiResponse<Team[] | Team>,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    user: { id: userId },
+  } = req.auth;
+
+  if (req.method === 'GET') {
+    const { page, filter, pageSize } = req.query;
+
+    const results = await getTeamsByUserId(userId, { page, filter, pageSize: +pageSize || null });
+
+    return ok(res, results);
+  }
+
+  if (req.method === 'POST') {
+    if (!(await canCreateTeam(req.auth))) {
+      return unauthorized(res);
+    }
+
+    const { name } = req.body;
+
+    const team = await createTeam(
+      {
+        id: uuid(),
+        name,
+        accessCode: getRandomChars(16),
+      },
+      userId,
+    );
+
+    return ok(res, team);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/teams/join.ts
+++ b/src/pages/api/teams/join.ts
@@ -0,0 +1,49 @@
+import { Team } from '@prisma/client';
+import { ROLES } from 'lib/constants';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, notFound, ok } from 'next-basics';
+import { createTeamUser, getTeamByAccessCode, getTeamUser } from 'queries';
+import * as yup from 'yup';
+export interface TeamsJoinRequestBody {
+  accessCode: string;
+}
+
+const schema = {
+  POST: yup.object().shape({
+    accessCode: yup.string().max(50).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<any, TeamsJoinRequestBody>,
+  res: NextApiResponse<Team>,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'POST') {
+    const { accessCode } = req.body;
+
+    const team = await getTeamByAccessCode(accessCode);
+
+    if (!team) {
+      return notFound(res, 'message.team-not-found');
+    }
+
+    const teamUser = await getTeamUser(team.id, req.auth.user.id);
+
+    if (teamUser) {
+      return methodNotAllowed(res, 'message.team-already-member');
+    }
+
+    await createTeamUser(req.auth.user.id, team.id, ROLES.teamMember);
+
+    return ok(res, team);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/users/[id]/index.ts
+++ b/src/pages/api/users/[id]/index.ts
@@ -0,0 +1,108 @@
+import { canDeleteUser, canUpdateUser, canViewUser } from 'lib/auth';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, Role, User } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { deleteUser, getUserById, getUserByUsername, updateUser } from 'queries';
+import * as yup from 'yup';
+
+export interface UserRequestQuery {
+  id: string;
+}
+
+export interface UserRequestBody {
+  username: string;
+  password: string;
+  role: Role;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+  POST: yup.object().shape({
+    id: yup.string().uuid().required(),
+    username: yup.string().max(255),
+    password: yup.string(),
+    role: yup.string().matches(/admin|user|view-only/i),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<UserRequestQuery, UserRequestBody>,
+  res: NextApiResponse<User>,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    user: { id: userId, isAdmin },
+  } = req.auth;
+  const { id } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewUser(req.auth, id))) {
+      return unauthorized(res);
+    }
+
+    const user = await getUserById(id);
+
+    return ok(res, user);
+  }
+
+  if (req.method === 'POST') {
+    if (!(await canUpdateUser(req.auth, id))) {
+      return unauthorized(res);
+    }
+
+    const { username, password, role } = req.body;
+
+    const user = await getUserById(id);
+
+    const data: any = {};
+
+    if (password) {
+      data.password = hashPassword(password);
+    }
+
+    // Only admin can change these fields
+    if (role && isAdmin) {
+      data.role = role;
+    }
+
+    if (username && isAdmin) {
+      data.username = username;
+    }
+
+    // Check when username changes
+    if (data.username && user.username !== data.username) {
+      const user = await getUserByUsername(username);
+
+      if (user) {
+        return badRequest(res, 'User already exists');
+      }
+    }
+
+    const updated = await updateUser(data, { id });
+
+    return ok(res, updated);
+  }
+
+  if (req.method === 'DELETE') {
+    if (!(await canDeleteUser(req.auth))) {
+      return unauthorized(res);
+    }
+
+    if (id === userId) {
+      return badRequest(res, 'You cannot delete yourself.');
+    }
+
+    await deleteUser(id);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/users/[id]/teams.ts
+++ b/src/pages/api/users/[id]/teams.ts
@@ -0,0 +1,55 @@
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, TeamSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getTeamsByUserId } from 'queries';
+import * as yup from 'yup';
+export interface UserTeamsRequestQuery extends SearchFilter<TeamSearchFilterType> {
+  id: string;
+}
+
+export interface UserTeamsRequestBody {
+  name: string;
+  domain: string;
+  shareId: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+    ...getFilterValidation('/All|Name|Owner/i'),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<any, UserTeamsRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { user } = req.auth;
+  const { id: userId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!user.isAdmin && user.id !== userId) {
+      return unauthorized(res);
+    }
+
+    const { page, filter, pageSize } = req.query;
+
+    const teams = await getTeamsByUserId(userId, {
+      page,
+      filter,
+      pageSize: +pageSize || null,
+    });
+
+    return ok(res, teams);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/users/[id]/usage.ts
+++ b/src/pages/api/users/[id]/usage.ts
@@ -0,0 +1,86 @@
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getEventDataUsage, getEventUsage, getUserWebsites } from 'queries';
+import * as yup from 'yup';
+
+export interface UserUsageRequestQuery {
+  id: string;
+  startAt: string;
+  endAt: string;
+}
+
+export interface UserUsageRequestResponse {
+  websiteEventUsage: number;
+  eventDataUsage: number;
+  websites: {
+    websiteEventUsage: number;
+    eventDataUsage: number;
+    websiteId: string;
+    websiteName: string;
+  }[];
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+    startAt: yup.number().integer().required(),
+    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<UserUsageRequestQuery>,
+  res: NextApiResponse<UserUsageRequestResponse>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { user } = req.auth;
+
+  if (req.method === 'GET') {
+    if (!user.isAdmin) {
+      return unauthorized(res);
+    }
+
+    const { id: userId, startAt, endAt } = req.query;
+
+    const startDate = new Date(+startAt);
+    const endDate = new Date(+endAt);
+
+    const websites = await getUserWebsites(userId);
+
+    const websiteIds = websites.map(a => a.id);
+
+    const websiteEventUsage = await getEventUsage(websiteIds, startDate, endDate);
+    const eventDataUsage = await getEventDataUsage(websiteIds, startDate, endDate);
+
+    const websiteUsage = websites.map(a => ({
+      websiteId: a.id,
+      websiteName: a.name,
+      websiteEventUsage: websiteEventUsage.find(b => a.id === b.websiteId)?.count || 0,
+      eventDataUsage: eventDataUsage.find(b => a.id === b.websiteId)?.count || 0,
+    }));
+
+    const usage = websiteUsage.reduce(
+      (acc, cv) => {
+        acc.websiteEventUsage += cv.websiteEventUsage;
+        acc.eventDataUsage += cv.eventDataUsage;
+
+        return acc;
+      },
+      { websiteEventUsage: 0, eventDataUsage: 0 },
+    );
+
+    return ok(res, {
+      ...usage,
+      websites: websiteUsage,
+    });
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/users/[id]/websites.ts
+++ b/src/pages/api/users/[id]/websites.ts
@@ -0,0 +1,54 @@
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, WebsiteSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getWebsitesByUserId } from 'queries';
+import * as yup from 'yup';
+
+export interface UserWebsitesRequestQuery extends SearchFilter<WebsiteSearchFilterType> {
+  id: string;
+  includeTeams?: boolean;
+  onlyTeams?: boolean;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+    includeTeams: yup.boolean(),
+    onlyTeams: yup.boolean(),
+    ...getFilterValidation(/All|Name|Domain/i),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<UserWebsitesRequestQuery>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { user } = req.auth;
+  const { id: userId, page, filter, pageSize, includeTeams, onlyTeams } = req.query;
+
+  if (req.method === 'GET') {
+    if (!user.isAdmin && user.id !== userId) {
+      return unauthorized(res);
+    }
+
+    const websites = await getWebsitesByUserId(userId, {
+      page,
+      filter,
+      pageSize: +pageSize || null,
+      includeTeams,
+      onlyTeams,
+    });
+
+    return ok(res, websites);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/users/index.ts
+++ b/src/pages/api/users/index.ts
@@ -0,0 +1,80 @@
+import { canCreateUser, canViewUsers } from 'lib/auth';
+import { ROLES } from 'lib/constants';
+import { uuid } from 'lib/crypto';
+import { useAuth, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, Role, SearchFilter, User, UserSearchFilterType } from 'lib/types';
+import { getFilterValidation } from 'lib/yup';
+import { NextApiResponse } from 'next';
+import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { createUser, getUserByUsername, getUsers } from 'queries';
+
+export interface UsersRequestQuery extends SearchFilter<UserSearchFilterType> {}
+export interface UsersRequestBody {
+  username: string;
+  password: string;
+  id: string;
+  role?: Role;
+}
+
+import * as yup from 'yup';
+const schema = {
+  GET: yup.object().shape({
+    ...getFilterValidation(/All|Username/i),
+  }),
+  POST: yup.object().shape({
+    username: yup.string().max(255).required(),
+    password: yup.string().required(),
+    id: yup.string().uuid(),
+    role: yup
+      .string()
+      .matches(/admin|user|view-only/i)
+      .required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<UsersRequestQuery, UsersRequestBody>,
+  res: NextApiResponse<User[] | User>,
+) => {
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  if (req.method === 'GET') {
+    if (!(await canViewUsers(req.auth))) {
+      return unauthorized(res);
+    }
+
+    const { page, filter, pageSize } = req.query;
+
+    const users = await getUsers({ page, filter, pageSize: pageSize ? +pageSize : null });
+
+    return ok(res, users);
+  }
+
+  if (req.method === 'POST') {
+    if (!(await canCreateUser(req.auth))) {
+      return unauthorized(res);
+    }
+
+    const { username, password, role, id } = req.body;
+
+    const existingUser = await getUserByUsername(username, { showDeleted: true });
+
+    if (existingUser) {
+      return badRequest(res, 'User already exists');
+    }
+
+    const created = await createUser({
+      id: id || uuid(),
+      username,
+      password: hashPassword(password),
+      role: role ?? ROLES.user,
+    });
+
+    return ok(res, created);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/active.ts
+++ b/src/pages/api/websites/[id]/active.ts
@@ -0,0 +1,42 @@
+import { WebsiteActive, NextApiRequestQueryBody } from 'lib/types';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getActiveVisitors } from 'queries';
+import * as yup from 'yup';
+
+export interface WebsiteActiveRequestQuery {
+  id: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteActiveRequestQuery>,
+  res: NextApiResponse<WebsiteActive>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const result = await getActiveVisitors(websiteId);
+
+    return ok(res, result);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/daterange.ts
+++ b/src/pages/api/websites/[id]/daterange.ts
@@ -0,0 +1,42 @@
+import { WebsiteActive, NextApiRequestQueryBody } from 'lib/types';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getWebsiteDateRange } from 'queries';
+import * as yup from 'yup';
+
+export interface WebsiteDateRangeRequestQuery {
+  id: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteDateRangeRequestQuery>,
+  res: NextApiResponse<WebsiteActive>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const result = await getWebsiteDateRange(websiteId);
+
+    return ok(res, result);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/events.ts
+++ b/src/pages/api/websites/[id]/events.ts
@@ -0,0 +1,68 @@
+import { WebsiteMetric, NextApiRequestQueryBody } from 'lib/types';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import moment from 'moment-timezone';
+import { NextApiResponse } from 'next';
+import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getEventMetrics } from 'queries';
+import { parseDateRangeQuery } from 'lib/query';
+
+const unitTypes = ['year', 'month', 'hour', 'day'];
+
+export interface WebsiteEventsRequestQuery {
+  id: string;
+  startAt: string;
+  endAt: string;
+  unit: string;
+  timezone: string;
+  url: string;
+}
+
+import * as yup from 'yup';
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+    startAt: yup.number().integer().required(),
+    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    unit: yup.string().required(),
+    timezone: yup.string().required(),
+    url: yup.string(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteEventsRequestQuery>,
+  res: NextApiResponse<WebsiteMetric>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId, timezone, url } = req.query;
+  const { startDate, endDate, unit } = await parseDateRangeQuery(req);
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    if (!moment.tz.zone(timezone) || !unitTypes.includes(unit)) {
+      return badRequest(res);
+    }
+
+    const events = await getEventMetrics(websiteId, {
+      startDate,
+      endDate,
+      timezone,
+      unit,
+      url,
+    });
+
+    return ok(res, events);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/index.ts
+++ b/src/pages/api/websites/[id]/index.ts
@@ -0,0 +1,83 @@
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, serverError, unauthorized } from 'next-basics';
+import { Website, NextApiRequestQueryBody } from 'lib/types';
+import { canViewWebsite, canUpdateWebsite, canDeleteWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { deleteWebsite, getWebsiteById, updateWebsite } from 'queries';
+import { SHARE_ID_REGEX } from 'lib/constants';
+
+export interface WebsiteRequestQuery {
+  id: string;
+}
+
+export interface WebsiteRequestBody {
+  name: string;
+  domain: string;
+  shareId: string;
+}
+
+import * as yup from 'yup';
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+export default async (
+  req: NextApiRequestQueryBody<WebsiteRequestQuery, WebsiteRequestBody>,
+  res: NextApiResponse<Website>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const website = await getWebsiteById(websiteId);
+
+    return ok(res, website);
+  }
+
+  if (req.method === 'POST') {
+    if (!(await canUpdateWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const { name, domain, shareId } = req.body;
+
+    let website;
+
+    if (shareId && !shareId.match(SHARE_ID_REGEX)) {
+      return serverError(res, 'Invalid share ID.');
+    }
+
+    try {
+      website = await updateWebsite(websiteId, { name, domain, shareId });
+    } catch (e: any) {
+      if (e.message.includes('Unique constraint') && e.message.includes('share_id')) {
+        return serverError(res, 'That share ID is already taken.');
+      }
+    }
+
+    return ok(res, website);
+  }
+
+  if (req.method === 'DELETE') {
+    if (!(await canDeleteWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    await deleteWebsite(websiteId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/metrics.ts
+++ b/src/pages/api/websites/[id]/metrics.ts
@@ -0,0 +1,123 @@
+import { NextApiResponse } from 'next';
+import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { WebsiteMetric, NextApiRequestQueryBody } from 'lib/types';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { SESSION_COLUMNS, EVENT_COLUMNS, FILTER_COLUMNS } from 'lib/constants';
+import { getPageviewMetrics, getSessionMetrics } from 'queries';
+import { parseDateRangeQuery } from 'lib/query';
+import * as yup from 'yup';
+
+export interface WebsiteMetricsRequestQuery {
+  id: string;
+  type: string;
+  startAt: number;
+  endAt: number;
+  url: string;
+  referrer: string;
+  title: string;
+  query: string;
+  event: string;
+  os: string;
+  browser: string;
+  device: string;
+  country: string;
+  region: string;
+  city: string;
+  language: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteMetricsRequestQuery>,
+  res: NextApiResponse<WebsiteMetric[]>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    id: websiteId,
+    type,
+    url,
+    referrer,
+    title,
+    query,
+    event,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+    language,
+  } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const { startDate, endDate } = await parseDateRangeQuery(req);
+
+    const filters = {
+      startDate,
+      endDate,
+      url,
+      referrer,
+      title,
+      query,
+      event,
+      os,
+      browser,
+      device,
+      country,
+      region,
+      city,
+      language,
+    };
+
+    filters[type] = undefined;
+
+    const column = FILTER_COLUMNS[type] || type;
+
+    if (SESSION_COLUMNS.includes(type)) {
+      const data = await getSessionMetrics(websiteId, column, filters);
+
+      if (type === 'language') {
+        const combined = {};
+
+        for (const { x, y } of data) {
+          const key = String(x).toLowerCase().split('-')[0];
+
+          if (combined[key] === undefined) {
+            combined[key] = { x: key, y };
+          } else {
+            combined[key].y += y;
+          }
+        }
+
+        return ok(res, Object.values(combined));
+      }
+
+      return ok(res, data);
+    }
+
+    if (EVENT_COLUMNS.includes(type)) {
+      const data = await getPageviewMetrics(websiteId, column, filters);
+
+      return ok(res, data);
+    }
+
+    return badRequest(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/pageviews.ts
+++ b/src/pages/api/websites/[id]/pageviews.ts
@@ -0,0 +1,94 @@
+import moment from 'moment-timezone';
+import { NextApiResponse } from 'next';
+import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { NextApiRequestQueryBody, WebsitePageviews } from 'lib/types';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { getPageviewStats, getSessionStats } from 'queries';
+import { parseDateRangeQuery } from 'lib/query';
+
+export interface WebsitePageviewRequestQuery {
+  id: string;
+  startAt: number;
+  endAt: number;
+  unit: string;
+  timezone: string;
+  url?: string;
+  referrer?: string;
+  title?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  country?: string;
+  region: string;
+  city?: string;
+}
+
+import * as yup from 'yup';
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsitePageviewRequestQuery>,
+  res: NextApiResponse<WebsitePageviews>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    id: websiteId,
+    timezone,
+    url,
+    referrer,
+    title,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+  } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const { startDate, endDate, unit } = await parseDateRangeQuery(req);
+
+    if (!moment.tz.zone(timezone)) {
+      return badRequest(res);
+    }
+
+    const filters = {
+      startDate,
+      endDate,
+      timezone,
+      unit,
+      url,
+      referrer,
+      title,
+      os,
+      browser,
+      device,
+      country,
+      region,
+      city,
+    };
+
+    const [pageviews, sessions] = await Promise.all([
+      getPageviewStats(websiteId, filters),
+      getSessionStats(websiteId, filters),
+    ]);
+
+    return ok(res, { pageviews, sessions });
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/reports.ts
+++ b/src/pages/api/websites/[id]/reports.ts
@@ -0,0 +1,48 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, ReportSearchFilterType, SearchFilter } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getReportsByWebsiteId } from 'queries';
+
+export interface ReportsRequestQuery extends SearchFilter<ReportSearchFilterType> {
+  id: string;
+}
+
+import * as yup from 'yup';
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<ReportsRequestQuery, any>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(websiteId && (await canViewWebsite(req.auth, websiteId)))) {
+      return unauthorized(res);
+    }
+
+    const { page, filter, pageSize } = req.query;
+
+    const data = await getReportsByWebsiteId(websiteId, {
+      page,
+      filter,
+      pageSize: +pageSize || null,
+    });
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/reset.ts
+++ b/src/pages/api/websites/[id]/reset.ts
@@ -0,0 +1,42 @@
+import { NextApiRequestQueryBody } from 'lib/types';
+import { canUpdateWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { resetWebsite } from 'queries';
+
+export interface WebsiteResetRequestQuery {
+  id: string;
+}
+
+import * as yup from 'yup';
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteResetRequestQuery>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId } = req.query;
+
+  if (req.method === 'POST') {
+    if (!(await canUpdateWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    await resetWebsite(websiteId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/stats.ts
+++ b/src/pages/api/websites/[id]/stats.ts
@@ -0,0 +1,103 @@
+import { subMinutes, differenceInMinutes } from 'date-fns';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, WebsiteStats } from 'lib/types';
+import { parseDateRangeQuery } from 'lib/query';
+import { getWebsiteStats } from 'queries';
+
+export interface WebsiteStatsRequestQuery {
+  id: string;
+  startAt: number;
+  endAt: number;
+  url: string;
+  referrer: string;
+  title: string;
+  query: string;
+  event: string;
+  os: string;
+  browser: string;
+  device: string;
+  country: string;
+  region: string;
+  city: string;
+}
+
+import * as yup from 'yup';
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteStatsRequestQuery>,
+  res: NextApiResponse<WebsiteStats>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    id: websiteId,
+    url,
+    referrer,
+    title,
+    query,
+    event,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+  } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const { startDate, endDate } = await parseDateRangeQuery(req);
+    const diff = differenceInMinutes(endDate, startDate);
+    const prevStartDate = subMinutes(startDate, diff);
+    const prevEndDate = subMinutes(endDate, diff);
+
+    const filters = {
+      url,
+      referrer,
+      title,
+      query,
+      event,
+      os,
+      browser,
+      device,
+      country,
+      region,
+      city,
+    };
+
+    const metrics = await getWebsiteStats(websiteId, { ...filters, startDate, endDate });
+
+    const prevPeriod = await getWebsiteStats(websiteId, {
+      ...filters,
+      startDate: prevStartDate,
+      endDate: prevEndDate,
+    });
+
+    const stats = Object.keys(metrics[0]).reduce((obj, key) => {
+      obj[key] = {
+        value: Number(metrics[0][key]) || 0,
+        change: Number(metrics[0][key]) - Number(prevPeriod[0][key]) || 0,
+      };
+      return obj;
+    }, {});
+
+    return ok(res, stats);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/[id]/values.ts
+++ b/src/pages/api/websites/[id]/values.ts
@@ -0,0 +1,53 @@
+import { NextApiRequestQueryBody } from 'lib/types';
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { EVENT_COLUMNS, FILTER_COLUMNS, SESSION_COLUMNS } from 'lib/constants';
+import { getValues } from 'queries';
+
+export interface WebsiteResetRequestQuery {
+  id: string;
+}
+
+import * as yup from 'yup';
+const schema = {
+  GET: yup.object().shape({
+    id: yup.string().uuid().required(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteResetRequestQuery>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const { id: websiteId, type } = req.query;
+
+  if (req.method === 'GET') {
+    if (!SESSION_COLUMNS.includes(type as string) && !EVENT_COLUMNS.includes(type as string)) {
+      return badRequest(res);
+    }
+
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const values = await getValues(websiteId, FILTER_COLUMNS[type as string]);
+
+    return ok(
+      res,
+      values
+        .map(({ value }) => value)
+        .filter(n => n)
+        .sort(),
+    );
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/api/websites/index.ts
+++ b/src/pages/api/websites/index.ts
@@ -0,0 +1,73 @@
+import { canCreateWebsite } from 'lib/auth';
+import { uuid } from 'lib/crypto';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { NextApiRequestQueryBody, SearchFilter, WebsiteSearchFilterType } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { createWebsite } from 'queries';
+import userWebsites from 'pages/api/users/[id]/websites';
+import * as yup from 'yup';
+import { getFilterValidation } from 'lib/yup';
+
+export interface WebsitesRequestQuery extends SearchFilter<WebsiteSearchFilterType> {}
+
+export interface WebsitesRequestBody {
+  name: string;
+  domain: string;
+  shareId: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    ...getFilterValidation(/All|Name|Domain/i),
+  }),
+  POST: yup.object().shape({
+    name: yup.string().max(100).required(),
+    domain: yup.string().max(500).required(),
+    shareId: yup.string().max(50),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsitesRequestQuery, WebsitesRequestBody>,
+  res: NextApiResponse,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+  req.yup = schema;
+  await useValidate(req, res);
+
+  const {
+    user: { id: userId },
+  } = req.auth;
+
+  if (req.method === 'GET') {
+    req.query.id = userId;
+    req.query.pageSize = 100;
+
+    return userWebsites(req as any, res);
+  }
+
+  if (req.method === 'POST') {
+    const { name, domain, shareId } = req.body;
+
+    if (!(await canCreateWebsite(req.auth))) {
+      return unauthorized(res);
+    }
+
+    const data: any = {
+      id: uuid(),
+      name,
+      domain,
+      shareId,
+    };
+
+    data.userId = userId;
+
+    const website = await createWebsite(data);
+
+    return ok(res, website);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/src/pages/console/[[...id]].js
+++ b/src/pages/console/[[...id]].js
@@ -0,0 +1,22 @@
+import AppLayout from 'components/layout/AppLayout';
+import TestConsole from 'components/pages/console/TestConsole';
+
+export default function ({ disabled }) {
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout>
+      <TestConsole />
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !process.env.ENABLE_TEST_CONSOLE,
+    },
+  };
+}
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import Dashboard from 'components/pages/dashboard/Dashboard';
+import useMessages from 'components/hooks/useMessages';
+
+export default function DashboardPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.dashboard)}>
+      <Dashboard />
+    </AppLayout>
+  );
+}
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+export default function () {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push('/dashboard');
+  }, []);
+
+  return null;
+}
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -0,0 +1,22 @@
+import LoginLayout from 'components/pages/login/LoginLayout';
+import LoginForm from 'components/pages/login/LoginForm';
+
+export default function ({ disabled }) {
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <LoginLayout title="login">
+      <LoginForm />
+    </LoginLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.DISABLE_LOGIN,
+    },
+  };
+}
--- a/src/pages/logout.js
+++ b/src/pages/logout.js
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import useApi from 'components/hooks/useApi';
+import { setUser } from 'store/app';
+import { removeClientAuthToken } from 'lib/client';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { post } = useApi();
+
+  useEffect(() => {
+    async function logout() {
+      await post('/auth/logout');
+    }
+
+    if (!disabled) {
+      removeClientAuthToken();
+
+      logout();
+
+      router.push('/login');
+
+      return () => setUser(null);
+    }
+  }, [disabled, router, post]);
+
+  return null;
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
+    },
+  };
+}
--- a/src/pages/reports/[id].js
+++ b/src/pages/reports/[id].js
@@ -0,0 +1,24 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import ReportDetails from 'components/pages/reports/ReportDetails';
+import { useApi, useMessages } from 'components/hooks';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+  const { id } = router.query;
+  const { get, useQuery } = useApi();
+  const { data: report } = useQuery(['reports', id], () => get(`/reports/${id}`), {
+    enabled: !!id,
+  });
+
+  if (!id || !report) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={formatMessage(labels.websites)}>
+      <ReportDetails reportId={report.id} reportType={report.type} />
+    </AppLayout>
+  );
+}
--- a/src/pages/reports/create.js
+++ b/src/pages/reports/create.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import ReportTemplates from 'components/pages/reports/ReportTemplates';
+import { useMessages } from 'components/hooks';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.reports)}>
+      <ReportTemplates />
+    </AppLayout>
+  );
+}
--- a/src/pages/reports/funnel.js
+++ b/src/pages/reports/funnel.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import FunnelReport from 'components/pages/reports/funnel/FunnelReport';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={`${formatMessage(labels.funnel)} - ${formatMessage(labels.reports)}`}>
+      <FunnelReport />
+    </AppLayout>
+  );
+}
--- a/src/pages/reports/index.js
+++ b/src/pages/reports/index.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import ReportsPage from 'components/pages/reports/ReportsPage';
+import { useMessages } from 'components/hooks';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.reports)}>
+      <ReportsPage />
+    </AppLayout>
+  );
+}
--- a/src/pages/reports/insights.js
+++ b/src/pages/reports/insights.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import InsightsReport from 'components/pages/reports/insights/InsightsReport';
+import { useMessages } from 'components/hooks';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={`${formatMessage(labels.insights)} - ${formatMessage(labels.reports)}`}>
+      <InsightsReport />
+    </AppLayout>
+  );
+}
--- a/src/pages/reports/retention.js
+++ b/src/pages/reports/retention.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import RetentionReport from 'components/pages/reports/retention/RetentionReport';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={`${formatMessage(labels.retention)} - ${formatMessage(labels.reports)}`}>
+      <RetentionReport />
+    </AppLayout>
+  );
+}
--- a/src/pages/settings/profile/index.js
+++ b/src/pages/settings/profile/index.js
@@ -0,0 +1,15 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.profile)}`}>
+      <SettingsLayout>
+        <ProfileSettings />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
--- a/src/pages/settings/teams/[id].js
+++ b/src/pages/settings/teams/[id].js
@@ -0,0 +1,31 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import TeamSettings from 'components/pages/settings/teams/TeamSettings';
+import { useRouter } from 'next/router';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
+
+  if (!id || disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.teams)}`}>
+      <SettingsLayout>
+        <TeamSettings teamId={id} />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}
--- a/src/pages/settings/teams/index.js
+++ b/src/pages/settings/teams/index.js
@@ -0,0 +1,27 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import TeamsList from 'components/pages/settings/teams/TeamsList';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const { formatMessage, labels } = useMessages();
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.teams)}`}>
+      <SettingsLayout>
+        <TeamsList />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}
--- a/src/pages/settings/users/[id].js
+++ b/src/pages/settings/users/[id].js
@@ -0,0 +1,31 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import UserSettings from 'components/pages/settings/users/UserSettings';
+import { useRouter } from 'next/router';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
+
+  if (!id || disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.users)}`}>
+      <SettingsLayout>
+        <UserSettings userId={id} />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}
--- a/src/pages/settings/users/index.js
+++ b/src/pages/settings/users/index.js
@@ -0,0 +1,27 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import UsersList from 'components/pages/settings/users/UsersList';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const { formatMessage, labels } = useMessages();
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.users)}`}>
+      <SettingsLayout>
+        <UsersList />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}
--- a/src/pages/settings/websites/[id].js
+++ b/src/pages/settings/websites/[id].js
@@ -0,0 +1,31 @@
+import AppLayout from 'components/layout/AppLayout';
+import { useRouter } from 'next/router';
+import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const router = useRouter();
+  const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
+
+  if (!id || disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.websites)}`}>
+      <SettingsLayout>
+        <WebsiteSettings websiteId={id} />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}
--- a/src/pages/settings/websites/index.js
+++ b/src/pages/settings/websites/index.js
@@ -0,0 +1,27 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import WebsitesList from 'components/pages/settings/websites/WebsitesList';
+import useMessages from 'components/hooks/useMessages';
+
+export default function ({ disabled }) {
+  const { formatMessage, labels } = useMessages();
+  if (disabled) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.websites)}`}>
+      <SettingsLayout>
+        <WebsitesList />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}
--- a/src/pages/share/[...id].js
+++ b/src/pages/share/[...id].js
@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router';
+import ShareLayout from 'components/layout/ShareLayout';
+import WebsiteDetailsPage from 'components/pages/websites/WebsiteDetailsPage';
+import useShareToken from 'components/hooks/useShareToken';
+
+export default function () {
+  const router = useRouter();
+  const { id } = router.query;
+  const shareId = id?.[0];
+  const shareToken = useShareToken(shareId);
+
+  if (!shareToken) {
+    return null;
+  }
+
+  return (
+    <ShareLayout>
+      <WebsiteDetailsPage websiteId={shareToken.websiteId} />
+    </ShareLayout>
+  );
+}
--- a/src/pages/sso.js
+++ b/src/pages/sso.js
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { Loading } from 'react-basics';
+import { useRouter } from 'next/router';
+import { setClientAuthToken } from 'lib/client';
+
+export default function () {
+  const router = useRouter();
+  const { token, url } = router.query;
+
+  useEffect(() => {
+    if (url && token) {
+      setClientAuthToken(token);
+
+      router.push(url);
+    }
+  }, [router, url, token]);
+
+  return <Loading size="xl" />;
+}
--- a/src/pages/websites/[id]/event-data.js
+++ b/src/pages/websites/[id]/event-data.js
@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import WebsiteEventDataPage from 'components/pages/websites/WebsiteEventDataPage';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+  const { id } = router.query;
+
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={formatMessage(labels.websites)}>
+      <WebsiteEventDataPage websiteId={id} />
+    </AppLayout>
+  );
+}
--- a/src/pages/websites/[id]/index.js
+++ b/src/pages/websites/[id]/index.js
@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import WebsiteDetailsPage from 'components/pages/websites/WebsiteDetailsPage';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+  const { id } = router.query;
+
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <AppLayout title={formatMessage(labels.websites)}>
+      <WebsiteDetailsPage websiteId={id} />
+    </AppLayout>
+  );
+}
--- a/src/pages/websites/[id]/realtime.js
+++ b/src/pages/websites/[id]/realtime.js
@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import RealtimePage from 'components/pages/realtime/RealtimePage';
+
+export default function () {
+  const router = useRouter();
+  const { id: websiteId } = router.query;
+
+  if (!websiteId) {
+    return null;
+  }
+
+  return (
+    <AppLayout>
+      <RealtimePage websiteId={websiteId} />
+    </AppLayout>
+  );
+}
--- a/src/pages/websites/[id]/reports.js
+++ b/src/pages/websites/[id]/reports.js
@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import WebsiteReportsPage from 'components/pages/websites/WebsiteReportsPage';
+
+export default function () {
+  const router = useRouter();
+  const { id: websiteId } = router.query;
+
+  if (!websiteId) {
+    return null;
+  }
+
+  return (
+    <AppLayout>
+      <WebsiteReportsPage websiteId={websiteId} />
+    </AppLayout>
+  );
+}
--- a/src/pages/websites/index.js
+++ b/src/pages/websites/index.js
@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import WebsitesPage from 'components/pages/websites/WebsitesPage';
+import useMessages from 'components/hooks/useMessages';
+
+export default function () {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.websites)}>
+      <WebsitesPage />
+    </AppLayout>
+  );
+}