component-level-prd

Component-Level Product Requirements

Document
Overview
This document provides a detailed technical breakdown of each page in the Infinity Pass
application, including components, API endpoints, states, and navigation flows. It serves as a
companion to the main Product Requirements Document, offering implementation-specific
details for engineering teams.

Table of Contents
1. Platform Admin Pages
2. Company Admin Pages
3. User Pages
4. Authentication Pages
5. Navigation Flows
6. Shared Components

Platform Admin Pages

Dashboard
Route: /platform/dashboard
Access: Platform Admin role
Purpose: Primary administrative overview of platform metrics and activities
Components:
DashboardHeader : Title and date filter controls
StatCards : Key metric cards (Users, Companies, Revenue, etc.)
RevenueChart : Line chart showing revenue over time
RecentTransactionsTable : Paginated table of recent transactions
RecentUsersTable : Paginated table of newly registered users
PlatformActivityFeed : Timeline of important platform events
 API Endpoints:
GET /api/dashboard-stats : Fetch aggregated platform statistics
GET /api/recent-transactions : Fetch paginated recent transactions
GET /api/recent-users : Fetch paginated new user registrations
GET /api/platform-activities : Fetch recent platform activities
States/Props:
Date range filter state (Today, Week, Month, Custom)
Loading states for each data section
Error states for API failures
Pagination state for tables

Companies
Route: /platform/companies
Access: Platform Admin role
Purpose: Manage companies registered on the platform
Components:
CompaniesHeader : Title, search bar, and add company button
CompaniesFilters : Filter by status, industry, date joined, etc.
CompaniesTable : Paginated table of companies with sortable columns
CompanyDetailsDialog : Modal for viewing detailed company information
API Endpoints:
GET /api/companies : Fetch paginated, filtered companies
POST /api/companies : Create new company
GET /api/companies/:id : Fetch single company details
States/Props:
Filter/search state
Selected company state
Table sorting state
Pagination state
Modal visibility state

Company Detail
Route: /platform/companies/:id
Access: Platform Admin role
Purpose: View and edit detailed information for a specific company
Components:
 CompanyHeader : Company name, logo, status badge, and action buttons
CompanyDetailTabs : Tabs for different sections (Overview, Offers, Tools, etc.)
CompanyOverviewPanel : General company information and metrics
CompanyOffersPanel : Offers created by this company
CompanyToolsPanel : AI tools provided by this company
CompanyAdminsPanel : Company administrators list and management
CompanyPayoutsPanel : History of payouts to the company
CompanyActivityTimeline : Timeline of company-related activities
API Endpoints:
GET /api/companies/:id : Fetch company details
PUT /api/companies/:id : Update company details
GET /api/companies/:id/offers : Fetch company's offers
GET /api/companies/:id/tools : Fetch company's tools
GET /api/companies/:id/admins : Fetch company's admin users
GET /api/companies/:id/payouts : Fetch company's payout history
GET /api/companies/:id/activities : Fetch company activities
States/Props:
Active tab state
Edit mode state
Form validation states
Loading states for each data section
Error states for API failures

Create Company
Route: /platform/companies/create
Access: Platform Admin role
Purpose: Create a new company record
Components:
CreateCompanyHeader : Title and form instructions
CompanyForm : Form with company details fields
LogoUploader : Component for uploading company logo
AdminInviteSection : Section to invite initial company admins
API Endpoints:
POST /api/companies : Create new company
POST /api/file-upload : Upload company logo
POST /api/admin-invitations : Send invitations to company admins
 States/Props:
Form field states and validation
Logo upload state (uploading, success, error)
Admin invitation list state
Form submission state (submitting, success, error)

Tools
Route: /platform/tools
Access: Platform Admin role
Purpose: Manage AI tools registered on the platform
Components:
ToolsHeader : Title, search bar, filters
ToolsFilters : Filter by company, status, category, etc.
ToolsTable : Paginated table of AI tools with sortable columns
ToolDetailDialog : Modal for viewing tool details
ToolAttributeManager : Interface for managing tool attributes and categories
API Endpoints:
GET /api/tools : Fetch paginated, filtered tools list
GET /api/tools/:id : Fetch single tool details
PUT /api/tools/:id/status : Update tool status
GET /api/tool-attributes : Fetch tool attribute categories
POST/PUT/DELETE /api/tool-attributes : Manage tool attributes
States/Props:
Filter/search state
Selected tool state
Table sorting state
Pagination state
Modal visibility state

Offers
Route: /platform/offers
Access: Platform Admin role
Purpose: Manage offers created by companies
Components:
OffersHeader : Title, search bar, filters
OffersFilters : Filter by company, status, credit requirement, etc.
 OffersTable : Paginated table of offers with sortable columns
OfferDetailDialog : Modal for viewing offer details
API Endpoints:
GET /api/offers : Fetch paginated, filtered offers list
GET /api/offers/:id : Fetch single offer details
PUT /api/offers/:id/status : Update offer status
States/Props:
Filter/search state
Selected offer state
Table sorting state
Pagination state
Modal visibility state

Credits
Route: /platform/credits
Access: Platform Admin role
Purpose: Manage platform credits system and credit transactions
Components:
CreditsHeader : Title and summary statistics
CreditsMetricsCards : Cards showing credit circulation, expiration stats
CreditTransactionsTable : Paginated table of credit transactions
CreditExpirationChart : Chart showing upcoming credit expirations
ManualCreditAdjustmentForm : Form for manually adjusting user credits
API Endpoints:
GET /api/credit-metrics : Fetch credit system metrics
GET /api/credit-transactions : Fetch paginated transaction history
GET /api/credit-expirations : Fetch upcoming credit expirations
POST /api/credit-adjustments : Create manual credit adjustment
States/Props:
Date range filter state
Transaction filter state
Credit adjustment form state
Pagination state for tables
Loading states for each data section

