Admin Dashboard Component

Overview

The AdminDashboard component provides administrators with a comprehensive view of platform metrics, user statistics, engagement data, and financial performance. It enables filtering and displays detailed insights to support operational decisions. Data is retrieved from Firebase Firestore and other APIs.

Key Features

Dynamic Metrics:
- Displays key statistics such as total users, paid users, free trial users, and free users.
- Financial metrics including Monthly Recurring Revenue (MRR), conversion rates, and churn rates.
- Engagement metrics such as tenders scraped, searches, applications, email recommendations, and customer satisfaction.
Interactive Filtering:
- Administrators can filter and toggle between views for:
  - Latest Suppliers
  - Top Engagers
  - Apply Button Clicks
Data Tracking:
- Tracks engagement data, including apply button clicks and email recommendations.
Component Modularity:
- Modular components like AdminStats, LatestSuppliers, and TopEngagers encapsulate functionality for better maintainability.

Dependencies

React: Core framework for component rendering.
Firebase: Authentication and Firestore database interactions.
Axios: For making API requests.
Lucide-React: For icons used in metrics cards.
Custom UI Components: Card, Input, Button, etc.

Component Structure

AdminDashboard

State Variables	Type	Description
`token`	`string`	Stores the Firebase authentication token.
`list`	`string`	Determines the current view (`"latest suppliers"`, `"top engagers"`, etc.).

UseEffect Hooks:

Retrieves the authentication token when the component is mounted.

Conditional Rendering:

Based on list, renders LatestSuppliers, TopEngagers, or ApplyBtnClicks.

return (
  <div className="flex min-h-screen w-full flex-col">
    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
      <AdminStats token={token} />
      <div className="text-right">
        <select
          onChange={(e) => setList(e.target.value)}
          className="form-select rounded px-4 py-2"
          id="list-item"
          value={list}
        >
          <option value="latest suppliers">Latest Subscriptions</option>
          <option value="top engagers">Top Engagers</option>
          <option value="apply btn clicks">Apply Btn Clicks</option>
        </select>
      </div>
      {list === "latest suppliers" && <LatestSuppliers token={token} />}
      {list === "top engagers" && <TopEngagers token={token} />}
      {list === "apply btn clicks" && <ApplyBtnClicks token={token} />}
    </main>
  </div>
);

AdminStats Component

Key Features

Displays platform metrics in a structured grid layout using cards.
Metrics include:
- Total Users
- Free Users
- Free Trial Users
- Paid Users
- Monthly Recurring Revenue (MRR)
- Conversion Rates
- Churn Rates (Gross and Net)
- Engagement Scores
- Searches (Regular and Semantic)
- Applications
- Customer Satisfaction Scores
- Email Recommendations
- Invites Sent
- New Sign-ups from Invites

State Variables

State Variable	Type	Description
`totalUsers`	`number`	Total number of users on the platform.
`freeUsers`	`number`	Count of users on the free tier.
`freeTrialUsers`	`number`	Count of users on a free trial.
`paidUsers`	`number`	Count of users on the paid tier.
`mrr`	`number`	Monthly Recurring Revenue.
`churnRate`	`number`	Overall churn rate of users.
`netRevenueChurnRate`	`number`	Churn rate calculated based on net revenue.
`grossRevenueChurnRate`	`number`	Churn rate calculated based on gross revenue.
`engagementScore`	`number`	Overall engagement score of users.
`tendersScraped`	`number`	Count of tenders scraped for platform use.
`regularSearches`	`number`	Number of regular searches performed by users.
`applyButtonClickedCount`	`number`	Count of apply button clicks.
`emailRecommendations`	`number`	Count of email recommendations sent.
`invitesSent`	`number`	Number of invites sent to prospective users.
`newSignUpsFromInvite`	`number`	Count of new sign-ups generated via invites.

Cards for Metrics

Metric	Icon	Description
Total Users	`Users`	Total users registered on the platform.
Free Users	`Users`	Users on the free plan.
Free Trial Users	`Users`	Users currently in the free trial period.
Paid Users	`CreditCard`	Users subscribed to paid plans.
Tenders Scraped	`FileBadge`	Total tenders available on the platform.
MRR	`DollarSign`	Monthly Recurring Revenue in USD.
Conversion Rate	`Filter`	Percentage of free users converted to paid users.
Churn Rate	`Unlink`	Percentage of users leaving the platform.
Net Revenue Churn Rate	`Unlink`	Churn rate calculated using net revenue.
Gross Revenue Churn Rate	`Unlink`	Churn rate calculated using gross revenue.
Engagement Score	`MailPlus`	Average engagement score across all users.
Regular Searches	`Search`	Total regular searches performed by users.
Semantic Searches	`Search`	Total semantic searches performed.
Applications	`FileBadge`	Number of applications submitted via the platform.
Email Recommendations	`Mail`	Number of recommendations sent via email.
Customer Satisfaction	`Smile`	Aggregated customer satisfaction score.
Invites Sent	`MailPlus`	Total invitations sent by users.
New Sign-ups from Invites	`MailPlus`	Users who signed up via an invitation.

Functional Highlights

Dynamic Data Retrieval:
- Metrics are retrieved dynamically from Firebase and API endpoints.
- Data includes real-time updates for user engagement and platform activity.
Semantic and Regular Search Metrics:
- Includes counts for both semantic and regular searches.
- Helps administrators understand search behavior on the platform.
Visual Representation:
- Metrics are displayed in visually distinct cards for better readability.
- Iconography helps in quick identification of metrics.
Financial and User Retention Metrics:
- MRR and churn rates provide insight into platform profitability.
- Conversion rates track free-to-paid user transitions.

Data Fetching

Fetching from Firebase

Admin KPIs such as:
- Apply button clicks
- Regular and semantic searches
- Email recommendations
These metrics are retrieved from the adminkpis collection in Firebase Firestore.

Fetching from External API

Metrics like:
- Monthly Recurring Revenue (MRR)
- Conversion rates
- Churn rates (Gross and Net)
These are fetched via API calls using the getDashboardData function.

CSV Export Functions

Admins can export data as CSV files for external analysis.
Available exports include:
1. Supplier List: Contains information about all registered suppliers.
2. Apply Button Click Information: Details on recent apply button interactions.

Modular Components

Component	Description
AdminStats	Displays overall platform metrics in a grid layout using cards.
LatestSuppliers	Shows a table of the most recent supplier sign-ups.
TopEngagers	Displays a list of users with the highest engagement scores.
ApplyBtnClicks	Displays detailed information about recent apply button clicks.

Conclusion

The AdminDashboard component provides a robust overview of platform operations, supporting data-driven decisions for improving engagement and user retention. Modular components and interactive filtering enhance maintainability and usability. For further details, refer to the component’s source code in the project repository.