Merge pull request #1 from umami-software/master

update umami
2026-02-21 04:55:36 +01:00 · 2023-10-29 11:20:13 +01:00 · 2023-10-29 11:20:13 +01:00 · d2a3ceb5b9
commit d2a3ceb5b9
parent 25f44b84df 91b6dc5908
1238 changed files with 94021 additions and 40117 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -4,3 +4,4 @@ Dockerfile
 .gitignore
 .DS_Store
 node_modules
+.idea
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -4,12 +4,7 @@
    "es2020": true,
    "node": true
  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:import/recommended",
-    "next"
-  ],
+  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
@ -17,22 +12,30 @@
    "ecmaVersion": 11,
    "sourceType": "module"
  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next"
+  ],
+  "plugins": ["@typescript-eslint", "prettier"],
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
-          ["assets", "./assets"],
-          ["components", "./components"],
+          ["assets", "./src/assets"],
+          ["components", "./src/components"],
          ["db", "./db"],
-          ["hooks", "./hooks"],
-          ["lang", "./lang"],
-          ["lib", "./lib"],
+          ["hooks", "./src/components/hooks"],
+          ["lang", "./src/lang"],
+          ["lib", "./src/lib"],
          ["public", "./public"],
-          ["queries", "./queries"],
-          ["store", "./store"],
-          ["styles", "./styles"]
+          ["queries", "./src/queries"],
+          ["store", "./src/store"],
+          ["styles", "./src/styles"]
        ],
-        "extensions": [".ts", ".js", ".jsx", ".json"]
+        "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
      }
    }
  },