Redemptions
 Route: /platform/redemptions
Access: Platform Admin role
Purpose: Track and manage offer redemptions by users
Components:
RedemptionsHeader : Title, search bar, filters
RedemptionsFilters : Filter by company, offer, date range, status, etc.
RedemptionsTable : Paginated table of redemptions with sortable columns
RedemptionDetailDialog : Modal for viewing redemption details
API Endpoints:
GET /api/redemptions : Fetch paginated, filtered redemptions
GET /api/redemptions/:id : Fetch single redemption details
PUT /api/redemptions/:id/refund : Process redemption refund
States/Props:
Filter/search state
Selected redemption state
Table sorting state
Pagination state
Modal visibility state

Payouts
Route: /platform/payouts
Access: Platform Admin role
Purpose: Manage payouts to companies
Components:
PayoutsHeader : Title, summary statistics, create payout button
PayoutsFilters : Filter by company, status, date range, etc.
PayoutsTable : Paginated table of payouts with sortable columns
PayoutDetailDialog : Modal for viewing payout details
CreatePayoutForm : Form for creating new payouts
API Endpoints:
GET /api/payouts : Fetch paginated, filtered payouts
GET /api/payouts/:id : Fetch single payout details
POST /api/payouts : Create new payout
PUT /api/payouts/:id/status : Update payout status
States/Props:
Filter/search state
 Selected payout state
Table sorting state
Pagination state
Modal visibility state
Payout creation form state

Payout Detail
Route: /platform/payouts/:payoutId
Access: Platform Admin role
Purpose: View and manage a specific payout
Components:
PayoutHeader : Payout ID, status, company, and action buttons
PayoutDetails : Detailed information about the payout
PayoutItemsTable : Table of items included in this payout
PayoutStatusTimeline : Timeline showing status changes
PayoutProcessingActions : Controls for processing the payout
API Endpoints:
GET /api/payouts/:id : Fetch payout details
GET /api/payouts/:id/items : Fetch payout line items
PUT /api/payouts/:id/status : Update payout status
POST /api/payouts/:id/process : Process the payout via payment provider
States/Props:
Payout status state
Processing action state
Loading states for each data section
Error states for API failures

Subscriptions
Route: /platform/subscriptions
Access: Platform Admin role
Purpose: Manage subscription plans and monitor subscriber activity
Components:
SubscriptionsHeader : Title, summary statistics
SubscriptionPlansList : List of available subscription plans
SubscriptionPlanForm : Form for creating/editing plans
PlanMetricsCards : Metrics for each plan (subscribers, revenue)
 SubscribersTable : Paginated table of subscribers
API Endpoints:
GET /api/subscription-plans : Fetch subscription plans
POST/PUT/DELETE /api/subscription-plans : Manage subscription plans
GET /api/subscription-metrics : Fetch metrics for subscription plans
GET /api/subscribers : Fetch paginated list of subscribers
States/Props:
Selected plan state
Plan form state (create/edit)
Filter/search state for subscribers table
Pagination state
Loading states for each data section

Subscription Detail
Route: /platform/subscriptions/:id
Access: Platform Admin role
Purpose: Edit a specific subscription plan
Components:
SubscriptionPlanHeader : Title, status toggle, and action buttons
SubscriptionPlanForm : Form for editing plan details
SubscriptionBillingCycles : Management of available billing cycles
SubscriptionMetricsChart : Charts showing subscriber growth and churn
SubscribersList : Paginated list of subscribers to this plan
API Endpoints:
GET /api/subscription-plans/:id : Fetch plan details
PUT /api/subscription-plans/:id : Update plan details
GET /api/subscription-plans/:id/metrics : Fetch plan-specific metrics
GET /api/subscription-plans/:id/subscribers : Fetch plan subscribers
States/Props:
Edit form state and validation
Date range filter for metrics
Pagination state for subscribers list
Loading states for each data section
Error states for API failures

Users
 Route: /platform/users
Access: Platform Admin role
Purpose: Manage platform users
Components:
UsersHeader : Title, search bar, filters
UsersFilters : Filter by status, registration date, subscription, etc.
UsersTable : Paginated table of users with sortable columns
UserDetailDialog : Modal for viewing user details
API Endpoints:
GET /api/users : Fetch paginated, filtered users list
GET /api/users/:id : Fetch single user details
PUT /api/users/:id/status : Update user status
States/Props:
Filter/search state
Selected user state
Table sorting state
Pagination state
Modal visibility state

Admins
Route: /platform/admins
Access: Platform Admin role
Purpose: Manage platform administrators and company admins
Components:
AdminsHeader : Title, search bar, add admin button
AdminsTable : Paginated table of admins with role information
InviteAdminDialog : Modal for inviting new admins
AdminRoleManager : Interface for updating admin roles
API Endpoints:
GET /api/admins : Fetch paginated list of admins
POST /api/admin-invitations : Send invitation to new admin
PUT /api/admins/:id/role : Update admin role
DELETE /api/admins/:id : Remove admin access
States/Props:
Filter/search state
Invitation form state
 Selected admin state
Role assignment state
Pagination state
Modal visibility state

Promo Codes
Route: /platform/promocodes
Access: Platform Admin role
Purpose: Manage platform promotion codes
Components:
PromoCodesHeader : Title, add promo code button
PromoCodesTable : Paginated table of promo codes with usage statistics
CreatePromoCodeForm : Form for creating new promo codes
PromoCodeDetailDialog : Modal for viewing promo code details and usage
API Endpoints:
GET /api/promocodes : Fetch paginated list of promo codes
POST /api/promocodes : Create new promo code
GET /api/promocodes/:id : Fetch promo code details and usage
PUT /api/promocodes/:id : Update promo code
DELETE /api/promocodes/:id : Delete promo code
States/Props:
Filter/search state
Creation form state
Selected promo code state
Pagination state
Modal visibility state

