Converted user and website settings.

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

@@ -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>
   );
 }

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

@@ -10,7 +10,7 @@ export function WebsitesSettingsPage({ teamId }: { teamId: string }) {
 
   return (
     <>
-      <WebsitesHeader teamId={teamId} allowCreate={canCreate} />
+      <WebsitesHeader allowCreate={canCreate} />
       <WebsitesDataTable teamId={teamId} />
     </>
   );

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

@@ -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>
   );
 }

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

@@ -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>
   );

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

@@ -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} />}
     </>
   );
 }

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

@@ -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} />;

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

@@ -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} />;