Boards components.

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

@@ -16,7 +16,7 @@ export function BoardAddButton() {
 
   return (
     <DialogTrigger>
-      <Button data-test="button-website-add" variant="primary">
+      <Button data-test="button-board-add" variant="primary">
         <Icon>
           <Plus />
         </Icon>

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

@@ -1,6 +1,5 @@
 import { Button, Form, FormField, FormSubmitButton, Row, TextField } from '@umami/react-zen';
 import { useMessages, useUpdateQuery } from '@/components/hooks';
-import { DOMAIN_REGEX } from '@/lib/constants';
 
 export function BoardAddForm({
   teamId,
@@ -11,39 +10,38 @@ export function BoardAddForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
-  const { mutateAsync, error, isPending } = useUpdateQuery('/websites', { teamId });
+  const { formatMessage, labels } = useMessages();
+  const { mutateAsync, error, isPending } = useUpdateQuery('/boards', { teamId });
 
   const handleSubmit = async (data: any) => {
-    await mutateAsync(data, {
-      onSuccess: async () => {
-        onSave?.();
-        onClose?.();
+    await mutateAsync(
+      { type: 'board', ...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"
+        label={formatMessage(labels.description)}
+        name="description"
         rules={{
           required: formatMessage(labels.required),
-          pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
         }}
       >
-        <TextField autoComplete="off" />
+        <TextField asTextArea autoComplete="off" />
       </FormField>
       <Row justifyContent="flex-end" paddingTop="3" gap="3">
         {onClose && (

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

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

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

@@ -1,16 +1,27 @@
 'use client';
-import { Column } from '@umami/react-zen';
+import { Column, IconLabel } from '@umami/react-zen';
+import { LinkButton } from '@/components/common/LinkButton';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
-import { BoardAddButton } from './BoardAddButton';
+import { Panel } from '@/components/common/Panel';
+import { useMessages } from '@/components/hooks';
+import { Plus } from '@/components/icons';
+import { BoardsDataTable } from './BoardsDataTable';
 
 export function BoardsPage() {
+  const { formatMessage, labels } = useMessages();
+
   return (
     <PageBody>
       <Column margin="2">
-        <PageHeader title="My Boards">
-          <BoardAddButton />
+        <PageHeader title={formatMessage(labels.boards)}>
+          <LinkButton href="/boards/create" variant="primary">
+            <IconLabel icon={<Plus />} label={formatMessage(labels.addBoard)} />
+          </LinkButton>
         </PageHeader>
+        <Panel>
+          <BoardsDataTable />
+        </Panel>
       </Column>
     </PageBody>
   );

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

@@ -0,0 +1,29 @@
+import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
+import Board from 'next/link';
+import { DateDistance } from '@/components/common/DateDistance';
+import { useMessages, useNavigation, useSlug } from '@/components/hooks';
+
+export function BoardsTable(props: DataTableProps) {
+  const { formatMessage, labels } = useMessages();
+  const { websiteId, renderUrl } = useNavigation();
+  const { getSlugUrl } = useSlug('link');
+
+  return (
+    <DataTable {...props}>
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {({ id, name }: any) => {
+          return <Board href={renderUrl(`/boards/${id}`)}>{name}</Board>;
+        }}
+      </DataColumn>
+      <DataColumn id="description" label={formatMessage(labels.description)} />
+      <DataColumn id="created" label={formatMessage(labels.created)} width="200px">
+        {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+      </DataColumn>
+      <DataColumn id="action" align="end" width="100px">
+        {({ id, name }: any) => {
+          return <Row></Row>;
+        }}
+      </DataColumn>
+    </DataTable>
+  );
+}

src/app/(main)/boards/[boardId]/Board.tsx

@@ -1,10 +0,0 @@
-import { Column, Heading } from '@umami/react-zen';
-
-export function Board({ boardId }: { boardId: string }) {
-  return (
-    <Column>
-      <Heading>Board title</Heading>
-      <div>{boardId}</div>
-    </Column>
-  );
-}

src/app/(main)/boards/[boardId]/BoardHeader.tsx

@@ -0,0 +1,43 @@
+import { Button, Column, Grid, InlineEditField, Row } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+
+export function BoardHeader() {
+  const { formatMessage, labels } = useMessages();
+  const defaultName = formatMessage(labels.untitled);
+  const name = 'My Board';
+  const description = 'This is my board';
+
+  const handleNameChange = (name: string) => {
+    //updateReport({ name: name || defaultName });
+  };
+
+  const handleDescriptionChange = (description: string) => {
+    //updateReport({ description });
+  };
+
+  return (
+    <Grid columns="1fr 1fr">
+      <Column>
+        <Row>
+          <InlineEditField
+            name="name"
+            value={name}
+            placeholder={defaultName}
+            onCommit={handleNameChange}
+          />
+        </Row>
+        <Row>
+          <InlineEditField
+            name="description"
+            value={description}
+            placeholder={`+ ${formatMessage(labels.addDescription)}`}
+            onCommit={handleDescriptionChange}
+          />
+        </Row>
+      </Column>
+      <Row justifyContent="flex-end">
+        <Button variant="primary">{formatMessage(labels.save)}</Button>
+      </Row>
+    </Grid>
+  );
+}

src/app/(main)/boards/[boardId]/BoardPage.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { BoardHeader } from '@/app/(main)/boards/[boardId]/BoardHeader';
+import { PageBody } from '@/components/common/PageBody';
+import { useMessages } from '@/components/hooks';
+
+export function BoardPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <PageBody>
+      <Column margin="2">
+        <BoardHeader />
+      </Column>
+    </PageBody>
+  );
+}

src/app/(main)/boards/[boardId]/page.tsx

@@ -1,10 +1,10 @@
 import type { Metadata } from 'next';
-import { Board } from './Board';
+import { BoardPage } from './BoardPage';
 
 export default async function ({ params }: { params: Promise<{ boardId: string }> }) {
   const { boardId } = await params;
 
-  return <Board boardId={boardId} />;
+  return <BoardPage boardId={boardId} />;
 }
 
 export const metadata: Metadata = {