Create Promo Code

Route: /platform/promocodes/create
Access: Platform Admin role
Purpose: Create a new platform promotion code
Components:
CreatePromoCodeHeader : Title and form instructions
PromoCodeForm : Form with promo code details
EligiblePlansSelector : Component to select which plans are eligible
DiscountCalculator : Preview of discount calculations
 API Endpoints:
POST /api/promocodes : Create new promo code
GET /api/subscription-plans : Fetch plans for eligibility selection
States/Props:
Form field states and validation
Selected eligible plans state
Discount type state (percentage vs fixed)
Form submission state (submitting, success, error)

Collections
Route: /platform/collections
Access: Platform Admin role
Purpose: Manage curated collections of tools or companies
Components:
CollectionsHeader : Title, add collection button
CollectionsTable : Table of existing collections
CollectionTypeFilter : Filter for collection types
CollectionDetailDialog : Modal for viewing collection details
API Endpoints:
GET /api/collections : Fetch paginated list of collections
POST /api/collections : Create new collection
GET /api/collections/:id : Fetch collection details
DELETE /api/collections/:id : Delete collection
States/Props:
Filter state by collection type
Selected collection state
Pagination state
Modal visibility state

Collection Detail
Route: /platform/collections/:id
Access: Platform Admin role
Purpose: Edit a specific collection
Components:
CollectionHeader : Title, status toggle, save button
CollectionForm : Form for editing collection details
 CollectionItemsManager : Interface for adding/removing items
CollectionItemSearchDialog : Modal for searching items to add
CollectionItemsList : Sortable list of current collection items
CollectionItemsSorter : Interface for reordering collection items
API Endpoints:
GET /api/collections/:id : Fetch collection details
PUT /api/collections/:id : Update collection details
GET /api/collections/:id/items : Fetch collection items
POST /api/collections/:id/items : Add item to collection
DELETE /api/collections/:id/items/:itemId : Remove item from collection
PUT /api/collections/:id/items/order : Update item order
GET /api/search/tools or GET /api/search/companies : Search for items to add
States/Props:
Edit form state and validation
Collection items list state
Item search state
Item reordering state
Modal visibility state
Form submission state

Platform API Keys

Route: /platform/platform-api-keys
Access: Platform Admin role
Purpose: Manage API keys for platform access
Components:
APIKeysHeader : Title, create key button
APIKeysTable : Table of existing API keys with usage metrics
CreateAPIKeyDialog : Modal for creating new API key
APIKeyDetailDialog : Modal for viewing API key details and usage
API Endpoints:
GET /api/api-keys : Fetch list of API keys
POST /api/api-keys : Create new API key
DELETE /api/api-keys/:id : Revoke API key
GET /api/api-keys/:id/usage : Fetch key usage statistics
States/Props:
Key creation form state
 Selected key state
Modal visibility state
Key reveal state (for new keys)

Platform Webhooks
Route: /platform/platform-webhooks
Access: Platform Admin role
Purpose: Manage webhook configurations
Components:
WebhooksHeader : Title, create webhook button
WebhooksTable : Table of existing webhook configurations
CreateWebhookDialog : Modal for creating new webhook
WebhookDetailDialog : Modal for viewing webhook details
WebhookTestPanel : Interface for testing webhook delivery
API Endpoints:
GET /api/webhooks : Fetch list of webhook configurations
POST /api/webhooks : Create new webhook configuration
PUT /api/webhooks/:id : Update webhook configuration
DELETE /api/webhooks/:id : Delete webhook configuration
POST /api/webhooks/:id/test : Test webhook delivery
GET /api/webhooks/:id/deliveries : Fetch webhook delivery history
States/Props:
Webhook creation/edit form state
Selected webhook state
Event type selection state
Test payload state
Modal visibility state

User Roles
Route: /platform/user-roles
Access: Platform Admin role
Purpose: Manage role assignments and permissions
Components:
RolesHeader : Title and instructions
RolesMatrix : Matrix showing roles and their permissions
EditPermissionDialog : Modal for editing permission for a role
 UserRoleAssignments : Section for viewing/editing user role assignments
API Endpoints:
GET /api/roles : Fetch available roles
GET /api/permissions : Fetch available permissions
GET /api/roles-permissions : Fetch role-permission mappings
PUT /api/roles-permissions : Update role-permission mapping
GET /api/user-roles : Fetch user role assignments
PUT /api/users/:id/role : Update user role assignment
States/Props:
Selected role state
Permission edit state
User search/filter state
Role assignment state
Modal visibility state

Settings
Route: /platform/settings
Access: Platform Admin role
Purpose: Configure platform-wide settings
Components:
SettingsHeader : Title and save button
SettingsTabs : Tabs for different setting categories
GeneralSettingsForm : Form for general platform settings
AppearanceSettingsForm : Form for customizing platform appearance
IntegrationSettingsForm : Settings for third-party integrations
NotificationSettingsForm : Configure platform notifications
PrivacySettingsForm : Settings related to privacy policies
AdvancedSettingsForm : Advanced technical settings
API Endpoints:
GET /api/settings : Fetch current platform settings
PUT /api/settings : Update platform settings
POST /api/settings/reset : Reset settings to defaults
States/Props:
Active tab state
Settings form state for each category
Form validation state
 Submission state
Unsaved changes state

Affiliates
Route: /platform/affiliates
Access: Platform Admin role
Purpose: Manage affiliate program participants
Components:
AffiliatesHeader : Title, summary statistics
AffiliatesTable : Paginated table of affiliates
AffiliateApplicantsTable : Table of pending affiliate applications
AffiliateDetailDialog : Modal for viewing affiliate details
AffiliateApplicationReviewDialog : Modal for reviewing applications
API Endpoints:
GET /api/affiliates : Fetch paginated list of affiliates
GET /api/affiliate-applications : Fetch pending applications
GET /api/affiliates/:id : Fetch affiliate details
PUT /api/affiliates/:id/status : Update affiliate status
PUT /api/affiliate-applications/:id : Approve/reject application
States/Props:
Filter/search state
Selected affiliate state
Selected application state
Pagination state
Modal visibility state

