select category and subcategory

src/pages/product/components/BasicInfoSection.tsx

@@ -1,16 +1,16 @@
-import { type FC, useState, useEffect } from 'react'
+import { type FC, useState, useEffect, useMemo } from 'react'
 import type { FormikProps } from 'formik'
 import Input from '@/components/Input'
 import Select from '@/components/Select'
 import Textarea from '@/components/Textarea'
 import Button from '@/components/Button'
 import RadioGroup from '@/components/RadioGroup'
-import type { CreateProductType, ProductVariant } from '../types/Types'
+import type { CreateProductType, ProductVariant, Category } from '../types/Types'
 import { Add, Trash } from 'iconsax-react'
 
 type BasicInfoSectionProps = {
   formik: FormikProps<CreateProductType>
-  categories: Array<{ label: string; value: string }>
+  categories: Category[]
   /** در صفحه ویرایش، اگر کالا تنوع دارد مقدار true پاس داده شود */
   initialHasVariants?: boolean
 }
@@ -19,6 +19,24 @@ const newVariant = (): ProductVariant => ({ value: '', price: 0 })
 
 const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initialHasVariants }) => {
   const [hasVariants, setHasVariants] = useState<boolean>(initialHasVariants ?? false)
+  /** دسته اصلی انتخاب‌شده برای نمایش زیردسته‌ها */
+  const [parentCategoryId, setParentCategoryId] = useState<string>('')
+
+  const mainCategories = useMemo(
+    () => categories.filter((c) => !c.parent).map((c) => ({ label: c.title, value: c.id })),
+    [categories]
+  )
+
+  const selectedParent = useMemo(
+    () => categories.find((c) => c.id === parentCategoryId),
+    [categories, parentCategoryId]
+  )
+
+  const subCategories = useMemo(
+    () =>
+      (selectedParent?.children || []).map((c) => ({ label: c.title, value: c.id })),
+    [selectedParent]
+  )
 
   useEffect(() => {
     if (initialHasVariants !== undefined) {
@@ -26,6 +44,19 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initi
     }
   }, [initialHasVariants])
 
+  /** همگام‌سازی parentCategoryId با categoryId وقتی فرم مقداردهی می‌شود (مثلاً در ویرایش) */
+  useEffect(() => {
+    const catId = formik.values.categoryId
+    if (!catId) return
+    const cat = categories.find((c) => c.id === catId)
+    const child = categories.flatMap((c) => c.children || []).find((ch) => ch.id === catId)
+    if (child) {
+      setParentCategoryId(child.parent || '')
+    } else if (cat && !cat.parent) {
+      setParentCategoryId(catId)
+    }
+  }, [formik.values.categoryId, categories])
+
   const handleHasVariantsChange = (value: string | boolean) => {
     const next = value === true
     setHasVariants(next)
@@ -65,20 +96,44 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initi
         error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
       />
 
-      <div className='mt-5'>
-        <Select
-          items={categories}
-          label='دسته بندی'
-          placeholder='انتخاب کنید'
-          name='categoryId'
-          value={formik.values.categoryId}
-          onChange={(e) => {
-            const value = e.target.value
-            formik.setFieldValue('categoryId', value)
-          }}
-          error_text={formik.touched.categoryId && formik.errors.categoryId ? String(formik.errors.categoryId) : ''}
-        />
+      <div className='mt-5 rowTwoInput flex flex-wrap gap-4'>
+        <div className='flex-1 min-w-[200px]'>
+          <Select
+            items={mainCategories}
+            label='دسته اصلی'
+            placeholder='انتخاب کنید'
+            name='parentCategoryId'
+            value={parentCategoryId}
+            onChange={(e) => {
+              const value = e.target.value
+              setParentCategoryId(value)
+              formik.setFieldValue('categoryId', value)
+            }}
+          />
+        </div>
+        {subCategories.length > 0 && (
+          <div className='flex-1 min-w-[200px]'>
+            <Select
+              items={subCategories}
+              label='زیر دسته'
+              placeholder='انتخاب کنید (اختیاری)'
+              name='subcategoryId'
+              value={
+                subCategories.some((s) => s.value === formik.values.categoryId)
+                  ? formik.values.categoryId
+                  : ''
+              }
+              onChange={(e) => {
+                const value = e.target.value
+                formik.setFieldValue('categoryId', value || parentCategoryId)
+              }}
+            />
+          </div>
+        )}
       </div>
+      {formik.touched.categoryId && formik.errors.categoryId && (
+        <div className='mt-1 text-xs text-red-500'>{formik.errors.categoryId}</div>
+      )}
 
       <div className='mt-5'>
         <Input