Pixel/links development. New validations folder. More refactoring.

src/app/(main)/websites/WebsiteAddButton.tsx

@@ -0,0 +1,32 @@
+import { useMessages, useModified } from '@/components/hooks';
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
+import { Plus } from '@/components/icons';
+import { WebsiteAddForm } from './WebsiteAddForm';
+
+export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleSave = async () => {
+    toast(formatMessage(messages.saved));
+    touch('websites');
+    onSave?.();
+  };
+
+  return (
+    <DialogTrigger>
+      <Button data-test="button-website-add" variant="primary">
+        <Icon>
+          <Plus />
+        </Icon>
+        <Text>{formatMessage(labels.addWebsite)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
+          {({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/app/(main)/websites/WebsiteAddForm.tsx

@@ -0,0 +1,64 @@
+import { Form, FormField, FormSubmitButton, Row, TextField, Button } from '@umami/react-zen';
+import { useApi } from '@/components/hooks';
+import { DOMAIN_REGEX } from '@/lib/constants';
+import { useMessages } from '@/components/hooks';
+
+export function WebsiteAddForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId?: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post('/websites', { ...data, teamId }),
+  });
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error?.message}>
+      <FormField
+        label={formatMessage(labels.name)}
+        data-test="input-name"
+        name="name"
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoComplete="off" />
+      </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 autoComplete="off" />
+      </FormField>
+      <Row justifyContent="flex-end" paddingTop="3" gap="3">
+        {onClose && (
+          <Button isDisabled={isPending} onPress={onClose}>
+            {formatMessage(labels.cancel)}
+          </Button>
+        )}
+        <FormSubmitButton data-test="button-submit" isDisabled={false}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </Row>
+    </Form>
+  );
+}

src/app/(main)/websites/WebsitesDataTable.tsx

@@ -0,0 +1,31 @@
+import { WebsitesTable } from './WebsitesTable';
+import { DataGrid } from '@/components/common/DataGrid';
+import { useUserWebsitesQuery } from '@/components/hooks';
+
+export function WebsitesDataTable({
+  teamId,
+  allowEdit = true,
+  allowView = true,
+  showActions = true,
+}: {
+  teamId?: string;
+  allowEdit?: boolean;
+  allowView?: boolean;
+  showActions?: boolean;
+}) {
+  const queryResult = useUserWebsitesQuery({ teamId });
+
+  return (
+    <DataGrid query={queryResult} allowSearch allowPaging>
+      {({ data }) => (
+        <WebsitesTable
+          teamId={teamId}
+          data={data}
+          showActions={showActions}
+          allowEdit={allowEdit}
+          allowView={allowView}
+        />
+      )}
+    </DataGrid>
+  );
+}

src/app/(main)/websites/WebsitesHeader.tsx

@@ -0,0 +1,18 @@
+import { useMessages, useNavigation } from '@/components/hooks';
+import { WebsiteAddButton } from './WebsiteAddButton';
+import { PageHeader } from '@/components/common/PageHeader';
+
+export interface WebsitesHeaderProps {
+  allowCreate?: boolean;
+}
+
+export function WebsitesHeader({ allowCreate = true }: WebsitesHeaderProps) {
+  const { formatMessage, labels } = useMessages();
+  const { teamId } = useNavigation();
+
+  return (
+    <PageHeader title={formatMessage(labels.websites)}>
+      {allowCreate && <WebsiteAddButton teamId={teamId} />}
+    </PageHeader>
+  );
+}

src/app/(main)/websites/WebsitesPage.tsx

@@ -1,9 +1,9 @@
 'use client';
-import { WebsitesDataTable } from '@/app/(main)/settings/websites/WebsitesDataTable';
+import { WebsitesDataTable } from './WebsitesDataTable';
+import { WebsiteAddButton } from './WebsiteAddButton';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Column } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
-import { WebsiteAddButton } from '@/app/(main)/settings/websites/WebsiteAddButton';
 import { Panel } from '@/components/common/Panel';
 import { PageBody } from '@/components/common/PageBody';
 