Affiliate Payouts
Route: /platform/affiliate-payouts
Access: Platform Admin role
Purpose: Manage payouts to affiliates
Components:
AffiliatePayoutsHeader : Title, summary statistics
RequestedPayoutsTable : Table of payout requests
ProcessedPayoutsTable : Table of completed payouts
PayoutDetailDialog : Modal for viewing payout details
ProcessPayoutForm : Form for processing a payout
 API Endpoints:
GET /api/affiliate-payouts : Fetch paginated list of payouts
GET /api/affiliate-payouts/:id : Fetch payout details
PUT /api/affiliate-payouts/:id/status : Update payout status
POST /api/affiliate-payouts/:id/process : Process a payout
States/Props:
Filter/status state
Selected payout state
Processing form state
Pagination state
Modal visibility state

Company Admin Pages

Dashboard
Route: /company-admin/dashboard
Access: Company Admin role
Purpose: Overview of company performance and metrics
Components:
CompanyDashboardHeader : Title and date filter controls
MetricsCards : Key company metrics
RevenueChart : Line chart showing revenue over time
OffersPerformanceTable : Table showing performance of company's offers
ToolsPerformanceTable : Table showing performance of company's AI tools
RedemptionsTimelineChart : Chart showing redemptions over time
API Endpoints:
GET /api/company-dashboard : Fetch company dashboard data
GET /api/company-offers/performance : Fetch offer performance data
GET /api/company-tools/performance : Fetch tool performance data
States/Props:
Date range filter state
Loading states for each data section
Error states for API failures
Chart display options (line vs bar, etc.)
Company Dashboard Detail
Route: /company-admin/dashboard/:id
Access: Company Admin role
Purpose: View detailed company dashboard for a specific company
Components:
CompanyHeader : Company name, logo, and key metrics
MetricsTabs : Tabs for different metric categories
RevenueDashboard : Revenue charts and breakdown
RedemptionsDashboard : Redemption statistics and trends
UserDemographicsDashboard : User information for redemptions
ToolsPerformanceDashboard : Detailed tool performance metrics
API Endpoints:
GET /api/companies/:id/dashboard : Fetch company dashboard data
GET /api/companies/:id/revenue : Fetch revenue data
GET /api/companies/:id/redemptions : Fetch redemptions data
GET /api/companies/:id/users : Fetch user demographics
GET /api/companies/:id/tools/performance : Fetch tool performance data
States/Props:
Active tab state
Date range filter state
Chart display options
Loading states for each data section
Error states for API failures

Profile
Route: /company-admin/profile
Access: Company Admin role
Purpose: View and edit admin's profile
Components:
ProfileHeader : User name and profile picture
PersonalInfoForm : Form for personal information
ChangePasswordForm : Form for updating password
NotificationPreferences : Settings for email notifications
AccountSecurity : Security settings and 2FA configuration
API Endpoints:
GET /api/profile : Fetch user profile data
 PUT /api/profile : Update user profile
PUT /api/change-password : Update password
PUT /api/notification-preferences : Update notification settings
GET/PUT /api/2fa : Manage two-factor authentication
States/Props:
Profile form state and validation
Password form state and validation
Notification preferences state
2FA setup/verification states
Form submission states

Company Profile
Route: /company-admin/profile/:id
Access: Company Admin role
Purpose: View and edit company profile
Components:
CompanyProfileHeader : Title, save button
CompanyGeneralInfoForm : Form for company general information
CompanyLogoUploader : Component for uploading company logo
CompanyDescriptionEditor : Rich text editor for company description
CompanySocialLinksForm : Form for company social media links
CompanyIntegrationSettings : Settings for third-party integrations
API Endpoints:
GET /api/companies/:id/profile : Fetch company profile
PUT /api/companies/:id/profile : Update company profile
POST /api/file-upload : Upload company logo
PUT /api/companies/:id/integrations : Update integration settings
States/Props:
Profile form state and validation
Logo upload state
Rich text editor state
Form submission states
Unsaved changes state

Company Management
Route: /company-admin/company/:id
 Access: Company Admin role
Purpose: Manage company settings and details
Components:
CompanyManagementHeader : Title, company name, status
CompanyInfoPanel : Company information display/edit
CompanySettingsTabs : Tabs for different setting categories
ApiIntegrationPanel : API integration settings
WebhookConfigurationPanel : Webhook settings management
BillingSettingsPanel : Payment and billing settings
BrandingSettingsPanel : Company branding settings
API Endpoints:
GET /api/companies/:id : Fetch company details
PUT /api/companies/:id : Update company details
GET /api/companies/:id/api-settings : Fetch API settings
PUT /api/companies/:id/api-settings : Update API settings
GET/POST/PUT/DELETE /api/companies/:id/webhooks : Manage webhooks
GET/PUT /api/companies/:id/billing : Manage billing settings
GET/PUT /api/companies/:id/branding : Manage branding settings
States/Props:
Active tab state
Form states for each settings panel
Form validation states
API connection test states
Webhook test states
Form submission states

Tools
Route: /company-admin/tools
Access: Company Admin role
Purpose: Manage company's AI tools
Components:
ToolsHeader : Title, add tool button
ToolsTable : Table of company's AI tools
ToolStatusToggle : Component for changing tool status
CreateToolDialog : Modal for creating new tool
ToolDetailDialog : Modal for viewing tool details
 API Endpoints:
