F12: Edit Manage Company Page Flow - Feature Analysis¶

Overview¶

The Edit Manage Company Page Flow provides a comprehensive interface for authorized company users (Owners and Managers) to modify and update their organization’s presence on the Futr Connect platform. This feature extends the functionality of the Manage Company Profile Flow (F11) by enabling users to edit existing information across various sections of their company profile. The flow maintains strict role-based access controls to ensure that users can only edit content based on their permissions.

Access Control¶

• Owner Role: Full access to edit all sections including the ability to add/remove team members and unpublish the company page
• Manager Role: Access to edit content management areas but cannot add/remove team members or unpublish the page
• Section-Specific Permissions:

API Endpoints¶

1. Update Company Profile Data¶

PATCH /api/company/{company_id}/

2. Update Company address Data¶

PATCH /api/company-address/{company_id}/

3. Update Company social link¶

PATCH /api/company-social-link/{company_id}/

4. Update Company People¶

PATCH /api/people/{people_id}/

5. Update Company Finance Insights¶

PATCH /api/finance/{finance_id}/

6. Update Company Metrics¶

PATCH /api/metric/{metric_id}/

Key Workflow Sections¶

1. Entry Point¶

• Access Method: Users with company-linked roles (Owner or Editor) access the “Manage Company Page” section through the sidebar or profile dropdown
• Authentication Required: Only authorized users can access this section
• Access Control: Role-based permissions determine which specific sections and actions are available to the user
• Navigation: Side navigation menu provides access to all company management areas, identical to F11

2. Edit Behavior¶

• Edit Mode Activation:
• Each section has an “Edit” button that transforms the section into input mode
• Sections in view-only mode display current content with “Edit” button visible
• Multiple sections can be edited independently
• Form Controls:
• “Save” button commits changes via the relevant API endpoints
• “Cancel” button discards unsaved changes and resets the section to view-only mode
• Input validation occurs before submission
• Validation:
• Required fields are enforced with visual indicators
• File uploads validated for type and size constraints
• URLs must follow correct format patterns
• Invalid inputs trigger inline error messages

3. Company Profile Tab Edit Mode¶

• Purpose: Edit core company identity information and digital assets
• Editable Fields:
• Company Logo Upload (JPG, PNG, PDF; Max 5MB)
• Name (required)
• Email (required)
• Company Founded Date
• HQ Address
• Zip Code
• State
• Phone Number
• Meeting URL (Calendly)
• Video Edits:
• Edit existing video URLs and titles
• Delete videos
• Add new videos (same functionality as in F11)
• Form Controls:
• Edit - Transforms section into editable inputs
• Save - Persists changes to backend
• Cancel - Discards unsaved changes
• Preview - Shows how changes will appear in view-only mode

4. Overview & Positioning Tab Edit Mode¶

• Purpose: Edit the company’s market positioning and value proposition
• Editable Inputs:
• Overview (one-line pitch)
• About (short company description)
• Best Suited For - Multi-select tags
• Where to Use - Use cases or implementation environments
• Standout Functions - Unique features
• Market Categories - Tag selection
• Form Controls:
• Edit - Transitions section to edit mode
• Save - Commits changes
• Cancel - Reverts to view-only mode
• Validation occurs on field blur and submission attempt

5. Sources & Social Tab Edit Mode¶

• Purpose: Edit external company resources and social media links
• Editable Fields:
• Website
• Career page
• Event Pages
• Customer Portal
• Social Media Links:
  • Facebook
  • Instagram
  • YouTube
  • Twitter
  • LinkedIn
• Form Controls:
• Edit - Transforms section to input mode
• Save - Submits updated links
• Cancel - Discards changes
• URL validation occurs on field blur and submission

6. Company Insights Edit Modes¶

Each subsection within Company Insights has its own edit functionality:

6.1 People Edit Mode¶

• Functionality:
• Edit person details (name, title, LinkedIn)
• Update profile pictures
• Change person type (e.g., move from Advisor to Board Member)
• Controls:
• Edit - Opens edit form for selected person
• Save - Updates person details
• Cancel - Discards changes
• Delete - Removes person (with confirmation)

6.2 Finance Edit Mode¶

• Functionality:
• Update IPO status
• Change funding round information
• Adjust revenue ranges
• Modify valuation figures
• Controls:
• Edit - Transforms to input mode
• Save - Commits financial updates
• Cancel - Reverts changes

7. Settings Sections Edit Mode¶

7.1 Profile Management Edit Mode¶

