StratIQX Documentation

Appearance

Adding New Industries to Strategic Intelligence Onboarding ​

A comprehensive guide for integrating additional industries into your scalable onboarding system.

📋 Overview ​

The Strategic Intelligence Onboarding system is designed to easily accommodate new industries. This guide walks you through the complete process of adding new industry configurations.

🎯 Quick Start Checklist ​

  • [ ] Create industry configuration file
  • [ ] Add industry types to TypeScript definitions
  • [ ] Update industry configs index
  • [ ] Add industry metadata for enhanced UX
  • [ ] Add custom icon (optional)
  • [ ] Test the new industry
  • [ ] Deploy changes

🔧 Step-by-Step Integration ​

Step 1: Create Industry Configuration File ​

Create a new file in src/features/onboarding/industry-configs/ for your industry.

Example: renewable-energy.ts

typescript
import { IndustryConfig } from '../../../types'

export const renewableEnergyConfig: IndustryConfig = {
  id: 'renewable-energy',
  name: 'Renewable Energy',
  description: 'Solar, wind, and clean energy solutions for sustainable power generation',
  
  businessTypes: [
    {
      id: 'solar-installation',
      name: 'Solar Installation',
      description: 'Residential and commercial solar panel installation services'
    },
    {
      id: 'wind-energy',
      name: 'Wind Energy',
      description: 'Wind turbine development and energy generation'
    },
    {
      id: 'energy-storage',
      name: 'Energy Storage',
      description: 'Battery systems and grid storage solutions'
    },
    {
      id: 'green-consulting',
      name: 'Green Energy Consulting',
      description: 'Sustainability and renewable energy advisory services'
    }
  ],

  revenueStreamTypes: [
    {
      id: 'installation-revenue',
      name: 'Installation Services',
      description: 'Revenue from solar/wind installation projects',
      category: 'service'
    },
    {
      id: 'energy-sales',
      name: 'Energy Sales',
      description: 'Revenue from selling generated clean energy',
      category: 'product'
    },
    {
      id: 'maintenance-contracts',
      name: 'Maintenance Contracts',
      description: 'Ongoing maintenance and monitoring services',
      category: 'recurring'
    }
  ],

  supplierCategories: [
    {
      id: 'panel-manufacturers',
      name: 'Solar Panel Manufacturers',
      description: 'Suppliers of photovoltaic panels and components'
    },
    {
      id: 'inverter-suppliers',
      name: 'Inverter Suppliers',
      description: 'Power conversion equipment providers'
    },
    {
      id: 'installation-materials',
      name: 'Installation Materials',
      description: 'Mounting systems, wiring, and installation hardware'
    }
  ],

  competitiveFactors: [
    {
      id: 'cost-per-watt',
      name: 'Cost per Watt',
      description: 'Installation cost efficiency compared to competitors'
    },
    {
      id: 'technology-efficiency',
      name: 'Technology Efficiency',
      description: 'Panel efficiency and energy conversion rates'
    },
    {
      id: 'installation-speed',
      name: 'Installation Speed',
      description: 'Time from contract to system activation'
    }
  ]
}

Step 2: Update TypeScript Types ​

Add your new industry ID to the IndustryType union in src/types/index.ts:

typescript
export type IndustryType = 
  | 'automotive-services'
  | 'construction-equipment'
  | 'heavy-equipment'
  | 'transportation-logistics'
  | 'manufacturing'
  | 'professional-services'
  | 'renewable-energy'  // 👈 Add your new industry
  | 'healthcare'
  | 'technology'
  | 'retail'

Step 3: Update Industry Configs Index ​

Update src/features/onboarding/industry-configs/index.ts:

typescript
import { IndustryConfig, IndustryType } from '../../../types'
import { automotiveServicesConfig } from './automotive-services'
import { constructionEquipmentConfig } from './construction-equipment'
import { heavyEquipmentConfig } from './heavy-equipment'
import { transportationLogisticsConfig } from './transportation-logistics'
import { manufacturingConfig } from './manufacturing'
import { professionalServicesConfig } from './professional-services'
import { renewableEnergyConfig } from './renewable-energy' // 👈 Import new config