src/app/(main)/websites/WebsitesTable.tsx

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { MenuButton } from '@/components/input/MenuButton';
+import { Eye, SquarePen } from '@/components/icons';
+import Link from 'next/link';
+
+export interface WebsitesTableProps {
+  data: Record<string, any>[];
+  showActions?: boolean;
+  allowEdit?: boolean;
+  allowView?: boolean;
+  teamId?: string;
+  children?: ReactNode;
+}
+
+export function WebsitesTable({
+  data = [],
+  showActions,
+  allowEdit,
+  allowView,
+  children,
+}: WebsitesTableProps) {
+  const { formatMessage, labels } = useMessages();
+  const { renderUrl, pathname } = useNavigation();
+  const isSettings = pathname.includes('/settings');
+
+  if (!data?.length) {
+    return children;
+  }
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {(row: any) => (
+          <Link href={renderUrl(`${isSettings ? '/settings' : ''}/websites/${row.id}`, false)}>
+            {row.name}
+          </Link>
+        )}
+      </DataColumn>
+      <DataColumn id="domain" label={formatMessage(labels.domain)} />
+      {showActions && (
+        <DataColumn id="action" label=" " align="end">
+          {(row: any) => {
+            const websiteId = row.id;
+
+            return (
+              <MenuButton>
+                {allowView && (
+                  <MenuItem href={renderUrl(`/websites/${websiteId}`)}>
+                    <Row alignItems="center" gap>
+                      <Icon data-test="link-button-view">
+                        <Eye />
+                      </Icon>
+                      <Text>{formatMessage(labels.view)}</Text>
+                    </Row>
+                  </MenuItem>
+                )}
+                {allowEdit && (
+                  <MenuItem href={renderUrl(`/websites/${websiteId}/settings`)}>
+                    <Row alignItems="center" gap>
+                      <Icon data-test="link-button-edit">
+                        <SquarePen />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Row>
+                  </MenuItem>
+                )}
+              </MenuButton>
+            );
+          }}
+        </DataColumn>
+      )}
+    </DataTable>
+  );
+}

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -11,6 +11,8 @@ import {
   Tag,
   Money,
   Network,
+  ChartPie,
+  UserPlus,
 } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -87,6 +89,23 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         },
       ],
     },
