refactor: replace EditDialog with DashboardCrudFormDialog for companies and quick replies

- Removed the EditDialog component from companies and quick replies.
- Integrated DashboardCrudFormDialog to handle form submissions and editing for both entities.
- Updated the CompanyPicker to utilize the new form dialog for creating companies.
- Introduced DashboardCrudFieldControl for rendering form fields dynamically.
- Added utility functions for building form values and normalizing submit values.
- Updated tests to cover new form utilities and ensure correct behavior for form submissions.

web/app/dashboard/companies/_components/edit.tsx

@@ -1,235 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useState } from "react"
-import { zodResolver } from "@hookform/resolvers/zod"
-import type { Resolver } from "react-hook-form"
-import { useForm } from "react-hook-form"
-import { z } from "zod/v4"
-
-import { ProjectDialog } from "@/components/project-dialog"
-import { Button } from "@/components/ui/button"
-import {
-  Field,
-  FieldContent,
-  FieldError,
-  FieldLabel,
-} from "@/components/ui/field"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import {
-  fetchCompany,
-  type AdminCompany,
-  type CreateAdminCompanyPayload,
-} from "@/lib/api/company"
-import { useI18n } from "@/i18n/provider"
-
-type CompanyEditDialogProps = {
-  open: boolean
-  saving: boolean
-  itemId: number | null
-  initialValues?: Partial<CreateAdminCompanyPayload>
-  onOpenChange: (open: boolean) => void
-  onSubmit: (payload: CreateAdminCompanyPayload) => Promise<void>
-}
-
-type EditForm = {
-  name: string
-  code: string
-  remark: string
-}
-
-function createSchema(t: (key: string) => string) {
-  return z.object({
-    name: z.string().trim().min(1, t("company.nameRequired")),
-    code: z.string().trim(),
-    remark: z.string().trim(),
-  })
-}
-
-const emptyForm: EditForm = {
-  name: "",
-  code: "",
-  remark: "",
-}
-
-function buildForm(item: AdminCompany | null): EditForm {
-  if (!item) {
-    return emptyForm
-  }
-  return {
-    name: item.name,
-    code: item.code,
-    remark: item.remark,
-  }
-}
-
-function buildPayload(form: EditForm): CreateAdminCompanyPayload {
-  return {
-    name: form.name.trim(),
-    code: form.code.trim(),
-    remark: form.remark.trim(),
-  }
-}
-
-function buildInitialForm(initialValues?: Partial<CreateAdminCompanyPayload>): EditForm {
-  return {
-    name: initialValues?.name?.trim() ?? "",
-    code: initialValues?.code?.trim() ?? "",
-    remark: initialValues?.remark?.trim() ?? "",
-  }
-}
-
-export function EditDialog({
-  open,
-  saving,
-  itemId,
-  initialValues,
-  onOpenChange,
-  onSubmit,
-}: CompanyEditDialogProps) {
-  if (!open) {
-    return null
-  }
-  return (
-    <CompanyEditDialogBody
-      key={itemId ? `edit-${itemId}` : "create"}
-      open={open}
-      saving={saving}
-      itemId={itemId}
-      initialValues={initialValues}
-      onOpenChange={onOpenChange}
-      onSubmit={onSubmit}
-    />
-  )
-}
-
-type CompanyEditDialogBodyProps = CompanyEditDialogProps
-
-function CompanyEditDialogBody({
-  open,
-  saving,
-  itemId,
-  initialValues,
-  onOpenChange,
-  onSubmit,
-}: CompanyEditDialogBodyProps) {
-  const t = useI18n()
-  const formId = "company-edit-form"
-  const [loading, setLoading] = useState(false)
-  const companyFormSchema = useMemo(() => createSchema(t), [t])
-  const editFormResolver = useMemo(
-    () =>
-      zodResolver(companyFormSchema as never) as Resolver<
-        z.input<typeof companyFormSchema>,
-        undefined,
-        z.output<typeof companyFormSchema>
-      >,
-    [companyFormSchema]
-  )
-  const form = useForm<
-    z.input<typeof companyFormSchema>,
-    undefined,
-    z.output<typeof companyFormSchema>
-  >({
-    resolver: editFormResolver,
-    defaultValues: emptyForm,
-  })
-  const {
-    handleSubmit,
-    register,
-    reset,
-    formState: { errors },
-  } = form
-
-  useEffect(() => {
-    async function loadDetail() {
-      if (!itemId) {
-        reset(buildInitialForm(initialValues))
-        return
-      }
-      setLoading(true)
-      try {
-        const data = await fetchCompany(itemId)
-        reset(buildForm(data))
-      } finally {
-        setLoading(false)
-      }
-    }
-    void loadDetail()
-  }, [initialValues, itemId, reset])
-
-  async function onFormSubmit(values: EditForm) {
-    await onSubmit(buildPayload(values))
-  }
-
-  return (
-    <ProjectDialog
-      open={open}
-      onOpenChange={onOpenChange}
-      title={itemId ? t("company.editTitle") : t("company.createTitle")}
-      size="md"
-      allowFullscreen
-      footer={
-        <>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={saving}
-          >
-            {t("company.cancel")}
-          </Button>
-          <Button type="submit" form={formId} disabled={saving || loading}>
-            {saving ? t("company.saving") : itemId ? t("company.save") : t("company.create")}
-          </Button>
-        </>
-      }
-    >
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-muted-foreground">{t("company.loadingDetail")}</div>
-        </div>
-      ) : (
-        <form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
-          <Field data-invalid={!!errors.name}>
-            <FieldLabel htmlFor="company-name">{t("company.columnName")}</FieldLabel>
-            <FieldContent>
-              <Input
-                id="company-name"
-                placeholder={t("company.namePlaceholder")}
-                aria-invalid={!!errors.name}
-                {...register("name")}
-              />
-              <FieldError errors={[errors.name]} />
-            </FieldContent>
-          </Field>
-          <Field data-invalid={!!errors.code}>
-            <FieldLabel htmlFor="company-code">{t("company.columnCode")}</FieldLabel>
-            <FieldContent>
-              <Input
-                id="company-code"
-                placeholder={t("company.optional")}
-                aria-invalid={!!errors.code}
-                {...register("code")}
-              />
-              <FieldError errors={[errors.code]} />
-            </FieldContent>
-          </Field>
-          <Field data-invalid={!!errors.remark}>
-            <FieldLabel htmlFor="company-remark">{t("company.columnRemark")}</FieldLabel>
-            <FieldContent>
-              <Textarea
-                id="company-remark"
-                placeholder={t("company.remarkPlaceholder")}
-                rows={4}
-                aria-invalid={!!errors.remark}
-                {...register("remark")}
-              />
-              <FieldError errors={[errors.remark]} />
-            </FieldContent>
-          </Field>
-        </form>
-      )}
-    </ProjectDialog>
-  )
-}

