Supplier Dashboard

The SupplierDashboard is the main overview page for suppliers using the Rifbid platform. It provides an organized view of important metrics, upcoming deadlines, new opportunities, and analytics.

---

Features

• Welcome Banner: Personalized greeting with the ability to upload and update a company logo.
• Performance Summary: Key statistics such as total proposals generated, contracts saved, and other business insights.
• New Opportunities: Suggested tenders based on the supplier’s industry.
• Upcoming Deadlines: List of saved contracts with expiry dates and countdowns.
• Bid Analytics: Graphical representation of tenders per category using a bar chart.
• Tenders by Country: Displays tenders filtered by country and tender counts for popular countries.

---

Component Breakdown

Welcome Banner

The WelcomeBanner provides a personalized greeting for the supplier and allows them to upload or change their company logo.

Key Features:

• Displays the supplier’s name or “Supplier” as a fallback.
• Allows updating the company logo, which is saved in Firebase Storage and updated in the supplier profile.

Code Snippet:

<Image
  src={logoUrl}
  alt="Company logo"
  width={100}
  height={100}
  className="rounded-lg"
/>
<input
  type="file"
  ref={fileInputRef}
  onChange={handleFileChange}
  accept="image/*"
  className="hidden rounded-lg"
/>

Performance Summary

The PerformanceSummary component provides an overview of key metrics for the supplier’s activity on the Rifbid platform.

Features:

• Displays the total number of proposals generated by the supplier.
• Shows the total contracts saved in the supplier’s profile.
• Placeholder for total revenue data.

Code Highlights:

1. Total Proposals Generated:
   • Uses generated_proposals from the supplier’s supporting documents to calculate the total.

   const supportingDocs =
     supplierProfile?.supplier_supporting_documents;
   const totalProposalsGenerated = supportingDocs?.generated_proposals?.length || 0;

2. Total Contracts Saved:
   • Counts the saved contracts in the supplier profile.

  const totalSavedContracts = supplierProfile?.saved_contracts?.length || 0;

3. Total Revenue:
   • Placeholder for future revenue data.

New Opportunities

The NewOpportunities component suggests tenders based on the supplier’s industry.

Features:

• Fetches tender data from the API using the supplier’s industry.
• Displays suggested tenders with titles and formatted closing dates.

Code Highlights:

1. Fetching Tenders:
   • Calls the API with the supplier’s industry to retrieve relevant tenders.

   const url = `${process.env.NEXT_PUBLIC_API_URL}/tenders?industry=${encodedIndustry}&items_per_page=5`;
    const response = await axios.get(url, { headers });
    setSuggestedTenders(response.data.tenders || []);

Upcoming Deadlines

The UpcomingDeadlines component lists saved contracts and their expiry dates.

Features:

• Displays contracts sorted by expiry date.
• Formats expiry status with messages like “Expires in X days” or “Expired.”

Code Highlights:

1. Sorting Contracts:
   • Contracts are sorted by their expiry date.

 sortedContracts = [...supplierProfile.saved_contracts].sort(
  (a, b) => new Date(a.expiry_date) - new Date(b.expiry_date)
);

2. Formatting Expiry Status:
   • Calculates the number of days remaining until expiry.

const calculateDaysRemaining = (expiryDate) => {
  const diffDays = Math.ceil((new Date(expiryDate) - new Date()) / (1000 * 60 * 60 * 24));
  return diffDays;
};
     const formatDaysRemaining = (days) => {
     if (days < 0) return "Expired";
     if (days === 0) return "Expires today";
     if (days === 1) return "Expires tomorrow";
     if (days < 7) return `Expires in ${days} days`;
     if (days < 30) return `Expires in ${Math.floor(days / 7)} weeks`;
     return `Expires in ${Math.floor(days / 30)} months`;
   };

Bid Analytics

The BidAnalytics component provides a visual representation of tenders per category using a bar chart.

Features:

• Fetches tender data grouped by category from the API.
• Displays the data in a bar chart using chart.js.

Code Highlights:

1. Fetching Analytics Data:
   • Retrieves the number of tenders per category from the API.

   const response = await axios.get(
  `${process.env.NEXT_PUBLIC_API_URL}/tenders/categories`,
  { headers: { Authorization: `Bearer ${token}` } }
);
setTendersPerCategory(response.data);

Tenders By Country

The TendersByCountry component allows suppliers to view tenders filtered by country and displays tender counts for popular countries.

Features:

• Fetches and displays tender counts for popular and user-detected countries.
• Allows filtering tenders by a selected country.

Code Highlights:

1. Fetching Tenders for a Selected Country:
   • Fetches tenders based on the selected country.

   const fetchTenders = async () => {
  const response = await axios.get(
    `${process.env.NEXT_PUBLIC_API_URL}/tenders/by-country?country=${selectedCountry}`
  );
  setTenders(response.data.tenders);
};