export const industryConfigs: Record<IndustryType, IndustryConfig> = {
  'automotive-services': automotiveServicesConfig,
  'construction-equipment': constructionEquipmentConfig,
  'heavy-equipment': heavyEquipmentConfig,
  'transportation-logistics': transportationLogisticsConfig,
  'manufacturing': manufacturingConfig,
  'professional-services': professionalServicesConfig,
  'renewable-energy': renewableEnergyConfig, // 👈 Add to configs
}

// ... rest of the file
export * from './renewable-energy' // 👈 Export new config

Step 4: Add Enhanced Industry Metadata ​

Update the industryMetadata object in src/features/onboarding/components/ScalableIndustryGrid.tsx:

typescript
const industryMetadata: Record<string, Omit<EnhancedIndustryData, 'config'>> = {
  // ... existing industries
  
  'renewable-energy': {
    isPopular: true,           // Mark as popular if it's a common selection
    isEmerging: true,          // Mark as emerging for new/trending industries
    category: 'technology',    // Category: 'manufacturing' | 'services' | 'technology' | 'healthcare' | 'other'
    matchingCompanies: 543,    // Number of companies using your intelligence (for social proof)
    searchKeywords: [          // Alternative search terms
      'renewable', 'energy', 'solar', 'wind', 'green', 'clean energy', 
      'sustainability', 'photovoltaic', 'turbine'
    ]
  },
}

Step 5: Add Custom Icon (Optional) ​

Add an icon for your industry in the industryIcons object in ScalableIndustryGrid.tsx:

typescript
import { 
  // ... existing imports
  Zap  // 👈 Import appropriate icon from lucide-react
} from 'lucide-react'

const industryIcons = {
  // ... existing icons
  'renewable-energy': Zap,  // 👈 Add your industry icon
} as const

Available Lucide Icons for Industries:

  • Zap - Energy/Power
  • Cpu - Technology
  • Heart - Healthcare
  • ShoppingBag - Retail
  • Plane - Aviation
  • Utensils - Food & Beverage
  • GraduationCap - Education
  • Home - Real Estate
  • Leaf - Environmental/Green
  • DollarSign - Finance

Step 6: Test Your New Industry ​

  1. Start Development Server:

    bash
    npm run dev

  2. Test Industry Selection:

    • Navigate to industry selection screen
    • Search for your industry name
    • Test filter buttons (Popular/Emerging)
    • Verify industry card displays correctly
    • Select industry and proceed through onboarding

  3. Verify Intelligence Preview:

    • Confirm revenue streams display
    • Check supplier categories show
    • Validate competitive factors appear

🎨 Customization Options ​

Popularity and Emerging Status ​

Control how your industry appears in the interface:

typescript
{
  isPopular: true,    // Shows "Popular" badge, appears first in list
  isEmerging: true,   // Shows "Emerging" badge, appears in emerging filter
  category: 'technology', // Used for future category-based filtering
}

Social Proof ​

Add credibility with company usage statistics:

typescript
{
  matchingCompanies: 543, // "543+ companies using our intelligence"
}

Search Optimization ​

Make your industry easily discoverable:

typescript
{
  searchKeywords: [
    'renewable', 'energy', 'solar', 'wind', 'green', 
    'clean energy', 'sustainability', 'photovoltaic'
  ]
}

🔍 Advanced Configuration ​

Business Type Categories ​

Structure business types for better organization:

typescript
businessTypes: [
  {
    id: 'b2b-services',
    name: 'B2B Services',
    description: 'Business-to-business renewable energy services',
    category: 'services' // Optional: for future categorization
  },
  {
    id: 'b2c-installation',
    name: 'Residential Installation', 
    description: 'Direct-to-consumer solar installation',
    category: 'installation'
  }
]

Revenue Stream Categorization ​

