Repository: TarMarketplace/ShanePee
Pull request #83: delete art toys button
Author: login: SecretKr
Created: 2025-03-19T09:05:51Z | Merged: 2025-03-20T07:37:44Z



Diff:
diff --git a/client/src/app/product/_components/delete-item-dialog.tsx b/client/src/app/product/_components/delete-item-dialog.tsx
new file mode 100644
index 00000000..1e42880c
--- /dev/null
+++ b/client/src/app/product/_components/delete-item-dialog.tsx
@@ -0,0 +1,62 @@
+import { Button } from '@/components/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/dialog'
+import { Text } from '@/components/text'
+
+type ProductFormProps = {
+  productName: string
+  handleDeleteProduct: () => void
+}
+
+export function DeleteItemDialog({
+  productName,
+  handleDeleteProduct,
+}: ProductFormProps) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='filled' className='w-14' type='button'>
+          ลบ
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Text variant='heading-md' className='w-full'>
+              ต้องการลบสินค้าหรือไม่
+            </Text>
+          </DialogTitle>
+          <DialogDescription>
+            <Text variant='lg-regular' className='text-black'>
+              คุณกำลังจะลบสินค้า
+              <span className='mx-1 font-bold'>
+                {productName || 'ไม่มีชื่อสินค้า'}
+              </span>
+              <br />
+              <span className='text-primary underline'>
+                สินค้าของคุณจะหายไปและไม่สามารถกู้คืนได้!!{' '}
+              </span>
+              <br />
+              กรุณาตรวจสอบก่อนยืนยัน
+            </Text>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant='filled' onClick={() => handleDeleteProduct()}>
+              ลบสินค้า
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/client/src/app/product/_components/product-form.tsx b/client/src/app/product/_components/product-form.tsx
index 056bb891..ea0f5242 100644
--- a/client/src/app/product/_components/product-form.tsx
+++ b/client/src/app/product/_components/product-form.tsx
@@ -20,14 +20,21 @@ import { Textarea } from '@/components/textarea'
 import { cn } from '@/lib/utils'
 
 import { type ProductFormSchema } from '../_containers/product-form-container'
+import { DeleteItemDialog } from './delete-item-dialog'
 
 type ProductFormProps = {
   form: UseFormReturn<ProductFormSchema>
   onSubmit: SubmitHandler<ProductFormSchema>
   isEditing: boolean
+  handleDeleteProduct: () => void
 }
 
-export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
+export function ProductForm({
+  form,
+  onSubmit,
+  isEditing,
+  handleDeleteProduct,
+}: ProductFormProps) {
   const [isShowingButton, setIsShowingButton] = useState(false)
   const router = useRouter()
 
@@ -165,13 +172,21 @@ export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
 
         <div className='mt-auto flex items-center justify-end gap-4'>
           {isEditing && (
-            <button
-              type='button'
-              className='font-bold text-grey-500 underline'
-              onClick={() => router.back()}
-            >
-              ยกเลิก
-            </button>
+            <>
+              <div className='w-full'>
+                <DeleteItemDialog
+                  productName={form.getValues('name')}
+                  handleDeleteProduct={handleDeleteProduct}
+                />
+              </div>
+              <button
+                type='button'
+                className='font-bold text-grey-500 underline'
+                onClick={() => router.back()}
+              >
+                ยกเลิก
+              </button>
+            </>
           )}
           <Button variant='filled' type='submit'>
             {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
diff --git a/client/src/app/product/_containers/product-form-container.tsx b/client/src/app/product/_containers/product-form-container.tsx
index cfb9dabb..05ebb2b1 100644
--- a/client/src/app/product/_containers/product-form-container.tsx
+++ b/client/src/app/product/_containers/product-form-container.tsx
@@ -10,6 +10,7 @@ import { z } from 'zod'
 import { useUser } from '@/providers/user-provider'
 
 import { env } from '@/env'
+import { deleteArtToy } from '@/generated/api'
 import { imageLoader } from '@/utils/image-loader'
 
 import { ProductForm } from '../_components/product-form'
@@ -66,6 +67,23 @@ export function ProductFormContainer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultImage])
 
