From 396acf3bbbe00a192cb0ea0a9ccf91b1d8d2850b Mon Sep 17 00:00:00 2001 From: Fuwn <50817549+Fuwn@users.noreply.github.com> Date: Sat, 24 Jan 2026 13:09:50 +0000 Subject: Initial commit Created from https://vercel.com/new --- src/app/(main)/pixels/PixelAddButton.tsx | 19 +++ src/app/(main)/pixels/PixelDeleteButton.tsx | 57 +++++++++ src/app/(main)/pixels/PixelEditButton.tsx | 21 ++++ src/app/(main)/pixels/PixelEditForm.tsx | 129 +++++++++++++++++++++ src/app/(main)/pixels/PixelProvider.tsx | 21 ++++ src/app/(main)/pixels/PixelsDataTable.tsx | 14 +++ src/app/(main)/pixels/PixelsPage.tsx | 26 +++++ src/app/(main)/pixels/PixelsTable.tsx | 48 ++++++++ src/app/(main)/pixels/[pixelId]/PixelControls.tsx | 32 +++++ src/app/(main)/pixels/[pixelId]/PixelHeader.tsx | 19 +++ .../(main)/pixels/[pixelId]/PixelMetricsBar.tsx | 70 +++++++++++ src/app/(main)/pixels/[pixelId]/PixelPage.tsx | 34 ++++++ src/app/(main)/pixels/[pixelId]/PixelPanels.tsx | 83 +++++++++++++ src/app/(main)/pixels/[pixelId]/page.tsx | 12 ++ src/app/(main)/pixels/page.tsx | 10 ++ 15 files changed, 595 insertions(+) create mode 100644 src/app/(main)/pixels/PixelAddButton.tsx create mode 100644 src/app/(main)/pixels/PixelDeleteButton.tsx create mode 100644 src/app/(main)/pixels/PixelEditButton.tsx create mode 100644 src/app/(main)/pixels/PixelEditForm.tsx create mode 100644 src/app/(main)/pixels/PixelProvider.tsx create mode 100644 src/app/(main)/pixels/PixelsDataTable.tsx create mode 100644 src/app/(main)/pixels/PixelsPage.tsx create mode 100644 src/app/(main)/pixels/PixelsTable.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelControls.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelHeader.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelPage.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/PixelPanels.tsx create mode 100644 src/app/(main)/pixels/[pixelId]/page.tsx create mode 100644 src/app/(main)/pixels/page.tsx (limited to 'src/app/(main)/pixels') diff --git a/src/app/(main)/pixels/PixelAddButton.tsx b/src/app/(main)/pixels/PixelAddButton.tsx new file mode 100644 index 0000000..1573b9e --- /dev/null +++ b/src/app/(main)/pixels/PixelAddButton.tsx @@ -0,0 +1,19 @@ +import { useMessages } from '@/components/hooks'; +import { Plus } from '@/components/icons'; +import { DialogButton } from '@/components/input/DialogButton'; +import { PixelEditForm } from './PixelEditForm'; + +export function PixelAddButton({ teamId }: { teamId?: string }) { + const { formatMessage, labels } = useMessages(); + + return ( + } + label={formatMessage(labels.addPixel)} + variant="primary" + width="600px" + > + {({ close }) => } + + ); +} diff --git a/src/app/(main)/pixels/PixelDeleteButton.tsx b/src/app/(main)/pixels/PixelDeleteButton.tsx new file mode 100644 index 0000000..436dba5 --- /dev/null +++ b/src/app/(main)/pixels/PixelDeleteButton.tsx @@ -0,0 +1,57 @@ +import { ConfirmationForm } from '@/components/common/ConfirmationForm'; +import { useDeleteQuery, useMessages, useModified } from '@/components/hooks'; +import { Trash } from '@/components/icons'; +import { DialogButton } from '@/components/input/DialogButton'; +import { messages } from '@/components/messages'; + +export function PixelDeleteButton({ + pixelId, + name, + onSave, +}: { + pixelId: string; + name: string; + onSave?: () => void; +}) { + const { formatMessage, labels, getErrorMessage, FormattedMessage } = useMessages(); + const { mutateAsync, isPending, error } = useDeleteQuery(`/pixels/${pixelId}`); + const { touch } = useModified(); + + const handleConfirm = async (close: () => void) => { + await mutateAsync(null, { + onSuccess: () => { + touch('pixels'); + onSave?.(); + close(); + }, + }); + }; + + return ( + } + variant="quiet" + title={formatMessage(labels.confirm)} + width="400px" + > + {({ close }) => ( + {name}, + }} + /> + } + isLoading={isPending} + error={getErrorMessage(error)} + onConfirm={handleConfirm.bind(null, close)} + onClose={close} + buttonLabel={formatMessage(labels.delete)} + buttonVariant="danger" + /> + )} + + ); +} diff --git a/src/app/(main)/pixels/PixelEditButton.tsx b/src/app/(main)/pixels/PixelEditButton.tsx new file mode 100644 index 0000000..3c5924d --- /dev/null +++ b/src/app/(main)/pixels/PixelEditButton.tsx @@ -0,0 +1,21 @@ +import { useMessages } from '@/components/hooks'; +import { Edit } from '@/components/icons'; +import { DialogButton } from '@/components/input/DialogButton'; +import { PixelEditForm } from './PixelEditForm'; + +export function PixelEditButton({ pixelId }: { pixelId: string }) { + const { formatMessage, labels } = useMessages(); + + return ( + } + title={formatMessage(labels.addPixel)} + variant="quiet" + width="600px" + > + {({ close }) => { + return ; + }} + + ); +} diff --git a/src/app/(main)/pixels/PixelEditForm.tsx b/src/app/(main)/pixels/PixelEditForm.tsx new file mode 100644 index 0000000..aedd3a3 --- /dev/null +++ b/src/app/(main)/pixels/PixelEditForm.tsx @@ -0,0 +1,129 @@ +import { + Button, + Column, + Form, + FormField, + FormSubmitButton, + Icon, + Label, + Loading, + Row, + TextField, +} from '@umami/react-zen'; +import { useEffect, useState } from 'react'; +import { useConfig, useMessages, usePixelQuery } from '@/components/hooks'; +import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery'; +import { RefreshCw } from '@/components/icons'; +import { PIXELS_URL } from '@/lib/constants'; +import { getRandomChars } from '@/lib/generate'; + +const generateId = () => getRandomChars(9); + +export function PixelEditForm({ + pixelId, + teamId, + onSave, + onClose, +}: { + pixelId?: string; + teamId?: string; + onSave?: () => void; + onClose?: () => void; +}) { + const { formatMessage, labels, messages, getErrorMessage } = useMessages(); + const { mutateAsync, error, isPending, touch, toast } = useUpdateQuery( + pixelId ? `/pixels/${pixelId}` : '/pixels', + { + id: pixelId, + teamId, + }, + ); + const { pixelsUrl } = useConfig(); + const hostUrl = pixelsUrl || PIXELS_URL; + const { data, isLoading } = usePixelQuery(pixelId); + const [slug, setSlug] = useState(generateId()); + + const handleSubmit = async (data: any) => { + await mutateAsync(data, { + onSuccess: async () => { + toast(formatMessage(messages.saved)); + touch('pixels'); + onSave?.(); + onClose?.(); + }, + }); + }; + + const handleSlug = () => { + const slug = generateId(); + + setSlug(slug); + + return slug; + }; + + useEffect(() => { + if (data) { + setSlug(data.slug); + } + }, [data]); + + if (pixelId && isLoading) { + return ; + } + + return ( +
+ {({ setValue }) => { + return ( + <> + + + + + + + + + + + + + + + + + + {onClose && ( + + )} + {formatMessage(labels.save)} + + + ); + }} +
+ ); +} diff --git a/src/app/(main)/pixels/PixelProvider.tsx b/src/app/(main)/pixels/PixelProvider.tsx new file mode 100644 index 0000000..9e929d8 --- /dev/null +++ b/src/app/(main)/pixels/PixelProvider.tsx @@ -0,0 +1,21 @@ +'use client'; +import { Loading } from '@umami/react-zen'; +import { createContext, type ReactNode } from 'react'; +import { usePixelQuery } from '@/components/hooks/queries/usePixelQuery'; +import type { Pixel } from '@/generated/prisma/client'; + +export const PixelContext = createContext(null); + +export function PixelProvider({ pixelId, children }: { pixelId?: string; children: ReactNode }) { + const { data: pixel, isLoading, isFetching } = usePixelQuery(pixelId); + + if (isFetching && isLoading) { + return ; + } + + if (!pixel) { + return null; + } + + return {children}; +} diff --git a/src/app/(main)/pixels/PixelsDataTable.tsx b/src/app/(main)/pixels/PixelsDataTable.tsx new file mode 100644 index 0000000..51b8c5a --- /dev/null +++ b/src/app/(main)/pixels/PixelsDataTable.tsx @@ -0,0 +1,14 @@ +import { DataGrid } from '@/components/common/DataGrid'; +import { useNavigation, usePixelsQuery } from '@/components/hooks'; +import { PixelsTable } from './PixelsTable'; + +export function PixelsDataTable() { + const { teamId } = useNavigation(); + const query = usePixelsQuery({ teamId }); + + return ( + + {({ data }) => } + + ); +} diff --git a/src/app/(main)/pixels/PixelsPage.tsx b/src/app/(main)/pixels/PixelsPage.tsx new file mode 100644 index 0000000..4f6acef --- /dev/null +++ b/src/app/(main)/pixels/PixelsPage.tsx @@ -0,0 +1,26 @@ +'use client'; +import { Column } from '@umami/react-zen'; +import { PageBody } from '@/components/common/PageBody'; +import { PageHeader } from '@/components/common/PageHeader'; +import { Panel } from '@/components/common/Panel'; +import { useMessages, useNavigation } from '@/components/hooks'; +import { PixelAddButton } from './PixelAddButton'; +import { PixelsDataTable } from './PixelsDataTable'; + +export function PixelsPage() { + const { formatMessage, labels } = useMessages(); + const { teamId } = useNavigation(); + + return ( + + + + + + + + + + + ); +} diff --git a/src/app/(main)/pixels/PixelsTable.tsx b/src/app/(main)/pixels/PixelsTable.tsx new file mode 100644 index 0000000..48a8458 --- /dev/null +++ b/src/app/(main)/pixels/PixelsTable.tsx @@ -0,0 +1,48 @@ +import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen'; +import Link from 'next/link'; +import { DateDistance } from '@/components/common/DateDistance'; +import { ExternalLink } from '@/components/common/ExternalLink'; +import { useMessages, useNavigation, useSlug } from '@/components/hooks'; +import { PixelDeleteButton } from './PixelDeleteButton'; +import { PixelEditButton } from './PixelEditButton'; + +export function PixelsTable(props: DataTableProps) { + const { formatMessage, labels } = useMessages(); + const { renderUrl } = useNavigation(); + const { getSlugUrl } = useSlug('pixel'); + + return ( + + + {({ id, name }: any) => { + return {name}; + }} + + + {({ slug }: any) => { + const url = getSlugUrl(slug); + return ( + + {url} + + ); + }} + + + {(row: any) => } + + + {(row: any) => { + const { id, name } = row; + + return ( + + + + + ); + }} + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelControls.tsx b/src/app/(main)/pixels/[pixelId]/PixelControls.tsx new file mode 100644 index 0000000..55dcd57 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelControls.tsx @@ -0,0 +1,32 @@ +import { Column, Row } from '@umami/react-zen'; +import { ExportButton } from '@/components/input/ExportButton'; +import { FilterBar } from '@/components/input/FilterBar'; +import { MonthFilter } from '@/components/input/MonthFilter'; +import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter'; +import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton'; + +export function PixelControls({ + pixelId: websiteId, + allowFilter = true, + allowDateFilter = true, + allowMonthFilter, + allowDownload = false, +}: { + pixelId: string; + allowFilter?: boolean; + allowDateFilter?: boolean; + allowMonthFilter?: boolean; + allowDownload?: boolean; +}) { + return ( + + + {allowFilter ? :
} + {allowDateFilter && } + {allowDownload && } + {allowMonthFilter && } + + {allowFilter && } + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx new file mode 100644 index 0000000..c771687 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx @@ -0,0 +1,19 @@ +import { IconLabel } from '@umami/react-zen'; +import { LinkButton } from '@/components/common/LinkButton'; +import { PageHeader } from '@/components/common/PageHeader'; +import { useMessages, usePixel, useSlug } from '@/components/hooks'; +import { ExternalLink, Grid2x2 } from '@/components/icons'; + +export function PixelHeader() { + const { formatMessage, labels } = useMessages(); + const { getSlugUrl } = useSlug('pixel'); + const pixel = usePixel(); + + return ( + }> + + } label={formatMessage(labels.view)} /> + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx b/src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx new file mode 100644 index 0000000..c9dcd35 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx @@ -0,0 +1,70 @@ +import { LoadingPanel } from '@/components/common/LoadingPanel'; +import { useDateRange, useMessages } from '@/components/hooks'; +import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery'; +import { MetricCard } from '@/components/metrics/MetricCard'; +import { MetricsBar } from '@/components/metrics/MetricsBar'; +import { formatLongNumber } from '@/lib/format'; + +export function PixelMetricsBar({ + pixelId, +}: { + pixelId: string; + showChange?: boolean; + compareMode?: boolean; +}) { + const { isAllTime } = useDateRange(); + const { formatMessage, labels } = useMessages(); + const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(pixelId); + + const { pageviews, visitors, visits, comparison } = data || {}; + + const metrics = data + ? [ + { + value: visitors, + label: formatMessage(labels.visitors), + change: visitors - comparison.visitors, + formatValue: formatLongNumber, + }, + { + value: visits, + label: formatMessage(labels.visits), + change: visits - comparison.visits, + formatValue: formatLongNumber, + }, + { + value: pageviews, + label: formatMessage(labels.views), + change: pageviews - comparison.pageviews, + formatValue: formatLongNumber, + }, + ] + : null; + + return ( + + + {metrics?.map(({ label, value, prev, change, formatValue, reverseColors }: any) => { + return ( + + ); + })} + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx new file mode 100644 index 0000000..7a4ae9d --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx @@ -0,0 +1,34 @@ +'use client'; +import { Column, Grid } from '@umami/react-zen'; +import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls'; +import { PixelHeader } from '@/app/(main)/pixels/[pixelId]/PixelHeader'; +import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar'; +import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels'; +import { PixelProvider } from '@/app/(main)/pixels/PixelProvider'; +import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal'; +import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart'; +import { PageBody } from '@/components/common/PageBody'; +import { Panel } from '@/components/common/Panel'; + +const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event']; + +export function PixelPage({ pixelId }: { pixelId: string }) { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx b/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx new file mode 100644 index 0000000..9cc24c9 --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/PixelPanels.tsx @@ -0,0 +1,83 @@ +import { Grid, Heading, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen'; +import { GridRow } from '@/components/common/GridRow'; +import { Panel } from '@/components/common/Panel'; +import { useMessages } from '@/components/hooks'; +import { MetricsTable } from '@/components/metrics/MetricsTable'; +import { WorldMap } from '@/components/metrics/WorldMap'; + +export function PixelPanels({ pixelId }: { pixelId: string }) { + const { formatMessage, labels } = useMessages(); + const tableProps = { + websiteId: pixelId, + limit: 10, + allowDownload: false, + showMore: true, + metric: formatMessage(labels.visitors), + }; + const rowProps = { minHeight: 570 }; + + return ( + + + + {formatMessage(labels.sources)} + + + {formatMessage(labels.referrers)} + {formatMessage(labels.channels)} + + + + + + + + + + + {formatMessage(labels.environment)} + + + {formatMessage(labels.browsers)} + {formatMessage(labels.os)} + {formatMessage(labels.devices)} + + + + + + + + + + + + + + + + + + + {formatMessage(labels.location)} + + + {formatMessage(labels.countries)} + {formatMessage(labels.regions)} + {formatMessage(labels.cities)} + + + + + + + + + + + + + + + ); +} diff --git a/src/app/(main)/pixels/[pixelId]/page.tsx b/src/app/(main)/pixels/[pixelId]/page.tsx new file mode 100644 index 0000000..d1db92f --- /dev/null +++ b/src/app/(main)/pixels/[pixelId]/page.tsx @@ -0,0 +1,12 @@ +import type { Metadata } from 'next'; +import { PixelPage } from './PixelPage'; + +export default async function ({ params }: { params: { pixelId: string } }) { + const { pixelId } = await params; + + return ; +} + +export const metadata: Metadata = { + title: 'Pixel', +}; diff --git a/src/app/(main)/pixels/page.tsx b/src/app/(main)/pixels/page.tsx new file mode 100644 index 0000000..cc240cd --- /dev/null +++ b/src/app/(main)/pixels/page.tsx @@ -0,0 +1,10 @@ +import type { Metadata } from 'next'; +import { PixelsPage } from './PixelsPage'; + +export default function () { + return ; +} + +export const metadata: Metadata = { + title: 'Pixels', +}; -- cgit v1.2.3