Futr Connect – Full System Overview Document¶

1. Project Overview¶

Futr Connect is a cloud-native web application tailored for AI enthusiasts, professionals, and companies. It serves as a centralized hub for discovering top AI companies, curated news, and podcasts, while enabling companies to publish insights. The platform is designed for intuitive interaction, clean content consumption, and efficient administrative control.

2. Goals & Objectives¶

Showcase the global AI ecosystem via a directory of AI companies.
Deliver high-quality, curated content in the form of AI news and podcasts.
Enable companies to publish professional insights.
Provide a simple, responsive, and scalable platform for users and administrators.

3. User Roles¶

👤 User¶

Register/login via Firebase authentication.
Explore the platform, follow AI companies, and interact with content.
Favourite news articles and like podcast episodes.
View personalized feed based on followed companies.
If associated with a company, can publish and edit insights.

🛠 Super-Admin¶

Full access to manage users, companies, and content.
Approves company registration, news, podcasts, and insights.
Monitors content submissions and platform health.

4. Key Features¶

🔐 Authentication¶

Email/password and OAuth login (Google, LinkedIn).
Firebase Auth handles sessions, role validation, and redirects.
Account registration with email verification.
Password reset functionality.

🏠 Home Feed¶

Personalized AI-focused content feed.
Displays a mix of:
Newsfeed articles
Podcasts
Company content (products, people, finance, etc.)
Users can:
Like podcasts
Favourite newsfeed content
Includes “My AI Follows” section:
Grid view of companies the user follows
Quick links to company pages

🏢 AI Companies¶

Discoverable directory of AI companies.
Search and filter by:
Industry tags
Company category
Each company card displays:
Logo
Category tags
Follow button

🌟 Top AI Companies¶

Highlighted section showcasing top-performing or featured companies.
Displayed as static cards (no carousel).
Each card includes:
Company logo
Sector/category
Short summary

🏬 Company Details Page¶

Public profile for each registered company.
Displays:
Company logo, bio, website, cover image
Industry tags, region, and social links
Follower count
Sections on the page:
Published newsfeed
Embedded podcast content
Professional insights

📝 Add Company Insight¶

Available to users associated with a company.
Allows publishing of thought leadership or professional insights.
Rich text editor includes:
Media support (images, video embeds)
Tagging
Preview feature
Status options: Draft or Publish

✏️ Edit Company Insight¶

Modify published or draft insights.
Update:
Title
Body
Tags
Media
Post type
Version control not included.

🗞 Newsfeed¶

Aggregated from verified external sources (NewsAPI, RSS feeds).
Admin-curated and approved.
News entries show:
Title, source, tags, published date
“Favourite” button
Search and filter options by tag or keyword

🎙 Podcast¶

List of AI-focused podcasts embedded via YouTube.
Each entry includes:
Title, duration, tags, and description
Like button
Filterable and searchable by category/topic

🙍‍♂️ User Profile¶

Dashboard for logged-in users.
Displays:
Bio, profile picture
Followed companies
Favourited news
Liked podcasts
Subscription information (if applicable)

🧑‍💼 Admin Dashboard (Super-Admin Only)¶

Access to manage:
Users
Company applications
Submitted insights, podcasts, and news
Content approval workflows
Visibility into content engagement metrics

4.1 Company Information Display Strategy¶

🔍 Limited Information on Card Views¶

On the following pages, AI Company cards will display only basic/essential information:
Home Feed Page
AI Solutions/Companies Directory Page (both featured and non-featured companies)
Top AI Companies Page (featured companies)
Landing Page (featured companies section)
Basic information on cards typically includes:
Company name
Logo
Short description/tagline
Primary category/tags
Follow button
Visual indicators (e.g., “Featured” badge if applicable)

📄 Detailed Information on Company Detail Page¶

Full company information will be accessible when a user clicks on an AI Company card
This creates a consistent user experience where:
1. Cards provide quick recognition and basic context
2. The Company Detail Page provides comprehensive information including all specialized content types (Products, People, Finance, etc.)
3. Users can easily navigate between the overview (cards) and detailed views

🚀 Benefits of This Approach¶

Improves page load performance by limiting initial data transfer
Creates a cleaner, more focused UI on listing pages
Maintains a clear information hierarchy
Encourages exploration by prompting users to click for more details
Ensures consistency across the platform

5. System Architecture¶

🧱 Tech Stack¶

Layer	Technology
Frontend	Next.js, Tailwind CSS
State Mgmt	MobX-State-Tree
Backend	Django REST Framework
Database	PostgreSQL (AWS RDS)
Auth & FCM	Firebase (Auth + Notifications)
Payments	Stripe (ACH, Credit Card, Wire)
Hosting	AWS EC2, Elastic Beanstalk, EKS, S3
CI/CD	GitHub Actions
Testing	Playwright
Support	Zendesk
Mgmt Tools	Devlens

6. Third-Party Integrations¶

Service	Purpose
Firebase	Auth, Role Management, Notifications
Stripe	Subscriptions, Invoicing, Dunning
Zendesk	Helpdesk and Ticketing Support
YouTube	Podcast Embeds
News APIs	Aggregated AI News

7. DevOps & Deployment¶

GitHub version control and Actions for CI
Automated tests with Playwright
Staging and production environments in AWS EB/EKS
Infrastructure as Code (Terraform or AWS CloudFormation)

Futr Connect – Full Feature Flows¶

