New schema for pixels and links.

src/app/(main)/SideNav.tsx

@@ -83,6 +83,9 @@ export function SideNav(props: SidebarProps) {
             {!isCollapsed && !hasNav && <PanelButton />}
           </SidebarHeader>
         </SidebarSection>
+        <SidebarSection style={{ paddingTop: 0, paddingBottom: 0 }}>
+          <TeamsButton showText={!hasNav && !isCollapsed} />
+        </SidebarSection>
         <SidebarSection flexGrow={1}>
           {links.map(({ id, path, label, icon }) => {
             return (
@@ -101,9 +104,6 @@ export function SideNav(props: SidebarProps) {
             );
           })}
         </SidebarSection>
-        <SidebarSection>
-          <TeamsButton showText={!hasNav && !isCollapsed} />
-        </SidebarSection>
       </Sidebar>
     </Row>
   );

src/app/(main)/boards/BoardsPage.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { Column } from '@umami/react-zen';
-import Link from 'next/link';
 import { PageHeader } from '@/components/common/PageHeader';
 import { PageBody } from '@/components/common/PageBody';
 import { BoardAddButton } from './BoardAddButton';
@@ -12,9 +11,6 @@ export function BoardsPage() {
         <PageHeader title="My Boards">
           <BoardAddButton />
         </PageHeader>
-        <Link href="/teams/3a97e34a-7f9d-4de2-8754-ed81714b528d/boards/86d4095c-a2a8-4fc8-9521-103e858e2b41">
-          Board 1
-        </Link>
       </Column>
     </PageBody>
   );

src/app/(main)/links/LinkAddButton.tsx

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

src/app/(main)/links/LinkDeleteButton.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 LinkDeleteButton({
+  linkId,
+  websiteId,
+  name,
+  onSave,
+}: {
+  linkId: string;
+  websiteId: string;
+  name: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(`/websites/${websiteId}/links/${linkId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = (close: () => void) => {
+    mutate(null, {
+      onSuccess: () => {
+        touch('links');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ActionButton tooltip={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)/links/LinkEditButton.tsx

@@ -0,0 +1,19 @@
+import { ActionButton } from '@/components/input/ActionButton';
+import { Edit } from '@/components/icons';
+import { Dialog } from '@umami/react-zen';
+import { LinkEditForm } from './LinkEditForm';
+import { useMessages } from '@/components/hooks';
+
+export function LinkEditButton({ linkId }: { linkId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <ActionButton tooltip={formatMessage(labels.edit)} icon={<Edit />}>
+      <Dialog title={formatMessage(labels.link)} style={{ width: 800 }}>
+        {({ close }) => {
+          return <LinkEditForm linkId={linkId} onClose={close} />;
+        }}
+      </Dialog>
+    </ActionButton>
+  );
+}

src/app/(main)/links/LinkEditForm.tsx

@@ -0,0 +1,113 @@
+import {
+  Form,
+  FormField,
+  FormSubmitButton,
+  Row,
+  TextField,
+  Button,
+  Text,
+  Label,
+  Column,
+  Icon,
+  Loading,
+} from '@umami/react-zen';
+import { useConfig, useLinkQuery } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
+import { Refresh } from '@/components/icons';
+import { getRandomChars } from '@/lib/crypto';
+import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
+
+const generateId = () => getRandomChars(9);
+
+export function LinkEditForm({
+  linkId,
+  teamId,
+  onSave,
+  onClose,
+}: {
+  linkId?: string;
+  teamId?: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { mutate, error, isPending } = useUpdateQuery('/links', { id: linkId, teamId });
+  const { linkDomain } = useConfig();
+  const { data, isLoading } = useLinkQuery(linkId);
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  if (linkId && !isLoading) {
+    return <Loading position="page" />;
+  }
+
+  return (
+    <Form
+      onSubmit={handleSubmit}
+      error={error?.message}
+      defaultValues={{ slug: generateId(), ...data }}
+    >
+      {({ setValue }) => {
+        return (
+          <>
+            <FormField
+              label={formatMessage(labels.name)}
+              name="name"
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField autoComplete="off" />
+            </FormField>
+
+            <FormField
+              label={formatMessage(labels.destinationUrl)}
+              name="url"
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField placeholder="https://example.com" autoComplete="off" />
+            </FormField>
+
+            <Column>
+              <Label>{formatMessage(labels.link)}</Label>
+              <Row alignItems="center" gap>
+                <Text>{linkDomain || window.location.origin}/</Text>
+                <FormField
+                  name="slug"
+                  rules={{
+                    required: formatMessage(labels.required),
+                  }}
+                  style={{ width: '100%' }}
+                >
+                  <TextField autoComplete="off" isReadOnly />
+                </FormField>
+                <Button
+                  variant="quiet"
+                  onPress={() => setValue('slug', generateId(), { shouldDirty: true })}
+                >
+                  <Icon>
+                    <Refresh />
+                  </Icon>
+                </Button>
+              </Row>
+            </Column>
+
+            <Row justifyContent="flex-end" paddingTop="3" gap="3">
+              {onClose && (
+                <Button isDisabled={isPending} onPress={onClose}>
+                  {formatMessage(labels.cancel)}
+                </Button>
+              )}
+              <FormSubmitButton isDisabled={false}>{formatMessage(labels.save)}</FormSubmitButton>
+            </Row>
+          </>
+        );
+      }}
+    </Form>
+  );
+}

src/app/(main)/links/LinksDataTable.tsx

@@ -0,0 +1,14 @@
+import { useLinksQuery, useNavigation } from '@/components/hooks';
+import { LinksTable } from './LinksTable';
+import { DataGrid } from '@/components/common/DataGrid';
+
+export function LinksDataTable() {
+  const { teamId } = useNavigation();
+  const query = useLinksQuery({ teamId });
+
+  return (
+    <DataGrid query={query} allowSearch={true} autoFocus={false} allowPaging={true}>
+      {({ data }) => <LinksTable data={data} />}
+    </DataGrid>
+  );
+}

src/app/(main)/links/LinksPage.tsx

@@ -2,22 +2,24 @@
 import { PageBody } from '@/components/common/PageBody';
 import { Column } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
-import { BoardAddButton } from '@/app/(main)/boards/BoardAddButton';
-import Link from 'next/link';
-import { useMessages } from '@/components/hooks';
+import { LinkAddButton } from './LinkAddButton';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { LinksDataTable } from '@/app/(main)/links/LinksDataTable';
+import { Panel } from '@/components/common/Panel';
 
 export function LinksPage() {
   const { formatMessage, labels } = useMessages();
+  const { teamId } = useNavigation();
 
   return (
     <PageBody>
-      <Column>
+      <Column gap="6">
         <PageHeader title={formatMessage(labels.links)}>
-          <BoardAddButton />
+          <LinkAddButton teamId={teamId} />
         </PageHeader>
-        <Link href="/teams/3a97e34a-7f9d-4de2-8754-ed81714b528d/boards/86d4095c-a2a8-4fc8-9521-103e858e2b41">
-          Board 1
-        </Link>
+        <Panel>
+          <LinksDataTable />
+        </Panel>
       </Column>
     </PageBody>
   );

src/app/(main)/links/LinksTable.tsx

@@ -0,0 +1,37 @@
+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 { LinkEditButton } from './LinkEditButton';
+import { LinkDeleteButton } from './LinkDeleteButton';
+
+export function LinksTable({ 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="url" label={formatMessage(labels.destinationUrl)} />
+      <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 } = row;
+
+          return (
+            <Row>
+              <LinkEditButton linkId={id} />
+              <LinkDeleteButton linkId={id} websiteId={websiteId} name={name} />
+            </Row>
+          );
+        }}
+      </DataColumn>
+    </DataTable>
+  );
+}

src/app/(main)/pixels/PixelAddButton.tsx

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

src/app/(main)/pixels/PixelAddForm.tsx

@@ -0,0 +1,62 @@
+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 PixelAddForm({
+  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('/pixels', { ...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)}
+        name="name"
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+
+      <FormField
+        label={formatMessage(labels.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)/pixels/PixelsPage.tsx

@@ -2,8 +2,7 @@
 import { PageBody } from '@/components/common/PageBody';
 import { Column } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
-import { BoardAddButton } from '@/app/(main)/boards/BoardAddButton';
-import Link from 'next/link';
+import { PixelAddButton } from './PixelAddButton';
 import { useMessages } from '@/components/hooks';
 
 export function PixelsPage() {
@@ -13,11 +12,8 @@ export function PixelsPage() {
     <PageBody>
       <Column>
         <PageHeader title={formatMessage(labels.pixels)}>
-          <BoardAddButton />
+          <PixelAddButton />
         </PageHeader>
-        <Link href="/teams/3a97e34a-7f9d-4de2-8754-ed81714b528d/boards/86d4095c-a2a8-4fc8-9521-103e858e2b41">
-          Board 1
-        </Link>
       </Column>
     </PageBody>
   );

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -21,13 +21,13 @@ export function TeamsTable({
         {(row: any) => <Link href={`/settings/teams/${row.id}`}>{row.name}</Link>}
       </DataColumn>
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
-        {(row: any) => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
+        {(row: any) => row.users.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
       </DataColumn>
-      <DataColumn id="websites" label={formatMessage(labels.websites)}>
-        {(row: any) => row._count.website}
+      <DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
+        {(row: any) => row._count.websites}
       </DataColumn>
-      <DataColumn id="members" label={formatMessage(labels.members)}>
-        {(row: any) => row._count.teamUser}
+      <DataColumn id="members" label={formatMessage(labels.members)} align="end">
+        {(row: any) => row._count.users}
       </DataColumn>
       {showActions ? (
         <DataColumn id="action" label=" " align="end">

src/app/(main)/settings/teams/[teamId]/TeamMembersPage.tsx

@@ -1,19 +1,17 @@
 'use client';
-import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
 import { TeamMembersDataTable } from './TeamMembersDataTable';
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { useLoginQuery, useMessages } from '@/components/hooks';
+import { useLoginQuery, useMessages, useTeam } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
-import { useContext } from 'react';
 import { Column } from '@umami/react-zen';
 
 export function TeamMembersPage({ teamId }: { teamId: string }) {
-  const team = useContext(TeamContext);
+  const team = useTeam();
   const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
 
   const canEdit =
-    team?.teamUser?.find(
+    team?.members?.find(
       ({ userId, role }) =>
         (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
     ) && user.role !== ROLES.viewOnly;

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

@@ -57,7 +57,7 @@ export function WebsitesTable({
                   </MenuItem>
                 )}
                 {allowEdit && (
-                  <MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
+                  <MenuItem href={renderUrl(`/websites/${websiteId}/settings`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">
                         <SquarePen />

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

@@ -1,25 +1,6 @@
 'use client';
-import { Column, Icon, Row, Text } from '@umami/react-zen';
 import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage';
-import { LinkButton } from '@/components/common/LinkButton';
-import { Arrow } from '@/components/icons';
-import { useNavigation } from '@/components/hooks';
 
 export function SettingsPage({ websiteId }: { websiteId: string }) {
-  const { pathname } = useNavigation();
-  return (
-    <Column gap>
-      <Row marginTop="3">
-        <LinkButton href={pathname.replace('/settings', '')}>
-          <Row alignItems="center" gap>
-            <Icon rotate={180}>
-              <Arrow />
-            </Icon>
-            <Text>Back</Text>
-          </Row>
-        </LinkButton>
-      </Row>
-      <WebsiteSettingsPage websiteId={websiteId} />
-    </Column>
-  );
+  return <WebsiteSettingsPage websiteId={websiteId} />;
 }