Tender Evaluation and Notice Management

Key Features

1. Multi-Step Evaluation Process

   • Implements a tab-based UI with EOI Evaluation Overview, EOI Evaluation Report, Unsuccessful Notices, Successful Notices, and Notices Submission.

2. Dynamic Tab Activation

   • Each tab corresponds to a distinct component, activated based on the currentTab state. Examples:
     • EOIEvaluationOverview for step 1.
     • SuccessfulNotices for step 4.

3. Data Management with Redux

   • Uses useSelector for accessing user-related state, providing seamless integration with the Redux store.

4. Server Interaction for Tender and Evaluation Data

   • Fetches data using services (userService, tenderService, etc.) with useEffect triggers.

5. Dynamic PDF and Word Generation

   • Handles creation and download of dynamic PDFs and Word documents using documentService.

6. Progress Tracking

   • Includes a reusable TenderProgressBar component to visualize the active step in the process.

7. Form Submission and Feedback

   • Supports submitting evaluation data (finalSubmit) with isSubmitting state to manage the process.

8. State Initialization and Management

   • Maintains detailed local states (tenderDetails, evaluationData, successFullBidder, etc.) for dynamic behavior.

---

Key Functionalities

1. Dynamic Tab Rendering

   <div className="mt-5 rounded-md bg-slate-100 p-2">
       {tabs.map((tab, index) => (
           <button
               key={index}
               className={`me-5 rounded-md font-bold ${index === currentTab ? "bg-black text-white" : "bg-slate-100 text-black"
                   } p-2 text-xs`}
               onClick={() => setCurrentTab(index)}
           >
               {tab}
           </button>
       ))}
   </div>

   • Activates components based on the currentTab. For example:
     • currentTab === 0 → EOIEvaluationOverview.
     • currentTab === 1 → EOIEvaluationReport.

2. Fetching Tender Data

   useEffect(() => {
       if (TenderIdParam) {
           const fetchTender = async () => {
               setLoading(true);
               try {
                   const [evaluatorList, tenderDetailsResponse] = await Promise.all([
                       userService.getEvaluators(user?.organization_id),
                       tenderService.getTenderBySerialId(TenderIdParam),
                   ]);
                   setTenderDetails(tenderDetailsResponse.tender);
                   setEvaluatorList(evaluatorList);
               } catch (error) {
                   console.error("Error in fetchTender:", error);
               } finally {
                   setLoading(false);
               }
           };
           fetchTender();
       }
   }, [TenderIdParam]);

   • Fetches and stores evaluator and tender details in state.

3. File Operation for Document Management

   const handleFileOperation = async () => {
       try {
           const fileDownload = await documentService.editWordDocument({
               values_to_change: generateWordDocx,
               file_path: dynamicFieldsFEE.document_link,
               file_name: `tender_${TenderIdParam}_Request_for_Fee_Proposal_and_Methodology.docx`,
           });
           if (fileDownload.status) {
               const link = document.createElement('a');
               link.href = fileDownload.file_path;
               link.setAttribute('download', fileDownload.file_name);
               document.body.appendChild(link);
               link.click();
               document.body.removeChild(link);
           }
       } catch (error) {
           console.error("Error in file operation:", error);
       }
   };

   • Generates and downloads Word documents dynamically.

4. Final Submission

   const finalSubmit = async () => {
       setIsSubmitting(true);
       try {
           const create = await tenderAwards.createManagerEvaluation(evaluateManagerRequest);
           toast.success('Submitted successfully!');
           router.push('/my-requests');
       } catch (error) {
           toast.error('Failed to submit. Please try again.');
       } finally {
           setIsSubmitting(false);
       }
   };

   • Submits evaluation data and navigates to a different route on success.

---

Data Fetching and Step Handling

1. Data Fetching

   • Triggered via useEffect:
     • Tender ID is extracted from searchParams and used to fetch data (tenderService.getTenderBySerialId, etc.).
   • Fetching Multiple Resources:

     const [evaluatorList, tenderDetailsResponse] = await Promise.all([
         userService.getEvaluators(organization_id),
         tenderService.getTenderBySerialId(TenderIdParam),
     ]);

     • Parallel API requests improve efficiency.

2. Step Handling

   • State-Driven Tab Management:

     const nextPage = () => {
         setCurrentTab(currentTab + 1);
     };

     • Advances the process by incrementing currentTab.

   • Dynamic Rendering of Components:

     {currentTab === 0 && <EOIEvaluationOverview nextPage={nextPage} />}
     {currentTab === 1 && <EOIEvaluationReport />}
     {currentTab === 4 && <NoticeSubmission finalSubmit={finalSubmit} />}

3. Data Usage Across Steps

   • Maintains shared data in state (evaluationData, awardedPersion) and passes it as props to components.
     Example:

   <UnsuccessfulNotices notAwardedPersons={notAwardedPersons} />

---

Active Components Based on Steps

• Step 0 (Tab 0):

  • Component: EOIEvaluationOverview
  • Purpose: Displays evaluation overview and evaluator details.

• Step 1 (Tab 1):

  • Component: EOIEvaluationReport
  • Purpose: Shows detailed evaluation reports.

• Step 2 (Tab 2):

  • Component: UnsuccessfulNotices
  • Purpose: Handles notices for unsuccessful bidders.

• Step 3 (Tab 3):

  • Component: SuccessfulNotices
  • Purpose: Prepares notices for successful bidders.

• Step 4 (Tab 4):

  • Component: NoticeSubmission
  • Purpose: Manages final submission, including file operations.

---

This modular architecture ensures a clean separation of concerns, scalability, and a streamlined user experience.