Initial commit

Created from https://vercel.com/new
2021-12-08 18:25:42 +00:00 · 2021-12-08 18:25:42 +00:00 · 4047a7ec23
commit 4047a7ec23
378 changed files with 29334 additions and 0 deletions
--- a/components/common/Button.js
+++ b/components/common/Button.js
@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import classNames from 'classnames';
+import Icon from './Icon';
+import styles from './Button.module.css';
+
+function Button({
+  type = 'button',
+  icon,
+  size,
+  variant,
+  children,
+  className,
+  tooltip,
+  tooltipId,
+  disabled,
+  iconRight,
+  onClick = () => {},
+  ...props
+}) {
+  return (
+    <button
+      data-tip={tooltip}
+      data-effect="solid"
+      data-for={tooltipId}
+      type={type}
+      className={classNames(styles.button, className, {
+        [styles.large]: size === 'large',
+        [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
+        [styles.action]: variant === 'action',
+        [styles.danger]: variant === 'danger',
+        [styles.light]: variant === 'light',
+        [styles.iconRight]: iconRight,
+      })}
+      disabled={disabled}
+      onClick={!disabled ? onClick : null}
+      {...props}
+    >
+      {icon && <Icon className={styles.icon} icon={icon} size={size} />}
+      {children && <div className={styles.label}>{children}</div>}
+      {tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  icon: PropTypes.node,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
+  variant: PropTypes.oneOf(['action', 'danger', 'light']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  tooltip: PropTypes.node,
+  tooltipId: PropTypes.string,
+  disabled: PropTypes.bool,
+  iconRight: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default Button;
--- a/components/common/Button.module.css
+++ b/components/common/Button.module.css
@ -0,0 +1,102 @@
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-normal);
+  color: var(--gray900);
+  background: var(--gray100);
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.button:hover {
+  background: var(--gray200);
+}
+
+.button:active {
+  color: var(--gray900);
+}
+
+.label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 300px;
+}
+
+.large {
+  font-size: var(--font-size-large);
+}
+
+.small {
+  font-size: var(--font-size-small);
+}
+
+.xsmall {
+  font-size: var(--font-size-xsmall);
+}
+
+.action,
+.action:active {
+  color: var(--gray50);
+  background: var(--gray900);
+}
+
+.action:hover {
+  background: var(--gray800);
+}
+
+.danger,
+.danger:active {
+  color: var(--gray50);
+  background: var(--red500);
+}
+
+.danger:hover {
+  background: var(--red400);
+}
+
+.light,
+.light:active {
+  color: var(--gray900);
+  background: transparent;
+}
+
+.light:hover {
+  background: inherit;
+}
+
+.button .icon + * {
+  margin-left: 10px;
+}
+
+.button.iconRight .icon {
+  order: 1;
+  margin-left: 10px;
+}
+
+.button.iconRight .icon + * {
+  margin: 0;
+}
+
+.button:disabled {
+  cursor: default;
+  color: var(--gray500);
+  background: var(--gray75);
+}
+
+.button:disabled:active {
+  color: var(--gray500);
+}
+
+.button:disabled:hover {
+  background: var(--gray75);
+}
+
+.button.light:disabled {
+  background: var(--gray50);
+}
--- a/components/common/ButtonGroup.js
+++ b/components/common/ButtonGroup.js
@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from './Button';
+import styles from './ButtonGroup.module.css';
+
+function ButtonGroup({ items = [], selectedItem, className, size, icon, onClick = () => {} }) {
+  return (
+    <div className={classNames(styles.group, className)}>
+      {items.map(item => {
+        const { label, value } = item;
+        return (
+          <Button
+            key={value}
+            className={classNames(styles.button, { [styles.selected]: selectedItem === value })}
+            size={size}
+            icon={icon}
+            onClick={() => onClick(value)}
+          >
+            {label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
+ButtonGroup.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any.isRequired,
+    }),
+  ),
+  selectedItem: PropTypes.any,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
+  icon: PropTypes.node,
+  onClick: PropTypes.func,
+};
+
+export default ButtonGroup;
--- a/components/common/ButtonGroup.module.css
+++ b/components/common/ButtonGroup.module.css
@ -0,0 +1,31 @@
+.group {
+  display: inline-flex;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--gray500);
+}
+
+.group .button {
+  border-radius: 0;
+  color: var(--gray800);
+  background: var(--gray50);
+  border-left: 1px solid var(--gray500);
+  padding: 4px 8px;
+}
+
+.group .button:first-child {
+  border: 0;
+}
+
+.group .button:hover {
+  background: var(--gray100);
+}
+
+.group .button + .button {
+  margin: 0;
+}
+
+.group .button.selected {
+  color: var(--gray900);
+  font-weight: 600;
+}
--- a/components/common/Calendar.js
+++ b/components/common/Calendar.js
@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  startOfWeek,
+  startOfMonth,
+  startOfYear,
+  endOfMonth,
+  addDays,
+  subDays,
+  addYears,
+  subYears,
+  addMonths,
+  setMonth,
+  setYear,
+  isSameDay,
+  isBefore,
+  isAfter,
+} from 'date-fns';
+import Button from './Button';
+import useLocale from 'hooks/useLocale';
+import { dateFormat } from 'lib/date';
+import { chunk } from 'lib/array';
+import { getDateLocale } from 'lib/lang';
+import Chevron from 'assets/chevron-down.svg';
+import Cross from 'assets/times.svg';
+import styles from './Calendar.module.css';
+import Icon from './Icon';
+
+export default function Calendar({ date, minDate, maxDate, onChange }) {
+  const { locale } = useLocale();
+  const [selectMonth, setSelectMonth] = useState(false);
+  const [selectYear, setSelectYear] = useState(false);
+
+  const month = dateFormat(date, 'MMMM', locale);
+  const year = date.getFullYear();
+
+  function toggleMonthSelect() {
+    setSelectYear(false);
+    setSelectMonth(state => !state);
+  }
+
+  function toggleYearSelect() {
+    setSelectMonth(false);
+    setSelectYear(state => !state);
+  }
+
+  function handleChange(value) {
+    setSelectMonth(false);
+    setSelectYear(false);
+    if (value) {
+      onChange(value);
+    }
+  }
+
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.header}>
+        <div>{date.getDate()}</div>
+        <div
+          className={classNames(styles.selector, { [styles.open]: selectMonth })}
+          onClick={toggleMonthSelect}
+        >
+          {month}
+          <Icon className={styles.icon} icon={selectMonth ? <Cross /> : <Chevron />} size="small" />
+        </div>
+        <div
+          className={classNames(styles.selector, { [styles.open]: selectYear })}
+          onClick={toggleYearSelect}
+        >
+          {year}
+          <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
+        </div>
+      </div>
+      <div className={styles.body}>
+        {!selectMonth && !selectYear && (
+          <DaySelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            locale={locale}
+            onSelect={handleChange}
+          />
+        )}
+        {selectMonth && (
+          <MonthSelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            locale={locale}
+            onSelect={handleChange}
+            onClose={toggleMonthSelect}
+          />
+        )}
+        {selectYear && (
+          <YearSelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            onSelect={handleChange}
+            onClose={toggleYearSelect}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
+  const startWeek = startOfWeek(date, { locale: getDateLocale(locale) });
+  const startMonth = startOfMonth(date, { locale: getDateLocale(locale) });
+  const startDay = subDays(startMonth, startMonth.getDay());
+  const month = date.getMonth();
+  const year = date.getFullYear();
+
+  const daysOfWeek = [];
+  for (let i = 0; i < 7; i++) {
+    daysOfWeek.push(addDays(startWeek, i));
+  }
+
+  const days = [];
+  for (let i = 0; i < 35; i++) {
+    days.push(addDays(startDay, i));
+  }
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {daysOfWeek.map((day, i) => (
+            <th key={i} className={locale}>
+              {dateFormat(day, 'EEE', locale)}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {chunk(days, 7).map((week, i) => (
+          <tr key={i}>
+            {week.map((day, j) => {
+              const disabled = isBefore(day, minDate) || isAfter(day, maxDate);
+              return (
+                <td
+                  key={j}
+                  className={classNames({
+                    [styles.selected]: isSameDay(date, day),
+                    [styles.faded]: day.getMonth() !== month || day.getFullYear() !== year,
+                    [styles.disabled]: disabled,
+                  })}
+                  onClick={!disabled ? () => onSelect(day) : null}
+                >
+                  {day.getDate()}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const MonthSelector = ({ date, minDate, maxDate, locale, onSelect }) => {
+  const start = startOfYear(date);
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    months.push(addMonths(start, i));
+  }
+
+  function handleSelect(value) {
+    onSelect(setMonth(date, value));
+  }
+
+  return (
+    <table>
+      <tbody>
+        {chunk(months, 3).map((row, i) => (
+          <tr key={i}>
+            {row.map((month, j) => {
+              const disabled =
+                isBefore(endOfMonth(month), minDate) || isAfter(startOfMonth(month), maxDate);
+              return (
+                <td
+                  key={j}
+                  className={classNames(locale, {
+                    [styles.selected]: month.getMonth() === date.getMonth(),
+                    [styles.disabled]: disabled,
+                  })}
+                  onClick={!disabled ? () => handleSelect(month.getMonth()) : null}
+                >
+                  {dateFormat(month, 'MMMM', locale)}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
+  const [currentDate, setCurrentDate] = useState(date);
+  const year = date.getFullYear();
+  const currentYear = currentDate.getFullYear();
+  const minYear = minDate.getFullYear();
+  const maxYear = maxDate.getFullYear();
+  const years = [];
+  for (let i = 0; i < 15; i++) {
+    years.push(currentYear - 7 + i);
+  }
+
+  function handleSelect(value) {
+    onSelect(setYear(date, value));
+  }
+
+  function handlePrevClick() {
+    setCurrentDate(state => subYears(state, 15));
+  }
+
+  function handleNextClick() {
+    setCurrentDate(state => addYears(state, 15));
+  }
+
+  return (
+    <div className={styles.pager}>
+      <div className={styles.left}>
+        <Button
+          icon={<Chevron />}
+          size="small"
+          onClick={handlePrevClick}
+          disabled={years[0] <= minYear}
+          variant="light"
+        />
+      </div>
+      <div className={styles.middle}>
+        <table>
+          <tbody>
+            {chunk(years, 5).map((row, i) => (
+              <tr key={i}>
+                {row.map((n, j) => (
+                  <td
+                    key={j}
+                    className={classNames({
+                      [styles.selected]: n === year,
+                      [styles.disabled]: n < minYear || n > maxYear,
+                    })}
+                    onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
+                  >
+                    {n}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className={styles.right}>
+        <Button
+          icon={<Chevron />}
+          size="small"
+          onClick={handleNextClick}
+          disabled={years[years.length - 1] > maxYear}
+          variant="light"
+        />
+      </div>
+    </div>
+  );
+};
--- a/components/common/Calendar.module.css
+++ b/components/common/Calendar.module.css
@ -0,0 +1,111 @@
+.calendar {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size-small);
+  flex: 1;
+  min-height: 306px;
+}
+
+.calendar table {
+  width: 100%;
+  border-spacing: 5px;
+}
+
+.calendar td {
+  color: var(--gray800);
+  cursor: pointer;
+  text-align: center;
+  vertical-align: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 5px;
+  border: 1px solid transparent;
+}
+
+.calendar td:hover {
+  border: 1px solid var(--gray300);
+  background: var(--gray75);
+}
+
+.calendar td.faded {
+  color: var(--gray500);
+}
+
+.calendar td.selected {
+  font-weight: 600;
+  border: 1px solid var(--gray600);
+}
+
+.calendar td.selected:hover {
+  background: transparent;
+}
+
+.calendar td.disabled {
+  color: var(--gray400);
+  background: var(--gray75);
+}
+
+.calendar td.disabled:hover {
+  cursor: default;
+  background: var(--gray75);
+  border-color: transparent;
+}
+
+.calendar td.faded.disabled {
+  background: var(--gray100);
+}
+
+.header {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  font-weight: 700;
+  line-height: 40px;
+  font-size: var(--font-size-normal);
+}
+
+.body {
+  display: flex;
+}
+
+.selector {
+  cursor: pointer;
+}
+
+.pager {
+  display: flex;
+  flex: 1;
+}
+
+.pager button {
+  align-self: center;
+}
+
+.middle {
+  flex: 1;
+}
+
+.left,
+.right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.left svg {
+  transform: rotate(90deg);
+}
+
+.right svg {
+  transform: rotate(-90deg);
+}
+
+.icon {
+  margin-left: 10px;
+}
+
+@media only screen and (max-width: 992px) {
+  .calendar table {
+    max-width: calc(100vw - 30px);
+  }
+}
--- a/components/common/Checkbox.js
+++ b/components/common/Checkbox.js
@ -0,0 +1,39 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'components/common/Icon';
+import Check from 'assets/check.svg';
+import styles from './Checkbox.module.css';
+
+function Checkbox({ name, value, label, onChange }) {
+  const ref = useRef();
+
+  const onClick = () => ref.current.click();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.checkbox} onClick={onClick}>
+        {value && <Icon icon={<Check />} size="small" />}
+      </div>
+      <label className={styles.label} htmlFor={name} onClick={onClick}>
+        {label}
+      </label>
+      <input
+        ref={ref}
+        className={styles.input}
+        type="checkbox"
+        name={name}
+        defaultChecked={value}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
+
+Checkbox.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.any,
+  label: PropTypes.node,
+  onChange: PropTypes.func,
+};
+
+export default Checkbox;
--- a/components/common/Checkbox.module.css
+++ b/components/common/Checkbox.module.css
@ -0,0 +1,30 @@
+.container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+}
+
+.label {
+  margin-left: 10px;
+  user-select: none; /* disable text selection when clicking to toggle the checkbox */
+}
+
+.input {
+  position: absolute;
+  visibility: hidden;
+  height: 0;
+  width: 0;
+  bottom: 100%;
+  right: 100%;
+}
--- a/components/common/CopyButton.js
+++ b/components/common/CopyButton.js
@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from './Button';
+import { FormattedMessage } from 'react-intl';
+
+const defaultText = (
+  <FormattedMessage id="label.copy-to-clipboard" defaultMessage="Copy to clipboard" />
+);
+
+function CopyButton({ element, ...props }) {
+  const [text, setText] = useState(defaultText);
+
+  function handleClick() {
+    if (element?.current) {
+      element.current.select();
+      document.execCommand('copy');
+      setText(<FormattedMessage id="message.copied" defaultMessage="Copied!" />);
+      window.getSelection().removeAllRanges();
+    }
+  }
+
+  return (
+    <Button {...props} onClick={handleClick}>
+      {text}
+    </Button>
+  );
+}
+
+CopyButton.propTypes = {
+  element: PropTypes.shape({
+    current: PropTypes.shape({
+      select: PropTypes.func.isRequired,
+    }),
+  }),
+};
+
+export default CopyButton;
--- a/components/common/DateFilter.js
+++ b/components/common/DateFilter.js
@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { endOfYear, isSameDay } from 'date-fns';
+import Modal from './Modal';
+import DropDown from './DropDown';
+import DatePickerForm from 'components/forms/DatePickerForm';
+import useLocale from 'hooks/useLocale';
+import { getDateRange, dateFormat } from 'lib/date';
+import Calendar from 'assets/calendar-alt.svg';
+import Icon from './Icon';
+
+const filterOptions = [
+  { label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
+  {
+    label: (
+      <FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} />
+    ),
+    value: '24hour',
+  },
+  {
+    label: <FormattedMessage id="label.this-week" defaultMessage="This week" />,
+    value: '1week',
+    divider: true,
+  },
+  {
+    label: (
+      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} />
+    ),
+    value: '7day',
+  },
+  {
+    label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
+    value: '1month',
+    divider: true,
+  },
+  {
+    label: (
+      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} />
+    ),
+    value: '30day',
+  },
+  {
+    label: (
+      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 90 }} />
+    ),
+    value: '90day',
+  },
+  { label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
+  {
+    label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
+    value: 'custom',
+    divider: true,
+  },
+];
+
+function DateFilter({ value, startDate, endDate, onChange, className }) {
+  const { locale } = useLocale();
+  const [showPicker, setShowPicker] = useState(false);
+  const displayValue =
+    value === 'custom' ? (
+      <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
+    ) : (
+      value
+    );
+
+  function handleChange(value) {
+    if (value === 'custom') {
+      setShowPicker(true);
+      return;
+    }
+    onChange(getDateRange(value, locale));
+  }
+
+  function handlePickerChange(value) {
+    setShowPicker(false);
+    onChange(value);
+  }
+
+  return (
+    <>
+      <DropDown
+        className={className}
+        value={displayValue}
+        options={filterOptions}
+        onChange={handleChange}
+      />
+      {showPicker && (
+        <Modal>
+          <DatePickerForm
+            startDate={startDate}
+            endDate={endDate}
+            minDate={new Date(2000, 0, 1)}
+            maxDate={endOfYear(new Date())}
+            onChange={handlePickerChange}
+            onClose={() => setShowPicker(false)}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
+
+const CustomRange = ({ startDate, endDate, onClick }) => {
+  const { locale } = useLocale();
+
+  function handleClick(e) {
+    e.stopPropagation();
+
+    onClick();
+  }
+
+  return (
+    <>
+      <Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
+      {dateFormat(startDate, 'd LLL y', locale)}
+      {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
+    </>
+  );
+};
+
+DateFilter.propTypes = {
+  value: PropTypes.string,
+  startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export default DateFilter;
--- a/components/common/Dot.js
+++ b/components/common/Dot.js
@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './Dot.module.css';
+
+function Dot({ color, size, className }) {
+  return (
+    <div className={styles.wrapper}>
+      <div
+        style={{ background: color }}
+        className={classNames(styles.dot, className, {
+          [styles.small]: size === 'small',
+          [styles.large]: size === 'large',
+        })}
+      />
+    </div>
+  );
+}
+
+Dot.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'large']),
+  className: PropTypes.string,
+};
+
+export default Dot;
--- a/components/common/Dot.module.css
+++ b/components/common/Dot.module.css
@ -0,0 +1,22 @@
+.wrapper {
+  background: var(--gray50);
+  margin-right: 10px;
+  border-radius: 100%;
+}
+
+.dot {
+  background: var(--green400);
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+}
+
+.dot.small {
+  width: 8px;
+  height: 8px;
+}
+
+.dot.large {
+  width: 16px;
+  height: 16px;
+}
--- a/components/common/DropDown.js
+++ b/components/common/DropDown.js
@ -0,0 +1,64 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Menu from './Menu';
+import useDocumentClick from 'hooks/useDocumentClick';
+import Chevron from 'assets/chevron-down.svg';
+import styles from './Dropdown.module.css';
+import Icon from './Icon';
+
+function DropDown({ value, className, menuClassName, options = [], onChange = () => {} }) {
+  const [showMenu, setShowMenu] = useState(false);
+  const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
+
+  function handleShowMenu() {
+    setShowMenu(state => !state);
+  }
+
+  function handleSelect(selected, e) {
+    e.stopPropagation();
+    setShowMenu(false);
+
+    onChange(selected);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current?.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
+      <div className={styles.value}>
+        <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
+        <Icon icon={<Chevron />} className={styles.icon} size="small" />
+      </div>
+      {showMenu && (
+        <Menu
+          className={menuClassName}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float="bottom"
+        />
+      )}
+    </div>
+  );
+}
+
+DropDown.propTypes = {
+  value: PropTypes.any,
+  className: PropTypes.string,
+  menuClassName: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.any.isRequired,
+      label: PropTypes.node,
+    }),
+  ),
+  onChange: PropTypes.func,
+};
+
+export default DropDown;
--- a/components/common/Dropdown.module.css
+++ b/components/common/Dropdown.module.css
@ -0,0 +1,28 @@
+.dropdown {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.value {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-small);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  padding: 4px 16px;
+  min-width: 160px;
+}
+
+.text {
+  flex: 1;
+}
+
+.icon {
+  padding-left: 20px;
+}
--- a/components/common/EmptyPlaceholder.js
+++ b/components/common/EmptyPlaceholder.js
@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'components/common/Icon';
+import Logo from 'assets/logo.svg';
+import styles from './EmptyPlaceholder.module.css';
+
+function EmptyPlaceholder({ msg, children }) {
+  return (
+    <div className={styles.placeholder}>
+      <Icon className={styles.icon} icon={<Logo />} size="xlarge" />
+      <h2 className={styles.msg}>{msg}</h2>
+      {children}
+    </div>
+  );
+}
+
+EmptyPlaceholder.propTypes = {
+  msg: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default EmptyPlaceholder;
--- a/components/common/EmptyPlaceholder.module.css
+++ b/components/common/EmptyPlaceholder.module.css
@ -0,0 +1,15 @@
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 600px;
+}
+
+.icon {
+  margin-bottom: 30px;
+}
+
+.msg {
+  margin-bottom: 15px;
+}
--- a/components/common/ErrorMessage.js
+++ b/components/common/ErrorMessage.js
@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Icon from './Icon';
+import Exclamation from 'assets/exclamation-triangle.svg';
+import styles from './ErrorMessage.module.css';
+
+export default function ErrorMessage() {
+  return (
+    <div className={styles.error}>
+      <Icon icon={<Exclamation />} className={styles.icon} size="large" />
+      <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
+    </div>
+  );
+}
--- a/components/common/ErrorMessage.module.css
+++ b/components/common/ErrorMessage.module.css
@ -0,0 +1,15 @@
+.error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: auto;
+  display: flex;
+  z-index: 1;
+  background-color: var(--gray50);
+  padding: 10px;
+}
+
+.icon {
+  margin-right: 10px;
+}
--- a/components/common/Favicon.js
+++ b/components/common/Favicon.js
@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Favicon.module.css';
+
+function getHostName(url) {
+  const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
+  return match && match.length > 1 ? match[1] : null;
+}
+
+function Favicon({ domain, ...props }) {
+  const hostName = domain ? getHostName(domain) : null;
+
+  return hostName ? (
+    <img
+      className={styles.favicon}
+      src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
+      height="16"
+      alt=""
+      {...props}
+    />
+  ) : null;
+}
+
+Favicon.propTypes = {
+  domain: PropTypes.string,
+};
+
+export default Favicon;
--- a/components/common/Favicon.module.css
+++ b/components/common/Favicon.module.css
@ -0,0 +1,3 @@
+.favicon {
+  margin-right: 8px;
+}
--- a/components/common/FilterButtons.js
+++ b/components/common/FilterButtons.js
@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ButtonLayout from 'components/layout/ButtonLayout';
+import ButtonGroup from './ButtonGroup';
+
+function FilterButtons({ buttons, selected, onClick }) {
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
+}
+
+FilterButtons.propTypes = {
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any.isRequired,
+    }),
+  ),
+  selected: PropTypes.any,
+  onClick: PropTypes.func,
+};
+
+export default FilterButtons;
--- a/components/common/Icon.js
+++ b/components/common/Icon.js
@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './Icon.module.css';
+
+function Icon({ icon, className, size = 'medium', ...props }) {
+  return (
+    <div
+      className={classNames(styles.icon, className, {
+        [styles.xlarge]: size === 'xlarge',
+        [styles.large]: size === 'large',
+        [styles.medium]: size === 'medium',
+        [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
+      })}
+      {...props}
+    >
+      {icon}
+    </div>
+  );
+}
+
+Icon.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small', 'xsmall']),
+};
+
+export default Icon;
--- a/components/common/Icon.module.css
+++ b/components/common/Icon.module.css
@ -0,0 +1,35 @@
+.icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.icon svg {
+  fill: currentColor;
+}
+
+.xlarge > svg {
+  width: 48px;
+  height: 48px;
+}
+
+.large > svg {
+  width: 24px;
+  height: 24px;
+}
+
+.medium > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.small > svg {
+  width: 12px;
+  height: 12px;
+}
+
+.xsmall > svg {
+  width: 10px;
+  height: 10px;
+}
--- a/components/common/Link.js
+++ b/components/common/Link.js
@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import NextLink from 'next/link';
+import Icon from './Icon';
+import styles from './Link.module.css';
+
+function Link({ className, icon, children, size, iconRight, ...props }) {
+  return (
+    <NextLink {...props}>
+      <a
+        className={classNames(styles.link, className, {
+          [styles.large]: size === 'large',
+          [styles.small]: size === 'small',
+          [styles.xsmall]: size === 'xsmall',
+          [styles.iconRight]: iconRight,
+        })}
+      >
+        {icon && <Icon className={styles.icon} icon={icon} size={size} />}
+        {children}
+      </a>
+    </NextLink>
+  );
+}
+
+Link.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  children: PropTypes.node,
+  size: PropTypes.oneOf(['large', 'small', 'xsmall']),
+  iconRight: PropTypes.bool,
+};
+
+export default Link;
--- a/components/common/Link.module.css
+++ b/components/common/Link.module.css
@ -0,0 +1,50 @@
+a.link,
+a.link:active,
+a.link:visited {
+  position: relative;
+  color: var(--gray900);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+a.link:before {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background: var(--primary400);
+  opacity: 0.5;
+  transition: width 100ms;
+}
+
+a.link:hover:before {
+  width: 100%;
+  transition: width 100ms;
+}
+
+a.link.large {
+  font-size: var(--font-size-large);
+}
+
+a.link.small {
+  font-size: var(--font-size-small);
+}
+
+a.link.xsmall {
+  font-size: var(--font-size-xsmall);
+}
+
+a.link .icon + * {
+  margin-left: 10px;
+}
+
+a.link.iconRight .icon {
+  order: 1;
+  margin-left: 10px;
+}
+
+a.link.iconRight .icon + * {
+  margin: 0;
+}
--- a/components/common/Loading.js
+++ b/components/common/Loading.js
@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './Loading.module.css';
+
+function Loading({ className }) {
+  return (
+    <div className={classNames(styles.loading, className)}>
+      <div />
+      <div />
+      <div />
+    </div>
+  );
+}
+
+Loading.propTypes = {
+  className: PropTypes.string,
+};
+
+export default Loading;
--- a/components/common/Loading.module.css
+++ b/components/common/Loading.module.css
@ -0,0 +1,43 @@
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+}
+
+.loading div {
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  background: var(--gray400);
+  animation: blink 1.4s infinite;
+  animation-fill-mode: both;
+}
+
+.loading div + div {
+  margin-left: 10px;
+}
+
+.loading div:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loading div:nth-child(3) {
+  animation-delay: 0.4s;
+}
--- a/components/common/Menu.js
+++ b/components/common/Menu.js
@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './Menu.module.css';
+
+function Menu({
+  options = [],
+  selectedOption,
+  className,
+  float,
+  align = 'left',
+  optionClassName,
+  selectedClassName,
+  onSelect = () => {},
+}) {
+  return (
+    <div
+      className={classNames(styles.menu, className, {
+        [styles.float]: float,
+        [styles.top]: float === 'top',
+        [styles.bottom]: float === 'bottom',
+        [styles.left]: align === 'left',
+        [styles.right]: align === 'right',
+      })}
+    >
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render, divider } = option;
+
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, optionClassName, customClassName, {
+                [selectedClassName]: selectedOption === option,
+                [styles.selected]: selectedOption === option,
+                [styles.divider]: divider,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+Menu.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any,
+      className: PropTypes.string,
+      render: PropTypes.func,
+      divider: PropTypes.bool,
+    }),
+  ),
+  selectedOption: PropTypes.any,
+  className: PropTypes.string,
+  float: PropTypes.oneOf(['top', 'bottom']),
+  align: PropTypes.oneOf(['left', 'right']),
+  optionClassName: PropTypes.string,
+  selectedClassName: PropTypes.string,
+  onSelect: PropTypes.func,
+};
+
+export default Menu;
--- a/components/common/Menu.module.css
+++ b/components/common/Menu.module.css
@ -0,0 +1,51 @@
+.menu {
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.option {
+  font-size: var(--font-size-small);
+  font-weight: normal;
+  background: var(--gray50);
+  padding: 4px 16px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.option:hover {
+  background: var(--gray100);
+}
+
+.float {
+  position: absolute;
+  min-width: 100px;
+}
+
+.top {
+  bottom: 100%;
+  margin-bottom: 5px;
+}
+
+.bottom {
+  top: 100%;
+  margin-top: 5px;
+}
+
+.left {
+  left: 0;
+}
+
+.right {
+  right: 0;
+}
+
+.divider {
+  border-top: 1px solid var(--gray300);
+}
+
+.selected {
+  font-weight: 600;
+}
--- a/components/common/MenuButton.js
+++ b/components/common/MenuButton.js
@ -0,0 +1,86 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Menu from 'components/common/Menu';
+import Button from 'components/common/Button';
+import useDocumentClick from 'hooks/useDocumentClick';
+import styles from './MenuButton.module.css';
+
+function MenuButton({
+  icon,
+  value,
+  options,
+  buttonClassName,
+  menuClassName,
+  menuPosition = 'bottom',
+  menuAlign = 'right',
+  onSelect,
+  renderValue,
+  hideLabel,
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
+
+  function handleSelect(value) {
+    onSelect(value);
+    setShowMenu(false);
+  }
+
+  function toggleMenu() {
+    setShowMenu(state => !state);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current?.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <Button
+        icon={icon}
+        className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
+        onClick={toggleMenu}
+        variant="light"
+      >
+        {!hideLabel && (
+          <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+        )}
+      </Button>
+      {showMenu && (
+        <Menu
+          className={menuClassName}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
+    </div>
+  );
+}
+
+MenuButton.propTypes = {
+  icon: PropTypes.node,
+  value: PropTypes.any,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any,
+      className: PropTypes.string,
+      render: PropTypes.func,
+      divider: PropTypes.bool,
+    }),
+  ),
+  buttonClassName: PropTypes.string,
+  menuClassName: PropTypes.string,
+  menuPosition: PropTypes.oneOf(['top', 'bottom']),
+  menuAlign: PropTypes.oneOf(['left', 'right']),
+  onSelect: PropTypes.func,
+  renderValue: PropTypes.func,
+};
+
+export default MenuButton;
--- a/components/common/MenuButton.module.css
+++ b/components/common/MenuButton.module.css
@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}
+
+.button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.text {
+  font-size: var(--font-size-small);
+}
+
+.open,
+.open:hover {
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
+}
--- a/components/common/Modal.js
+++ b/components/common/Modal.js
@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { useSpring, animated } from 'react-spring';
+import styles from './Modal.module.css';
+
+function Modal({ title, children }) {
+  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
+
+  return ReactDOM.createPortal(
+    <animated.div className={styles.modal} style={props}>
+      <div className={styles.content}>
+        {title && <div className={styles.header}>{title}</div>}
+        <div className={styles.body}>{children}</div>
+      </div>
+    </animated.div>,
+    document.getElementById('__modals'),
+  );
+}
+
+Modal.propTypes = {
+  title: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default Modal;
--- a/components/common/Modal.module.css
+++ b/components/common/Modal.module.css
@ -0,0 +1,46 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 2;
+}
+
+.modal:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  background: #000;
+  opacity: 0.5;
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--gray50);
+  min-width: 400px;
+  min-height: 100px;
+  max-width: 100vw;
+  z-index: 1;
+  border: 1px solid var(--gray300);
+  padding: 30px;
+  border-radius: 4px;
+}
+
+.header {
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+}
--- a/components/common/NavMenu.js
+++ b/components/common/NavMenu.js
@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import styles from './NavMenu.module.css';
+
+function NavMenu({ options = [], className, onSelect = () => {} }) {
+  const router = useRouter();
+
+  return (
+    <div className={classNames(styles.menu, className)}>
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render } = option;
+
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, customClassName, {
+                [styles.selected]: router.asPath === value,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+NavMenu.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any,
+      className: PropTypes.string,
+      render: PropTypes.func,
+    }),
+  ),
+  className: PropTypes.string,
+  onSelect: PropTypes.func,
+};
+export default NavMenu;
--- a/components/common/NavMenu.module.css
+++ b/components/common/NavMenu.module.css
@ -0,0 +1,22 @@
+.menu {
+  color: var(--gray800);
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.option {
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.option:hover {
+  background: var(--gray75);
+}
+
+.selected {
+  color: var(--gray900);
+  font-weight: 600;
+}
--- a/components/common/NoData.js
+++ b/components/common/NoData.js
@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import styles from './NoData.module.css';
+
+function NoData({ className }) {
+  return (
+    <div className={classNames(styles.container, className)}>
+      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+    </div>
+  );
+}
+
+NoData.propTypes = {
+  className: PropTypes.string,
+};
+
+export default NoData;
--- a/components/common/NoData.module.css
+++ b/components/common/NoData.module.css
@ -0,0 +1,11 @@
+.container {
+  color: var(--gray500);
+  font-size: var(--font-size-normal);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { setDateRange } from 'redux/actions/websites';
+import Button from './Button';
+import Refresh from 'assets/redo.svg';
+import Dots from 'assets/ellipsis-h.svg';
+import useDateRange from 'hooks/useDateRange';
+import { getDateRange } from '../../lib/date';
+import useLocale from 'hooks/useLocale';
+
+function RefreshButton({ websiteId }) {
+  const dispatch = useDispatch();
+  const { locale } = useLocale();
+  const [dateRange] = useDateRange(websiteId);
+  const [loading, setLoading] = useState(false);
+  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);
+
+  function handleClick() {
+    if (dateRange) {
+      setLoading(true);
+      dispatch(setDateRange(websiteId, getDateRange(dateRange.value, locale)));
+    }
+  }
+
+  useEffect(() => {
+    setLoading(false);
+  }, [completed]);
+
+  return (
+    <Button
+      icon={loading ? <Dots /> : <Refresh />}
+      tooltip={<FormattedMessage id="label.refresh" defaultMessage="Refresh" />}
+      tooltipId="button-refresh"
+      size="small"
+      onClick={handleClick}
+    />
+  );
+}
+
+RefreshButton.propTypes = {
+  websiteId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default RefreshButton;
--- a/components/common/Table.js
+++ b/components/common/Table.js
@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import NoData from 'components/common/NoData';
+import styles from './Table.module.css';
+
+function Table({
+  columns,
+  rows,
+  empty,
+  className,
+  bodyClassName,
+  rowKey,
+  showHeader = true,
+  children,
+}) {
+  if (empty && rows.length === 0) {
+    return empty;
+  }
+
+  return (
+    <div className={classNames(styles.table, className)}>
+      {showHeader && (
+        <div className={classNames(styles.header, 'row')}>
+          {columns.map(({ key, label, className, style, header }) => (
+            <div
+              key={key}
+              className={classNames(styles.head, className, header?.className)}
+              style={{ ...style, ...header?.style }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      )}
+      <div className={classNames(styles.body, bodyClassName)}>
+        {rows.length === 0 && <NoData />}
+        {!children &&
+          rows.map((row, index) => {
+            const id = rowKey ? rowKey(row) : index;
+            return <TableRow key={id} columns={columns} row={row} />;
+          })}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const styledObject = PropTypes.shape({
+  className: PropTypes.string,
+  style: PropTypes.object,
+});
+
+Table.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      cell: styledObject,
+      className: PropTypes.string,
+      header: styledObject,
+      key: PropTypes.string,
+      label: PropTypes.node,
+      render: PropTypes.func,
+      style: PropTypes.object,
+    }),
+  ),
+  rows: PropTypes.arrayOf(PropTypes.object),
+  empty: PropTypes.node,
+  className: PropTypes.string,
+  bodyClassName: PropTypes.string,
+  rowKey: PropTypes.func,
+  showHeader: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default Table;
+
+export const TableRow = ({ columns, row }) => (
+  <div className={classNames(styles.row, 'row')}>
+    {columns.map(({ key, render, className, style, cell }, index) => (
+      <div
+        key={`${key}-${index}`}
+        className={classNames(styles.cell, className, cell?.className)}
+        style={{ ...style, ...cell?.style }}
+      >
+        {render ? render(row) : row[key]}
+      </div>
+    ))}
+  </div>
+);
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@ -0,0 +1,30 @@
+.table {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-bottom: 1px solid var(--gray300);
+}
+
+.head {
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  line-height: 40px;
+}
+
+.body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  border-bottom: 1px solid var(--gray300);
+  padding: 10px 0;
+}
+
+.cell {
+  display: flex;
+  align-items: flex-start;
+}
--- a/components/common/Tag.js
+++ b/components/common/Tag.js
@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './Tag.module.css';
+
+function Tag({ className, children }) {
+  return <span className={classNames(styles.tag, className)}>{children}</span>;
+}
+
+Tag.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Tag;
--- a/components/common/Tag.module.css
+++ b/components/common/Tag.module.css
@ -0,0 +1,6 @@
+.tag {
+  padding: 2px 4px;
+  border: 1px solid var(--gray300);
+  border-radius: 4px;
+  margin-right: 10px;
+}
--- a/components/common/Toast.js
+++ b/components/common/Toast.js
@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { useSpring, animated } from 'react-spring';
+import styles from './Toast.module.css';
+import Icon from 'components/common/Icon';
+import Close from 'assets/times.svg';
+
+function Toast({ message, timeout = 3000, onClose }) {
+  const props = useSpring({
+    opacity: 1,
+    transform: 'translate3d(0,0px,0)',
+    from: { opacity: 0, transform: 'translate3d(0,-40px,0)' },
+  });
+
+  useEffect(() => {
+    setTimeout(onClose, timeout);
+  }, []);
+
+  return ReactDOM.createPortal(
+    <animated.div className={styles.toast} style={props} onClick={onClose}>
+      <div className={styles.message}>{message}</div>
+      <Icon className={styles.close} icon={<Close />} size="small" />
+    </animated.div>,
+    document.getElementById('__modals'),
+  );
+}
+
+Toast.propTypes = {
+  message: PropTypes.node,
+  timeout: PropTypes.number,
+  onClose: PropTypes.func,
+};
+
+export default Toast;
--- a/components/common/Toast.module.css
+++ b/components/common/Toast.module.css
@ -0,0 +1,25 @@
+.toast {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  right: 0;
+  width: 300px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  color: var(--msgColor);
+  background: var(--green400);
+  margin: auto;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.message {
+  font-size: var(--font-size-normal);
+}
+
+.close {
+  margin-left: 20px;
+}
--- a/components/common/UpdateNotice.js
+++ b/components/common/UpdateNotice.js
@ -0,0 +1,47 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import useVersion from 'hooks/useVersion';
+import styles from './UpdateNotice.module.css';
+import ButtonLayout from '../layout/ButtonLayout';
+import Button from './Button';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function UpdateNotice() {
+  const forceUpdate = useForceUpdate();
+  const { hasUpdate, checked, latest, updateCheck } = useVersion(true);
+
+  function handleViewClick() {
+    location.href = 'https://github.com/mikecao/umami/releases';
+    updateCheck();
+    forceUpdate();
+  }
+
+  function handleDismissClick() {
+    updateCheck();
+    forceUpdate();
+  }
+
+  if (!hasUpdate || checked) {
+    return null;
+  }
+
+  return (
+    <div className={styles.notice}>
+      <div className={styles.message}>
+        <FormattedMessage
+          id="message.new-version-available"
+          defaultMessage="A new version of umami {version} is available!"
+          values={{ version: `v${latest}` }}
+        />
+      </div>
+      <ButtonLayout>
+        <Button size="xsmall" variant="action" onClick={handleViewClick}>
+          <FormattedMessage id="label.view-details" defaultMessage="View details" />
+        </Button>
+        <Button size="xsmall" onClick={handleDismissClick}>
+          <FormattedMessage id="label.dismiss" defaultMessage="Dismiss" />
+        </Button>
+      </ButtonLayout>
+    </div>
+  );
+}
--- a/components/common/UpdateNotice.module.css
+++ b/components/common/UpdateNotice.module.css
@ -0,0 +1,13 @@
+.notice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.message {
+  text-align: center;
+  margin-right: 20px;
+}
--- a/components/common/WorldMap.js
+++ b/components/common/WorldMap.js
@ -0,0 +1,103 @@
+import React, { useState, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
+import classNames from 'classnames';
+import tinycolor from 'tinycolor2';
+import useTheme from 'hooks/useTheme';
+import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
+import styles from './WorldMap.module.css';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
+
+function WorldMap({ data, className }) {
+  const { basePath } = useRouter();
+  const [tooltip, setTooltip] = useState();
+  const [theme] = useTheme();
+  const colors = useMemo(
+    () => ({
+      baseColor: THEME_COLORS[theme].primary,
+      fillColor: THEME_COLORS[theme].gray100,
+      strokeColor: THEME_COLORS[theme].primary,
+      hoverColor: THEME_COLORS[theme].primary,
+    }),
+    [theme],
+  );
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+
+  function getFillColor(code) {
+    if (code === 'AQ') return;
+    const country = data?.find(({ x }) => x === code);
+
+    if (!country) {
+      return colors.fillColor;
+    }
+
+    return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
+      40 * (1.0 - country.z / 100),
+    );
+  }
+
+  function getOpacity(code) {
+    return code === 'AQ' ? 0 : 1;
+  }
+
+  function handleHover(code) {
+    if (code === 'AQ') return;
+    const country = data?.find(({ x }) => x === code);
+    setTooltip(`${countryNames[code]}: ${country?.y || 0} visitors`);
+  }
+
+  return (
+    <div
+      className={classNames(styles.container, className)}
+      data-tip=""
+      data-for="world-map-tooltip"
+    >
+      <ComposableMap projection="geoMercator">
+        <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
+          <Geographies geography={`${basePath}${MAP_FILE}`}>
+            {({ geographies }) => {
+              return geographies.map(geo => {
+                const code = ISO_COUNTRIES[geo.id];
+
+                return (
+                  <Geography
+                    key={geo.rsmKey}
+                    geography={geo}
+                    fill={getFillColor(code)}
+                    stroke={colors.strokeColor}
+                    opacity={getOpacity(code)}
+                    style={{
+                      default: { outline: 'none' },
+                      hover: { outline: 'none', fill: colors.hoverColor },
+                      pressed: { outline: 'none' },
+                    }}
+                    onMouseOver={() => handleHover(code)}
+                    onMouseOut={() => setTooltip(null)}
+                  />
+                );
+              });
+            }}
+          </Geographies>
+        </ZoomableGroup>
+      </ComposableMap>
+      <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
+    </div>
+  );
+}
+
+WorldMap.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.string,
+      y: PropTypes.number,
+      z: PropTypes.number,
+    }),
+  ),
+  className: PropTypes.string,
+};
+
+export default WorldMap;
--- a/components/common/WorldMap.module.css
+++ b/components/common/WorldMap.module.css
@ -0,0 +1,4 @@
+.container {
+  overflow: hidden;
+  position: relative;
+}
--- a/components/forms/AccountEditForm.js
+++ b/components/forms/AccountEditForm.js
@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
+
+const initialValues = {
+  username: '',
+  password: '',
+};
+
+const validate = ({ user_id, username, password }) => {
+  const errors = {};
+
+  if (!username) {
+    errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+  if (!user_id && !password) {
+    errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+
+  return errors;
+};
+
+export default function AccountEditForm({ values, onSave, onClose }) {
+  const post = usePost();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async values => {
+    const { ok, data } = await post('/api/account', values);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ ...initialValues, ...values }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {() => (
+          <Form>
+            <FormRow>
+              <label htmlFor="username">
+                <FormattedMessage id="label.username" defaultMessage="Username" />
+              </label>
+              <div>
+                <Field name="username" type="text" />
+                <FormError name="username" />
+              </div>
+            </FormRow>
+            <FormRow>
+              <label htmlFor="password">
+                <FormattedMessage id="label.password" defaultMessage="Password" />
+              </label>
+              <div>
+                <Field name="password" type="password" />
+                <FormError name="password" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button type="submit" variant="action">
+                <FormattedMessage id="label.save" defaultMessage="Save" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
--- a/components/forms/ChangePasswordForm.js
+++ b/components/forms/ChangePasswordForm.js
@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
+
+const initialValues = {
+  current_password: '',
+  new_password: '',
+  confirm_password: '',
+};
+
+const validate = ({ current_password, new_password, confirm_password }) => {
+  const errors = {};
+
+  if (!current_password) {
+    errors.current_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+  if (!new_password) {
+    errors.new_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+  if (!confirm_password) {
+    errors.confirm_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  } else if (new_password !== confirm_password) {
+    errors.confirm_password = (
+      <FormattedMessage id="label.passwords-dont-match" defaultMessage="Passwords don't match" />
+    );
+  }
+
+  return errors;
+};
+
+export default function ChangePasswordForm({ values, onSave, onClose }) {
+  const post = usePost();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async values => {
+    const { ok, data } = await post('/api/account/password', values);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ ...initialValues, ...values }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {() => (
+          <Form>
+            <FormRow>
+              <label htmlFor="current_password">
+                <FormattedMessage id="label.current-password" defaultMessage="Current password" />
+              </label>
+              <div>
+                <Field name="current_password" type="password" />
+                <FormError name="current_password" />
+              </div>
+            </FormRow>
+            <FormRow>
+              <label htmlFor="new_password">
+                <FormattedMessage id="label.new-password" defaultMessage="New password" />
+              </label>
+              <div>
+                <Field name="new_password" type="password" />
+                <FormError name="new_password" />
+              </div>
+            </FormRow>
+            <FormRow>
+              <label htmlFor="confirm_password">
+                <FormattedMessage id="label.confirm-password" defaultMessage="Confirm password" />
+              </label>
+              <div>
+                <Field name="confirm_password" type="password" />
+                <FormError name="confirm_password" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button type="submit" variant="action">
+                <FormattedMessage id="label.save" defaultMessage="Save" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
--- a/components/forms/DatePickerForm.js
+++ b/components/forms/DatePickerForm.js
@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { isAfter, isBefore, isSameDay } from 'date-fns';
+import Calendar from 'components/common/Calendar';
+import Button from 'components/common/Button';
+import { FormButtons } from 'components/layout/FormLayout';
+import { getDateRangeValues } from 'lib/date';
+import styles from './DatePickerForm.module.css';
+import ButtonGroup from 'components/common/ButtonGroup';
+
+const FILTER_DAY = 0;
+const FILTER_RANGE = 1;
+
+export default function DatePickerForm({
+  startDate: defaultStartDate,
+  endDate: defaultEndDate,
+  minDate,
+  maxDate,
+  onChange,
+  onClose,
+}) {
+  const [selected, setSelected] = useState(
+    isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
+  );
+  const [date, setDate] = useState(defaultStartDate);
+  const [startDate, setStartDate] = useState(defaultStartDate);
+  const [endDate, setEndDate] = useState(defaultEndDate);
+
+  const disabled =
+    selected === FILTER_DAY
+      ? isAfter(minDate, date) && isBefore(maxDate, date)
+      : isAfter(startDate, endDate);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="label.single-day" defaultMessage="Single day" />,
+      value: FILTER_DAY,
+    },
+    {
+      label: <FormattedMessage id="label.date-range" defaultMessage="Date range" />,
+      value: FILTER_RANGE,
+    },
+  ];
+
+  function handleSave() {
+    if (selected === FILTER_DAY) {
+      onChange({ ...getDateRangeValues(date, date), value: 'custom' });
+    } else {
+      onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.filter}>
+        <ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
+      </div>
+      <div className={styles.calendars}>
+        {selected === FILTER_DAY ? (
+          <Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
+        ) : (
+          <>
+            <Calendar
+              date={startDate}
+              minDate={minDate}
+              maxDate={endDate}
+              onChange={setStartDate}
+            />
+            <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+          </>
+        )}
+      </div>
+      <FormButtons>
+        <Button variant="action" onClick={handleSave} disabled={disabled}>
+          <FormattedMessage id="label.save" defaultMessage="Save" />
+        </Button>
+        <Button onClick={onClose}>
+          <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+        </Button>
+      </FormButtons>
+    </div>
+  );
+}
--- a/components/forms/DatePickerForm.module.css
+++ b/components/forms/DatePickerForm.module.css
@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 100vw;
+}
+
+.calendars {
+  display: flex;
+  justify-content: center;
+}
+
+.calendars > div {
+  width: 380px;
+}
+
+.calendars > div + div {
+  margin-left: 20px;
+  padding-left: 20px;
+  border-left: 1px solid var(--gray300);
+}
+
+.filter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+@media only screen and (max-width: 768px) {
+  .calendars {
+    flex-direction: column;
+  }
+
+  .calendars > div + div {
+    padding: 0;
+    margin-left: 0;
+    margin-top: 20px;
+    border: 0;
+  }
+}
--- a/components/forms/DeleteForm.js
+++ b/components/forms/DeleteForm.js
@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import useDelete from 'hooks/useDelete';
+
+const CONFIRMATION_WORD = 'DELETE';
+
+const validate = ({ confirmation }) => {
+  const errors = {};
+
+  if (confirmation !== CONFIRMATION_WORD) {
+    errors.confirmation = !confirmation ? (
+      <FormattedMessage id="label.required" defaultMessage="Required" />
+    ) : (
+      <FormattedMessage id="label.invalid" defaultMessage="Invalid" />
+    );
+  }
+
+  return errors;
+};
+
+export default function DeleteForm({ values, onSave, onClose }) {
+  const del = useDelete();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ type, id }) => {
+    const { ok, data } = await del(`/api/${type}/${id}`);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ confirmation: '', ...values }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {props => (
+          <Form>
+            <div>
+              <FormattedMessage
+                id="message.confirm-delete"
+                defaultMessage="Are your sure you want to delete {target}?"
+                values={{ target: <b>{values.name}</b> }}
+              />
+            </div>
+            <div>
+              <FormattedMessage
+                id="message.delete-warning"
+                defaultMessage="All associated data will be deleted as well."
+              />
+            </div>
+            <p>
+              <FormattedMessage
+                id="message.type-delete"
+                defaultMessage="Type {delete} in the box below to confirm."
+                values={{ delete: <b>{CONFIRMATION_WORD}</b> }}
+              />
+            </p>
+            <FormRow>
+              <div>
+                <Field name="confirmation" type="text" />
+                <FormError name="confirmation" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button
+                type="submit"
+                variant="danger"
+                disabled={props.values.confirmation !== CONFIRMATION_WORD}
+              >
+                <FormattedMessage id="label.delete" defaultMessage="Delete" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import { useRouter } from 'next/router';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import Icon from 'components/common/Icon';
+import Logo from 'assets/logo.svg';
+import styles from './LoginForm.module.css';
+import usePost from 'hooks/usePost';
+
+const validate = ({ username, password }) => {
+  const errors = {};
+
+  if (!username) {
+    errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+  if (!password) {
+    errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+
+  return errors;
+};
+
+export default function LoginForm() {
+  const post = usePost();
+  const router = useRouter();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ username, password }) => {
+    const { ok, status, data } = await post('/api/auth/login', {
+      username,
+      password,
+    });
+
+    if (ok) {
+      return router.push('/');
+    } else {
+      setMessage(
+        status === 401 ? (
+          <FormattedMessage
+            id="message.incorrect-username-password"
+            defaultMessage="Incorrect username/password."
+          />
+        ) : (
+          data
+        ),
+      );
+    }
+  };
+
+  return (
+    <FormLayout className={styles.login}>
+      <Formik
+        initialValues={{
+          username: '',
+          password: '',
+        }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {() => (
+          <Form>
+            <div className={styles.header}>
+              <Icon icon={<Logo />} size="xlarge" className={styles.icon} />
+              <h1 className="center">umami</h1>
+            </div>
+            <FormRow>
+              <label htmlFor="username">
+                <FormattedMessage id="label.username" defaultMessage="Username" />
+              </label>
+              <div>
+                <Field name="username" type="text" />
+                <FormError name="username" />
+              </div>
+            </FormRow>
+            <FormRow>
+              <label htmlFor="password">
+                <FormattedMessage id="label.password" defaultMessage="Password" />
+              </label>
+              <div>
+                <Field name="password" type="password" />
+                <FormError name="password" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button type="submit" variant="action">
+                <FormattedMessage id="label.login" defaultMessage="Login" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
--- a/components/forms/LoginForm.module.css
+++ b/components/forms/LoginForm.module.css
@ -0,0 +1,23 @@
+.login {
+  display: flex;
+  flex-direction: column;
+  margin-top: 80px;
+}
+
+.login form {
+  margin: 0 auto;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: 30px;
+}
+
+.header h1 {
+  margin: 12px 0;
+}
--- a/components/forms/ResetForm.js
+++ b/components/forms/ResetForm.js
@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
+
+const CONFIRMATION_WORD = 'RESET';
+
+const validate = ({ confirmation }) => {
+  const errors = {};
+
+  if (confirmation !== CONFIRMATION_WORD) {
+    errors.confirmation = !confirmation ? (
+      <FormattedMessage id="label.required" defaultMessage="Required" />
+    ) : (
+      <FormattedMessage id="label.invalid" defaultMessage="Invalid" />
+    );
+  }
+
+  return errors;
+};
+
+export default function ResetForm({ values, onSave, onClose }) {
+  const post = usePost();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ type, id }) => {
+    const { ok, data } = await post(`/api/${type}/${id}/reset`);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ confirmation: '', ...values }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {props => (
+          <Form>
+            <div>
+              <FormattedMessage
+                id="message.confirm-reset"
+                defaultMessage="Are your sure you want to reset {target}'s statistics?"
+                values={{ target: <b>{values.name}</b> }}
+              />
+            </div>
+            <div>
+              <FormattedMessage
+                id="message.reset-warning"
+                defaultMessage="All statistics for this website will be deleted, but your tracking code will remain intact."
+              />
+            </div>
+            <p>
+              <FormattedMessage
+                id="message.type-reset"
+                defaultMessage="Type {reset} in the box below to confirm."
+                values={{ reset: <b>{CONFIRMATION_WORD}</b> }}
+              />
+            </p>
+            <FormRow>
+              <div>
+                <Field name="confirmation" type="text" />
+                <FormError name="confirmation" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button
+                type="submit"
+                variant="danger"
+                disabled={props.values.confirmation !== CONFIRMATION_WORD}
+              >
+                <FormattedMessage id="label.reset" defaultMessage="Reset" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
--- a/components/forms/ShareUrlForm.js
+++ b/components/forms/ShareUrlForm.js
@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
+import Button from 'components/common/Button';
+import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
+import CopyButton from 'components/common/CopyButton';
+
+export default function TrackingCodeForm({ values, onClose }) {
+  const ref = useRef();
+  const { basePath } = useRouter();
+  const { name, share_id } = values;
+
+  return (
+    <FormLayout>
+      <p>
+        <FormattedMessage
+          id="message.share-url"
+          defaultMessage="This is the publicly shared URL for {target}."
+          values={{ target: <b>{values.name}</b> }}
+        />
+      </p>
+      <FormRow>
+        <textarea
+          ref={ref}
+          rows={3}
+          cols={60}
+          spellCheck={false}
+          defaultValue={`${
+            document.location.origin
+          }${basePath}/share/${share_id}/${encodeURIComponent(name)}`}
+          readOnly
+        />
+      </FormRow>
+      <FormButtons>
+        <CopyButton type="submit" variant="action" element={ref} />
+        <Button onClick={onClose}>
+          <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+        </Button>
+      </FormButtons>
+    </FormLayout>
+  );
+}
--- a/components/forms/TrackingCodeForm.js
+++ b/components/forms/TrackingCodeForm.js
@ -0,0 +1,39 @@
+import React, { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
+import Button from 'components/common/Button';
+import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
+import CopyButton from 'components/common/CopyButton';
+
+export default function TrackingCodeForm({ values, onClose }) {
+  const ref = useRef();
+  const { basePath } = useRouter();
+
+  return (
+    <FormLayout>
+      <p>
+        <FormattedMessage
+          id="message.track-stats"
+          defaultMessage="To track stats for {target}, place the following code in the {head} section of your website."
+          values={{ head: '<head>', target: <b>{values.name}</b> }}
+        />
+      </p>
+      <FormRow>
+        <textarea
+          ref={ref}
+          rows={3}
+          cols={60}
+          spellCheck={false}
+          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}${basePath}/umami.js"></script>`}
+          readOnly
+        />
+      </FormRow>
+      <FormButtons>
+        <CopyButton type="submit" variant="action" element={ref} />
+        <Button onClick={onClose}>
+          <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+        </Button>
+      </FormButtons>
+    </FormLayout>
+  );
+}
--- a/components/forms/WebsiteEditForm.js
+++ b/components/forms/WebsiteEditForm.js
@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import Checkbox from 'components/common/Checkbox';
+import { DOMAIN_REGEX } from 'lib/constants';
+import usePost from 'hooks/usePost';
+
+const initialValues = {
+  name: '',
+  domain: '',
+  public: false,
+};
+
+const validate = ({ name, domain }) => {
+  const errors = {};
+
+  if (!name) {
+    errors.name = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  }
+  if (!domain) {
+    errors.domain = <FormattedMessage id="label.required" defaultMessage="Required" />;
+  } else if (!DOMAIN_REGEX.test(domain)) {
+    errors.domain = <FormattedMessage id="label.invalid-domain" defaultMessage="Invalid domain" />;
+  }
+
+  return errors;
+};
+
+export default function WebsiteEditForm({ values, onSave, onClose }) {
+  const post = usePost();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async values => {
+    const { ok, data } = await post('/api/website', values);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ ...initialValues, ...values, enable_share_url: !!values?.share_id }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {() => (
+          <Form>
+            <FormRow>
+              <label htmlFor="name">
+                <FormattedMessage id="label.name" defaultMessage="Name" />
+              </label>
+              <div>
+                <Field name="name" type="text" />
+                <FormError name="name" />
+              </div>
+            </FormRow>
+            <FormRow>
+              <label htmlFor="domain">
+                <FormattedMessage id="label.domain" defaultMessage="Domain" />
+              </label>
+              <div>
+                <Field name="domain" type="text" placeholder="example.com" />
+                <FormError name="domain" />
+              </div>
+            </FormRow>
+            <FormRow>
+              <label />
+              <Field name="enable_share_url">
+                {({ field }) => (
+                  <Checkbox
+                    {...field}
+                    label={
+                      <FormattedMessage
+                        id="label.enable-share-url"
+                        defaultMessage="Enable share URL"
+                      />
+                    }
+                  />
+                )}
+              </Field>
+            </FormRow>
+            <FormButtons>
+              <Button type="submit" variant="action">
+                <FormattedMessage id="label.save" defaultMessage="Save" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
--- a/components/helpers/CheckVisible.js
+++ b/components/helpers/CheckVisible.js
@ -0,0 +1,41 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+function isInViewport(element) {
+  const rect = element.getBoundingClientRect();
+  return !(
+    rect.bottom < 0 ||
+    rect.right < 0 ||
+    rect.left > window.innerWidth ||
+    rect.top > window.innerHeight
+  );
+}
+
+export default function CheckVisible({ className, children }) {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef();
+
+  useEffect(() => {
+    const checkPosition = () => {
+      if (ref.current) {
+        const state = isInViewport(ref.current);
+        if (state !== visible) {
+          setVisible(state);
+        }
+      }
+    };
+
+    checkPosition();
+
+    window.addEventListener('scroll', checkPosition);
+
+    return () => {
+      window.removeEventListener('scroll', checkPosition);
+    };
+  }, [visible]);
+
+  return (
+    <div ref={ref} className={className} data-visible={visible}>
+      {typeof children === 'function' ? children(visible) : children}
+    </div>
+  );
+}
--- a/components/helpers/StickyHeader.js
+++ b/components/helpers/StickyHeader.js
@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+
+export default function StickyHeader({
+  className,
+  stickyClassName,
+  stickyStyle,
+  children,
+  enabled = true,
+}) {
+  const [sticky, setSticky] = useState(false);
+  const ref = useRef();
+  const top = useRef(0);
+
+  useEffect(() => {
+    const checkPosition = () => {
+      if (ref.current) {
+        if (!top.current) {
+          top.current = ref.current.offsetTop + ref.current.offsetHeight;
+        }
+        const state = window.pageYOffset > top.current;
+        if (sticky !== state) {
+          setSticky(state);
+        }
+      }
+    };
+
+    checkPosition();
+
+    if (enabled) {
+      window.addEventListener('scroll', checkPosition);
+    }
+
+    return () => {
+      window.removeEventListener('scroll', checkPosition);
+    };
+  }, [sticky, enabled]);
+
+  return (
+    <div
+      ref={ref}
+      data-sticky={sticky}
+      className={classNames(className, { [stickyClassName]: sticky })}
+      style={sticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
+    >
+      {children}
+    </div>
+  );
+}
--- a/components/layout/ButtonLayout.js
+++ b/components/layout/ButtonLayout.js
@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './ButtonLayout.module.css';
+
+export default function ButtonLayout({ className, children, align = 'center' }) {
+  return (
+    <div
+      className={classNames(styles.buttons, className, {
+        [styles.left]: align === 'left',
+        [styles.center]: align === 'center',
+        [styles.right]: align === 'right',
+      })}
+    >
+      {children}
+    </div>
+  );
+}
--- a/components/layout/ButtonLayout.module.css
+++ b/components/layout/ButtonLayout.module.css
@ -0,0 +1,20 @@
+.buttons {
+  display: flex;
+  align-items: center;
+}
+
+.buttons button + * {
+  margin-left: 10px;
+}
+
+.center {
+  justify-content: center;
+}
+
+.left {
+  justify-content: flex-start;
+}
+
+.right {
+  justify-content: flex-end;
+}
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import Link from 'components/common/Link';
+import styles from './Footer.module.css';
+import useVersion from 'hooks/useVersion';
+import useLocale from 'hooks/useLocale';
+
+export default function Footer() {
+  const { current } = useVersion();
+  const { dir } = useLocale();
+
+  return (
+    <footer className="container" dir={dir}>
+      <div className={classNames(styles.footer, 'row')}>
+        <div className="col-12 col-md-4" />
+        <div className="col-12 col-md-4">
+          <FormattedMessage
+            id="message.powered-by"
+            defaultMessage="Powered by {name}"
+            values={{
+              name: (
+                <Link href="https://umami.is">
+                  <b>umami</b>
+                </Link>
+              ),
+            }}
+          />
+        </div>
+        <div className={classNames(styles.version, 'col-12 col-md-4')}>
+          <Link href={`https://github.com/mikecao/umami/releases`}>{`v${current}`}</Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/components/layout/Footer.module.css
+++ b/components/layout/Footer.module.css
@ -0,0 +1,18 @@
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-small);
+  min-height: 100px;
+  text-align: center;
+}
+
+.version {
+  text-align: right;
+}
+
+@media only screen and (max-width: 768px) {
+  .version {
+    text-align: center;
+  }
+}
--- a/components/layout/FormLayout.js
+++ b/components/layout/FormLayout.js
@ -0,0 +1,32 @@
+import React from 'react';
+import { useSpring, animated } from 'react-spring';
+import classNames from 'classnames';
+import { ErrorMessage } from 'formik';
+import styles from './FormLayout.module.css';
+
+export default function FormLayout({ className, children }) {
+  return <div className={classNames(styles.form, className)}>{children}</div>;
+}
+
+export const FormButtons = ({ className, children }) => (
+  <div className={classNames(styles.buttons, className)}>{children}</div>
+);
+
+export const FormError = ({ name }) => {
+  return <ErrorMessage name={name}>{msg => <ErrorTag msg={msg} />}</ErrorMessage>;
+};
+
+const ErrorTag = ({ msg }) => {
+  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
+
+  return (
+    <animated.div className={styles.error} style={props}>
+      <div className={styles.msg}>{msg}</div>
+    </animated.div>
+  );
+};
+
+export const FormRow = ({ children }) => <div className={styles.row}>{children}</div>;
+
+export const FormMessage = ({ children }) =>
+  children ? <div className={styles.message}>{children}</div> : null;
--- a/components/layout/FormLayout.module.css
+++ b/components/layout/FormLayout.module.css
@ -0,0 +1,94 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.form label {
+  display: block;
+  min-width: 100px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+  margin-bottom: 20px;
+  line-height: 1.8;
+  padding: 0 20px;
+}
+
+.row > div {
+  position: relative;
+  flex: 1 1;
+}
+
+.row > div > input {
+  width: 100%;
+  min-width: 240px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.buttons button + button {
+  margin-left: 10px;
+}
+
+.error {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: calc(100% + 16px);
+  bottom: 0;
+  z-index: 1;
+}
+
+.msg {
+  color: var(--msgColor);
+  background: var(--red400);
+  font-size: var(--font-size-small);
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.error:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -5px;
+  bottom: 0;
+  margin: auto;
+  width: 10px;
+  height: 10px;
+  background: var(--red400);
+  transform: rotate(45deg);
+}
+
+.message {
+  text-align: center;
+  margin: 20px 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: var(--gray50);
+  background: var(--gray800);
+}
+
+@media only screen and (max-width: 576px) {
+  .error {
+    align-items: flex-start;
+    top: calc(100% + 7px);
+    left: 0;
+  }
+
+  .error:after {
+    left: 10px;
+  }
+}
--- a/components/layout/GridLayout.js
+++ b/components/layout/GridLayout.js
@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './GridLayout.module.css';
+
+export default function GridLayout({ className, children }) {
+  return <div className={classNames(styles.grid, className)}>{children}</div>;
+}
+
+export const GridRow = ({ className, children }) => {
+  return <div className={classNames(styles.row, className, 'row')}>{children}</div>;
+};
+
+export const GridColumn = ({ xs, sm, md, lg, xl, className, children }) => {
+  const classes = [];
+
+  classes.push(xs ? `col-${xs}` : 'col-12');
+
+  if (sm) {
+    classes.push(`col-sm-${sm}`);
+  }
+  if (md) {
+    classes.push(`col-md-${md}`);
+  }
+  if (lg) {
+    classes.push(`col-lg-${lg}`);
+  }
+  if (xl) {
+    classes.push(`col-lg-${xl}`);
+  }
+  return <div className={classNames(styles.col, classes, className)}>{children}</div>;
+};
--- a/components/layout/GridLayout.module.css
+++ b/components/layout/GridLayout.module.css
@ -0,0 +1,40 @@
+.grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  border-top: 1px solid var(--gray300);
+  min-height: 430px;
+}
+
+.row > .col {
+  border-left: 1px solid var(--gray300);
+  padding: 20px;
+}
+
+.row > .col:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.row > .col:last-child {
+  padding-right: 0;
+}
+
+@media only screen and (max-width: 992px) {
+  .row {
+    border: 0;
+  }
+
+  .row > .col {
+    border-top: 1px solid var(--gray300);
+    border-left: 0;
+    padding: 20px 0;
+  }
+}
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import Link from 'components/common/Link';
+import Icon from 'components/common/Icon';
+import LanguageButton from 'components/settings/LanguageButton';
+import ThemeButton from 'components/settings/ThemeButton';
+import UpdateNotice from 'components/common/UpdateNotice';
+import UserButton from 'components/settings/UserButton';
+import Button from 'components/common/Button';
+import Logo from 'assets/logo.svg';
+import styles from './Header.module.css';
+import useLocale from 'hooks/useLocale';
+import XMark from 'assets/xmark.svg';
+import Bars from 'assets/bars.svg';
+
+export default function Header() {
+  const user = useSelector(state => state.user);
+  const [active, setActive] = useState(false);
+  const { dir } = useLocale();
+
+  function handleClick() {
+    setActive(state => !state);
+  }
+
+  return (
+    <nav className="container" dir={dir}>
+      {user?.is_admin && <UpdateNotice />}
+      <div className={classNames(styles.header, 'row align-items-center')}>
+        <div className={styles.nav}>
+          <div className="">
+            <div className={styles.title}>
+              <Icon icon={<Logo />} size="large" className={styles.logo} />
+              <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
+            </div>
+          </div>
+          <Button
+            className={styles.burger}
+            icon={active ? <XMark /> : <Bars />}
+            onClick={handleClick}
+          />
+          {user && (
+            <div className={styles.items}>
+              <div className={active ? classNames(styles.active) : ''}>
+                <Link href="/dashboard">
+                  <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
+                </Link>
+                <Link href="/realtime">
+                  <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+                </Link>
+                <Link href="/settings">
+                  <FormattedMessage id="label.settings" defaultMessage="Settings" />
+                </Link>
+              </div>
+            </div>
+          )}
+          <div className={styles.items}>
+            <div className={active ? classNames(styles.active) : ''}>
+              <div className={styles.buttons}>
+                <ThemeButton />
+                <LanguageButton menuAlign="right" />
+                {user && <UserButton />}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@ -0,0 +1,116 @@
+.navbar {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.burger {
+  display: none;
+}
+
+.header {
+  display: flex;
+  min-height: 100px;
+  width: 100%;
+}
+
+.title {
+  font-size: var(--font-size-large);
+  display: flex;
+  align-items: center;
+  line-height: 1.4;
+}
+
+.logo {
+  margin-right: 12px;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-normal);
+  font-weight: 600;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.items {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-normal);
+  font-weight: 600;
+}
+
+.nav a + a {
+  margin-left: 40px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@media only screen and (max-width: 992px) {
+  .nav {
+    font-size: var(--font-size-large);
+    justify-content: space-between;
+    margin: 20px 0;
+  }
+  .items {
+    flex-wrap: wrap;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .header {
+    padding: 0 15px;
+  }
+
+  .title {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .nav {
+    font-size: var(--font-size-normal);
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .items {
+    display: flex;
+    justify-content: unset;
+    font-size: var(--font-size-normal);
+    font-weight: 600;
+  }
+
+  .items > div {
+    display: none;
+  }
+
+  .header .active {
+    display: inherit;
+    width: 100%;
+  }
+
+  .items a {
+    width: 100%;
+  }
+
+  .burger {
+    display: block;
+    background: none;
+    border: 1px solid var(--gray900);
+    border-radius: 4px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@ -0,0 +1,24 @@
+import React from 'react';
+import Head from 'next/head';
+import Header from 'components/layout/Header';
+import Footer from 'components/layout/Footer';
+import useLocale from 'hooks/useLocale';
+
+export default function Layout({ title, children, header = true, footer = true }) {
+  const { dir } = useLocale();
+
+  return (
+    <>
+      <Head>
+        <title>umami{title && ` - ${title}`}</title>
+      </Head>
+
+      {header && <Header />}
+      <main className="container" dir={dir}>
+        {children}
+      </main>
+      {footer && <Footer />}
+      <div id="__modals" dir={dir} />
+    </>
+  );
+}
--- a/components/layout/Layout.module.css
+++ b/components/layout/Layout.module.css
@ -0,0 +1,6 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
--- a/components/layout/MenuLayout.js
+++ b/components/layout/MenuLayout.js
@ -0,0 +1,39 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import NavMenu from 'components/common/NavMenu';
+import styles from './MenuLayout.module.css';
+
+export default function MenuLayout({
+  menu,
+  selectedOption,
+  className,
+  menuClassName,
+  contentClassName,
+  children,
+  replace = false,
+}) {
+  const router = useRouter();
+
+  function handleSelect(url) {
+    if (replace) {
+      router.replace(url);
+    } else {
+      router.push(url);
+    }
+  }
+
+  return (
+    <div className={classNames(styles.container, className, 'row')}>
+      <NavMenu
+        options={menu}
+        selectedOption={selectedOption}
+        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-2')}
+        onSelect={handleSelect}
+      />
+      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-10')}>
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/components/layout/MenuLayout.module.css
+++ b/components/layout/MenuLayout.module.css
@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  flex: 1;
+  height: 100%;
+}
+
+.container .menu {
+  padding: 30px 0;
+  border: 0;
+}
+
+.container .content {
+  flex: 1;
+  position: relative;
+  border-left: 1px solid var(--gray300);
+  padding-left: 30px;
+  margin-left: 30px;
+}
+
+@media only screen and (max-width: 992px) {
+  .container {
+    height: auto;
+  }
+
+  .container .content {
+    border-top: 1px solid var(--gray300);
+    border-left: 0;
+    padding-left: 0;
+    margin-left: 0;
+  }
+}
--- a/components/layout/Page.js
+++ b/components/layout/Page.js
@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Page.module.css';
+
+export default class Page extends React.Component {
+  getSnapshotBeforeUpdate() {
+    if (window.pageXOffset === 0 && window.pageYOffset === 0) return null;
+
+    // Return the scrolled position as the snapshot value
+    return { x: window.pageXOffset, y: window.pageYOffset };
+  }
+
+  /* eslint-disable no-unused-vars */
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (snapshot !== null) {
+      // Restore the scrolled position after re-rendering
+      window.scrollTo(snapshot.x, snapshot.y);
+    }
+  }
+  /* eslint-enable no-unused-vars */
+
+  render() {
+    const { className, children } = this.props;
+    return <div className={classNames(styles.page, className)}>{children}</div>;
+  }
+}
--- a/components/layout/Page.module.css
+++ b/components/layout/Page.module.css
@ -0,0 +1,7 @@
+.page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 30px;
+  background: var(--gray50);
+}
--- a/components/layout/PageHeader.js
+++ b/components/layout/PageHeader.js
@ -0,0 +1,7 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './PageHeader.module.css';
+
+export default function PageHeader({ children, className }) {
+  return <div className={classNames(styles.header, className)}>{children}</div>;
+}
--- a/components/layout/PageHeader.module.css
+++ b/components/layout/PageHeader.module.css
@ -0,0 +1,9 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  min-height: 80px;
+  align-self: stretch;
+  font-weight: bold;
+}
--- a/components/messages.js
+++ b/components/messages.js
@ -0,0 +1,17 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+export const labels = defineMessages({
+  unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
+});
+
+export const devices = defineMessages({
+  desktop: { id: 'metrics.device.desktop', defaultMessage: 'Desktop' },
+  laptop: { id: 'metrics.device.laptop', defaultMessage: 'Laptop' },
+  tablet: { id: 'metrics.device.tablet', defaultMessage: 'Tablet' },
+  mobile: { id: 'metrics.device.mobile', defaultMessage: 'Mobile' },
+});
+
+export function getDeviceMessage(device) {
+  return <FormattedMessage {...(devices[device] || labels.unknown)} />;
+}
--- a/components/metrics/ActiveUsers.js
+++ b/components/metrics/ActiveUsers.js
@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import useFetch from 'hooks/useFetch';
+import Dot from 'components/common/Dot';
+import { TOKEN_HEADER } from 'lib/constants';
+import useShareToken from 'hooks/useShareToken';
+import styles from './ActiveUsers.module.css';
+
+export default function ActiveUsers({ websiteId, className }) {
+  const shareToken = useShareToken();
+  const { data } = useFetch(`/api/website/${websiteId}/active`, {
+    interval: 60000,
+    headers: { [TOKEN_HEADER]: shareToken?.token },
+  });
+  const count = useMemo(() => {
+    return data?.[0]?.x || 0;
+  }, [data]);
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      <Dot />
+      <div className={styles.text}>
+        <div>
+          <FormattedMessage
+            id="message.active-users"
+            defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
+            values={{ x: count }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/metrics/ActiveUsers.module.css
+++ b/components/metrics/ActiveUsers.module.css
@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  display: flex;
+  font-size: var(--font-size-normal);
+}
+
+.value {
+  font-weight: 600;
+  margin-right: 4px;
+}
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@ -0,0 +1,226 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import ChartJS from 'chart.js';
+import Legend from 'components/metrics/Legend';
+import { formatLongNumber } from 'lib/format';
+import { dateFormat } from 'lib/date';
+import useLocale from 'hooks/useLocale';
+import useTheme from 'hooks/useTheme';
+import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import styles from './BarChart.module.css';
+import ChartTooltip from './ChartTooltip';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function BarChart({
+  chartId,
+  datasets,
+  unit,
+  records,
+  height = DEFAUL_CHART_HEIGHT,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  className,
+  stacked = false,
+  loading = false,
+  onCreate = () => {},
+  onUpdate = () => {},
+}) {
+  const canvas = useRef();
+  const chart = useRef();
+  const [tooltip, setTooltip] = useState(null);
+  const { locale } = useLocale();
+  const [theme] = useTheme();
+  const forceUpdate = useForceUpdate();
+
+  const colors = {
+    text: THEME_COLORS[theme].gray700,
+    line: THEME_COLORS[theme].gray200,
+    zeroLine: THEME_COLORS[theme].gray500,
+  };
+
+  function renderXLabel(label, index, values) {
+    if (loading) return '';
+    const d = new Date(values[index].value);
+    const sw = canvas.current.width / window.devicePixelRatio;
+
+    switch (unit) {
+      case 'minute':
+        return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
+      case 'hour':
+        return dateFormat(d, 'p', locale);
+      case 'day':
+        if (records > 25) {
+          if (sw <= 275) {
+            return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
+          }
+          if (sw <= 550) {
+            return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
+          }
+          if (sw <= 700) {
+            return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
+          }
+          return dateFormat(d, 'MMM d', locale);
+        }
+        if (sw <= 375) {
+          return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
+        }
+        if (sw <= 425) {
+          return dateFormat(d, 'MMM d', locale);
+        }
+        return dateFormat(d, 'EEE M/d', locale);
+      case 'month':
+        if (sw <= 330) {
+          return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
+        }
+        return dateFormat(d, 'MMM', locale);
+      default:
+        return label;
+    }
+  }
+
+  function renderYLabel(label) {
+    return +label > 1000 ? formatLongNumber(label) : label;
+  }
+
+  function renderTooltip(model) {
+    const { opacity, title, body, labelColors } = model;
+
+    if (!opacity || !title) {
+      setTooltip(null);
+      return;
+    }
+
+    const [label, value] = body[0].lines[0].split(':');
+
+    setTooltip({
+      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      value,
+      label,
+      labelColor: labelColors[0].backgroundColor,
+    });
+  }
+
+  function getTooltipFormat(unit) {
+    switch (unit) {
+      case 'hour':
+        return 'EEE p — PPP';
+      default:
+        return 'PPPP';
+    }
+  }
+
+  function createChart() {
+    const options = {
+      animation: {
+        duration: animationDuration,
+      },
+      tooltips: {
+        enabled: false,
+        custom: renderTooltip,
+      },
+      hover: {
+        animationDuration: 0,
+      },
+      responsive: true,
+      responsiveAnimationDuration: 0,
+      maintainAspectRatio: false,
+      legend: {
+        display: false,
+      },
+      scales: {
+        xAxes: [
+          {
+            type: 'time',
+            distribution: 'series',
+            time: {
+              unit,
+              tooltipFormat: 'x',
+            },
+            ticks: {
+              callback: renderXLabel,
+              minRotation: 0,
+              maxRotation: 0,
+              fontColor: colors.text,
+              autoSkipPadding: 1,
+            },
+            gridLines: {
+              display: false,
+            },
+            offset: true,
+            stacked: true,
+          },
+        ],
+        yAxes: [
+          {
+            ticks: {
+              callback: renderYLabel,
+              beginAtZero: true,
+              fontColor: colors.text,
+            },
+            gridLines: {
+              color: colors.line,
+              zeroLineColor: colors.zeroLine,
+            },
+            stacked,
+          },
+        ],
+      },
+    };
+
+    onCreate(options);
+
+    chart.current = new ChartJS(canvas.current, {
+      type: 'bar',
+      data: {
+        datasets,
+      },
+      options,
+    });
+  }
+
+  function updateChart() {
+    const { options } = chart.current;
+
+    options.legend.labels.fontColor = colors.text;
+    options.scales.xAxes[0].time.unit = unit;
+    options.scales.xAxes[0].ticks.callback = renderXLabel;
+    options.scales.xAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.precision = 0;
+    options.scales.yAxes[0].gridLines.color = colors.line;
+    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
+    options.animation.duration = animationDuration;
+    options.tooltips.custom = renderTooltip;
+
+    onUpdate(chart.current);
+
+    chart.current.update();
+
+    forceUpdate();
+  }
+
+  useEffect(() => {
+    if (datasets) {
+      if (!chart.current) {
+        createChart();
+      } else {
+        setTooltip(null);
+        updateChart();
+      }
+    }
+  }, [datasets, unit, animationDuration, locale, theme]);
+
+  return (
+    <>
+      <div
+        data-tip=""
+        data-for={`${chartId}-tooltip`}
+        className={classNames(styles.chart, className)}
+        style={{ height }}
+      >
+        <canvas ref={canvas} />
+      </div>
+      <Legend chart={chart.current} />
+      <ChartTooltip chartId={chartId} tooltip={tooltip} />
+    </>
+  );
+}
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@ -0,0 +1,3 @@
+.chart {
+  position: relative;
+}
--- a/components/metrics/BrowsersTable.js
+++ b/components/metrics/BrowsersTable.js
@ -0,0 +1,17 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import MetricsTable from './MetricsTable';
+import { browserFilter } from 'lib/filters';
+
+export default function BrowsersTable({ websiteId, ...props }) {
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
+      type="browser"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      dataFilter={browserFilter}
+    />
+  );
+}
--- a/components/metrics/ChartTooltip.js
+++ b/components/metrics/ChartTooltip.js
@ -0,0 +1,26 @@
+import React from 'react';
+import Dot from 'components/common/Dot';
+import styles from './ChartTooltip.module.css';
+import ReactTooltip from 'react-tooltip';
+
+export default function ChartTooltip({ chartId, tooltip }) {
+  if (!tooltip) {
+    return null;
+  }
+
+  const { title, value, label, labelColor } = tooltip;
+
+  return (
+    <ReactTooltip id={`${chartId}-tooltip`}>
+      <div className={styles.tooltip}>
+        <div className={styles.content}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.metric}>
+            <Dot color={labelColor} />
+            {value} {label}
+          </div>
+        </div>
+      </div>
+    </ReactTooltip>
+  );
+}
--- a/components/metrics/ChartTooltip.module.css
+++ b/components/metrics/ChartTooltip.module.css
@ -0,0 +1,43 @@
+.chart {
+  position: relative;
+}
+
+.tooltip {
+  color: var(--msgColor);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--font-size-xsmall);
+  font-weight: 600;
+}
+
+.metric {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.dot {
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-right: 8px;
+  background: var(--gray50);
+}
+
+.color {
+  width: 10px;
+  height: 10px;
+}
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@ -0,0 +1,31 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { percentFilter } from 'lib/filters';
+import { FormattedMessage } from 'react-intl';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
+
+export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+
+  function renderLabel({ x }) {
+    return (
+      <div className={locale}>
+        {countryNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}
+      </div>
+    );
+  }
+
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
+      type="country"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      onDataLoad={data => onDataLoad?.(percentFilter(data))}
+      renderLabel={renderLabel}
+    />
+  );
+}
--- a/components/metrics/DataTable.js
+++ b/components/metrics/DataTable.js
@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { FixedSizeList } from 'react-window';
+import { useSpring, animated, config } from 'react-spring';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import NoData from 'components/common/NoData';
+import { formatNumber, formatLongNumber } from 'lib/format';
+import styles from './DataTable.module.css';
+
+export default function DataTable({
+  data,
+  title,
+  metric,
+  className,
+  renderLabel,
+  height,
+  animate = true,
+  virtualize = false,
+}) {
+  const [format, setFormat] = useState(true);
+  const formatFunc = format ? formatLongNumber : formatNumber;
+
+  const handleSetFormat = () => setFormat(state => !state);
+
+  const getRow = row => {
+    const { x: label, y: value, z: percent } = row;
+
+    return (
+      <AnimatedRow
+        key={label}
+        label={
+          renderLabel
+            ? renderLabel(row)
+            : label ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />
+        }
+        value={value}
+        percent={percent}
+        animate={animate && !virtualize}
+        format={formatFunc}
+        onClick={handleSetFormat}
+      />
+    );
+  };
+
+  const Row = ({ index, style }) => {
+    return <div style={style}>{getRow(data[index])}</div>;
+  };
+
+  return (
+    <div className={classNames(styles.table, className)}>
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.metric} onClick={handleSetFormat}>
+          {metric}
+        </div>
+      </div>
+      <div className={styles.body} style={{ height }}>
+        {data?.length === 0 && <NoData />}
+        {virtualize && data.length > 0 ? (
+          <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
+            {Row}
+          </FixedSizeList>
+        ) : (
+          data.map(row => getRow(row))
+        )}
+      </div>
+    </div>
+  );
+}
+
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
+  const props = useSpring({
+    width: percent,
+    y: value,
+    from: { width: 0, y: 0 },
+    config: animate ? config.default : { duration: 0 },
+  });
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>{label}</div>
+      <div className={styles.value} onClick={onClick}>
+        <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
+      </div>
+      <div className={styles.percent}>
+        <animated.div
+          className={styles.bar}
+          style={{ width: props.width.interpolate(n => `${n}%`) }}
+        />
+        <animated.span className={styles.percentValue}>
+          {props.width.interpolate(n => `${n.toFixed(0)}%`)}
+        </animated.span>
+      </div>
+    </div>
+  );
+};
--- a/components/metrics/DataTable.module.css
+++ b/components/metrics/DataTable.module.css
@ -0,0 +1,97 @@
+.table {
+  position: relative;
+  height: 100%;
+  font-size: var(--font-size-small);
+  display: grid;
+  grid-template-rows: fit-content(100%) auto;
+  overflow: hidden;
+}
+
+.body {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 40px;
+}
+
+.title {
+  display: flex;
+  font-weight: 600;
+  font-size: var(--font-size-normal);
+}
+
+.metric {
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  text-align: center;
+  width: 100px;
+  cursor: pointer;
+}
+
+.row {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+  overflow: hidden;
+}
+
+.label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 2;
+}
+
+.label a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.label a:hover {
+  color: var(--primary400);
+}
+
+.label:empty {
+  color: #b3b3b3;
+}
+
+.label:empty:before {
+  content: 'Unknown';
+}
+
+.value {
+  width: 50px;
+  text-align: right;
+  margin-right: 10px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.percent {
+  position: relative;
+  width: 50px;
+  color: var(--gray600);
+  border-left: 1px solid var(--gray600);
+  padding-left: 10px;
+  z-index: 1;
+}
+
+.bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 30px;
+  opacity: 0.1;
+  background: var(--primary400);
+  z-index: -1;
+}
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@ -0,0 +1,17 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { FormattedMessage } from 'react-intl';
+import { getDeviceMessage } from 'components/messages';
+
+export default function DevicesTable({ websiteId, ...props }) {
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
+      type="device"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      renderLabel={({ x }) => getDeviceMessage(x)}
+    />
+  );
+}
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import tinycolor from 'tinycolor2';
+import BarChart from './BarChart';
+import { getDateArray, getDateLength } from 'lib/date';
+import useFetch from 'hooks/useFetch';
+import useDateRange from 'hooks/useDateRange';
+import useTimezone from 'hooks/useTimezone';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
+
+export default function EventsChart({ websiteId, className, token }) {
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, modified } = dateRange;
+  const [timezone] = useTimezone();
+  const { query } = usePageQuery();
+  const shareToken = useShareToken();
+
+  const { data, loading } = useFetch(
+    `/api/website/${websiteId}/events`,
+    {
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        unit,
+        tz: timezone,
+        url: query.url,
+        token,
+      },
+      headers: { [TOKEN_HEADER]: shareToken?.token },
+    },
+    [modified],
+  );
+
+  const datasets = useMemo(() => {
+    if (!data) return [];
+    if (loading) return data;
+
+    const map = data.reduce((obj, { x, t, y }) => {
+      if (!obj[x]) {
+        obj[x] = [];
+      }
+
+      obj[x].push({ t, y });
+
+      return obj;
+    }, {});
+
+    Object.keys(map).forEach(key => {
+      map[key] = getDateArray(map[key], startDate, endDate, unit);
+    });
+
+    return Object.keys(map).map((key, index) => {
+      const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
+      return {
+        label: key,
+        data: map[key],
+        lineTension: 0,
+        backgroundColor: color.setAlpha(0.6).toRgbString(),
+        borderColor: color.setAlpha(0.7).toRgbString(),
+        borderWidth: 1,
+      };
+    });
+  }, [data, loading]);
+
+  function handleUpdate(chart) {
+    chart.data.datasets = datasets;
+
+    chart.update();
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <BarChart
+      chartId={`events-${websiteId}`}
+      className={className}
+      datasets={datasets}
+      unit={unit}
+      height={300}
+      records={getDateLength(startDate, endDate, unit)}
+      onUpdate={handleUpdate}
+      loading={loading}
+      stacked
+    />
+  );
+}
--- a/components/metrics/EventsChart.module.css
+++ b/components/metrics/EventsChart.module.css
@ -0,0 +1,3 @@
+.chart {
+  display: flex;
+}
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import MetricsTable from './MetricsTable';
+import Tag from 'components/common/Tag';
+import DropDown from 'components/common/DropDown';
+import { eventTypeFilter } from 'lib/filters';
+import styles from './EventsTable.module.css';
+
+const EVENT_FILTER_DEFAULT = {
+  value: 'EVENT_FILTER_DEFAULT',
+  label: <FormattedMessage id="label.all-events" defaultMessage="All events" />,
+};
+
+export default function EventsTable({ websiteId, ...props }) {
+  const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
+  const [eventTypes, setEventTypes] = useState([]);
+
+  const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
+
+  function handleDataLoad(data) {
+    setEventTypes([...new Set(data.map(({ x }) => x.split('\t')[0]))]);
+    props.onDataLoad?.(data);
+  }
+
+  return (
+    <>
+      {eventTypes?.length > 1 && (
+        <div className={styles.filter}>
+          <DropDown value={eventType} options={dropDownOptions} onChange={setEventType} />
+        </div>
+      )}
+      <MetricsTable
+        {...props}
+        title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
+        type="event"
+        metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
+        websiteId={websiteId}
+        dataFilter={eventTypeFilter}
+        filterOptions={eventType === EVENT_FILTER_DEFAULT.value ? [] : [eventType]}
+        renderLabel={({ x }) => <Label value={x} />}
+        onDataLoad={handleDataLoad}
+      />
+    </>
+  );
+}
+
+const Label = ({ value }) => {
+  const [event, label] = value.split('\t');
+  return (
+    <>
+      <Tag>{event}</Tag>
+      {label}
+    </>
+  );
+};
--- a/components/metrics/EventsTable.module.css
+++ b/components/metrics/EventsTable.module.css
@ -0,0 +1,6 @@
+.filter {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 15px;
+}
--- a/components/metrics/FilterTags.js
+++ b/components/metrics/FilterTags.js
@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+import Button from 'components/common/Button';
+import Times from 'assets/times.svg';
+import styles from './FilterTags.module.css';
+
+export default function FilterTags({ params, onClick }) {
+  if (Object.keys(params).filter(key => params[key]).length === 0) {
+    return null;
+  }
+  return (
+    <div className={classNames(styles.filters, 'col-12')}>
+      {Object.keys(params).map(key => {
+        if (!params[key]) {
+          return null;
+        }
+        return (
+          <div key={key} className={styles.tag}>
+            <Button icon={<Times />} onClick={() => onClick(key)} variant="action" iconRight>
+              {`${key}: ${params[key]}`}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/components/metrics/FilterTags.module.css
+++ b/components/metrics/FilterTags.module.css
@ -0,0 +1,14 @@
+.filters {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.tag {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.tag + .tag {
+  margin-left: 20px;
+}
--- a/components/metrics/Legend.js
+++ b/components/metrics/Legend.js
@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import Dot from 'components/common/Dot';
+import useLocale from 'hooks/useLocale';
+import styles from './Legend.module.css';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function Legend({ chart }) {
+  const { locale } = useLocale();
+  const forceUpdate = useForceUpdate();
+
+  function handleClick(index) {
+    const meta = chart.getDatasetMeta(index);
+
+    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+
+    chart.update();
+
+    forceUpdate();
+  }
+
+  if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.legend}>
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => (
+        <div
+          key={text}
+          className={classNames(styles.label, { [styles.hidden]: hidden })}
+          onClick={() => handleClick(datasetIndex)}
+        >
+          <Dot color={fillStyle} />
+          <span className={locale}>{text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/components/metrics/Legend.module.css
+++ b/components/metrics/Legend.module.css
@ -0,0 +1,21 @@
+.legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xsmall);
+  cursor: pointer;
+}
+
+.label + .label {
+  margin-left: 20px;
+}
+
+.hidden {
+  color: var(--gray400);
+}
--- a/components/metrics/MetricCard.js
+++ b/components/metrics/MetricCard.js
@ -0,0 +1,42 @@
+import React from 'react';
+import { useSpring, animated } from 'react-spring';
+import { formatNumber } from '../../lib/format';
+import styles from './MetricCard.module.css';
+
+const MetricCard = ({
+  value = 0,
+  change = 0,
+  label,
+  reverseColors = false,
+  format = formatNumber,
+}) => {
+  const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
+  const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
+
+  return (
+    <div className={styles.card}>
+      <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
+      <div className={styles.label}>
+        {label}
+        {~~change === 0 && <span className={styles.change}>{format(0)}</span>}
+        {~~change !== 0 && (
+          <animated.span
+            className={`${styles.change} ${
+              change >= 0
+                ? !reverseColors
+                  ? styles.positive
+                  : styles.negative
+                : !reverseColors
+                ? styles.negative
+                : styles.positive
+            }`}
+          >
+            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+          </animated.span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MetricCard;
--- a/Show more
+++ b/Show more