GET /api/company/tools : Fetch company's tools
POST /api/tools : Create new tool
PUT /api/tools/:id/status : Update tool status
GET /api/tools/:id : Fetch tool details
GET /api/tool-attributes : Fetch available tool attributes
States/Props:
Tool creation form state
Selected tool state
Table sorting/filtering state
Modal visibility states
Form validation states

Tools Detail
Route: /company-admin/tools/:companyId
Access: Company Admin role
Purpose: View and manage tools for a specific company
Components:
CompanyToolsHeader : Company name, add tool button
ToolsList : List/grid of company's AI tools with status indicators
ToolDetailsPanel : Detailed view of selected tool
ToolEditor : Form for editing tool details
ToolAttributesManager : Interface for managing tool attributes
ToolGalleryManager : Interface for managing tool screenshots/images
API Endpoints:
GET /api/companies/:id/tools : Fetch company's tools
GET /api/tools/:id : Fetch tool details
PUT /api/tools/:id : Update tool details
POST /api/tools : Create new tool
POST/DELETE /api/tools/:id/attributes : Manage tool attributes
POST/DELETE /api/tools/:id/gallery : Manage tool gallery images
States/Props:
Selected tool state
Edit mode state
Form states and validation
Image upload states
 Form submission states

Offers
Route: /company-admin/offers
Access: Company Admin role
Purpose: Manage company's offers
Components:
OffersHeader : Title, add offer button
OffersTable : Table of company's offers
OfferStatusToggle : Component for changing offer status
CreateOfferDialog : Modal for creating new offer
OfferDetailDialog : Modal for viewing offer details
API Endpoints:
GET /api/company/offers : Fetch company's offers
POST /api/offers : Create new offer
PUT /api/offers/:id/status : Update offer status
GET /api/offers/:id : Fetch offer details
GET /api/company/tools : Fetch company's tools for offer creation
States/Props:
Offer creation form state
Selected offer state
Table sorting/filtering state
Modal visibility states
Form validation states

Offers Detail
Route: /company-admin/offers/:companyId
Access: Company Admin role
Purpose: View and manage offers for a specific company
Components:
CompanyOffersHeader : Company name, add offer button
OffersList : List of company's offers with status indicators
OfferDetailsPanel : Detailed view of selected offer
OfferEditor : Form for editing offer details
OfferToolsSelector : Interface for selecting tools to include in offer
OfferMetricsPanel : Performance metrics for the offer
 API Endpoints:
GET /api/companies/:id/offers : Fetch company's offers
GET /api/offers/:id : Fetch offer details
PUT /api/offers/:id : Update offer details
POST /api/offers : Create new offer
GET /api/companies/:id/tools : Fetch company's tools
POST/DELETE /api/offers/:id/tools : Manage offer's included tools
GET /api/offers/:id/metrics : Fetch offer performance metrics
States/Props:
Selected offer state
Edit mode state
Form states and validation
Selected tools state
Date range for metrics
Form submission states

Redemptions
Route: /company-admin/redemptions
Access: Company Admin role
Purpose: View and manage offer redemptions
Components:
RedemptionsHeader : Title, filters, export button
RedemptionsFilters : Filter controls by date, offer, etc.
RedemptionsTable : Table of redemptions for company's offers
RedemptionDetailDialog : Modal for viewing redemption details
API Endpoints:
GET /api/company/redemptions : Fetch company's redemptions
GET /api/redemptions/:id : Fetch redemption details
States/Props:
Filter state (date range, offers, status)
Selected redemption state
Table sorting/pagination state
Export options state
Modal visibility state

Payouts
 Route: /company-admin/payouts
Access: Company Admin role
Purpose: View company payouts history
Components:
PayoutsHeader : Title, summary statistics
PayoutsTable : Table of payouts with status indicators
PayoutDetailDialog : Modal for viewing payout details
PayoutRequestForm : Form for requesting new payout
API Endpoints:
GET /api/company/payouts : Fetch company's payouts
GET /api/payouts/:id : Fetch payout details
POST /api/payout-requests : Create new payout request
States/Props:
Filter state (date range, status)
Selected payout state
Table sorting/pagination state
Payout request form state
Modal visibility state

Payout Detail
Route: /company-admin/payouts/:companyId/:payoutId
Access: Company Admin role
Purpose: View detailed information for a specific payout
Components:
PayoutHeader : Payout ID, amount, status, date
PayoutDetailsPanel : Detailed payout information
PayoutItemsTable : Table of items included in payout
PayoutStatusTimeline : Timeline of payout status changes
PayoutDocumentsList : List of documents related to payout
API Endpoints:
GET /api/companies/:companyId/payouts/:payoutId : Fetch payout details
GET /api/payouts/:payoutId/items : Fetch payout items
GET /api/payouts/:payoutId/timeline : Fetch payout status timeline
GET /api/payouts/:payoutId/documents : Fetch payout documents
States/Props:
Selected payout state
 Selected document state
Document preview state
Document download state

Team
Route: /company-admin/team
Access: Company Admin role
Purpose: Manage company team members
Components:
TeamHeader : Title, invite member button
TeamMembersTable : Table of team members and their roles
InviteMemberDialog : Modal for inviting new team members
MemberRoleSelector : Component for changing member roles
PendingInvitesTable : Table of pending invitations
API Endpoints:
GET /api/company/team : Fetch company team members
POST /api/invitations : Send invitation to new member
PUT /api/team-members/:id/role : Update member role
DELETE /api/team-members/:id : Remove team member
GET /api/company/pending-invites : Fetch pending invitations
DELETE /api/invitations/:id : Cancel invitation
States/Props:
Invitation form state
Selected member state
Role change state
Tables sorting/pagination state
Modal visibility states

Admins
Route: /company-admin/admins
Access: Company Admin role
Purpose: Manage company administrators
Components:
AdminsHeader : Title, invite admin button
AdminsTable : Table of company admins
InviteAdminDialog : Modal for inviting new admins
 AdminPermissionsEditor : Interface for editing admin permissions
