Merge branch 'dev' into analytics

.eslintrc.json

@@ -19,22 +19,21 @@
     "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", ".tsx", ".js", ".jsx", ".json"]
       }
@@ -51,7 +50,8 @@
     "@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-empty-interface": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
   },
   "globals": {
     "React": "writable"

components/input/WebsiteDateFilter.js

@@ -1,23 +0,0 @@
-import useDateRange from 'hooks/useDateRange';
-import DateFilter from './DateFilter';
-import styles from './WebsiteDateFilter.module.css';
-
-export default function WebsiteDateFilter({ websiteId }) {
-  const [dateRange, setDateRange] = useDateRange(websiteId);
-  const { value, startDate, endDate } = dateRange;
-
-  const handleChange = async value => {
-    setDateRange(value);
-  };
-
-  return (
-    <DateFilter
-      className={styles.dropdown}
-      value={value}
-      startDate={startDate}
-      endDate={endDate}
-      onChange={handleChange}
-      showAllTime={true}
-    />
-  );
-}

components/pages/settings/users/UserWebsites.js

@@ -1,26 +0,0 @@
-import { Loading } from 'react-basics';
-import useApi from 'hooks/useApi';
-import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
-import useMessages from 'hooks/useMessages';
-
-export function UserWebsites({ userId }) {
-  const { formatMessage, messages } = useMessages();
-  const { get, useQuery } = useApi();
-  const { data, isLoading } = useQuery(['user:websites', userId], () =>
-    get(`/users/${userId}/websites`),
-  );
-  const hasData = data && data.length !== 0;
-
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
-  return (
-    <div>
-      {hasData && <WebsitesTable data={data} />}
-      {!hasData && formatMessage(messages.noDataAvailable)}
-    </div>
-  );
-}
-
-export default UserWebsites;

jsconfig.json

@@ -1,5 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": "./src"
   }
-}
+}

