ContractItem Component

ContractItem Component Documentation

Overview

The ContractItem component in the Rifbid application is responsible for fetching and displaying a list of contracts based on filters applied by users. It supports both keyword-based and semantic searches, dynamically calculates matching scores, and displays contract details in a user-friendly card layout.

---

Key Features

1. Dynamic Contract Fetching:

   • Retrieves contracts using filters like industry, country, agency, and search terms.
   • Supports both standard and semantic searches.

2. Matching Score Calculation:

   • Uses cosine similarity to compute and display a matching score for each contract based on the supplier’s profile.

3. User Engagement Tracking:

   • Tracks user interactions such as viewing contract details and pagination clicks.

4. Pagination:

   • Enables navigation through multiple pages of contract results.

5. Responsive Design:

   • Adjusts layout and content display for a variety of device sizes.

6. Error Handling:

   • Displays appropriate messages when no contracts match the applied filters or when an error occurs.

---

Dependencies

• React: For managing the component’s state and rendering UI.
• Axios: For making HTTP requests to the API.
• Next.js: For routing and navigation.
• Lucide Icons: For spinners and other UI elements.
• Custom UI Components: Card, Button, Pagination, Progress, etc.
• Utility Functions:
  • cosineSimilarity and vectorizeText for calculating matching scores.
  • formatDate for formatting contract dates.
  • stripHTML for cleaning up contract descriptions.

---

Props

The ContractItem component accepts the following props:

Prop Name	Type	Description
industry	string	The industry filter applied to the contracts.
country	string	The country filter applied to the contracts.
pageNumber	number	Current page number for pagination.
setPageNumber	Dispatch<SetStateAction<number>>	Function to update the current page number.
queryUrlString	string	Query string for passing filters to the API.
userId	string (optional)	ID of the currently logged-in user.
agency	string	Agency filter applied to the contracts.
hasUrlFilters	boolean	Determines if filters have been applied.
semanticSearch	string	Semantic search query term.
toggleFilters	() => void	Function to toggle the filter panel or update filters.

---

State Management

The component uses useState and useEffect hooks to manage state and fetch data:

State Variable	Type	Description
contracts	ContractProps[]	List of contracts fetched from the API.
isLoading	boolean	Indicates whether the component is loading.
totalContracts	number	Total number of contracts available.
isSearchLimitReached	boolean	Indicates if the semantic search limit is hit.

---

Matching Score Calculation

Uses cosine similarity to calculate how well a contract matches the supplier’s profile.

Logic:

1. Converts the supplier profile and tender description into vector representations using vectorizeText.
2. Calculates similarity using cosineSimilarity.
3. Boosts scores to emphasize higher matches:
   • Scores above 85% are set to 99%.
   • Medium matches are boosted by 15%.
   • Low matches are adjusted to provide a higher base score.

---

Rendering Contracts

Each contract is displayed in a card format with the following details:

• Title
• Agency
• Location
• Description
• Matching Score
• Submission Deadline

”See More” Button

Navigates to the contract’s details page and tracks the click for user engagement.

---

Error and No Results Handling

1. No Results:

   • Displays a message with suggestions to adjust filters.
   • Includes a button to toggle filter options.

2. Loading State:

   • Displays a spinner while contracts are being fetched.

---

Pagination

The component uses a custom Pagination component to navigate between pages. It updates the pageNumber state and re-fetches data for the selected page.

---

Key Functions

Function	Description
fetchContracts	Fetches contracts from the API using filters and updates the state.
calculateMatchingScore	Computes a similarity score between the supplier profile and the contract.
renderDescription	Truncates and cleans up contract descriptions for display.
handleSeeMore	Tracks engagement and navigates to the contract details page.

---

Conclusion

The ContractItem component is a robust and versatile feature for displaying and managing contracts in the Rifbid application. It integrates advanced matching algorithms, user engagement tracking, and responsive design to deliver an intuitive experience for suppliers. For further details, refer to the source code in the project repository.