PendingInvitesTable : Table of pending admin invitations
API Endpoints:
GET /api/company/admins : Fetch company admins
POST /api/admin-invitations : Send invitation to new admin
PUT /api/admins/:id/permissions : Update admin permissions
DELETE /api/admins/:id : Remove admin
GET /api/company/pending-admin-invites : Fetch pending admin invitations
DELETE /api/admin-invitations/:id : Cancel admin invitation
States/Props:
Invitation form state
Selected admin state
Permissions edit state
Tables sorting/pagination state
Modal visibility states

Settings
Route: /company-admin/settings
Access: Company Admin role
Purpose: Configure company settings
Components:
SettingsHeader : Title, save button
SettingsTabs : Tabs for different setting categories
CompanyInfoSettings : Company information settings
BrandingSettings : Company branding settings
IntegrationSettings : Third-party integrations settings
APISettings : API access settings
WebhookSettings : Webhook configuration settings
BillingSettings : Payment and billing settings
NotificationSettings : Notification preferences
PrivacySettings : Privacy-related settings
API Endpoints:
GET /api/company/settings : Fetch company settings
PUT /api/company/settings : Update company settings
Various endpoints for specific setting categories
States/Props:
 Active tab state
Settings form states for each category
Form validation states
Integration connection test states
API key visibility states
Form submission states
Unsaved changes state

User Pages
User Dashboard
Route: /user/dashboard or /user
Access: Authenticated Users
Purpose: Primary user dashboard with personalized content
Components:
UserDashboardHeader : Welcome message, user stats
CreditsCard : Display current credit balance and expiration
RecommendedToolsGrid : Grid of recommended AI tools
FeaturedCollectionsCarousel : Carousel of featured collections
RecentRedemptionsTable : Table of user's recent redemptions
SubscriptionStatusCard : Current subscription information
API Endpoints:
GET /api/user/dashboard : Fetch personalized dashboard data
GET /api/user/credits : Fetch user's credit information
GET /api/recommendations/tools : Fetch personalized tool recommendations
GET /api/collections/featured : Fetch featured collections
GET /api/user/redemptions : Fetch user's recent redemptions
GET /api/user/subscription : Fetch user's subscription status
States/Props:
Loading states for each section
Error states for API failures
Carousel navigation state
Recommendation preference state

User Profile
 Route: /user/profile or /profile
Access: Authenticated Users
Purpose: View and edit user profile information
Components:
ProfileHeader : User name, profile picture
PersonalInfoForm : Form for personal information
ProfileAvatarUploader : Interface for uploading profile picture
PreferencesForm : Form for user preferences
ChangePasswordForm : Form for updating password
PrivacySettingsForm : User privacy settings
AccountSettingsForm : General account settings
API Endpoints:
GET /api/user/profile : Fetch user profile
PUT /api/user/profile : Update user profile
POST /api/file-upload : Upload profile picture
PUT /api/user/preferences : Update user preferences
PUT /api/user/password : Update password
PUT /api/user/privacy : Update privacy settings
PUT /api/user/account : Update account settings
States/Props:
Form states for each section
Form validation states
Avatar upload state
Form submission states
Unsaved changes state

Favorites
Route: /user/favorites or /favorites
Access: Authenticated Users
Purpose: View and manage favorite AI tools
Components:
FavoritesHeader : Title, filter/sort controls
FavoritesListSelector : Switch between favorite lists
FavoritesGrid : Grid display of favorite tools
CreateListDialog : Modal for creating new favorite list
EditListDialog : Modal for editing favorite list name
 ToolDetailDialog : Modal for viewing tool details
API Endpoints:
GET /api/user/favorites : Fetch user's favorite tools
GET /api/user/favorite-lists : Fetch user's favorite lists
POST /api/user/favorite-lists : Create new favorite list
PUT /api/user/favorite-lists/:id : Update favorite list
DELETE /api/user/favorite-lists/:id : Delete favorite list
POST /api/user/favorites : Add tool to favorites
DELETE /api/user/favorites/:id : Remove tool from favorites
GET /api/tools/:id : Fetch tool details
States/Props:
Selected list state
Filter/sort state
List creation/edit form state
Selected tool state
Modal visibility states

History
Route: /user/history or /history
Access: Authenticated Users
Purpose: View user's redemption history
Components:
HistoryHeader : Title, filter/sort controls
HistoryFilters : Date range, tool, company filters
RedemptionsTable : Table of user's redemptions
RedemptionDetailDialog : Modal for viewing redemption details
ExportHistoryButton : Button for exporting history data
API Endpoints:
GET /api/user/redemptions : Fetch user's redemptions
GET /api/redemptions/:id : Fetch redemption details
GET /api/user/redemptions/export : Generate exportable history data
States/Props:
Filter state (date range, tools, companies)
Sort state
Table pagination state
Selected redemption state
 Export format state
Modal visibility state

User Tools
Route: /user/tools
Access: Authenticated Users
Purpose: Browse available AI tools
Components:
ToolsHeader : Title, search bar, filter controls
ToolsFilters : Category, company, features filters
ToolsGrid : Grid display of AI tools
ToolsSortSelector : Dropdown for sorting options
ToolDetailDialog : Modal for viewing tool details
API Endpoints:
GET /api/tools : Fetch paginated, filtered tools
GET /api/tools/categories : Fetch tool categories
GET /api/tools/:id : Fetch tool details
POST /api/user/favorites : Add tool to favorites
States/Props:
Search query state
Filter state (categories, companies, features)
Sort state
Grid pagination state
Selected tool state
Modal visibility state

