From 0f6cdf8b80398749acb5f8f9bc3d3a45488f1197 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Wed, 26 Mar 2025 21:54:23 -0700 Subject: [PATCH] Updated reports components. --- package.json | 2 +- pnpm-lock.yaml | 92 +++++++++++++++++-- src/app/(main)/App.tsx | 10 +- src/app/(main)/MenuBar.tsx | 2 + src/app/(main)/console/TestConsole.tsx | 4 +- src/app/(main)/dashboard/DashboardPage.tsx | 2 +- src/app/(main)/profile/ProfileHeader.tsx | 2 +- src/app/(main)/reports/ReportsHeader.tsx | 2 +- src/app/(main)/reports/ReportsTable.tsx | 7 +- .../[reportId]/BaseParameters.module.css | 3 - .../reports/[reportId]/BaseParameters.tsx | 8 +- .../reports/[reportId]/FieldAddForm.tsx | 5 +- .../reports/[reportId]/FieldParameters.tsx | 24 ++--- .../reports/[reportId]/FieldSelectForm.tsx | 20 ++-- .../reports/[reportId]/FilterParameters.tsx | 62 +++++++------ .../reports/[reportId]/ParameterList.tsx | 39 ++++---- .../reports/[reportId]/PopupForm.module.css | 9 -- .../(main)/reports/[reportId]/PopupForm.tsx | 23 ----- src/app/(main)/reports/[reportId]/Report.tsx | 10 +- .../(main)/reports/[reportId]/ReportBody.tsx | 9 +- .../[reportId]/ReportHeader.module.css | 36 -------- .../reports/[reportId]/ReportHeader.tsx | 85 +++++++++-------- .../(main)/reports/[reportId]/ReportMenu.tsx | 27 +++--- .../(main)/reports/create/ReportTemplates.tsx | 4 +- .../event-data/EventDataParameters.tsx | 6 +- .../reports/event-data/EventDataTable.tsx | 6 +- src/app/(main)/reports/funnel/FunnelChart.tsx | 6 +- .../reports/funnel/FunnelParameters.tsx | 24 ++--- src/app/(main)/reports/goals/GoalsChart.tsx | 6 +- .../(main)/reports/goals/GoalsParameters.tsx | 8 +- .../reports/insights/InsightsParameters.tsx | 8 +- .../(main)/reports/insights/InsightsTable.tsx | 7 +- .../reports/journey/JourneyParameters.tsx | 6 +- .../(main)/reports/journey/JourneyView.tsx | 7 +- .../reports/retention/RetentionParameters.tsx | 7 +- .../reports/retention/RetentionTable.tsx | 6 +- .../reports/revenue/RevenueParameters.tsx | 6 +- .../(main)/reports/revenue/RevenueTable.tsx | 6 +- .../(main)/reports/revenue/RevenueView.tsx | 9 +- src/app/(main)/reports/utm/UTMParameters.tsx | 6 +- src/app/(main)/reports/utm/UTMView.tsx | 5 +- src/app/(main)/settings/SettingsLayout.tsx | 2 +- src/app/(main)/settings/teams/TeamsHeader.tsx | 2 +- src/app/(main)/settings/users/UsersHeader.tsx | 2 +- .../settings/users/[userId]/UserSettings.tsx | 2 +- .../settings/websites/WebsitesHeader.tsx | 2 +- .../websites/[websiteId]/WebsiteData.tsx | 2 +- .../websites/[websiteId]/WebsiteSettings.tsx | 2 +- .../[teamId]/settings/TeamSettingsLayout.tsx | 2 +- .../settings/members/TeamMembersPage.tsx | 2 +- .../[teamId]/settings/team/TeamDetails.tsx | 4 +- .../[teamId]/settings/team/TeamManage.tsx | 2 +- .../settings/websites/TeamWebsitesPage.tsx | 2 +- .../[websiteId]/WebsiteDetailsPage.tsx | 21 ++--- .../[websiteId]/WebsiteExpandedView.tsx | 2 +- .../websites/[websiteId]/WebsiteHeader.tsx | 75 ++++++++++++--- .../[websiteId]/WebsiteMetricsBar.tsx | 75 ++++----------- .../websites/[websiteId]/WebsiteTableView.tsx | 2 +- .../compare/WebsiteComparePage.tsx | 15 +-- .../compare/WebsiteCompareTables.tsx | 2 +- .../[websiteId]/events/EventsMetricsBar.tsx | 49 +++++----- .../[websiteId]/events/EventsPage.tsx | 14 +-- .../[websiteId]/realtime/RealtimeHeader.tsx | 32 ++----- .../[websiteId]/realtime/RealtimeHome.tsx | 4 +- .../realtime/WebsiteRealtimePage.tsx | 10 +- .../sessions/SessionsMetricsBar.tsx | 49 +++++----- .../[websiteId]/sessions/SessionsPage.tsx | 16 ++-- src/app/share/[...shareId]/SharePage.tsx | 2 +- src/components/boards/Board.tsx | 10 +- src/components/charts/Chart.tsx | 1 - .../{layout => common}/ActionForm.tsx | 2 +- src/components/{layout => common}/GridRow.tsx | 0 .../{layout => common}/Page.module.css | 0 src/components/{layout => common}/Page.tsx | 0 .../{layout => common}/PageHeader.module.css | 0 .../{layout => common}/PageHeader.tsx | 12 ++- src/components/common/Panel.tsx | 6 ++ src/components/{layout => common}/SideBar.tsx | 0 src/components/hooks/index.ts | 1 + src/components/hooks/useReport.ts | 6 ++ src/components/hooks/useTheme.ts | 13 +-- src/components/input/DateFilter.tsx | 4 +- src/components/input/WebsiteDateFilter.tsx | 36 ++++---- src/components/layout/Panel.tsx | 15 --- src/components/metrics/FilterTags.tsx | 28 +++--- src/components/metrics/MetricCard.module.css | 35 +------ src/components/metrics/MetricCard.tsx | 27 ++---- src/components/metrics/MetricsBar.module.css | 13 --- src/components/metrics/MetricsBar.tsx | 21 ++--- src/index.ts | 1 - src/lib/constants.ts | 28 ++---- src/lib/date.ts | 2 +- src/lib/format.ts | 2 +- src/lib/url.ts | 4 +- src/tracker/index.js | 1 + 95 files changed, 580 insertions(+), 698 deletions(-) delete mode 100644 src/app/(main)/reports/[reportId]/BaseParameters.module.css delete mode 100644 src/app/(main)/reports/[reportId]/PopupForm.module.css delete mode 100644 src/app/(main)/reports/[reportId]/PopupForm.tsx delete mode 100644 src/app/(main)/reports/[reportId]/ReportHeader.module.css rename src/components/{layout => common}/ActionForm.tsx (77%) rename src/components/{layout => common}/GridRow.tsx (100%) rename src/components/{layout => common}/Page.module.css (100%) rename src/components/{layout => common}/Page.tsx (100%) rename src/components/{layout => common}/PageHeader.module.css (100%) rename src/components/{layout => common}/PageHeader.tsx (50%) create mode 100644 src/components/common/Panel.tsx rename src/components/{layout => common}/SideBar.tsx (100%) create mode 100644 src/components/hooks/useReport.ts delete mode 100644 src/components/layout/Panel.tsx delete mode 100644 src/components/metrics/MetricsBar.module.css diff --git a/package.json b/package.json index 269dada3..40acca28 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "@react-spring/web": "^9.7.5", "@tanstack/react-query": "^5.68.0", "@umami/prisma-client": "^0.16.0", - "@umami/react-zen": "^0.66.0", + "@umami/react-zen": "^0.71.0", "@umami/redis-client": "^0.27.0", "bcryptjs": "^2.4.3", "chalk": "^4.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 635eda78..615e30c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,8 +45,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))) '@umami/react-zen': - specifier: ^0.66.0 - version: 0.66.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0)) + specifier: ^0.71.0 + version: 0.71.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0)) '@umami/redis-client': specifier: ^0.27.0 version: 0.27.0 @@ -1516,27 +1516,42 @@ packages: '@formatjs/ecma402-abstract@2.3.3': resolution: {integrity: sha512-pJT1OkhplSmvvr6i3CWTPvC/FGC06MbN5TNBfRO6Ox62AEz90eMq+dVvtX9Bl3jxCEkS0tATzDarRZuOLw7oFg==} + '@formatjs/ecma402-abstract@2.3.4': + resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==} + '@formatjs/fast-memoize@2.2.6': resolution: {integrity: sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==} + '@formatjs/fast-memoize@2.2.7': + resolution: {integrity: sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==} + '@formatjs/icu-messageformat-parser@2.1.0': resolution: {integrity: sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==} '@formatjs/icu-messageformat-parser@2.11.1': resolution: {integrity: sha512-o0AhSNaOfKoic0Sn1GkFCK4MxdRsw7mPJ5/rBpIqdvcC7MIuyUSW8WChUEvrK78HhNpYOgqCQbINxCTumJLzZA==} + '@formatjs/icu-messageformat-parser@2.11.2': + resolution: {integrity: sha512-AfiMi5NOSo2TQImsYAg8UYddsNJ/vUEv/HaNqiFjnI3ZFfWihUtD5QtuX6kHl8+H+d3qvnE/3HZrfzgdWpsLNA==} + '@formatjs/icu-skeleton-parser@1.3.6': resolution: {integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==} '@formatjs/icu-skeleton-parser@1.8.13': resolution: {integrity: sha512-N/LIdTvVc1TpJmMt2jVg0Fr1F7Q1qJPdZSCs19unMskCmVQ/sa0H9L8PWt13vq+gLdLg1+pPsvBLydL1Apahjg==} + '@formatjs/icu-skeleton-parser@1.8.14': + resolution: {integrity: sha512-i4q4V4qslThK4Ig8SxyD76cp3+QJ3sAqr7f6q9VVfeGtxG9OhiAk3y9XF6Q41OymsKzsGQ6OQQoJNY4/lI8TcQ==} + '@formatjs/intl-localematcher@0.2.25': resolution: {integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==} '@formatjs/intl-localematcher@0.6.0': resolution: {integrity: sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA==} + '@formatjs/intl-localematcher@0.6.1': + resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==} + '@formatjs/intl-numberformat@5.7.6': resolution: {integrity: sha512-ZlZfYtvbVHYZY5OG3RXizoCwxKxEKOrzEe2YOw9wbzoxF3PmFn0SAgojCFGLyNXkkR6xVxlylhbuOPf1dkIVNg==} @@ -2949,8 +2964,8 @@ packages: '@prisma/client': ^4.8.0 '@prisma/extension-read-replicas': ^0.3.0 - '@umami/react-zen@0.66.0': - resolution: {integrity: sha512-RAVrzv+bQQs+UtFpCczJ0ieEb11Q+NLZ0r8GLDTMTXXWlyaLqZxj0GGb2p7BhbsnLh+gQnaiSSeN9Q/ACYA93w==} + '@umami/react-zen@0.71.0': + resolution: {integrity: sha512-SIfbDv/uW7mN5uebDeBeD+MnRiOrjsa2pJmVEdobyiM3ImdshpVVYxyBAJqAbiKbLF4OGZgRVbFsRfUcP/2Y0w==} '@umami/redis-client@0.27.0': resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==} @@ -4398,6 +4413,10 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + glob@10.4.5: + resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} + hasBin: true + glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported @@ -4618,6 +4637,9 @@ packages: intl-messageformat@10.7.15: resolution: {integrity: sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==} + intl-messageformat@10.7.16: + resolution: {integrity: sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug==} + ipaddr.js@2.2.0: resolution: {integrity: sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==} engines: {node: '>= 10'} @@ -4849,6 +4871,9 @@ packages: resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==} engines: {node: '>=14'} + jackspeak@3.4.3: + resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} + jake@10.9.2: resolution: {integrity: sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==} engines: {node: '>=10'} @@ -5592,6 +5617,9 @@ packages: resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} engines: {node: '>=6'} + package-json-from-dist@1.0.1: + resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -8516,10 +8544,21 @@ snapshots: decimal.js: 10.5.0 tslib: 2.8.1 + '@formatjs/ecma402-abstract@2.3.4': + dependencies: + '@formatjs/fast-memoize': 2.2.7 + '@formatjs/intl-localematcher': 0.6.1 + decimal.js: 10.5.0 + tslib: 2.8.1 + '@formatjs/fast-memoize@2.2.6': dependencies: tslib: 2.8.1 + '@formatjs/fast-memoize@2.2.7': + dependencies: + tslib: 2.8.1 + '@formatjs/icu-messageformat-parser@2.1.0': dependencies: '@formatjs/ecma402-abstract': 1.11.4 @@ -8532,6 +8571,12 @@ snapshots: '@formatjs/icu-skeleton-parser': 1.8.13 tslib: 2.8.1 + '@formatjs/icu-messageformat-parser@2.11.2': + dependencies: + '@formatjs/ecma402-abstract': 2.3.4 + '@formatjs/icu-skeleton-parser': 1.8.14 + tslib: 2.8.1 + '@formatjs/icu-skeleton-parser@1.3.6': dependencies: '@formatjs/ecma402-abstract': 1.11.4 @@ -8542,6 +8587,11 @@ snapshots: '@formatjs/ecma402-abstract': 2.3.3 tslib: 2.8.1 + '@formatjs/icu-skeleton-parser@1.8.14': + dependencies: + '@formatjs/ecma402-abstract': 2.3.4 + tslib: 2.8.1 + '@formatjs/intl-localematcher@0.2.25': dependencies: tslib: 2.8.1 @@ -8550,6 +8600,10 @@ snapshots: dependencies: tslib: 2.8.1 + '@formatjs/intl-localematcher@0.6.1': + dependencies: + tslib: 2.8.1 + '@formatjs/intl-numberformat@5.7.6': dependencies: '@formatjs/ecma402-abstract': 1.4.0 @@ -8689,7 +8743,7 @@ snapshots: '@internationalized/message@3.1.6': dependencies: '@swc/helpers': 0.5.15 - intl-messageformat: 10.7.15 + intl-messageformat: 10.7.16 '@internationalized/number@3.6.0': dependencies: @@ -10551,13 +10605,13 @@ snapshots: transitivePeerDependencies: - supports-color - '@umami/react-zen@0.66.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))': + '@umami/react-zen@0.71.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))': dependencies: '@fontsource/jetbrains-mono': 5.2.5 '@react-aria/focus': 3.20.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@react-spring/web': 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0) classnames: 2.5.1 - glob: 10.3.10 + glob: 10.4.5 highlight.js: 11.11.1 lucide-react: 0.479.0(react@19.0.0) next: 15.2.4(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -12361,6 +12415,15 @@ snapshots: minipass: 7.1.2 path-scurry: 1.11.1 + glob@10.4.5: + dependencies: + foreground-child: 3.3.1 + jackspeak: 3.4.3 + minimatch: 9.0.5 + minipass: 7.1.2 + package-json-from-dist: 1.0.1 + path-scurry: 1.11.1 + glob@7.2.3: dependencies: fs.realpath: 1.0.0 @@ -12564,6 +12627,13 @@ snapshots: '@formatjs/icu-messageformat-parser': 2.11.1 tslib: 2.8.1 + intl-messageformat@10.7.16: + dependencies: + '@formatjs/ecma402-abstract': 2.3.4 + '@formatjs/fast-memoize': 2.2.7 + '@formatjs/icu-messageformat-parser': 2.11.2 + tslib: 2.8.1 + ipaddr.js@2.2.0: {} is-array-buffer@3.0.5: @@ -12791,6 +12861,12 @@ snapshots: optionalDependencies: '@pkgjs/parseargs': 0.11.0 + jackspeak@3.4.3: + dependencies: + '@isaacs/cliui': 8.0.2 + optionalDependencies: + '@pkgjs/parseargs': 0.11.0 + jake@10.9.2: dependencies: async: 3.2.6 @@ -13735,6 +13811,8 @@ snapshots: p-try@2.2.0: {} + package-json-from-dist@1.0.1: {} + parent-module@1.0.1: dependencies: callsites: 3.1.0 diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx index 470856a0..3c201366 100644 --- a/src/app/(main)/App.tsx +++ b/src/app/(main)/App.tsx @@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation'; import { UpdateNotice } from './UpdateNotice'; import { Nav } from '@/app/(main)/Nav'; import { MenuBar } from '@/app/(main)/MenuBar'; -import { Page } from '@/components/layout/Page'; +import { Page } from '@/components/common/Page'; import { useLoginQuery, useConfig } from '@/components/hooks'; export function App({ children }) { @@ -33,7 +33,13 @@ export function App({ children }) {