F1. Landing Page Flow [#LandingPageFlow]¶

User lands on the Landing Page.
The page displays multiple CTA buttons:
- “Get Featured”
- “Get Started”
- “Contact Us”
- “View more” (Top AI section)
- “View more” (Newsfeed section)
- “Listen on Futr”
- “Login”
- “Sign Up”
Additional sections and components:
- Trusted By Section:
- Displays client logos under the heading “Trusted By.”
- How It Works Section:
- Step-by-step visual guide explaining the platform’s workflow:
- Register
- Explore AI Companies
- Book a Meeting
- Connect & Collaborate
- What We Offer Section:
- Grid layout showcasing the platform’s offerings:
- AI Solutions (dynamic content through API call)
- Top AI (dynamic content through API call)
- Newsfeed (dynamic content through API call)
- Podcasts (dynamic content through API call)
- Each offering has a brief description and a CTA button.
- Testimonials Section:
- Carousel displaying user testimonials with names, locations, and ratings.
- Hero Section:
- Prominent hero section with a headline, subheadline, and two CTA buttons:
- “Get Started”
- “Get Featured”
- Podcast Section:
- Dedicated section for podcasts with a CTA button: “Listen on Futr.”
- Dynamic Newsfeed Section:
- Preview of news articles with a “View More” button.
- Top AI Companies Section:
- Grid layout showcasing featured AI companies with a “Get Featured” and “View More” button.
Footer includes:
- Futr information
- Social media links (Facebook, Instagram, YouTube, Twitter, LinkedIn)
- FAQ
- Contact info
- Futr Connect Channel
- Terms & Conditions
- Privacy Policy
User clicks:
- “Get Featured” → Opens Get Featured Modal
- User will fill up the information (information contains: company name, email, short note about company). Once the user fills up the form and clicks on the “Submit” button then a POST API will be executed and it will be stored in the database table.
- “Get Started” → Redirects to Get Started Page
- “View more” in Top AI → Redirects to Login Page
- “View more” in Newsfeed → Redirects to Newsfeed Flow
- “Contact Us” → Opens Contact Us Page

F2. Authentication Flow (User) [#AuthenticationFlow]¶

User Initiates Authentication
- User clicks on Login or Sign Up from the top navigation bar.
Sign Up Flow
- User views the Sign Up form/modal:
- Inputs:
  - Name
  - Email
- Accepts Terms and Conditions.
- Option to sign up using:
- Manual Email
- OAuth (Google, LinkedIn)

Password Creation:
- After clicking Continue, user is prompted to:
  - Set Password
  - Confirm Password
- Password must include:
  - At least one uppercase letter
  - At least one number
  - At least one special character
Email Verification:
- User receives a verification email (OTP or verification link). For now we will use OTP for account verification.
- On verifying email, the account is activated.
- (Note: UI flow for this step not yet visualized.)
Post Verification:
- Upon successful verification, the account is created.
- User is redirected to the Home Feed page.

Login Flow
- Login Form:
- Inputs:
  - Email
  - Password
- Option to login using:
  - Manual credentials
  - OAuth (Google, LinkedIn)

Authentication:
- Credentials validated via Firebase Authentication.
Post Authentication:
- On successful login, user is redirected to the Home Feed.

Forgot Password Flow
- Password Recovery Initiation:
- User clicks “Forgot Password?” on the login form.
- Enters their registered email.

Email Sent:
- A reset password email is sent to the user.
Reset Password Form:
- User follows the link and enters:
  - New Password
  - Confirm Password
- Must meet same password criteria.
Password Reset Confirmation:
- After resetting, user can log in using the new credentials.

Security & Validation
- Password rules enforced consistently:
  - Minimum one uppercase character
  - Minimum one number
  - Minimum one special character
- All user authentication and session management is handled by Firebase Auth.
- Email verification is mandatory before account activation.
- OAuth login options:
  - Google
  - LinkedIn
Post-Authentication Landing
- Successful Sign Up or Login redirects the user to the Home Feed Page with personalized content.

F3. Home Feed Flow [#HomeFeedFlow]¶

Entry Point:
- User lands on the Home Feed Page immediately after a successful login/signup or already logged in (token is been stored).
Header Navigation CTA Buttons:
- Home Feed (Redirects to Home Feed Page)
- AI Solutions (Redirects to AI Solutions Page)
- Top AI (Redirects to Top AI Page)
- Newsfeed (Redirects to Newsfeed Page)
- Podcast (Redirects to Podcast Page)
- Help & Support Icon (Redirects to Help and Support Page)
- Notification Icon (bell icon)
- Profile Icon
- Dropdown includes:
  - My Profile → Redirects to Profile Page
  - Logout → Redirects to Landing Page
Feed Layout and Features
- Dynamic Content Cards (Main Feed Area)
  - Each feed card may include:
    - Embedded Media: Video player (e.g., YouTube or commercial video)
    - Company Metadata:
    - Logo
    - Location
    - Category tags (e.g., Cloud Data Services, AI, etc.)
    - User Actions:
    - Follow
    - Score
    - Book Meeting
    - Free Trial
    - Insight/Content Metadata:
    - Summary / Description
    - Estimated read time
    - View count
    - Action: “Watch Full Video” or “Read More”
- Sidebar: My AI Follows
  - Displays a list of companies the user follows.
  - Each item shows:
    - Company name
    - Category
  - Pulls from user’s follow list API
Notification Panel (Bell Icon)
- When clicked, opens a dropdown panel with latest notifications.
- Each item shows:
  - Message text
  - Timestamp or date (e.g., “9:45am”, “2 Jan”)
- CTA:”See all notifications” opens full notification center.
Sorting & Search
- Search bar available for quick content lookup.
- Sorting dropdown (e.g., Ascending/Descending) affects feed order.
API Integrations
- AI Company Data:
  - Used for rendering company metadata on cards and in “My AI Follows”
- Newsfeed API:
  - Aggregated and curated news shown inline with feed cards
- YouTube Embed:
  - Used for Podcast/Video player integration
- Firebase Notifications:
  - Pulls user-specific notification data for display in dropdown
- User Follow API:
  - Fetches list of followed companies for the sidebar
- Favourite News API:
  - Allows users to favourite/unfavourite news articles.
  - Stores user preferences linked to their account.
- Like Podcast API:
  - Records user likes for individual podcasts.
  - Used to display engagement metrics and allow filtering.
- Search API:
  - Enables users to perform keyword-based search across:
    - AI Companies
    - Newsfeed articles
    - Podcasts
  - Supports real-time or debounce-based search suggestions.
- Sorting API or Params:
  - Allows sorting content on the Home Feed based on:
    - Date Published
    - Popularity (views, likes)
    - Alphabetical or Custom Order
  - Sorting is typically handled via query parameters (e.g., ?sort=asc&field=title)
Additional Notes
- News Articles:
- Users can favourite news posts only.
- Podcasts**:
- Users can like podcasts.
- “Book Meeting” Button**:
- Redirects user to the company’s Calendly link in a new tab.
- “Free Trial” Button**:
- Redirects to the respective company’s website or landing page.
- Home Feed content is personalized based on user interests and followed companies.
- Featured companies and curated content may also appear regardless of personalization.

Third-Party Integration
- Calendly Integration (for “Book Meeting” CTA)
- To integrate Calendly for company meetings:
- Each company profile must include a Calendly URL (stored in the backend DB).
- In the Home Feed card, the “Book Meeting” button should:
- Check if Calendly URL is available for that company.
- On click, open the Calendly link using target="_blank" in a new tab.
- Ensure Calendly embeds or redirects comply with privacy settings and pop-up blockers.
- Example:
>

<a href="https://calendly.com/company-meeting-link" target="_blank" rel="noopener noreferrer">
  Book Meeting
</a>

F4. AI Companies Directory Flow [#AICompanyDirectoryFlow]¶

Entry Point
- User navigates to the AI Solutions tab from the top navigation bar.
Company Card Layout
- Each company is displayed as a card in a vertical list format. Each card includes:
- Visual & Metadata:
  - Company Logo – Displayed on the top left (or placeholder icon if not uploaded).
  - Company Name – Bold, prominently displayed.
  - Company Location – Shown below the name.
  - Company Summary/Description – Short paragraph about the company.
  - 2 min commercial” Video Player Placeholder – Includes play icon and duration indicator.
- Category Tags:
  - Tags like:
    - Cloud Data Services
    - Artificial Intelligence
    - Enterprise Software
    - Data Center Automation
    - Cloud Security
    - Cyber Security
  - Tags appear in a grid layout with tick/check icons.
- Status Labels:
  - Featured – Yellow “Featured” label appears if company is promoted. Admin will be responsible to make an company as featured through Admin Panel
  - Claimed – “Claimed” label appears if the company has verified ownership.
    - Tooltip: “This profile has been claimed by the company channel (admin). Claimed profiles are responsible for their own content.”
Call-To-Action (CTA) Buttons
- Each card includes the following interactive buttons:
- Follow / Following Button
  - Toggles based on user interaction and state.
- Score Button
  - Placeholder for a scoring feature (visual but not yet functional).
- Book Meeting
  - Opens the company’s Calendly link in a new tab.
  - Only active if Calendly URL is available in the backend.
- Free Trial
  - Redirects to the company’s external website or landing page.
Sorting & Search
- Search Bar
- Located at the top of the AI Solutions directory.
- Allows keyword-based filtering of companies.
- Sorting Dropdown
- Allows sorting by parameters such as:
- Ascending / Descending
- Alphabetical
- Score (if implemented later)
Sidebar – “My AI Follows”
- A right-side panel showing companies the user follows:
- “My AI Follows” title with summary text.
- List of followed companies, each including:
  - Company Initial / Logo
  - Company Name
  - Category Tag
Additional Notes
- Cards may visually differ based on the company’s claim status and feature promotion.
- Button state changes (e.g., “Follow” to “Following”) are handled dynamically via API responses.
- If the user is not authenticated:
- Clicking “Follow”, “Book Meeting”, or “Free Trial” may prompt login/signup first.

F5. Top AI Companies Flow [#TopAICompaniesFlow]¶

Entry Point
- Top AI Companies are visible from:
- Landing Page – As a highlighted section with “View More” CTA.
- Home Page – Shown in the personalized feed or Top AI section.
- Top AI Page – A dedicated tab accessible from the top navigation bar.
  - URL: /top-ai
  - The page includes a heading: “FutrConnect’s top picks—AI companies we recommend exploring.”
Top AI Company Card Structure
- Each Top AI company is displayed using a vertically stacked card layout. Each card includes:
- Company Metadata:
  - Company Logo/Initial – Circular icon with placeholder “A”.
  - Company Name – Displayed in bold.
  - Company Location – Displayed below the name.
  - Featured Label – A yellow badge labeled “Featured” appears on all cards.
- Media Preview:
  - Video Block – “2 min commercial” label with play button placeholder.
  - Could use embedded video (e.g., YouTube or custom player).
- Category Tags:
  - Tags displayed in a grid layout with check icons:
    - Cloud Data Services
    - Artificial Intelligence
    - Enterprise Software
    - Data Center Automation
    - Cloud Security
    - Cyber Security
Call-To-Action (CTA) Buttons
- Each card includes the following interactive buttons:
- Follow / Following
  - Text change based on user state.
- Score
  - Placeholder button for company scoring.
- Book Meeting
  - Opens Calendly meeting link in a new tab (target="_blank").
  - Requires Calendly URL to be configured.
- Free Trial
  - Redirects to the company’s external trial signup page.
Sorting & Search
- Search Bar
- Located at the top of the Top AI page.
- Allows users to filter Top AI companies by name or keyword.
- Sort Dropdown
- Allows sorting by:
  - Score (default in the UI)
  - Alphabetical (A-Z, Z-A) – if implemented
  - Possibly Date Added or Popularity (future)
Sidebar – “My AI Follows”
- Displayed on the right-hand side:
- “My AI Follows” title with brief intro text.
- Scrollable list of followed companies.
- Each list item contains:
  - Company logo/initial
  - Company name
  - Category tag (e.g., Cyber Security)
Additional Notes
- The “Featured” status is applied through the admin panel.
- All interactive elements should validate user login state:
- If unauthenticated, actions like “Follow”, “Book Meeting”, or “Free Trial” prompt a login.
- Company data is pulled from the backend based on a “featured” flag or top score metric.
- The page is static in layout (no carousel), allowing better accessibility and performance.

F6. Newsfeed Interaction Flow [#NewsfeedFlow]¶

Entry Point
- User navigates to the Newsfeed section via the top navigation bar.
- URL: /newsfeed
- The page header includes:
- Page Title: “Newsfeed”
- Subtitle: “Catch up on the latest AI trends, updates, and expert insights.”
Newsfeed Article Card Layout
- Each news article is shown as a card in a vertical list layout, containing the following:
- Content Metadata:
  - Title – Shown prominently in bold.
  - Excerpt/Summary – Truncated body of the news content.
  - Thumbnail Image – Placeholder shown if no image is available.
  - “Read More” Link – Expands to full external article (opens in a new tab).
- Meta Info Bar:
  - Estimated Read Time – e.g., “11 min read”
  - Views Counter – e.g., “Views: 4200”
- Interactive Elements:
  - Favourite Icon/Button
    - Allows users to favourite or unfavourite an news.
    - Updates Saved Newsfeed sidebar dynamically (requires login).
  - Favourite State visual is implied (e.g., filled icon).
Right Sidebar – “Saved Newsfeed”
- Located on the right side of the screen.
- Shows a list of user-favourited news articles.
- Each saved item includes:
- Article thumbnail
- Article title (truncated)
- Estimated read time
- Clicking an item opens the full news article externally.
Search & Sort Controls
- Search Bar
- Positioned near the top of the page.
- Allows users to filter news articles by title, keyword, or tag.
- Sort Dropdown
- Sort by options may include:
  - Date Published (default)
  - Popularity (views)
  - Relevance (if implemented)
Additional UX/UI Considerations
- Pagination or lazy loading may apply to the news list (not visible but should be scoped).
- Tooltip or state transition for “favourite” action.
- Users must be authenticated to use “favourite” action:
- Non-logged-in users may be prompted to log in when interacting with saved content features.
Backend Integration Notes
- Newsfeed API:
- Pulls verified and admin-approved content from NewsAPI, RSS feeds, or internal posts.
- Favourite News API:
- Saves user’s favourite article IDs linked to their profile.
- Search API:
- Supports keyword/tag-based search across news entries.
- Sort API or Params:
- Allows sorting through URL query params or backend logic.

F7. Podcast Interaction Flow [#PodcastFlow]¶

Entry Point
- User navigates to the Podcasts page from the top navigation bar.
- URL: /podcasts
- Page header includes:
- Title: “Podcasts”
- Subtitle: “Listen to FutrConnect’s exclusive podcasts on AI innovations and stories.”
Podcast Card Structure
- Each podcast episode is displayed as a horizontal card in a vertical list layout.
- Content Area:
  - Embedded Video Player or Thumbnail:
    - Embedded YouTube video or placeholder with play icon.
  - Podcast Title – Displayed prominently.
  - Short Description – A few lines of episode summary.
  - Watch Full Video Button – Opens full video (likely embedded or in lightbox).
  - Time Since Published – E.g., “3 months ago”.
  - View Count – E.g., “Views: 25k”
- Engagement:
  - Like Button (Heart/Thumb Icon)
    - Allows user to like a podcast.
    - Icon state changes when liked.
    - May require user login.
Right Sidebar – “Favourite Podcasts”
- Section titled Favourite Podcasts on the right.
- Lists podcasts the user has liked.
- Each item includes:
- Podcast thumbnail
- Episode title (truncated)
- Duration (e.g., “1:05:07”)
- Clicking an item opens the full podcast video.
Search & Sort Features
- Search Bar – Positioned at the top center.
- Allows filtering by title, keyword, or tag.
- Sort Dropdown – Positioned to the right.
- Default sort: Score
- Optional sorting by:
  - Date Published
  - Popularity (views or likes)
  - Duration (if implemented)
Additional Notes
- Podcast list supports infinite scroll or pagination (not shown, but implied by layout).
- Clicking “Watch Full Video” opens either:
- Inline video playback
- Modal lightbox
- Or external player (YouTube)
- If a user is not logged in:
- Like actions may prompt a login/signup flow.
- Liked podcasts persist to the user’s profile and update the sidebar via API.
Backend/API Integration
- Podcast API – Pulls list of YouTube or embedded podcast episodes.
- Like Podcast API – Saves liked episodes linked to user account.
- Search API – Filters episodes by keyword, title, or tag.
- Sort API – Supports sorting logic via query params or backend sorting.

F8. User Profile Flow [#UserProfileFlow]¶

Entry Point
- User accesses their profile by clicking the profile icon in the top right of the navbar.
- From the dropdown menu, they select: “My Profile”.
- This navigates the user to the Profile Page.
Profile Page Layout
- Header Section:
- Profile Picture (avatar with edit icon)
- User Full Name
- Job Title + Organization
- Current Location
- Follower Count (e.g., “Following 12,039”)
- About Section:
- Short bio text is shown.
- “See more” option expands the bio if truncated.
- Edit icon (pencil) opens a modal titled “About”, with:
  - Multiline textarea
  - Buttons: Save and Cancel
- Contact Information
- Professional Email
- Personal Email
- Phone Number
- Each field includes:
  - Edit icon (opens modal with input fields)
  - Checkbox to mark as “Primary Email”
- Modal Details:
- Modal allows editing of:
  - Personal Email
  - Professional Email
  - Phone number
- Buttons: Save and Cancel
- Profile Picture Modal
- Clicking the profile picture opens a modal:
  - Displays larger version of the avatar
  - Icons for upload/edit and delete
Sidebar – “AI Companies”
- Panel titled “AI Companies – From your industry”
- Displays a vertical list of followed or suggested companies
- Each item includes:
- Placeholder logo/initial
- Company name
- Category (e.g., Cyber Security)
- Includes a search input to filter the list
Optimization Section (New)
- Section titled “Optimize Your AI Matches”
- Description: “Tell us a bit about yourself so we can tailor your AI discovery journey.”
- CTA Button: Start
- Note: Clicking “Start” navigates the user to the Optimize Your AI Matches Page.
Additional Functional Notes
- Every editable field opens a modal rather than inline edit.
- All Save buttons trigger an API call to update user data.
- Unauthenticated users are redirected to login if they access this route.
- All inputs should be validated before submission (email format, required fields, etc.).
- Profile picture upload should support preview and replace logic.
- Modal close options include:
- Cancel button
- “X” icon at top right
Backend/API Hooks
- User Profile API – Fetches user data (name, email, bio, phone, location).
- Update User Info API – Saves edits from modals (bio, emails, phone).
- Profile Image Upload API – Handles file uploads, returns asset URL.
- AI Company Suggestions API – Populates the sidebar with recommended companies.
- Optimize Matches Navigation – Navigates user to /optimize-ai or relevant route.

F9. Billing Flow (Planned) [#BillingFlow]¶

User accesses Billing section (future).
Will include:
- Plan overview
- Payment method and invoices
- Stripe integration for subscriptions

F10. Company Detail Page Flow [#CompanyDetailPageFlow]¶

Entry Point
- User clicks a company card from the AI Solutions directory, Top AI, or Home Feed.
- This navigates the user to the Company Detail Page.
Company Detail Page Layout
- Header Section:
- Company Logo (or placeholder icon if missing)
- Company Name (bold title)
- Tags (e.g., Cloud Data Services, AI, Cyber Security)
- Overview: Short Description about the company
- External Links:
  - Website Button (opens company’s site in a new tab)
  - Social Media Links (Facebook, Instagram, YouTube, Twitter, LinkedIn)
- Claimed Badge (if applicable) with Tooltip info
- Call-To-Action Buttons:
  - Follow / Unfollow Button
  - Book Meeting (opens Calendly link)
  - Free Trial (redirects to website page)
- Company Media Section:
- Video Player Embed:
  - Intro Video (2 min)
  - First Call Video
  - Demo Video
  - Play button overlay with duration indicators
- About Section:
- Company bio or extended description
- Information about mission, products, and services
- Best Suited For:
- Tags indicating ideal user personas (e.g., Data Scientists, AI Researchers)
- Where to Use:
- Bullet list explaining use-cases and industries
- Standout Functions:
- Key product features or differentiators listed in bullet points
- Sources & Social Section:
- Career Link
- Event Pages Link
- Customer Portal Link
- Social Media Icons (Facebook, Instagram, YouTube, Twitter, LinkedIn)
Company Content Section
- Company Content Sidebar (sticky on scroll)
- Menu Tabs:
  - Products
  - People
  - Finance
  - Metrics
  - Content
  - News
  - Awards
  - References
  - Feedback
  - Privacy
- Dropdown behavior for responsive view

Products Section:
- Products Listing:
  - user can click any of the product card then data will be updated on the following
    - Card Listing Section
    - References Section
    - Testimonials Section
- Product Card:
  - Name, Short Description
  - Links to Product Details
  - Standout Functions list
  - Embedded Product Demo Videos
- References Section:
  - Preview file option
  - Downloadable Resources (PDF, Whitepapers)
- Testimonials Section:
  - Customer quotes with:
    - Name, Designation, and Company (if applicable)
  - Testimonial cards or slider layout
People Section:
- Lists Executive Leadership, Primary Investors, Board Members
- Cards with Name, Title, and LinkedIn icon for each person
Finance Section:
- Displays key financial data:
  - IPO Status
  - Latest Funding Round
  - Total Funding
  - Annual Revenue
  - Latest Valuation (if available)
Metrics Section:
- Company metrics in card format:
  - Employee count
  - Customer count
  - Client retention rate
Content Section:
- Displays video or media content categorized by topic
- Cards with thumbnail, play icon, and description
News Section:
- Lists recent news articles
- Title, short summary, read more link, published date
- Pagination for multiple pages of news
Awards Section:
- Grid of Award Cards:
  - Award Source Logo
  - Award Name & Source details
References Section:
- Reference Cards with:
  - Testimonial text
  - Person Name, Title, Company
  - LinkedIn link
- Pagination controls for navigation
Feedback Section:
- Feedback form with:
  - Title input
  - Comments textarea
  - Image upload (JPG/PNG, max 5MB)
  - Confirmation checkbox
  - Submit button (Send)
Privacy Section:
- Textual content explaining privacy policies
- Link to detailed Privacy Policy page

Additional Functional Notes
- Responsive layout for desktop & mobile
- Persistent Insights sidebar navigation
- Backend data used for buttons like Book Meeting & Free Trial
- Follow/Unfollow state sync with user authentication
- Tooltips, hover states for badges & social icons
- Resource downloads support PDF preview/download
- Forms (Feedback) validate file type, size & user consent
- Navigations based on the user action for Company Insights Sidebar (Example: Products, People, Finance, etc.)
Backend/API Hooks
- Company Profile API – Fetches company metadata
- Company Media API – Provides videos for embeds
- Follow/Unfollow API – Updates user follow status
- Calendly URL API – Retrieves meeting links
- Free Trial Link API – Gets external signup URLs
- Company Insights API – Retrieves insights for all sections
Company Insights API
- Products API – Fetches list of company products and related details
- People API – Retrieves leadership, investors, board members info
- Finance API – Provides financial data like funding, revenue, IPO status
- Metrics API – Fetches company metrics (employees, customers, retention)
- Content API – Loads media content related to the company
- News API – Retrieves latest news articles about the company
- Awards API – Lists awards and recognitions received by the company
- References API – Provides reference testimonials and pagination data
- Feedback API – Handles feedback submission and validations
- Privacy API – Loads privacy policy content and links
- Resources API – Lists downloadable assets (PDFs, Whitepapers, etc.)
- Testimonials API – Fetches testimonials specific to products
- Feedback Submission API – Handles user-submitted feedback (linked to Feedback section)

F11. Manage Company Profile Flow [#ManageCompanyProfileFlow]¶

Entry Point
- User with a company-linked role accesses the “Manage Company Page” section from the user interface.
Company Management Navigation
- Left sidebar menu includes:
- Company Profile
- Overview & Positioning
- Sources & Social
- Company Insights
- Engagement Dashboard
- Settings
Preview Functionality
- Purpose: Allows users to preview changes to their company profile in real-time before saving
- Implementation:
- Preview toggle button available on each section
- Shows real-time updates without making API calls
- Changes persist locally until explicitly saved
- Features:
- Tab synchronization across different sections
- Local storage for temporary changes
- Real-time visual feedback
- Option to revert to last saved state
- Preview Components:
- Company profile information
- Overview and positioning
- Media content (videos, images)
- Social links and external URLs
- Security:
- Preview data stored securely in local storage
- Automatic cleanup after successful save
- Access restricted to authorized users only
Company Profile Tab
- Fields:
- Company Logo Upload
- Name, Email, Company Founded
- HQ Address, Zip Code, State
- Phone Number, Meeting URL (Calendly) for integrations
- Video Uploads:
- 2 minute intro
- First Call Video
- Demo Video
- Buttons:
- Add Video, Delete, Edit, Save, Cancel
Overview & Positioning Tab
- Structured Inputs:
- Overview (one-line pitch)
- About (short company description)
- Best Suited For → Multi-select tags (e.g., Data Scientists, Project Managers)
- Where to Use → Use cases or environments
- Standout Functions → Unique features
- Market Categories → Tag selection (e.g., SaaS, Cybersecurity)
Sources & Social Tab
- Input fields for company-related external URLs:
- Website
- Career page
- Event Pages
- Customer Portal
- Facebook, Instagram, YouTube, Twitter, LinkedIn
- Buttons:
- Submit, Cancel
Company Insights Section
- From the “Company Insights” section, user selects specific insight pages:
- Products
- People
- Finance
- Metrics
- Content
- News
- Awards
- References
- Feedback

7.1 Products Subsection
- 1. Entry Point
    - User navigates to Manage Company Page → Company Insights → Products.
- 1. Layout and Form Sections
  2. Product Info Section:
    - Fields:
    - Product Name – Required text input
    - Product Type – Text input
    - Product Description – Multiline textarea
    - Product Video – URL field for embedding (e.g., YouTube or Vimeo)
  3. Benefits Section:
    - Max of 3 visible fields by default (each max 100 characters)
    - Add More button reveals more input fields dynamically
  4. Testimonials Section:
    - Each testimonial includes:
    - Client Quote (max 200 characters)
    - Client Name
    - Client Title
    - Company Name
    - Upload field for:
      - Client Photo or Company Logo (only JPG, PNG, or PDF; Max 5MB)
    - Add More button enables adding multiple testimonials
  5. Resources Section:
    - Upload section for downloadable content:
    - Supported file formats: JPG, PNG, PDF
    - Max size: 5MB per file
    - Files stored and shown in list with preview/download option
    - Add More allows multiple resource uploads
- 1. Buttons
  2. Save – Saves the entered content to backend
  3. Cancel – Discards unsaved input
- 1. Functional Notes
  2. Client-side validation before saving:
    - Required fields (e.g., Product Name, Description)
    - File type and size validation
  3. Upload buttons must show error states (invalid file, too large, etc.)
  4. Saved data should appear in a structured preview once saved
  5. Responsive layout supports both desktop and mobile
  6. Each form section collapses/expands for easier navigation
- 1. Backend/API Hooks
  2. Add Product API – Handles saving new product entries
  3. Update Product API – Handles editing existing product data
  4. Delete Product API – Deletes specific product record
  5. Upload Media API – Uploads video URL and resource files (PDF/JPG/PNG)
  6. Testimonials API – Saves customer quote data
  7. Resource File API – Manages list of downloadable product assets
7.2 People Subsection
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → People.
- 1. Layout and Form Sections
  2. Choose Type Dropdown:
    - User selects from one of the following:
    - Executive Leadership
    - Primary Investors
    - Board Members
    - Advisors
    - This selection dynamically alters the required fields shown in the form.
  - Form Field Behavior by Type:
    - Executive Leadership, Board Members, Advisors:
    - Image Upload (Profile Picture – JPG, PNG, PDF; Max 5MB)
    - Name – Required
    - Title – Required
    - LinkedIn URL – Optional
    - Primary Investors:
    - Company Logo Upload (JPG, PNG, PDF; Max 5MB)
    - Investor Name or Investing Company Name – Required
- 1. Buttons
  2. Add More – Adds a new entry for the currently selected type
  3. Save – Commits the changes to backend
  4. Cancel – Discards unsaved data
- 1. Functional Notes
  2. Form dynamically changes based on selected “Choose Type”
  3. Input validation:
    - Required fields enforced per type
    - Uploads validated for file type and size
  4. User can enter multiple individuals in each category by switching dropdown and clicking “Add More”
  5. Saved entries should appear grouped by type (e.g., Executives vs. Investors)
  6. Mobile and desktop layouts supported
- 1. Backend/API Hooks
  2. Add Person API – Adds new entry under selected type
  3. Update Person API – Updates an individual’s data
  4. Delete Person API – Removes entry by ID
  5. People Upload API – Handles image or logo uploads with validations
  6. People Type Metadata API – Returns available person types and associated field schema
7.3 Finance Subsection
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → Finance.
- 1. Layout and Form Sections
  2. IPO Status (Radio Group):
    - Options: Private, Public, Other
    - If “Public” is selected, the Yahoo Finance Link field becomes relevant
  - Latest Funding Round (Dropdown):
    - Predefined fixed values for now:
    - Pre-seed, Seed, Series A–F, Self-funded/Angel, Other
    - May be made dynamic via metadata API in the future
  - Yahoo Finance Link (Conditional Text Field):
    - Appears only when IPO Status is “Public”
    - Accepts a valid URL
  - Latest Valuation (Optional):
    - Numeric or formatted text input (in USD)
  - Annual Revenue (Dropdown):
    - Fixed range options:
    - Less than $1M, $1M–$10M, $10M–$50M, $50M–$100M,
      $100M–$250M, $250M–$500M, $500M–$1B,
      $1B–$10B, $10B+
  - Total Funding (Optional):
    - Numeric input, accepts large funding values in USD
- 1. Buttons
  2. Save – Submits the finance data
  3. Cancel – Resets the section or navigates back without saving
- 1. Functional Notes
  2. Validations:
    - IPO Status is required
    - Yahoo Finance Link must be a valid URL if shown
    - Valuation and Funding fields allow optional large number inputs
    - Dropdowns currently use fixed values but should be modular for future dynamic metadata
  3. Revenue & Funding fields should support formatting and display feedback (e.g., $ prefix)
  4. Backend should support partial updates, allowing flexibility in filling one or more fields
- 1. Backend/API Hooks
  2. Add Finance Info API – Saves all finance-related details
  3. Update Finance Info API – Updates existing records
  4. Delete Finance Info API – Clears financial record (if implemented)
  5. Finance Metadata API – Provides list of dropdown values for:
    - Latest Funding Round
    - Annual Revenue brackets
7.4 Metrics Section
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → Metrics.
- 1. Layout and Form Sections
  2. Total Employees (Dropdown):
    - Predefined fixed ranges:
    - 0–10, 10–25, 25–50, 50–100, 100–200, 200–500,
      500–1000, 1000–2000, 2000–5000, 5000–10000, 10000+
  - Total Customers (Dropdown):
    - Predefined ranges similar to employee selection:
    - 0–10, 10–25, 25–50, 50–100, 100–200, 200–500,
      500–1000, 1000–2000, 2000–5000, 5000+
  - Client Retention %:
    - Plain text input
    - Max 7 characters (e.g., “92%” or “100.0%”)
- 1. Buttons
  2. Save – Submits the metrics
  3. Cancel – Discards the data or exits the edit mode
- 1. Functional Notes
  2. Dropdown values are fixed for now but may become dynamic via API in future
  3. Client Retention field allows only numeric values + optional “%”
  4. Validation Rules:
    - Ensure valid numeric format for retention value
    - No empty input submissions if required in the future
  5. Clean responsive design for desktop and mobile editing
- 1. Backend/API Hooks
  2. Add Metrics API – Saves employee, customer, and retention data
  3. Update Metrics API – Edits submitted metrics
  4. Delete Metrics API – Clears individual or all metrics data (if supported)
  5. Metrics Metadata API – Returns selectable ranges for dropdowns
7.5 Content Subsection
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → Content.
- 1. Layout and Form Sections
  2. Content Gallery (Top Section):
    - Existing videos are shown in card format
    - Includes video title
    - Edit icon to open for updating
    - Trash icon to delete the video
  - Video Form Fields (Add or Edit):
    - Video URL – Required; supports YouTube/Vimeo embed URLs
    - Video Title – Required text input
    - Video Type (Dropdown):
    - Categories:
      - Company Content
      - Technical Product Content
      - Demo Content
      - Podcast & Interview Content
      - Client Content
      - Short Content
      - Other Content
    - Mark Video As (Optional dropdown):
    - Used to feature specific videos
    - Marking Options:
      - Featured Video
      - First Call Video
      - Demo Video
- 1. Buttons
  2. Add Video – Opens the form to input a new content entry
  3. Save – Submits or updates the content video
  4. Cancel – Closes the form without saving
  5. Delete Icon (🗑) – Removes selected video from the list
  6. Edit Icon (✏️) – Opens form to edit selected video
- 1. Functional Notes
  2. Video fields validated for:
    - URL formatting (must be valid embed URL)
    - Required title and video type
  3. Only one video can be marked for each “Mark as” category (e.g., only one “Featured Video”)
  4. Suggested duration for “Featured Videos” is 2 minutes or less
  5. Adding multiple videos is supported via “Add Video”
  6. Clean responsive design to show multiple video cards in a grid
- 1. Backend/API Hooks
  2. Add Content API – Adds new video content to the company’s profile
  3. Update Content API – Edits existing content entries
  4. Delete Content API – Removes video entry
  5. Get Content Types API – Retrieves available categories for video type and marking
  6. Validate Video URL API – Confirms whether the input URL is embeddable and secure
7.6 News Subsection
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → News.
- 1. Layout and Form Sections
  2. Search Bar:
    - Located at the top for searching existing news entries (title or content match)
    - Uses real-time filtering or API-based search
  - Article Link Input:
    - Accepts a direct URL to the article
    - User enters link and clicks Add
    - Auto-fetches metadata (e.g., Title, Summary, Thumbnail) if available
  - News Cards Display:
    - Each added article appears as a card showing:
    - Article title/summary (auto-filled or user-edited)
    - Thumbnail image (auto-populated or placeholder)
    - Edit icon (✏️) to revise the title/summary
    - Delete icon (🗑) to remove the news article
- 1. Buttons
  2. Add – Triggers article addition from the input URL
  3. Save – Commits all visible news changes
  4. Cancel – Discards unsaved edits
- 1. Functional Notes
  2. URL validation is required before allowing Add
  3. Support for auto-scraping article metadata from link (title, thumbnail, date)
  4. Pagination may be used for managing large lists
  5. Manual editing of card content is supported post-fetch
  6. Responsive layout accommodates card-based grid on desktop, stacked on mobile
- 1. Backend/API Hooks
  2. Add News Article API – Accepts and stores a new article link
  3. Fetch Metadata API – Retrieves article info based on submitted URL
  4. Update News Article API – Allows editing of title/summary
  5. Delete News Article API – Removes an existing article
  6. Search News API – Filters added news by title or keywords
7.7 Awards Subsection
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → Awards.
- 1. Layout and Form Sections
  2. Search Bar:
    - Allows filtering of already added awards
    - Real-time match filtering (e.g., by award name or source)
  - Awards Card Display (Grid View):
    - Each award is represented by a card with:
    - Logo (circular thumbnail)
    - Source (e.g., Forbes)
    - Award Name
    - Edit icon (✏️) – To update an award
    - Delete icon (🗑) – To remove the entry
  - Add/Edit Award Form:
    - Source – Text input for the issuing organization
    - Award Name – Text input for the award title
    - Logo Upload – Supported formats: JPG, PNG, PDF; Max 5MB
- 1. Buttons
  2. Add New – Opens the award entry form
  3. Save – Saves a new or updated award entry
  4. Cancel – Discards current changes or closes form
  5. Edit Icon (✏️) – Enables editing of an existing card
  6. Delete Icon (🗑) – Deletes the award from the list
- 1. Functional Notes
  2. Fields like Source and Award Name are required
  3. Image upload should support preview, remove, and replace logic
  4. Users can add multiple awards dynamically
  5. Search works on both Source and Award Name fields
  6. Cards are displayed in a scrollable or paginated grid if too many are added
  7. Responsive layout adapts card view to screen width
- 1. Backend/API Hooks
  2. Add Award API – Adds a new award entry
  3. Update Award API – Updates the selected award
  4. Delete Award API – Deletes the specified award
  5. Award Logo Upload API – Handles image upload/validation for awards
  6. Search Awards API – Enables search functionality on award records
7.8 References Subsection
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → References.
- 1. Layout and Form Sections
  2. Search Bar:
    - Allows filtering of existing references
    - Matches by client name, company name, or title
  - Reference Card Display (Grid):
    - Each card includes:
    - Client Quote (excerpt preview)
    - Name, Title, Company
    - LinkedIn icon (if profile URL is provided)
    - Photo or logo (if uploaded)
    - Edit icon (✏️) to modify the entry
    - Delete icon (🗑) to remove the entry
  - Add/Edit Reference Form:
    - Reference Quote (max 200 characters) – Required
    - Client Name – Required
    - Client Title – Required
    - Company Name – Required
    - Upload Field:
    - Client Photo or Company Logo (JPG, PNG, PDF; Max 5MB)
- 1. Buttons
  2. Add New – Opens the form to create a new reference
  3. Save – Submits the new or updated reference
  4. Cancel – Resets or closes the input form
  5. Edit Icon (✏️) – Opens card in editable state
  6. Delete Icon (🗑) – Removes selected testimonial
- 1. Functional Notes
  2. Validation:
    - All text fields are required
    - Upload field is optional but must be validated
  3. Quote field limited to 200 characters max
  4. Image upload supports optional user/company branding
  5. Grid layout adapts for larger screens; stack layout for mobile
  6. Cards display in scrollable or paginated view if quantity exceeds visible area
- 1. Backend/API Hooks
  2. Add Reference API – Creates new reference/testimonial entry
  3. Update Reference API – Edits an existing entry
  4. Delete Reference API – Deletes testimonial from list
  5. Upload Reference Image API – Handles client image or company logo upload
  6. Search Reference API – Filters records based on user input
7.9 Feedback Section
- 1. Entry Point
  2. User navigates to Manage Company Page → Company Insights → Feedback.
- 1. Layout and Display
  2. Feedback is displayed in a grid format, showcasing multiple feedback cards per row.
  3. Each feedback card includes:
    - Client Quote or Comment (truncated or full depending on length)
    - User Avatar (circular icon)
    - Client Name
    - Designation
    - Company Name (optional or as part of designation line)
- 1. Functional Features
  2. Cards are read-only, meant for display purposes only (no edit/delete for this version).
  3. Feedback entries are fetched dynamically for the selected company.
  4. Pagination or lazy loading is implied for longer feedback lists.
  5. Feedbacks are chronologically sorted (latest first) or optionally by relevance/popularity (if available).
  6. Each card includes hover or tooltip interaction showing full comment if truncated.
  7. Display is responsive:
    - Grid on desktop
    - Stacked vertical list on mobile/tablet
- 1. Functional Notes
  2. The feedback cards are primarily for reputation and engagement display, not meant for moderation by companies.
  3. Only Super-Admins may have moderation access in future versions (not included in this version).
  4. If no feedback is available, a “No feedback yet” placeholder message is shown.
- 1. Backend/API Hooks
  2. Get Feedback API – Fetches feedback entries for the company
  3. Pagination Parameters – For fetching limited results per page (e.g., ?page=2)
  4. Feedback Metadata API (Planned) – Will return stats like total feedback count, average rating (if applicable in future)

Engagement Dashboard
- 1. Entry Point
- User navigates to Manage Company Page → Engagement Dashboard from the sidebar menu.

1. Layout and Display
2. Dashboard displays real-time and historical interaction metrics related to the company profile and content.
3. Key UI sections:
4. Top Metrics Cards:
  - Impression Count – Total impressions for the selected time period.
  - Follow Count – Number of users who followed the company.
  - Visits – Total company profile visits.
  - News Interaction – Count of clicks or views on company-related news.
  - Free Trial Clicks – Number of times the free trial CTA was clicked.
  - Content Interactions – Sum of interactions with media/content (e.g., plays, views).
  - Meetings Booked – Count of Calendly meeting link clicks.
- Graphical Insights:
  - Meetings vs Free Trial – Bar chart comparing the number of meeting bookings vs free trial interactions over time.
  - Visits & Interactions by Product – Area chart showing trends per product (e.g., Product A, Product B).
- Time Filter Buttons:
  - Users can toggle time ranges:
    - This Month, Last Month, This Year, Last 12 Months, Custom Date Range.
1. Functional Features
2. Data auto-refreshes based on selected time filter.
3. Graphs and metrics update dynamically based on API data.
4. Responsive layout:
5. Grid-style arrangement for metrics and graphs on desktop.
6. Vertical stacking on smaller screens.
1. Functional Notes
2. Metrics reflect interaction with the company’s:
3. Profile
4. Products
5. Content
6. Meetings
7. Free Trial buttons
8. Data filters do not persist across sessions (temporary UI state).
9. Users can click “Select Period” to open a custom date picker (if implemented).
10. Tooltips may appear on graphs to show detailed values.
1. Backend/API Hooks
2. Get Engagement Metrics API – Fetches aggregated data for:
3. Impressions, follows, visits, news clicks, content views, etc.
4. Time Filter Params – APIs accept date ranges (e.g., ?from=2024-01-01&to=2024-12-31)
5. Graph Data API – Returns datasets for rendering charts (Meetings vs Free Trial, Product-wise interaction)
6. Calendly Clicks API – Tracks and retrieves meetings booked via external link clicks
7. Free Trial Clicks API – Tracks click events tied to the trial CTA

Settings Section
- 9.1 Setting Privacy Section
- 1. Entry Point
  2. User navigates to Manage Company Page → Settings → Privacy.
- 1. Layout and Display
  2. The section is titled Privacy Policy and is divided into two main parts:
    1. Upload/Link Privacy Policy
    2. Privacy Policy Summary Preview
- Upload/Link Privacy Policy
  - Options:
    - Enter Privacy URL – Allows users to input a direct link to their privacy policy.
    - Upload PDF – Option to upload a PDF document of the privacy policy.
  - Input Field (for URL):
    - Visible only when “Enter Privacy URL” is selected.
    - Field placeholder: Enter Privacy Policy URL
  - Action Buttons:
    - Add – Saves the URL or uploaded file.
    - Cancel – Clears input or closes the active selection.
- Privacy Policy Summary Preview
  - Displays the currently active privacy policy summary.
  - If a PDF was uploaded, may show a preview or summary text.
  - Includes a Remove button to delete the current policy and allow uploading/linking a new one.
- 1. Functional Notes
  2. Users can only choose one method: link or PDF upload (radio toggle behavior).
  3. Only one policy can be active at a time.
  4. Upload restrictions:
  5. Format: PDF
  6. Max Size: Typically 5MB (confirm via backend)
  7. When removed, the system reverts to input state (no active policy).
  8. Supports multilingual privacy policies if provided via file/link.
- 1. Permissions
  2. Only Owner and assigned Editor Roles (via Profile Management) can view and update this section.
  3. Editors can view and update the privacy policy but cannot remove other admin permissions or settings access.
- 1. Backend/API Hooks
  2. Upload Privacy Policy API – Handles file uploads (PDF)
  3. Submit Privacy Link API – Saves URL to be shown in preview section
  4. Get Privacy Policy API – Retrieves current active policy (PDF or URL)
  5. Remove Privacy Policy API – Deletes the active policy from the system

9.2 Profile Management Section
- 1. Entry Point
  2. User navigates to Manage Company Page → Settings → Profile Management.
- 1. Layout and Display
  2. The section is divided into two main parts:
    1. Add Users (Manager Invitation)
    2. Access Control Table
- Add Users Section
  - Label: Add Users
  - Input Field:
  - Accepts Email ID or User ID
  - Placeholder: “write”
  - Action Buttons:
  - Add – Assigns the user with Editor access (see permissions below)
  - Cancel – Clears the input field
- Access Control Table
  - Displays a list of added managers and their access metadata:
  - S.No
  - User Name
  - User Email
  - Joining Date
  - Role (e.g., Owner, Content Manager)
  - Action – “Remove” link for deleting the user (only visible to Owner)
- 1. Add Manager Permissions
    When a user is added via Add User, they are assigned the Editor Role with restricted access. They are allowed to view and manage only the following sections:
- Editor Access Includes:
  - Company Profile
    - View/edit company info like name, logo, video, etc.
  - Overview & Positioning
    - Edit overview, standout functions, use-cases, tags
  - Sources & Social
    - Add/update website, social media, and external links
  - Company Insights
    - Full access to add/update content in all insights subsections:
    - Products
    - People
    - Finance
    - Metrics
    - Content
    - News
    - Awards
    - References
    - Feedback
  - Engagement Dashboard
    - Full visibility into company interaction metrics
  - Settings Page (Read-Only Access)
    - Can view the Profile Management list
    - Cannot add/remove other managers
    - No access to Unpublish Page
  - Editor Cannot Access:
    - Add/Remove team members
    - Unpublish Company Page
    - Admin Dashboard (view Engagement Dashboard)
    - Billing or Subscription Management (if applicable)
- 1. Functional Notes
  2. Adding a user checks if the entered email/User ID is valid and registered.
  3. Duplicate entries should be prevented.
  4. Only Owner role can remove users or add new managers.
  5. Each manager can be assigned multiple roles (e.g., Owner, Content Manager) but the scope of access is controlled by backend logic.
- 1. Backend/API Hooks
  2. Add Manager API – Accepts user ID/email and assigns Editor access
  3. Remove Manager API – Deletes user from access list
  4. Get Access Control List API – Retrieves list of added team members with metadata
  5. Permission Check Middleware – Used throughout company pages to enforce role-based access
9.3 Unpublish Section
- 1. Entry Point
  2. User navigates to Manage Company Page → Settings → Unpublish Page.
- 1. Layout and Display
  2. The section contains a single primary button labeled Unpublish Page.
  3. When clicked, it opens a modal dialog that prompts the user to provide a reason for unpublishing.
- 1. Modal – Unpublish Confirmation
  2. Title: “Why are you unpublishing this page?”
  3. Subtext: Informs the user they can republish the page anytime.
  4. Radio Options (Reasons):
    - The company is no longer active
    - We’re updating the page content
    - This was created by mistake
    - Some other reason (selectable only if the text box is filled)
  - Optional Input Field:
    - Appears when “Some other reason” is selected or always visible (based on final implementation).
    - User can enter a custom reason.
  - Action Buttons:
    - Unpublish Page – Confirms the action
    - Cancel – Closes the modal without saving
- 1. Functional Notes
  2. Unpublishing a page will hide the company profile from public view.
  3. The company page can be republished in the future from the same section.
  4. Once unpublished:
    - The page is marked as “unpublished” in backend
    - It no longer appears in search, listings, or follow feeds
  - The system may show a tooltip/warning message before final confirmation.
  - Note on data: If unpublished and not reactivated within a defined period (e.g., 3 years), the page may be permanently deleted (displayed in UI note).
- 1. Permissions
  2. Only users with the Owner Role can access and perform the Unpublish operation.
  3. Editor Role and others will not see this section in the sidebar.
- 1. Backend/API Hooks
  2. Unpublish Company Page API – Updates the status of the company page
  3. Get Unpublish Reason Metadata API – Retrieves predefined unpublish reasons (radio options)
  4. Submit Unpublish Reason API – Stores selected reason or custom text
  5. Republish Company Page API – (Planned) To enable restoring a previously unpublished page

Additional Rules
- Only users with the Owner Role can:
- Add or remove members from the company.
- Access sensitive settings such as Unpublish Page.
- Modify access control settings in Profile Management.

Users added through Add User (Manager Invitation):
Are assigned the Editor Role.
Can only perform add/update operations on:
- Company Profile
- Overview & Positioning
- Sources & Social
- Company Insights (All subsections)
- Engagement Dashboard
- Settings (read-only for profile members, no access to Unpublish)
Cannot add or remove other team members.
Cannot access Admin-only features or republish the company page.

Third-Party Integration Notes
- Calendly Integration:
- Meeting URL field in the Company Profile section supports Calendly.
- When present, the Book Meeting button appears across:
- Company Detail Page
- Home Feed
- Top AI Companies
- Must be a valid Calendly URL.
- Opens in a new browser tab using:
```
<a href="https://calendly.com/..." target="_blank" rel="noopener noreferrer">Book Meeting</a>
```

Role Validation:
Role-based access control (Owner vs Editor).
Middleware ensures users only access pages they are permitted to view/edit.
Stripe Integration (Future):
Subscription management (shown in Settings > Subscription) will eventually integrate with Stripe.
Not yet implemented in the flow.

F12. Edit Manage Company Page Flow [#EditManageCompanyPageFlow]¶

1. Entry Point
User with an associated role (Owner or Editor) navigates to Manage Company Page from the sidebar.
Edits can be performed on any of the editable sections, based on role permissions.
1. Editable Sections
  | Section | Owner Access | Editor Access |
  |----------------------------|--------------|----------------|
  | Company Profile | ✅ Full | ✅ Full |
  | Overview & Positioning | ✅ Full | ✅ Full |
  | Sources & Social | ✅ Full | ✅ Full |
  | Company Insights (6.1–6.9) | ✅ Full | ✅ Full |
  | Engagement Dashboard | ✅ View | ✅ View |
  | Settings → Privacy | ✅ Full | ✅ Edit only |
  | Settings → Profile Mgmt | ✅ Full | ❌ View only |
  | Settings → Unpublish Page | ✅ Full | ❌ No access |
1. Edit Behavior
Each section has Edit, Save, and Cancel buttons.
Clicking Edit transforms the section into input mode.
Save commits changes via the relevant API.
Cancel discards unsaved changes and resets the section.
Inputs are validated before submission (e.g., URL formats, file size/type, required fields).
1. Functional Notes
Changes made by the Editor are scoped only to permitted sections.
Form states include:
Editable state when clicked
View-only state by default
Multiple sections can be edited independently.
Owner can also add/remove managers and access the Unpublish Page.
Editors cannot manage members or billing settings.
1. Confirmation & Feedback
On success: “Changes saved successfully.”
On error: Inline message (e.g., “Please enter a valid LinkedIn URL.”)
Success/Failure handled via toast notifications or inline states.
1. Backend/API Hooks
  
  These are reused from F11 but invoked in “update” mode.
Update Company Profile API
Update Overview API
Update Sources API
Update Product/People/Finance/Content APIs
Update Privacy Policy API
Update Engagement Metrics API (if ever made editable)
Permission Middleware for Firebase role validation
1. Additional Rules
All access and edit permissions are validated on the backend.
UI logic also hides restricted edit options for unauthorized users.
Unauthenticated users are redirected to login on entry attempt.
1. Versioning (Future Scope)
Current version does not support version history or drafts.
All edits are saved in real-time upon clicking Save.

F13. Help and Support Flow [#HelpAndSupportFlow]¶

Entry Point
- User accesses the Help & Support section via:
- Top navigation icon
- Footer links (e.g., FAQ, Contact Us, Support)

Help & Support Navigation Tabs
- A vertical sidebar contains three primary sections:
- FAQ (default selected on page load)
- Contact Support
- Support Requests

FAQ Section
- Search Bar to filter questions by keywords.
- FAQ Categories:
- Displayed as filter buttons (e.g., All, Account, General, etc.).
- Clicking a category filters the FAQ list accordingly to show only relevant questions.
- FAQ List:
- Each FAQ item appears as a clickable list entry with the question title.
- Clicking on an FAQ redirects the user to a dedicated FAQ Details Page.
- The FAQ Details Page displays the full question and formatted answer.
- Route format: /help/faq/{faq-id-or-slug}

Contact Support Section
- Contains a Contact Support button.
- Clicking the button opens a modal with a contact form:
- Fields:
- Name
- Email
- Subject
- Description of issue
- Buttons:
- Submit (triggers form validation and API submission)
- Cancel (closes the modal)
- Successful submission creates a support message for internal review.

Support Request Section
- Displays previously submitted support tickets (if any).
- Each support request card includes:
- Subject
- Status (e.g., Open, Resolved)
- Preview or brief description
- Button: Create New Ticket
- Opens modal form with:
- Subject
- Description
- File Upload (JPG, PNG, PDF, max size 5MB)
- Submit creates a support request via API

Backend/API Integration
- FAQ API: Fetches a list of frequently asked questions.
- FAQ Details API: Fetches detailed answer based on FAQ ID or slug.
- Contact Support API: Sends user queries to backend support or third-party like Zendesk.
- Support Ticket API:
- Create new ticket (with file upload support)
- Fetch user’s previous support requests

Additional UX/Functional Notes
- All form inputs should be validated (e.g., required fields, email format).
- Modal interactions allow form submission without full page reload.
- File upload component must handle type and size validation.
- If unauthenticated, accessing contact or support request sections prompts login.
- In future iterations, the Start button in the Help/Support section may optionally navigate the user to the Optimize Your AI Matches Page.

F14. Admin Dashboard Flow (Super-Admin) [#AdminDashboardFlow]¶

Entry Points
- Super-Admin accesses the Admin Dashboard via:
- Direct Admin Portal URL: /admin (protected route)
- Special Admin login page with enhanced security
- User Profile Menu (Admin option only visible to Super-Admin users)

Access Control
- Role-Based Access: Only Super-Admin role has full access
- Admin Roles Hierarchy:
- Super-Admin: Full access to all admin functions
- Content Moderator: Limited to content approval workflows
- Support Manager: Access to help and support features only
- Unauthorized users are redirected to home page with error messages

User Management
- User List: Search, filter, and paginate through user records
- User Details: View comprehensive user information, including:
- Account details
- Company associations
- Login history
- Subscription information
- User Actions:
- Update user status (activate, suspend, ban)
- Modify user roles
- Reset user passwords
- View user activity logs

Company Management
- Company List: View companies with filtering by status
- Company Approval Workflow:
- Review pending company registrations
- Verify company details and documents
- Approve or reject registrations with comments
- Request additional information if needed
- Company Administration:
- Manage existing company profiles
- Handle company suspension or removal
- Manage company subscription tiers

Content Moderation
- Moderation Queue: Prioritized list of content requiring review
- Content Categories:
- Posts
- Comments
- User-generated content
- Company profiles
- Moderation Actions:
- Review content details with AI-powered content analysis
- Approve or reject content with feedback
- Flag content for further review
- Handle user reports

System Settings
- Platform Configuration:
- Registration settings
- Content moderation rules
- Security policies
- Feature Flag Management:
- Enable/disable platform features
- Gradual feature rollouts
- Global Notifications:
- Create system-wide announcements
- Schedule maintenance notifications
- Target specific user groups

Analytics and Reporting
- Dashboard Metrics:
- User growth and engagement
- Content creation metrics
- Company participation
- Platform health indicators
- Admin Audit Log:
- Track all administrative actions
- Monitor admin activity for accountability
- Detailed logging for security and compliance
- Report Generation:
- Create custom reports
- Export data in various formats
- Schedule automated reports

Security Features
- Advanced Authentication:
- Mandatory MFA for admin accounts
- Session management and timeout controls
- IP-based login restrictions
- Role-Based Permissions:
- Granular access controls
- Least privilege principle enforcement
- Comprehensive Audit Logging:
- Immutable logs of administrative actions
- Security alerts for sensitive operations

F15. Peresonalized AI Content (Planned) [#PeresonalizedAIContentFlow]¶

This document outlines the plan to implement a personalized homepage feed based on user interests..
Current Implementation include:
- The homepage is rendered by the HomeFeedPage component (src/app/home/page.tsx).
- It uses HomeFeedMain to display the content.
- The getCombinedNewsAndPodcasts function in src/services/modules/home-feed/queries.ts is responsible for fetching data.
- It currently fetches news, podcasts, and AI companies in parallel and combines them on the client-side.
- Data fetching is not personalized and is based on generic filters like category and sorting.
- User data is managed in the UserStore.
Backend (Inferred)
- Separate API endpoints exist for news, podcasts, and companies.
- The backend supports pagination, searching, and filtering on these endpoints.
- There is no concept of user interests or personalized content retrieval.

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search