next.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 require('dotenv').config();
+const path = require('path');
 const pkg = require('./package.json');
 
 const contentSecurityPolicy = `
@@ -92,6 +93,8 @@ const config = {
       use: ['@svgr/webpack'],
     });
 
+    config.resolve.alias['public'] = path.resolve('./public');
+
     return config;
   },
   async headers() {

package.components.json

@@ -0,0 +1,23 @@
+{
+  "name": "@umami/components",
+  "version": "0.11.0",
+  "description": "Umami React components.",
+  "author": "Mike Cao <mike@mikecao.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "peerDependencies": {
+    "@tanstack/react-query": "^4.33.0",
+    "classnames": "^2.3.1",
+    "colord": "^2.9.2",
+    "immer": "^9.0.12",
+    "moment-timezone": "^0.5.35",
+    "next": "^13.4.0",
+    "next-basics": "^0.36.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^5.24.7",
+    "zustand": "^4.3.8"
+  }
+}

package.json

@@ -18,7 +18,8 @@
     "start-env": "node scripts/start-env.js",
     "start-server": "node server.js",
     "build-app": "next build",
-    "build-tracker": "rollup -c rollup.tracker.config.js",
+    "build-components": "rollup -c rollup.components.config.mjs",
+    "build-tracker": "rollup -c rollup.tracker.config.mjs",
     "build-db": "npm-run-all copy-db-files build-db-client",
     "build-lang": "npm-run-all format-lang compile-lang download-country-names download-language-names",
     "build-geo": "node scripts/build-geo.js",
@@ -61,7 +62,7 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.15",
     "@prisma/client": "5.0.0",
-    "@tanstack/react-query": "^4.16.1",
+    "@tanstack/react-query": "^4.33.0",
     "@umami/prisma-client": "^0.2.0",
     "@umami/redis-client": "^0.5.0",
     "chalk": "^4.1.1",
@@ -89,7 +90,7 @@
     "kafkajs": "^2.1.0",
     "maxmind": "^4.3.6",
     "moment-timezone": "^0.5.35",
-    "next": "13.3.1",
+    "next": "13.4.19",
     "next-basics": "^0.36.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
@@ -115,13 +116,16 @@
     "@formatjs/cli": "^4.2.29",
     "@netlify/plugin-nextjs": "^4.27.3",
     "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-buble": "^1.0.2",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@svgr/rollup": "^7.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^6.2.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "cross-env": "^7.0.3",
@@ -143,11 +147,12 @@
     "prettier": "^2.6.2",
     "prisma": "5.0.0",
     "prompts": "2.4.2",
-    "rollup": "^2.70.1",
+    "rollup": "^3.28.0",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-node-externals": "^5.1.2",
+    "rollup-plugin-node-externals": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^15.10.1",
@@ -156,6 +161,6 @@
     "stylelint-config-recommended": "^9.0.0",
     "tar": "^6.1.2",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   }
 }

pages/api/reports/insights.ts

@@ -1,56 +0,0 @@
-import { canViewWebsite } from 'lib/auth';
-import { useCors, useAuth } from 'lib/middleware';
-import { NextApiRequestQueryBody } from 'lib/types';
-import { NextApiResponse } from 'next';
-import { ok, methodNotAllowed, unauthorized } from 'next-basics';
-import { getInsights } from 'queries';
-
-export interface InsightsRequestBody {
-  websiteId: string;
-  dateRange: {
-    startDate: string;
-    endDate: string;
-  };
-  fields: { name: string; type: string; value: string }[];
-  filters: string[];
-  groups: { name: string; type: string }[];
-}
-
-function convertFilters(filters) {
-  return filters.reduce((obj, { name, ...value }) => {
-    obj[name] = value;
-
-    return obj;
-  }, {});
-}
-
-export default async (
-  req: NextApiRequestQueryBody<any, InsightsRequestBody>,
-  res: NextApiResponse,
-) => {
-  await useCors(req, res);
-  await useAuth(req, res);
-
-  if (req.method === 'POST') {
-    const {
-      websiteId,
-      dateRange: { startDate, endDate },
-      fields,
-      filters,
-    } = req.body;
-
-    if (!(await canViewWebsite(req.auth, websiteId))) {
-      return unauthorized(res);
-    }
-
-    const data = await getInsights(websiteId, fields, {
-      ...convertFilters(filters),
-      startDate: new Date(startDate),
-      endDate: new Date(endDate),
-    });
-
-    return ok(res, data);
-  }
-
-  return methodNotAllowed(res);
-};

rollup.components.config.mjs

@@ -0,0 +1,94 @@
+import path from 'path';
+import crypto from 'crypto';
+import resolve from '@rollup/plugin-node-resolve';
+import alias from '@rollup/plugin-alias';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
+import nodeExternals from 'rollup-plugin-node-externals';
+import esbuild from 'rollup-plugin-esbuild';
+import dts from 'rollup-plugin-dts';
+import svgr from '@svgr/rollup';
+
+const md5 = str => crypto.createHash('md5').update(str).digest('hex');
+
+const customResolver = resolve({
+  extensions: ['.js', '.jsx', '.ts', '.tsx'],
+});
+
+const aliasConfig = {
+  entries: [
+    { find: /^components/, replacement: path.resolve('./src/components') },
+    { find: /^hooks/, replacement: path.resolve('./src/hooks') },
+    { find: /^lib/, replacement: path.resolve('./src/lib') },
+    { find: /^store/, replacement: path.resolve('./src/store') },
+    { find: /^public/, replacement: path.resolve('./public') },
+    { find: /^assets/, replacement: path.resolve('./src/assets') },
+  ],
+  customResolver,
+};
+
+const external = [
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'react-intl',
+  'react-basics',
+  'classnames',
+  'next',
+];
+
+const jsBundle = {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    del({ targets: 'dist/*', runOnce: true }),
+    copy({ targets: [{ src: './package.components.json', dest: 'dist', rename: 'package.json' }] }),
+    postcss({
+      config: false,
+      extract: 'styles.css',
+      sourceMap: true,
+      minimize: true,
+      modules: {
+        generateScopedName: function (name, filename, css) {
+          const file = path.basename(filename, '.css').replace('.module', '');
+          const hash = Buffer.from(md5(`${name}:${filename}:${css}`))
+            .toString('base64')
+            .substring(0, 5);
+
+          return `${file}-${name}--${hash}`;
+        },
+      },
+    }),
+    svgr({ icon: true }),
+    nodeExternals(),
+    json(),
+    alias(aliasConfig),
+    esbuild({
+      target: 'es6',
+      jsx: 'automatic',
+      loaders: {
+        '.js': 'jsx',
+      },
+    }),
+  ],
+};
+
+const dtsBundle = {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.d.ts',
+    format: 'es',
+  },
+  plugins: [alias(aliasConfig), nodeExternals(), json(), dts()],
+  external: [/\.css/],
+};
+
+export default [jsBundle, dtsBundle];

rollup.tracker.config.mjs

@@ -4,7 +4,7 @@ import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 
 export default {
-  input: 'tracker/index.js',
+  input: 'src/tracker/index.js',
   output: {
     file: 'public/script.js',
     format: 'iife',

scripts/check-lang.js

@@ -2,7 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
-const messages = require('../lang/en-US.json');
+const messages = require('../src/lang/en-US.json');
 const ignore = require('../lang-ignore.json');
 
 const dir = path.resolve(__dirname, '../lang');

src/components/common/ConfirmDeleteForm.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
   const [loading, setLoading] = useState(false);
@@ -17,7 +17,7 @@ export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
       </p>
       <FormButtons flex>
-        <LoadingButton loading={loading} onClick={handleConfirm} variant="danger">
+        <LoadingButton isLoading={loading} onClick={handleConfirm} variant="danger">
           {formatMessage(labels.delete)}
         </LoadingButton>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

src/components/common/Empty.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import styles from './Empty.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function Empty({ message, className }) {
   const { formatMessage, messages } = useMessages();

src/components/common/ErrorBoundary.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import styles from './ErrorBoundry.module.css';
 
 const logError = (error, info) => {

src/components/common/ErrorMessage.js

@@ -1,6 +1,6 @@
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();

src/components/common/FilterLink.js

@@ -2,8 +2,8 @@ import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
-import usePageQuery from 'hooks/usePageQuery';
-import useMessages from 'hooks/useMessages';
+import usePageQuery from 'components/hooks/usePageQuery';
+import useMessages from 'components/hooks/useMessages';
 import styles from './FilterLink.module.css';
 
 export function FilterLink({ id, value, label, externalUrl, children, className }) {

src/components/common/HamburgerButton.js

@@ -2,8 +2,8 @@ import { Button, Icon } from 'react-basics';
 import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
-import useConfig from 'hooks/useConfig';
+import useMessages from 'components/hooks/useMessages';
+import useConfig from 'components/hooks/useConfig';
 
 export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();

src/components/common/LinkButton.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './LinkButton.module.css';
 
-export default function LinkButton({ href, icon, children }) {
+export function LinkButton({ href, icon, children }) {
   return (
     <Link className={styles.button} href={href}>
       <Icon>{icon || <Icons.ArrowRight />}</Icon>
@@ -10,3 +10,5 @@ export default function LinkButton({ href, icon, children }) {
     </Link>
   );
 }
+
+export default LinkButton;

src/components/common/Pager.js

@@ -1,6 +1,6 @@
 import styles from './Pager.module.css';
 import { Button, Flexbox, Icon, Icons } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function Pager({ page, pageSize, count, onPageChange }) {
   const { formatMessage, labels } = useMessages();

src/components/common/SettingsTable.js

@@ -1,5 +1,5 @@
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import useMessages from 'hooks/useMessages';
+import Empty from 'components/common/Empty';
+import useMessages from 'components/hooks/useMessages';
 import { useState } from 'react';
 import {
   SearchField,
@@ -36,7 +36,7 @@ export function SettingsTable({
 
   return (
     <>
-      {showSearch && (
+      {showSearch && !!value.length && (
         <SearchField
           onChange={handleFilterChange}
           delay={1000}
@@ -47,7 +47,7 @@ export function SettingsTable({
         />
       )}
       {value.length === 0 && filterValue && (
-        <EmptyPlaceholder message={formatMessage(messages.noResultsFound)}></EmptyPlaceholder>
+        <Empty message={formatMessage(messages.noResultsFound)} />
       )}
       {value.length > 0 && (
         <Table columns={columns} rows={value}>

src/components/common/UpdateNotice.js

@@ -4,7 +4,7 @@ import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import { useRouter } from 'next/router';
 
 export function UpdateNotice({ user, config }) {

src/components/common/WorldMap.js

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 import { colord } from 'colord';
 import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
-import useTheme from 'hooks/useTheme';
-import useCountryNames from 'hooks/useCountryNames';
-import useLocale from 'hooks/useLocale';
+import useTheme from 'components/hooks/useTheme';
+import useCountryNames from 'components/hooks/useCountryNames';
+import useLocale from 'components/hooks/useLocale';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
 import styles from './WorldMap.module.css';

src/components/hooks/useConfig.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import useStore, { setConfig } from 'store/app';
-import useApi from 'hooks/useApi';
+import useApi from 'components/hooks/useApi';
 
 let loading = false;
 

src/components/hooks/useFilters.js

@@ -1,4 +1,4 @@
-import { useMessages } from 'hooks';
+import { useMessages } from './useMessages';
 import { OPERATORS } from 'lib/constants';
 
 export function useFilters() {

src/components/hooks/useLanguageNames.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { httpGet } from 'next-basics';
-import enUS from 'public/intl/language/en-US.json';
+import enUS from 'public/intl/country/en-US.json';
 
 const languageNames = {
   'en-US': enUS,

src/components/hooks/useLocale.js

@@ -4,8 +4,8 @@ import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
-import useForceUpdate from 'hooks/useForceUpdate';
-import enUS from 'public/intl/messages/en-US.json';
+import useForceUpdate from 'components/hooks/useForceUpdate';
+import enUS from 'public/intl/country/en-US.json';
 
 const messages = {
   'en-US': enUS,

src/components/hooks/useReports.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useApiFilter from 'hooks/useApiFilter';
+import useApiFilter from 'components/hooks/useApiFilter';
 
 export function useReports() {
   const [modified, setModified] = useState(Date.now());

src/components/hooks/useRequireLogin.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import useApi from 'hooks/useApi';
-import useUser from 'hooks/useUser';
+import useApi from 'components/hooks/useApi';
+import useUser from 'components/hooks/useUser';
 
-export function useRequireLogin() {
+export function useRequireLogin(handler: (data?: object) => void) {
   const router = useRouter();
   const { get } = useApi();
   const { user, setUser } = useUser();
@@ -11,9 +11,9 @@ export function useRequireLogin() {
   useEffect(() => {
     async function loadUser() {
       try {
-        const { user } = await get('/auth/verify');
+        const data = await get('/auth/verify');
 
-        setUser(user);
+        setUser(typeof handler === 'function' ? handler(data) : (data as any)?.user);
       } catch {
         await router.push('/login');
       }

src/components/hooks/useWebsiteReports.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useApiFilter from 'hooks/useApiFilter';
+import useApiFilter from 'components/hooks/useApiFilter';
 
 export function useWebsiteReports(websiteId) {
   const [modified, setModified] = useState(Date.now());

src/components/icons.ts

@@ -22,7 +22,7 @@ import User from 'assets/user.svg';
 import Users from 'assets/users.svg';
 import Visitor from 'assets/visitor.svg';
 
-const icons = {
+const icons: any = {
   ...Icons,
   AddUser,
   Bars,

src/components/input/DateFilter.js

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
-import useLocale from 'hooks/useLocale';
+import useLocale from 'components/hooks/useLocale';
 import { formatDate } from 'lib/date';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function DateFilter({
   value,
@@ -13,6 +13,7 @@ export function DateFilter({
   endDate,
   className,
   onChange,
+  selectedUnit,
   showAllTime = false,
   alignment = 'end',
 }) {
@@ -66,7 +67,12 @@ export function DateFilter({
 
   const renderValue = value => {
     return value.startsWith('range') ? (
-      <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
+      <CustomRange
+        startDate={startDate}
+        endDate={endDate}
+        selectedUnit={selectedUnit}
+        onClick={() => handleChange('custom')}
+      />
     ) : (
       options.find(e => e.value === value).label
     );
@@ -120,9 +126,11 @@ export function DateFilter({
   );
 }
 
-const CustomRange = ({ startDate, endDate, onClick }) => {
+const CustomRange = ({ startDate, endDate, selectedUnit, onClick }) => {
   const { locale } = useLocale();
 
+  const monthFormat = +selectedUnit?.num === 1 && selectedUnit?.unit === 'month';
+
   function handleClick(e) {
     e.stopPropagation();
 
@@ -135,8 +143,14 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
         <Icons.Calendar />
       </Icon>
       <Text>
-        {formatDate(startDate, 'd LLL y', locale)}
-        {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
+        {monthFormat ? (
+          <>{formatDate(startDate, 'MMMM yyyy', locale)}</>
+        ) : (
+          <>
+            {formatDate(startDate, 'd LLL y', locale)}
+            {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
+          </>
+        )}
       </Text>
     </Flexbox>
   );

src/components/input/LanguageButton.js

@@ -1,7 +1,7 @@
 import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
 import classNames from 'classnames';
 import { languages } from 'lib/lang';
-import useLocale from 'hooks/useLocale';
+import useLocale from 'components/hooks/useLocale';
 import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 

src/components/input/LogoutButton.js

@@ -1,11 +1,11 @@
 import { Button, Icon, Icons, TooltipPopup } from 'react-basics';
 import Link from 'next/link';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function LogoutButton({ tooltipPosition = 'top' }) {
   const { formatMessage, labels } = useMessages();
   return (
-    <Link href="/logout">
+    <Link href="/src/pages/logout">
       <TooltipPopup label={formatMessage(labels.logout)} position={tooltipPosition}>
         <Button variant="quiet">
           <Icon>

src/components/input/MonthSelect.js

@@ -10,7 +10,7 @@ import {
 } from 'react-basics';
 import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
-import { useLocale } from 'hooks';
+import { useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
 import { getDateLocale } from 'lib/lang';
 import styles from './MonthSelect.module.css';