hotfix-add subgroup customer

src/features/crm/customers/components/customer-form-sheet.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useEffect, useMemo } from 'react';
+import { useStore } from '@tanstack/react-form';
 import { useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { Icons } from '@/components/icons';
@@ -49,6 +50,7 @@ function toDefaultValues(
     website: customer?.website ?? '',
     leadChannel: customer?.leadChannel ?? undefined,
     customerGroup: customer?.customerGroup ?? undefined,
+    customerSubGroup: customer?.customerSubGroup ?? undefined,
     notes: customer?.notes ?? '',
     isActive: customer?.isActive ?? true
   };
@@ -98,7 +100,8 @@ export function CustomerFormSheet({
         ...value,
         branchId: value.branchId || null,
         leadChannel: value.leadChannel || null,
-        customerGroup: value.customerGroup || null
+        customerGroup: value.customerGroup || null,
+        customerSubGroup: value.customerSubGroup || null
       };
 
       if (isEdit && customer) {
@@ -117,6 +120,25 @@ export function CustomerFormSheet({
 
     form.reset(defaultValues);
   }, [defaultValues, form, open]);
+  const selectedCustomerGroup = useStore(form.store, (state) => state.values.customerGroup);
+  const selectedCustomerSubGroup = useStore(form.store, (state) => state.values.customerSubGroup);
+  const filteredCustomerSubGroups = useMemo(
+    () =>
+      referenceData.customerSubGroups.filter((item) => item.parentId === selectedCustomerGroup),
+    [referenceData.customerSubGroups, selectedCustomerGroup]
+  );
+
+  useEffect(() => {
+    if (!selectedCustomerSubGroup) {
+      return;
+    }
+
+    const isValid = filteredCustomerSubGroups.some((item) => item.id === selectedCustomerSubGroup);
+
+    if (!isValid) {
+      form.setFieldValue('customerSubGroup', '');
+    }
+  }, [filteredCustomerSubGroups, form, selectedCustomerSubGroup]);
 
   const isPending = createMutation.isPending || updateMutation.isPending;
 
@@ -193,6 +215,18 @@ export function CustomerFormSheet({
                   label: item.label
                 }))}
               />
+              <FormSelectField
+                name='customerSubGroup'
+                label='Customer Sub Group'
+                disabled={!selectedCustomerGroup}
+                placeholder={
+                  selectedCustomerGroup ? 'Select customer sub group' : 'Select customer group first'
+                }
+                options={filteredCustomerSubGroups.map((item) => ({
+                  value: item.id,
+                  label: item.label
+                }))}
+              />
               <div className='md:col-span-2'>
                 <FormTextField name='address' label='Address' placeholder='123 Main Road' />
               </div>