Tool Detail
Route: /user/tools/:toolId
Access: Authenticated Users
Purpose: View detailed information about a specific tool
Components:
ToolHeader : Tool name, company, rating, favorite button
ToolHeroImage : Hero image or screenshot
ToolDescription : Detailed description
ToolFeaturesList : List of tool features
ToolGallery : Gallery of screenshots
 ToolOffersList : Available offers for this tool
ToolReviewsSection : User reviews section
SubmitReviewForm : Form for submitting a review
RelatedToolsCarousel : Carousel of related tools
API Endpoints:
GET /api/tools/:id : Fetch tool details
GET /api/tools/:id/offers : Fetch available offers
GET /api/tools/:id/reviews : Fetch tool reviews
POST /api/tools/:id/reviews : Submit new review
GET /api/tools/:id/related : Fetch related tools
POST /api/user/favorites : Add tool to favorites
DELETE /api/user/favorites/:id : Remove from favorites
States/Props:
Review submission form state
Gallery navigation state
Selected offer state
Review sorting/filtering state
Related tools carousel state
Favorite toggle state

Billing
Route: /user/billing
Access: Authenticated Users
Purpose: Manage billing and subscription
Components:
BillingHeader : Title, subscription status
CurrentSubscriptionCard : Current subscription details
SubscriptionPlansGrid : Available subscription plans
PaymentMethodsManager : Interface for managing payment methods
BillingHistoryTable : Table of past transactions
CreditBalanceCard : Current credit balance information
PromoCodeForm : Form for applying promo codes
API Endpoints:
GET /api/user/subscription : Fetch current subscription
GET /api/subscription-plans : Fetch available plans
POST /api/subscriptions : Create new subscription
 PUT /api/subscriptions/:id : Update subscription
GET /api/user/payment-methods : Fetch payment methods
POST/PUT/DELETE /api/user/payment-methods : Manage payment methods
GET /api/user/billing-history : Fetch billing history
GET /api/user/credits : Fetch credit balance
POST /api/promo-codes/apply : Apply promo code
States/Props:
Selected plan state
Payment method selection state
Payment method form state
Billing history filter state
Promo code form state
Subscription change confirmation state

Settings
Route: /user/settings
Access: Authenticated Users
Purpose: Configure user-specific settings
Components:
SettingsHeader : Title, save button
SettingsTabs : Tabs for different setting categories
AccountSettingsForm : General account settings
NotificationSettingsForm : Email and notification preferences
PrivacySettingsForm : Privacy-related settings
SecuritySettingsForm : Password and 2FA settings
DisplaySettingsForm : UI theme and display preferences
DataManagementSettings : Data export and account deletion
API Endpoints:
GET /api/user/settings : Fetch user settings
PUT /api/user/settings : Update user settings
GET /api/user/notifications : Fetch notification settings
PUT /api/user/notifications : Update notification settings
GET/PUT /api/user/privacy : Manage privacy settings
GET/PUT /api/user/security : Manage security settings
GET/PUT /api/user/display : Manage display settings
POST /api/user/data/export : Export user data
 POST /api/user/account/delete : Delete user account
States/Props:
Active tab state
Settings form states for each category
Form validation states
2FA setup/verification states
Theme selection state
Form submission states
Account deletion confirmation state

Authentication Pages
Login
Route: /login
Access: Public
Purpose: User login page
Components:
LoginHeader : Logo, title, tagline
LoginForm : Email/password form
SocialLoginButtons : Social login options
ForgotPasswordLink : Link to password reset page
SignupLink : Link to signup page
RememberMeCheckbox : Option to stay logged in
API Endpoints:
POST /api/auth/login : Submit login credentials
POST /api/auth/social/:provider : Handle social login
States/Props:
Form field states
Form validation state
Login submission state (loading, error)
Remember me state
Redirect state (where to go after login)

Signup
 Route: /signup
Access: Public
Purpose: New user registration
Components:
SignupHeader : Logo, title, tagline
SignupForm : Registration form
SocialSignupButtons : Social signup options
LoginLink : Link to login page
TermsCheckbox : Terms acceptance checkbox
MarketingPreferencesCheckbox : Marketing emails opt-in
API Endpoints:
POST /api/auth/signup : Submit registration data
POST /api/auth/social/:provider : Handle social signup
States/Props:
Form field states
Form validation state
Signup submission state (loading, error)
Terms acceptance state
Marketing preferences state
Redirect state (where to go after signup)

Forgot Password
Route: /forgot-password
Access: Public
Purpose: Password reset request
Components:
ForgotPasswordHeader : Logo, title
ForgotPasswordForm : Email entry form
SubmitButton : Request reset button
LoginLink : Return to login link
API Endpoints:
POST /api/auth/forgot-password : Submit password reset request
States/Props:
Email field state
Form validation state
Submission state (loading, success, error)
 Success message state

Reset Password
Route: /reset-password
Access: Public (with token)
Purpose: Set new password after reset request
Components:
ResetPasswordHeader : Logo, title
ResetPasswordForm : New password form
PasswordStrengthIndicator : Password strength visualization
SubmitButton : Set new password button
API Endpoints:
POST /api/auth/reset-password : Submit new password
States/Props:
Password fields state
Token validation state
Form validation state
Password strength state
Submission state (loading, success, error)
Success message state with login link

Verify Email
Route: /verify-email
Access: Public (with token)
Purpose: Email verification page
Components:
VerifyEmailHeader : Logo, title
VerificationStatus : Status display (verifying, success, error)
ResendVerificationButton : Button to resend verification email
LoginLink : Return to login link
API Endpoints:
GET /api/auth/verify-email : Verify email token
POST /api/auth/resend-verification : Resend verification email
States/Props:
Verification state (verifying, success, error)
Token validation state
 Resend submission state
Countdown timer for resend button

