src/components/collections/ManageCollection.jsx

@@ -16,16 +16,10 @@ 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,
@@ -144,7 +138,6 @@ 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,
@@ -170,61 +163,36 @@ 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">
-              <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>
-              )}
-            </div>
-
-            <div className="col-12 col-md-6 mb-2">
-              <Label htmlFor="name" required>
-                Bill To
+            <div className="col-12 col-md-6  mb-2">
+              <Label className="form-label" required>
+                Select Project
               </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>
+              <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>
+              {errors.projectId && (
+                <small className="danger-text">
+                  {errors.projectId.message}
+                </small>
               )}
             </div>
-
             <div className="col-12 col-md-6 mb-2">
               <Label required>Title</Label>
               <input
                 type="text"
-                className="form-control form-control"
+                className="form-control form-control-sm"
                 {...register("title")}
               />
               {errors.title && (
@@ -235,7 +203,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <Label required>Invoice Number</Label>
               <input
                 type="text"
-                className="form-control form-control"
+                className="form-control form-control-sm"
                 {...register("invoiceNumber")}
               />
               {errors.invoiceId && (
@@ -248,7 +216,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <Label required>E-Invoice Number</Label>
               <input
                 type="text"
-                className="form-control form-control"
+                className="form-control form-control-sm"
                 {...register("eInvoiceNumber")}
               />
               {errors.invoiceId && (
@@ -264,7 +232,6 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 name="invoiceDate"
                 control={control}
                 maxDate={new Date()}
-                size="md"
               />
               {errors.invoiceDate && (
                 <small className="danger-text">
@@ -279,7 +246,6 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 name="exceptedPaymentDate"
                 control={control}
                 minDate={watch("invoiceDate")}
-                size="md"
               />
               {errors.exceptedPaymentDate && (
                 <small className="danger-text">
@@ -294,7 +260,6 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 name="clientSubmitedDate"
                 control={control}
                 maxDate={new Date()}
-                size="md"
               />
               {errors.exceptedPaymentDate && (
                 <small className="danger-text">
@@ -310,7 +275,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <input
                 type="number"
                 id="basicAmount"
-                className="form-control form-control"
+                className="form-control form-control-sm"
                 min="1"
                 step="0.01"
                 inputMode="decimal"
@@ -329,7 +294,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               <input
                 type="number"
                 id="taxAmount"
-                className="form-control form-control"
+                className="form-control form-control-sm"
                 min="1"
                 step="0.01"
                 inputMode="decimal"
@@ -348,7 +313,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </Label>
                 <textarea
                   id="description"
-                  className="form-control form-control"
+                  className="form-control form-control-sm"
                   {...register("description")}
                   rows="2"
                 ></textarea>

src/components/collections/collectionSchema.jsx

@@ -19,7 +19,6 @@ 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()
@@ -76,7 +75,6 @@ export const defaultCollection = {
   taxAmount: "",
   basicAmount: "",
   description: "",
-  billedToId:"",
   attachments: [],
 };