• Functionality:
• Add new team members (Owner only)
• Remove existing team members (Owner only)
• View current team members (Owner and Editor)
• Access Control:
• Owner: Full access
• Editor: View-only access

7.2 Unpublish Page Mode¶

• Functionality:
• Unpublish company page with reason selection
• Access Control:
• Owner: Full access
• Editor: No access

State Management¶

same as F11.md

MobX-State-Tree Models for Edit Mode¶

same as F11.md

Database Models¶

The Edit Manage Company Page Flow uses the same database models as F11, with no additional tables or fields required specifically for edit functionality.

Validations and Business Logic¶

Edit Form Validations¶

1. Company Profile Edit Form

• Logo: Accept only JPG, PNG, PDF; Max 5MB
• Name: Required, max 100 chars
• Email: Required, valid email format
• Phone Number: Optional, must match E.164 format
• Meeting URL: Optional, valid URL, must contain “calendly.com”

2. Video Edit Form

• URL: Required, valid URL, must be YouTube or Vimeo embed URL
• Title: Required, max 100 chars
• Type: Required, must be one of: intro, first_call, demo, other

3. Links Edit Form
   - All URLs must be valid URL format
   - Social media links must match the respective platform’s URL pattern

Edit-Specific Business Logic¶

1. Optimistic Updates

• UI updates optimistically to show changes before API confirms success
• Rollback to original state if API call fails

2. Section-Level Edit State

• Each section maintains its own edit state
• Canceling edits in one section doesn’t affect others

3. Form State Management
   - Dirty state tracking to detect unsaved changes
   - Prompt to save/discard if navigating away with unsaved changes
   - Auto-save functionality for certain fields (optional feature)

Third-Party Integrations¶

Auth for Edit Permission Enforcement¶

1. Edit Permission Validation

• Role-specific API endpoints enforce permission rules (Owner vs Editor)
• API returns 403 Forbidden for unauthorized edit attempts

2. Client-Side Permission Handling
   - UI conditionally shows/hides edit controls based on user role
   - Editor-restricted sections display appropriate messages
   - Unauthorized edit attempts trigger user-friendly error messages

File Upload Service Integration¶

1. Image/File Update Logic
   - When updating existing images, old files are marked for deletion
   - New uploads follow the same validation as new content creation
   - Temporary URLs are provided for previewing before committing changes

User Experience Considerations¶

1. Inline Validation and Feedback

• Real-time validation as users type
• Field-level error messages
• Form-level error summarization
• Success/failure notifications via toast or inline alerts

2. Mobile Edit Experience
   - Responsive edit forms with touch-friendly controls
   - Simplified navigation between edit sections on small screens
   - Adaptive layout for form inputs
   - Simplified image uploads for mobile devices

Implementation Notes¶

1. Technical Requirements

• Same tech stack as F11: React with MobX-State-Tree, Django REST Framework
• Edit functionality shares code with creation functionality where possible
• Permission checks implemented at both UI and API levels

2. Edit Performance Considerations

• Edit operations use PATCH instead of PUT to reduce bandwidth
• Image uploads are deferred until form submission
• Form validation occurs client-side before API calls
• Caching mechanisms for frequently accessed data

3. Security Aspects Specific to Edits

• CSRF protection for all edit operations
• Validation of input data to prevent XSS
• Ownership verification for all updated resources
• Database transaction management for multi-step edits

4. Testing Strategy
   - Unit tests for edit validation logic
   - Integration tests for edit API endpoints
   - E2E tests for critical edit flows
   - Visual regression tests for edit mode UI components

Algorithms and Processing Logic¶

1. Concurrent Edit Resolution

function handleEditSubmit(companyId, sectionData, lastKnownTimestamp):
  currentData = fetchCurrentData(companyId, section)

  if currentData.updated_at > lastKnownTimestamp:
    // Data was changed since user started editing
    return promptUserForResolution(currentData, sectionData)

  result = submitUpdate(companyId, sectionData)
  return result

2. Edit Permission Check

function canEditSection(user, company, section):
  if user.role == "owner":
    return true
  else if user.role == "editor":
    if section in ["profile", "positioning", "links", "insights", "privacy"]:
      return true
    else:
      return false
  else:
    return false

3. Form Dirty State Detection

function isDirty(originalData, currentFormData):
  for each field in currentFormData:
    if originalData[field] != currentFormData[field]:
      return true
  return false

4. Navigate Away Protection
   

   function beforeNavigateAway():
     if anyFormIsDirty():
       return "You have unsaved changes. Are you sure you want to leave?"
     return null