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

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",
"import/no-anonymous-default-export": "off",
"import/no-named-as-default": "off",
"css-modules/no-unused-class": "off",
"@next/next/no-img-element": "off",
"@typescript-eslint/no-empty-function": "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 = [
{
source: '/api/:path*',
headers: [
{ 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' },
],
headers: apiHeaders,
},
{
source: '/:path*',
@ -89,6 +103,11 @@ if (trackerScriptURL) {
}
if (collectApiEndpoint) {
headers.push({
source: collectApiEndpoint,
headers: apiHeaders,
});
rewrites.push({
source: collectApiEndpoint,
destination: '/api/send',

147
package.json
View file

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

6
scripts/check-db.js
View file

@ -82,9 +82,11 @@ async function checkV1Tables() {
}
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 () => {

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

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

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

@ -1,6 +1,6 @@
import Link from 'next/link';
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';
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;
}
export default async function ({ params }: { params: { websiteId: string } }) {
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
const enabled = await getEnabled();

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

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

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

@ -1,6 +1,6 @@
import { useReports } from '@/components/hooks';
import { ReportsTable } from './ReportsTable';
import { DataTable } from '@/components/common/DataTable';
import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react';
export function ReportsDataTable({
@ -15,8 +15,8 @@ export function ReportsDataTable({
const queryResult = useReports({ websiteId, teamId });
return (
<DataTable queryResult={queryResult} renderEmpty={() => children}>
<DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ 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 { ReportPage } from './ReportPage';
export default async function ({ params }: { params: { reportId: string } }) {
export default async function ({ params }: { params: Promise<{ reportId: string }> }) {
const { reportId } = await params;
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 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 { Button, Icon, Text } from '@umami/react-zen';
import { useMessages, useTeamUrl } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader';
import Link from 'next/link';
import { Button, Icon, Icons, Text } from 'react-basics';
import styles from './ReportTemplates.module.css';
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
@ -20,43 +14,43 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
title: formatMessage(labels.insights),
description: formatMessage(labels.insightsDescription),
url: renderTeamUrl('/reports/insights'),
icon: <Lightbulb />,
icon: <Icons.Lightbulb />,
},
{
title: formatMessage(labels.funnel),
description: formatMessage(labels.funnelDescription),
url: renderTeamUrl('/reports/funnel'),
icon: <Funnel />,
icon: <Icons.Funnel />,
},
{
title: formatMessage(labels.retention),
description: formatMessage(labels.retentionDescription),
url: renderTeamUrl('/reports/retention'),
icon: <Magnet />,
icon: <Icons.Magnet />,
},
{
title: formatMessage(labels.utm),
description: formatMessage(labels.utmDescription),
url: renderTeamUrl('/reports/utm'),
icon: <Tag />,
icon: <Icons.Tag />,
},
{
title: formatMessage(labels.goals),
description: formatMessage(labels.goalsDescription),
url: renderTeamUrl('/reports/goals'),
icon: <Target />,
icon: <Icons.Target />,
},
{
title: formatMessage(labels.journey),
description: formatMessage(labels.journeyDescription),
url: renderTeamUrl('/reports/journey'),
icon: <Path />,
icon: <Icons.Path />,
},
{
title: formatMessage(labels.revenue),
description: formatMessage(labels.revenueDescription),
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 { EventDataParameters } from './EventDataParameters';
import { EventDataTable } from './EventDataTable';
import Nodes from '@/assets/nodes.svg';
import { Icons } from '@/components/icons';
const defaultParameters = {
type: 'event-data',
@ -14,7 +14,7 @@ const defaultParameters = {
export function EventDataReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Nodes />} />
<ReportHeader icon={<Icons.Nodes />} />
<ReportMenu>
<EventDataParameters />
</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 { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Funnel from '@/assets/funnel.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function FunnelReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Funnel />} />
<ReportHeader icon={<Icons.Funnel />} />
<ReportMenu>
<FunnelParameters />
</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 { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Target from '@/assets/target.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function GoalsReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Target />} />
<ReportHeader icon={<Icons.Target />} />
<ReportMenu>
<GoalsParameters />
</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 { InsightsParameters } from './InsightsParameters';
import { InsightsTable } from './InsightsTable';
import Lightbulb from '@/assets/lightbulb.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function InsightsReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Lightbulb />} />
<ReportHeader icon={<Icons.Lightbulb />} />
<ReportMenu>
<InsightsParameters />
</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 { JourneyParameters } from './JourneyParameters';
import { JourneyView } from './JourneyView';
import Path from '@/assets/path.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -16,7 +16,7 @@ const defaultParameters = {
export function JourneyReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Path />} />
<ReportHeader icon={<Icons.Path />} />
<ReportMenu>
<JourneyParameters />
</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 { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Magnet from '@/assets/magnet.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
import { parseDateRange } from '@/lib/date';
import { endOfMonth, startOfMonth } from 'date-fns';
@ -21,7 +21,7 @@ const defaultParameters = {
export function RetentionReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Magnet />} />
<ReportHeader icon={<Icons.Magnet />} />
<ReportMenu>
<RetentionParameters />
</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 } from '../[reportId]/Report';
import { ReportBody } from '../[reportId]/ReportBody';
@ -15,7 +15,7 @@ const defaultParameters = {
export function RevenueReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Money />} />
<ReportHeader icon={<Icons.Money />} />
<ReportMenu>
<RevenueParameters />
</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 { UTMParameters } from './UTMParameters';
import { UTMView } from './UTMView';
import Tag from '@/assets/tag.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -16,7 +16,7 @@ const defaultParameters = {
export function UTMReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Tag />} />
<ReportHeader icon={<Icons.Tag />} />
<ReportMenu>
<UTMParameters />
</ReportMenu>

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

@ -1,5 +1,5 @@
import { SettingsLayout } from './SettingsLayout';
import { Metadata } from 'next';
import { SettingsLayout } from './SettingsLayout';
export default function ({ children }) {
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 { useLogin, useTeams } from '@/components/hooks';
import { ReactNode } from 'react';
@ -16,10 +16,10 @@ export function TeamsDataTable({
const queryResult = useTeams(user.id);
return (
<DataTable queryResult={queryResult} renderEmpty={() => children}>
<DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ data }) => {
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 { useMessages, useModified } from '@/components/hooks';
export function UserAddButton({ onSave }: { onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();
const { toast } = useToast();
const { touch } = useModified();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
touch('users');
onSave?.();
};
return (
<ModalTrigger>
<DialogTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.createUser)}</Text>
</Button>
<Modal title={formatMessage(labels.createUser)}>
{(close: () => void) => <UserAddForm onSave={handleSave} onClose={close} />}
<Modal>
<Dialog title={formatMessage(labels.createUser)}>
{({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
</Dialog>
</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 { UserDeleteForm } from './UserDeleteForm';
@ -15,18 +15,20 @@ export function UserDeleteButton({
const { user } = useLogin();
return (
<ModalTrigger disabled={userId === user?.id}>
<Button disabled={userId === user?.id} variant="quiet">
<Icon>
<DialogTrigger>
<Button isDisabled={userId === user?.id}>
<Icon size="sm">
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal title={formatMessage(labels.deleteUser)}>
{(close: () => void) => (
<UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
)}
<Modal>
<Dialog title={formatMessage(labels.deleteUser)}>
{({ close }) => (
<UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
)}
</Dialog>
</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 { ConfirmationForm } from '@/components/common/ConfirmationForm';
@ -6,11 +7,13 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
const { del, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
const { touch } = useModified();
const { toast } = useToast();
const handleConfirm = async () => {
mutate(null, {
onSuccess: async () => {
touch('users');
toast(formatMessage(messages.successMessage));
onSave?.();
onClose?.();
},
@ -23,6 +26,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
onConfirm={handleConfirm}
onClose={onClose}
buttonLabel={formatMessage(labels.delete)}
buttonVariant="danger"
isLoading={isPending}
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 { UsersTable } from './UsersTable';
import { ReactNode } from 'react';
@ -13,8 +13,8 @@ export function UsersDataTable({
const queryResult = useUsers();
return (
<DataTable queryResult={queryResult} renderEmpty={() => children}>
<DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ 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 { ROLES } from '@/lib/constants';
import { useMessages, useLocale } from '@/components/hooks';
import { UserDeleteButton } from './UserDeleteButton';
import { LinkButton } from '@/components/common/LinkButton';
export function UsersTable({
data = [],
@ -16,44 +16,46 @@ export function UsersTable({
const { dateLocale } = useLocale();
return (
<GridTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
<GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
{row =>
<DataTable data={data}>
<DataColumn id="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
<DataColumn id="role" label={formatMessage(labels.role)} style={{ maxWidth: 60 }}>
{(row: any) =>
formatMessage(
labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
)
}
</GridColumn>
<GridColumn name="created" label={formatMessage(labels.created)} width={'150px'}>
{row =>
</DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)} style={{ maxWidth: 60 }}>
{(row: any) =>
formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
locale: dateLocale,
})
}
</GridColumn>
<GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}>
{row => row._count.website}
</GridColumn>
</DataColumn>
<DataColumn id="websites" label={formatMessage(labels.websites)} style={{ maxWidth: 60 }}>
{(row: any) => row._count.websiteUser}
</DataColumn>
{showActions && (
<GridColumn name="action" label=" " alignment="end">
{row => {
<DataColumn id="action" align="end">
{(row: any) => {
const { id, username } = row;
return (
<>
<Row gap="3">
<UserDeleteButton userId={id} username={username} />
<LinkButton href={`/settings/users/${id}`}>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</LinkButton>
</>
<Button asChild>
<Link href={`/settings/users/${id}`}>
<Icon>
<Icons.Edit />
</Icon>
<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 {
Dropdown,
Item,
Select,
ListItem,
Form,
FormRow,
FormField,
FormButtons,
FormInput,
TextField,
SubmitButton,
FormSubmitButton,
PasswordField,
} from 'react-basics';
import { useApi, useLogin, useMessages } from '@/components/hooks';
useToast,
} from '@umami/react-zen';
import { useApi, useLogin, useMessages, useModified } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { useContext, useRef } from 'react';
import { useContext } from 'react';
import { UserContext } from './UserProvider';
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 user = useContext(UserContext);
const { user: login } = useLogin();
const { toast } = useToast();
const { touch } = useModified();
const { mutate, error } = useMutation({
mutationFn: ({
username,
@ -28,61 +33,47 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
role: string;
}) => post(`/users/${userId}`, { username, password, role }),
});
const ref = useRef(null);
const user = useContext(UserContext);
const { user: login } = useLogin();
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
ref.current.reset(data);
toast(formatMessage(messages.saved));
touch(`user:${user.id}`);
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 (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={user} style={{ width: 300 }}>
<FormRow label={formatMessage(labels.username)}>
<FormInput name="username">
<TextField />
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.password)}>
<FormInput
name="password"
rules={{
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
}}
>
<PasswordField autoComplete="new-password" />
</FormInput>
</FormRow>
<Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
<FormField name="username" label={formatMessage(labels.username)}>
<TextField />
</FormField>
<FormField
name="password"
label={formatMessage(labels.password)}
rules={{
minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
}}
>
<PasswordField autoComplete="new-password" />
</FormField>
{user.id !== login.id && (
<FormRow label={formatMessage(labels.role)}>
<FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
<Dropdown renderValue={renderValue}>
<Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
<Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
<Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
</Dropdown>
</FormInput>
</FormRow>
<FormField
name="role"
label={formatMessage(labels.role)}
rules={{ required: formatMessage(labels.required) }}
>
<Select defaultSelectedKey={user.role}>
<ListItem id={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
<ListItem id={ROLES.user}>{formatMessage(labels.user)}</ListItem>
<ListItem id={ROLES.admin}>{formatMessage(labels.admin)}</ListItem>
</Select>
</FormField>
)}
<FormButtons>
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
<FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
</FormButtons>
</Form>
);

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

@ -2,7 +2,7 @@
import { UserSettings } from './UserSettings';
import { UserProvider } from './UserProvider';
export default function ({ userId }: { userId: string }) {
export function UserPage({ userId }: { userId: string }) {
return (
<UserProvider 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 { Loading } from '@umami/react-zen';
import { useModified, useUser } from '@/components/hooks';
import { Loading } from 'react-basics';
export const UserContext = createContext(null);
@ -18,5 +18,5 @@ export function UserProvider({ userId, children }: { userId: string; children: R
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 { Item, Tabs, useToasts } from 'react-basics';
import { useContext } from 'react';
import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { UserEditForm } from './UserEditForm';
import { PageHeader } from '@/components/layout/PageHeader';
import { useMessages } from '@/components/hooks';
import { UserWebsites } from './UserWebsites';
import { UserContext } from './UserProvider';
import { Breadcrumb } from '@/components/common/Breadcrumb';
export function UserSettings({ userId }: { userId: string }) {
const { formatMessage, labels, messages } = useMessages();
const [tab, setTab] = useState<Key>('details');
const { formatMessage, labels } = useMessages();
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 (
<>
<PageHeader title={user?.username} icon={<Icons.User />} breadcrumb={breadcrumb} />
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="websites">{formatMessage(labels.websites)}</Item>
<PageHeader title={user?.username} icon={<Icons.User />} />
<Tabs>
<TabList>
<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>
{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 { DataTable } from '@/components/common/DataTable';
import { DataGrid } from '@/components/common/DataGrid';
import { useWebsites } from '@/components/hooks';
export function UserWebsites({ userId }) {
const queryResult = useWebsites({ userId });
return (
<DataTable queryResult={queryResult}>
<DataGrid queryResult={queryResult}>
{({ data }) => (
<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 { Metadata } from 'next';
export default async function ({ params }: { params: { userId: string } }) {
export default async function ({ params }: { params: Promise<{ userId: string }> }) {
const { userId } = await params;
return <UserPage userId={userId} />;

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

@ -1,6 +1,6 @@
import { ReactNode } from 'react';
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';
export function WebsitesDataTable({
@ -19,7 +19,7 @@ export function WebsitesDataTable({
const queryResult = useWebsites({ teamId });
return (
<DataTable queryResult={queryResult} renderEmpty={() => children}>
<DataGrid queryResult={queryResult} renderEmpty={() => children}>
{({ data }) => (
<WebsitesTable
teamId={teamId}
@ -29,6 +29,6 @@ export function WebsitesDataTable({
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 (
<>
<WebsitesHeader teamId={teamId} allowCreate={canCreate} />
<WebsitesHeader allowCreate={canCreate} />
<WebsitesDataTable teamId={teamId} />
</>
);

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

@ -1,7 +1,7 @@
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 { LinkButton } from '@/components/common/LinkButton';
export interface WebsitesTableProps {
data: any[];
@ -27,37 +27,41 @@ export function WebsitesTable({
}
return (
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)} />
<DataColumn id="domain" label={formatMessage(labels.domain)} />
{showActions && (
<GridColumn name="action" label=" " alignment="end">
{row => {
const { id: websiteId } = row;
<DataColumn id="action" label=" " align="end">
{(row: any) => {
const websiteId = row.id;
return (
<>
<Row gap="3">
{allowEdit && (
<LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Icon data-test="link-button-edit">
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</LinkButton>
<Button asChild>
<Link href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Icon data-test="link-button-edit">
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Link>
</Button>
)}
{allowView && (
<LinkButton href={renderTeamUrl(`/websites/${websiteId}`)}>
<Icon>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>
<Button asChild>
<Link href={renderTeamUrl(`/websites/${websiteId}`)}>
<Icon data-test="link-button-view">
<Icons.Arrow />
</Icon>
<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 { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
import { useContext } from 'react';
import {
FormSubmitButton,
Form,
FormField,
FormButtons,
TextField,
useToast,
} from '@umami/react-zen';
import { useApi, useMessages, useModified } from '@/components/hooks';
import { DOMAIN_REGEX } from '@/lib/constants';
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 { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { toast } = useToast();
const { touch } = useModified();
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
});
const ref = useRef(null);
const { touch } = useModified();
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
ref.current.reset(data);
toast(formatMessage(messages.saved));
touch(`website:${website.id}`);
onSave?.();
},
@ -25,38 +33,36 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={website}>
<FormRow label={formatMessage(labels.websiteId)}>
<TextField data-test="text-field-websiteId" value={website?.id} readOnly allowCopy />
</FormRow>
<FormRow label={formatMessage(labels.name)}>
<FormInput
data-test="input-name"
name="name"
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.domain)}>
<FormInput
data-test="input-domain"
name="domain"
rules={{
required: formatMessage(labels.required),
pattern: {
value: DOMAIN_REGEX,
message: formatMessage(messages.invalidDomain),
},
}}
>
<TextField />
</FormInput>
</FormRow>
<Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
<FormField name="id" label={formatMessage(labels.websiteId)}>
<TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
</FormField>
<FormField
label={formatMessage(labels.name)}
data-test="input-name"
name="name"
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormField>
<FormField
label={formatMessage(labels.domain)}
data-test="input-domain"
name="domain"
rules={{
required: formatMessage(labels.required),
pattern: {
value: DOMAIN_REGEX,
message: formatMessage(messages.invalidDomain),
},
}}
>
<TextField />
</FormField>
<FormButtons>
<SubmitButton data-test="button-submit" variant="primary">
<FormSubmitButton data-test="button-submit" variant="primary">
{formatMessage(labels.save)}
</SubmitButton>
</FormSubmitButton>
</FormButtons>
</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 { Breadcrumb } from '@/components/common/Breadcrumb';
import { useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
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 { TrackingCode } from './TrackingCode';
import { WebsiteData } from './WebsiteData';
@ -19,31 +18,11 @@ export function WebsiteSettings({
openExternal?: boolean;
}) {
const website = useContext(WebsiteContext);
const { formatMessage, labels, messages } = 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,
},
]}
/>
);
const { formatMessage, labels } = useMessages();
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}>
<Button variant="primary">
<Icon>
@ -53,16 +32,26 @@ export function WebsiteSettings({
</Button>
</Link>
</PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
<Item key="share">{formatMessage(labels.shareUrl)}</Item>
<Item key="data">{formatMessage(labels.data)}</Item>
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>
<Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
<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>
{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 { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) {
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <WebsiteSettingsPage websiteId={websiteId} />;

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

@ -1,7 +1,7 @@
import { Metadata } from 'next';
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;
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 { useTeamMembers } from '@/components/hooks';
@ -12,8 +12,8 @@ export function TeamMembersDataTable({
const queryResult = useTeamMembers(teamId);
return (
<DataTable queryResult={queryResult}>
<DataGrid queryResult={queryResult}>
{({ 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 { TeamPage } from './TeamPage';
export default async function ({ params }: { params: { teamId: string } }) {
export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
const { teamId } = await params;
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 { TeamWebsitesTable } from './TeamWebsitesTable';
@ -12,8 +12,8 @@ export function TeamWebsitesDataTable({
const queryResult = useTeamWebsites(teamId);
return (
<DataTable queryResult={queryResult}>
<DataGrid queryResult={queryResult}>
{({ 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 { Metadata } from 'next';
export default async function ({ params }: { params: { teamId: string } }) {
export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
const { teamId } = await params;
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 { LinkButton } from '@/components/common/LinkButton';
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 { CitiesTable } from '@/components/metrics/CitiesTable';
import { CountriesTable } from '@/components/metrics/CountriesTable';
@ -156,7 +156,7 @@ export function WebsiteExpandedView({
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</LinkButton>
<SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<Dropdown
className={styles.dropdown}
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 { Favicon } from '@/components/common/Favicon';
import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
import { Icons } from '@/components/icons';
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';
export function WebsiteHeader({
@ -33,7 +32,7 @@ export function WebsiteHeader({
},
{
label: formatMessage(labels.events),
icon: <Lightning />,
icon: <Icons.Lightning />,
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 { 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 { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -145,7 +145,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
return (
<Grid className={styles.container}>
<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 className={styles.title}>{formatMessage(labels.previous)}</div>
<Component

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

@ -1,7 +1,7 @@
import { WebsiteComparePage } from './WebsiteComparePage';
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;
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 { EventsTable } from './EventsTable';
import { DataTable } from '@/components/common/DataTable';
import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react';
export function EventsDataTable({
@ -13,8 +13,8 @@ export function EventsDataTable({
const queryResult = useWebsiteEvents(websiteId);
return (
<DataTable queryResult={queryResult} allowSearch={true} autoFocus={false}>
<DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>
{({ 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 { EventsPage } from './EventsPage';
export default async function ({ params }: { params: { websiteId: string } }) {
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
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) {
return formatMessage(messages.eventLog, {
event: <b>{eventName || formatMessage(labels.unknown)}</b>,
event: <b key="b">{eventName || formatMessage(labels.unknown)}</b>,
url: (
<a
key="a"
href={`//${website?.domain}${url}`}
className={styles.link}
target="_blank"
@ -100,10 +101,10 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
if (__type === TYPE_SESSION) {
return formatMessage(messages.visitorLog, {
country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b>{BROWSERS[browser]}</b>,
os: <b>{OS_NAMES[os] || os}</b>,
device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
country: <b key="country">{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b key="browser">{BROWSERS[browser]}</b>,
os: <b key="os">{OS_NAMES[os] || os}</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 { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) {
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <WebsiteRealtimePage websiteId={websiteId} />;

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

@ -1,7 +1,7 @@
import { WebsiteReportsPage } from './WebsiteReportsPage';
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;
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 { SessionsTable } from './SessionsTable';
import { DataTable } from '@/components/common/DataTable';
import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react';
export function SessionsDataTable({
@ -14,8 +14,8 @@ export function SessionsDataTable({
const queryResult = useWebsiteSessions(websiteId);
return (
<DataTable queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
<DataGrid queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
{({ 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}>
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</div>
{day?.map((hour: number) => {
{day?.map((hour: number, j) => {
const pct = hour / max;
return (
<div key={hour} className={classNames(styles.cell)}>
<div key={j} className={classNames(styles.cell)}>
{hour > 0 && (
<TooltipPopup
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({
params,
}: {
params: { websiteId: string; sessionId: string };
params: Promise<{ websiteId: string; sessionId: string }>;
}) {
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 { Metadata } from 'next';
export default async function ({ params }: { params: { websiteId: string } }) {
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
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 { isbot } from 'isbot';
import { createToken, parseToken } from '@/lib/jwt';
import { startOfHour, startOfMonth } from 'date-fns';
import clickhouse from '@/lib/clickhouse';
import { parseRequest } from '@/lib/request';
import { badRequest, json, forbidden, serverError } from '@/lib/response';
import { fetchSession, fetchWebsite } from '@/lib/load';
import { getClientInfo, hasBlockedIp } from '@/lib/detect';
import { secret, uuid, visitSalt } from '@/lib/crypto';
import { COLLECTION_TYPE, DOMAIN_REGEX } from '@/lib/constants';
import { createToken, parseToken } from '@/lib/jwt';
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 { urlOrPathParam } from '@/lib/schema';
const schema = z.object({
type: z.enum(['event', 'identify']),
payload: z.object({
website: z.string().uuid(),
data: z.object({}).passthrough().optional(),
hostname: z.string().regex(DOMAIN_REGEX).max(100).optional(),
data: anyObjectParam.optional(),
hostname: z.string().max(100).optional(),
language: z.string().max(35).optional(),
referrer: urlOrPathParam.optional(),
screen: z.string().max(11).optional(),
title: z.string().optional(),
url: urlOrPathParam,
url: urlOrPathParam.optional(),
name: z.string().max(50).optional(),
tag: z.string().max(50).optional(),
ip: z.string().ip().optional(),
userAgent: z.string().optional(),
timestamp: z.coerce.number().int().optional(),
}),
});
@ -55,6 +57,7 @@ export async function POST(request: Request) {
data,
title,
tag,
timestamp,
} = payload;
// Cache check
@ -87,7 +90,13 @@ export async function POST(request: Request) {
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
if (!clickhouse.enabled && !cache?.sessionId) {
@ -119,13 +128,12 @@ export async function POST(request: Request) {
}
// 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;
// Expire visit after 30 minutes
if (now - iat > 1800) {
visitId = uuid(sessionId, visitSalt());
if (!timestamp && now - iat > 1800) {
visitId = uuid(sessionId, visitSalt);
iat = now;
}
@ -179,6 +187,7 @@ export async function POST(request: Request) {
subdivision2,
city,
tag,
createdAt,
});
}
@ -191,12 +200,13 @@ export async function POST(request: Request) {
websiteId,
sessionId,
sessionData: data,
createdAt,
});
}
const token = createToken({ websiteId, sessionId, visitId, iat }, secret());
return json({ cache: token });
return json({ cache: token, sessionId, visitId });
} catch (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({
username: 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);

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

@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation';
import { useApi, useMessages } from '@/components/hooks';
import { setUser } from '@/store/app';
import { setClientAuthToken } from '@/lib/client';
import Logo from '@/assets/logo.svg';
import { Icons } from '@/components/icons';
export function LoginForm() {
const { formatMessage, labels, getMessage } = useMessages();
@ -35,17 +35,9 @@ export function LoginForm() {
};
return (
<Column
justifyContent="center"
alignItems="center"
padding="8"
gap="6"
backgroundColor="1"
borderRadius="3"
shadow="3"
>
<Column justifyContent="center" alignItems="center" padding="8" gap="6">
<Icon size="lg">
<Logo />
<Icons.Logo />
</Icon>
<Heading>umami</Heading>
<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 { Button, LoadingButton, Form, FormButtons } from 'react-basics';
import { Row, Button, FormSubmitButton, Form, FormButtons } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
export interface ConfirmationFormProps {
message: ReactNode;
buttonLabel?: ReactNode;
buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
buttonVariant?: 'primary' | 'quiet' | 'danger';
isLoading?: boolean;
error?: string | Error;
onConfirm?: () => void;
@ -24,13 +24,13 @@ export function ConfirmationForm({
const { formatMessage, labels } = useMessages();
return (
<Form error={error}>
<p>{message}</p>
<FormButtons flex>
<LoadingButton isLoading={isLoading} onClick={onConfirm} variant={buttonVariant}>
<Form onSubmit={onConfirm} error={error}>
<Row marginY="4">{message}</Row>
<FormButtons>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton isLoading={isLoading} variant={buttonVariant}>
{buttonLabel || formatMessage(labels.ok)}
</LoadingButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</FormSubmitButton>
</FormButtons>
</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 classNames from 'classnames';
import { Loading, SearchField } from 'react-basics';
import { Loading, SearchField, Row, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Pager } from '@/components/common/Pager';
import { PagedQueryResult } from '@/lib/types';
import styles from './DataTable.module.css';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PagedQueryResult } from '@/lib/types';
const DEFAULT_SEARCH_DELAY = 600;
@ -20,7 +18,7 @@ export interface DataTableProps {
children: ReactNode | ((data: any) => ReactNode);
}
export function DataTable({
export function DataGrid({
queryResult,
searchDelay = 600,
allowSearch = true,
@ -30,12 +28,8 @@ export function DataTable({
children,
}: DataTableProps) {
const { formatMessage, labels, messages } = useMessages();
const {
result,
params,
setParams,
query: { error, isLoading, isFetched },
} = queryResult || {};
const { result, params, setParams, query } = queryResult || {};
const { error, isLoading, isFetched } = query || {};
const { page, pageSize, count, data } = result || {};
const { search } = params || {};
const hasData = Boolean(!isLoading && data?.length);
@ -43,45 +37,38 @@ export function DataTable({
const { router, renderUrl } = useNavigation();
const handleSearch = (search: string) => {
setParams({ ...params, search, page: params.page ? page : 1 });
setParams({ ...params, search });
};
const handlePageChange = (page: number) => {
setParams({ ...params, search, page });
setParams({ ...params, page });
router.push(renderUrl({ page }));
};
return (
<>
{allowSearch && (hasData || search) && (
<SearchField
className={styles.search}
value={search}
onSearch={handleSearch}
delay={searchDelay || DEFAULT_SEARCH_DELAY}
autoFocus={autoFocus}
placeholder={formatMessage(labels.search)}
/>
<Row width="280px" alignItems="center" marginBottom="6">
<SearchField
value={search}
onSearch={handleSearch}
delay={searchDelay || DEFAULT_SEARCH_DELAY}
autoFocus={autoFocus}
placeholder={formatMessage(labels.search)}
/>
</Row>
)}
<LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
<div
className={classNames(styles.body, {
[styles.status]: isLoading || noResults || !hasData,
})}
>
<Column>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />}
{!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</div>
</Column>
{allowPaging && hasData && (
<Pager
className={styles.pager}
page={page}
pageSize={pageSize}
count={count}
onPageChange={handlePageChange}
/>
<Row marginTop="6">
<Pager page={page} pageSize={pageSize} count={count} onPageChange={handlePageChange} />
</Row>
)}
</LoadingPanel>
</>

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

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

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

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

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;
async function handleResponse(res: FetchResponse): Promise<any> {
if (!res.ok) {
if (res.error) {
const { message, code } = res?.error?.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 * as lucide from 'lucide-react';
import AddUser from '@/assets/add-user.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';
import * as LocalIcons from '@/components/svg';
const icons = {
...ReactBasicsIcons,
AddUser,
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,
...LocalIcons,
};
export const Lucide = lucide;

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

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

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

@ -1,22 +1,18 @@
import { ReactNode } from 'react';
import { usePathname } from 'next/navigation';
import { SideNav } from '@/components/layout/SideNav';
import styles from './MenuLayout.module.css';
import { Grid, Column } from '@umami/react-zen';
import { MenuNav } from '@/components/layout/MenuNav';
export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
const pathname = usePathname();
const cloudMode = !!process.env.cloudMode;
const getKey = () => items.find(({ url }) => pathname === url)?.key;
return (
<div className={styles.layout}>
<Grid columns="auto 1fr" gap="5">
{!cloudMode && (
<div className={styles.menu}>
<SideNav items={items} shallow={true} selectedKey={getKey()} />
</div>
<Column width="240px">
<MenuNav items={items} shallow={true} />
</Column>
)}
<div className={styles.content}>{children}</div>
</div>
<Column>{children}</Column>
</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 { Heading, Icon, Breadcrumbs, Breadcrumb, Row } from '@umami/react-zen';
import { Heading, Icon, Row } from '@umami/react-zen';
export function PageHeader({
title,
icon,
breadcrumb,
children,
}: {
title?: ReactNode;
icon?: ReactNode;
className?: string;
breadcrumb?: ReactNode;
children?: ReactNode;
}) {
return (
<>
<Breadcrumbs>
<Breadcrumb>{breadcrumb}</Breadcrumb>
</Breadcrumbs>
<Row justifyContent="space-between" paddingY="6">
<Row justifyContent="space-between" alignItems="center" paddingBottom="6">
<Row gap="3">
{icon && <Icon size="lg">{icon}</Icon>}
{title && <Heading>{title}</Heading>}
<Row justifyContent="flex-end">{children}</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