Invite Acceptance
Route: /accept-invite
Access: Public (with token)
Purpose: Accept invitation to join company
Components:
InviteHeader : Logo, company name, invitation message
RegisterForm : Form to create account (for new users)
LoginPrompt : Prompt to login (for existing users)
InviteDetails : Details about the role/company
AcceptButton : Button to accept invitation
API Endpoints:
GET /api/invitations/:token : Validate invitation token
POST /api/auth/signup : Create account for new user
POST /api/invitations/accept : Accept invitation
States/Props:
Token validation state
User existence check state
Registration form state (for new users)
Acceptance submission state
Success/error message state

Two-Factor Authentication
Route: /2fa
Access: Semi-public (after initial login)
Purpose: Complete 2FA verification
Components:
TwoFactorHeader : Logo, title
TwoFactorForm : Code entry form
ResendCodeButton : Button to request new code
UseRecoveryCodeLink : Link to use recovery code instead
RememberDeviceCheckbox : Option to remember device
API Endpoints:
POST /api/auth/verify-2fa : Submit 2FA code
 POST /api/auth/resend-2fa : Request new 2FA code
POST /api/auth/use-recovery-code : Submit recovery code
States/Props:
Code entry state
Verification submission state
Resend cooldown state
Remember device state
Recovery code mode state

Navigation Flows
User Navigation Flows
1. Public User to Registered User
Entry Point → Login/Signup → User Dashboard
Tool Discovery → Signup → User Dashboard → Tool Detail
2. Tool Discovery and Redemption
User Dashboard → Tool Categories → Tool Detail → Offer Selection → Redemption →
Tool Access
3. Credit Management
User Dashboard → Billing → Subscription Selection → Payment → Credit Receipt
Credit Notification → User Dashboard → Tool Redemption
4. Account Management
User Dashboard → Profile → Edit Profile → Save Changes
User Dashboard → Settings → Update Settings → Save Changes

Company Admin Navigation Flows

1. Company Setup and Management
Invite Acceptance → Company Dashboard → Company Profile → Update Profile
Company Dashboard → Tools → Create Tool → Tool Detail
Company Dashboard → Offers → Create Offer → Offer Detail
2. Performance Monitoring
Company Dashboard → Redemptions → Redemption Details
Company Dashboard → Payouts → Payout Request → Payout Details
3. Team Management
 Company Dashboard → Team → Invite Member → Member Management
Company Dashboard → Admins → Admin Role Assignment

Platform Admin Navigation Flows

1. Platform Management
Platform Dashboard → Companies → Company Details → Company Edit
Platform Dashboard → Users → User Details → User Management
Platform Dashboard → Admins → Admin Assignment
2. Financial Operations
Platform Dashboard → Redemptions → Redemption Details
Platform Dashboard → Payouts → Create Payout → Process Payout
Platform Dashboard → Transactions → Transaction Details
3. Platform Configuration
Platform Dashboard → Settings → Update Settings → Apply Changes
Platform Dashboard → Collections → Create Collection → Add Items
Platform Dashboard → Promo Codes → Create Promo Code

Shared Components
Navigation Components
MainNavbar : Main navigation bar with links and user menu
Sidebar : Collapsible sidebar navigation
BreadcrumbsNav : Breadcrumbs navigation component
UserMenu : Dropdown menu with user options
NotificationsDropdown : Notifications display and management
SearchBar : Global search functionality
MobileNavigation : Responsive navigation for mobile devices

Table Components
DataTable : Reusable data table with sorting, filtering, pagination
TablePagination : Pagination controls for tables
TableFilters : Common filter controls for tables
TableExport : Export functionality for tables
EmptyState : Display for empty table state
 LoadingState : Loading indicator for tables

Form Components
FormField : Reusable form field wrapper
TextInput : Text input component
SelectInput : Dropdown select component
DatePicker : Date selection component
FileUploader : File upload component
RichTextEditor : Rich text editing component
ColorPicker : Color selection component
FormValidationMessage : Form validation feedback display
SubmitButton : Form submission button with loading state

UI Components
Card : Container card component
Dialog : Modal dialog component
Tabs : Tabbed interface component
Toast : Notification toast component
Alert : Alert message component
Badge : Status badge component
Tooltip : Tooltip component
ProgressBar : Progress indicator component
Skeleton : Loading skeleton component
EmptyState : Empty state display component
ErrorBoundary : Error handling component

Chart Components
LineChart : Line chart component
BarChart : Bar chart component
PieChart : Pie chart component
AreaChart : Area chart component
MetricCard : Key metric display card
StatTrend : Statistic with trend indicator

Dashboard Components
 DashboardLayout : Layout for dashboard pages
StatCards : Reusable metric cards container
ActivityFeed : Activity timeline component
QuickActions : Common actions shortcut component
DateRangePicker : Date range selection component
FilterBar : Universal filtering controls

User-related Components
UserAvatar : User avatar display
UserBadge : User status/role badge
UserInfo : User information display
UserActivityTimeline : User activity history display

API Integration Components

QueryErrorBoundary : Error boundary for API queries
DataFetcher : Generic data fetching component
LoadingIndicator : Loading state component
ErrorDisplay : Error state display component
RetryButton : Retry failed operation button

API Endpoint Structure

All API endpoints follow a RESTful structure with these common patterns:

GET endpoints for retrieving data

POST endpoints for creating new resources
PUT endpoints for updating existing resources
DELETE endpoints for removing resources

Authentication is required for all endpoints except public routes (login, signup, password reset,
etc.).

Design System Reference

This application follows a consistent design system with these components:
 Typography: Defined heading and body styles
Color palette: Primary, secondary, accent colors with light/dark modes
Spacing: Consistent spacing scale
Component styles: Consistent styling for buttons, forms, cards, etc.
Icons: Icon library usage guidelines
Animations: Standard transitions and animations

For detailed design mockups and reference, see the Figma design file.

This Component-Level PRD serves as a detailed technical companion to the main Product
Requirements Document, providing engineering teams with specific implementation details for
each page and component in the system.