mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-23 17:56:24 +02:00
Merge branch 'dev' into analytics
# Conflicts: # src/app/(main)/reports/[id]/Report.js # src/queries/analytics/eventData/getEventDataEvents.ts # src/queries/analytics/getActiveVisitors.ts # src/queries/analytics/sessions/getSessionMetrics.ts # yarn.lock
This commit is contained in:
Mike Cao
commit
fc1f2c9cd3
1
next-env.d.ts
vendored
1
next-env.d.ts
vendored
|
|
@ -1,5 +1,6 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
/// <reference types="next/navigation-types/compat/navigation" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const pkg = require('./package.json');
|
|||
const contentSecurityPolicy = `
|
||||
default-src 'self';
|
||||
img-src *;
|
||||
script-src 'self' 'unsafe-eval';
|
||||
script-src 'self' 'unsafe-eval' 'unsafe-inline';
|
||||
style-src 'self' 'unsafe-inline';
|
||||
connect-src 'self' api.umami.is;
|
||||
frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS};
|
||||
|
|
@ -74,16 +74,23 @@ if (process.env.CLOUD_MODE && process.env.CLOUD_URL && process.env.DISABLE_LOGIN
|
|||
});
|
||||
}
|
||||
|
||||
const basePath = process.env.BASE_PATH;
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const config = {
|
||||
reactStrictMode: false,
|
||||
env: {
|
||||
cloudMode: process.env.CLOUD_MODE,
|
||||
basePath: basePath || '',
|
||||
cloudMode: !!process.env.CLOUD_MODE,
|
||||
cloudUrl: process.env.CLOUD_URL,
|
||||
configUrl: '/config',
|
||||
currentVersion: pkg.version,
|
||||
defaultLocale: process.env.DEFAULT_LOCALE,
|
||||
disableLogin: process.env.DISABLE_LOGIN,
|
||||
disableUI: process.env.DISABLE_UI,
|
||||
isProduction: process.env.NODE_ENV === 'production',
|
||||
},
|
||||
basePath: process.env.BASE_PATH,
|
||||
basePath,
|
||||
output: 'standalone',
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
|
|
@ -92,11 +99,23 @@ const config = {
|
|||
ignoreBuildErrors: true,
|
||||
},
|
||||
webpack(config) {
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
issuer: /\.{js|jsx|ts|tsx}$/,
|
||||
use: ['@svgr/webpack'],
|
||||
});
|
||||
const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
|
||||
|
||||
config.module.rules.push(
|
||||
{
|
||||
...fileLoaderRule,
|
||||
test: /\.svg$/i,
|
||||
resourceQuery: /url/,
|
||||
},
|
||||
{
|
||||
test: /\.svg$/i,
|
||||
issuer: fileLoaderRule.issuer,
|
||||
resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
|
||||
use: ['@svgr/webpack'],
|
||||
},
|
||||
);
|
||||
|
||||
fileLoaderRule.exclude = /\.svg$/i;
|
||||
|
||||
config.resolve.alias['public'] = path.resolve('./public');
|
||||
|
||||
|
|
|
|||
22
package.json
22
package.json
|
|
@ -64,8 +64,9 @@
|
|||
"@clickhouse/client": "^0.2.2",
|
||||
"@fontsource/inter": "^4.5.15",
|
||||
"@prisma/client": "5.3.1",
|
||||
"@react-spring/web": "^9.7.3",
|
||||
"@tanstack/react-query": "^4.33.0",
|
||||
"@umami/prisma-client": "^0.2.0",
|
||||
"@umami/prisma-client": "^0.3.0",
|
||||
"@umami/redis-client": "^0.15.0",
|
||||
"chalk": "^4.1.1",
|
||||
"chart.js": "^4.2.1",
|
||||
|
|
@ -91,18 +92,17 @@
|
|||
"kafkajs": "^2.1.0",
|
||||
"maxmind": "^4.3.6",
|
||||
"moment-timezone": "^0.5.35",
|
||||
"next": "13.5.2",
|
||||
"next": "13.5.3",
|
||||
"next-basics": "^0.36.0",
|
||||
"node-fetch": "^3.2.8",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"react": "^18.2.0",
|
||||
"react-basics": "^0.100.0",
|
||||
"react-basics": "^0.105.0",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-error-boundary": "^4.0.4",
|
||||
"react-intl": "^5.24.7",
|
||||
"react-intl": "^6.4.7",
|
||||
"react-simple-maps": "^2.3.0",
|
||||
"react-spring": "^9.4.4",
|
||||
"react-use-measure": "^2.0.4",
|
||||
"react-window": "^1.8.6",
|
||||
"request-ip": "^3.3.0",
|
||||
|
|
@ -123,12 +123,12 @@
|
|||
"@rollup/plugin-node-resolve": "^15.2.0",
|
||||
"@rollup/plugin-replace": "^5.0.2",
|
||||
"@svgr/rollup": "^8.1.0",
|
||||
"@svgr/webpack": "^6.2.1",
|
||||
"@svgr/webpack": "^8.1.0",
|
||||
"@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",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.3",
|
||||
"@typescript-eslint/parser": "^6.7.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"esbuild": "^0.17.17",
|
||||
"eslint": "^8.33.0",
|
||||
|
|
@ -138,9 +138,9 @@
|
|||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"extract-react-intl-messages": "^4.1.1",
|
||||
"husky": "^7.0.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
"postcss": "^8.4.21",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^14.0.1",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-preset-env": "7.8.3",
|
||||
|
|
|
|||
BIN
public/images/os/windows-mobile.png
Normal file
BIN
public/images/os/windows-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -104,7 +104,7 @@
|
|||
"label.browser": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Browser"
|
||||
"value": "Navegador"
|
||||
}
|
||||
],
|
||||
"label.browsers": [
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
"label.city": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "City"
|
||||
"value": "Ciudad"
|
||||
}
|
||||
],
|
||||
"label.clear-all": [
|
||||
|
|
@ -176,19 +176,19 @@
|
|||
"label.country": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Country"
|
||||
"value": "País"
|
||||
}
|
||||
],
|
||||
"label.create": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Create"
|
||||
"value": "Crear"
|
||||
}
|
||||
],
|
||||
"label.create-report": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Crear reporte"
|
||||
"value": "Crear informe"
|
||||
}
|
||||
],
|
||||
"label.create-team": [
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
"label.date": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Date"
|
||||
"value": "Fecha"
|
||||
}
|
||||
],
|
||||
"label.date-range": [
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
"label.day": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Day"
|
||||
"value": "Día"
|
||||
}
|
||||
],
|
||||
"label.default-date-range": [
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
"label.description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Descripciones"
|
||||
"value": "Descripción"
|
||||
}
|
||||
],
|
||||
"label.desktop": [
|
||||
|
|
@ -302,7 +302,7 @@
|
|||
"label.device": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Device"
|
||||
"value": "Dispositivo"
|
||||
}
|
||||
],
|
||||
"label.devices": [
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
"label.dismiss": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Ignorar"
|
||||
"value": "Cerrar"
|
||||
}
|
||||
],
|
||||
"label.does-not-contain": [
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
"label.dropoff": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Dropoff"
|
||||
"value": "Abandono"
|
||||
}
|
||||
],
|
||||
"label.edit": [
|
||||
|
|
@ -374,7 +374,7 @@
|
|||
"label.false": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "False"
|
||||
"value": "Falso"
|
||||
}
|
||||
],
|
||||
"label.field": [
|
||||
|
|
@ -392,7 +392,7 @@
|
|||
"label.filter": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Filter"
|
||||
"value": "Filtro"
|
||||
}
|
||||
],
|
||||
"label.filter-combined": [
|
||||
|
|
@ -422,7 +422,7 @@
|
|||
"label.funnel-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Understand the conversion and drop-off rate of users."
|
||||
"value": "Comprender conversión y abandono de usuarios."
|
||||
}
|
||||
],
|
||||
"label.greater-than": [
|
||||
|
|
@ -470,7 +470,7 @@
|
|||
"label.is-set": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Is set"
|
||||
"value": "Está establecido"
|
||||
}
|
||||
],
|
||||
"label.join": [
|
||||
|
|
@ -600,7 +600,7 @@
|
|||
"label.my-websites": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "My websites"
|
||||
"value": "Mis sitios web"
|
||||
}
|
||||
],
|
||||
"label.name": [
|
||||
|
|
@ -624,7 +624,7 @@
|
|||
"label.os": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "OS"
|
||||
"value": "Sistema"
|
||||
}
|
||||
],
|
||||
"label.overview": [
|
||||
|
|
@ -642,7 +642,7 @@
|
|||
"label.page-of": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Page "
|
||||
"value": "Página "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -650,7 +650,7 @@
|
|||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": " of "
|
||||
"value": " de "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -666,7 +666,7 @@
|
|||
"label.pageTitle": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Page title"
|
||||
"value": "Título de página"
|
||||
}
|
||||
],
|
||||
"label.pages": [
|
||||
|
|
@ -684,7 +684,7 @@
|
|||
"label.powered-by": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Con la ayuda de "
|
||||
"value": "Analíticas de "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -706,7 +706,7 @@
|
|||
"label.query": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Query"
|
||||
"value": "Consulta"
|
||||
}
|
||||
],
|
||||
"label.query-parameters": [
|
||||
|
|
@ -724,7 +724,7 @@
|
|||
"label.referrer": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Referrer"
|
||||
"value": "Referido"
|
||||
}
|
||||
],
|
||||
"label.referrers": [
|
||||
|
|
@ -766,7 +766,7 @@
|
|||
"label.reports": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Reportes"
|
||||
"value": "Informes"
|
||||
}
|
||||
],
|
||||
"label.required": [
|
||||
|
|
@ -784,19 +784,19 @@
|
|||
"label.reset-website": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Reiniciar estadísticas"
|
||||
"value": "Reiniciar analíticas"
|
||||
}
|
||||
],
|
||||
"label.retention": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Retention"
|
||||
"value": "Retención"
|
||||
}
|
||||
],
|
||||
"label.retention-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Measure your website stickiness by tracking how often users return."
|
||||
"value": "Medir la frecuencia con la que los usuarios vuelven a tu sitio web."
|
||||
}
|
||||
],
|
||||
"label.role": [
|
||||
|
|
@ -826,7 +826,7 @@
|
|||
"label.search": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Search"
|
||||
"value": "Buscar"
|
||||
}
|
||||
],
|
||||
"label.select-date": [
|
||||
|
|
@ -850,7 +850,7 @@
|
|||
"label.settings": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Configuraciones"
|
||||
"value": "Ajustes"
|
||||
}
|
||||
],
|
||||
"label.share-url": [
|
||||
|
|
@ -892,7 +892,7 @@
|
|||
"label.team-id": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "ID de equipo"
|
||||
"value": "ID del equipo"
|
||||
}
|
||||
],
|
||||
"label.team-member": [
|
||||
|
|
@ -904,7 +904,7 @@
|
|||
"label.team-name": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Team name"
|
||||
"value": "Nombre del equipo"
|
||||
}
|
||||
],
|
||||
"label.team-owner": [
|
||||
|
|
@ -916,7 +916,7 @@
|
|||
"label.team-websites": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Team websites"
|
||||
"value": "Sitios web del equipo"
|
||||
}
|
||||
],
|
||||
"label.teams": [
|
||||
|
|
@ -1288,7 +1288,7 @@
|
|||
"message.new-version-available": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "A new version of Umami "
|
||||
"value": "Una nueva versión de Umami "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -1296,7 +1296,7 @@
|
|||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": " is available!"
|
||||
"value": " está disponible"
|
||||
}
|
||||
],
|
||||
"message.no-data-available": [
|
||||
|
|
@ -1376,7 +1376,7 @@
|
|||
"message.saved": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Guardado."
|
||||
"value": "Guardado"
|
||||
}
|
||||
],
|
||||
"message.share-url": [
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
"label.add": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Add"
|
||||
"value": "Нэмэх"
|
||||
}
|
||||
],
|
||||
"label.add-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Add description"
|
||||
"value": "Тайлбар нэмэх"
|
||||
}
|
||||
],
|
||||
"label.add-website": [
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
"label.after": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "After"
|
||||
"value": "Хойно"
|
||||
}
|
||||
],
|
||||
"label.all": [
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
"label.average": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Average"
|
||||
"value": "Дундаж"
|
||||
}
|
||||
],
|
||||
"label.average-visit-time": [
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
"label.before": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Before"
|
||||
"value": "Өмнө"
|
||||
}
|
||||
],
|
||||
"label.bounce-rate": [
|
||||
|
|
@ -98,13 +98,13 @@
|
|||
"label.breakdown": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Breakdown"
|
||||
"value": "Задаргаа"
|
||||
}
|
||||
],
|
||||
"label.browser": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Browser"
|
||||
"value": "Хөтөч"
|
||||
}
|
||||
],
|
||||
"label.browsers": [
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
"label.city": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "City"
|
||||
"value": "Хот"
|
||||
}
|
||||
],
|
||||
"label.clear-all": [
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
"label.contains": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Contains"
|
||||
"value": "Агуулах"
|
||||
}
|
||||
],
|
||||
"label.continue": [
|
||||
|
|
@ -176,19 +176,19 @@
|
|||
"label.country": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Country"
|
||||
"value": "Улс"
|
||||
}
|
||||
],
|
||||
"label.create": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Create"
|
||||
"value": "Үүсгэх"
|
||||
}
|
||||
],
|
||||
"label.create-report": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Create report"
|
||||
"value": "Тайлан үүсгэх"
|
||||
}
|
||||
],
|
||||
"label.create-team": [
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
"label.date": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Date"
|
||||
"value": "Огноо"
|
||||
}
|
||||
],
|
||||
"label.date-range": [
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
"label.day": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Day"
|
||||
"value": "Өдөр"
|
||||
}
|
||||
],
|
||||
"label.default-date-range": [
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
"label.description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Description"
|
||||
"value": "Тайлбар"
|
||||
}
|
||||
],
|
||||
"label.desktop": [
|
||||
|
|
@ -302,7 +302,7 @@
|
|||
"label.device": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Device"
|
||||
"value": "Төхөөрөмж"
|
||||
}
|
||||
],
|
||||
"label.devices": [
|
||||
|
|
@ -320,7 +320,7 @@
|
|||
"label.does-not-contain": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Does not contain"
|
||||
"value": "Агуулахгүй"
|
||||
}
|
||||
],
|
||||
"label.domain": [
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
"label.dropoff": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Dropoff"
|
||||
"value": "Уналт"
|
||||
}
|
||||
],
|
||||
"label.edit": [
|
||||
|
|
@ -356,13 +356,13 @@
|
|||
"label.event": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Event"
|
||||
"value": "Үйлдэл"
|
||||
}
|
||||
],
|
||||
"label.event-data": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Event data"
|
||||
"value": "Үйлдлийн өгөгдөл"
|
||||
}
|
||||
],
|
||||
"label.events": [
|
||||
|
|
@ -374,25 +374,25 @@
|
|||
"label.false": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "False"
|
||||
"value": "Худал"
|
||||
}
|
||||
],
|
||||
"label.field": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Field"
|
||||
"value": "Талбар"
|
||||
}
|
||||
],
|
||||
"label.fields": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Fields"
|
||||
"value": "Талбар"
|
||||
}
|
||||
],
|
||||
"label.filter": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Filter"
|
||||
"value": "Шүүлтүүр"
|
||||
}
|
||||
],
|
||||
"label.filter-combined": [
|
||||
|
|
@ -410,67 +410,67 @@
|
|||
"label.filters": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Filters"
|
||||
"value": "Шүүлтүүр"
|
||||
}
|
||||
],
|
||||
"label.funnel": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Funnel"
|
||||
"value": "Цутгал"
|
||||
}
|
||||
],
|
||||
"label.funnel-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Understand the conversion and drop-off rate of users."
|
||||
"value": "Хэрэглэгчдийн шилжилт, уналтын хэмжээг шижнлэх."
|
||||
}
|
||||
],
|
||||
"label.greater-than": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Greater than"
|
||||
"value": "Их"
|
||||
}
|
||||
],
|
||||
"label.greater-than-equals": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Greater than or equals"
|
||||
"value": "Их буюу тэнцүү"
|
||||
}
|
||||
],
|
||||
"label.insights": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Insights"
|
||||
"value": "Шинжлэх"
|
||||
}
|
||||
],
|
||||
"label.insights-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Dive deeper into your data by using segments and filters."
|
||||
"value": "Өгөгдлөө хэсэгчлэн хуваах, шүүх байдлаар задлах шинжлэх."
|
||||
}
|
||||
],
|
||||
"label.is": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Is"
|
||||
"value": "Бол"
|
||||
}
|
||||
],
|
||||
"label.is-not": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Is not"
|
||||
"value": "Биш"
|
||||
}
|
||||
],
|
||||
"label.is-not-set": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Is not set"
|
||||
"value": "Утга оноогоогүй"
|
||||
}
|
||||
],
|
||||
"label.is-set": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Is set"
|
||||
"value": "Утга оноосон"
|
||||
}
|
||||
],
|
||||
"label.join": [
|
||||
|
|
@ -546,13 +546,13 @@
|
|||
"label.less-than": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Less than"
|
||||
"value": "Бага"
|
||||
}
|
||||
],
|
||||
"label.less-than-equals": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Less than or equals"
|
||||
"value": "Бага буюу тэнцүү"
|
||||
}
|
||||
],
|
||||
"label.login": [
|
||||
|
|
@ -600,7 +600,7 @@
|
|||
"label.my-websites": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "My websites"
|
||||
"value": "Миний вебүүд"
|
||||
}
|
||||
],
|
||||
"label.name": [
|
||||
|
|
@ -630,7 +630,7 @@
|
|||
"label.overview": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Overview"
|
||||
"value": "Тойм"
|
||||
}
|
||||
],
|
||||
"label.owner": [
|
||||
|
|
@ -642,19 +642,19 @@
|
|||
"label.page-of": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Page "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
"value": "current"
|
||||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": " of "
|
||||
"value": "Хуудас "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
"value": "total"
|
||||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": "-с "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
"value": "current"
|
||||
}
|
||||
],
|
||||
"label.page-views": [
|
||||
|
|
@ -666,7 +666,7 @@
|
|||
"label.pageTitle": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Page title"
|
||||
"value": "Хуудасны гарчиг"
|
||||
}
|
||||
],
|
||||
"label.pages": [
|
||||
|
|
@ -724,7 +724,7 @@
|
|||
"label.referrer": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Referrer"
|
||||
"value": "Чиглүүлэгч"
|
||||
}
|
||||
],
|
||||
"label.referrers": [
|
||||
|
|
@ -748,7 +748,7 @@
|
|||
"label.region": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Region"
|
||||
"value": "Бүс"
|
||||
}
|
||||
],
|
||||
"label.regions": [
|
||||
|
|
@ -766,7 +766,7 @@
|
|||
"label.reports": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Reports"
|
||||
"value": "Тайлан"
|
||||
}
|
||||
],
|
||||
"label.required": [
|
||||
|
|
@ -790,13 +790,13 @@
|
|||
"label.retention": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Retention"
|
||||
"value": "Барилт"
|
||||
}
|
||||
],
|
||||
"label.retention-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Measure your website stickiness by tracking how often users return."
|
||||
"value": "Хэрэглэгчид таны веб рүү дахин хандах буюу хэрэглэгчидээ хэр тогтоож буйг хэмжих."
|
||||
}
|
||||
],
|
||||
"label.role": [
|
||||
|
|
@ -808,7 +808,7 @@
|
|||
"label.run-query": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Run query"
|
||||
"value": "Query ажиллуулах"
|
||||
}
|
||||
],
|
||||
"label.save": [
|
||||
|
|
@ -826,13 +826,13 @@
|
|||
"label.search": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Search"
|
||||
"value": "Хайх"
|
||||
}
|
||||
],
|
||||
"label.select-date": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Select date"
|
||||
"value": "Огноо сонгох"
|
||||
}
|
||||
],
|
||||
"label.select-website": [
|
||||
|
|
@ -868,7 +868,7 @@
|
|||
"label.sum": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Sum"
|
||||
"value": "Нийлбэр"
|
||||
}
|
||||
],
|
||||
"label.tablet": [
|
||||
|
|
@ -904,7 +904,7 @@
|
|||
"label.team-name": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Team name"
|
||||
"value": "Багийн нэр"
|
||||
}
|
||||
],
|
||||
"label.team-owner": [
|
||||
|
|
@ -916,7 +916,7 @@
|
|||
"label.team-websites": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Team websites"
|
||||
"value": "Багийн вебүүд"
|
||||
}
|
||||
],
|
||||
"label.teams": [
|
||||
|
|
@ -976,13 +976,13 @@
|
|||
"label.total": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Total"
|
||||
"value": "Нийт"
|
||||
}
|
||||
],
|
||||
"label.total-records": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Total records"
|
||||
"value": "Нийт мөриийн тоо"
|
||||
}
|
||||
],
|
||||
"label.tracking-code": [
|
||||
|
|
@ -994,13 +994,13 @@
|
|||
"label.true": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "True"
|
||||
"value": "Үнэн"
|
||||
}
|
||||
],
|
||||
"label.type": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Type"
|
||||
"value": "Төрөл"
|
||||
}
|
||||
],
|
||||
"label.unique": [
|
||||
|
|
@ -1024,7 +1024,7 @@
|
|||
"label.untitled": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Untitled"
|
||||
"value": "Гарчиггүй"
|
||||
}
|
||||
],
|
||||
"label.url": [
|
||||
|
|
@ -1060,7 +1060,7 @@
|
|||
"label.value": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Value"
|
||||
"value": "Утга"
|
||||
}
|
||||
],
|
||||
"label.view": [
|
||||
|
|
@ -1078,7 +1078,7 @@
|
|||
"label.view-only": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "View only"
|
||||
"value": "Зөвхөн үзэх"
|
||||
}
|
||||
],
|
||||
"label.views": [
|
||||
|
|
@ -1096,7 +1096,7 @@
|
|||
"label.website": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Website"
|
||||
"value": "Веб"
|
||||
}
|
||||
],
|
||||
"label.website-id": [
|
||||
|
|
@ -1114,7 +1114,7 @@
|
|||
"label.window": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Window"
|
||||
"value": "Цонх"
|
||||
}
|
||||
],
|
||||
"label.yesterday": [
|
||||
|
|
@ -1210,7 +1210,7 @@
|
|||
"message.delete-account": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "To delete this account, type "
|
||||
"value": "Энэ бүртгэлийг устгахын тулд доорх хэсэгт "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -1218,13 +1218,13 @@
|
|||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": " in the box below to confirm."
|
||||
"value": " гэж бичиж баталгаажуулна уу."
|
||||
}
|
||||
],
|
||||
"message.delete-website": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "To delete this website, type "
|
||||
"value": "Энэ вебийг устгахын тулд доорх хэсэгт "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -1232,7 +1232,7 @@
|
|||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": " in the box below to confirm."
|
||||
"value": " гэж бичиж баталгаажуулна уу."
|
||||
}
|
||||
],
|
||||
"message.delete-website-warning": [
|
||||
|
|
@ -1296,7 +1296,7 @@
|
|||
"message.new-version-available": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "A new version of Umami "
|
||||
"value": "Umami-н шинэ хувилбар "
|
||||
},
|
||||
{
|
||||
"type": 1,
|
||||
|
|
@ -1304,7 +1304,7 @@
|
|||
},
|
||||
{
|
||||
"type": 0,
|
||||
"value": " is available!"
|
||||
"value": " гарсан байна!"
|
||||
}
|
||||
],
|
||||
"message.no-data-available": [
|
||||
|
|
@ -1316,7 +1316,7 @@
|
|||
"message.no-event-data": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "No event data is available."
|
||||
"value": "Үйлдлийн өгөгдөл алга."
|
||||
}
|
||||
],
|
||||
"message.no-match-password": [
|
||||
|
|
@ -1328,7 +1328,7 @@
|
|||
"message.no-results-found": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "No results were found."
|
||||
"value": "Ямар ч үр дүн олдсонгүй."
|
||||
}
|
||||
],
|
||||
"message.no-team-websites": [
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
"label.create": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Create"
|
||||
"value": "创建"
|
||||
}
|
||||
],
|
||||
"label.create-report": [
|
||||
|
|
@ -380,19 +380,19 @@
|
|||
"label.field": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Field"
|
||||
"value": "字段"
|
||||
}
|
||||
],
|
||||
"label.fields": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Fields"
|
||||
"value": "字段"
|
||||
}
|
||||
],
|
||||
"label.filter": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Filter"
|
||||
"value": "筛选器"
|
||||
}
|
||||
],
|
||||
"label.filter-combined": [
|
||||
|
|
@ -422,19 +422,19 @@
|
|||
"label.funnel-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Understand the conversion and drop-off rate of users."
|
||||
"value": "了解用户的转换率和退出率。"
|
||||
}
|
||||
],
|
||||
"label.greater-than": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Greater than"
|
||||
"value": "大于"
|
||||
}
|
||||
],
|
||||
"label.greater-than-equals": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Greater than or equals"
|
||||
"value": "大于或等于"
|
||||
}
|
||||
],
|
||||
"label.insights": [
|
||||
|
|
@ -446,7 +446,7 @@
|
|||
"label.insights-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Dive deeper into your data by using segments and filters."
|
||||
"value": "通过使用筛选器和划分时间段来更深入地研究数据。"
|
||||
}
|
||||
],
|
||||
"label.is": [
|
||||
|
|
@ -804,7 +804,7 @@
|
|||
"label.retention-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Measure your website stickiness by tracking how often users return."
|
||||
"value": "通过跟踪用户返回的频率来衡量网站的用户粘性。"
|
||||
}
|
||||
],
|
||||
"label.role": [
|
||||
|
|
@ -834,7 +834,7 @@
|
|||
"label.search": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Search"
|
||||
"value": "搜索"
|
||||
}
|
||||
],
|
||||
"label.select-date": [
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
"label.create": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Create"
|
||||
"value": "建立"
|
||||
}
|
||||
],
|
||||
"label.create-report": [
|
||||
|
|
@ -392,7 +392,7 @@
|
|||
"label.filter": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Filter"
|
||||
"value": "篩選器"
|
||||
}
|
||||
],
|
||||
"label.filter-combined": [
|
||||
|
|
@ -422,7 +422,7 @@
|
|||
"label.funnel-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Understand the conversion and drop-off rate of users."
|
||||
"value": "瞭解使用者的轉換率和退出率"
|
||||
}
|
||||
],
|
||||
"label.greater-than": [
|
||||
|
|
@ -446,7 +446,7 @@
|
|||
"label.insights-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Dive deeper into your data by using segments and filters."
|
||||
"value": "透過使用區段和篩選器來深入探索你的數據"
|
||||
}
|
||||
],
|
||||
"label.is": [
|
||||
|
|
@ -800,7 +800,7 @@
|
|||
"label.retention-description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Measure your website stickiness by tracking how often users return."
|
||||
"value": "透過追蹤使用者回訪的頻率來衡量您的網站黏著度。"
|
||||
}
|
||||
],
|
||||
"label.role": [
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const customResolver = resolve({
|
|||
|
||||
const aliasConfig = {
|
||||
entries: [
|
||||
{ find: /^app/, replacement: path.resolve('./src/app') },
|
||||
{ find: /^components/, replacement: path.resolve('./src/components') },
|
||||
{ find: /^hooks/, replacement: path.resolve('./src/hooks') },
|
||||
{ find: /^lib/, replacement: path.resolve('./src/lib') },
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
require('dotenv').config();
|
||||
const cli = require('next/dist/cli/next-start');
|
||||
|
||||
cli.nextStart(['-p', process.env.PORT || 3000, '-H', process.env.HOSTNAME || '0.0.0.0']);
|
||||
cli.nextStart({
|
||||
'--port': process.env.PORT || 3000,
|
||||
'--hostname': process.env.HOSTNAME || '0.0.0.0',
|
||||
_: [],
|
||||
});
|
||||
|
|
|
|||
58
src/app/(main)/NavBar.js
Normal file
58
src/app/(main)/NavBar.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
'use client';
|
||||
import { Icon, Text } from 'react-basics';
|
||||
import Link from 'next/link';
|
||||
import classNames from 'classnames';
|
||||
import Icons from 'components/icons';
|
||||
import ThemeButton from 'components/input/ThemeButton';
|
||||
import LanguageButton from 'components/input/LanguageButton';
|
||||
import ProfileButton from 'components/input/ProfileButton';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import HamburgerButton from 'components/common/HamburgerButton';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import styles from './NavBar.module.css';
|
||||
|
||||
export function NavBar() {
|
||||
const pathname = usePathname();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const links = [
|
||||
{ label: formatMessage(labels.dashboard), url: '/dashboard' },
|
||||
{ label: formatMessage(labels.websites), url: '/websites' },
|
||||
{ label: formatMessage(labels.reports), url: '/reports' },
|
||||
{ label: formatMessage(labels.settings), url: '/settings' },
|
||||
].filter(n => n);
|
||||
|
||||
return (
|
||||
<div className={styles.navbar}>
|
||||
<div className={styles.logo}>
|
||||
<Icon size="lg">
|
||||
<Icons.Logo />
|
||||
</Icon>
|
||||
<Text>umami</Text>
|
||||
</div>
|
||||
<div className={styles.links}>
|
||||
{links.map(({ url, label }) => {
|
||||
return (
|
||||
<Link
|
||||
key={url}
|
||||
href={url}
|
||||
className={classNames({ [styles.selected]: pathname.startsWith(url) })}
|
||||
>
|
||||
<Text>{label}</Text>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.actions}>
|
||||
<ThemeButton />
|
||||
<LanguageButton />
|
||||
<ProfileButton />
|
||||
</div>
|
||||
<div className={styles.mobile}>
|
||||
<HamburgerButton />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NavBar;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.navbar {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr 1fr;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
background: var(--base75);
|
||||
|
|
@ -9,17 +9,6 @@
|
|||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -35,29 +24,24 @@
|
|||
flex-direction: row;
|
||||
gap: 30px;
|
||||
padding: 0 40px;
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
line-height: 60px;
|
||||
.links a,
|
||||
.links a:active,
|
||||
.links a:visited {
|
||||
color: var(--font-color200);
|
||||
line-height: 60px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.links span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
color: var(--font-color100);
|
||||
border-bottom: 2px solid var(--primary400);
|
||||
}
|
||||
|
||||
.links .selected {
|
||||
.links a.selected {
|
||||
color: var(--font-color100);
|
||||
border-bottom: 2px solid var(--primary400);
|
||||
}
|
||||
|
|
@ -68,7 +52,6 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
|
|
@ -76,6 +59,10 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.links,
|
||||
.actions {
|
||||
display: none;
|
||||
27
src/app/(main)/Shell.tsx
Normal file
27
src/app/(main)/Shell.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
'use client';
|
||||
import Script from 'next/script';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import UpdateNotice from 'components/common/UpdateNotice';
|
||||
import { useRequireLogin, useConfig } from 'components/hooks';
|
||||
|
||||
export function Shell({ children }) {
|
||||
const { user } = useRequireLogin();
|
||||
const config = useConfig();
|
||||
const pathname = usePathname();
|
||||
|
||||
if (!user || !config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
<UpdateNotice user={user} config={config} />
|
||||
{process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (
|
||||
<Script src={`telemetry.js`} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Shell;
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
'use client';
|
||||
import WebsiteSelect from 'components/input/WebsiteSelect';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import EventsChart from 'components/metrics/EventsChart';
|
||||
import WebsiteChart from 'components/pages/websites/WebsiteChart';
|
||||
import WebsiteChart from '../../(main)/websites/[id]/WebsiteChart';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Script from 'next/script';
|
||||
import { Button, Column, Row } from 'react-basics';
|
||||
import { Button } from 'react-basics';
|
||||
import styles from './TestConsole.module.css';
|
||||
|
||||
export function TestConsole() {
|
||||
|
|
@ -90,8 +91,8 @@ export function TestConsole() {
|
|||
src={`${basePath}/script.js`}
|
||||
data-cache="true"
|
||||
/>
|
||||
<Row className={styles.test}>
|
||||
<Column xs="4">
|
||||
<div className={styles.test}>
|
||||
<div>
|
||||
<div className={styles.header}>Page links</div>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
|
||||
|
|
@ -114,8 +115,8 @@ export function TestConsole() {
|
|||
external link (tab)
|
||||
</a>
|
||||
</div>
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.header}>Click events</div>
|
||||
<Button id="send-event-button" data-umami-event="button-click" variant="action">
|
||||
Send event
|
||||
|
|
@ -130,8 +131,8 @@ export function TestConsole() {
|
|||
>
|
||||
Send event with data
|
||||
</Button>
|
||||
</Column>
|
||||
<Column xs="4">
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.header}>Javascript events</div>
|
||||
<Button id="manual-button" variant="action" onClick={handleClick}>
|
||||
Run script
|
||||
|
|
@ -140,14 +141,12 @@ export function TestConsole() {
|
|||
<Button id="manual-button" variant="action" onClick={handleIdentifyClick}>
|
||||
Run identify
|
||||
</Button>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<WebsiteChart websiteId={website.id} />
|
||||
<EventsChart websiteId={website.id} />
|
||||
</Column>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<WebsiteChart websiteId={website.id} />
|
||||
<EventsChart websiteId={website.id} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
20
src/app/(main)/console/[[...id]]/page.tsx
Normal file
20
src/app/(main)/console/[[...id]]/page.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import TestConsole from '../TestConsole';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
async function getEnabled() {
|
||||
return !!process.env.ENABLE_TEST_CONSOLE;
|
||||
}
|
||||
|
||||
export default async function ConsolePage() {
|
||||
const enabled = await getEnabled();
|
||||
|
||||
if (!enabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <TestConsole />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Test Console | umami',
|
||||
};
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||
'use client';
|
||||
import { Button, Icon, Icons, Loading, Text } from 'react-basics';
|
||||
import Link from 'next/link';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Pager from 'components/common/Pager';
|
||||
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
|
||||
import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
|
||||
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
|
||||
import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
|
||||
import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
|
||||
import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useDashboard from 'store/dashboard';
|
||||
|
|
@ -20,18 +20,18 @@ export function Dashboard() {
|
|||
const { get, useQuery } = useApi();
|
||||
const { page, handlePageChange } = useApiFilter();
|
||||
const pageSize = 10;
|
||||
const {
|
||||
data: result,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery(['websites', page, pageSize], () =>
|
||||
const { data: result, isLoading } = useQuery(['websites', page, pageSize], () =>
|
||||
get('/websites', { includeTeams: 1, page, pageSize }),
|
||||
);
|
||||
const { data, count } = result || {};
|
||||
const hasData = data && data?.length !== 0;
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading size="lg" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<>
|
||||
<PageHeader title={formatMessage(labels.dashboard)}>
|
||||
{!editing && hasData && <DashboardSettingsButton />}
|
||||
</PageHeader>
|
||||
|
|
@ -63,7 +63,7 @@ export function Dashboard() {
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
||||
import classNames from 'classnames';
|
||||
|
|
@ -7,7 +8,6 @@ import useDashboard, { saveDashboard } from 'store/dashboard';
|
|||
import useMessages from 'components/hooks/useMessages';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import styles from './DashboardEdit.module.css';
|
||||
import Page from 'components/layout/Page';
|
||||
|
||||
const dragId = 'dashboard-website-ordering';
|
||||
|
||||
|
|
@ -17,11 +17,7 @@ export function DashboardEdit() {
|
|||
const { formatMessage, labels } = useMessages();
|
||||
const [order, setOrder] = useState(websiteOrder || []);
|
||||
const { get, useQuery } = useApi();
|
||||
const {
|
||||
data: result,
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
|
||||
const { data: result } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
|
||||
const { data: websites } = result || {};
|
||||
|
||||
const ordered = useMemo(() => {
|
||||
|
|
@ -59,7 +55,7 @@ export function DashboardEdit() {
|
|||
}
|
||||
|
||||
return (
|
||||
<Page loading={isLoading} error={error}>
|
||||
<>
|
||||
<div className={styles.buttons}>
|
||||
<Button onClick={handleSave} variant="action" size="small">
|
||||
{formatMessage(labels.save)}
|
||||
|
|
@ -105,7 +101,7 @@ export function DashboardEdit() {
|
|||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
</Page>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
10
src/app/(main)/dashboard/page.tsx
Normal file
10
src/app/(main)/dashboard/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import Dashboard from 'app/(main)/dashboard/Dashboard';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function DashboardPage() {
|
||||
return <Dashboard />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Dashboard | umami',
|
||||
};
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
width: 100vw;
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 2;
|
||||
z-index: var(--z-index-popup);
|
||||
}
|
||||
|
||||
.body {
|
||||
19
src/app/(main)/layout.tsx
Normal file
19
src/app/(main)/layout.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import Shell from './Shell';
|
||||
import NavBar from './NavBar';
|
||||
import Page from 'components/layout/Page';
|
||||
import styles from './layout.module.css';
|
||||
|
||||
export default function AppLayout({ children }) {
|
||||
return (
|
||||
<Shell>
|
||||
<main className={styles.layout}>
|
||||
<nav className={styles.nav}>
|
||||
<NavBar />
|
||||
</nav>
|
||||
<section className={styles.body}>
|
||||
<Page>{children}</Page>
|
||||
</section>
|
||||
</main>
|
||||
</Shell>
|
||||
);
|
||||
}
|
||||
42
src/app/(main)/reports/ReportDeleteButton.js
Normal file
42
src/app/(main)/reports/ReportDeleteButton.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { setValue } from 'store/cache';
|
||||
|
||||
export function ReportDeleteButton({ reportId, reportName, onDelete }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { del, useMutation } = useApi();
|
||||
const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
|
||||
|
||||
const handleConfirm = close => {
|
||||
mutate(reportId, {
|
||||
onSuccess: () => {
|
||||
setValue('reports', Date.now());
|
||||
onDelete?.();
|
||||
close();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Trash />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal>
|
||||
{close => (
|
||||
<ConfirmDeleteForm
|
||||
name={reportName}
|
||||
onConfirm={handleConfirm.bind(null, close)}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportDeleteButton;
|
||||
20
src/app/(main)/reports/ReportsDataTable.js
Normal file
20
src/app/(main)/reports/ReportsDataTable.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
'use client';
|
||||
import { useApi } from 'components/hooks';
|
||||
import ReportsTable from './ReportsTable';
|
||||
import useFilterQuery from 'components/hooks/useFilterQuery';
|
||||
import DataTable from 'components/common/DataTable';
|
||||
import useCache from 'store/cache';
|
||||
|
||||
export default function ReportsDataTable({ websiteId }) {
|
||||
const { get } = useApi();
|
||||
const modified = useCache(state => state?.reports);
|
||||
const queryResult = useFilterQuery(['reports', { websiteId, modified }], params =>
|
||||
get(websiteId ? `/websites/${websiteId}/reports` : `/reports`, params),
|
||||
);
|
||||
|
||||
return (
|
||||
<DataTable queryResult={queryResult}>
|
||||
{({ data }) => <ReportsTable data={data} showDomain={!websiteId} />}
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
25
src/app/(main)/reports/ReportsHeader.js
Normal file
25
src/app/(main)/reports/ReportsHeader.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
'use client';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export function ReportsHeader() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const router = useRouter();
|
||||
|
||||
const handleClick = () => router.push('/reports/create');
|
||||
|
||||
return (
|
||||
<PageHeader title={formatMessage(labels.reports)}>
|
||||
<Button variant="primary" onClick={handleClick}>
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.createReport)}</Text>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportsHeader;
|
||||
51
src/app/(main)/reports/ReportsTable.js
Normal file
51
src/app/(main)/reports/ReportsTable.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
|
||||
import LinkButton from 'components/common/LinkButton';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
import ReportDeleteButton from './ReportDeleteButton';
|
||||
|
||||
export function ReportsTable({ data = [], showDomain }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
const breakpoint = useBreakpoint();
|
||||
|
||||
return (
|
||||
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
|
||||
<GridColumn name="name" label={formatMessage(labels.name)} />
|
||||
<GridColumn name="description" label={formatMessage(labels.description)} />
|
||||
<GridColumn name="type" label={formatMessage(labels.type)}>
|
||||
{row => {
|
||||
return formatMessage(
|
||||
labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === row.type)],
|
||||
);
|
||||
}}
|
||||
</GridColumn>
|
||||
{showDomain && (
|
||||
<GridColumn name="domain" label={formatMessage(labels.domain)}>
|
||||
{row => row?.website?.domain}
|
||||
</GridColumn>
|
||||
)}
|
||||
<GridColumn name="action" label="" alignment="end">
|
||||
{row => {
|
||||
const { id, name, userId, website } = row;
|
||||
return (
|
||||
<>
|
||||
{(user.id === userId || user.id === website?.userId) && (
|
||||
<ReportDeleteButton reportId={id} reportName={name} />
|
||||
)}
|
||||
<LinkButton href={`/reports/${id}`}>
|
||||
<Icon>
|
||||
<Icons.ArrowRight />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.view)}</Text>
|
||||
</LinkButton>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</GridColumn>
|
||||
</GridTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReportsTable;
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { useContext } from 'react';
|
||||
import { FormRow } from 'react-basics';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
import DateFilter from 'components/input/DateFilter';
|
||||
import WebsiteSelect from 'components/input/WebsiteSelect';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
import { useContext } from 'react';
|
||||
import { ReportContext } from './Report';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { ReportContext } from './Report';
|
||||
|
||||
export function BaseParameters({
|
||||
showWebsiteSelect = true,
|
||||
|
|
@ -7,7 +7,7 @@ import FieldAggregateForm from './FieldAggregateForm';
|
|||
import FieldFilterForm from './FieldFilterForm';
|
||||
import styles from './FieldAddForm.module.css';
|
||||
|
||||
export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
|
||||
export function FieldAddForm({ fields = [], group, onAdd, onClose }) {
|
||||
const [selected, setSelected] = useState();
|
||||
|
||||
const handleSelect = value => {
|
||||
|
|
@ -28,7 +28,7 @@ export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
|
|||
};
|
||||
|
||||
return createPortal(
|
||||
<PopupForm className={styles.popup} element={element} onClose={onClose}>
|
||||
<PopupForm className={styles.popup}>
|
||||
{!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
|
||||
{selected && group === REPORT_PARAMETERS.fields && (
|
||||
<FieldAggregateForm {...selected} onSelect={handleSave} />
|
||||
|
|
@ -1,16 +1,20 @@
|
|||
import { useState } from 'react';
|
||||
import { Loading } from 'react-basics';
|
||||
import { subDays } from 'date-fns';
|
||||
import FieldSelectForm from './FieldSelectForm';
|
||||
import FieldFilterForm from './FieldFilterForm';
|
||||
import { useApi } from 'components/hooks';
|
||||
import { Loading } from 'react-basics';
|
||||
|
||||
function useValues(websiteId, type) {
|
||||
const now = Date.now();
|
||||
const { get, useQuery } = useApi();
|
||||
const { data, error, isLoading } = useQuery(
|
||||
['websites:values', websiteId, type],
|
||||
() =>
|
||||
get(`/websites/${websiteId}/values`, {
|
||||
type,
|
||||
startAt: +subDays(now, 90),
|
||||
endAt: now,
|
||||
}),
|
||||
{ enabled: !!(websiteId && type) },
|
||||
);
|
||||
|
|
@ -1,18 +1,22 @@
|
|||
'use client';
|
||||
import { createContext } from 'react';
|
||||
import Page from 'components/layout/Page';
|
||||
import styles from './reports.module.css';
|
||||
import { useReport } from 'components/hooks';
|
||||
import styles from './Report.module.css';
|
||||
|
||||
export const ReportContext = createContext(null);
|
||||
|
||||
export function Report({ reportId, defaultParameters, children, ...props }) {
|
||||
const report = useReport(reportId, defaultParameters);
|
||||
|
||||
if (!report) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ReportContext.Provider value={{ ...report }}>
|
||||
<Page {...props} className={styles.container}>
|
||||
<div {...props} className={styles.container}>
|
||||
{children}
|
||||
</Page>
|
||||
</div>
|
||||
</ReportContext.Provider>
|
||||
);
|
||||
}
|
||||
5
src/app/(main)/reports/[id]/Report.module.css
Normal file
5
src/app/(main)/reports/[id]/Report.module.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: max-content 1fr;
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import styles from './reports.module.css';
|
||||
import styles from './ReportBody.module.css';
|
||||
|
||||
export function ReportBody({ children }) {
|
||||
return <div className={styles.body}>{children}</div>;
|
||||
5
src/app/(main)/reports/[id]/ReportBody.module.css
Normal file
5
src/app/(main)/reports/[id]/ReportBody.module.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.body {
|
||||
padding-left: 20px;
|
||||
grid-row: 2/3;
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
26
src/app/(main)/reports/[id]/ReportDetails.js
Normal file
26
src/app/(main)/reports/[id]/ReportDetails.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
'use client';
|
||||
import FunnelReport from '../funnel/FunnelReport';
|
||||
import EventDataReport from '../event-data/EventDataReport';
|
||||
import InsightsReport from '../insights/InsightsReport';
|
||||
import RetentionReport from '../retention/RetentionReport';
|
||||
import { useApi } from 'components/hooks';
|
||||
|
||||
const reports = {
|
||||
funnel: FunnelReport,
|
||||
'event-data': EventDataReport,
|
||||
insights: InsightsReport,
|
||||
retention: RetentionReport,
|
||||
};
|
||||
|
||||
export default function ReportDetails({ reportId }) {
|
||||
const { get, useQuery } = useApi();
|
||||
const { data: report } = useQuery(['reports', reportId], () => get(`/reports/${reportId}`));
|
||||
|
||||
if (!report) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const ReportComponent = reports[report.type];
|
||||
|
||||
return <ReportComponent reportId={reportId} />;
|
||||
}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
import { useContext } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { useMessages, useApi } from 'components/hooks';
|
||||
import { ReportContext } from './Report';
|
||||
import styles from './ReportHeader.module.css';
|
||||
import reportStyles from './reports.module.css';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
|
||||
export function ReportHeader({ icon }) {
|
||||
const { report, updateReport } = useContext(ReportContext);
|
||||
|
|
@ -47,24 +46,39 @@ export function ReportHeader({ icon }) {
|
|||
updateReport({ description });
|
||||
};
|
||||
|
||||
const Title = () => {
|
||||
return (
|
||||
<>
|
||||
<Icon size="lg">{icon}</Icon>
|
||||
<InlineEditField
|
||||
key={name}
|
||||
name="name"
|
||||
value={name}
|
||||
placeholder={defaultName}
|
||||
onCommit={handleNameChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
if (!report) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={reportStyles.header}>
|
||||
<PageHeader title={<Title />}>
|
||||
<div className={styles.header}>
|
||||
<div>
|
||||
<div className={styles.type}>
|
||||
{formatMessage(
|
||||
labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.title}>
|
||||
<Icon size="lg">{icon}</Icon>
|
||||
<InlineEditField
|
||||
key={name}
|
||||
name="name"
|
||||
value={name}
|
||||
placeholder={defaultName}
|
||||
onCommit={handleNameChange}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
<InlineEditField
|
||||
key={description}
|
||||
name="description"
|
||||
value={description}
|
||||
placeholder={`+ ${formatMessage(labels.addDescription)}`}
|
||||
onCommit={handleDescriptionChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.actions}>
|
||||
<LoadingButton
|
||||
variant="primary"
|
||||
isLoading={isCreating || isUpdating}
|
||||
|
|
@ -73,15 +87,6 @@ export function ReportHeader({ icon }) {
|
|||
>
|
||||
{formatMessage(labels.save)}
|
||||
</LoadingButton>
|
||||
</PageHeader>
|
||||
<div className={styles.description}>
|
||||
<InlineEditField
|
||||
key={description}
|
||||
name="description"
|
||||
value={description}
|
||||
placeholder={`+ ${formatMessage(labels.addDescription)}`}
|
||||
onCommit={handleDescriptionChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
36
src/app/(main)/reports/[id]/ReportHeader.module.css
Normal file
36
src/app/(main)/reports/[id]/ReportHeader.module.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
align-items: center;
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 3;
|
||||
margin: 20px 0 40px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
gap: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--base600);
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--font-color300);
|
||||
max-width: 500px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import styles from './reports.module.css';
|
||||
import styles from './ReportMenu.module.css';
|
||||
|
||||
export function ReportMenu({ children }) {
|
||||
return <div className={styles.menu}>{children}</div>;
|
||||
7
src/app/(main)/reports/[id]/ReportMenu.module.css
Normal file
7
src/app/(main)/reports/[id]/ReportMenu.module.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.menu {
|
||||
width: 300px;
|
||||
padding-right: 20px;
|
||||
border-right: 1px solid var(--base300);
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
14
src/app/(main)/reports/[id]/page.tsx
Normal file
14
src/app/(main)/reports/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import ReportDetails from './ReportDetails';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function ReportDetailsPage({ params: { id } }) {
|
||||
if (!id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <ReportDetails reportId={id} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Reports | umami',
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
import Link from 'next/link';
|
||||
import { Button, Icons, Text, Icon } from 'react-basics';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Funnel from 'assets/funnel.svg';
|
||||
import Lightbulb from 'assets/lightbulb.svg';
|
||||
|
|
@ -57,7 +57,7 @@ export function ReportTemplates({ showHeader = true }) {
|
|||
];
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<>
|
||||
{showHeader && <PageHeader title={formatMessage(labels.reports)} />}
|
||||
<div className={styles.reports}>
|
||||
{reports.map(({ title, description, url, icon }) => {
|
||||
|
|
@ -66,7 +66,7 @@ export function ReportTemplates({ showHeader = true }) {
|
|||
);
|
||||
})}
|
||||
</div>
|
||||
</Page>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
10
src/app/(main)/reports/create/page.tsx
Normal file
10
src/app/(main)/reports/create/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import ReportTemplates from './ReportTemplates';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function ReportsCreatePage() {
|
||||
return <ReportTemplates />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Report | umami',
|
||||
};
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { useContext, useRef } from 'react';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import Empty from 'components/common/Empty';
|
||||
import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
|
||||
import Icons from 'components/icons';
|
||||
import FieldAddForm from '../FieldAddForm';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
import { useApi, useMessages } from 'components/hooks';
|
||||
import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
import FieldAddForm from '../[id]/FieldAddForm';
|
||||
import ParameterList from '../[id]/ParameterList';
|
||||
import BaseParameters from '../[id]/BaseParameters';
|
||||
import styles from './EventDataParameters.module.css';
|
||||
|
||||
function useFields(websiteId, startDate, endDate) {
|
||||
|
|
@ -74,7 +74,7 @@ export function EventDataParameters() {
|
|||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Popup position="bottom" alignment="start">
|
||||
{(close, element) => {
|
||||
{close => {
|
||||
return (
|
||||
<FieldAddForm
|
||||
fields={data.map(({ eventKey, eventDataType }) => ({
|
||||
|
|
@ -82,7 +82,6 @@ export function EventDataParameters() {
|
|||
type: DATA_TYPES[eventDataType],
|
||||
}))}
|
||||
group={group}
|
||||
element={element}
|
||||
onAdd={handleAdd}
|
||||
onClose={close}
|
||||
/>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import Report from '../[id]/Report';
|
||||
import ReportHeader from '../[id]/ReportHeader';
|
||||
import ReportMenu from '../[id]/ReportMenu';
|
||||
import ReportBody from '../[id]/ReportBody';
|
||||
import EventDataParameters from './EventDataParameters';
|
||||
import EventDataTable from './EventDataTable';
|
||||
import Nodes from 'assets/nodes.svg';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useContext } from 'react';
|
||||
import { GridTable, GridColumn } from 'react-basics';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
|
||||
export function EventDataTable() {
|
||||
const { report } = useContext(ReportContext);
|
||||
|
|
@ -5,7 +5,7 @@ import useTheme from 'components/hooks/useTheme';
|
|||
import BarChart from 'components/metrics/BarChart';
|
||||
import { formatLongNumber } from 'lib/format';
|
||||
import styles from './FunnelChart.module.css';
|
||||
import { ReportContext } from '../Report';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
|
||||
export function FunnelChart({ className, loading }) {
|
||||
const { report } = useContext(ReportContext);
|
||||
|
|
@ -13,10 +13,10 @@ import {
|
|||
} from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import UrlAddForm from './UrlAddForm';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
import PopupForm from '../PopupForm';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
import BaseParameters from '../[id]/BaseParameters';
|
||||
import ParameterList from '../[id]/ParameterList';
|
||||
import PopupForm from '../[id]/PopupForm';
|
||||
|
||||
export function FunnelParameters() {
|
||||
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
|
||||
|
|
@ -52,14 +52,10 @@ export function FunnelParameters() {
|
|||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Popup position="bottom" alignment="start">
|
||||
{(close, element) => {
|
||||
return (
|
||||
<PopupForm element={element} onClose={close}>
|
||||
<UrlAddForm onAdd={handleAddUrl} />
|
||||
</PopupForm>
|
||||
);
|
||||
}}
|
||||
<Popup position="right" alignment="start">
|
||||
<PopupForm>
|
||||
<UrlAddForm onAdd={handleAddUrl} />
|
||||
</PopupForm>
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
'use client';
|
||||
import FunnelChart from './FunnelChart';
|
||||
import FunnelTable from './FunnelTable';
|
||||
import FunnelParameters from './FunnelParameters';
|
||||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import Report from '../[id]/Report';
|
||||
import ReportHeader from '../[id]/ReportHeader';
|
||||
import ReportMenu from '../[id]/ReportMenu';
|
||||
import ReportBody from '../[id]/ReportBody';
|
||||
import Funnel from 'assets/funnel.svg';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useContext } from 'react';
|
||||
import ListTable from 'components/metrics/ListTable';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
|
||||
export function FunnelTable() {
|
||||
const { report } = useContext(ReportContext);
|
||||
10
src/app/(main)/reports/funnel/page.tsx
Normal file
10
src/app/(main)/reports/funnel/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import FunnelReport from './FunnelReport';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function FunnelReportPage() {
|
||||
return <FunnelReport reportId={null} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Funnel Report | umami',
|
||||
};
|
||||
|
|
@ -10,14 +10,14 @@ import {
|
|||
Popup,
|
||||
TooltipPopup,
|
||||
} from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import Icons from 'components/icons';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import ParameterList from '../ParameterList';
|
||||
import BaseParameters from '../[id]/BaseParameters';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
import ParameterList from '../[id]/ParameterList';
|
||||
import FilterSelectForm from '../[id]/FilterSelectForm';
|
||||
import FieldSelectForm from '../[id]/FieldSelectForm';
|
||||
import PopupForm from '../[id]/PopupForm';
|
||||
import styles from './InsightsParameters.module.css';
|
||||
import PopupForm from '../PopupForm';
|
||||
import FilterSelectForm from '../FilterSelectForm';
|
||||
import FieldSelectForm from '../FieldSelectForm';
|
||||
|
||||
export function InsightsParameters() {
|
||||
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
|
||||
|
|
@ -81,26 +81,22 @@ export function InsightsParameters() {
|
|||
</Icon>
|
||||
</TooltipPopup>
|
||||
<Popup position="bottom" alignment="start" className={styles.popup}>
|
||||
{close => {
|
||||
return (
|
||||
<PopupForm onClose={close}>
|
||||
{id === 'fields' && (
|
||||
<FieldSelectForm
|
||||
items={fieldOptions}
|
||||
onSelect={handleAdd.bind(null, id)}
|
||||
showType={false}
|
||||
/>
|
||||
)}
|
||||
{id === 'filters' && (
|
||||
<FilterSelectForm
|
||||
websiteId={websiteId}
|
||||
items={fieldOptions}
|
||||
onSelect={handleAdd.bind(null, id)}
|
||||
/>
|
||||
)}
|
||||
</PopupForm>
|
||||
);
|
||||
}}
|
||||
<PopupForm>
|
||||
{id === 'fields' && (
|
||||
<FieldSelectForm
|
||||
items={fieldOptions}
|
||||
onSelect={handleAdd.bind(null, id)}
|
||||
showType={false}
|
||||
/>
|
||||
)}
|
||||
{id === 'filters' && (
|
||||
<FilterSelectForm
|
||||
websiteId={websiteId}
|
||||
items={fieldOptions}
|
||||
onSelect={handleAdd.bind(null, id)}
|
||||
/>
|
||||
)}
|
||||
</PopupForm>
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
'use client';
|
||||
import Report from '../[id]/Report';
|
||||
import ReportHeader from '../[id]/ReportHeader';
|
||||
import ReportMenu from '../[id]/ReportMenu';
|
||||
import ReportBody from '../[id]/ReportBody';
|
||||
import InsightsParameters from './InsightsParameters';
|
||||
import InsightsTable from './InsightsTable';
|
||||
import Lightbulb from 'assets/lightbulb.svg';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useContext, useEffect, useState } from 'react';
|
||||
import { GridTable, GridColumn } from 'react-basics';
|
||||
import { useFormat, useMessages } from 'components/hooks';
|
||||
import { ReportContext } from '../Report';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
|
||||
export function InsightsTable() {
|
||||
10
src/app/(main)/reports/insights/page.tsx
Normal file
10
src/app/(main)/reports/insights/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import InsightsReport from './InsightsReport';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function InsightsReportPage() {
|
||||
return <InsightsReport reportId={null} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Insights Report | umami',
|
||||
};
|
||||
14
src/app/(main)/reports/page.tsx
Normal file
14
src/app/(main)/reports/page.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import ReportsHeader from './ReportsHeader';
|
||||
import ReportsDataTable from './ReportsDataTable';
|
||||
|
||||
export default function ReportsPage() {
|
||||
return (
|
||||
<>
|
||||
<ReportsHeader />
|
||||
<ReportsDataTable />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export const metadata = {
|
||||
title: 'Reports | umami',
|
||||
};
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { useContext, useRef } from 'react';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
|
||||
import { ReportContext } from 'components/pages/reports/Report';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
import { MonthSelect } from 'components/input/MonthSelect';
|
||||
import BaseParameters from '../BaseParameters';
|
||||
import BaseParameters from '../[id]/BaseParameters';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
|
||||
export function RetentionParameters() {
|
||||
|
|
@ -19,6 +19,7 @@ export function RetentionParameters() {
|
|||
const handleSubmit = (data, e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (!queryDisabled) {
|
||||
runReport(data);
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
'use client';
|
||||
import RetentionTable from './RetentionTable';
|
||||
import RetentionParameters from './RetentionParameters';
|
||||
import Report from '../Report';
|
||||
import ReportHeader from '../ReportHeader';
|
||||
import ReportMenu from '../ReportMenu';
|
||||
import ReportBody from '../ReportBody';
|
||||
import Report from '../[id]/Report';
|
||||
import ReportHeader from '../[id]/ReportHeader';
|
||||
import ReportMenu from '../[id]/ReportMenu';
|
||||
import ReportBody from '../[id]/ReportBody';
|
||||
import Magnet from 'assets/magnet.svg';
|
||||
import { REPORT_TYPES } from 'lib/constants';
|
||||
import { parseDateRange } from 'lib/date';
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
import { useContext } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ReportContext } from '../Report';
|
||||
import { ReportContext } from '../[id]/Report';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useLocale } from 'components/hooks';
|
||||
import { useMessages, useLocale } from 'components/hooks';
|
||||
import { formatDate } from 'lib/date';
|
||||
import styles from './RetentionTable.module.css';
|
||||
|
||||
export function RetentionTable() {
|
||||
const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
|
||||
|
||||
export function RetentionTable({ days = DAYS }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { locale } = useLocale();
|
||||
const { report } = useContext(ReportContext);
|
||||
|
|
@ -17,8 +18,6 @@ export function RetentionTable() {
|
|||
return <EmptyPlaceholder />;
|
||||
}
|
||||
|
||||
const days = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
|
||||
|
||||
const rows = data.reduce((arr, row) => {
|
||||
const { date, visitors, day } = row;
|
||||
if (day === 0) {
|
||||
9
src/app/(main)/reports/retention/page.js
Normal file
9
src/app/(main)/reports/retention/page.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import RetentionReport from './RetentionReport';
|
||||
|
||||
export default function RetentionReportPage() {
|
||||
return <RetentionReport reportId={null} />;
|
||||
}
|
||||
|
||||
export const metadata = {
|
||||
title: 'Create Report | umami',
|
||||
};
|
||||
31
src/app/(main)/settings/layout.module.css
Normal file
31
src/app/(main)/settings/layout.module.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 240px;
|
||||
padding-top: 34px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
import { Row, Column } from 'react-basics';
|
||||
import { useRouter } from 'next/router';
|
||||
import SideNav from './SideNav';
|
||||
'use client';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import styles from './SettingsLayout.module.css';
|
||||
import SideNav from 'components/layout/SideNav';
|
||||
import styles from './layout.module.css';
|
||||
|
||||
export function SettingsLayout({ children }) {
|
||||
export default function SettingsLayout({ children }) {
|
||||
const { user } = useUser();
|
||||
const { pathname } = useRouter();
|
||||
const pathname = usePathname();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const cloudMode = Boolean(process.env.cloudMode);
|
||||
const cloudMode = !!process.env.cloudMode;
|
||||
|
||||
const items = [
|
||||
{ key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
|
||||
|
|
@ -20,18 +20,18 @@ export function SettingsLayout({ children }) {
|
|||
|
||||
const getKey = () => items.find(({ url }) => pathname === url)?.key;
|
||||
|
||||
if (cloudMode && pathname != '/settings/profile') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<div className={styles.layout}>
|
||||
{!cloudMode && (
|
||||
<Column className={styles.menu} defaultSize={12} md={4} lg={3} xl={2}>
|
||||
<div className={styles.menu}>
|
||||
<SideNav items={items} shallow={true} selectedKey={getKey()} />
|
||||
</Column>
|
||||
</div>
|
||||
)}
|
||||
<Column className={styles.content} defaultSize={12} md={8} lg={9} xl={10}>
|
||||
{children}
|
||||
</Column>
|
||||
</Row>
|
||||
<div className={styles.content}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsLayout;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
|
||||
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
|
||||
import PasswordEditForm from 'app/(main)/settings/profile/PasswordEditForm';
|
||||
import Icons from 'components/icons';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
11
src/app/(main)/settings/profile/ProfileHeader.js
Normal file
11
src/app/(main)/settings/profile/ProfileHeader.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
'use client';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { useMessages } from 'components/hooks';
|
||||
|
||||
export function ProfileHeader() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return <PageHeader title={formatMessage(labels.profile)}></PageHeader>;
|
||||
}
|
||||
|
||||
export default ProfileHeader;
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
'use client';
|
||||
import { Form, FormRow } from 'react-basics';
|
||||
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
|
||||
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
|
||||
import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
|
||||
import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
|
||||
import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
|
||||
import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
|
||||
import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
|
||||
import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
|
||||
import PasswordChangeButton from './PasswordChangeButton';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { ROLES } from 'lib/constants';
|
||||
|
||||
export function ProfileDetails() {
|
||||
export function ProfileSettings() {
|
||||
const { user } = useUser();
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const cloudMode = Boolean(process.env.cloudMode);
|
||||
|
|
@ -58,4 +59,4 @@ export function ProfileDetails() {
|
|||
);
|
||||
}
|
||||
|
||||
export default ProfileDetails;
|
||||
export default ProfileSettings;
|
||||
16
src/app/(main)/settings/profile/page.tsx
Normal file
16
src/app/(main)/settings/profile/page.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import ProfileHeader from './ProfileHeader';
|
||||
import ProfileSettings from './ProfileSettings';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
<>
|
||||
<ProfileHeader />
|
||||
<ProfileSettings />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Profile Settings | umami',
|
||||
};
|
||||
|
|
@ -8,6 +8,7 @@ import {
|
|||
Button,
|
||||
SubmitButton,
|
||||
} from 'react-basics';
|
||||
import { setValue } from 'store/cache';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
|
||||
|
|
@ -20,8 +21,9 @@ export function TeamAddForm({ onSave, onClose }) {
|
|||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
setValue('teams', Date.now());
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
25
src/app/(main)/settings/teams/TeamDeleteButton.js
Normal file
25
src/app/(main)/settings/teams/TeamDeleteButton.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import TeamDeleteForm from './TeamDeleteForm';
|
||||
|
||||
export function TeamDeleteButton({ teamId, teamName, onDelete }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon>
|
||||
<Icons.Trash />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.delete)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.deleteTeam)}>
|
||||
{close => (
|
||||
<TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamDeleteButton;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { setValue } from 'store/cache';
|
||||
|
||||
export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
|
||||
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||
|
|
@ -10,8 +11,9 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
|
|||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
setValue('teams', Date.now());
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -10,6 +10,7 @@ import {
|
|||
} from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { setValue } from 'store/cache';
|
||||
|
||||
export function TeamJoinForm({ onSave, onClose }) {
|
||||
const { formatMessage, labels, getMessage } = useMessages();
|
||||
|
|
@ -20,8 +21,9 @@ export function TeamJoinForm({ onSave, onClose }) {
|
|||
const handleSubmit = async data => {
|
||||
mutate(data, {
|
||||
onSuccess: async () => {
|
||||
onSave();
|
||||
onClose();
|
||||
setValue('teams:members', Date.now());
|
||||
onSave?.();
|
||||
onClose?.();
|
||||
},
|
||||
});
|
||||
};
|
||||
35
src/app/(main)/settings/teams/TeamLeaveButton.js
Normal file
35
src/app/(main)/settings/teams/TeamLeaveButton.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import useLocale from 'components/hooks/useLocale';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import TeamDeleteForm from './TeamLeaveForm';
|
||||
|
||||
export function TeamLeaveButton({ teamId, teamName, onLeave }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { dir } = useLocale();
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<ModalTrigger>
|
||||
<Button>
|
||||
<Icon rotate={dir === 'rtl' ? 180 : 0}>
|
||||
<Icons.Logout />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.leave)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.leaveTeam)}>
|
||||
{close => (
|
||||
<TeamDeleteForm
|
||||
teamId={teamId}
|
||||
userId={user.id}
|
||||
teamName={teamName}
|
||||
onSave={onLeave}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamLeaveButton;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import { setValue } from 'store/cache';
|
||||
|
||||
export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
|
||||
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||
|
|
@ -12,6 +13,7 @@ export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
|
|||
{},
|
||||
{
|
||||
onSuccess: async () => {
|
||||
setValue('team:members', Date.now());
|
||||
onSave();
|
||||
onClose();
|
||||
},
|
||||
24
src/app/(main)/settings/teams/TeamsAddButton.js
Normal file
24
src/app/(main)/settings/teams/TeamsAddButton.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
|
||||
import Icons from 'components/icons';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import TeamAddForm from './TeamAddForm';
|
||||
|
||||
export function TeamsAddButton({ onAdd }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<ModalTrigger>
|
||||
<Button variant="primary">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.createTeam)}</Text>
|
||||
</Button>
|
||||
<Modal title={formatMessage(labels.createTeam)}>
|
||||
{close => <TeamAddForm onSave={onAdd} onClose={close} />}
|
||||
</Modal>
|
||||
</ModalTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamsAddButton;
|
||||
26
src/app/(main)/settings/teams/TeamsDataTable.js
Normal file
26
src/app/(main)/settings/teams/TeamsDataTable.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
'use client';
|
||||
import DataTable from 'components/common/DataTable';
|
||||
import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
|
||||
import useApi from 'components/hooks/useApi';
|
||||
import useFilterQuery from 'components/hooks/useFilterQuery';
|
||||
import useCache from 'store/cache';
|
||||
|
||||
export function TeamsDataTable() {
|
||||
const { get } = useApi();
|
||||
const modified = useCache(state => state?.teams);
|
||||
const queryResult = useFilterQuery(['teams', { modified }], params => {
|
||||
return get(`/teams`, {
|
||||
...params,
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<DataTable queryResult={queryResult}>
|
||||
{({ data }) => {
|
||||
return <TeamsTable data={data} />;
|
||||
}}
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamsDataTable;
|
||||
24
src/app/(main)/settings/teams/TeamsHeader.js
Normal file
24
src/app/(main)/settings/teams/TeamsHeader.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
'use client';
|
||||
import { Flexbox } from 'react-basics';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import { ROLES } from 'lib/constants';
|
||||
import useUser from 'components/hooks/useUser';
|
||||
import useMessages from 'components/hooks/useMessages';
|
||||
import TeamsJoinButton from './TeamsJoinButton';
|
||||
import TeamsAddButton from './TeamsAddButton';
|
||||
|
||||
export function TeamsHeader() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { user } = useUser();
|
||||
|
||||
return (
|
||||
<PageHeader title={formatMessage(labels.teams)}>
|
||||
<Flexbox gap={10}>
|
||||
<TeamsJoinButton />
|
||||
{user.role !== ROLES.viewOnly && <TeamsAddButton />}
|
||||
</Flexbox>
|
||||
</PageHeader>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamsHeader;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user