Added a basic web UI

client/src/pages/vendors/create.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { IResourceComponentsProps } from "@refinedev/core";
+import { Create, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker } from "antd";
+import dayjs from "dayjs";
+import TextArea from "antd/es/input/TextArea";
+
+export const VendorCreate: React.FC<IResourceComponentsProps> = () => {
+  const { formProps, saveButtonProps, queryResult } = useForm();
+
+  return (
+    <Create saveButtonProps={saveButtonProps}>
+      <Form {...formProps} layout="vertical">
+        <Form.Item
+          label="Name"
+          name={["name"]}
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Input maxLength={64} />
+        </Form.Item>
+        <Form.Item
+          label="Comment"
+          name={["comment"]}
+          rules={[
+            {
+              required: false,
+            },
+          ]}
+        >
+          <TextArea maxLength={1024} />
+        </Form.Item>
+      </Form>
+    </Create>
+  );
+};

client/src/pages/vendors/edit.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { IResourceComponentsProps } from "@refinedev/core";
+import { Edit, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker } from "antd";
+import dayjs from "dayjs";
+import TextArea from "antd/es/input/TextArea";
+
+export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
+  const { formProps, saveButtonProps, queryResult } = useForm();
+
+  const vendorData = queryResult?.data?.data;
+
+  return (
+    <Edit saveButtonProps={saveButtonProps}>
+      <Form {...formProps} layout="vertical">
+        <Form.Item
+          label="Id"
+          name={["id"]}
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Input readOnly disabled />
+        </Form.Item>
+        <Form.Item
+          label="Registered"
+          name={["registered"]}
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+          getValueProps={(value) => ({
+            value: value ? dayjs(value) : undefined,
+          })}
+        >
+          <DatePicker disabled format="lll" />
+        </Form.Item>
+        <Form.Item
+          label="Name"
+          name={["name"]}
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Input maxLength={64} />
+        </Form.Item>
+        <Form.Item
+          label="Comment"
+          name={["comment"]}
+          rules={[
+            {
+              required: false,
+            },
+          ]}
+        >
+          <TextArea maxLength={1024} />
+        </Form.Item>
+      </Form>
+    </Edit>
+  );
+};

client/src/pages/vendors/index.ts

@@ -0,0 +1,4 @@
+export { VendorCreate } from "./create";
+export { VendorEdit } from "./edit";
+export { VendorList } from "./list";
+export { VendorShow } from "./show";

client/src/pages/vendors/list.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
+import {
+  useTable,
+  List,
+  EditButton,
+  ShowButton,
+  DateField,
+} from "@refinedev/antd";
+import { Table, Space } from "antd";
+
+export const VendorList: React.FC<IResourceComponentsProps> = () => {
+  const { tableProps } = useTable({
+    syncWithLocation: true,
+  });
+
+  return (
+    <List>
+      <Table {...tableProps} rowKey="id">
+        <Table.Column dataIndex="id" title="Id" />
+        <Table.Column dataIndex="name" title="Name" />
+        <Table.Column
+          dataIndex={["registered"]}
+          title="Registered"
+          render={(value: any) => <DateField value={value} format="lll" />}
+        />
+        <Table.Column dataIndex={["comment"]} title="Comment" />
+        <Table.Column
+          title="Actions"
+          dataIndex="actions"
+          render={(_, record: BaseRecord) => (
+            <Space>
+              <EditButton hideText size="small" recordItemId={record.id} />
+              <ShowButton hideText size="small" recordItemId={record.id} />
+            </Space>
+          )}
+        />
+      </Table>
+    </List>
+  );
+};

client/src/pages/vendors/show.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { IResourceComponentsProps, useShow } from "@refinedev/core";
+import {
+  Show,
+  NumberField,
+  DateField,
+  TagField,
+  TextField,
+} from "@refinedev/antd";
+import { Typography } from "antd";
+
+const { Title } = Typography;
+
+export const VendorShow: React.FC<IResourceComponentsProps> = () => {
+  const { queryResult } = useShow();
+  const { data, isLoading } = queryResult;
+
+  const record = data?.data;
+
+  return (
+    <Show isLoading={isLoading}>
+      <Title level={5}>Id</Title>
+      <NumberField value={record?.id ?? ""} />
+      <Title level={5}>Registered</Title>
+      <DateField value={record?.registered} format="lll" />
+      <Title level={5}>Name</Title>
+      <TextField value={record?.name} />
+      <Title level={5}>Comment</Title>
+      <TextField value={record?.comment} />
+    </Show>
+  );
+};