Adding Billed To field in Manage Collection.

src/components/collections/ManageCollection.jsx

@@ -16,10 +16,16 @@ import {
 import { formatFileSize, localToUtc } from "../../utils/appUtils";
 import { useCollectionContext } from "../../pages/collections/CollectionPage";
 import { formatDate } from "../../utils/dateUtils";
+import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { useOrganizationsList } from "../../hooks/useOrganization";
 
 const ManageCollection = ({ collectionId, onClose }) => {
   const { data, isError, isLoading, error } = useCollection(collectionId);
   const { projectNames, projectLoading } = useProjectName(true);
+  const { data: organization, isLoading: isLoadingOrganization } =
+    useOrganizationsList(ITEMS_PER_PAGE, 1, true);
+
   const methods = useForm({
     resolver: zodResolver(newCollection),
     defaultValues: defaultCollection,
@@ -138,6 +144,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
         taxAmount: data?.taxAmount,
         basicAmount: data?.basicAmount,
         description: data?.description,
+        billedToId: data?.billedToId,
         attachments: data.attachments
           ? data.attachments.map((doc) => ({
             fileName: doc.fileName,
@@ -163,36 +170,61 @@ const ManageCollection = ({ collectionId, onClose }) => {
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
           <div className="row px-md-1 px-0">
-            <div className="col-12 col-md-6  mb-2">
-              <Label className="form-label" required>
-                Select Project
-              </Label>
-              <select
-                className="form-select form-select-sm"
-                {...register("projectId")}
-              >
-                <option value="">Select Project</option>
-                {projectLoading ? (
-                  <option>Loading...</option>
-                ) : (
-                  projectNames?.map((project) => (
-                    <option key={project.id} value={project.id}>
-                      {project.name}
-                    </option>
-                  ))
-                )}
-              </select>
+            <div className="col-12 col-md-6 mb-2">
+              <SelectProjectField
+                label="Project"
+                required
+                placeholder="Select Project"
+                value={watch("projectId")}
+                onChange={(val) =>
+                  setValue("projectId", val, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  })
+                }
+              />
               {errors.projectId && (
-                <small className="danger-text">
-                  {errors.projectId.message}
-                </small>
+                <small className="danger-text">{errors.projectId.message}</small>
               )}
             </div>
+
+            <div className="col-12 col-md-6 mb-2">
+              <Label htmlFor="name" required>
+                Bill To
+              </Label>
+              <div className="d-flex align-items-center gap-2">
+                <select
+                  className="select2 form-select form-select flex-grow-1"
+                  aria-label="Default select example"
+                  {...register("billedToId", {
+                    required: "Client is required",
+                    valueAsNumber: false,
+                  })}
+                >
+                  {isLoading ? (
+                    <option>Loading...</option>
+                  ) : (
+                    <>
+                      <option value="">Select Client</option>
+                      {organization?.data?.map((org) => (
+                        <option key={org.id} value={org.id}>
+                          {org.name}
+                        </option>
+                      ))}
+                    </>
+                  )}
+                </select>
+              </div>
+              {errors?.clientId && (
+                <span className="danger-text">{errors.billedToId.message}</span>
+              )}
+            </div>
+
             <div className="col-12 col-md-6 mb-2">
               <Label required>Title</Label>
               <input
                 type="text"
-                className="form-control form-control-sm"
+                className="form-control form-control"
                 {...register("title")}
               />
               {errors.title && (
@@ -203,7 +235,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <Label required>Invoice Number</Label>
               <input
                 type="text"
-                className="form-control form-control-sm"
+                className="form-control form-control"
                 {...register("invoiceNumber")}
               />
               {errors.invoiceId && (
@@ -216,7 +248,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <Label required>E-Invoice Number</Label>
               <input
                 type="text"
-                className="form-control form-control-sm"
+                className="form-control form-control"
                 {...register("eInvoiceNumber")}
               />
               {errors.invoiceId && (
@@ -232,6 +264,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 name="invoiceDate"
                 control={control}
                 maxDate={new Date()}
+                size="md"
               />
               {errors.invoiceDate && (
                 <small className="danger-text">
@@ -246,6 +279,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 name="exceptedPaymentDate"
                 control={control}
                 minDate={watch("invoiceDate")}
+                size="md"
               />
               {errors.exceptedPaymentDate && (
                 <small className="danger-text">
@@ -260,6 +294,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 name="clientSubmitedDate"
                 control={control}
                 maxDate={new Date()}
+                size="md"
               />
               {errors.exceptedPaymentDate && (
                 <small className="danger-text">
@@ -275,7 +310,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <input
                 type="number"
                 id="basicAmount"
-                className="form-control form-control-sm"
+                className="form-control form-control"
                 min="1"
                 step="0.01"
                 inputMode="decimal"
@@ -294,7 +329,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <input
                 type="number"
                 id="taxAmount"
-                className="form-control form-control-sm"
+                className="form-control form-control"
                 min="1"
                 step="0.01"
                 inputMode="decimal"
@@ -313,7 +348,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </Label>
                 <textarea
                   id="description"
-                  className="form-control form-control-sm"
+                  className="form-control form-control"
                   {...register("description")}
                   rows="2"
                 ></textarea>

src/components/collections/collectionSchema.jsx

@@ -19,6 +19,7 @@ export const newCollection = z.object({
   invoiceDate: z.string().min(1, { message: "Date is required" }),
   description: z.string().trim().optional(),
   clientSubmitedDate: z.string().min(1, { message: "Date is required" }),
+  billedToId: z.string().min(1, { message: "Date is required" }),
   exceptedPaymentDate: z.string().min(1, { message: "Date is required" }),
   invoiceNumber: z
     .string()
@@ -75,6 +76,7 @@ export const defaultCollection = {
   taxAmount: "",
   basicAmount: "",
   description: "",
+  billedToId:"",
   attachments: [],
 };