+  const handleDeleteProduct = async () => {
+    if (id) {
+      const { response } = await deleteArtToy({
+        path: {
+          id: id,
+        },
+      })
+
+      if (response.ok) {
+        toast.success('Product deleted successfully')
+        router.push('/my-product')
+      } else {
+        toast.error('Failed to delete product')
+      }
+    }
+  }
+
   const onSubmit: SubmitHandler<ProductFormSchema> = async (data) => {
     if (!user) {
       toast.error('Please login first')
@@ -80,7 +98,7 @@ export function ProductFormContainer({
       const response = await fetch(
         `${env.NEXT_PUBLIC_BASE_API_URL}/v1/art-toy` + (id ? `/${id}` : ''),
         {
-          method: id ? 'PUT' : 'POST',
+          method: id ? 'PATCH' : 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
@@ -116,6 +134,7 @@ export function ProductFormContainer({
         onSubmit={onSubmit}
         form={form}
         isEditing={!!defaultValues}
+        handleDeleteProduct={handleDeleteProduct}
       />
     </main>
   )
diff --git a/client/src/app/product/edit/[id]/page.tsx b/client/src/app/product/edit/[id]/page.tsx
index f3523320..7fcc1c56 100644
--- a/client/src/app/product/edit/[id]/page.tsx
+++ b/client/src/app/product/edit/[id]/page.tsx
@@ -7,6 +7,7 @@ const getProduct = async (id: string) => {
     path: {
       id: parseInt(id),
     },
+    cache: 'no-cache',
   })
 
   if (response.ok) {


Reviews:
user: login: shalluv
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T06:37:03Z
user: login: SecretKr
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T06:49:16Z
user: login: shalluv
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T06:53:25Z
user: login: SecretKr
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T06:58:01Z
user: login: shalluv
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T07:03:24Z
user: login: shalluv
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T07:37:39Z

Review comments:
diff_hunk: @@ -40,144 +47,200 @@ export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
   }, [image])
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
-      >
-        <div className='flex items-center gap-0.5'>
-          <Icon
-            icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
-            width={32}
-            height={32}
-          />
-          <Text variant='heading-lg'>
-            {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
-          </Text>
-        </div>
-
-        <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
-          <FormField
-            control={form.control}
-            name='image'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormLabel
-                  isInput={false}
-                  className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
-                >
-                  {previewUrl && (
-                    <Image
-                      src={previewUrl}
-                      alt=''
-                      fill
-                      className='size-full object-cover'
-                      onMouseEnter={() => setIsShowingButton(true)}
-                      onMouseLeave={() => setIsShowingButton(false)}
-                    />
-                  )}
-                  <Button
-                    variant='filled'
-                    type='button'
-                    className={cn(
-                      'pointer-events-none z-50 opacity-0',
-                      (!previewUrl || isShowingButton) && 'opacity-100'
-                    )}
-                  >
-                    {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
-                  </Button>
-                </FormLabel>
-                <FormControl>
-                  <input
-                    type='file'
-                    className='hidden'
-                    accept='image/*'
-                    onChange={(e) => {
-                      const file = e.target.files?.[0]
-                      if (file) {
-                        field.onChange(file)
-                      }
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex w-full flex-col gap-3'>
-            <FormField
-              name='name'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ชื่อสินค้า</FormLabel>
-                  <FormControl>
-                    <Input {...field} type='text' placeholder='ชื่อสินค้า' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name='description'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>รายละเอียด</FormLabel>
-                  <FormControl>
-                    <Textarea {...field} placeholder='รายละเอียด' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
+        >
+          <div className='flex items-center gap-0.5'>
+            <Icon
+              icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
+              width={32}
+              height={32}
             />
+            <Text variant='heading-lg'>
+              {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
+            </Text>
+          </div>
+
+          <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
             <FormField
-              name='price'
               control={form.control}
+              name='image'
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ราคา</FormLabel>
-                  <Text variant='md-regular' className='absolute left-3 top-2'>
-                    ฿
-                  </Text>
+                <FormItem className='w-full'>
+                  <FormLabel
+                    isInput={false}
+                    className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
+                  >
+                    {previewUrl && (
+                      <Image
+                        src={previewUrl}
+                        alt=''
+                        fill
+                        className='size-full object-cover'
+                        onMouseEnter={() => setIsShowingButton(true)}
+                        onMouseLeave={() => setIsShowingButton(false)}
+                      />
+                    )}
+                    <Button
+                      variant='filled'
+                      type='button'
+                      className={cn(
+                        'pointer-events-none z-50 opacity-0',
+                        (!previewUrl || isShowingButton) && 'opacity-100'
+                      )}
+                    >
+                      {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
+                    </Button>
+                  </FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
+                    <input
+                      type='file'
+                      className='hidden'
+                      accept='image/*'
                       onChange={(e) => {
-                        if (e.target.value) {
-                          field.onChange(parseInt(e.target.value))
-                        } else {
-                          field.onChange('')
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          field.onChange(file)
                         }
                       }}
-                      type='number'
-                      placeholder='ราคา'
-                      className='pl-7'
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+
+            <div className='flex w-full flex-col gap-3'>
+              <FormField
+                name='name'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ชื่อสินค้า</FormLabel>
+                    <FormControl>
+                      <Input {...field} type='text' placeholder='ชื่อสินค้า' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='description'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>รายละเอียด</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder='รายละเอียด' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='price'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ราคา</FormLabel>
+                    <Text
+                      variant='md-regular'
+                      className='absolute left-3 top-2'
+                    >
+                      ฿
+                    </Text>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          if (e.target.value) {
+                            field.onChange(parseInt(e.target.value))
+                          } else {
+                            field.onChange('')
+                          }
+                        }}
+                        type='number'
+                        placeholder='ราคา'
+                        className='pl-7'
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className='mt-auto flex items-center justify-end gap-4'>
-          {isEditing && (
-            <button
-              type='button'
-              className='font-bold text-grey-500 underline'
-              onClick={() => router.back()}
-            >
-              ยกเลิก
-            </button>
-          )}
-          <Button variant='filled' type='submit'>
-            {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          <div className='mt-auto flex items-center justify-end gap-4'>
+            {isEditing && (
+              <>
+                <div className='w-full'>
+                  <Button
+                    variant='filled'
+                    className='w-14'
+                    type='button'
+                    onClick={() => setShowPopover(true)}
+                  >
+                    ลบ
+                  </Button>
+                </div>
+                <button
+                  type='button'
+                  className='font-bold text-grey-500 underline'
+                  onClick={() => router.back()}
+                >
+                  ยกเลิก
+                </button>
+              </>
+            )}
+            <Button variant='filled' type='submit'>
+              {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
+            </Button>
+          </div>
+        </form>
+      </Form>
+      {showPopover && (
+        <>
+          <div
+            className='fixed inset-0 z-10 bg-black/20'
+            onClick={() => setShowPopover(false)}
+          ></div>
+          <div className='fixed left-1/2 top-1/2 z-10 flex w-[354px] -translate-x-1/2 -translate-y-1/2 flex-col rounded bg-white p-4 shadow-lg md:w-[500px]'>
+            <div className='mb-4 flex items-center'>
+              <Text variant='heading-md' className='w-full'>
+                ต้องการลบสินค้าหรือไม่
+              </Text>
+              <Icon
+                icon='maki:cross'
+                className='size-5 cursor-pointer text-grey-500'
+                onClick={() => setShowPopover(false)}
+              />
+            </div>
+            <div className='flex flex-wrap gap-1'>
+              <Text variant='lg-regular' className=''>
+                คุณกำลังจะลบสินค้า
+                <span className='mx-1 font-bold'>
+                  {form.getValues('name') || 'ไม่มีชื่อสินค้า'}
+                </span>
+                <br />
+                <span className='text-primary underline'>
+                  สินค้าของคุณจะหายไปและไม่สามารถกู้คืนได้!!{' '}
+                </span>
+                <br />
+                กรุณาตรวจสอบก่อนยืนยัน
+              </Text>
+            </div>
+            <div className='flex justify-end'>
+              <Button variant='filled' onClick={handleDeleteProduct}>
+                ลบสินค้า
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
path: client/src/app/product/_components/product-form.tsx
user: login: shalluv
body: ใช้ Dialog แทน
created_at: 2025-03-20T06:35:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,144 +47,200 @@ export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
   }, [image])
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
-      >
-        <div className='flex items-center gap-0.5'>
-          <Icon
-            icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
-            width={32}
-            height={32}
-          />
-          <Text variant='heading-lg'>
-            {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
-          </Text>
-        </div>
-
-        <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
-          <FormField
-            control={form.control}
-            name='image'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormLabel
-                  isInput={false}
-                  className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
-                >
-                  {previewUrl && (
-                    <Image
-                      src={previewUrl}
-                      alt=''
-                      fill
-                      className='size-full object-cover'
-                      onMouseEnter={() => setIsShowingButton(true)}
-                      onMouseLeave={() => setIsShowingButton(false)}
-                    />
-                  )}
-                  <Button
-                    variant='filled'
-                    type='button'
-                    className={cn(
-                      'pointer-events-none z-50 opacity-0',
-                      (!previewUrl || isShowingButton) && 'opacity-100'
-                    )}
-                  >
-                    {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
-                  </Button>
-                </FormLabel>
-                <FormControl>
-                  <input
-                    type='file'
-                    className='hidden'
-                    accept='image/*'
-                    onChange={(e) => {
-                      const file = e.target.files?.[0]
-                      if (file) {
-                        field.onChange(file)
-                      }
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex w-full flex-col gap-3'>
-            <FormField
-              name='name'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ชื่อสินค้า</FormLabel>
-                  <FormControl>
-                    <Input {...field} type='text' placeholder='ชื่อสินค้า' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name='description'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>รายละเอียด</FormLabel>
-                  <FormControl>
-                    <Textarea {...field} placeholder='รายละเอียด' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
+        >
+          <div className='flex items-center gap-0.5'>
+            <Icon
+              icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
+              width={32}
+              height={32}
             />
+            <Text variant='heading-lg'>
+              {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
+            </Text>
+          </div>
+
+          <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
             <FormField
-              name='price'
               control={form.control}
+              name='image'
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ราคา</FormLabel>
-                  <Text variant='md-regular' className='absolute left-3 top-2'>
-                    ฿
-                  </Text>
+                <FormItem className='w-full'>
+                  <FormLabel
+                    isInput={false}
+                    className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
+                  >
+                    {previewUrl && (
+                      <Image
+                        src={previewUrl}
+                        alt=''
+                        fill
+                        className='size-full object-cover'
+                        onMouseEnter={() => setIsShowingButton(true)}
+                        onMouseLeave={() => setIsShowingButton(false)}
+                      />
+                    )}
+                    <Button
+                      variant='filled'
+                      type='button'
+                      className={cn(
+                        'pointer-events-none z-50 opacity-0',
+                        (!previewUrl || isShowingButton) && 'opacity-100'
+                      )}
+                    >
+                      {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
+                    </Button>
+                  </FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
+                    <input
+                      type='file'
+                      className='hidden'
+                      accept='image/*'
                       onChange={(e) => {
-                        if (e.target.value) {
-                          field.onChange(parseInt(e.target.value))
-                        } else {
-                          field.onChange('')
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          field.onChange(file)
                         }
                       }}
-                      type='number'
-                      placeholder='ราคา'
-                      className='pl-7'
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+
+            <div className='flex w-full flex-col gap-3'>
+              <FormField
+                name='name'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ชื่อสินค้า</FormLabel>
+                    <FormControl>
+                      <Input {...field} type='text' placeholder='ชื่อสินค้า' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='description'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>รายละเอียด</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder='รายละเอียด' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='price'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ราคา</FormLabel>
+                    <Text
+                      variant='md-regular'
+                      className='absolute left-3 top-2'
+                    >
+                      ฿
+                    </Text>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          if (e.target.value) {
+                            field.onChange(parseInt(e.target.value))
+                          } else {
+                            field.onChange('')
+                          }
+                        }}
+                        type='number'
+                        placeholder='ราคา'
+                        className='pl-7'
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className='mt-auto flex items-center justify-end gap-4'>
-          {isEditing && (
-            <button
-              type='button'
-              className='font-bold text-grey-500 underline'
-              onClick={() => router.back()}
-            >
-              ยกเลิก
-            </button>
-          )}
-          <Button variant='filled' type='submit'>
-            {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          <div className='mt-auto flex items-center justify-end gap-4'>
+            {isEditing && (
+              <>
+                <div className='w-full'>
+                  <Button
+                    variant='filled'
+                    className='w-14'
+                    type='button'
+                    onClick={() => setShowPopover(true)}
+                  >
+                    ลบ
+                  </Button>
+                </div>
+                <button
+                  type='button'
+                  className='font-bold text-grey-500 underline'
+                  onClick={() => router.back()}
+                >
+                  ยกเลิก
+                </button>
+              </>
+            )}
+            <Button variant='filled' type='submit'>
+              {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
+            </Button>
+          </div>
+        </form>
+      </Form>
+      {showPopover && (
+        <>
+          <div
+            className='fixed inset-0 z-10 bg-black/20'
+            onClick={() => setShowPopover(false)}
+          ></div>
+          <div className='fixed left-1/2 top-1/2 z-10 flex w-[354px] -translate-x-1/2 -translate-y-1/2 flex-col rounded bg-white p-4 shadow-lg md:w-[500px]'>
+            <div className='mb-4 flex items-center'>
+              <Text variant='heading-md' className='w-full'>
+                ต้องการลบสินค้าหรือไม่
+              </Text>
+              <Icon
+                icon='maki:cross'
+                className='size-5 cursor-pointer text-grey-500'
+                onClick={() => setShowPopover(false)}
+              />
+            </div>
+            <div className='flex flex-wrap gap-1'>
+              <Text variant='lg-regular' className=''>
+                คุณกำลังจะลบสินค้า
+                <span className='mx-1 font-bold'>
+                  {form.getValues('name') || 'ไม่มีชื่อสินค้า'}
+                </span>
+                <br />
+                <span className='text-primary underline'>
+                  สินค้าของคุณจะหายไปและไม่สามารถกู้คืนได้!!{' '}
+                </span>
+                <br />
+                กรุณาตรวจสอบก่อนยืนยัน
+              </Text>
+            </div>
+            <div className='flex justify-end'>
+              <Button variant='filled' onClick={handleDeleteProduct}>
+                ลบสินค้า
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
path: client/src/app/product/_components/product-form.tsx
user: login: SecretKr
body: ok พึ่งเห็นว่ามี
created_at: 2025-03-20T06:49:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,144 +56,188 @@ export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
   }, [image])
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
-      >
-        <div className='flex items-center gap-0.5'>
-          <Icon
-            icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
-            width={32}
-            height={32}
-          />
-          <Text variant='heading-lg'>
-            {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
-          </Text>
-        </div>
-
-        <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
-          <FormField
-            control={form.control}
-            name='image'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormLabel
-                  isInput={false}
-                  className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
-                >
-                  {previewUrl && (
-                    <Image
-                      src={previewUrl}
-                      alt=''
-                      fill
-                      className='size-full object-cover'
-                      onMouseEnter={() => setIsShowingButton(true)}
-                      onMouseLeave={() => setIsShowingButton(false)}
-                    />
-                  )}
-                  <Button
-                    variant='filled'
-                    type='button'
-                    className={cn(
-                      'pointer-events-none z-50 opacity-0',
-                      (!previewUrl || isShowingButton) && 'opacity-100'
-                    )}
-                  >
-                    {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
-                  </Button>
-                </FormLabel>
-                <FormControl>
-                  <input
-                    type='file'
-                    className='hidden'
-                    accept='image/*'
-                    onChange={(e) => {
-                      const file = e.target.files?.[0]
-                      if (file) {
-                        field.onChange(file)
-                      }
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex w-full flex-col gap-3'>
-            <FormField
-              name='name'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ชื่อสินค้า</FormLabel>
-                  <FormControl>
-                    <Input {...field} type='text' placeholder='ชื่อสินค้า' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name='description'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>รายละเอียด</FormLabel>
-                  <FormControl>
-                    <Textarea {...field} placeholder='รายละเอียด' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
+    <Dialog>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
+        >
+          <div className='flex items-center gap-0.5'>
+            <Icon
+              icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
+              width={32}
+              height={32}
             />
+            <Text variant='heading-lg'>
+              {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
+            </Text>
+          </div>
+
+          <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
             <FormField
-              name='price'
               control={form.control}
+              name='image'
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ราคา</FormLabel>
-                  <Text variant='md-regular' className='absolute left-3 top-2'>
-                    ฿
-                  </Text>
+                <FormItem className='w-full'>
+                  <FormLabel
+                    isInput={false}
+                    className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
+                  >
+                    {previewUrl && (
+                      <Image
+                        src={previewUrl}
+                        alt=''
+                        fill
+                        className='size-full object-cover'
+                        onMouseEnter={() => setIsShowingButton(true)}
+                        onMouseLeave={() => setIsShowingButton(false)}
+                      />
+                    )}
+                    <Button
+                      variant='filled'
+                      type='button'
+                      className={cn(
+                        'pointer-events-none z-50 opacity-0',
+                        (!previewUrl || isShowingButton) && 'opacity-100'
+                      )}
+                    >
+                      {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
+                    </Button>
+                  </FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
+                    <input
+                      type='file'
+                      className='hidden'
+                      accept='image/*'
                       onChange={(e) => {
-                        if (e.target.value) {
-                          field.onChange(parseInt(e.target.value))
-                        } else {
-                          field.onChange('')
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          field.onChange(file)
                         }
                       }}
-                      type='number'
-                      placeholder='ราคา'
-                      className='pl-7'
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+
+            <div className='flex w-full flex-col gap-3'>
+              <FormField
+                name='name'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ชื่อสินค้า</FormLabel>
+                    <FormControl>
+                      <Input {...field} type='text' placeholder='ชื่อสินค้า' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='description'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>รายละเอียด</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder='รายละเอียด' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='price'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ราคา</FormLabel>
+                    <Text
+                      variant='md-regular'
+                      className='absolute left-3 top-2'
+                    >
+                      ฿
+                    </Text>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          if (e.target.value) {
+                            field.onChange(parseInt(e.target.value))
+                          } else {
+                            field.onChange('')
+                          }
+                        }}
+                        type='number'
+                        placeholder='ราคา'
+                        className='pl-7'
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className='mt-auto flex items-center justify-end gap-4'>
-          {isEditing && (
-            <button
-              type='button'
-              className='font-bold text-grey-500 underline'
-              onClick={() => router.back()}
-            >
-              ยกเลิก
-            </button>
-          )}
-          <Button variant='filled' type='submit'>
-            {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          <div className='mt-auto flex items-center justify-end gap-4'>
+            {isEditing && (
+              <>
+                <div className='w-full'>
+                  <DialogTrigger asChild>
+                    <Button variant='filled' className='w-14' type='button'>
+                      ลบ
+                    </Button>
+                  </DialogTrigger>
path: client/src/app/product/_components/product-form.tsx
user: login: shalluv
body: แยก comp ออกไปเลยได้มั้ย Dialog ครอบกว้างเกิน
created_at: 2025-03-20T06:53:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,144 +56,188 @@ export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
   }, [image])
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
-      >
-        <div className='flex items-center gap-0.5'>
-          <Icon
-            icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
-            width={32}
-            height={32}
-          />
-          <Text variant='heading-lg'>
-            {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
-          </Text>
-        </div>
-
-        <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
-          <FormField
-            control={form.control}
-            name='image'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormLabel
-                  isInput={false}
-                  className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
-                >
-                  {previewUrl && (
-                    <Image
-                      src={previewUrl}
-                      alt=''
-                      fill
-                      className='size-full object-cover'
-                      onMouseEnter={() => setIsShowingButton(true)}
-                      onMouseLeave={() => setIsShowingButton(false)}
-                    />
-                  )}
-                  <Button
-                    variant='filled'
-                    type='button'
-                    className={cn(
-                      'pointer-events-none z-50 opacity-0',
-                      (!previewUrl || isShowingButton) && 'opacity-100'
-                    )}
-                  >
-                    {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
-                  </Button>
-                </FormLabel>
-                <FormControl>
-                  <input
-                    type='file'
-                    className='hidden'
-                    accept='image/*'
-                    onChange={(e) => {
-                      const file = e.target.files?.[0]
-                      if (file) {
-                        field.onChange(file)
-                      }
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex w-full flex-col gap-3'>
-            <FormField
-              name='name'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ชื่อสินค้า</FormLabel>
-                  <FormControl>
-                    <Input {...field} type='text' placeholder='ชื่อสินค้า' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name='description'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>รายละเอียด</FormLabel>
-                  <FormControl>
-                    <Textarea {...field} placeholder='รายละเอียด' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
+    <Dialog>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
+        >
+          <div className='flex items-center gap-0.5'>
+            <Icon
+              icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
+              width={32}
+              height={32}
             />
+            <Text variant='heading-lg'>
+              {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
+            </Text>
+          </div>
+
+          <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
             <FormField
-              name='price'
               control={form.control}
+              name='image'
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ราคา</FormLabel>
-                  <Text variant='md-regular' className='absolute left-3 top-2'>
-                    ฿
-                  </Text>
+                <FormItem className='w-full'>
+                  <FormLabel
+                    isInput={false}
+                    className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
+                  >
+                    {previewUrl && (
+                      <Image
+                        src={previewUrl}
+                        alt=''
+                        fill
+                        className='size-full object-cover'
+                        onMouseEnter={() => setIsShowingButton(true)}
+                        onMouseLeave={() => setIsShowingButton(false)}
+                      />
+                    )}
+                    <Button
+                      variant='filled'
+                      type='button'
+                      className={cn(
+                        'pointer-events-none z-50 opacity-0',
+                        (!previewUrl || isShowingButton) && 'opacity-100'
+                      )}
+                    >
+                      {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
+                    </Button>
+                  </FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
+                    <input
+                      type='file'
+                      className='hidden'
+                      accept='image/*'
                       onChange={(e) => {
-                        if (e.target.value) {
-                          field.onChange(parseInt(e.target.value))
-                        } else {
-                          field.onChange('')
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          field.onChange(file)
                         }
                       }}
-                      type='number'
-                      placeholder='ราคา'
-                      className='pl-7'
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+
+            <div className='flex w-full flex-col gap-3'>
+              <FormField
+                name='name'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ชื่อสินค้า</FormLabel>
+                    <FormControl>
+                      <Input {...field} type='text' placeholder='ชื่อสินค้า' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='description'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>รายละเอียด</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder='รายละเอียด' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='price'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ราคา</FormLabel>
+                    <Text
+                      variant='md-regular'
+                      className='absolute left-3 top-2'
+                    >
+                      ฿
+                    </Text>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          if (e.target.value) {
+                            field.onChange(parseInt(e.target.value))
+                          } else {
+                            field.onChange('')
+                          }
+                        }}
+                        type='number'
+                        placeholder='ราคา'
+                        className='pl-7'
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className='mt-auto flex items-center justify-end gap-4'>
-          {isEditing && (
-            <button
-              type='button'
-              className='font-bold text-grey-500 underline'
-              onClick={() => router.back()}
-            >
-              ยกเลิก
-            </button>
-          )}
-          <Button variant='filled' type='submit'>
-            {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          <div className='mt-auto flex items-center justify-end gap-4'>
+            {isEditing && (
+              <>
+                <div className='w-full'>
+                  <DialogTrigger asChild>
+                    <Button variant='filled' className='w-14' type='button'>
+                      ลบ
+                    </Button>
+                  </DialogTrigger>
path: client/src/app/product/_components/product-form.tsx
user: login: SecretKr
body: คือยังไงนะ?
แยกยังไงอ่ะ
created_at: 2025-03-20T06:58:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -40,144 +56,188 @@ export function ProductForm({ form, onSubmit, isEditing }: ProductFormProps) {
   }, [image])
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
-      >
-        <div className='flex items-center gap-0.5'>
-          <Icon
-            icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
-            width={32}
-            height={32}
-          />
-          <Text variant='heading-lg'>
-            {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
-          </Text>
-        </div>
-
-        <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
-          <FormField
-            control={form.control}
-            name='image'
-            render={({ field }) => (
-              <FormItem className='w-full'>
-                <FormLabel
-                  isInput={false}
-                  className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
-                >
-                  {previewUrl && (
-                    <Image
-                      src={previewUrl}
-                      alt=''
-                      fill
-                      className='size-full object-cover'
-                      onMouseEnter={() => setIsShowingButton(true)}
-                      onMouseLeave={() => setIsShowingButton(false)}
-                    />
-                  )}
-                  <Button
-                    variant='filled'
-                    type='button'
-                    className={cn(
-                      'pointer-events-none z-50 opacity-0',
-                      (!previewUrl || isShowingButton) && 'opacity-100'
-                    )}
-                  >
-                    {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
-                  </Button>
-                </FormLabel>
-                <FormControl>
-                  <input
-                    type='file'
-                    className='hidden'
-                    accept='image/*'
-                    onChange={(e) => {
-                      const file = e.target.files?.[0]
-                      if (file) {
-                        field.onChange(file)
-                      }
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex w-full flex-col gap-3'>
-            <FormField
-              name='name'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ชื่อสินค้า</FormLabel>
-                  <FormControl>
-                    <Input {...field} type='text' placeholder='ชื่อสินค้า' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name='description'
-              control={form.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>รายละเอียด</FormLabel>
-                  <FormControl>
-                    <Textarea {...field} placeholder='รายละเอียด' />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
+    <Dialog>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='mx-auto flex w-full max-w-screen-lg flex-col gap-2.5 p-1.5'
+        >
+          <div className='flex items-center gap-0.5'>
+            <Icon
+              icon={isEditing ? 'bxs:edit' : 'mdi:plus'}
+              width={32}
+              height={32}
             />
+            <Text variant='heading-lg'>
+              {isEditing ? 'แก้ไขสินค้า' : 'วางจำหน่าย Art Toy ใหม่'}
+            </Text>
+          </div>
+
+          <div className='flex w-full flex-col justify-center gap-4 px-1 sm:flex-row sm:px-0'>
             <FormField
-              name='price'
               control={form.control}
+              name='image'
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>ราคา</FormLabel>
-                  <Text variant='md-regular' className='absolute left-3 top-2'>
-                    ฿
-                  </Text>
+                <FormItem className='w-full'>
+                  <FormLabel
+                    isInput={false}
+                    className='relative flex aspect-[1.6/1] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-grey-300'
+                  >
+                    {previewUrl && (
+                      <Image
+                        src={previewUrl}
+                        alt=''
+                        fill
+                        className='size-full object-cover'
+                        onMouseEnter={() => setIsShowingButton(true)}
+                        onMouseLeave={() => setIsShowingButton(false)}
+                      />
+                    )}
+                    <Button
+                      variant='filled'
+                      type='button'
+                      className={cn(
+                        'pointer-events-none z-50 opacity-0',
+                        (!previewUrl || isShowingButton) && 'opacity-100'
+                      )}
+                    >
+                      {previewUrl ? 'เปลี่ยนรูป' : 'เลือกรูป'}
+                    </Button>
+                  </FormLabel>
                   <FormControl>
-                    <Input
-                      {...field}
+                    <input
+                      type='file'
+                      className='hidden'
+                      accept='image/*'
                       onChange={(e) => {
-                        if (e.target.value) {
-                          field.onChange(parseInt(e.target.value))
-                        } else {
-                          field.onChange('')
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          field.onChange(file)
                         }
                       }}
-                      type='number'
-                      placeholder='ราคา'
-                      className='pl-7'
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+
+            <div className='flex w-full flex-col gap-3'>
+              <FormField
+                name='name'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ชื่อสินค้า</FormLabel>
+                    <FormControl>
+                      <Input {...field} type='text' placeholder='ชื่อสินค้า' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='description'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>รายละเอียด</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} placeholder='รายละเอียด' />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name='price'
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>ราคา</FormLabel>
+                    <Text
+                      variant='md-regular'
+                      className='absolute left-3 top-2'
+                    >
+                      ฿
+                    </Text>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        onChange={(e) => {
+                          if (e.target.value) {
+                            field.onChange(parseInt(e.target.value))
+                          } else {
+                            field.onChange('')
+                          }
+                        }}
+                        type='number'
+                        placeholder='ราคา'
+                        className='pl-7'
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </div>
-        </div>
 
-        <div className='mt-auto flex items-center justify-end gap-4'>
-          {isEditing && (
-            <button
-              type='button'
-              className='font-bold text-grey-500 underline'
-              onClick={() => router.back()}
-            >
-              ยกเลิก
-            </button>
-          )}
-          <Button variant='filled' type='submit'>
-            {isEditing ? 'แก้ไข' : 'วางจำหน่าย'}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          <div className='mt-auto flex items-center justify-end gap-4'>
+            {isEditing && (
+              <>
+                <div className='w-full'>
+                  <DialogTrigger asChild>
+                    <Button variant='filled' className='w-14' type='button'>
+                      ลบ
+                    </Button>
+                  </DialogTrigger>
path: client/src/app/product/_components/product-form.tsx
user: login: shalluv
body: ปมนี้อะ

```suggestion
import { DeleteItemDialog }

                  <DeleteItemDialog />
```

```
export function DeleteItemDialog() {
return (
<Dialog>
       <DialogTrigger asChild>
              <Button variant='filled' className='w-14' type='button'>
                      ลบ
              </Button>
       </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            <Text variant='heading-md' className='w-full'>
              ต้องการลบสินค้าหรือไม่
            </Text>
          </DialogTitle>
          <DialogDescription>
            <Text variant='lg-regular' className='text-black'>
              คุณกำลังจะลบสินค้า
              <span className='mx-1 font-bold'>
                {form.getValues('name') || 'ไม่มีชื่อสินค้า'}
              </span>
              <br />
              <span className='text-primary underline'>
                สินค้าของคุณจะหายไปและไม่สามารถกู้คืนได้!!{' '}
              </span>
              <br />
              กรุณาตรวจสอบก่อนยืนยัน
            </Text>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant='filled' onClick={() => handleDeleteProduct()}>
              ลบสินค้า
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>)
}
```
created_at: 2025-03-20T07:03:04Z
author_association: CONTRIBUTOR

PR comments:
user: login: shalluv
created_at: 2025-03-20T05:16:06Z
body: screenshot pls
author_association: CONTRIBUTOR
user: login: SecretKr
created_at: 2025-03-20T06:24:29Z
body: <img width="1124" alt="image" src="https://github.com/user-attachments/assets/1e784baa-1933-485b-8636-1436a3c155ad" />
<img width="1201" alt="image" src="https://github.com/user-attachments/assets/83b80cee-9a8a-40dc-b718-67ad0625a6fc" />

author_association: CONTRIBUTOR