watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-14 01:25:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge branch 'jajaja' of https://github.com/umami-software/umami into jajaja

Browse source
This commit is contained in:
Mike Cao 2025-03-05 16:31:00 -08:00
commit 1205fc8c01
136 changed files with 16764 additions and 782 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.json
View file

@ -33,6 +33,7 @@
"react/prop-types": "off", "react/prop-types": "off",
"import/no-anonymous-default-export": "off", "import/no-anonymous-default-export": "off",
"import/no-named-as-default": "off", "import/no-named-as-default": "off",
"css-modules/no-unused-class": "off",
"@next/next/no-img-element": "off", "@next/next/no-img-element": "off",
"@typescript-eslint/no-empty-function": "off", "@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-explicit-any": "off",

31
next.config.js
View file

@ -59,15 +59,29 @@ const trackerHeaders = [
}, },
]; ];
const apiHeaders = [
{
key: 'Access-Control-Allow-Origin',
value: '*',
},
{
key: 'Access-Control-Allow-Headers',
value: '*',
},
{
key: 'Access-Control-Allow-Methods',
value: 'GET, DELETE, POST, PUT',
},
{
key: 'Access-Control-Max-Age',
value: corsMaxAge || '86400',
},
];
const headers = [ const headers = [
{ {
source: '/api/:path*', source: '/api/:path*',
headers: [ headers: apiHeaders,
{ key: 'Access-Control-Allow-Origin', value: '*' },
{ key: 'Access-Control-Allow-Headers', value: '*' },
{ key: 'Access-Control-Allow-Methods', value: 'GET, DELETE, POST, PUT' },
{ key: 'Access-Control-Max-Age', value: corsMaxAge || '86400' },
],
}, },
{ {
source: '/:path*', source: '/:path*',
@ -89,6 +103,11 @@ if (trackerScriptURL) {
} }
if (collectApiEndpoint) { if (collectApiEndpoint) {
headers.push({
source: collectApiEndpoint,
headers: apiHeaders,
});
rewrites.push({ rewrites.push({
source: collectApiEndpoint, source: collectApiEndpoint,
destination: '/api/send', destination: '/api/send',

147
package.json
View file

@ -10,7 +10,7 @@
"url": "https://github.com/umami-software/umami.git" "url": "https://github.com/umami-software/umami.git"
}, },
"scripts": { "scripts": {
"dev": "next dev -p 3000", "dev": "next dev -p 3000 --turbo",
"build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app", "build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app",
"start": "next start", "start": "next start",
"build-docker": "npm-run-all build-db build-tracker build-geo build-app", "build-docker": "npm-run-all build-db build-tracker build-geo build-app",
@ -25,7 +25,7 @@
"build-geo": "node scripts/build-geo.js", "build-geo": "node scripts/build-geo.js",
"build-db-schema": "prisma db pull", "build-db-schema": "prisma db pull",
"build-db-client": "prisma generate", "build-db-client": "prisma generate",
"build-icons": "svgr ./src/assets --out-dir ./src/components/icons --typescript", "build-icons": "svgr ./src/assets --out-dir ./src/components/svg --typescript",
"update-tracker": "node scripts/update-tracker.js", "update-tracker": "node scripts/update-tracker.js",
"update-db": "prisma migrate deploy", "update-db": "prisma migrate deploy",
"check-db": "node scripts/check-db.js", "check-db": "node scripts/check-db.js",
@ -67,123 +67,136 @@
"dependencies": { "dependencies": {
"@clickhouse/client": "^1.10.1", "@clickhouse/client": "^1.10.1",
"@date-fns/utc": "^1.2.0", "@date-fns/utc": "^1.2.0",
"@dicebear/collection": "^9.2.1", "@dicebear/collection": "^9.2.2",
"@dicebear/core": "^9.2.1", "@dicebear/core": "^9.2.2",
"@fontsource/inter": "^4.5.15", "@fontsource/inter": "^4.5.15",
"@hello-pangea/dnd": "^17.0.0", "@hello-pangea/dnd": "^17.0.0",
"@prisma/client": "6.1.0", "@prisma/client": "6.1.0",
"@prisma/extension-read-replicas": "^0.4.0", "@prisma/extension-read-replicas": "^0.4.0",
"@react-spring/web": "^9.7.5", "@react-spring/web": "^9.7.5",
"@tanstack/react-query": "^5.28.6", "@tanstack/react-query": "^5.66.11",
"@umami/prisma-client": "^0.14.0", "@umami/prisma-client": "^0.14.0",
"@umami/react-zen": "^0.54.0", "@umami/react-zen": "^0.62.0",
"@umami/redis-client": "^0.26.0", "@umami/redis-client": "^0.26.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"chalk": "^4.1.1", "chalk": "^4.1.2",
"chart.js": "^4.4.2", "chart.js": "^4.4.8",
"chartjs-adapter-date-fns": "^3.0.0", "chartjs-adapter-date-fns": "^3.0.0",
"classnames": "^2.3.1", "classnames": "^2.5.1",
"colord": "^2.9.2", "colord": "^2.9.3",
"cors": "^2.8.5", "cors": "^2.8.5",
"cross-spawn": "^7.0.3", "cross-spawn": "^7.0.6",
"date-fns": "^2.23.0", "date-fns": "^2.30.0",
"date-fns-tz": "^1.1.4", "date-fns-tz": "^1.3.8",
"debug": "^4.3.4", "debug": "^4.4.0",
"del": "^6.0.0", "del": "^6.1.1",
"detect-browser": "^5.2.0", "detect-browser": "^5.3.0",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"eslint-plugin-promise": "^6.1.1", "eslint-plugin-promise": "^6.6.0",
"fs-extra": "^10.0.1", "fs-extra": "^10.1.0",
"immer": "^9.0.12", "immer": "^9.0.21",
"ipaddr.js": "^2.0.1", "ipaddr.js": "^2.2.0",
"is-ci": "^3.0.1", "is-ci": "^3.0.1",
"is-docker": "^3.0.0", "is-docker": "^3.0.0",
"is-localhost-ip": "^1.4.0", "is-localhost-ip": "^1.4.0",
"isbot": "^5.1.16", "isbot": "^5.1.23",
"jsonwebtoken": "^9.0.2", "jsonwebtoken": "^9.0.2",
"kafkajs": "^2.1.0", "kafkajs": "^2.2.4",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
"maxmind": "^4.3.24", "maxmind": "^4.3.24",
"md5": "^2.3.0", "md5": "^2.3.0",
"next": "15.1.7", "next": "15.2.0",
"node-fetch": "^3.2.8", "node-fetch": "^3.3.2",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prisma": "6.1.0", "prisma": "6.1.0",
"pure-rand": "^6.1.0", "pure-rand": "^6.1.0",
"react": "^19.0.0", "react": "^19.0.0",
"react-aria-components": "^1.6.0",
"react-basics": "^0.126.0", "react-basics": "^0.126.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-error-boundary": "^4.0.4", "react-error-boundary": "^4.1.2",
"react-intl": "^7.1.6", "react-intl": "^7.1.6",
"react-simple-maps": "^2.3.0", "react-simple-maps": "^2.3.0",
"react-use-measure": "^2.0.4", "react-use-measure": "^2.1.7",
"react-window": "^1.8.6", "react-window": "^1.8.11",
"react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen",
"request-ip": "^3.3.0", "request-ip": "^3.3.0",
"semver": "^7.5.4", "semver": "^7.7.1",
"serialize-error": "^12.0.0", "serialize-error": "^12.0.0",
"thenby": "^1.3.4", "thenby": "^1.3.4",
"uuid": "^9.0.0", "uuid": "^9.0.1",
"zod": "^3.24.1", "zod": "^3.24.2",
"zustand": "^4.5.5" "zustand": "^4.5.6"
}, },
"devDependencies": { "devDependencies": {
"@formatjs/cli": "^4.2.29", "@formatjs/cli": "^4.8.4",
"@netlify/plugin-nextjs": "^5.8.1", "@netlify/plugin-nextjs": "^5.9.4",
"@rollup/plugin-alias": "^5.0.0", "@rollup/plugin-alias": "^5.1.1",
"@rollup/plugin-commonjs": "^25.0.4", "@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-json": "^6.0.0", "@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.2.0", "@rollup/plugin-node-resolve": "^15.3.1",
"@rollup/plugin-replace": "^5.0.2", "@rollup/plugin-replace": "^5.0.7",
"@rollup/plugin-terser": "^0.4.4",
"@svgr/cli": "^8.1.0", "@svgr/cli": "^8.1.0",
"@svgr/rollup": "^8.1.0", "@svgr/rollup": "^8.1.0",
"@svgr/webpack": "^8.1.0", "@svgr/webpack": "^8.1.0",
"@types/cypress": "^1.1.3",
"@types/jest": "^29.5.14", "@types/jest": "^29.5.14",
"@types/node": "^22.13.4", "@types/node": "^22.13.8",
"@types/react": "^19.0.8", "@types/react": "^19.0.10",
"@types/react-dom": "^19.0.3", "@types/react-dom": "^19.0.4",
"@types/react-intl": "^3.0.0",
"@types/react-window": "^1.8.8", "@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.7.3", "@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.7.3", "@typescript-eslint/parser": "^6.21.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cypress": "^13.6.6", "cypress": "^13.17.0",
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
"eslint": "^8.33.0", "eslint": "^8.57.1",
"eslint-config-next": "^14.0.4", "eslint-config-next": "^14.2.24",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.10.0",
"eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-css-modules": "^2.12.0", "eslint-plugin-css-modules": "^2.12.0",
"eslint-plugin-cypress": "^2.15.1", "eslint-plugin-cypress": "^2.15.2",
"eslint-plugin-import": "^2.29.1", "eslint-plugin-import": "^2.31.0",
"eslint-plugin-jest": "^27.9.0", "eslint-plugin-jest": "^27.9.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.2.1",
"extract-react-intl-messages": "^4.1.1", "extract-react-intl-messages": "^4.1.1",
"husky": "^8.0.3", "husky": "^8.0.3",
"jest": "^29.7.0", "jest": "^29.7.0",
"lint-staged": "^14.0.1", "lint-staged": "^14.0.1",
"postcss": "^8.4.31", "postcss": "^8.5.3",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",
"postcss-preset-env": "7.8.3", "postcss-preset-env": "7.8.3",
"postcss-rtlcss": "^4.0.1", "postcss-rtlcss": "^4.0.9",
"prettier": "^2.6.2", "prettier": "^2.8.8",
"prompts": "2.4.2", "prompts": "2.4.2",
"rollup": "^3.28.0", "rollup": "^3.29.5",
"rollup-plugin-copy": "^3.4.0", "rollup-plugin-copy": "^3.5.0",
"rollup-plugin-delete": "^2.0.0", "rollup-plugin-delete": "^2.2.0",
"rollup-plugin-dts": "^5.3.1", "rollup-plugin-dts": "^5.3.1",
"rollup-plugin-esbuild": "^5.0.0", "rollup-plugin-esbuild": "^5.0.0",
"rollup-plugin-node-externals": "^6.1.1", "rollup-plugin-node-externals": "^6.1.2",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2", "stylelint": "^15.11.0",
"stylelint": "^15.10.1",
"stylelint-config-css-modules": "^4.4.0", "stylelint-config-css-modules": "^4.4.0",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended": "^14.0.0", "stylelint-config-recommended": "^14.0.1",
"tar": "^6.1.2", "tar": "^6.2.1",
"ts-jest": "^29.1.2", "ts-jest": "^29.2.6",
"ts-node": "^10.9.1", "ts-node": "^10.9.2",
"typescript": "^5.5.3" "typescript": "^5.8.2"
},
"pnpm": {
"onlyBuiltDependencies": [
"@prisma/client",
"@prisma/engines",
"cypress",
"esbuild",
"prisma",
"sharp"
],
"overrides": {
"react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen"
}
} }
} }

15612
pnpm-lock.yaml generated Normal file
View file

File diff suppressed because it is too large Load diff

2
rollup.tracker.config.mjs
View file

@ -1,6 +1,6 @@
import 'dotenv/config'; import 'dotenv/config';
import replace from '@rollup/plugin-replace'; import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser'; import terser from '@rollup/plugin-terser';
export default { export default {
input: 'src/tracker/index.js', input: 'src/tracker/index.js',

6
scripts/check-db.js
View file

@ -82,9 +82,11 @@ async function checkV1Tables() {
} }
async function applyMigration() { async function applyMigration() {
console.log(execSync('prisma migrate deploy').toString()); if (!process.env.SKIP_DB_MIGRATION) {
console.log(execSync('prisma migrate deploy').toString());
success('Database is up to date.'); success('Database is up to date.');
}
} }
(async () => { (async () => {

2
src/app/(main)/App.tsx
View file

@ -14,7 +14,7 @@ export function App({ children }) {
const pathname = usePathname(); const pathname = usePathname();
if (isLoading) { if (isLoading) {
return <Loading />; return <Loading position="page" />;
} }
if (error) { if (error) {

2
src/app/(main)/SideNav.tsx
View file

@ -1,6 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen'; import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
import { Icons, Lucide } from '@/components/icons'; import { Lucide, Icons } from '@/components/icons';
import { useMessages, useTeamUrl } from '@/components/hooks'; import { useMessages, useTeamUrl } from '@/components/hooks';
export function SideNav() { export function SideNav() {

2
src/app/(main)/console/[[...websiteId]]/page.tsx
View file

@ -5,7 +5,7 @@ async function getEnabled() {
return !!process.env.ENABLE_TEST_CONSOLE; return !!process.env.ENABLE_TEST_CONSOLE;
} }
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
const enabled = await getEnabled(); const enabled = await getEnabled();

7
src/app/(main)/profile/ThemeSetting.tsx
View file

@ -1,8 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { Button, Icon } from 'react-basics'; import { Button, Icon } from 'react-basics';
import { useTheme } from '@/components/hooks'; import { useTheme } from '@/components/hooks';
import Sun from '@/assets/sun.svg'; import { Icons } from '@/components/icons';
import Moon from '@/assets/moon.svg';
import styles from './ThemeSetting.module.css'; import styles from './ThemeSetting.module.css';
export function ThemeSetting() { export function ThemeSetting() {
@ -15,7 +14,7 @@ export function ThemeSetting() {
onClick={() => saveTheme('light')} onClick={() => saveTheme('light')}
> >
<Icon> <Icon>
<Sun /> <Icons.Sun />
</Icon> </Icon>
</Button> </Button>
<Button <Button
@ -23,7 +22,7 @@ export function ThemeSetting() {
onClick={() => saveTheme('dark')} onClick={() => saveTheme('dark')}
> >
<Icon> <Icon>
<Moon /> <Icons.Moon />
</Icon> </Icon>
</Button> </Button>
</div> </div>

6
src/app/(main)/reports/ReportsDataTable.tsx
View file

@ -1,6 +1,6 @@
import { useReports } from '@/components/hooks'; import { useReports } from '@/components/hooks';
import { ReportsTable } from './ReportsTable'; import { ReportsTable } from './ReportsTable';
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
export function ReportsDataTable({ export function ReportsDataTable({
@ -15,8 +15,8 @@ export function ReportsDataTable({
const queryResult = useReports({ websiteId, teamId }); const queryResult = useReports({ websiteId, teamId });
return ( return (
<DataTable queryResult={queryResult} renderEmpty={() => children}> <DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ data }) => <ReportsTable data={data} showDomain={!websiteId} />} {({ data }) => <ReportsTable data={data} showDomain={!websiteId} />}
</DataTable> </DataGrid>
); );
} }

2
src/app/(main)/reports/[reportId]/page.tsx
View file

@ -1,7 +1,7 @@
import { Metadata } from 'next'; import { Metadata } from 'next';
import { ReportPage } from './ReportPage'; import { ReportPage } from './ReportPage';
export default async function ({ params }: { params: { reportId: string } }) { export default async function ({ params }: { params: Promise<{ reportId: string }> }) {
const { reportId } = await params; const { reportId } = await params;
return <ReportPage reportId={reportId} />; return <ReportPage reportId={reportId} />;

24
src/app/(main)/reports/create/ReportTemplates.tsx
View file

@ -1,14 +1,8 @@
import Funnel from '@/assets/funnel.svg'; import { Button, Icon, Text } from '@umami/react-zen';
import Money from '@/assets/money.svg';
import Lightbulb from '@/assets/lightbulb.svg';
import Magnet from '@/assets/magnet.svg';
import Path from '@/assets/path.svg';
import Tag from '@/assets/tag.svg';
import Target from '@/assets/target.svg';
import { useMessages, useTeamUrl } from '@/components/hooks'; import { useMessages, useTeamUrl } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader'; import { PageHeader } from '@/components/layout/PageHeader';
import Link from 'next/link'; import Link from 'next/link';
import { Button, Icon, Icons, Text } from 'react-basics';
import styles from './ReportTemplates.module.css'; import styles from './ReportTemplates.module.css';
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) { export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
@ -20,43 +14,43 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
title: formatMessage(labels.insights), title: formatMessage(labels.insights),
description: formatMessage(labels.insightsDescription), description: formatMessage(labels.insightsDescription),
url: renderTeamUrl('/reports/insights'), url: renderTeamUrl('/reports/insights'),
icon: <Lightbulb />, icon: <Icons.Lightbulb />,
}, },
{ {
title: formatMessage(labels.funnel), title: formatMessage(labels.funnel),
description: formatMessage(labels.funnelDescription), description: formatMessage(labels.funnelDescription),
url: renderTeamUrl('/reports/funnel'), url: renderTeamUrl('/reports/funnel'),
icon: <Funnel />, icon: <Icons.Funnel />,
}, },
{ {
title: formatMessage(labels.retention), title: formatMessage(labels.retention),
description: formatMessage(labels.retentionDescription), description: formatMessage(labels.retentionDescription),
url: renderTeamUrl('/reports/retention'), url: renderTeamUrl('/reports/retention'),
icon: <Magnet />, icon: <Icons.Magnet />,
}, },
{ {
title: formatMessage(labels.utm), title: formatMessage(labels.utm),
description: formatMessage(labels.utmDescription), description: formatMessage(labels.utmDescription),
url: renderTeamUrl('/reports/utm'), url: renderTeamUrl('/reports/utm'),
icon: <Tag />, icon: <Icons.Tag />,
}, },
{ {
title: formatMessage(labels.goals), title: formatMessage(labels.goals),
description: formatMessage(labels.goalsDescription), description: formatMessage(labels.goalsDescription),
url: renderTeamUrl('/reports/goals'), url: renderTeamUrl('/reports/goals'),
icon: <Target />, icon: <Icons.Target />,
}, },
{ {
title: formatMessage(labels.journey), title: formatMessage(labels.journey),
description: formatMessage(labels.journeyDescription), description: formatMessage(labels.journeyDescription),
url: renderTeamUrl('/reports/journey'), url: renderTeamUrl('/reports/journey'),
icon: <Path />, icon: <Icons.Path />,
}, },
{ {
title: formatMessage(labels.revenue), title: formatMessage(labels.revenue),
description: formatMessage(labels.revenueDescription), description: formatMessage(labels.revenueDescription),
url: renderTeamUrl('/reports/revenue'), url: renderTeamUrl('/reports/revenue'),
icon: <Money />, icon: <Icons.Money />,
}, },
]; ];

4
src/app/(main)/reports/event-data/EventDataReport.tsx
View file

@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import { EventDataParameters } from './EventDataParameters'; import { EventDataParameters } from './EventDataParameters';
import { EventDataTable } from './EventDataTable'; import { EventDataTable } from './EventDataTable';
import Nodes from '@/assets/nodes.svg'; import { Icons } from '@/components/icons';
const defaultParameters = { const defaultParameters = {
type: 'event-data', type: 'event-data',
@ -14,7 +14,7 @@ const defaultParameters = {
export function EventDataReport({ reportId }: { reportId?: string }) { export function EventDataReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Nodes />} /> <ReportHeader icon={<Icons.Nodes />} />
<ReportMenu> <ReportMenu>
<EventDataParameters /> <EventDataParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/funnel/FunnelReport.tsx
View file

@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader'; import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu'; import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import Funnel from '@/assets/funnel.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = { const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function FunnelReport({ reportId }: { reportId?: string }) { export function FunnelReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Funnel />} /> <ReportHeader icon={<Icons.Funnel />} />
<ReportMenu> <ReportMenu>
<FunnelParameters /> <FunnelParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/goals/GoalsReport.tsx
View file

@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader'; import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu'; import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import Target from '@/assets/target.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = { const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function GoalsReport({ reportId }: { reportId?: string }) { export function GoalsReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Target />} /> <ReportHeader icon={<Icons.Target />} />
<ReportMenu> <ReportMenu>
<GoalsParameters /> <GoalsParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/insights/InsightsReport.tsx
View file

@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import { InsightsParameters } from './InsightsParameters'; import { InsightsParameters } from './InsightsParameters';
import { InsightsTable } from './InsightsTable'; import { InsightsTable } from './InsightsTable';
import Lightbulb from '@/assets/lightbulb.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = { const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function InsightsReport({ reportId }: { reportId?: string }) { export function InsightsReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Lightbulb />} /> <ReportHeader icon={<Icons.Lightbulb />} />
<ReportMenu> <ReportMenu>
<InsightsParameters /> <InsightsParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/journey/JourneyReport.tsx
View file

@ -5,7 +5,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import { JourneyParameters } from './JourneyParameters'; import { JourneyParameters } from './JourneyParameters';
import { JourneyView } from './JourneyView'; import { JourneyView } from './JourneyView';
import Path from '@/assets/path.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = { const defaultParameters = {
@ -16,7 +16,7 @@ const defaultParameters = {
export function JourneyReport({ reportId }: { reportId?: string }) { export function JourneyReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Path />} /> <ReportHeader icon={<Icons.Path />} />
<ReportMenu> <ReportMenu>
<JourneyParameters /> <JourneyParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/retention/RetentionReport.tsx
View file

@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader'; import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu'; import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import Magnet from '@/assets/magnet.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
import { parseDateRange } from '@/lib/date'; import { parseDateRange } from '@/lib/date';
import { endOfMonth, startOfMonth } from 'date-fns'; import { endOfMonth, startOfMonth } from 'date-fns';
@ -21,7 +21,7 @@ const defaultParameters = {
export function RetentionReport({ reportId }: { reportId?: string }) { export function RetentionReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Magnet />} /> <ReportHeader icon={<Icons.Magnet />} />
<ReportMenu> <ReportMenu>
<RetentionParameters /> <RetentionParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/revenue/RevenueReport.tsx
View file

@ -1,4 +1,4 @@
import Money from '@/assets/money.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
import { Report } from '../[reportId]/Report'; import { Report } from '../[reportId]/Report';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
@ -15,7 +15,7 @@ const defaultParameters = {
export function RevenueReport({ reportId }: { reportId?: string }) { export function RevenueReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Money />} /> <ReportHeader icon={<Icons.Money />} />
<ReportMenu> <ReportMenu>
<RevenueParameters /> <RevenueParameters />
</ReportMenu> </ReportMenu>

4
src/app/(main)/reports/utm/UTMReport.tsx
View file

@ -5,7 +5,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody'; import { ReportBody } from '../[reportId]/ReportBody';
import { UTMParameters } from './UTMParameters'; import { UTMParameters } from './UTMParameters';
import { UTMView } from './UTMView'; import { UTMView } from './UTMView';
import Tag from '@/assets/tag.svg'; import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants'; import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = { const defaultParameters = {
@ -16,7 +16,7 @@ const defaultParameters = {
export function UTMReport({ reportId }: { reportId?: string }) { export function UTMReport({ reportId }: { reportId?: string }) {
return ( return (
<Report reportId={reportId} defaultParameters={defaultParameters}> <Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Tag />} /> <ReportHeader icon={<Icons.Tag />} />
<ReportMenu> <ReportMenu>
<UTMParameters /> <UTMParameters />
</ReportMenu> </ReportMenu>

2
src/app/(main)/settings/layout.tsx
View file

@ -1,5 +1,5 @@
import { SettingsLayout } from './SettingsLayout';
import { Metadata } from 'next'; import { Metadata } from 'next';
import { SettingsLayout } from './SettingsLayout';
export default function ({ children }) { export default function ({ children }) {
if (process.env.cloudMode) { if (process.env.cloudMode) {

6
src/app/(main)/settings/teams/TeamsDataTable.tsx
View file

@ -1,4 +1,4 @@
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { TeamsTable } from '@/app/(main)/settings/teams/TeamsTable'; import { TeamsTable } from '@/app/(main)/settings/teams/TeamsTable';
import { useLogin, useTeams } from '@/components/hooks'; import { useLogin, useTeams } from '@/components/hooks';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
@ -16,10 +16,10 @@ export function TeamsDataTable({
const queryResult = useTeams(user.id); const queryResult = useTeams(user.id);
return ( return (
<DataTable queryResult={queryResult} renderEmpty={() => children}> <DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ data }) => { {({ data }) => {
return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />; return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
}} }}
</DataTable> </DataGrid>
); );
} }

25
src/app/(main)/settings/users/UserAddButton.tsx
View file

@ -1,29 +1,40 @@
import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics'; import {
Button,
Icon,
Text,
Modal,
Icons,
DialogTrigger,
Dialog,
useToast,
} from '@umami/react-zen';
import { UserAddForm } from './UserAddForm'; import { UserAddForm } from './UserAddForm';
import { useMessages, useModified } from '@/components/hooks'; import { useMessages, useModified } from '@/components/hooks';
export function UserAddButton({ onSave }: { onSave?: () => void }) { export function UserAddButton({ onSave }: { onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts(); const { toast } = useToast();
const { touch } = useModified(); const { touch } = useModified();
const handleSave = () => { const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' }); toast(formatMessage(messages.saved));
touch('users'); touch('users');
onSave?.(); onSave?.();
}; };
return ( return (
<ModalTrigger> <DialogTrigger>
<Button variant="primary"> <Button variant="primary">
<Icon> <Icon>
<Icons.Plus /> <Icons.Plus />
</Icon> </Icon>
<Text>{formatMessage(labels.createUser)}</Text> <Text>{formatMessage(labels.createUser)}</Text>
</Button> </Button>
<Modal title={formatMessage(labels.createUser)}> <Modal>
{(close: () => void) => <UserAddForm onSave={handleSave} onClose={close} />} <Dialog title={formatMessage(labels.createUser)}>
{({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
</Dialog>
</Modal> </Modal>
</ModalTrigger> </DialogTrigger>
); );
} }

20
src/app/(main)/settings/users/UserDeleteButton.tsx
View file

@ -1,4 +1,4 @@
import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics'; import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
import { useMessages, useLogin } from '@/components/hooks'; import { useMessages, useLogin } from '@/components/hooks';
import { UserDeleteForm } from './UserDeleteForm'; import { UserDeleteForm } from './UserDeleteForm';
@ -15,18 +15,20 @@ export function UserDeleteButton({
const { user } = useLogin(); const { user } = useLogin();
return ( return (
<ModalTrigger disabled={userId === user?.id}> <DialogTrigger>
<Button disabled={userId === user?.id} variant="quiet"> <Button isDisabled={userId === user?.id}>
<Icon> <Icon size="sm">
<Icons.Trash /> <Icons.Trash />
</Icon> </Icon>
<Text>{formatMessage(labels.delete)}</Text> <Text>{formatMessage(labels.delete)}</Text>
</Button> </Button>
<Modal title={formatMessage(labels.deleteUser)}> <Modal>
{(close: () => void) => ( <Dialog title={formatMessage(labels.deleteUser)}>
<UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} /> {({ close }) => (
)} <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
)}
</Dialog>
</Modal> </Modal>
</ModalTrigger> </DialogTrigger>
); );
} }

4
src/app/(main)/settings/users/UserDeleteForm.tsx
View file

@ -1,3 +1,4 @@
import { useToast } from '@umami/react-zen';
import { useApi, useMessages, useModified } from '@/components/hooks'; import { useApi, useMessages, useModified } from '@/components/hooks';
import { ConfirmationForm } from '@/components/common/ConfirmationForm'; import { ConfirmationForm } from '@/components/common/ConfirmationForm';
@ -6,11 +7,13 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
const { del, useMutation } = useApi(); const { del, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) }); const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
const { touch } = useModified(); const { touch } = useModified();
const { toast } = useToast();
const handleConfirm = async () => { const handleConfirm = async () => {
mutate(null, { mutate(null, {
onSuccess: async () => { onSuccess: async () => {
touch('users'); touch('users');
toast(formatMessage(messages.successMessage));
onSave?.(); onSave?.();
onClose?.(); onClose?.();
}, },
@ -23,6 +26,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
onConfirm={handleConfirm} onConfirm={handleConfirm}
onClose={onClose} onClose={onClose}
buttonLabel={formatMessage(labels.delete)} buttonLabel={formatMessage(labels.delete)}
buttonVariant="danger"
isLoading={isPending} isLoading={isPending}
error={error} error={error}
/> />

6
src/app/(main)/settings/users/UsersDataTable.tsx
View file

@ -1,4 +1,4 @@
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { useUsers } from '@/components/hooks'; import { useUsers } from '@/components/hooks';
import { UsersTable } from './UsersTable'; import { UsersTable } from './UsersTable';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
@ -13,8 +13,8 @@ export function UsersDataTable({
const queryResult = useUsers(); const queryResult = useUsers();
return ( return (
<DataTable queryResult={queryResult} renderEmpty={() => children}> <DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ data }) => <UsersTable data={data} showActions={showActions} />} {({ data }) => <UsersTable data={data} showActions={showActions} />}
</DataTable> </DataGrid>
); );
} }

52
src/app/(main)/settings/users/UsersTable.tsx
View file

@ -1,9 +1,9 @@
import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics'; import { Row, Button, Text, Icon, Icons, DataTable, DataColumn } from '@umami/react-zen';
import Link from 'next/link';
import { formatDistance } from 'date-fns'; import { formatDistance } from 'date-fns';
import { ROLES } from '@/lib/constants'; import { ROLES } from '@/lib/constants';
import { useMessages, useLocale } from '@/components/hooks'; import { useMessages, useLocale } from '@/components/hooks';
import { UserDeleteButton } from './UserDeleteButton'; import { UserDeleteButton } from './UserDeleteButton';
import { LinkButton } from '@/components/common/LinkButton';
export function UsersTable({ export function UsersTable({
data = [], data = [],
@ -16,44 +16,46 @@ export function UsersTable({
const { dateLocale } = useLocale(); const { dateLocale } = useLocale();
return ( return (
<GridTable data={data}> <DataTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} /> <DataColumn id="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
<GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}> <DataColumn id="role" label={formatMessage(labels.role)} style={{ maxWidth: 60 }}>
{row => {(row: any) =>
formatMessage( formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown, labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
) )
} }
</GridColumn> </DataColumn>
<GridColumn name="created" label={formatMessage(labels.created)} width={'150px'}> <DataColumn id="created" label={formatMessage(labels.created)} style={{ maxWidth: 60 }}>
{row => {(row: any) =>
formatDistance(new Date(row.createdAt), new Date(), { formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true, addSuffix: true,
locale: dateLocale, locale: dateLocale,
}) })
} }
</GridColumn> </DataColumn>
<GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}> <DataColumn id="websites" label={formatMessage(labels.websites)} style={{ maxWidth: 60 }}>
{row => row._count.website} {(row: any) => row._count.websiteUser}
</GridColumn> </DataColumn>
{showActions && ( {showActions && (
<GridColumn name="action" label=" " alignment="end"> <DataColumn id="action" align="end">
{row => { {(row: any) => {
const { id, username } = row; const { id, username } = row;
return ( return (
<> <Row gap="3">
<UserDeleteButton userId={id} username={username} /> <UserDeleteButton userId={id} username={username} />
<LinkButton href={`/settings/users/${id}`}> <Button asChild>
<Icon> <Link href={`/settings/users/${id}`}>
<Icons.Edit /> <Icon>
</Icon> <Icons.Edit />
<Text>{formatMessage(labels.edit)}</Text> </Icon>
</LinkButton> <Text>{formatMessage(labels.edit)}</Text>
</> </Link>
</Button>
</Row>
); );
}} }}
</GridColumn> </DataColumn>
)} )}
</GridTable> </DataTable>
); );
} }

93
src/app/(main)/settings/users/[userId]/UserEditForm.tsx
View file

@ -1,22 +1,27 @@
import { import {
Dropdown, Select,
Item, ListItem,
Form, Form,
FormRow, FormField,
FormButtons, FormButtons,
FormInput,
TextField, TextField,
SubmitButton, FormSubmitButton,
PasswordField, PasswordField,
} from 'react-basics'; useToast,
import { useApi, useLogin, useMessages } from '@/components/hooks'; } from '@umami/react-zen';
import { useApi, useLogin, useMessages, useModified } from '@/components/hooks';
import { ROLES } from '@/lib/constants'; import { ROLES } from '@/lib/constants';
import { useContext, useRef } from 'react'; import { useContext } from 'react';
import { UserContext } from './UserProvider'; import { UserContext } from './UserProvider';
export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () => void }) { export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages, getMessage } = useMessages();
const { post, useMutation } = useApi(); const { post, useMutation } = useApi();
const user = useContext(UserContext);
const { user: login } = useLogin();
const { toast } = useToast();
const { touch } = useModified();
const { mutate, error } = useMutation({ const { mutate, error } = useMutation({
mutationFn: ({ mutationFn: ({
username, username,
@ -28,61 +33,47 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
role: string; role: string;
}) => post(`/users/${userId}`, { username, password, role }), }) => post(`/users/${userId}`, { username, password, role }),
}); });
const ref = useRef(null);
const user = useContext(UserContext);
const { user: login } = useLogin();
const handleSubmit = async (data: any) => { const handleSubmit = async (data: any) => {
mutate(data, { mutate(data, {
onSuccess: async () => { onSuccess: async () => {
ref.current.reset(data); toast(formatMessage(messages.saved));
touch(`user:${user.id}`);
onSave?.(); onSave?.();
}, },
}); });
}; };
const renderValue = (value: string) => {
if (value === ROLES.user) {
return formatMessage(labels.user);
}
if (value === ROLES.admin) {
return formatMessage(labels.admin);
}
if (value === ROLES.viewOnly) {
return formatMessage(labels.viewOnly);
}
};
return ( return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={user} style={{ width: 300 }}> <Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
<FormRow label={formatMessage(labels.username)}> <FormField name="username" label={formatMessage(labels.username)}>
<FormInput name="username"> <TextField />
<TextField /> </FormField>
</FormInput> <FormField
</FormRow> name="password"
<FormRow label={formatMessage(labels.password)}> label={formatMessage(labels.password)}
<FormInput rules={{
name="password" minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
rules={{ }}
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) }, >
}} <PasswordField autoComplete="new-password" />
> </FormField>
<PasswordField autoComplete="new-password" />
</FormInput>
</FormRow>
{user.id !== login.id && ( {user.id !== login.id && (
<FormRow label={formatMessage(labels.role)}> <FormField
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}> name="role"
<Dropdown renderValue={renderValue}> label={formatMessage(labels.role)}
<Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item> rules={{ required: formatMessage(labels.required) }}
<Item key={ROLES.user}>{formatMessage(labels.user)}</Item> >
<Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item> <Select defaultSelectedKey={user.role}>
</Dropdown> <ListItem id={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
</FormInput> <ListItem id={ROLES.user}>{formatMessage(labels.user)}</ListItem>
</FormRow> <ListItem id={ROLES.admin}>{formatMessage(labels.admin)}</ListItem>
</Select>
</FormField>
)} )}
<FormButtons> <FormButtons>
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton> <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
</FormButtons> </FormButtons>
</Form> </Form>
); );

2
src/app/(main)/settings/users/[userId]/UserPage.tsx
View file

@ -2,7 +2,7 @@
import { UserSettings } from './UserSettings'; import { UserSettings } from './UserSettings';
import { UserProvider } from './UserProvider'; import { UserProvider } from './UserProvider';
export default function ({ userId }: { userId: string }) { export function UserPage({ userId }: { userId: string }) {
return ( return (
<UserProvider userId={userId}> <UserProvider userId={userId}>
<UserSettings userId={userId} /> <UserSettings userId={userId} />

4
src/app/(main)/settings/users/[userId]/UserProvider.tsx
View file

@ -1,6 +1,6 @@
import { createContext, ReactNode, useEffect } from 'react'; import { createContext, ReactNode, useEffect } from 'react';
import { Loading } from '@umami/react-zen';
import { useModified, useUser } from '@/components/hooks'; import { useModified, useUser } from '@/components/hooks';
import { Loading } from 'react-basics';
export const UserContext = createContext(null); export const UserContext = createContext(null);
@ -18,5 +18,5 @@ export function UserProvider({ userId, children }: { userId: string; children: R
return <Loading position="page" />; return <Loading position="page" />;
} }
return <UserContext.Provider value={user}>{children}</UserContext.Provider>; return <UserContext.Provider value={{ ...user, modified }}>{children}</UserContext.Provider>;
} }

45
src/app/(main)/settings/users/[userId]/UserSettings.tsx
View file

@ -1,46 +1,31 @@
import { Key, useContext, useState } from 'react'; import { useContext } from 'react';
import { Item, Tabs, useToasts } from 'react-basics'; import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { Icons } from '@/components/icons'; import { Icons } from '@/components/icons';
import { UserEditForm } from './UserEditForm'; import { UserEditForm } from './UserEditForm';
import { PageHeader } from '@/components/layout/PageHeader'; import { PageHeader } from '@/components/layout/PageHeader';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
import { UserWebsites } from './UserWebsites'; import { UserWebsites } from './UserWebsites';
import { UserContext } from './UserProvider'; import { UserContext } from './UserProvider';
import { Breadcrumb } from '@/components/common/Breadcrumb';
export function UserSettings({ userId }: { userId: string }) { export function UserSettings({ userId }: { userId: string }) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels } = useMessages();
const [tab, setTab] = useState<Key>('details');
const user = useContext(UserContext); const user = useContext(UserContext);
const { showToast } = useToasts();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const breadcrumb = (
<Breadcrumb
data={[
{
label: formatMessage(labels.users),
url: '/settings/users',
},
{
label: user.username,
},
]}
/>
);
return ( return (
<> <>
<PageHeader title={user?.username} icon={<Icons.User />} breadcrumb={breadcrumb} /> <PageHeader title={user?.username} icon={<Icons.User />} />
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}> <Tabs>
<Item key="details">{formatMessage(labels.details)}</Item> <TabList>
<Item key="websites">{formatMessage(labels.websites)}</Item> <Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="websites">{formatMessage(labels.websites)}</Tab>
</TabList>
<TabPanel id="details">
<UserEditForm userId={userId} />
</TabPanel>
<TabPanel id="websites">
<UserWebsites userId={userId} />
</TabPanel>
</Tabs> </Tabs>
{tab === 'details' && <UserEditForm userId={userId} onSave={handleSave} />}
{tab === 'websites' && <UserWebsites userId={userId} />}
</> </>
); );
} }

6
src/app/(main)/settings/users/[userId]/UserWebsites.tsx
View file

@ -1,15 +1,15 @@
import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable'; import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { useWebsites } from '@/components/hooks'; import { useWebsites } from '@/components/hooks';
export function UserWebsites({ userId }) { export function UserWebsites({ userId }) {
const queryResult = useWebsites({ userId }); const queryResult = useWebsites({ userId });
return ( return (
<DataTable queryResult={queryResult}> <DataGrid queryResult={queryResult}>
{({ data }) => ( {({ data }) => (
<WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} /> <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
)} )}
</DataTable> </DataGrid>
); );
} }

2
src/app/(main)/settings/users/[userId]/page.tsx
View file

@ -1,7 +1,7 @@
import { UserPage } from './UserPage'; import { UserPage } from './UserPage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { userId: string } }) { export default async function ({ params }: { params: Promise<{ userId: string }> }) {
const { userId } = await params; const { userId } = await params;
return <UserPage userId={userId} />; return <UserPage userId={userId} />;

6
src/app/(main)/settings/websites/WebsitesDataTable.tsx
View file

@ -1,6 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable'; import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { useWebsites } from '@/components/hooks'; import { useWebsites } from '@/components/hooks';
export function WebsitesDataTable({ export function WebsitesDataTable({
@ -19,7 +19,7 @@ export function WebsitesDataTable({
const queryResult = useWebsites({ teamId }); const queryResult = useWebsites({ teamId });
return ( return (
<DataTable queryResult={queryResult} renderEmpty={() => children}> <DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ data }) => ( {({ data }) => (
<WebsitesTable <WebsitesTable
teamId={teamId} teamId={teamId}
@ -29,6 +29,6 @@ export function WebsitesDataTable({
allowView={allowView} allowView={allowView}
/> />
)} )}
</DataTable> </DataGrid>
); );
} }

2
src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
View file

@ -10,7 +10,7 @@ export function WebsitesSettingsPage({ teamId }: { teamId: string }) {
return ( return (
<> <>
<WebsitesHeader teamId={teamId} allowCreate={canCreate} /> <WebsitesHeader allowCreate={canCreate} />
<WebsitesDataTable teamId={teamId} /> <WebsitesDataTable teamId={teamId} />
</> </>
); );

52
src/app/(main)/settings/websites/WebsitesTable.tsx
View file

@ -1,7 +1,7 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics'; import { Row, Text, Icon, Icons, DataTable, DataColumn, Button } from '@umami/react-zen';
import Link from 'next/link';
import { useMessages, useTeamUrl } from '@/components/hooks'; import { useMessages, useTeamUrl } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton';
export interface WebsitesTableProps { export interface WebsitesTableProps {
data: any[]; data: any[];
@ -27,37 +27,41 @@ export function WebsitesTable({
} }
return ( return (
<GridTable data={data}> <DataTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} /> <DataColumn id="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} /> <DataColumn id="domain" label={formatMessage(labels.domain)} />
{showActions && ( {showActions && (
<GridColumn name="action" label=" " alignment="end"> <DataColumn id="action" label=" " align="end">
{row => { {(row: any) => {
const { id: websiteId } = row; const websiteId = row.id;
return ( return (
<> <Row gap="3">
{allowEdit && ( {allowEdit && (
<LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}> <Button asChild>
<Icon data-test="link-button-edit"> <Link href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Icons.Edit /> <Icon data-test="link-button-edit">
</Icon> <Icons.Edit />
<Text>{formatMessage(labels.edit)}</Text> </Icon>
</LinkButton> <Text>{formatMessage(labels.edit)}</Text>
</Link>
</Button>
)} )}
{allowView && ( {allowView && (
<LinkButton href={renderTeamUrl(`/websites/${websiteId}`)}> <Button asChild>
<Icon> <Link href={renderTeamUrl(`/websites/${websiteId}`)}>
<Icons.ArrowRight /> <Icon data-test="link-button-view">
</Icon> <Icons.Arrow />
<Text>{formatMessage(labels.view)}</Text> </Icon>
</LinkButton> <Text>{formatMessage(labels.view)}</Text>
</Link>
</Button>
)} )}
</> </Row>
); );
}} }}
</GridColumn> </DataColumn>
)} )}
</GridTable> </DataTable>
); );
} }

76
src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx
View file

@ -1,5 +1,12 @@
import { useContext, useRef } from 'react'; import { useContext } from 'react';
import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics'; import {
FormSubmitButton,
Form,
FormField,
FormButtons,
TextField,
useToast,
} from '@umami/react-zen';
import { useApi, useMessages, useModified } from '@/components/hooks'; import { useApi, useMessages, useModified } from '@/components/hooks';
import { DOMAIN_REGEX } from '@/lib/constants'; import { DOMAIN_REGEX } from '@/lib/constants';
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider'; import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
@ -8,16 +15,17 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
const website = useContext(WebsiteContext); const website = useContext(WebsiteContext);
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi(); const { post, useMutation } = useApi();
const { toast } = useToast();
const { touch } = useModified();
const { mutate, error } = useMutation({ const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}`, data), mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
}); });
const ref = useRef(null);
const { touch } = useModified();
const handleSubmit = async (data: any) => { const handleSubmit = async (data: any) => {
mutate(data, { mutate(data, {
onSuccess: async () => { onSuccess: async () => {
ref.current.reset(data); toast(formatMessage(messages.saved));
touch(`website:${website.id}`); touch(`website:${website.id}`);
onSave?.(); onSave?.();
}, },
@ -25,38 +33,36 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
}; };
return ( return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={website}> <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
<FormRow label={formatMessage(labels.websiteId)}> <FormField name="id" label={formatMessage(labels.websiteId)}>
<TextField data-test="text-field-websiteId" value={website?.id} readOnly allowCopy /> <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
</FormRow> </FormField>
<FormRow label={formatMessage(labels.name)}> <FormField
<FormInput label={formatMessage(labels.name)}
data-test="input-name" data-test="input-name"
name="name" name="name"
rules={{ required: formatMessage(labels.required) }} rules={{ required: formatMessage(labels.required) }}
> >
<TextField /> <TextField />
</FormInput> </FormField>
</FormRow> <FormField
<FormRow label={formatMessage(labels.domain)}> label={formatMessage(labels.domain)}
<FormInput data-test="input-domain"
data-test="input-domain" name="domain"
name="domain" rules={{
rules={{ required: formatMessage(labels.required),
required: formatMessage(labels.required), pattern: {
pattern: { value: DOMAIN_REGEX,
value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain),
message: formatMessage(messages.invalidDomain), },
}, }}
}} >
> <TextField />
<TextField /> </FormField>
</FormInput>
</FormRow>
<FormButtons> <FormButtons>
<SubmitButton data-test="button-submit" variant="primary"> <FormSubmitButton data-test="button-submit" variant="primary">
{formatMessage(labels.save)} {formatMessage(labels.save)}
</SubmitButton> </FormSubmitButton>
</FormButtons> </FormButtons>
</Form> </Form>
); );

59
src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
View file

@ -1,11 +1,10 @@
import { useContext } from 'react';
import { Button, Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
import Link from 'next/link';
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider'; import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { Breadcrumb } from '@/components/common/Breadcrumb';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons'; import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader'; import { PageHeader } from '@/components/layout/PageHeader';
import Link from 'next/link';
import { Key, useContext, useState } from 'react';
import { Button, Icon, Item, Tabs, Text, useToasts } from 'react-basics';
import { ShareUrl } from './ShareUrl'; import { ShareUrl } from './ShareUrl';
import { TrackingCode } from './TrackingCode'; import { TrackingCode } from './TrackingCode';
import { WebsiteData } from './WebsiteData'; import { WebsiteData } from './WebsiteData';
@ -19,31 +18,11 @@ export function WebsiteSettings({
openExternal?: boolean; openExternal?: boolean;
}) { }) {
const website = useContext(WebsiteContext); const website = useContext(WebsiteContext);
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels } = useMessages();
const [tab, setTab] = useState<Key>('details');
const { showToast } = useToasts();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const breadcrumb = (
<Breadcrumb
data={[
{
label: formatMessage(labels.websites),
url: website.teamId ? `/teams/${website.teamId}/settings/websites` : '/settings/websites',
},
{
label: website.name,
},
]}
/>
);
return ( return (
<> <>
<PageHeader title={website?.name} icon={<Icons.Globe />} breadcrumb={breadcrumb}> <PageHeader title={website?.name} icon={<Icons.Globe />}>
<Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}> <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
<Button variant="primary"> <Button variant="primary">
<Icon> <Icon>
@ -53,16 +32,26 @@ export function WebsiteSettings({
</Button> </Button>
</Link> </Link>
</PageHeader> </PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}> <Tabs>
<Item key="details">{formatMessage(labels.details)}</Item> <TabList>
<Item key="tracking">{formatMessage(labels.trackingCode)}</Item> <Tab id="details">{formatMessage(labels.details)}</Tab>
<Item key="share">{formatMessage(labels.shareUrl)}</Item> <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
<Item key="data">{formatMessage(labels.data)}</Item> <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
<Tab id="data">{formatMessage(labels.data)}</Tab>
</TabList>
<TabPanel id="details">
<WebsiteEditForm websiteId={websiteId} />
</TabPanel>
<TabPanel id="tracking">
<TrackingCode websiteId={websiteId} />
</TabPanel>
<TabPanel id="share">
<ShareUrl />
</TabPanel>
<TabPanel id="data">
<WebsiteData websiteId={websiteId} />
</TabPanel>
</Tabs> </Tabs>
{tab === 'details' && <WebsiteEditForm websiteId={websiteId} onSave={handleSave} />}
{tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
{tab === 'share' && <ShareUrl onSave={handleSave} />}
{tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleSave} />}
</> </>
); );
} }

2
src/app/(main)/settings/websites/[websiteId]/page.tsx
View file

@ -1,7 +1,7 @@
import { WebsiteSettingsPage } from './WebsiteSettingsPage'; import { WebsiteSettingsPage } from './WebsiteSettingsPage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
return <WebsiteSettingsPage websiteId={websiteId} />; return <WebsiteSettingsPage websiteId={websiteId} />;

2
src/app/(main)/settings/websites/page.tsx
View file

@ -1,7 +1,7 @@
import { Metadata } from 'next'; import { Metadata } from 'next';
import { WebsitesSettingsPage } from './WebsitesSettingsPage'; import { WebsitesSettingsPage } from './WebsitesSettingsPage';
export default async function ({ params }: { params: { teamId: string } }) { export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
const { teamId } = await params; const { teamId } = await params;
return <WebsitesSettingsPage teamId={teamId} />; return <WebsitesSettingsPage teamId={teamId} />;

6
src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx
View file

@ -1,4 +1,4 @@
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { TeamMembersTable } from './TeamMembersTable'; import { TeamMembersTable } from './TeamMembersTable';
import { useTeamMembers } from '@/components/hooks'; import { useTeamMembers } from '@/components/hooks';
@ -12,8 +12,8 @@ export function TeamMembersDataTable({
const queryResult = useTeamMembers(teamId); const queryResult = useTeamMembers(teamId);
return ( return (
<DataTable queryResult={queryResult}> <DataGrid queryResult={queryResult}>
{({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />} {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
</DataTable> </DataGrid>
); );
} }

2
src/app/(main)/teams/[teamId]/settings/team/page.tsx
View file

@ -1,7 +1,7 @@
import { Metadata } from 'next'; import { Metadata } from 'next';
import { TeamPage } from './TeamPage'; import { TeamPage } from './TeamPage';
export default async function ({ params }: { params: { teamId: string } }) { export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
const { teamId } = await params; const { teamId } = await params;
return <TeamPage teamId={teamId} />; return <TeamPage teamId={teamId} />;

6
src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx
View file

@ -1,4 +1,4 @@
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { useTeamWebsites } from '@/components/hooks'; import { useTeamWebsites } from '@/components/hooks';
import { TeamWebsitesTable } from './TeamWebsitesTable'; import { TeamWebsitesTable } from './TeamWebsitesTable';
@ -12,8 +12,8 @@ export function TeamWebsitesDataTable({
const queryResult = useTeamWebsites(teamId); const queryResult = useTeamWebsites(teamId);
return ( return (
<DataTable queryResult={queryResult}> <DataGrid queryResult={queryResult}>
{({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />} {({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
</DataTable> </DataGrid>
); );
} }

2
src/app/(main)/teams/[teamId]/settings/websites/page.tsx
View file

@ -1,7 +1,7 @@
import { TeamWebsitesPage } from './TeamWebsitesPage'; import { TeamWebsitesPage } from './TeamWebsitesPage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { teamId: string } }) { export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
const { teamId } = await params; const { teamId } = await params;
return <TeamWebsitesPage teamId={teamId} />; return <TeamWebsitesPage teamId={teamId} />;

4
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -1,7 +1,7 @@
import { Dropdown, Icon, Icons, Item, Text } from 'react-basics'; import { Dropdown, Icon, Icons, Item, Text } from 'react-basics';
import { LinkButton } from '@/components/common/LinkButton'; import { LinkButton } from '@/components/common/LinkButton';
import { useLocale, useMessages, useNavigation } from '@/components/hooks'; import { useLocale, useMessages, useNavigation } from '@/components/hooks';
import { SideNav } from '@/components/layout/SideNav'; import { MenuNav } from '@/components/layout/MenuNav';
import { BrowsersTable } from '@/components/metrics/BrowsersTable'; import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { CitiesTable } from '@/components/metrics/CitiesTable'; import { CitiesTable } from '@/components/metrics/CitiesTable';
import { CountriesTable } from '@/components/metrics/CountriesTable'; import { CountriesTable } from '@/components/metrics/CountriesTable';
@ -156,7 +156,7 @@ export function WebsiteExpandedView({
</Icon> </Icon>
<Text>{formatMessage(labels.back)}</Text> <Text>{formatMessage(labels.back)}</Text>
</LinkButton> </LinkButton>
<SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} /> <MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<Dropdown <Dropdown
className={styles.dropdown} className={styles.dropdown}
items={items} items={items}

11
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -1,13 +1,12 @@
import { ReactNode } from 'react';
import { Button, Icon, Text } from 'react-basics';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import classNames from 'classnames'; import classNames from 'classnames';
import { Favicon } from '@/components/common/Favicon'; import { Favicon } from '@/components/common/Favicon';
import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks'; import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
import { Icons } from '@/components/icons'; import { Icons } from '@/components/icons';
import { ActiveUsers } from '@/components/metrics/ActiveUsers'; import { ActiveUsers } from '@/components/metrics/ActiveUsers';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ReactNode } from 'react';
import { Button, Icon, Text } from 'react-basics';
import Lightning from '@/assets/lightning.svg';
import styles from './WebsiteHeader.module.css'; import styles from './WebsiteHeader.module.css';
export function WebsiteHeader({ export function WebsiteHeader({
@ -33,7 +32,7 @@ export function WebsiteHeader({
}, },
{ {
label: formatMessage(labels.events), label: formatMessage(labels.events),
icon: <Lightning />, icon: <Icons.Lightning />,
path: '/events', path: '/events',
}, },
{ {

4
src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
View file

@ -1,6 +1,6 @@
import { useDateRange, useMessages, useNavigation } from '@/components/hooks'; import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { Grid, GridRow } from '@/components/layout/Grid'; import { Grid, GridRow } from '@/components/layout/Grid';
import { SideNav } from '@/components/layout/SideNav'; import { MenuNav } from '@/components/layout/MenuNav';
import { BrowsersTable } from '@/components/metrics/BrowsersTable'; import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { ChangeLabel } from '@/components/metrics/ChangeLabel'; import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { CitiesTable } from '@/components/metrics/CitiesTable'; import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -145,7 +145,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
return ( return (
<Grid className={styles.container}> <Grid className={styles.container}>
<GridRow columns="compare"> <GridRow columns="compare">
<SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} /> <MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<div> <div>
<div className={styles.title}>{formatMessage(labels.previous)}</div> <div className={styles.title}>{formatMessage(labels.previous)}</div>
<Component <Component

2
src/app/(main)/websites/[websiteId]/compare/page.tsx
View file

@ -1,7 +1,7 @@
import { WebsiteComparePage } from './WebsiteComparePage'; import { WebsiteComparePage } from './WebsiteComparePage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
return <WebsiteComparePage websiteId={websiteId} />; return <WebsiteComparePage websiteId={websiteId} />;

6
src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
View file

@ -1,6 +1,6 @@
import { useWebsiteEvents } from '@/components/hooks'; import { useWebsiteEvents } from '@/components/hooks';
import { EventsTable } from './EventsTable'; import { EventsTable } from './EventsTable';
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
export function EventsDataTable({ export function EventsDataTable({
@ -13,8 +13,8 @@ export function EventsDataTable({
const queryResult = useWebsiteEvents(websiteId); const queryResult = useWebsiteEvents(websiteId);
return ( return (
<DataTable queryResult={queryResult} allowSearch={true} autoFocus={false}> <DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>
{({ data }) => <EventsTable data={data} />} {({ data }) => <EventsTable data={data} />}
</DataTable> </DataGrid>
); );
} }

2
src/app/(main)/websites/[websiteId]/events/page.tsx
View file

@ -1,7 +1,7 @@
import { Metadata } from 'next'; import { Metadata } from 'next';
import { EventsPage } from './EventsPage'; import { EventsPage } from './EventsPage';
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
return <EventsPage websiteId={websiteId} />; return <EventsPage websiteId={websiteId} />;

11
src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
View file

@ -71,9 +71,10 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
if (__type === TYPE_EVENT) { if (__type === TYPE_EVENT) {
return formatMessage(messages.eventLog, { return formatMessage(messages.eventLog, {
event: <b>{eventName || formatMessage(labels.unknown)}</b>, event: <b key="b">{eventName || formatMessage(labels.unknown)}</b>,
url: ( url: (
<a <a
key="a"
href={`//${website?.domain}${url}`} href={`//${website?.domain}${url}`}
className={styles.link} className={styles.link}
target="_blank" target="_blank"
@ -100,10 +101,10 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
if (__type === TYPE_SESSION) { if (__type === TYPE_SESSION) {
return formatMessage(messages.visitorLog, { return formatMessage(messages.visitorLog, {
country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>, country: <b key="country">{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b>{BROWSERS[browser]}</b>, browser: <b key="browser">{BROWSERS[browser]}</b>,
os: <b>{OS_NAMES[os] || os}</b>, os: <b key="os">{OS_NAMES[os] || os}</b>,
device: <b>{formatMessage(labels[device] || labels.unknown)}</b>, device: <b key="device">{formatMessage(labels[device] || labels.unknown)}</b>,
}); });
} }
}; };

2
src/app/(main)/websites/[websiteId]/realtime/page.tsx
View file

@ -1,7 +1,7 @@
import { WebsiteRealtimePage } from './WebsiteRealtimePage'; import { WebsiteRealtimePage } from './WebsiteRealtimePage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
return <WebsiteRealtimePage websiteId={websiteId} />; return <WebsiteRealtimePage websiteId={websiteId} />;

2
src/app/(main)/websites/[websiteId]/reports/page.tsx
View file

@ -1,7 +1,7 @@
import { WebsiteReportsPage } from './WebsiteReportsPage'; import { WebsiteReportsPage } from './WebsiteReportsPage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
return <WebsiteReportsPage websiteId={websiteId} />; return <WebsiteReportsPage websiteId={websiteId} />;

6
src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
View file

@ -1,6 +1,6 @@
import { useWebsiteSessions } from '@/components/hooks'; import { useWebsiteSessions } from '@/components/hooks';
import { SessionsTable } from './SessionsTable'; import { SessionsTable } from './SessionsTable';
import { DataTable } from '@/components/common/DataTable'; import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
export function SessionsDataTable({ export function SessionsDataTable({
@ -14,8 +14,8 @@ export function SessionsDataTable({
const queryResult = useWebsiteSessions(websiteId); const queryResult = useWebsiteSessions(websiteId);
return ( return (
<DataTable queryResult={queryResult} allowSearch={false} renderEmpty={() => children}> <DataGrid queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
{({ data }) => <SessionsTable data={data} showDomain={!websiteId} />} {({ data }) => <SessionsTable data={data} showDomain={!websiteId} />}
</DataTable> </DataGrid>
); );
} }

4
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -62,10 +62,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
<div className={styles.header}> <div className={styles.header}>
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</div> </div>
{day?.map((hour: number) => { {day?.map((hour: number, j) => {
const pct = hour / max; const pct = hour / max;
return ( return (
<div key={hour} className={classNames(styles.cell)}> <div key={j} className={classNames(styles.cell)}>
{hour > 0 && ( {hour > 0 && (
<TooltipPopup <TooltipPopup
label={`${formatMessage(labels.visitors)}: ${hour}`} label={`${formatMessage(labels.visitors)}: ${hour}`}

2
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx
View file

@ -4,7 +4,7 @@ import { Metadata } from 'next';
export default async function WebsitePage({ export default async function WebsitePage({
params, params,
}: { }: {
params: { websiteId: string; sessionId: string }; params: Promise<{ websiteId: string; sessionId: string }>;
}) { }) {
const { websiteId, sessionId } = await params; const { websiteId, sessionId } = await params;

2
src/app/(main)/websites/[websiteId]/sessions/page.tsx
View file

@ -1,7 +1,7 @@
import { SessionsPage } from './SessionsPage'; import { SessionsPage } from './SessionsPage';
import { Metadata } from 'next'; import { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) { export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params; const { websiteId } = await params;
return <SessionsPage websiteId={websiteId} />; return <SessionsPage websiteId={websiteId} />;

39
src/app/api/batch/route.ts Normal file
View file

@ -0,0 +1,39 @@
import { z } from 'zod';
import * as send from '@/app/api/send/route';
import { parseRequest } from '@/lib/request';
import { json, serverError } from '@/lib/response';
const schema = z.array(z.object({}).passthrough());
export async function POST(request: Request) {
try {
const { body, error } = await parseRequest(request, schema, { skipAuth: true });
if (error) {
return error();
}
const errors = [];
let index = 0;
for (const data of body) {
const newRequest = new Request(request, { body: JSON.stringify(data) });
const response = await send.POST(newRequest);
if (!response.ok) {
errors.push({ index, response: await response.json() });
}
index++;
}
return json({
size: body.length,
processed: body.length - errors.length,
errors: errors.length,
details: errors,
});
} catch (e) {
return serverError(e);
}
}

36
src/app/api/send/route.ts
View file

@ -1,31 +1,33 @@
import { z } from 'zod'; import { z } from 'zod';
import { isbot } from 'isbot'; import { isbot } from 'isbot';
import { createToken, parseToken } from '@/lib/jwt'; import { startOfHour, startOfMonth } from 'date-fns';
import clickhouse from '@/lib/clickhouse'; import clickhouse from '@/lib/clickhouse';
import { parseRequest } from '@/lib/request'; import { parseRequest } from '@/lib/request';
import { badRequest, json, forbidden, serverError } from '@/lib/response'; import { badRequest, json, forbidden, serverError } from '@/lib/response';
import { fetchSession, fetchWebsite } from '@/lib/load'; import { fetchSession, fetchWebsite } from '@/lib/load';
import { getClientInfo, hasBlockedIp } from '@/lib/detect'; import { getClientInfo, hasBlockedIp } from '@/lib/detect';
import { secret, uuid, visitSalt } from '@/lib/crypto'; import { createToken, parseToken } from '@/lib/jwt';
import { COLLECTION_TYPE, DOMAIN_REGEX } from '@/lib/constants'; import { secret, uuid, hash } from '@/lib/crypto';
import { COLLECTION_TYPE } from '@/lib/constants';
import { anyObjectParam, urlOrPathParam } from '@/lib/schema';
import { createSession, saveEvent, saveSessionData } from '@/queries'; import { createSession, saveEvent, saveSessionData } from '@/queries';
import { urlOrPathParam } from '@/lib/schema';
const schema = z.object({ const schema = z.object({
type: z.enum(['event', 'identify']), type: z.enum(['event', 'identify']),
payload: z.object({ payload: z.object({
website: z.string().uuid(), website: z.string().uuid(),
data: z.object({}).passthrough().optional(), data: anyObjectParam.optional(),
hostname: z.string().regex(DOMAIN_REGEX).max(100).optional(), hostname: z.string().max(100).optional(),
language: z.string().max(35).optional(), language: z.string().max(35).optional(),
referrer: urlOrPathParam.optional(), referrer: urlOrPathParam.optional(),
screen: z.string().max(11).optional(), screen: z.string().max(11).optional(),
title: z.string().optional(), title: z.string().optional(),
url: urlOrPathParam, url: urlOrPathParam.optional(),
name: z.string().max(50).optional(), name: z.string().max(50).optional(),
tag: z.string().max(50).optional(), tag: z.string().max(50).optional(),
ip: z.string().ip().optional(), ip: z.string().ip().optional(),
userAgent: z.string().optional(), userAgent: z.string().optional(),
timestamp: z.coerce.number().int().optional(),
}), }),
}); });
@ -55,6 +57,7 @@ export async function POST(request: Request) {
data, data,
title, title,
tag, tag,
timestamp,
} = payload; } = payload;
// Cache check // Cache check
@ -87,7 +90,13 @@ export async function POST(request: Request) {
return forbidden(); return forbidden();
} }
const sessionId = uuid(websiteId, ip, userAgent); const createdAt = timestamp ? new Date(timestamp * 1000) : new Date();
const now = Math.floor(new Date().getTime() / 1000);
const sessionSalt = hash(startOfMonth(createdAt).toUTCString());
const visitSalt = hash(startOfHour(createdAt).toUTCString());
const sessionId = uuid(websiteId, ip, userAgent, sessionSalt);
// Find session // Find session
if (!clickhouse.enabled && !cache?.sessionId) { if (!clickhouse.enabled && !cache?.sessionId) {
@ -119,13 +128,12 @@ export async function POST(request: Request) {
} }
// Visit info // Visit info
const now = Math.floor(new Date().getTime() / 1000); let visitId = cache?.visitId || uuid(sessionId, visitSalt);
let visitId = cache?.visitId || uuid(sessionId, visitSalt());
let iat = cache?.iat || now; let iat = cache?.iat || now;
// Expire visit after 30 minutes // Expire visit after 30 minutes
if (now - iat > 1800) { if (!timestamp && now - iat > 1800) {
visitId = uuid(sessionId, visitSalt()); visitId = uuid(sessionId, visitSalt);
iat = now; iat = now;
} }
@ -179,6 +187,7 @@ export async function POST(request: Request) {
subdivision2, subdivision2,
city, city,
tag, tag,
createdAt,
}); });
} }
@ -191,12 +200,13 @@ export async function POST(request: Request) {
websiteId, websiteId,
sessionId, sessionId,
sessionData: data, sessionData: data,
createdAt,
}); });
} }
const token = createToken({ websiteId, sessionId, visitId, iat }, secret()); const token = createToken({ websiteId, sessionId, visitId, iat }, secret());
return json({ cache: token }); return json({ cache: token, sessionId, visitId });
} catch (e) { } catch (e) {
return serverError(e); return serverError(e);
} }

2
src/app/api/users/[userId]/route.ts
View file

@ -27,7 +27,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ use
const schema = z.object({ const schema = z.object({
username: z.string().max(255), username: z.string().max(255),
password: z.string().max(255), password: z.string().max(255),
role: z.string().regex(/admin|user|view-only/i), role: z.enum(['admin', 'user', 'view-only']),
}); });
const { auth, body, error } = await parseRequest(request, schema); const { auth, body, error } = await parseRequest(request, schema);

14
src/app/login/LoginForm.tsx
View file

@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation';
import { useApi, useMessages } from '@/components/hooks'; import { useApi, useMessages } from '@/components/hooks';
import { setUser } from '@/store/app'; import { setUser } from '@/store/app';
import { setClientAuthToken } from '@/lib/client'; import { setClientAuthToken } from '@/lib/client';
import Logo from '@/assets/logo.svg'; import { Icons } from '@/components/icons';
export function LoginForm() { export function LoginForm() {
const { formatMessage, labels, getMessage } = useMessages(); const { formatMessage, labels, getMessage } = useMessages();
@ -35,17 +35,9 @@ export function LoginForm() {
}; };
return ( return (
<Column <Column justifyContent="center" alignItems="center" padding="8" gap="6">
justifyContent="center"
alignItems="center"
padding="8"
gap="6"
backgroundColor="1"
borderRadius="3"
shadow="3"
>
<Icon size="lg"> <Icon size="lg">
<Logo /> <Icons.Logo />
</Icon> </Icon>
<Heading>umami</Heading> <Heading>umami</Heading>
<Form onSubmit={handleSubmit} error={getMessage(error)}> <Form onSubmit={handleSubmit} error={getMessage(error)}>

2
src/assets/logo.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 390 B

After

Width:  |  Height:  |  Size: 411 B

Before After
Before After

16
src/components/common/ConfirmationForm.tsx
View file

@ -1,11 +1,11 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Button, LoadingButton, Form, FormButtons } from 'react-basics'; import { Row, Button, FormSubmitButton, Form, FormButtons } from '@umami/react-zen';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
export interface ConfirmationFormProps { export interface ConfirmationFormProps {
message: ReactNode; message: ReactNode;
buttonLabel?: ReactNode; buttonLabel?: ReactNode;
buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger'; buttonVariant?: 'primary' | 'quiet' | 'danger';
isLoading?: boolean; isLoading?: boolean;
error?: string | Error; error?: string | Error;
onConfirm?: () => void; onConfirm?: () => void;
@ -24,13 +24,13 @@ export function ConfirmationForm({
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
return ( return (
<Form error={error}> <Form onSubmit={onConfirm} error={error}>
<p>{message}</p> <Row marginY="4">{message}</Row>
<FormButtons flex> <FormButtons>
<LoadingButton isLoading={isLoading} onClick={onConfirm} variant={buttonVariant}> <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton isLoading={isLoading} variant={buttonVariant}>
{buttonLabel || formatMessage(labels.ok)} {buttonLabel || formatMessage(labels.ok)}
</LoadingButton> </FormSubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</FormButtons> </FormButtons>
</Form> </Form>
); );

0
src/components/common/DataTable.module.css → src/components/common/DataGrid.module.css
View file

55
src/components/common/DataTable.tsx → src/components/common/DataGrid.tsx
View file

@ -1,12 +1,10 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import classNames from 'classnames'; import { Loading, SearchField, Row, Column } from '@umami/react-zen';
import { Loading, SearchField } from 'react-basics';
import { useMessages, useNavigation } from '@/components/hooks'; import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty'; import { Empty } from '@/components/common/Empty';
import { Pager } from '@/components/common/Pager'; import { Pager } from '@/components/common/Pager';
import { PagedQueryResult } from '@/lib/types';
import styles from './DataTable.module.css';
import { LoadingPanel } from '@/components/common/LoadingPanel'; import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PagedQueryResult } from '@/lib/types';
const DEFAULT_SEARCH_DELAY = 600; const DEFAULT_SEARCH_DELAY = 600;
@ -20,7 +18,7 @@ export interface DataTableProps {
children: ReactNode | ((data: any) => ReactNode); children: ReactNode | ((data: any) => ReactNode);
} }
export function DataTable({ export function DataGrid({
queryResult, queryResult,
searchDelay = 600, searchDelay = 600,
allowSearch = true, allowSearch = true,
@ -30,12 +28,8 @@ export function DataTable({
children, children,
}: DataTableProps) { }: DataTableProps) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
const { const { result, params, setParams, query } = queryResult || {};
result, const { error, isLoading, isFetched } = query || {};
params,
setParams,
query: { error, isLoading, isFetched },
} = queryResult || {};
const { page, pageSize, count, data } = result || {}; const { page, pageSize, count, data } = result || {};
const { search } = params || {}; const { search } = params || {};
const hasData = Boolean(!isLoading && data?.length); const hasData = Boolean(!isLoading && data?.length);
@ -43,45 +37,38 @@ export function DataTable({
const { router, renderUrl } = useNavigation(); const { router, renderUrl } = useNavigation();
const handleSearch = (search: string) => { const handleSearch = (search: string) => {
setParams({ ...params, search, page: params.page ? page : 1 }); setParams({ ...params, search });
}; };
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
setParams({ ...params, search, page }); setParams({ ...params, page });
router.push(renderUrl({ page })); router.push(renderUrl({ page }));
}; };
return ( return (
<> <>
{allowSearch && (hasData || search) && ( {allowSearch && (hasData || search) && (
<SearchField <Row width="280px" alignItems="center" marginBottom="6">
className={styles.search} <SearchField
value={search} value={search}
onSearch={handleSearch} onSearch={handleSearch}
delay={searchDelay || DEFAULT_SEARCH_DELAY} delay={searchDelay || DEFAULT_SEARCH_DELAY}
autoFocus={autoFocus} autoFocus={autoFocus}
placeholder={formatMessage(labels.search)} placeholder={formatMessage(labels.search)}
/> />
</Row>
)} )}
<LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}> <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
<div <Column>
className={classNames(styles.body, {
[styles.status]: isLoading || noResults || !hasData,
})}
>
{hasData ? (typeof children === 'function' ? children(result) : children) : null} {hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />} {isLoading && <Loading position="page" />}
{!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)} {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />} {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</div> </Column>
{allowPaging && hasData && ( {allowPaging && hasData && (
<Pager <Row marginTop="6">
className={styles.pager} <Pager page={page} pageSize={pageSize} count={count} onPageChange={handlePageChange} />
page={page} </Row>
pageSize={pageSize}
count={count}
onPageChange={handlePageChange}
/>
)} )}
</LoadingPanel> </LoadingPanel>
</> </>

4
src/components/common/EmptyPlaceholder.tsx
View file

@ -1,6 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Icon, Text, Flexbox } from 'react-basics'; import { Icon, Text, Flexbox } from 'react-basics';
import Logo from '@/assets/logo.svg'; import { Icons } from '@/components/icons';
export interface EmptyPlaceholderProps { export interface EmptyPlaceholderProps {
message?: string; message?: string;
@ -11,7 +11,7 @@ export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
return ( return (
<Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}> <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
<Icon size="xl"> <Icon size="xl">
<Logo /> <Icons.Logo />
</Icon> </Icon>
<Text size="lg">{message}</Text> <Text size="lg">{message}</Text>
<div>{children}</div> <div>{children}</div>

2
src/components/common/LoadingPanel.tsx
View file

@ -1,6 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Loading } from 'react-basics'; import { Loading } from '@umami/react-zen';
import { ErrorMessage } from '@/components/common/ErrorMessage'; import { ErrorMessage } from '@/components/common/ErrorMessage';
import { Empty } from '@/components/common/Empty'; import { Empty } from '@/components/common/Empty';
import styles from './LoadingPanel.module.css'; import styles from './LoadingPanel.module.css';

33
src/components/common/Pager.tsx
View file

@ -1,7 +1,5 @@
import classNames from 'classnames'; import { Button, Icon, Icons, Row, Text } from '@umami/react-zen';
import { Button, Icon, Icons } from 'react-basics';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
import styles from './Pager.module.css';
export interface PagerProps { export interface PagerProps {
page: string | number; page: string | number;
@ -11,7 +9,7 @@ export interface PagerProps {
className?: string; className?: string;
} }
export function Pager({ page, pageSize, count, onPageChange, className }: PagerProps) { export function Pager({ page, pageSize, count, onPageChange }: PagerProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const maxPage = pageSize && count ? Math.ceil(+count / +pageSize) : 0; const maxPage = pageSize && count ? Math.ceil(+count / +pageSize) : 0;
const lastPage = page === maxPage; const lastPage = page === maxPage;
@ -34,24 +32,21 @@ export function Pager({ page, pageSize, count, onPageChange, className }: PagerP
} }
return ( return (
<div className={classNames(styles.pager, className)}> <Row alignItems="center" justifyContent="space-between" gap="3" flexGrow={1}>
<div className={styles.count}>{formatMessage(labels.numberOfRecords, { x: count })}</div> <Text>{formatMessage(labels.numberOfRecords, { x: count })}</Text>
<div className={styles.nav}> <Row alignItems="center" justifyContent="flex-end" gap="3">
<Button onClick={() => handlePageChange(-1)} disabled={firstPage}> <Text>{formatMessage(labels.pageOf, { current: page, total: maxPage })}</Text>
<Icon rotate={90}> <Button onPress={() => handlePageChange(-1)} isDisabled={firstPage}>
<Icons.ChevronDown /> <Icon size="sm" rotate={180}>
<Icons.Chevron />
</Icon> </Icon>
</Button> </Button>
<div className={styles.text}> <Button onPress={() => handlePageChange(1)} isDisabled={lastPage}>
{formatMessage(labels.pageOf, { current: page, total: maxPage })} <Icon size="sm">
</div> <Icons.Chevron />
<Button onClick={() => handlePageChange(1)} disabled={lastPage}>
<Icon rotate={270}>
<Icons.ChevronDown />
</Icon> </Icon>
</Button> </Button>
</div> </Row>
<div></div> </Row>
</div>
); );
} }

2
src/components/hooks/useApi.ts
View file

@ -8,7 +8,7 @@ import { useApp } from '@/store/app';
const selector = (state: { shareToken: { token?: string } }) => state.shareToken; const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
async function handleResponse(res: FetchResponse): Promise<any> { async function handleResponse(res: FetchResponse): Promise<any> {
if (!res.ok) { if (res.error) {
const { message, code } = res?.error?.error || {}; const { message, code } = res?.error?.error || {};
return Promise.reject(new Error(code || message || 'Unexpectd error.')); return Promise.reject(new Error(code || message || 'Unexpectd error.'));
} }

54
src/components/icons.ts
View file

@ -1,60 +1,10 @@
import { Icons as ReactBasicsIcons } from 'react-basics'; import { Icons as ReactBasicsIcons } from 'react-basics';
import * as lucide from 'lucide-react'; import * as lucide from 'lucide-react';
import AddUser from '@/assets/add-user.svg'; import * as LocalIcons from '@/components/svg';
import Bars from '@/assets/bars.svg';
import BarChart from '@/assets/bar-chart.svg';
import Bolt from '@/assets/bolt.svg';
import Calendar from '@/assets/calendar.svg';
import Change from '@/assets/change.svg';
import Clock from '@/assets/clock.svg';
import Compare from '@/assets/compare.svg';
import Dashboard from '@/assets/dashboard.svg';
import Eye from '@/assets/eye.svg';
import Gear from '@/assets/gear.svg';
import Globe from '@/assets/globe.svg';
import Location from '@/assets/location.svg';
import Lock from '@/assets/lock.svg';
import Logo from '@/assets/logo.svg';
import Magnet from '@/assets/magnet.svg';
import Moon from '@/assets/moon.svg';
import Nodes from '@/assets/nodes.svg';
import Overview from '@/assets/overview.svg';
import Profile from '@/assets/profile.svg';
import PushPin from '@/assets/pushpin.svg';
import Reports from '@/assets/reports.svg';
import Sun from '@/assets/sun.svg';
import User from '@/assets/user.svg';
import Users from '@/assets/users.svg';
import Visitor from '@/assets/visitor.svg';
const icons = { const icons = {
...ReactBasicsIcons, ...ReactBasicsIcons,
AddUser, ...LocalIcons,
Bars,
BarChart,
Bolt,
Calendar,
Change,
Clock,
Compare,
Dashboard,
Eye,
Gear,
Globe,
Location,
Lock,
Logo,
Magnet,
Moon,
Nodes,
Overview,
Profile,
PushPin,
Reports,
Sun,
User,
Users,
Visitor,
}; };
export const Lucide = lucide; export const Lucide = lucide;

1
src/components/input/LanguageButton.module.css
View file

@ -24,6 +24,7 @@
} }
.selected { .selected {
color: var(--font-color);
font-weight: 700; font-weight: 700;
background: var(--blue100); background: var(--blue100);
} }

20
src/components/layout/MenuLayout.tsx
View file

@ -1,22 +1,18 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { usePathname } from 'next/navigation'; import { Grid, Column } from '@umami/react-zen';
import { SideNav } from '@/components/layout/SideNav'; import { MenuNav } from '@/components/layout/MenuNav';
import styles from './MenuLayout.module.css';
export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) { export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
const pathname = usePathname();
const cloudMode = !!process.env.cloudMode; const cloudMode = !!process.env.cloudMode;
const getKey = () => items.find(({ url }) => pathname === url)?.key;
return ( return (
<div className={styles.layout}> <Grid columns="auto 1fr" gap="5">
{!cloudMode && ( {!cloudMode && (
<div className={styles.menu}> <Column width="240px">
<SideNav items={items} shallow={true} selectedKey={getKey()} /> <MenuNav items={items} shallow={true} />
</div> </Column>
)} )}
<div className={styles.content}>{children}</div> <Column>{children}</Column>
</div> </Grid>
); );
} }

0
src/components/layout/SideNav.module.css → src/components/layout/MenuNav.module.css
View file

29
src/components/layout/MenuNav.tsx Normal file
View file

@ -0,0 +1,29 @@
import { List, ListItem, Text } from '@umami/react-zen';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
export interface SideNavProps {
items: any[];
shallow?: boolean;
scroll?: boolean;
}
export function MenuNav({ items, shallow = true, scroll = false }: SideNavProps) {
const pathname = usePathname();
return (
<List>
{items.map(({ key, label, url }) => {
const isSelected = pathname.startsWith(url);
return (
<ListItem key={key}>
<Link href={url} shallow={shallow} scroll={scroll}>
<Text weight={isSelected ? 'bold' : 'regular'}>{label}</Text>
</Link>
</ListItem>
);
})}
</List>
);
}

80
src/components/layout/NavGroup.module.css
View file

@ -1,80 +0,0 @@
.group {
display: flex;
flex-direction: column;
width: 100%;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--base600);
font-size: 11px;
font-weight: 600;
padding: 10px 20px;
text-transform: uppercase;
cursor: pointer;
}
.body {
display: none;
}
.expanded .body {
display: block;
}
.item {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
border-inline-end: 2px solid var(--base200);
padding: 1rem 2rem;
gap: var(--size500);
font-weight: 600;
width: 200px;
margin-inline-end: -2px;
}
a.item {
color: var(--base700);
}
.item.selected {
color: var(--base900);
border-inline-end-color: var(--primary400);
background: var(--blue100);
}
.item:hover {
color: var(--base900);
}
.minimized .text,
.minimized .header {
display: none;
}
.minimized .item {
width: 60px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.divider:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
border-top: 1px solid var(--base300);
width: 160px;
}
.minimized .divider:before {
width: 60px;
}

64
src/components/layout/NavGroup.tsx
View file

@ -1,64 +0,0 @@
import { useState } from 'react';
import { Icon, Text, TooltipPopup } from 'react-basics';
import classNames from 'classnames';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Icons } from '@/components/icons';
import styles from './NavGroup.module.css';
export interface NavGroupProps {
title: string;
items: any[];
defaultExpanded?: boolean;
allowExpand?: boolean;
minimized?: boolean;
}
export function NavGroup({
title,
items,
defaultExpanded = true,
allowExpand = true,
minimized = false,
}: NavGroupProps) {
const pathname = usePathname();
const [expanded, setExpanded] = useState(defaultExpanded);
const handleExpand = () => setExpanded(state => !state);
return (
<div
className={classNames(styles.group, {
[styles.expanded]: expanded,
[styles.minimized]: minimized,
})}
>
{title && (
<div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
<Text>{title}</Text>
<Icon size="sm" rotate={expanded ? 0 : -90}>
<Icons.ChevronDown />
</Icon>
</div>
)}
<div className={styles.body}>
{items.map(({ label, url, icon, divider }) => {
return (
<TooltipPopup key={label} label={label} position="right" disabled={!minimized}>
<Link
href={url}
className={classNames(styles.item, {
[styles.divider]: divider,
[styles.selected]: pathname.startsWith(url),
})}
>
<Icon>{icon}</Icon>
<Text className={styles.text}>{label}</Text>
</Link>
</TooltipPopup>
);
})}
</div>
</div>
);
}

16
src/components/layout/PageHeader.tsx
View file

@ -1,29 +1,23 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Heading, Icon, Breadcrumbs, Breadcrumb, Row } from '@umami/react-zen'; import { Heading, Icon, Row } from '@umami/react-zen';
export function PageHeader({ export function PageHeader({
title, title,
icon, icon,
breadcrumb,
children, children,
}: { }: {
title?: ReactNode; title?: ReactNode;
icon?: ReactNode; icon?: ReactNode;
className?: string; className?: string;
breadcrumb?: ReactNode;
children?: ReactNode; children?: ReactNode;
}) { }) {
return ( return (
<> <Row justifyContent="space-between" alignItems="center" paddingBottom="6">
<Breadcrumbs> <Row gap="3">
<Breadcrumb>{breadcrumb}</Breadcrumb>
</Breadcrumbs>
<Row justifyContent="space-between" paddingY="6">
{icon && <Icon size="lg">{icon}</Icon>} {icon && <Icon size="lg">{icon}</Icon>}
{title && <Heading>{title}</Heading>} {title && <Heading>{title}</Heading>}
<Row justifyContent="flex-end">{children}</Row>
</Row> </Row>
</> <Row justifyContent="flex-end">{children}</Row>
</Row>
); );
} }

44
src/components/layout/SideNav.tsx
View file

@ -1,44 +0,0 @@
import classNames from 'classnames';
import { Menu, Item } from 'react-basics';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import styles from './SideNav.module.css';
export interface SideNavProps {
selectedKey: string;
items: any[];
shallow?: boolean;
scroll?: boolean;
className?: string;
onSelect?: () => void;
}
export function SideNav({
selectedKey,
items,
shallow = true,
scroll = false,
className,
onSelect = () => {},
}: SideNavProps) {
const pathname = usePathname();
return (
<Menu
items={items}
selectedKey={selectedKey}
className={classNames(styles.menu, className)}
onSelect={onSelect}
>
{({ key, label, url }) => (
<Item
key={key}
className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
>
<Link href={url} shallow={shallow} scroll={scroll}>
{label}
</Link>
</Item>
)}
</Menu>
);
}

16
src/components/svg/AddUser.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgAddUser = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={512}
height={512}
data-name="Layer 2"
viewBox="0 0 30 30"
{...props}
>
<path d="M15 14a5.5 5.5 0 1 1 5.5-5.5A5.51 5.51 0 0 1 15 14m0-9a3.5 3.5 0 1 0 3.5 3.5A3.5 3.5 0 0 0 15 5M7.5 24.5a1 1 0 0 1-1-1 8.5 8.5 0 0 1 13.6-6.8 1 1 0 1 1-1.2 1.6A6.44 6.44 0 0 0 15 17a6.51 6.51 0 0 0-6.5 6.5 1 1 0 0 1-1 1M23 27a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1" />
<path d="M26 24h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2" />
</svg>
);
export default SvgAddUser;

8
src/components/svg/BarChart.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgBarChart = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 24 24" {...props}>
<path d="M7 13v9a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1m7-12h-4a1 1 0 0 0-1 1v20a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1m8 5h-4a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1" />
</svg>
);
export default SvgBarChart;

8
src/components/svg/Bars.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgBars = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
<path d="M424 392H24c-13.2 0-24 10.8-24 24s10.8 24 24 24h400c13.2 0 24-10.8 24-24s-10.8-24-24-24m0-320H24C10.8 72 0 82.8 0 96s10.8 24 24 24h400c13.2 0 24-10.8 24-24s-10.8-24-24-24m0 160H24c-13.2 0-24 10.8-24 24s10.8 24 24 24h400c13.2 0 24-10.8 24-24s-10.8-24-24-24" />
</svg>
);
export default SvgBars;

8
src/components/svg/Bolt.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgBolt = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" {...props}>
<path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36" />
</svg>
);
export default SvgBolt;

8
src/components/svg/Bookmark.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgBookmark = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 24 24" {...props}>
<path d="M3.515 22.875a1 1 0 0 0 1.015-.027L12 18.179l7.47 4.669A1 1 0 0 0 21 22V4a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v18a1 1 0 0 0 .515.875M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16.2l-6.47-4.044a1 1 0 0 0-1.06 0L5 20.2z" />
</svg>
);
export default SvgBookmark;

8
src/components/svg/Calendar.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgCalendar = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
<path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48M48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16m352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16M148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12m192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12" />
</svg>
);
export default SvgCalendar;

13
src/components/svg/Change.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgChange = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
viewBox="0 0 512.013 512.013"
{...props}
>
<path d="m372.653 244.726 22.56 22.56 112-112c6.204-6.241 6.204-16.319 0-22.56l-112-112-22.56 22.72 84.8 84.64H.013v32h457.44zm139.36 107.36H54.573l84.8-84.64-22.72-22.72-112 112c-6.204 6.241-6.204 16.319 0 22.56l112 112 22.56-22.56-84.64-84.64h457.44z" />
</svg>
);
export default SvgChange;

12
src/components/svg/Clock.tsx Normal file
View file

@ -0,0 +1,12 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgClock = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 24 24" {...props}>
<g clipRule="evenodd">
<path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12" />
<path d="M11.168 11.445a1 1 0 0 1 1.387-.277l3 2a1 1 0 0 1-1.11 1.664l-3-2a1 1 0 0 1-.277-1.387" />
<path d="M12 6a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1" />
</g>
</svg>
);
export default SvgClock;

8
src/components/svg/Compare.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgCompare = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 24 24" {...props}>
<path d="M6 22a1 1 0 0 1-.71-.29l-4-4a1 1 0 0 1 0-1.42l4-4a1 1 0 0 1 1.42 1.42L4.41 16H22a1 1 0 0 1 0 2H4.41l2.3 2.29a1 1 0 0 1 0 1.42A1 1 0 0 1 6 22m12-10a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L19.59 8H2a1 1 0 0 1 0-2h17.59l-2.3-2.29a1 1 0 0 1 1.42-1.42l4 4a1 1 0 0 1 0 1.42l-4 4A1 1 0 0 1 18 12" />
</svg>
);
export default SvgCompare;

21
src/components/svg/Dashboard.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgDashboard = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
className="dashboard_svg__lucide dashboard_svg__lucide-layout-dashboard"
viewBox="0 0 24 24"
{...props}
>
<rect width={7} height={9} x={3} y={3} rx={1} />
<rect width={7} height={5} x={14} y={3} rx={1} />
<rect width={7} height={9} x={14} y={12} rx={1} />
<rect width={7} height={5} x={3} y={16} rx={1} />
</svg>
);
export default SvgDashboard;

18
src/components/svg/Expand.tsx Normal file
View file

@ -0,0 +1,18 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgExpand = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={512}
height={512}
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
clipRule="evenodd"
viewBox="0 0 48 48"
{...props}
>
<path d="M7.5 40.018v-10.5c0-1.379-1.12-2.5-2.5-2.5s-2.5 1.121-2.5 2.5v11a4.5 4.5 0 0 0 4.5 4.5h12a2.5 2.5 0 0 0 0-5zm33 0H29a2.5 2.5 0 0 0 0 5h12a4.5 4.5 0 0 0 4.5-4.5v-11c0-1.379-1.12-2.5-2.5-2.5s-2.5 1.121-2.5 2.5zm-33-33H19a2.5 2.5 0 0 0 0-5H7a4.5 4.5 0 0 0-4.5 4.5v11a2.5 2.5 0 0 0 5 0zm33 0v10.5a2.5 2.5 0 0 0 5 0v-11a4.5 4.5 0 0 0-4.5-4.5H29a2.5 2.5 0 0 0 0 5z" />
</svg>
);
export default SvgExpand;

8
src/components/svg/Eye.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgEye = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
<path d="M288 144a111 111 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144m284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19M288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400" />
</svg>
);
export default SvgEye;

8
src/components/svg/Flag.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgFlag = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 510 510" {...props}>
<path d="m393.159 121.41 69.152-86.44c-16.753-2.022-149.599-37.363-282.234-8.913V0h-30v361.898c-25.85 6.678-45 30.195-45 58.102v1.509c-34.191 6.969-60 37.272-60 73.491v15h240v-15c0-36.22-25.809-66.522-60-73.491V420c0-27.906-19.15-51.424-45-58.102V237.165c153.335-30.989 264.132 7.082 284.847 9.834zM252.506 480H77.647c6.19-17.461 22.873-30 42.43-30h90c19.556 0 36.238 12.539 42.429 30m-57.429-60h-60c0-16.542 13.458-30 30-30s30 13.458 30 30m-15-213.427V56.771c66.329-15.269 141.099-15.756 227.537-1.455l-50.619 63.274 48.8 85.4c-75.047-12.702-150.759-11.841-225.718 2.583" />
</svg>
);
export default SvgFlag;

11
src/components/svg/Funnel.tsx Normal file
View file

@ -0,0 +1,11 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgFunnel = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 32 32" {...props}>
<path d="M29 11H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h26a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1M4 9h24V5H4z" />
<path d="M25 17H7a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1M8 15h16v-4H8z" />
<path d="M22 23H10a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1m-11-2h10v-4H11z" />
<path d="M19 29h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1m-5-2h4v-4h-4z" />
</svg>
);
export default SvgFunnel;

8
src/components/svg/Gear.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgGear = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
<path d="M504.265 315.978c0-8.652-4.607-16.844-12.359-21.392l-32.908-18.971a199 199 0 0 0 0-39.23l32.908-18.971c7.752-4.548 12.359-12.74 12.359-21.392 0-21.267-49.318-128.176-84.519-128.176-4.244 0-8.51 1.093-12.367 3.357l-32.78 18.969a195 195 0 0 0-34.068-19.744v-37.94c0-11.226-7.484-21.035-18.326-23.875C300.654 2.871 278.425 0 256.181 0a257.7 257.7 0 0 0-66.121 8.613c-10.842 2.84-18.326 12.649-18.326 23.875v37.94a195 195 0 0 0-34.068 19.744l-32.78-18.969a24.36 24.36 0 0 0-12.367-3.357h-.007C60.048 67.846 8 169.591 8 196.022c0 8.652 4.607 16.844 12.359 21.392l32.908 18.971a199 199 0 0 0 0 39.23l-32.908 18.971C12.607 299.134 8 307.326 8 315.978c0 21.267 49.318 128.176 84.519 128.176 4.244 0 8.51-1.093 12.367-3.357l32.78-18.969a195 195 0 0 0 34.068 19.744v37.94c0 11.226 7.484 21.035 18.326 23.875 21.551 5.742 43.78 8.613 66.024 8.613 22.246 0 44.506-2.871 66.121-8.613 10.842-2.84 18.326-12.649 18.326-23.875v-37.94a195 195 0 0 0 34.068-19.744l32.78 18.969a24.36 24.36 0 0 0 12.367 3.357c32.463 0 84.519-101.731 84.519-128.176m-88.904 73.981c-23.8-13.773-11.26-6.515-43.656-25.264-42.056 30.395-32.33 24.731-79.174 45.887v50.238a210 210 0 0 1-36.438 3.18 209 209 0 0 1-36.359-3.176v-50.242c-46.955-21.206-37.182-15.538-79.174-45.887l-43.636 25.254a207.4 207.4 0 0 1-36.407-63.109c21.126-12.177 11.844-6.826 43.571-25.117-2.539-25.64-3.811-35.644-3.811-45.683 0-10.022 1.268-20.08 3.811-45.763-31.89-18.385-22.517-12.982-43.584-25.125a207.1 207.1 0 0 1 36.4-63.111c23.8 13.773 11.26 6.515 43.656 25.264 42.056-30.395 32.33-24.731 79.174-45.887V51.18A210 210 0 0 1 256.172 48c15.425 0 27.954 1.694 36.359 3.176v50.242c46.955 21.206 37.182 15.538 79.174 45.887l43.638-25.254a207.4 207.4 0 0 1 36.405 63.109c-21.126 12.177-11.844 6.826-43.571 25.117 2.539 25.64 3.811 35.644 3.811 45.683 0 10.022-1.268 20.08-3.811 45.763 31.89 18.385 22.517 12.982 43.584 25.125a207.1 207.1 0 0 1-36.4 63.111M256.133 160c-52.875 0-96 43.125-96 96s43.125 96 96 96 96-43.125 96-96-43.125-96-96-96m0 144c-26.467 0-48-21.533-48-48s21.533-48 48-48 48 21.533 48 48-21.534 48-48 48" />
</svg>
);
export default SvgGear;

8
src/components/svg/Globe.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgGlobe = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" {...props}>
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8m179.3 160h-67.2c-6.7-36.5-17.5-68.8-31.2-94.7 42.9 19 77.7 52.7 98.4 94.7M248 56c18.6 0 48.6 41.2 63.2 112H184.8C199.4 97.2 229.4 56 248 56M48 256c0-13.7 1.4-27.1 4-40h77.7c-1 13.1-1.7 26.3-1.7 40s.7 26.9 1.7 40H52c-2.6-12.9-4-26.3-4-40m20.7 88h67.2c6.7 36.5 17.5 68.8 31.2 94.7-42.9-19-77.7-52.7-98.4-94.7m67.2-176H68.7c20.7-42 55.5-75.7 98.4-94.7-13.7 25.9-24.5 58.2-31.2 94.7M248 456c-18.6 0-48.6-41.2-63.2-112h126.5c-14.7 70.8-44.7 112-63.3 112m70.1-160H177.9c-1.1-12.8-1.9-26-1.9-40s.8-27.2 1.9-40h140.3c1.1 12.8 1.9 26 1.9 40s-.9 27.2-2 40m10.8 142.7c13.7-25.9 24.4-58.2 31.2-94.7h67.2c-20.7 42-55.5 75.7-98.4 94.7M366.3 296c1-13.1 1.7-26.3 1.7-40s-.7-26.9-1.7-40H444c2.6 12.9 4 26.3 4 40s-1.4 27.1-4 40z" />
</svg>
);
export default SvgGlobe;

9
src/components/svg/Lightbulb.tsx Normal file
View file

@ -0,0 +1,9 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgLightbulb = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>
<path d="M223.718 124.76c-48.027 11.198-86.688 49.285-98.494 97.031-11.843 47.899 1.711 96.722 36.259 130.601C173.703 364.377 181 383.586 181 403.777V407c0 13.296 5.801 25.26 15 33.505V467c0 24.813 20.187 45 45 45h30c24.813 0 45-20.187 45-45v-26.495c9.199-8.245 15-20.208 15-33.505v-3.282c0-19.884 7.687-39.458 20.563-52.361C376.994 325.87 391 292.005 391 256c0-86.079-79.769-151.638-167.282-131.24M286 467c0 8.271-6.729 15-15 15h-30c-8.271 0-15-6.729-15-15v-15h60zm44.326-136.834C311.689 348.843 301 375.651 301 403.718V407c0 8.271-6.729 15-15 15h-60c-8.271 0-15-6.729-15-15v-3.223c0-28.499-10.393-55.035-28.513-72.804-26.89-26.37-37.409-64.493-28.141-101.981 9.125-36.907 39.029-66.353 76.184-75.015C299.202 137.964 361 189.228 361 256c0 28.004-10.894 54.343-30.674 74.166M139.327 118.114 96.9 75.688c-5.857-5.858-15.355-5.858-21.213 0s-5.858 15.355 0 21.213l42.427 42.426c5.857 5.858 15.356 5.858 21.213 0s5.858-15.355 0-21.213M76 241H15c-8.284 0-15 6.716-15 15s6.716 15 15 15h61c8.284 0 15-6.716 15-15s-6.716-15-15-15m421 0h-61c-8.284 0-15 6.716-15 15s6.716 15 15 15h61c8.284 0 15-6.716 15-15s-6.716-15-15-15M436.313 75.688c-5.856-5.858-15.354-5.858-21.213 0l-42.427 42.426c-5.858 5.857-5.858 15.355 0 21.213s15.355 5.858 21.213 0l42.427-42.426c5.858-5.857 5.858-15.355 0-21.213M256 0c-8.284 0-15 6.716-15 15v61c0 8.284 6.716 15 15 15s15-6.716 15-15V15c0-8.284-6.716-15-15-15" />
<path d="M256 181c-6.166 0-12.447.739-18.658 2.194-25.865 6.037-47.518 27.328-53.879 52.979-1.994 8.041 2.907 16.175 10.947 18.17 8.042 1.994 16.176-2.909 18.17-10.948 3.661-14.758 16.647-27.5 31.593-30.989 3.982-.933 7.962-1.406 11.827-1.406 8.284 0 15-6.716 15-15s-6.716-15-15-15" />
</svg>
);
export default SvgLightbulb;

33
src/components/svg/Lightning.tsx Normal file
View file

@ -0,0 +1,33 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgLightning = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
viewBox="0 0 682.667 682.667"
{...props}
>
<defs>
<clipPath id="lightning_svg__a" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<g clipPath="url(#lightning_svg__a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0h137.962L69.319-155.807h140.419L.242-482l55.349 222.794h-155.853z"
style={{
fill: 'none',
stroke: 'currentColor',
strokeWidth: 30,
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeMiterlimit: 10,
strokeDasharray: 'none',
strokeOpacity: 1,
}}
transform="translate(201.262 496.994)"
/>
</g>
</svg>
);
export default SvgLightning;

8
src/components/svg/Link.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgLink = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
<path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.3 173.3 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.7 83.7 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049M470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.7 83.7 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.3 173.3 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991" />
</svg>
);
export default SvgLink;

8
src/components/svg/Location.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgLocation = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 64 64" {...props}>
<path d="M32 0A24.03 24.03 0 0 0 8 24c0 17.23 22.36 38.81 23.31 39.72a.99.99 0 0 0 1.38 0C33.64 62.81 56 41.23 56 24A24.03 24.03 0 0 0 32 0m0 35a11 11 0 1 1 11-11 11.007 11.007 0 0 1-11 11" />
</svg>
);
export default SvgLocation;

8
src/components/svg/Lock.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import type { SVGProps } from 'react';
const SvgLock = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={512} height={512} viewBox="0 0 24 24" {...props}>
<path d="M18.75 9H18V6c0-3.309-2.691-6-6-6S6 2.691 6 6v3h-.75A2.253 2.253 0 0 0 3 11.25v10.5C3 22.991 4.01 24 5.25 24h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5C21 10.009 19.99 9 18.75 9M8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v3H8zm5 10.722V19a1 1 0 1 1-2 0v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722" />
</svg>
);
export default SvgLock;

Some files were not shown because too many files have changed in this diff Show more