+    {
+      label: formatMessage(labels.audience),
+      items: [
+        {
+          id: 'segments',
+          label: formatMessage(labels.segments),
+          icon: <ChartPie />,
+          path: renderPath('/segments'),
+        },
+        {
+          id: 'cohorts',
+          label: formatMessage(labels.cohorts),
+          icon: <UserPlus />,
+          path: renderPath('/cohorts'),
+        },
+      ],
+    },
     {
       label: formatMessage(labels.growth),
       items: [

src/app/(main)/websites/[websiteId]/cohorts/CohortAddButton.tsx

@@ -0,0 +1,26 @@
+import { Button, DialogTrigger, Modal, Text, Icon, Dialog } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { Plus } from '@/components/icons';
+import { CohortEditForm } from './CohortEditForm';
+
+export function CohortAddButton({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DialogTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Plus />
+        </Icon>
+        <Text>{formatMessage(labels.cohort)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.cohort)} style={{ width: 800 }}>
+          {({ close }) => {
+            return <CohortEditForm websiteId={websiteId} onClose={close} />;
+          }}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/CohortDeleteButton.tsx

@@ -0,0 +1,55 @@
+import { Dialog } from '@umami/react-zen';
+import { ActionButton } from '@/components/input/ActionButton';
+import { Trash } from '@/components/icons';
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { messages } from '@/components/messages';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+
+export function CohortDeleteButton({
+  cohortId,
+  websiteId,
+  name,
+  onSave,
+}: {
+  cohortId: string;
+  websiteId: string;
+  name: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(`/websites/${websiteId}/cohorts/${cohortId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = (close: () => void) => {
+    mutate(null, {
+      onSuccess: () => {
+        touch('cohorts');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
+      <Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
+        {({ close }) => (
+          <ConfirmationForm
+            message={formatMessage(messages.confirmRemove, {
+              target: name,
+            })}
+            isLoading={isPending}
+            error={error}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+            buttonLabel={formatMessage(labels.delete)}
+            buttonVariant="danger"
+          />
+        )}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/CohortEditButton.tsx

@@ -0,0 +1,34 @@
+import { ActionButton } from '@/components/input/ActionButton';
+import { Edit } from '@/components/icons';
+import { Dialog } from '@umami/react-zen';
+import { CohortEditForm } from '@/app/(main)/websites/[websiteId]/cohorts/CohortEditForm';
+import { useMessages } from '@/components/hooks';
+
+export function CohortEditButton({
+  cohortId,
+  websiteId,
+  filters,
+}: {
+  cohortId: string;
+  websiteId: string;
+  filters: any[];
+}) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
+      <Dialog title={formatMessage(labels.cohort)} style={{ width: 800 }}>
+        {({ close }) => {
+          return (
+            <CohortEditForm
+              cohortId={cohortId}
+              websiteId={websiteId}
+              filters={filters}
+              onClose={close}
+            />
+          );
+        }}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/CohortEditForm.tsx

@@ -0,0 +1,100 @@
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  TextField,
+  Label,
+  Loading,
+} from '@umami/react-zen';
+import { subMonths, endOfDay } from 'date-fns';
+import { FieldFilters } from '@/components/input/FieldFilters';
+import { useState } from 'react';
+import { useApi, useMessages, useModified, useWebsiteCohortQuery } from '@/components/hooks';
+import { filtersArrayToObject } from '@/lib/params';
+
+export function CohortEditForm({
+  cohortId,
+  websiteId,
+  filters = [],
+  showFilters = true,
+  onSave,
+  onClose,
+}: {
+  cohortId?: string;
+  websiteId: string;
+  filters?: any[];
+  showFilters?: boolean;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { data } = useWebsiteCohortQuery(websiteId, cohortId);
+  const { formatMessage, labels } = useMessages();
+  const [currentFilters, setCurrentFilters] = useState(filters);
+  const { touch } = useModified();
+  const startDate = subMonths(endOfDay(new Date()), 6);
+  const endDate = endOfDay(new Date());
+
+  const { post, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) =>
+      post(`/websites/${websiteId}/cohorts${cohortId ? `/${cohortId}` : ''}`, {
+        ...data,
+        type: 'cohort',
+      }),
+  });
+
+  const handleSubmit = async (data: any) => {
+    mutate(
+      { ...data, parameters: filtersArrayToObject(currentFilters) },
+      {
+        onSuccess: async () => {
+          touch('cohorts');
+          onSave?.();
+          onClose?.();
+        },
+      },
+    );
+  };
+
+  if (cohortId && !data) {
+    return <Loading position="page" />;
+  }
+
+  return (
+    <Form error={error} onSubmit={handleSubmit} defaultValues={data}>
+      <FormField
+        name="name"
+        label={formatMessage(labels.name)}
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoFocus />
+      </FormField>
+      {showFilters && (
+        <>
+          <Label>{formatMessage(labels.filters)}</Label>
+          <FieldFilters
+            websiteId={websiteId}
+            filters={currentFilters}
+            startDate={startDate}
+            endDate={endDate}
+            onSave={setCurrentFilters}
+          />
+        </>
+      )}
+      <FormButtons>
+        <Button isDisabled={isPending} onPress={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+        <FormSubmitButton
+          variant="primary"
+          data-test="button-submit"
+          isDisabled={isPending || currentFilters.length === 0}
+        >
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/CohortsDataTable.tsx

@@ -0,0 +1,24 @@
+import { CohortAddButton } from './CohortAddButton';
+import { useWebsiteCohortsQuery } from '@/components/hooks';
+import { CohortsTable } from './CohortsTable';
+import { DataGrid } from '@/components/common/DataGrid';
+
+export function CohortsDataTable({ websiteId }: { websiteId?: string }) {
+  const query = useWebsiteCohortsQuery(websiteId, { type: 'cohort' });
+
+  const renderActions = () => {
+    return <CohortAddButton websiteId={websiteId} />;
+  };
+
+  return (
+    <DataGrid
+      query={query}
+      allowSearch={true}
+      autoFocus={false}
+      allowPaging={true}
+      renderActions={renderActions}
+    >
+      {({ data }) => <CohortsTable data={data} />}
+    </DataGrid>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/CohortsPage.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { CohortsDataTable } from './CohortsDataTable';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { Panel } from '@/components/common/Panel';
+
+export function CohortsPage({ websiteId }) {
+  return (
+    <Column gap="3">
+      <WebsiteControls websiteId={websiteId} allowFilter={false} allowDateFilter={false} />
+      <Panel>
+        <CohortsDataTable websiteId={websiteId} />
+      </Panel>
+    </Column>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/CohortsTable.tsx

@@ -0,0 +1,41 @@
+import { DataTable, DataColumn, Row } from '@umami/react-zen';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { Empty } from '@/components/common/Empty';
+import { DateDistance } from '@/components/common/DateDistance';
+import { filtersObjectToArray } from '@/lib/params';
+import { CohortEditButton } from '@/app/(main)/websites/[websiteId]/cohorts/CohortEditButton';
+import { CohortDeleteButton } from '@/app/(main)/websites/[websiteId]/cohorts/CohortDeleteButton';
+
+export function CohortsTable({ data = [] }) {
+  const { formatMessage, labels } = useMessages();
+  const { websiteId } = useNavigation();
+
+  if (data.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="name" label={formatMessage(labels.name)} />
+      <DataColumn id="created" label={formatMessage(labels.created)}>
+        {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+      </DataColumn>
+      <DataColumn id="action" align="end" width="100px">
+        {(row: any) => {
+          const { id, name, parameters } = row;
+
+          return (
+            <Row>
+              <CohortEditButton
+                cohortId={id}
+                websiteId={websiteId}
+                filters={filtersObjectToArray(parameters)}
+              />
+              <CohortDeleteButton cohortId={id} websiteId={websiteId} name={name} />
+            </Row>
+          );
+        }}
+      </DataColumn>
+    </DataTable>
+  );
+}

src/app/(main)/websites/[websiteId]/cohorts/page.tsx

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

src/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton.tsx

@@ -34,7 +34,7 @@ export function SegmentDeleteButton({
   };
 
   return (
-    <ActionButton tooltip={formatMessage(labels.delete)} icon={<Trash />}>
+    <ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
       <Dialog title={formatMessage(labels.confirm)} style={{ width: 400 }}>
         {({ close }) => (
           <ConfirmationForm

src/app/(main)/websites/[websiteId]/segments/SegmentEditButton.tsx

@@ -16,7 +16,7 @@ export function SegmentEditButton({
   const { formatMessage, labels } = useMessages();
 
   return (
-    <ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
+    <ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
       <Dialog title={formatMessage(labels.segment)} style={{ width: 800 }}>
         {({ close }) => {
           return (