@ -42,7 +45,13 @@
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "import/no-anonymous-default-export": "off",
-    "@next/next/no-img-element": "off"
+    "import/no-named-as-default": "off",
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
  },
  "globals": {
    "React": "writable"
--- a/.github/ISSUE_TEMPLATE/1.bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/1.bug_report.yml
@ -0,0 +1,32 @@
+name: "🐛 Bug Report"
+description: Create a bug report for Umami.
+body:
+  - type: textarea
+    attributes:
+      label: Describe the Bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Database
+      description: What database are you using?
+      options:
+        - PostgreSQL
+        - MySQL
+        - Umami Cloud
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+  - type: input
+    attributes:
+      label: Which browser are you using? (if relevant)
+      description: 'For example: Chrome, Edge, Firefox, etc'
+  - type: input
+    attributes:
+      label: How are you deploying your application? (if relevant)
+      description: 'For example: Vercel, Railway, Docker, etc'
--- a/.github/ISSUE_TEMPLATE/2.feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/2.feature_request.yml
@ -0,0 +1,9 @@
+name: '✨ Feature Request'
+description: Create a feature or enhancement request for Umami.
+body:
+  - type: textarea
+    attributes:
+      label: Describe the feature or enhancement
+      description: A clear and concise description of what the feature or enhancement is.
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,6 @@
+
+blank_issues_enabled: false
+contact_links:
+  - name: "🤔 Ask a question"
+    url: https://github.com/umami-software/umami/discussions
+    about: Ask questions and discuss with other community members.
--- a/.github/stale.yml
+++ b/.github/stale.yml
@ -1,19 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - security
-  - enhancement
-  - bug
-# Label to use when marking an issue as stale
-staleLabel: wontfix
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false
--- a/.github/workflows/cd-manual.yml
+++ b/.github/workflows/cd-manual.yml
@ -18,14 +18,26 @@ jobs:
        db-type: [postgresql, mysql]

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3

-      - uses: mr-smithers-excellent/docker-build-push@v5
-        name: Build & push Docker image for ${{ matrix.db-type }}
+      - uses: mr-smithers-excellent/docker-build-push@v6
+        name: Build & push Docker image to ghcr.io for ${{ matrix.db-type }}
        with:
          image: umami
          tags: ${{ matrix.db-type }}-${{ inputs.version }}, ${{ matrix.db-type }}-latest
          buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
          registry: ghcr.io
+          multiPlatform: true
+          platform: linux/amd64,linux/arm64
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: mr-smithers-excellent/docker-build-push@v6
+        name: Build & push Docker image to docker.io for ${{ matrix.db-type }}
+        with:
+          image: umamisoftware/umami
+          tags: ${{ matrix.db-type }}-${{ inputs.version }}, ${{ matrix.db-type }}-latest
+          buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
+          registry: docker.io
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@ -3,7 +3,6 @@ name: Create docker images
 on: [create]

 jobs:
-
  build:
    name: Build, push, and deploy
    if: ${{ startsWith(github.ref, 'refs/tags/v') }}
@ -14,17 +13,29 @@ jobs:
        db-type: [postgresql, mysql]

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3

      - name: Set env
        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV

-      - uses: mr-smithers-excellent/docker-build-push@v5
-        name: Build & push Docker image for ${{ matrix.db-type }}
+      - uses: mr-smithers-excellent/docker-build-push@v6
+        name: Build & push Docker image to ghcr.io for ${{ matrix.db-type }}
        with:
          image: umami
          tags: ${{ matrix.db-type }}-${{ env.RELEASE_VERSION }}, ${{ matrix.db-type }}-latest
          buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
          registry: ghcr.io
+          multiPlatform: true
+          platform: linux/amd64,linux/arm64
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: mr-smithers-excellent/docker-build-push@v6
+        name: Build & push Docker image to docker.io for ${{ matrix.db-type }}
+        with:
+          image: umamisoftware/umami
+          tags: ${{ matrix.db-type }}-${{ env.RELEASE_VERSION }}, ${{ matrix.db-type }}-latest
+          buildArgs: DATABASE_TYPE=${{ matrix.db-type }}
+          registry: docker.io
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -16,19 +16,19 @@ jobs:
    strategy:
      matrix:
        include:
-        - node-version: 14.x
+        - node-version: 16.x
          db-type: postgresql
-        - node-version: 14.x
+        - node-version: 16.x
          db-type: mysql
-        - node-version: 16.x
+        - node-version: 18.x
          db-type: postgresql
-        - node-version: 16.x
+        - node-version: 18.x
          db-type: mysql

    steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
--- a/.github/workflows/stale-issues.yml
+++ b/.github/workflows/stale-issues.yml
@ -0,0 +1,24 @@
+name: Close stale issues
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-issue-stale: 60
+          days-before-issue-close: 7
+          stale-issue-label: 'stale'
+          stale-issue-message: 'This issue is stale because it has been open for 60 days with no activity.'
+          close-issue-message: 'This issue was closed because it has been inactive for 7 days since being marked as stale.'
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          operations-per-run: 200
+          ascending: true
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -1,8 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js

 # testing
@ -15,15 +15,17 @@

 # production
 /build
-/public/umami.js
-/public/geo
+/public/script.js
+/geo
+/dist

 # misc
 .DS_Store
 .idea
 *.iml
 *.log
-/.vscode/
+.vscode
+.tool-versions

 # debug
 npm-debug.log*
@ -32,9 +34,7 @@ yarn-error.log*

 # local env files
 .env
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*

 *.dev.yml

--- a/.prettierignore
+++ b/.prettierignore
@ -1 +1 @@
-/public/
+/public/script.js
--- a/12
+++ b/12
@ -1,16 +1,19 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:18-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json yarn.lock ./
+# Add yarn timeout to handle slow CPU when Github Actions
+RUN yarn config set network-timeout 300000
 RUN yarn install --frozen-lockfile

 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+COPY docker/middleware.js ./src

 ARG DATABASE_TYPE
 ARG BASE_PATH
@ -23,7 +26,7 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN yarn build-docker

 # Production image, copy all the files and run next
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 WORKDIR /app

 ENV NODE_ENV production
@ -32,7 +35,7 @@ ENV NEXT_TELEMETRY_DISABLED 1
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs

-RUN yarn add npm-run-all dotenv prisma
+RUN yarn add npm-run-all dotenv prisma semver

 # You only need to copy next.config.js if you are NOT using the default configuration
 COPY --from=builder /app/next.config.js .
@ -50,6 +53,7 @@ USER nextjs

 EXPOSE 3000

+ENV HOSTNAME 0.0.0.0
 ENV PORT 3000

 CMD ["yarn", "start-docker"]
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2020 Mike Cao <mike@mikecao.com>
+Copyright (c) 2022 Umami Software, Inc. <hello@umami.is>

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -10,7 +10,7 @@ A detailed getting started guide can be found at [https://umami.is/docs/](https:

 ### Requirements

- A server with Node.js version 12 or newer
+- A server with Node.js version 16.13 or newer
 - A database. Umami supports [MySQL](https://www.mysql.com/) and [Postgresql](https://www.postgresql.org/) databases.

 ### Install Yarn
@ -36,6 +36,7 @@ DATABASE_URL=connection-url
 ```

 The connection url is in the following format:
+
 ```
 postgresql://username:mypassword@localhost:5432/mydb

@ -48,7 +49,7 @@ mysql://username:mypassword@localhost:3306/mydb
 yarn build
 ```

-The build step will also create tables in your database if you ae installing for the first time. It will also create a login account with username **admin** and password **umami**.
+The build step will also create tables in your database if you ae installing for the first time. It will also create a login user with username **admin** and password **umami**.

 ### Start the application

@ -65,17 +66,19 @@ or change the [port](https://nextjs.org/docs/api-reference/cli#production) to se
 To build the umami container and start up a Postgres database, run:

 ```bash
-docker compose up
+docker compose up -d
 ```

 Alternatively, to pull just the Umami Docker image with PostgreSQL support:
+
 ```bash
-docker pull docker.umami.dev/umami-software/umami:postgresql-latest
+docker pull ghcr.io/umami-software/umami:postgresql-latest
 ```

 Or with MySQL support:
+
 ```bash
-docker pull docker.umami.dev/umami-software/umami:mysql-latest
+docker pull ghcr.io/umami-software/umami:mysql-latest
 ```

 ## Getting updates
--- a/app.json
+++ b/app.json
@ -6,7 +6,7 @@
  "repository": "https://github.com/umami-software/umami",
  "addons": ["heroku-postgresql"],
  "env": {
-    "HASH_SALT": {
+    "APP_SECRET": {
      "description": "Used to generate unique values for your installation",
      "required": true,
      "generator": "secret"
--- a/assets/arrow-right.svg
+++ b/assets/arrow-right.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>
--- a/assets/arrow-up-right-from-square.svg
+++ b/assets/arrow-up-right-from-square.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M392 320C378.75 320 368 330.75 368 344V456C368 460.406 364.406 464 360 464H56C51.594 464 48 460.406 48 456V152C48 147.594 51.594 144 56 144H168C181.25 144 192 133.25 192 120S181.25 96 168 96H56C25.125 96 0 121.125 0 152V456C0 486.875 25.125 512 56 512H360C390.875 512 416 486.875 416 456V344C416 330.75 405.25 320 392 320ZM488 0H320C306.75 0 296 10.75 296 24S306.75 48 320 48H430.062L183.031 295.031C173.656 304.406 173.656 319.594 183.031 328.969C187.719 333.656 193.844 336 200 336S212.281 333.656 216.969 328.969L464 81.938V192C464 205.25 474.75 216 488 216S512 205.25 512 192V24C512 10.75 501.25 0 488 0Z"/></svg>
--- a/assets/bars.svg
+++ b/assets/bars.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M424 392H24C10.8 392 0 402.8 0 416V416C0 429.2 10.8 440 24 440H424C437.2 440 448 429.2 448 416V416C448 402.8 437.2 392 424 392ZM424 72H24C10.8 72 0 82.8 0 96V96C0 109.2 10.8 120 24 120H424C437.2 120 448 109.2 448 96V96C448 82.8 437.2 72 424 72ZM424 232H24C10.8 232 0 242.8 0 256V256C0 269.2 10.8 280 24 280H424C437.2 280 448 269.2 448 256V256C448 242.8 437.2 232 424 232Z"/></svg>
--- a/assets/chart-bar.svg
+++ b/assets/chart-bar.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z"/></svg>
--- a/assets/check.svg
+++ b/assets/check.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"/></svg>
--- a/assets/chevron-down.svg
+++ b/assets/chevron-down.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/></svg>
--- a/assets/code.svg
+++ b/assets/code.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M234.8 511.7L196 500.4c-4.2-1.2-6.7-5.7-5.5-9.9L331.3 5.8c1.2-4.2 5.7-6.7 9.9-5.5L380 11.6c4.2 1.2 6.7 5.7 5.5 9.9L244.7 506.2c-1.2 4.3-5.6 6.7-9.9 5.5zm-83.2-121.1l27.2-29c3.1-3.3 2.8-8.5-.5-11.5L72.2 256l106.1-94.1c3.4-3 3.6-8.2.5-11.5l-27.2-29c-3-3.2-8.1-3.4-11.3-.4L2.5 250.2c-3.4 3.2-3.4 8.5 0 11.7L140.3 391c3.2 3 8.2 2.8 11.3-.4zm284.1.4l137.7-129.1c3.4-3.2 3.4-8.5 0-11.7L435.7 121c-3.2-3-8.3-2.9-11.3.4l-27.2 29c-3.1 3.3-2.8 8.5.5 11.5L503.8 256l-106.1 94.1c-3.4 3-3.6 8.2-.5 11.5l27.2 29c3.1 3.2 8.1 3.4 11.3.4z"/></svg>
--- a/assets/ellipsis-h.svg
+++ b/assets/ellipsis-h.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"/></svg>
--- a/assets/exclamation-triangle.svg
+++ b/assets/exclamation-triangle.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M270.2 160h35.5c3.4 0 6.1 2.8 6 6.2l-7.5 196c-.1 3.2-2.8 5.8-6 5.8h-20.5c-3.2 0-5.9-2.5-6-5.8l-7.5-196c-.1-3.4 2.6-6.2 6-6.2zM288 388c-15.5 0-28 12.5-28 28s12.5 28 28 28 28-12.5 28-28-12.5-28-28-28zm281.5 52L329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.8 0 60-40 41.5-72zM528 480H48c-12.3 0-20-13.3-13.9-24l240-416c6.1-10.6 21.6-10.7 27.7 0l240 416c6.2 10.6-1.5 24-13.8 24z"/></svg>
--- a/assets/external-link.svg
+++ b/assets/external-link.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>
--- a/assets/gear.svg
+++ b/assets/gear.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.265 315.978C504.265 307.326 499.658 299.134 491.906 294.586L458.998 275.615C459.643 269.099 459.966 262.549 459.966 256S459.643 242.901 458.998 236.385L491.906 217.414C499.658 212.866 504.265 204.674 504.265 196.022C504.265 174.755 454.947 67.846 419.746 67.846C415.502 67.846 411.236 68.939 407.379 71.203L374.599 90.172C363.888 82.43 352.533 75.848 340.531 70.428V32.488C340.531 21.262 333.047 11.453 322.205 8.613C300.654 2.871 278.425 0 256.181 0C233.935 0 211.675 2.871 190.06 8.613C179.218 11.453 171.734 21.262 171.734 32.488V70.428C159.732 75.848 148.377 82.43 137.666 90.172L104.886 71.203C101.031 68.939 96.763 67.846 92.519 67.846C92.517 67.846 92.514 67.846 92.512 67.846C60.048 67.846 8 169.591 8 196.022C8 204.674 12.607 212.866 20.359 217.414L53.267 236.385C52.622 242.901 52.299 249.451 52.299 256S52.622 269.099 53.267 275.615L20.359 294.586C12.607 299.134 8 307.326 8 315.978C8 337.245 57.318 444.154 92.519 444.154C96.763 444.154 101.029 443.061 104.886 440.797L137.666 421.828C148.377 429.57 159.732 436.152 171.734 441.572V479.512C171.734 490.738 179.218 500.547 190.06 503.387C211.611 509.129 233.84 512 256.084 512C278.33 512 300.59 509.129 322.205 503.387C333.047 500.547 340.531 490.738 340.531 479.512V441.572C352.533 436.152 363.888 429.57 374.599 421.828L407.379 440.797C411.234 443.061 415.502 444.154 419.746 444.154C452.209 444.154 504.265 342.423 504.265 315.978ZM415.361 389.959C391.561 376.186 404.101 383.444 371.705 364.695C329.649 395.09 339.375 389.426 292.531 410.582V460.82C279.236 463.161 266.948 464 256.093 464C240.669 464 228.14 462.306 219.734 460.824V410.582C172.779 389.376 182.552 395.044 140.56 364.695C108.748 383.105 117.896 377.811 96.924 389.949C81.181 371.256 68.849 349.895 60.517 326.84C81.643 314.663 72.361 320.014 104.088 301.723C101.549 276.083 100.277 266.079 100.277 256.04C100.277 246.018 101.545 235.96 104.088 210.277C72.198 191.892 81.571 197.295 60.504 185.152C68.818 162.109 81.187 140.686 96.904 122.041C120.704 135.814 108.164 128.556 140.56 147.305C182.616 116.91 172.89 122.574 219.734 101.418V51.18C233.029 48.839 245.318 48 256.172 48C271.597 48 284.126 49.694 292.531 51.176V101.418C339.486 122.624 329.713 116.956 371.705 147.305C405.655 127.657 394.228 134.27 415.343 122.051C431.084 140.744 443.416 162.105 451.748 185.16C430.622 197.337 439.904 191.986 408.177 210.277C410.716 235.917 411.988 245.921 411.988 255.96C411.988 265.982 410.72 276.04 408.177 301.723C440.067 320.108 430.694 314.705 451.761 326.848C443.447 349.891 431.078 371.314 415.361 389.959ZM256.133 160C203.258 160 160.133 203.125 160.133 256S203.258 352 256.133 352S352.133 308.875 352.133 256S309.008 160 256.133 160ZM256.133 304C229.666 304 208.133 282.467 208.133 256S229.666 208 256.133 208S304.133 229.533 304.133 256S282.599 304 256.133 304Z "></path></svg>
--- a/assets/list-ul.svg
+++ b/assets/list-ul.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 368a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 24H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
--- a/assets/logo.svg
+++ b/assets/logo.svg
@ -1,2 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11" width="20" height="20">
-    <circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></svg>
--- a/assets/moon.svg
+++ b/assets/moon.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>
--- a/assets/pen.svg
+++ b/assets/pen.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z"/></svg>
--- a/assets/plus.svg
+++ b/assets/plus.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>
--- a/assets/sun.svg
+++ b/assets/sun.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>
--- a/assets/times.svg
+++ b/assets/times.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
--- a/assets/trash.svg
+++ b/assets/trash.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z"/></svg>
--- a/assets/user.svg
+++ b/assets/user.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1652 1652"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M1587.07,504.47A828.56,828.56,0,1,0,1652,826,823.13,823.13,0,0,0,1587.07,504.47ZM826,1577a747.29,747.29,0,0,1-464.48-161.26,39.94,39.94,0,0,0,2.8-11.35,458.82,458.82,0,0,1,34.29-135.74,464.15,464.15,0,0,1,854.78,0,458.82,458.82,0,0,1,34.29,135.74,39.94,39.94,0,0,0,2.8,11.35A747.29,747.29,0,0,1,826,1577ZM719.81,866.57A274,274,0,1,1,826,888,272.1,272.1,0,0,1,719.81,866.57Zm641.28,485.87c-36.11-201.1-182.78-363.82-374.86-423,114.28-58.37,192.53-177.22,192.53-314.35,0-194.83-157.94-352.76-352.76-352.76S473.24,420.29,473.24,615.12c0,137.13,78.25,256,192.53,314.35-192.08,59.15-338.75,221.87-374.86,423C157.46,1216.81,75,1030.86,75,826,75,411.9,411.9,75,826,75s751,336.9,751,751C1577,1030.86,1494.54,1216.81,1361.09,1352.44Z"/></g></g></svg>
--- a/assets/xmark.svg
+++ b/assets/xmark.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M312.973 375.032C322.342 384.401 322.342 399.604 312.973 408.973S288.401 418.342 279.032 408.973L160 289.941L40.968 408.973C31.599 418.342 16.396 418.342 7.027 408.973S-2.342 384.401 7.027 375.032L126.059 256L7.027 136.968C-2.342 127.599 -2.342 112.396 7.027 103.027S31.599 93.658 40.968 103.027L160 222.059L279.032 103.027C288.401 93.658 303.604 93.658 312.973 103.027S322.342 127.599 312.973 136.968L193.941 256L312.973 375.032Z"/></svg>
--- a/components/common/Button.js
+++ b/components/common/Button.js
@ -1,63 +0,0 @@
-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}
-      data-offset={JSON.stringify({ left: 10 })}
-      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
@ -1,102 +0,0 @@
-.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
@ -1,42 +0,0 @@
-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
@ -1,31 +0,0 @@
-.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
@ -1,273 +0,0 @@
-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 dateLocale = getDateLocale(locale);
-  const weekStartsOn = dateLocale?.options?.weekStartsOn || 0;
-  const startWeek = startOfWeek(date, {
-    locale: dateLocale,
-    weekStartsOn,
-  });
-  const startMonth = startOfMonth(date);
-  const startDay = subDays(startMonth, startMonth.getDay() - weekStartsOn);
-  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 < 42; 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
@ -1,111 +0,0 @@
-.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
@ -1,39 +0,0 @@
-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
@ -1,30 +0,0 @@
-.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
@ -1,37 +0,0 @@
-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
@ -1,138 +0,0 @@
-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 { dateFormat } from 'lib/date';
-import Calendar from 'assets/calendar-alt.svg';
-import Icon from './Icon';
-
-export 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.yesterday" defaultMessage="Yesterday" />,
-    value: '-1day',
-  },
-  {
-    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.all-time" defaultMessage="All time" />,
-    value: 'all',
-    divider: true,
-  },
-  {
-    label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
-    value: 'custom',
-    divider: true,
-  },
-];
-
-function DateFilter({ value, startDate, endDate, onChange, className, options }) {
-  const [showPicker, setShowPicker] = useState(false);
-  const displayValue =
-    value === 'custom' ? (
-      <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
-    ) : (
-      value
-    );
-
-  async function handleChange(value) {
-    if (value === 'custom') {
-      setShowPicker(true);
-      return;
-    }
-    onChange(value);
-  }
-
-  function handlePickerChange(value) {
-    setShowPicker(false);
-    onChange(value);
-  }
-
-  return (
-    <>
-      <DropDown
-        className={className}
-        value={displayValue}
-        options={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
@ -1,26 +0,0 @@
-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
@ -1,22 +0,0 @@
-.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
@ -1,64 +0,0 @@
-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
@ -1,28 +0,0 @@
-.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
@ -1,22 +0,0 @@
-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
@ -1,15 +0,0 @@
-.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
@ -1,14 +0,0 @@
-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/EventDataButton.js
+++ b/components/common/EventDataButton.js
@ -1,48 +0,0 @@
-import List from 'assets/list-ul.svg';
-import Modal from 'components/common/Modal';
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import Button from './Button';
-import EventDataForm from 'components/forms/EventDataForm';
-import styles from './EventDataButton.module.css';
-
-function EventDataButton({ websiteId }) {
-  const [showEventData, setShowEventData] = useState(false);
-
-  function handleClick() {
-    if (!showEventData) {
-      setShowEventData(true);
-    }
-  }
-
-  function handleClose() {
-    setShowEventData(false);
-  }
-
-  return (
-    <>
-      <Button
-        icon={<List />}
-        tooltip={<FormattedMessage id="label.event-data" defaultMessage="Event" />}
-        tooltipId="button-event"
-        size="small"
-        onClick={handleClick}
-        className={styles.button}
-      >
-        Event Data
-      </Button>
-      {showEventData && (
-        <Modal title={<FormattedMessage id="label.event-data" defaultMessage="Query Event Data" />}>
-          <EventDataForm websiteId={websiteId} onClose={handleClose} />
-        </Modal>
-      )}
-    </>
-  );
-}
-
-EventDataButton.propTypes = {
-  websiteId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-export default EventDataButton;
--- a/components/common/EventDataButton.module.css
+++ b/components/common/EventDataButton.module.css
@ -1,3 +0,0 @@
-.button {
-  width: fit-content;
-}
--- a/components/common/Favicon.module.css
+++ b/components/common/Favicon.module.css
@ -1,3 +0,0 @@
-.favicon {
-  margin-right: 8px;
-}
--- a/components/common/FilterButtons.js
+++ b/components/common/FilterButtons.js
@ -1,25 +0,0 @@
-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/FilterLink.js
+++ b/components/common/FilterLink.js
@ -1,34 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Link from 'next/link';
-import { safeDecodeURI } from 'next-basics';
-import usePageQuery from 'hooks/usePageQuery';
-import External from 'assets/arrow-up-right-from-square.svg';
-import Icon from './Icon';
-import styles from './FilterLink.module.css';
-
-export default function FilterLink({ id, value, label, externalUrl }) {
-  const { resolve, query } = usePageQuery();
-  const active = query[id] !== undefined;
-  const selected = query[id] === value;
-
-  return (
-    <div className={styles.row}>
-      <Link href={resolve({ [id]: value })} replace>
-        <a
-          className={classNames(styles.label, {
-            [styles.inactive]: active && !selected,
-            [styles.active]: active && selected,
-          })}
-        >
-          {safeDecodeURI(label || value)}
-        </a>
-      </Link>
-      {externalUrl && (
-        <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
-          <Icon icon={<External />} className={styles.icon} />
-        </a>
-      )}
-    </div>
-  );
-}
--- a/components/common/HamburgerButton.js
+++ b/components/common/HamburgerButton.js
@ -1,44 +0,0 @@
-import Button from 'components/common/Button';
-import XMark from 'assets/xmark.svg';
-import Bars from 'assets/bars.svg';
-import { useState } from 'react';
-import styles from './HamburgerButton.module.css';
-import MobileMenu from './MobileMenu';
-import { FormattedMessage } from 'react-intl';
-
-const menuItems = [
-  {
-    label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
-    value: '/dashboard',
-  },
-  { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
-  { label: <FormattedMessage id="label.settings" defaultMessage="Settings" />, value: '/settings' },
-  {
-    label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
-    value: '/settings/profile',
-  },
-  { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: '/logout' },
-];
-
-export default function HamburgerButton() {
-  const [active, setActive] = useState(false);
-
-  function handleClick() {
-    setActive(state => !state);
-  }
-
-  function handleClose() {
-    setActive(false);
-  }
-
-  return (
-    <>
-      <Button
-        className={styles.button}
-        icon={active ? <XMark /> : <Bars />}
-        onClick={handleClick}
-      />
-      {active && <MobileMenu items={menuItems} onClose={handleClose} />}
-    </>
-  );
-}
--- a/components/common/Icon.js
+++ b/components/common/Icon.js
@ -1,29 +0,0 @@
-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
@ -1,35 +0,0 @@
-.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
@ -1,35 +0,0 @@
-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, onClick, ...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,
-        })}
-        onClick={onClick}
-      >
-        {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
@ -1,42 +0,0 @@
-a.link,
-a.link:active,
-a.link:visited {
-  position: relative;
-  color: var(--gray900);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-}
-
-a.link span {
-  border-bottom: 2px solid transparent;
-}
-
-a.link:hover span {
-  border-bottom: 2px solid var(--primary400);
-}
-
-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
@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Loading.module.css';
-
-function Loading({ className, overlay = false }) {
-  return (
-    <div className={classNames(styles.loading, { [styles.overlay]: overlay }, className)}>
-      <div />
-      <div />
-      <div />
-    </div>
-  );
-}
-
-Loading.propTypes = {
-  className: PropTypes.string,
-  overlay: PropTypes.bool,
-};
-
-export default Loading;
--- a/components/common/Loading.module.css
+++ b/components/common/Loading.module.css
@ -1,55 +0,0 @@
-@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.overlay {
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background: var(--gray400);
-  opacity: 0.4;
-}
-
-.loading div {
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  background: var(--gray400);
-  animation: blink 1.4s infinite;
-  animation-fill-mode: both;
-}
-
-.loading.overlay div {
-  background: var(--gray900);
-}
-
-.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
@ -1,70 +0,0 @@
-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
@ -1,51 +0,0 @@
-.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
@ -1,87 +0,0 @@
-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,
-  buttonVariant,
-  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={buttonVariant}
-      >
-        {!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
@ -1,20 +0,0 @@
-.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/MobileMenu.js
+++ b/components/common/MobileMenu.js
@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import Link from './Link';
-import Button from './Button';
-import XMark from 'assets/xmark.svg';
-import styles from './MobileMenu.module.css';
-
-export default function MobileMenu({ items = [], onClose }) {
-  return (
-    <div className={classNames(styles.menu, 'container')}>
-      <div className={styles.header}>
-        <Button icon={<XMark />} onClick={onClose} />
-      </div>
-      <div className={styles.items}>
-        {items.map(({ label, value }) => (
-          <Link key={value} href={value} className={styles.item} onClick={onClose}>
-            {label}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/components/common/MobileMenu.module.css
+++ b/components/common/MobileMenu.module.css
@ -1,41 +0,0 @@
-.menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--gray50);
-  overflow: auto;
-}
-
-.items {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.item {
-  font-size: var(--font-size-large);
-}
-
-.item + .item {
-  margin-top: 20px;
-}
-
-.item:last-child {
-  margin-top: 60px;
-}
-
-.header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 100px;
-  padding: 0 30px;
-}
--- a/components/common/Modal.js
+++ b/components/common/Modal.js
@ -1,26 +0,0 @@
-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
@ -1,46 +0,0 @@
-.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
@ -1,47 +0,0 @@
-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
@ -1,22 +0,0 @@
-.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
@ -1,19 +0,0 @@
-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/OverflowText.js
+++ b/components/common/OverflowText.js
@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ReactTooltip from 'react-tooltip';
-
-import styles from './OverflowText.module.css';
-
-const OverflowText = ({ children, tooltipId }) => {
-  const measureEl = useRef();
-  const [isOverflown, setIsOverflown] = useState(false);
-
-  const measure = useCallback(
-    el => {
-      if (!el) return;
-      setIsOverflown(el.scrollWidth > el.clientWidth);
-    },
-    [setIsOverflown],
-  );
-
-  // Do one measure on mount
-  useEffect(() => {
-    measure(measureEl.current);
-  }, [measure]);
-
-  // Set up resize listener for subsequent measures
-  useEffect(() => {
-    if (!measureEl.current) return;
-
-    // Destructure ref in case it changes out from under us
-    const el = measureEl.current;
-
-    if ('ResizeObserver' in global) {
-      // Ideally, we have access to ResizeObservers
-      const observer = new ResizeObserver(() => {
-        measure(el);
-      });
-      observer.observe(el);
-      return () => observer.unobserve(el);
-    } else {
-      // Otherwise, fall back to measuring on window resizes
-      const handler = () => measure(el);
-
-      window.addEventListener('resize', handler, { passive: true });
-      return () => window.removeEventListener('resize', handler, { passive: true });
-    }
-  });
-
-  return (
-    <span
-      ref={measureEl}
-      data-tip={children.toString()}
-      data-effect="solid"
-      data-for={tooltipId}
-      className={styles.root}
-    >
-      {children}
-      {isOverflown && <ReactTooltip id={tooltipId}>{children}</ReactTooltip>}
-    </span>
-  );
-};
-
-OverflowText.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  tooltipId: PropTypes.string.isRequired,
-};
-
-export default OverflowText;
--- a/components/common/OverflowText.module.css
+++ b/components/common/OverflowText.module.css
@ -1,6 +0,0 @@
-.root {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@ -1,47 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import useStore from 'store/queries';
-import { setDateRange } from 'store/websites';
-import Button from './Button';
-import Refresh from 'assets/redo.svg';
-import Dots from 'assets/ellipsis-h.svg';
-import useDateRange from 'hooks/useDateRange';
-
-function RefreshButton({ websiteId }) {
-  const [dateRange] = useDateRange(websiteId);
-  const [loading, setLoading] = useState(false);
-  const selector = useCallback(state => state[`/websites/${websiteId}/stats`], [websiteId]);
-  const completed = useStore(selector);
-
-  function handleClick() {
-    if (!loading && dateRange) {
-      setLoading(true);
-      if (/^[\d]+/.test(dateRange.value)) {
-        setDateRange(websiteId, dateRange.value);
-      } else {
-        setDateRange(websiteId, dateRange);
-      }
-    }
-  }
-
-  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
@ -1,90 +0,0 @@
-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, label, render, className, style, cell }, index) => (
-      <div
-        key={`${key}-${index}`}
-        className={classNames(styles.cell, className, cell?.className)}
-        style={{ ...style, ...cell?.style }}
-      >
-        {label && <label>{label}</label>}
-        {render ? render(row) : row[key]}
-      </div>
-    ))}
-  </div>
-);
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@ -1,55 +0,0 @@
-.table {
-  display: flex;
-  flex-direction: column;
-}
-
-.table label {
-  display: none;
-  font-size: var(--font-size-xsmall);
-  font-weight: bold;
-}
-
-.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;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-@media only screen and (max-width: 992px) {
-  .table label {
-    display: block;
-  }
-
-  .header {
-    display: none;
-  }
-
-  .row {
-    flex-direction: column;
-  }
-
-  .cell {
-    margin-bottom: 20px;
-  }
-}
--- a/components/common/Tag.js
+++ b/components/common/Tag.js
@ -1,15 +0,0 @@
-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
@ -1,6 +0,0 @@
-.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
@ -1,35 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import { useSpring, animated } from 'react-spring';
-import Icon from 'components/common/Icon';
-import Close from 'assets/times.svg';
-import styles from './Toast.module.css';
-
-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
@ -1,25 +0,0 @@
-.toast {
-  position: fixed;
-  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
@ -1,58 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { setItem } from 'next-basics';
-import ButtonLayout from 'components/layout/ButtonLayout';
-import useStore, { checkVersion } from 'store/version';
-import { REPO_URL, VERSION_CHECK } from 'lib/constants';
-import Button from './Button';
-import styles from './UpdateNotice.module.css';
-
-export default function UpdateNotice() {
-  const { latest, checked, hasUpdate, releaseUrl } = useStore();
-  const [dismissed, setDismissed] = useState(false);
-
-  const updateCheck = useCallback(() => {
-    setItem(VERSION_CHECK, { version: latest, time: Date.now() });
-  }, [latest]);
-
-  function handleViewClick() {
-    updateCheck();
-    setDismissed(true);
-    open(releaseUrl || REPO_URL, '_blank');
-  }
-
-  function handleDismissClick() {
-    updateCheck();
-    setDismissed(true);
-  }
-
-  useEffect(() => {
-    if (!checked) {
-      checkVersion();
-    }
-  }, [checked]);
-
-  if (!hasUpdate || dismissed) {
-    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 className={styles.buttons}>
-        <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
@ -1,18 +0,0 @@
-.notice {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 20px;
-}
-
-.message {
-  font-size: var(--font-size-small);
-  font-weight: 600;
-  flex: 1;
-  text-align: center;
-  margin-right: 20px;
-}
-
-.buttons {
-  flex: 0;
-}
--- a/components/forms/AccountEditForm.js
+++ b/components/forms/AccountEditForm.js
@ -1,89 +0,0 @@
-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 useApi from 'hooks/useApi';
-
-const initialValues = {
-  username: '',
-  password: '',
-};
-
-const validate = ({ id, username, password }) => {
-  const errors = {};
-
-  if (!username) {
-    errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
-  }
-  if (!id && !password) {
-    errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
-  }
-
-  return errors;
-};
-
-export default function AccountEditForm({ values, onSave, onClose }) {
-  const { post } = useApi();
-  const [message, setMessage] = useState();
-
-  const handleSubmit = async values => {
-    const { id } = values;
-    const { ok, data } = await post(id ? `/accounts/${id}` : '/accounts', 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
@ -1,107 +0,0 @@
-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 useApi from 'hooks/useApi';
-import useUser from 'hooks/useUser';
-
-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 } = useApi();
-  const [message, setMessage] = useState();
-  const { user } = useUser();
-
-  const handleSubmit = async values => {
-    const { ok, error } = await post(`/accounts/${user.accountUuid}/password`, values);
-
-    if (ok) {
-      onSave();
-    } else {
-      setMessage(
-        error || <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
@ -1,83 +0,0 @@
-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/DeleteForm.js
+++ b/components/forms/DeleteForm.js
@ -1,105 +0,0 @@
-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 Loading from 'components/common/Loading';
-import useApi from 'hooks/useApi';
-
-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 } = useApi();
-  const [message, setMessage] = useState();
-  const [deleting, setDeleting] = useState(false);
-
-  const handleSubmit = async ({ type, id }) => {
-    setDeleting(true);
-
-    const { ok, data } = await del(`/${type}/${id}`);
-
-    if (ok) {
-      onSave();
-    } else {
-      setMessage(
-        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
-      );
-
-      setDeleting(false);
-    }
-  };
-
-  return (
-    <FormLayout>
-      {deleting && <Loading overlay />}
-      <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/EventDataForm.js
+++ b/components/forms/EventDataForm.js
@ -1,262 +0,0 @@
-import classNames from 'classnames';
-import Button from 'components/common/Button';
-import DateFilter from 'components/common/DateFilter';
-import DropDown from 'components/common/DropDown';
-import FormLayout, {
-  FormButtons,
-  FormError,
-  FormMessage,
-  FormRow,
-} from 'components/layout/FormLayout';
-import DataTable from 'components/metrics/DataTable';
-import FilterTags from 'components/metrics/FilterTags';
-import { Field, Form, Formik } from 'formik';
-import useApi from 'hooks/useApi';
-import useDateRange from 'hooks/useDateRange';
-import { useState, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
-import styles from './EventDataForm.module.css';
-import useTimezone from 'hooks/useTimezone';
-
-export const filterOptions = [
-  { label: 'Count', value: 'count' },
-  { label: 'Average', value: 'avg' },
-  { label: 'Minimum', value: 'min' },
-  { label: 'Maximum', value: 'max' },
-  { label: 'Sum', value: 'sum' },
-];
-
-export const dateOptions = [
-  { 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.yesterday" defaultMessage="Yesterday" />,
-    value: '-1day',
-  },
-  {
-    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,
-  },
-];
-
-export default function EventDataForm({ websiteId, onClose, className }) {
-  const { post } = useApi();
-  const [message, setMessage] = useState();
-  const [columns, setColumns] = useState({});
-  const [filters, setFilters] = useState({});
-  const [data, setData] = useState([]);
-  const [dateRange, setDateRange] = useDateRange('report');
-  const { startDate, endDate, value } = dateRange;
-  const [timezone] = useTimezone();
-  const [isValid, setIsValid] = useState(false);
-
-  useEffect(() => {
-    if (Object.keys(columns).length > 0) {
-      setIsValid(true);
-    } else {
-      setIsValid(false);
-    }
-  }, [columns]);
-
-  const handleAddTag = (value, list, setState, resetForm) => {
-    setState({ ...list, [`${value.field}`]: value.value });
-    resetForm();
-  };
-
-  const handleRemoveTag = (value, list, setState) => {
-    const newList = { ...list };
-
-    delete newList[`${value}`];
-
-    setState(newList);
-  };
-
-  const handleSubmit = async () => {
-    const params = {
-      website_id: websiteId,
-      start_at: +startDate,
-      end_at: +endDate,
-      timezone,
-      columns,
-      filters,
-    };
-
-    const { ok, data } = await post(`/websites/${websiteId}/eventdata`, params);
-
-    if (!ok) {
-      setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
-      setData([]);
-    } else {
-      setData(data);
-      setMessage(null);
-    }
-  };
-
-  return (
-    <>
-      <FormMessage>{message}</FormMessage>
-      <div className={classNames(styles.container, className)}>
-        <div className={styles.form}>
-          <FormLayout>
-            <div className={styles.filters}>
-              <FormRow>
-                <label htmlFor="date-range">
-                  <FormattedMessage id="label.date-range" defaultMessage="Date Range" />
-                </label>
-                <DateFilter
-                  value={value}
-                  startDate={startDate}
-                  endDate={endDate}
-                  onChange={setDateRange}
-                  options={dateOptions}
-                />
-              </FormRow>
-            </div>
-            <div className={styles.filters}>
-              <Formik
-                initialValues={{ field: '', value: '' }}
-                onSubmit={(value, { resetForm }) =>
-                  handleAddTag(value, columns, setColumns, resetForm)
-                }
-              >
-                {({ values, setFieldValue }) => (
-                  <Form>
-                    <FormRow>
-                      <label htmlFor="field">
-                        <FormattedMessage id="label.field-name" defaultMessage="Field Name" />
-                      </label>
-                      <div>
-                        <Field name="field" type="text" />
-                        <FormError name="field" />
-                      </div>
-                    </FormRow>
-                    <FormRow>
-                      <label htmlFor="value">
-                        <FormattedMessage id="label.type" defaultMessage="Type" />
-                      </label>
-                      <div>
-                        <DropDown
-                          value={values.value}
-                          onChange={value => setFieldValue('value', value)}
-                          className={styles.dropdown}
-                          name="value"
-                          options={filterOptions}
-                        />
-                        <FormError name="value" />
-                      </div>
-                    </FormRow>
-                    <FormButtons className={styles.formButtons}>
-                      <Button
-                        variant="action"
-                        type="submit"
-                        disabled={!values.field || !values.value}
-                      >
-                        <FormattedMessage id="label.add-column" defaultMessage="Add Column" />
-                      </Button>
-                    </FormButtons>
-                  </Form>
-                )}
-              </Formik>
-              <FilterTags
-                className={styles.filterTag}
-                params={columns}
-                onClick={value => handleRemoveTag(value, columns, setColumns)}
-              />
-            </div>
-            <div className={styles.filters}>
-              <Formik
-                initialValues={{ field: '', value: '' }}
-                onSubmit={(value, { resetForm }) =>
-                  handleAddTag(value, filters, setFilters, resetForm)
-                }
-              >
-                {({ values }) => (
-                  <Form>
-                    <FormRow>
-                      <label htmlFor="field">
-                        <FormattedMessage id="label.field-name" defaultMessage="Field Name" />
-                      </label>
-                      <div>
-                        <Field name="field" type="text" />
-                        <FormError name="field" />
-                      </div>
-                    </FormRow>
-                    <FormRow>
-                      <label htmlFor="value">
-                        <FormattedMessage id="label.value" defaultMessage="Value" />
-                      </label>
-                      <div>
-                        <Field name="value" type="text" />
-                        <FormError name="value" />
-                      </div>
-                    </FormRow>
-                    <FormButtons className={styles.formButtons}>
-                      <Button
-                        variant="action"
-                        type="submit"
-                        disabled={!values.field || !values.value}
-                      >
-                        <FormattedMessage id="label.add-filter" defaultMessage="Add Filter" />
-                      </Button>
-                    </FormButtons>
-                  </Form>
-                )}
-              </Formik>
-              <FilterTags
-                className={styles.filterTag}
-                params={filters}
-                onClick={value => handleRemoveTag(value, filters, setFilters)}
-              />
-            </div>
-          </FormLayout>
-        </div>
-        <div>
-          <DataTable className={styles.table} data={data} title="Results" showPercentage={false} />
-        </div>
-      </div>
-      <FormButtons>
-        <Button variant="action" onClick={handleSubmit} disabled={!isValid}>
-          <FormattedMessage id="label.search" defaultMessage="Search" />
-        </Button>
-        <Button onClick={onClose}>
-          <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
-        </Button>
-      </FormButtons>
-    </>
-  );
-}
--- a/components/forms/EventDataForm.module.css
+++ b/components/forms/EventDataForm.module.css
@ -1,38 +0,0 @@
-.container {
-  display: flex;
-}
-
-.form {
-  border-right: 1px solid var(--gray300);
-  width: 420px;
-}
-
-.filters {
-  padding: 10px 5px;
-}
-
-.filters + .filters {
-  border-top: 1px solid var(--gray300);
-  min-height: 250px;
-}
-
-.table {
-  padding: 10px;
-  min-height: 430px;
-  min-width: 400px;
-}
-
-.formButtons {
-  justify-content: flex-start;
-  margin-left: 20px;
-}
-
-.dropdown {
-  min-height: 39px;
-  min-width: 240px;
-}
-
-.filterTag {
-  flex-wrap: wrap;
-  margin: 10px 5px 5px 5px;
-}
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@ -1,111 +0,0 @@
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Formik, Form, Field } from 'formik';
-import { setItem } from 'next-basics';
-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 useApi from 'hooks/useApi';
-import { AUTH_TOKEN } from 'lib/constants';
-import { setUser } from 'store/app';
-import Logo from 'assets/logo.svg';
-import styles from './LoginForm.module.css';
-
-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 } = useApi();
-  const router = useRouter();
-  const [message, setMessage] = useState();
-
-  const handleSubmit = async ({ username, password }) => {
-    const { ok, status, data } = await post('/auth/login', {
-      username,
-      password,
-    });
-
-    if (ok) {
-      setItem(AUTH_TOKEN, data.token);
-
-      setUser(data.user);
-
-      await router.push('/');
-
-      return null;
-    } 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
@ -1,23 +0,0 @@
-.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
@ -1,98 +0,0 @@
-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 useApi from 'hooks/useApi';
-
-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 } = useApi();
-  const [message, setMessage] = useState();
-
-  const handleSubmit = async ({ type, id }) => {
-    const { ok, data } = await post(`/${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
@ -1,42 +0,0 @@
-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, shareId } = 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/${shareId}/${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
@ -1,43 +0,0 @@
-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';
-import useConfig from 'hooks/useConfig';
-
-export default function TrackingCodeForm({ values, onClose }) {
-  const ref = useRef();
-  const { basePath } = useRouter();
-  const { trackerScriptName } = useConfig();
-
-  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.websiteUuid}" src="${
-            document.location.origin
-          }${basePath}/${trackerScriptName ? `${trackerScriptName}.js` : '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
@ -1,159 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Formik, Form, Field, useFormikContext } 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 useApi from 'hooks/useApi';
-import useFetch from 'hooks/useFetch';
-import useUser from 'hooks/useUser';
-import styles from './WebsiteEditForm.module.css';
-
-const initialValues = {
-  name: '',
-  domain: '',
-  owner: '',
-  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;
-};
-
-const OwnerDropDown = ({ user, accounts }) => {
-  const { setFieldValue, values } = useFormikContext();
-
-  useEffect(() => {
-    if (values.userId != null && values.owner === '') {
-      setFieldValue('owner', values.userId.toString());
-    } else if (user?.id && values.owner === '') {
-      setFieldValue('owner', user.id.toString());
-    }
-  }, [accounts, setFieldValue, user, values]);
-
-  if (user?.isAdmin) {
-    return (
-      <FormRow>
-        <label htmlFor="owner">
-          <FormattedMessage id="label.owner" defaultMessage="Owner" />
-        </label>
-        <div>
-          <Field as="select" name="owner" className={styles.dropdown}>
-            {accounts?.map(acc => (
-              <option key={acc.id} value={acc.id}>
-                {acc.username}
-              </option>
-            ))}
-          </Field>
-          <FormError name="owner" />
-        </div>
-      </FormRow>
-    );
-  } else {
-    return null;
-  }
-};
-
-export default function WebsiteEditForm({ values, onSave, onClose }) {
-  const { post } = useApi();
-  const { data: accounts } = useFetch(`/accounts`);
-  const { user } = useUser();
-  const [message, setMessage] = useState();
-
-  const handleSubmit = async values => {
-    const { websiteUuid: websiteId } = values;
-
-    const { ok, data } = await post(websiteId ? `/websites/${websiteId}` : '/websites', values);
-
-    if (ok) {
-      onSave();
-    } else {
-      setMessage(
-        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
-      );
-    }
-  };
-
-  return (
-    <FormLayout>
-      <Formik
-        initialValues={{ ...initialValues, ...values, enableShareUrl: !!values?.shareId }}
-        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"
-                  spellCheck="false"
-                  autoCapitalize="off"
-                  autoCorrect="off"
-                />
-                <FormError name="domain" />
-              </div>
-            </FormRow>
-            <OwnerDropDown accounts={accounts} user={user} />
-            <FormRow>
-              <label />
-              <Field name="enableShareUrl">
-                {({ 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/Show more
+++ b/Show more
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>`
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M392 320C378.75 320 368 330.75 368 344V456C368 460.406 364.406 464 360 464H56C51.594 464 48 460.406 48 456V152C48 147.594 51.594 144 56 144H168C181.25 144 192 133.25 192 120S181.25 96 168 96H56C25.125 96 0 121.125 0 152V456C0 486.875 25.125 512 56 512H360C390.875 512 416 486.875 416 456V344C416 330.75 405.25 320 392 320ZM488 0H320C306.75 0 296 10.75 296 24S306.75 48 320 48H430.062L183.031 295.031C173.656 304.406 173.656 319.594 183.031 328.969C187.719 333.656 193.844 336 200 336S212.281 333.656 216.969 328.969L464 81.938V192C464 205.25 474.75 216 488 216S512 205.25 512 192V24C512 10.75 501.25 0 488 0Z"/></svg>