Organize revenue streams by type:

typescript
revenueStreamTypes: [
  {
    id: 'installation-revenue',
    name: 'Installation Services',
    description: 'One-time installation project revenue',
    category: 'service',        // 'service' | 'product' | 'recurring' | 'licensing'
    recurring: false,           // Optional: indicates recurring nature
    seasonality: 'summer-peak'  // Optional: seasonal patterns
  }
]

Supplier Risk Assessment ​

Include supplier risk factors:

typescript
supplierCategories: [
  {
    id: 'critical-components',
    name: 'Critical Components',
    description: 'Essential parts with limited suppliers',
    riskLevel: 'high',          // Optional: 'low' | 'medium' | 'high'
    geographicRisk: 'asia'      // Optional: geographic concentration
  }
]

🚀 Deployment Checklist ​

Before deploying your new industry:

Code Quality ​

  • [ ] TypeScript compiles without errors
  • [ ] All required fields populated in industry config
  • [ ] Icon displays correctly
  • [ ] Search keywords work as expected

Testing ​

  • [ ] Industry appears in grid
  • [ ] Selection flow works end-to-end
  • [ ] Intelligence preview shows correct data
  • [ ] Mobile responsiveness verified
  • [ ] Search and filtering work

Data Validation ​

  • [ ] Business types are relevant and comprehensive
  • [ ] Revenue streams cover main income sources
  • [ ] Supplier categories include key dependencies
  • [ ] Competitive factors reflect industry dynamics

Documentation ​

  • [ ] Update internal documentation
  • [ ] Inform sales/support teams of new industry
  • [ ] Update marketing materials if needed

📈 Scaling Considerations ​

Performance ​

  • The system efficiently handles 100+ industries
  • Consider lazy loading for very large industry lists
  • Search indexing automatically handles new keywords

Maintenance ​

  • Keep industry configs updated with market changes
  • Review and update competitive factors quarterly
  • Monitor popular industries for trending insights

Analytics ​

  • Track industry selection patterns
  • Monitor custom industry requests for new opportunities
  • Analyze completion rates by industry

🆘 Troubleshooting ​

Common Issues ​

Industry doesn't appear in grid:

  • Check TypeScript type definition includes industry ID
  • Verify industry config is exported in index.ts
  • Ensure industry ID matches exactly

Search doesn't find industry:

  • Add relevant keywords to searchKeywords array
  • Check for typos in industry name/description
  • Verify search terms are lowercase

Icon not displaying:

  • Import correct icon from lucide-react
  • Add mapping in industryIcons object
  • Fallback icon (Briefcase) displays if icon missing

Intelligence preview empty:

  • Ensure revenue streams array has items
  • Verify supplier categories are populated
  • Check competitive factors array

🎯 Best Practices ​

Industry Naming ​

  • Use clear, recognizable industry names
  • Avoid overly technical jargon
  • Consider how users would search for the industry

Configuration Completeness ​

  • Include 3-6 business types for good coverage
  • Add 3-5 revenue streams for comprehensive tracking
  • List 4-8 supplier categories for risk assessment
  • Define 3-5 competitive factors for market analysis

Metadata Optimization ​

  • Mark truly popular industries as popular (impacts sort order)
  • Use emerging flag for new/growing industries
  • Include comprehensive search keywords
  • Set realistic company usage numbers

Icon Selection ​

  • Choose icons that clearly represent the industry
  • Maintain visual consistency with existing icons
  • Test icon clarity at small sizes

📞 Support ​

Need help integrating a new industry? Check these resources:

  • Example Configurations: See existing industry files for reference patterns
  • TypeScript Errors: Ensure all required fields are included in your config
  • UX Questions: Review the ScalableIndustryGrid component for customization options
  • Performance: The system is optimized for 100+ industries out of the box

Your Strategic Intelligence Onboarding system is designed for easy expansion - adding new industries should be straightforward following this guide!

Strategic Intelligence Hub Documentation

Copyright © 2024-present StratIQX