taks-d.2.1

src/features/crm/enquiries/components/enquiry-form-sheet.tsx

@@ -2,10 +2,14 @@
 
 import * as React from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
+import {
+  ProjectPartiesEditor,
+  type ProjectPartyEditorItem
+} from '@/features/crm/components/project-parties-editor';
 import {
   Select,
   SelectContent,
@@ -22,6 +26,7 @@ import {
   SheetTitle
 } from '@/components/ui/sheet';
 import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
+import { enquiryProjectPartiesOptions } from '../api/queries';
 import { createEnquiryMutation, updateEnquiryMutation } from '../api/mutations';
 import type { EnquiryMutationPayload, EnquiryRecord, EnquiryReferenceData } from '../api/types';
 import { enquirySchema, type EnquiryFormValues } from '../schemas/enquiry.schema';
@@ -72,8 +77,13 @@ export function EnquiryFormSheet({
     [enquiry, referenceData]
   );
   const [selectedCustomerId, setSelectedCustomerId] = useState(defaultValues.customerId);
+  const [projectParties, setProjectParties] = useState<ProjectPartyEditorItem[]>([]);
   const { FormTextField, FormTextareaField, FormSelectField, FormSwitchField } =
     useFormFields<EnquiryFormValues>();
+  const projectPartiesQuery = useQuery({
+    ...enquiryProjectPartiesOptions(enquiry?.id ?? ''),
+    enabled: open && !!enquiry?.id
+  });
 
   const createMutation = useMutation({
     ...createEnquiryMutation,
@@ -127,7 +137,14 @@ export function EnquiryFormSheet({
         source: value.source,
         isHotProject: value.isHotProject ?? false,
         notes: value.notes,
-        isActive: value.isActive ?? true
+        isActive: value.isActive ?? true,
+        projectParties: projectParties
+          .filter((item) => item.customerId && item.role)
+          .map((item) => ({
+            customerId: item.customerId,
+            role: item.role,
+            remark: item.remark || null
+          }))
       };
 
       if (isEdit && enquiry) {
@@ -146,7 +163,17 @@ export function EnquiryFormSheet({
 
     setSelectedCustomerId(defaultValues.customerId);
     form.reset(defaultValues);
-  }, [defaultValues, form, open]);
+    setProjectParties(
+      enquiry
+        ? (projectPartiesQuery.data?.items ?? []).map((item) => ({
+            key: item.id,
+            customerId: item.customerId,
+            role: item.role,
+            remark: item.remark ?? ''
+          }))
+        : []
+    );
+  }, [defaultValues, enquiry, form, open, projectPartiesQuery.data?.items]);
 
   const isPending = createMutation.isPending || updateMutation.isPending;
 
@@ -168,7 +195,7 @@ export function EnquiryFormSheet({
                 children={(field) => (
                   <field.FieldSet>
                     <field.Field>
-                      <field.FieldLabel>Customer *</field.FieldLabel>
+                      <field.FieldLabel>Billing Customer *</field.FieldLabel>
                       <Select
                         value={field.state.value ?? ''}
                         onValueChange={(value) => {
@@ -340,6 +367,14 @@ export function EnquiryFormSheet({
                   description='Inactive enquiries stay in history but should not progress further.'
                 />
               </div>
+              <div className='md:col-span-2'>
+                <ProjectPartiesEditor
+                  customers={referenceData.customers}
+                  roles={referenceData.projectPartyRoles}
+                  items={projectParties}
+                  onChange={setProjectParties}
+                />
+              </div>
             </form.Form>
           </form.AppForm>
         </div>