web/app/dashboard/companies/page.tsx

@@ -10,6 +10,7 @@ import {
   createCompany,
   deleteCompany,
   fetchCompanies,
+  fetchCompany,
   updateCompany,
   updateCompanyStatus,
   type AdminCompany,
@@ -18,7 +19,6 @@ import {
 import { getEnumOptions } from "@/lib/enums"
 import { Status, StatusLabels } from "@/lib/generated/enums"
 import { useI18n } from "@/i18n/provider"
-import { EditDialog } from "./_components/edit"
 
 function getStatusLabel(status: Status, t: (key: string) => string) {
   if (status === Status.Disabled) {
@@ -132,6 +132,51 @@ export default function DashboardCompaniesPage() {
       updateItem={(item, payload) => updateCompany({ id: item.id, ...payload })}
       deleteItem={(item) => deleteCompany(item.id)}
       canDelete={(item) => item.status !== Status.Deleted}
+      form={{
+        fetchDetail: fetchCompany,
+        fields: [
+          {
+            name: "name",
+            label: t("company.columnName"),
+            placeholder: t("company.namePlaceholder"),
+            required: true,
+            requiredMessage: t("company.nameRequired"),
+            trim: true,
+          },
+          {
+            name: "code",
+            label: t("company.columnCode"),
+            placeholder: t("company.optional"),
+            trim: true,
+          },
+          {
+            name: "remark",
+            label: t("company.columnRemark"),
+            placeholder: t("company.remarkPlaceholder"),
+            type: "textarea",
+            rows: 4,
+            trim: true,
+          },
+        ],
+        transformSubmitValues: (values) => ({
+          name: String(values.name ?? ""),
+          code: String(values.code ?? ""),
+          remark: String(values.remark ?? ""),
+        }),
+        labels: {
+          createTitle: t("company.createTitle"),
+          editTitle: t("company.editTitle"),
+          create: t("company.create"),
+          save: t("company.save"),
+          saving: t("company.saving"),
+          cancel: t("company.cancel"),
+          loadingDetail: t("company.loadingDetail"),
+          required: t("company.nameRequired"),
+          invalidNumber: t("company.nameRequired"),
+          minValue: () => t("company.nameRequired"),
+          maxValue: () => t("company.nameRequired"),
+        },
+      }}
       renderRowActions={({ item, actionLoading, reload, setActionLoadingId }) => (
         <DropdownMenuItem
           disabled={item.status === Status.Deleted}
@@ -174,15 +219,6 @@ export default function DashboardCompaniesPage() {
           )}
         </DropdownMenuItem>
       )}
-      renderEditDialog={({ open, saving, itemId, onOpenChange, onSubmit }) => (
-        <EditDialog
-          open={open}
-          saving={saving}
-          itemId={itemId}
-          onOpenChange={onOpenChange}
-          onSubmit={onSubmit}
-        />
-      )}
       labels={{
         refresh: t("company.refresh"),
         create: t("company.new"),

web/app/dashboard/quick-replies/_components/edit.tsx

@@ -1,309 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Controller, Resolver, useForm } from "react-hook-form";
-import { z } from "zod/v4";
-
-import { OptionCombobox } from "@/components/option-combobox";
-import { ProjectDialog } from "@/components/project-dialog";
-import { Button } from "@/components/ui/button";
-import {
-  Field,
-  FieldContent,
-  FieldError,
-  FieldLabel,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  type AdminQuickReply,
-  type CreateAdminQuickReplyPayload,
-  fetchQuickReply,
-} from "@/lib/api/admin";
-import { getEnumOptions } from "@/lib/enums";
-import { Status, StatusLabels } from "@/lib/generated/enums";
-import { useI18n } from "@/i18n/provider";
-
-type QuickReplyFormDialogProps = {
-  open: boolean;
-  saving: boolean;
-  itemId: number | null;
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (payload: CreateAdminQuickReplyPayload) => Promise<void>;
-};
-
-const emptyForm: EditForm = {
-  groupName: "",
-  title: "",
-  content: "",
-  status: String(Status.Ok),
-  sortNo: "0",
-};
-
-type EditForm = {
-  groupName: string;
-  title: string;
-  content: string;
-  status: string;
-  sortNo: string;
-};
-
-function createSchema(t: (key: string) => string) {
-  return z.object({
-    groupName: z.string().trim().min(1, t("quickReply.groupNameRequired")),
-    title: z.string().trim().min(1, t("quickReply.titleRequired")),
-    content: z.string().trim().min(1, t("quickReply.contentRequired")),
-    status: z.enum([String(Status.Ok), String(Status.Disabled)], {
-      message: t("quickReply.statusRequired"),
-    }),
-    sortNo: z
-      .string()
-      .trim()
-      .min(1, t("quickReply.sortRequired"))
-      .regex(/^\d+$/, t("quickReply.sortInvalid")),
-  });
-}
-
-function getLocalizedStatusLabel(value: string | number, t: (key: string) => string) {
-  const status = Number(value) as Status;
-  if (status === Status.Disabled) {
-    return t("status.disabled");
-  }
-  if (status === Status.Deleted) {
-    return t("status.deleted");
-  }
-  return t("status.ok");
-}
-
-function buildForm(item: AdminQuickReply | null): EditForm {
-  if (!item) {
-    return emptyForm;
-  }
-
-  return {
-    groupName: item.groupName,
-    title: item.title,
-    content: item.content,
-    status: String(item.status) as EditForm["status"],
-    sortNo: String(item.sortNo),
-  };
-}
-
-function buildPayload(form: EditForm): CreateAdminQuickReplyPayload {
-  return {
-    groupName: form.groupName.trim(),
-    title: form.title.trim(),
-    content: form.content.trim(),
-    status: Number(form.status) as Status,
-    sortNo: Number(form.sortNo),
-  };
-}
-
-export function EditDialog({
-  open,
-  saving,
-  itemId,
-  onOpenChange,
-  onSubmit,
-}: QuickReplyFormDialogProps) {
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <QuickReplyFormDialogBody
-      key={itemId ? `edit-${itemId}` : "create"}
-      open={open}
-      itemId={itemId}
-      saving={saving}
-      onOpenChange={onOpenChange}
-      onSubmit={onSubmit}
-    />
-  );
-}
-
-type QuickReplyFormDialogBodyProps = {
-  open: boolean;
-  saving: boolean;
-  itemId: number | null;
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (payload: CreateAdminQuickReplyPayload) => Promise<void>;
-};
-
-function QuickReplyFormDialogBody({
-  open,
-  saving,
-  itemId,
-  onOpenChange,
-  onSubmit,
-}: QuickReplyFormDialogBodyProps) {
-  const t = useI18n();
-  const formId = "quick-reply-edit-form";
-  const [loading, setLoading] = useState(false);
-  const quickReplyFormSchema = useMemo(() => createSchema(t), [t]);
-  const editFormResolver = useMemo(
-    () =>
-      zodResolver(quickReplyFormSchema as never) as Resolver<
-        z.input<typeof quickReplyFormSchema>,
-        undefined,
-        z.output<typeof quickReplyFormSchema>
-      >,
-    [quickReplyFormSchema],
-  );
-  const formStatusOptions = useMemo(
-    () =>
-      getEnumOptions(StatusLabels)
-        .filter((item) => Number(item.value) !== Status.Deleted)
-        .map((item) => ({
-          value: String(item.value),
-          label: getLocalizedStatusLabel(item.value, t),
-        })),
-    [t],
-  );
-  const form = useForm<
-    z.input<typeof quickReplyFormSchema>,
-    undefined,
-    z.output<typeof quickReplyFormSchema>
-  >({
-    resolver: editFormResolver,
-    defaultValues: emptyForm,
-  });
-  const {
-    control,
-    handleSubmit,
-    reset,
-    register,
-    formState: { errors },
-  } = form;
-
-  useEffect(() => {
-    async function loadDetail() {
-      if (!itemId) {
-        reset(emptyForm);
-        return;
-      }
-      setLoading(true);
-      try {
-        const data = await fetchQuickReply(itemId);
-        reset(buildForm(data));
-      } catch (error) {
-        console.error("Failed to load quick reply:", error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    void loadDetail();
-  }, [itemId, reset]);
-
-  async function onFormSubmit(values: EditForm) {
-    const payload = buildPayload(values);
-    await onSubmit(payload);
-  }
-
-  return (
-    <ProjectDialog
-      open={open}
-      onOpenChange={onOpenChange}
-      title={itemId ? t("quickReply.editTitle") : t("quickReply.createTitle")}
-      size="md"
-      allowFullscreen
-      footer={
-        <>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={saving}
-          >
-            {t("quickReply.cancel")}
-          </Button>
-          <Button type="submit" form={formId} disabled={saving || loading}>
-            {saving ? t("quickReply.saving") : itemId ? t("quickReply.save") : t("quickReply.create")}
-          </Button>
-        </>
-      }
-    >
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-muted-foreground">{t("quickReply.loadingDetail")}</div>
-        </div>
-      ) : (
-        <form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
-          <Field data-invalid={!!errors.groupName}>
-            <FieldLabel htmlFor="quick-reply-group-name">{t("quickReply.groupName")}</FieldLabel>
-            <FieldContent>
-              <Input
-                id="quick-reply-group-name"
-                placeholder={t("quickReply.groupNamePlaceholder")}
-                aria-invalid={!!errors.groupName}
-                {...register("groupName")}
-              />
-              <FieldError errors={[errors.groupName]} />
-            </FieldContent>
-          </Field>
-          <Field data-invalid={!!errors.title}>
-            <FieldLabel htmlFor="quick-reply-title">{t("quickReply.title")}</FieldLabel>
-            <FieldContent>
-              <Input
-                id="quick-reply-title"
-                placeholder={t("quickReply.titlePlaceholder")}
-                aria-invalid={!!errors.title}
-                {...register("title")}
-              />
-              <FieldError errors={[errors.title]} />
-            </FieldContent>
-          </Field>
-          <Field data-invalid={!!errors.content}>
-            <FieldLabel htmlFor="quick-reply-content">{t("quickReply.content")}</FieldLabel>
-            <FieldContent>
-              <Textarea
-                id="quick-reply-content"
-                placeholder={t("quickReply.contentPlaceholder")}
-                rows={6}
-                aria-invalid={!!errors.content}
-                {...register("content")}
-              />
-              <FieldError errors={[errors.content]} />
-            </FieldContent>
-          </Field>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <Field data-invalid={!!errors.status}>
-              <FieldLabel>{t("quickReply.columnStatus")}</FieldLabel>
-              <FieldContent>
-                <Controller
-                  control={control}
-                  name="status"
-                  render={({ field }) => (
-                    <OptionCombobox
-                      value={field.value}
-                      options={formStatusOptions}
-                      placeholder={t("quickReply.statusRequired")}
-                      onChange={field.onChange}
-                    />
-                  )}
-                />
-                <FieldError errors={[errors.status]} />
-              </FieldContent>
-            </Field>
-            <Field data-invalid={!!errors.sortNo}>
-              <FieldLabel htmlFor="quick-reply-sort-no">{t("quickReply.columnSort")}</FieldLabel>
-              <FieldContent>
-                <Input
-                  id="quick-reply-sort-no"
-                  type="number"
-                  min={0}
-                  step={1}
-                  placeholder={t("quickReply.sortPlaceholder")}
-                  aria-invalid={!!errors.sortNo}
-                  {...register("sortNo")}
-                />
-                <FieldError errors={[errors.sortNo]} />
-              </FieldContent>
-            </Field>
-          </div>
-        </form>
-      )}
-    </ProjectDialog>
-  );
-}

web/app/dashboard/quick-replies/page.tsx

@@ -9,6 +9,7 @@ import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
 import {
   createQuickReply,
   deleteQuickReply,
+  fetchQuickReply,
   fetchQuickReplies,
   updateQuickReply,
   type AdminQuickReply,
@@ -17,7 +18,6 @@ import {
 import { getEnumOptions } from "@/lib/enums"
 import { Status, StatusLabels } from "@/lib/generated/enums"
 import { useI18n } from "@/i18n/provider"
-import { EditDialog } from "./_components/edit"
 
 function getStatusLabel(status: Status, t: (key: string) => string) {
   if (status === Status.Disabled) {
@@ -118,6 +118,81 @@ export default function DashboardQuickRepliesPage() {
       createItem={createQuickReply}
       updateItem={(item, payload) => updateQuickReply({ id: item.id, ...payload })}
       deleteItem={(item) => deleteQuickReply(item.id)}
+      form={{
+        fetchDetail: fetchQuickReply,
+        fields: [
+          {
+            name: "groupName",
+            label: t("quickReply.groupName"),
+            placeholder: t("quickReply.groupNamePlaceholder"),
+            required: true,
+            requiredMessage: t("quickReply.groupNameRequired"),
+            trim: true,
+          },
+          {
+            name: "title",
+            label: t("quickReply.title"),
+            placeholder: t("quickReply.titlePlaceholder"),
+            required: true,
+            requiredMessage: t("quickReply.titleRequired"),
+            trim: true,
+          },
+          {
+            name: "content",
+            label: t("quickReply.content"),
+            placeholder: t("quickReply.contentPlaceholder"),
+            type: "textarea",
+            rows: 6,
+            required: true,
+            requiredMessage: t("quickReply.contentRequired"),
+            trim: true,
+          },
+          {
+            name: "status",
+            label: t("quickReply.columnStatus"),
+            type: "select",
+            defaultValue: String(Status.Ok),
+            valueType: "number",
+            required: true,
+            requiredMessage: t("quickReply.statusRequired"),
+            options: listStatusOptions.filter((item) => item.value !== "all"),
+            valueFromItem: (item) => String(item.status),
+          },
+          {
+            name: "sortNo",
+            label: t("quickReply.columnSort"),
+            placeholder: t("quickReply.sortPlaceholder"),
+            type: "number",
+            defaultValue: "0",
+            min: 0,
+            step: 1,
+            required: true,
+            requiredMessage: t("quickReply.sortRequired"),
+            pattern: /^\d+$/,
+            patternMessage: t("quickReply.sortInvalid"),
+          },
+        ],
+        transformSubmitValues: (values) => ({
+          groupName: String(values.groupName ?? ""),
+          title: String(values.title ?? ""),
+          content: String(values.content ?? ""),
+          status: Number(values.status),
+          sortNo: Number(values.sortNo),
+        }),
+        labels: {
+          createTitle: t("quickReply.createTitle"),
+          editTitle: t("quickReply.editTitle"),
+          create: t("quickReply.create"),
+          save: t("quickReply.save"),
+          saving: t("quickReply.saving"),
+          cancel: t("quickReply.cancel"),
+          loadingDetail: t("quickReply.loadingDetail"),
+          required: t("quickReply.titleRequired"),
+          invalidNumber: t("quickReply.sortInvalid"),
+          minValue: () => t("quickReply.sortInvalid"),
+          maxValue: () => t("quickReply.sortInvalid"),
+        },
+      }}
       renderRowActions={({ item, actionLoading, reload, setActionLoadingId }) => (
         <DropdownMenuItem
           onClick={() => {
@@ -163,15 +238,6 @@ export default function DashboardQuickRepliesPage() {
               : t("quickReply.enable")}
         </DropdownMenuItem>
       )}
-      renderEditDialog={({ open, saving, itemId, onOpenChange, onSubmit }) => (
-        <EditDialog
-          open={open}
-          saving={saving}
-          itemId={itemId}
-          onOpenChange={onOpenChange}
-          onSubmit={onSubmit}
-        />
-      )}
       labels={{
         refresh: t("quickReply.refresh"),
         create: t("quickReply.new"),