From 5f104bf427ed2222e39851464bb437872fd4fdce Mon Sep 17 00:00:00 2001 From: ajaysi Date: Sat, 16 Aug 2025 20:40:09 +0530 Subject: [PATCH] ALwrity version 0.5.6 --- .../ai_generation/strategy_generator.py | 106 +- docs/api_response_structure_fix.md | 134 -- docs/educational_modal_auto_close_fix.md | 134 -- ...enterprise_modal_implementation_summary.md | 222 --- ...erformance_predictions_card_enhancement.md | 172 -- docs/strategic_insights_card_enhancement.md | 137 -- ...ategy_and_calendar_workflow_integration.md | 372 ++++ docs/strategy_data_display_fix.md | 155 -- docs/strategy_data_transformation_fix.md | 156 -- docs/strategy_empty_datapoints_fix.md | 179 -- docs/strategy_empty_datapoints_fix_updated.md | 152 -- .../components/ContentStrategyBuilder.tsx | 37 +- .../components/CardExpansionWrapper.tsx | 198 +++ .../components/CategoryDetailView.tsx | 97 +- .../hooks/useModalManagement.ts | 70 +- .../StrategyIntelligenceTab.tsx | 91 +- .../components/CompetitiveAnalysisCard.tsx | 49 +- .../components/ImplementationRoadmapCard.tsx | 65 +- .../components/PerformancePredictionsCard.tsx | 71 +- .../components/ProgressiveCard.tsx | 458 +++-- .../components/ReviewConfirmationDialog.tsx | 326 ++++ .../components/ReviewProgressHeader.tsx | 489 +++++ .../components/ReviewStatusIndicator.tsx | 244 +++ .../components/RiskAssessmentCard.tsx | 67 +- .../components/StrategicInsightsCard.tsx | 31 +- .../components/StrategyHeader.tsx | 8 +- .../components/StrategyIntelligence/index.ts | 2 +- .../utils/strategyTransformers.ts | 7 + .../components/StrategyIntelligenceTab.tsx | 103 -- .../StrategyIntelligenceTab.tsx.backup | 1578 ----------------- .../tabs/ContentStrategyTab.tsx | 72 +- frontend/src/stores/contentPlanningStore.ts | 17 +- frontend/src/stores/strategyReviewStore.ts | 189 ++ 33 files changed, 2558 insertions(+), 3630 deletions(-) delete mode 100644 docs/api_response_structure_fix.md delete mode 100644 docs/educational_modal_auto_close_fix.md delete mode 100644 docs/enterprise_modal_implementation_summary.md delete mode 100644 docs/performance_predictions_card_enhancement.md delete mode 100644 docs/strategic_insights_card_enhancement.md create mode 100644 docs/strategy_and_calendar_workflow_integration.md delete mode 100644 docs/strategy_data_display_fix.md delete mode 100644 docs/strategy_data_transformation_fix.md delete mode 100644 docs/strategy_empty_datapoints_fix.md delete mode 100644 docs/strategy_empty_datapoints_fix_updated.md create mode 100644 frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CardExpansionWrapper.tsx create mode 100644 frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewConfirmationDialog.tsx create mode 100644 frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewProgressHeader.tsx create mode 100644 frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewStatusIndicator.tsx delete mode 100644 frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx delete mode 100644 frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx.backup create mode 100644 frontend/src/stores/strategyReviewStore.ts diff --git a/backend/api/content_planning/services/content_strategy/ai_generation/strategy_generator.py b/backend/api/content_planning/services/content_strategy/ai_generation/strategy_generator.py index 04fda346..e415fa7e 100644 --- a/backend/api/content_planning/services/content_strategy/ai_generation/strategy_generator.py +++ b/backend/api/content_planning/services/content_strategy/ai_generation/strategy_generator.py @@ -623,11 +623,18 @@ class AIStrategyGenerator: {json.dumps(base_strategy, indent=2)} Please provide risk assessment including: - 1. Risk identification and analysis - 2. Probability and impact assessment - 3. Mitigation strategies - 4. Contingency planning - 5. Risk monitoring framework + 1. Risk identification and analysis with detailed risk descriptions + 2. Probability and impact assessment for each risk + 3. Specific mitigation strategies for each risk + 4. Contingency planning for high-impact risks + 5. Risk monitoring framework with key indicators + 6. Categorize risks into: technical_risks, market_risks, operational_risks, financial_risks + + IMPORTANT: For risk_categories, categorize each risk into the appropriate category: + - technical_risks: Technology, platform, tool, or technical implementation risks + - market_risks: Market changes, competition, audience shifts, industry trends + - operational_risks: Process, resource, team, or execution risks + - financial_risks: Budget, ROI, cost, or financial performance risks Format as structured JSON with detailed risk analysis and mitigation plans. """ @@ -652,10 +659,54 @@ class AIStrategyGenerator: "risk_categories": { "type": "object", "properties": { - "technical_risks": {"type": "array", "items": {"type": "string"}}, - "market_risks": {"type": "array", "items": {"type": "string"}}, - "operational_risks": {"type": "array", "items": {"type": "string"}}, - "financial_risks": {"type": "array", "items": {"type": "string"}} + "technical_risks": { + "type": "array", + "items": { + "type": "object", + "properties": { + "risk": {"type": "string"}, + "probability": {"type": "string"}, + "impact": {"type": "string"}, + "mitigation": {"type": "string"} + } + } + }, + "market_risks": { + "type": "array", + "items": { + "type": "object", + "properties": { + "risk": {"type": "string"}, + "probability": {"type": "string"}, + "impact": {"type": "string"}, + "mitigation": {"type": "string"} + } + } + }, + "operational_risks": { + "type": "array", + "items": { + "type": "object", + "properties": { + "risk": {"type": "string"}, + "probability": {"type": "string"}, + "impact": {"type": "string"}, + "mitigation": {"type": "string"} + } + } + }, + "financial_risks": { + "type": "array", + "items": { + "type": "object", + "properties": { + "risk": {"type": "string"}, + "probability": {"type": "string"}, + "impact": {"type": "string"}, + "mitigation": {"type": "string"} + } + } + } } }, "mitigation_strategies": {"type": "array", "items": {"type": "string"}}, @@ -1079,6 +1130,8 @@ class AIStrategyGenerator: def _transform_risk_assessment(self, ai_response: Dict[str, Any]) -> Dict[str, Any]: """Transform risk assessment to frontend format.""" + self.logger.info(f"🔍 Transforming risk assessment. Input: {json.dumps(ai_response, indent=2)}") + transformed = { "risks": [], "overall_risk_level": "Medium", @@ -1097,10 +1150,43 @@ class AIStrategyGenerator: } } + # Extract overall risk level + if ai_response.get("overall_risk_level"): + transformed["overall_risk_level"] = ai_response["overall_risk_level"] + # Extract risk data from AI response risks = ai_response.get("risks", []) if risks: transformed["risks"] = risks[:5] # Limit to 5 risks - transformed["mitigation_strategies"] = [risk.get("mitigation", "") for risk in risks[:3]] + # Extract risk categories from AI response + risk_categories = ai_response.get("risk_categories", {}) + if risk_categories: + transformed["risk_categories"] = { + "technical_risks": risk_categories.get("technical_risks", []), + "market_risks": risk_categories.get("market_risks", []), + "operational_risks": risk_categories.get("operational_risks", []), + "financial_risks": risk_categories.get("financial_risks", []) + } + + # Extract mitigation strategies from AI response + mitigation_strategies = ai_response.get("mitigation_strategies", []) + if mitigation_strategies: + transformed["mitigation_strategies"] = mitigation_strategies + else: + # Fallback: extract mitigation from individual risks + if risks: + transformed["mitigation_strategies"] = [risk.get("mitigation", "") for risk in risks[:3] if risk.get("mitigation")] + + # Extract monitoring framework from AI response + monitoring_framework = ai_response.get("monitoring_framework", {}) + if monitoring_framework: + transformed["monitoring_framework"] = { + "key_indicators": monitoring_framework.get("key_indicators", []), + "monitoring_frequency": monitoring_framework.get("monitoring_frequency", "Weekly"), + "escalation_procedures": monitoring_framework.get("escalation_procedures", []), + "review_schedule": monitoring_framework.get("review_schedule", "Monthly") + } + + self.logger.info(f"🔍 Final transformed risk assessment: {json.dumps(transformed, indent=2)}") return transformed \ No newline at end of file diff --git a/docs/api_response_structure_fix.md b/docs/api_response_structure_fix.md deleted file mode 100644 index 3501d9f4..00000000 --- a/docs/api_response_structure_fix.md +++ /dev/null @@ -1,134 +0,0 @@ -# API Response Structure Fix - -## 🚨 **Issue Summary** - -The frontend was not receiving the correct data from backend API endpoints because the backend uses `ResponseBuilder.create_success_response()` which wraps the actual data in a nested structure, but the frontend API methods were returning the entire response instead of extracting the data. - -## 🔍 **Root Cause Analysis** - -### **Backend Response Structure** -The backend uses `ResponseBuilder.create_success_response()` which creates responses like: -```json -{ - "status": "success", - "message": "Operation completed successfully", - "data": { - "user_id": 1, - "strategy": { ... }, // Actual data is nested here - "completed_at": "...", - "strategy_id": 71 - }, - "status_code": 200, - "timestamp": "..." -} -``` - -### **Frontend API Issue** -The frontend API methods were returning `response.data` directly, which included the entire response structure instead of just the actual data. - -## 🛠️ **Solution Implemented** - -### **1. Fixed getLatestGeneratedStrategy** -Updated to extract strategy data from nested structure: - -```typescript -// Before: Returning entire response -return response.data; - -// After: Extracting strategy data -const result = response.data?.data?.strategy; -return result; -``` - -### **2. Fixed All Strategy-Related API Methods** -Updated all strategy-related methods to handle nested response structure: - -```typescript -// Content Strategy APIs -async getStrategies(userId?: number) { - const response = await apiClient.get(`${this.baseURL}/enhanced-strategies`, { params }); - return response.data?.data || response.data; -} - -// Enhanced Strategy APIs -async getEnhancedStrategies(userId?: number): Promise { - const response = await apiClient.get(`${this.baseURL}/enhanced-strategies`, { params }); - return response.data?.data || response.data; -} - -// Calendar Event APIs -async getEvents(userId?: number, filters?: any) { - const response = await apiClient.get(`${this.baseURL}/calendar-events/`, { params }); - return response.data?.data || response.data; -} - -// Gap Analysis APIs -async getGapAnalyses(userId?: number) { - const response = await apiClient.get(`${this.baseURL}/gap-analysis/`, { params }); - return response.data?.data || response.data; -} -``` - -### **3. Updated Hook Logic** -Updated `useStrategyData.ts` to handle the corrected data structure: - -```typescript -if (latestStrategyResponse && latestStrategyResponse.strategic_insights) { - // Now receiving the actual strategy data directly - const transformedStrategy = transformPollingStrategyData(latestStrategyResponse); - setStrategyData(transformedStrategy); -} -``` - -## 📊 **Expected Results** - -### **Before Fix:** -- ❌ **API Methods**: Returning entire response structure -- ❌ **Transformation**: Receiving wrong data structure -- ❌ **Components**: Showing "data not available" -- ❌ **Data Flow**: Broken from API to components - -### **After Fix:** -- ✅ **API Methods**: Extracting actual data from nested structure -- ✅ **Transformation**: Receiving correct strategy data -- ✅ **Components**: Displaying rich AI-generated data -- ✅ **Data Flow**: Complete from API to components - -## 🔧 **Files Modified** - -1. **`frontend/src/services/contentPlanningApi.ts`** - - Fixed `getLatestGeneratedStrategy` to extract strategy data - - Updated all strategy-related API methods - - Updated calendar event API methods - - Updated gap analysis API methods - - Updated enhanced strategy API methods - - Updated onboarding data API methods - -2. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/hooks/useStrategyData.ts`** - - Updated to handle corrected API response structure - - Simplified logic since API now returns actual data - -## 🎯 **Testing** - -To verify the fix: -1. Generate a new strategy using the polling system -2. Navigate to the Content Strategy tab -3. Check browser console for API response logs -4. Verify that all Strategic Intelligence cards display rich data: - - Strategic insights with SWOT analysis - - Competitive analysis with detailed competitors - - Performance predictions with metrics - - Risk assessment with mitigation strategies - - Implementation roadmap with phases - -## 🚀 **Impact** - -This fix resolves the core data flow issue that was preventing the frontend from displaying the rich backend data. All strategy-related functionality should now work correctly, including: - -- ✅ **Strategy Generation**: Complete data flow from backend to frontend -- ✅ **Strategy Display**: Rich data in all Strategic Intelligence cards -- ✅ **Strategy Management**: Proper CRUD operations -- ✅ **Calendar Integration**: Correct data for calendar generation -- ✅ **Gap Analysis**: Proper data extraction and display - -The system now properly handles the backend's nested response structure and extracts the actual data for frontend consumption. diff --git a/docs/educational_modal_auto_close_fix.md b/docs/educational_modal_auto_close_fix.md deleted file mode 100644 index 1a677111..00000000 --- a/docs/educational_modal_auto_close_fix.md +++ /dev/null @@ -1,134 +0,0 @@ -# Educational Modal Auto-Close Fix - -## 🎯 **Issue Summary** - -**Problem**: The educational modal was closing automatically when strategy generation completed, instead of waiting for the user to click the "Next: Review Strategy and Create Calendar" button. - -**Expected Behavior**: -1. User clicks "Create Strategy" -2. Educational modal opens and shows progress -3. Strategy generation completes (100% progress) -4. Modal stays open and shows "Next: Review Strategy and Create Calendar" button -5. User clicks the button to close modal and navigate to Content Strategy tab - -**Actual Behavior**: -1. User clicks "Create Strategy" -2. Educational modal opens and shows progress -3. Strategy generation completes (100% progress) -4. **Modal closes automatically** ❌ -5. User never sees the "Next" button or gets redirected - -## 🔍 **Root Cause Analysis** - -The issue was in the `ActionButtons.tsx` file in the `onComplete` callback of the polling-based strategy generation: - -```typescript -// onComplete callback -(strategy: any) => { - console.log('✅ Strategy generation completed successfully!'); - setCurrentStrategy(strategy); - setShowEducationalModal(false); // ❌ This was the problem! - setError('Strategy created successfully! Check the Strategic Intelligence tab for detailed insights.'); -}, -``` - -The modal was being closed programmatically when the strategy generation completed, preventing the user from seeing the completion state and clicking the "Next" button. - -## 🛠️ **The Solution** - -### **1. Removed Auto-Close on Completion** -```typescript -// onComplete callback -(strategy: any) => { - console.log('✅ Strategy generation completed successfully!'); - setCurrentStrategy(strategy); - // Don't close the modal automatically - let user click the button - // setShowEducationalModal(false); // REMOVED - let user control modal closure - console.log('🎯 Strategy generation complete - modal should stay open for user to click "Next" button'); -}, -``` - -### **2. Kept Auto-Close on Error** -```typescript -// onError callback -(error: string) => { - console.error('❌ Strategy generation failed:', error); - setError(`Strategy generation failed: ${error}`); - setShowEducationalModal(false); // Only close on error -}, -``` - -### **3. Added Debugging** -```typescript -// Debug: Check if progress reached 100% -if (taskStatus.progress >= 100) { - console.log('🎯 Progress reached 100% - modal should show "Next" button'); -} -``` - -## 📋 **Implementation Details** - -### **Files Modified** -- `frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/ActionButtons.tsx` - -### **Changes Made** -1. **Removed automatic modal closure** on successful strategy generation completion -2. **Kept error handling** to close modal only on errors -3. **Added debugging logs** to track progress and completion state -4. **Added debugging to EducationalModal** to verify button state - -### **User Flow After Fix** -1. **User clicks "Create Strategy"** → Enterprise modal appears -2. **User clicks "Proceed with Current Strategy"** → Educational modal opens -3. **Strategy generation runs** → Progress updates in real-time -4. **Generation completes (100%)** → Modal stays open, shows "Next" button -5. **User clicks "Next: Review Strategy and Create Calendar"** → Modal closes, navigates to Content Strategy tab -6. **User sees generated strategy** → Strategy data displayed in Strategic Intelligence section - -## 🎯 **Expected Results** - -### **Before Fix** -- ❌ Modal closed automatically on completion -- ❌ User never saw "Next" button -- ❌ No navigation to Content Strategy tab -- ❌ Poor user experience - -### **After Fix** -- ✅ Modal stays open until user clicks "Next" button -- ✅ User sees completion state and "Next" button -- ✅ Proper navigation to Content Strategy tab -- ✅ Complete user workflow as designed - -## 🔧 **Technical Benefits** - -1. **User Control**: Users control when to close the modal -2. **Clear Completion State**: Users can see when generation is complete -3. **Proper Navigation**: Users are guided to the next step -4. **Better UX**: Complete workflow as designed -5. **Error Handling**: Modal still closes appropriately on errors - -## 🚀 **Testing Steps** - -1. **Generate Strategy**: Click "Create Strategy" and proceed through enterprise modal -2. **Monitor Progress**: Watch educational modal show progress updates -3. **Verify Completion**: Ensure modal stays open when progress reaches 100% -4. **Check Button**: Verify "Next: Review Strategy and Create Calendar" button appears -5. **Test Navigation**: Click button and verify navigation to Content Strategy tab -6. **Verify Data**: Check that strategy data is displayed in Strategic Intelligence section - -## 📊 **Success Metrics** - -- [ ] Educational modal stays open after strategy generation completes -- [ ] "Next: Review Strategy and Create Calendar" button appears at 100% progress -- [ ] User can click the button to close modal -- [ ] Navigation to Content Strategy tab works correctly -- [ ] Strategy data is displayed in the frontend -- [ ] No automatic modal closure on successful completion - ---- - -**Status**: ✅ **IMPLEMENTED** -**Priority**: 🔴 **HIGH** -**Impact**: 🎯 **CRITICAL** - Fixes core user workflow -**Files Modified**: -- `frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/ActionButtons.tsx` diff --git a/docs/enterprise_modal_implementation_summary.md b/docs/enterprise_modal_implementation_summary.md deleted file mode 100644 index e49eb1c8..00000000 --- a/docs/enterprise_modal_implementation_summary.md +++ /dev/null @@ -1,222 +0,0 @@ -# Enterprise Modal Implementation Summary - -## 🎯 **Implementation Status: COMPLETED** ✅ - -### **Issues Fixed** - -#### **1. API Method Missing** ✅ **FIXED** -**Problem**: `contentPlanningApi.startStrategyGenerationPolling` method didn't exist -**Solution**: Added the missing method to `contentPlanningApi.ts` -- **Method**: `startStrategyGenerationPolling(userId: number, strategyName: string)` -- **Method**: `pollStrategyGeneration(taskId, onProgress, onComplete, onError, interval, maxAttempts)` -- **Backend Endpoint**: `/api/content-planning/content-strategy/ai-generation/generate-comprehensive-strategy-polling` - -#### **2. Enterprise Modal Integration** ✅ **FIXED** -**Problem**: Enterprise modal wasn't showing when all categories were reviewed -**Solution**: -- Added proper modal state management -- Added debugging logs to track modal state changes -- Integrated modal with existing strategy creation flow -- Added proper callback functions for modal actions - -#### **3. Modal Closing Issue** ✅ **FIXED** -**Problem**: Strategy input modal was closing automatically after 2 seconds -**Solution**: -- Removed automatic modal closing timeout -- Modal now stays open until user manually closes it -- Added logging to track modal state changes - -#### **4. Close Button Renaming** ✅ **FIXED** -**Problem**: Close button text was generic "View Results" or "Close" -**Solution**: -- Changed button text to "Next: Review & Create Strategy" when generation is complete -- Button remains "Close" during generation process - -### **Files Modified** - -#### **Frontend Files** -1. **`frontend/src/services/contentPlanningApi.ts`** - - Added `startStrategyGenerationPolling` method - - Added `pollStrategyGeneration` method - - Enhanced API service with polling capabilities - -2. **`frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder.tsx`** - - Added enterprise modal state management - - Enhanced `handleCreateStrategy` function to show enterprise modal - - Added debugging logs for modal state tracking - - Integrated enterprise modal with existing flow - -3. **`frontend/src/components/ContentPlanningDashboard/components/EnterpriseDatapointsModal.tsx`** - - Fixed import error (replaced `Branding` icon with `Palette`) - - Complete enterprise modal implementation - - Professional design with comprehensive content - -#### **Documentation Files** -4. **`docs/strategy_enterprise_datapoints_inputs.md`** - - Comprehensive implementation plan - - Enterprise datapoints breakdown - - Progressive disclosure strategy - -5. **`docs/strategy_modal_fixes_and_improvements.md`** - - Summary of fixes and improvements - - Missing datapoints analysis - -### **Enterprise Modal Features** - -#### **🎨 Design & Content** -- **Professional Gradient Design**: Modern UI with gradient backgrounds -- **Comprehensive Value Proposition**: Clear explanation of enterprise benefits -- **Strategy Comparison**: Side-by-side comparison of current vs. enterprise -- **Enterprise Categories**: 7 categories with field counts and descriptions -- **Social Proof**: User testimonial and credibility indicators -- **Process Information**: How AI autofill works for enterprise fields - -#### **📊 Enterprise Categories (30+ Additional Fields)** -1. **Content Distribution & Channel Strategy** (6 fields) -2. **Content Calendar & Planning** (5 fields) -3. **Audience Segmentation & Personas** (6 fields) -4. **Content Performance & Optimization** (5 fields) -5. **Content Creation & Production** (5 fields) -6. **Brand & Messaging Strategy** (5 fields) -7. **Technology & Platform Strategy** (5 fields) - -#### **🚀 User Flow** -1. User completes all 30 current fields -2. User clicks "Create Strategy" button -3. Enterprise modal appears with comprehensive information -4. User chooses: - - **"Proceed with Current Strategy"**: Uses existing 30 fields - - **"Add Enterprise Datapoints"**: Coming soon feature (Phase 2) - -### **Technical Implementation** - -#### **API Integration** -```typescript -// New methods added to contentPlanningApi -async startStrategyGenerationPolling(userId: number, strategyName: string) -async pollStrategyGeneration(taskId, onProgress, onComplete, onError, interval, maxAttempts) -``` - -#### **Modal State Management** -```typescript -const [showEnterpriseModal, setShowEnterpriseModal] = useState(false); - -// Enhanced handleCreateStrategy -const handleCreateStrategy = () => { - const allCategoriesReviewed = Object.keys(completionStats.category_completion).every( - category => Array.from(reviewedCategories).includes(category) - ); - - if (allCategoriesReviewed) { - setShowEnterpriseModal(true); // Show enterprise modal - } else { - originalHandleCreateStrategy(); // Proceed with original logic - } -}; -``` - -#### **Modal Callbacks** -```typescript -// Proceed with current strategy (30 fields) -const handleProceedWithCurrentStrategy = () => { - setShowEnterpriseModal(false); - originalHandleCreateStrategy(); -}; - -// Add enterprise datapoints (coming soon) -const handleAddEnterpriseDatapoints = () => { - setShowEnterpriseModal(false); - // TODO: Implement enterprise datapoints functionality - originalHandleCreateStrategy(); -}; -``` - -### **Current Status** - -#### **✅ Phase 1: Complete** -- Enterprise modal implemented and functional -- Modal shows when all categories are reviewed -- Professional design with comprehensive content -- Proper integration with existing strategy creation flow -- API methods added for future enterprise functionality - -#### **🔄 Phase 2: Coming Soon** -- Progressive disclosure system -- Enterprise datapoints implementation -- Advanced features and contextual display -- Enhanced user experience with interactive features - -### **Testing Results** - -#### **✅ Build Status** -- **Compilation**: Successful with no errors -- **Warnings**: Only unused imports (non-critical) -- **Bundle Size**: 336.44 kB (+2.3 kB) - minimal increase -- **Performance**: No degradation in existing functionality - -#### **✅ Functionality Tests** -- Modal opens when all categories are reviewed -- Modal displays comprehensive enterprise information -- Both action buttons work correctly -- Integration with existing strategy creation flow -- Proper state management and debugging logs - -### **User Experience Benefits** - -#### **🎯 Value Proposition** -- **3x Better Performance**: Strategies with 60+ datapoints show significantly better results -- **Months → Minutes**: Get enterprise-grade analysis in minutes, not months -- **Risk Mitigation**: Comprehensive analysis reduces strategy risks -- **$50K+ Value**: Enterprise consulting value democratized with AI - -#### **📈 Business Impact** -- **Competitive Advantage**: More comprehensive strategy builder than competitors -- **User Satisfaction**: Users can create more detailed and actionable strategies -- **Revenue Potential**: More comprehensive tool can command higher pricing -- **Market Position**: Positions ALwrity as the most comprehensive content strategy tool - -### **Next Steps** - -#### **Immediate (Phase 1)** -1. **User Testing**: Test enterprise modal with real users -2. **Feedback Collection**: Gather user feedback on modal content and design -3. **Performance Monitoring**: Monitor modal performance and user engagement - -#### **Future (Phase 2)** -1. **Enterprise Datapoints Implementation**: Add the 30+ additional fields -2. **Progressive Disclosure**: Implement contextual field display -3. **Advanced Features**: Add interactive features and customization options -4. **Analytics Integration**: Track enterprise feature usage and impact - -### **Success Metrics** - -#### **Functional Metrics** -- ✅ Modal displays correctly when triggered -- ✅ User can proceed with current strategy -- ✅ User can access enterprise information -- ✅ No degradation in existing functionality - -#### **User Experience Metrics** -- **Modal Engagement**: Track how long users spend viewing enterprise information -- **Feature Adoption**: Monitor "Add Enterprise Datapoints" button clicks -- **User Feedback**: Collect qualitative feedback on modal content and design -- **Conversion Rate**: Track users who proceed with current strategy vs. waiting for enterprise - -### **Documentation** - -#### **Technical Documentation** -- API methods documented in `contentPlanningApi.ts` -- Modal integration documented in `ContentStrategyBuilder.tsx` -- State management patterns documented with debugging logs - -#### **User Documentation** -- Enterprise datapoints plan in `docs/strategy_enterprise_datapoints_inputs.md` -- Implementation summary in `docs/strategy_modal_fixes_and_improvements.md` -- Comprehensive guide in `docs/strategy_inputs_autofill_transparency_implementation.md` - ---- - -**Implementation Status**: ✅ **COMPLETED** -**Next Review**: Ready for user testing and Phase 2 planning -**Risk Level**: Low (successful build, no breaking changes) -**Success Probability**: High (based on successful implementation and testing) diff --git a/docs/performance_predictions_card_enhancement.md b/docs/performance_predictions_card_enhancement.md deleted file mode 100644 index 31eae995..00000000 --- a/docs/performance_predictions_card_enhancement.md +++ /dev/null @@ -1,172 +0,0 @@ -# Performance Predictions Card Enhancement - -## 🚨 **Issue Summary** - -The PerformancePredictionsCard component was not displaying all the rich performance prediction data available from the backend. The component was looking for data in the wrong structure, causing many values to show as empty or missing. - -## 🔍 **Root Cause Analysis** - -### **Backend Data Structure (from console logs):** -The backend provides comprehensive performance predictions including: -- **Estimated ROI**: "20-30%" -- **Success Probability**: "85%" -- **Traffic Growth**: { month_3: "25%", month_6: "50%", month_12: "100%" } -- **Engagement Metrics**: { bounce_rate: "35-45%", social_shares: "15-25 per post", time_on_page: "3-5 minutes" } -- **Conversion Predictions**: { content_downloads: "8-12%", email_signups: "3-5%", lead_generation: "5-8%" } - -### **Frontend Issue:** -The component was looking for nested objects like `roi_predictions`, `traffic_predictions`, etc., but the actual data was structured as direct properties. - -## 🛠️ **Solution Implemented** - -### **1. Fixed Data Structure Mapping** -Updated the component to use the correct data structure: - -```typescript -// Before: Looking for nested objects -strategyData.performance_predictions.roi_predictions?.estimated_roi -strategyData.performance_predictions.traffic_predictions?.growth_rate - -// After: Using direct properties -strategyData.performance_predictions.estimated_roi -strategyData.performance_predictions.traffic_growth.month_12 -``` - -### **2. Updated TypeScript Interface** -Updated `PerformancePredictions` interface to match actual backend structure: - -```typescript -export interface PerformancePredictions { - estimated_roi?: string; - success_probability?: string; - traffic_growth?: { - month_3?: string; - month_6?: string; - month_12?: string; - }; - engagement_metrics?: { - bounce_rate?: string; - social_shares?: string; - time_on_page?: string; - }; - conversion_predictions?: { - content_downloads?: string; - email_signups?: string; - lead_generation?: string; - }; - // ... other properties -} -``` - -### **3. Enhanced Summary Content** -Updated summary to show real data instead of hardcoded values: - -```typescript -// Before: Hardcoded values -85% -"ROI Predictions" -"Expected return on investment" - -// After: Dynamic data from backend -{strategyData.performance_predictions.estimated_roi || '20-30%'} -"Performance Predictions" -"Expected ROI and success metrics" -``` - -### **4. Added Missing Sections** -Added comprehensive sections to display all available data: - -#### **Traffic Growth Projections** -- Month 3: 25% -- Month 6: 50% -- Month 12: 100% -- Visual grid layout with color-coded cards - -#### **Engagement Metrics** -- Bounce Rate: 35-45% -- Time on Page: 3-5 minutes -- Social Shares: 15-25 per post -- Detailed list with color-coded indicators - -#### **Conversion Predictions** -- Content Downloads: 8-12% -- Email Signups: 3-5% -- Lead Generation: 5-8% -- Comprehensive conversion metrics - -#### **Success Factors** -- High success probability of 85% -- Expected ROI of 20-30% -- Traffic growth projections -- Lead generation improvements - -## 📊 **Expected Results** - -### **Before Enhancement:** -- ❌ **Summary**: Hardcoded values (85%, "ROI Predictions") -- ❌ **Content**: Missing traffic growth, engagement metrics, conversion predictions -- ❌ **Data Utilization**: ~20% of available data -- ❌ **TypeScript Errors**: Interface mismatch with backend data - -### **After Enhancement:** -- ✅ **Summary**: Dynamic values from backend data -- ✅ **Content**: All performance prediction sections displayed -- ✅ **Complete**: Traffic growth, engagement metrics, conversion predictions -- ✅ **Data Utilization**: 100% of available data -- ✅ **TypeScript Compliant**: Interface matches backend structure - -## 🔧 **Files Modified** - -1. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/PerformancePredictionsCard.tsx`** - - Fixed data structure mapping to use direct properties - - Enhanced summary content with dynamic data - - Added Traffic Growth Projections section - - Added Engagement Metrics section - - Added Conversion Predictions section - - Added Success Factors section - - Updated key metrics preview with real data - -2. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/types/strategy.types.ts`** - - Updated `PerformancePredictions` interface to match backend structure - - Added `success_probability`, `traffic_growth`, `engagement_metrics`, `conversion_predictions` as direct properties - - Maintained backward compatibility with legacy nested objects - -## 🎯 **Data Sections Now Displayed** - -### **1. ROI Summary** -- Estimated ROI: 20-30% -- Success Probability: 85% - -### **2. Traffic Growth Projections** -- Month 3: 25% -- Month 6: 50% -- Month 12: 100% - -### **3. Engagement Metrics** -- Bounce Rate: 35-45% -- Time on Page: 3-5 minutes -- Social Shares: 15-25 per post - -### **4. Conversion Predictions** -- Content Downloads: 8-12% -- Email Signups: 3-5% -- Lead Generation: 5-8% - -### **5. Success Factors** -- High success probability of 85% -- Expected ROI of 20-30% -- Traffic growth from 25% to 100% -- Lead generation improvement of 5-8% - -## 🚀 **Impact** - -This enhancement ensures that users can see the complete performance predictions generated by the AI, including: - -- ✅ **Complete ROI Analysis**: Estimated ROI and success probability -- ✅ **Traffic Projections**: Month-by-month growth predictions -- ✅ **Engagement Insights**: User interaction metrics -- ✅ **Conversion Metrics**: Lead generation and content performance -- ✅ **Success Factors**: Key drivers and risk mitigation -- ✅ **Data Transparency**: All backend data now visible in UI - -The PerformancePredictionsCard now provides a comprehensive view of the AI-generated performance predictions, enabling users to make informed decisions based on the complete performance dataset. diff --git a/docs/strategic_insights_card_enhancement.md b/docs/strategic_insights_card_enhancement.md deleted file mode 100644 index 5784bcc0..00000000 --- a/docs/strategic_insights_card_enhancement.md +++ /dev/null @@ -1,137 +0,0 @@ -# Strategic Insights Card Enhancement - -## 🚨 **Issue Summary** - -The StrategicInsightsCard component was not displaying all the rich strategic insights data available from the backend. While the data was being parsed correctly, the UI was only showing a limited subset of the available information. - -## 🔍 **Root Cause Analysis** - -### **Available Data (from logs):** -The backend provides comprehensive strategic insights including: -- **Market Positioning**: Current position, positioning strength, SWOT analysis -- **Growth Potential**: Market size, growth rate, key drivers -- **SWOT Summary**: Overall score, primary strengths, key opportunities -- **Content Opportunities**: 3 detailed content opportunities -- **Strategic Insights**: Detailed insights with metadata - -### **UI Limitation:** -The component was only displaying: -- Basic market analysis summary -- Limited insights preview -- Content opportunities -- Detailed strategic insights (if available) - -## 🛠️ **Solution Implemented** - -### **1. Enhanced Summary Content** -Updated the summary to show real data instead of hardcoded values: - -```typescript -// Before: Hardcoded values -85% -"Strong market positioning identified" -"High Growth" -"6 months" - -// After: Dynamic data from backend -{strategyData.strategic_insights.market_positioning?.positioning_strength || - strategyData.strategic_insights.swot_summary?.overall_score || 85}% -{strategyData.strategic_insights.market_positioning?.current_position || 'Strong'} market positioning -{strategyData.strategic_insights.growth_potential?.growth_rate || "High Growth"} -{strategyData.strategic_insights.growth_potential?.market_size || "Growing Market"} -``` - -### **2. Added Missing Sections** -Added comprehensive sections to display all available data: - -#### **Market Positioning Section** -- Current position and positioning strength -- Complete SWOT analysis with strengths and opportunities -- Color-coded chips for easy identification - -#### **Growth Potential Section** -- Market size and growth rate indicators -- Key growth drivers with detailed explanations -- Visual indicators for growth metrics - -#### **SWOT Summary Section** -- Overall SWOT score -- Primary strengths list -- Key opportunities list -- Comprehensive analysis summary - -### **3. Enhanced Key Insights Preview** -Updated preview to show meaningful data: - -```typescript -// Show content opportunities as key insights -{strategyData.strategic_insights.content_opportunities?.slice(0, 2).map(...)} - -// Show growth drivers as key insights -{strategyData.strategic_insights.growth_potential?.key_drivers?.slice(0, 1).map(...)} - -// Show SWOT insights -{strategyData.strategic_insights.market_positioning?.swot_analysis?.strengths?.length > 0 && ( - -)} -``` - -## 📊 **Expected Results** - -### **Before Enhancement:** -- ❌ **Summary**: Hardcoded values (85%, "Strong", "High Growth") -- ❌ **Content**: Only basic insights and content opportunities -- ❌ **Missing**: Market positioning, growth potential, SWOT summary -- ❌ **Data Utilization**: ~30% of available data - -### **After Enhancement:** -- ✅ **Summary**: Dynamic values from backend data -- ✅ **Content**: All strategic insights sections displayed -- ✅ **Complete**: Market positioning, growth potential, SWOT summary -- ✅ **Data Utilization**: 100% of available data - -## 🔧 **Files Modified** - -1. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategicInsightsCard.tsx`** - - Enhanced summary content with dynamic data - - Added Market Positioning section with SWOT analysis - - Added Growth Potential section with key drivers - - Added SWOT Summary section with primary strengths and opportunities - - Updated key insights preview to show meaningful data - -## 🎯 **Data Sections Now Displayed** - -### **1. Market Positioning** -- Current Position: "Emerging" -- Positioning Strength: 75% -- SWOT Analysis: - - 3 Strengths (detailed explanations) - - 2 Opportunities (strategic insights) - -### **2. Growth Potential** -- Market Size: "Growing" -- Growth Rate: "High" -- Key Drivers: 3 detailed growth drivers - -### **3. SWOT Summary** -- Overall Score: 75% -- Primary Strengths: 3 key strengths -- Key Opportunities: 2 strategic opportunities - -### **4. Content Opportunities** -- 3 detailed content opportunities with specific recommendations - -### **5. Strategic Insights** -- Detailed insights with metadata (if available) - -## 🚀 **Impact** - -This enhancement ensures that users can see the complete strategic analysis generated by the AI, including: - -- ✅ **Complete Market Analysis**: Full positioning and SWOT analysis -- ✅ **Growth Insights**: Market potential and key drivers -- ✅ **Strategic Summary**: Overall assessment and key takeaways -- ✅ **Actionable Content**: Specific content opportunities -- ✅ **Data Transparency**: All backend data now visible in UI - -The StrategicInsightsCard now provides a comprehensive view of the AI-generated strategic analysis, enabling users to make informed decisions based on the complete dataset. diff --git a/docs/strategy_and_calendar_workflow_integration.md b/docs/strategy_and_calendar_workflow_integration.md new file mode 100644 index 00000000..a2ee6b72 --- /dev/null +++ b/docs/strategy_and_calendar_workflow_integration.md @@ -0,0 +1,372 @@ +# ALwrity Strategy & Calendar Workflow Integration Documentation + +## 🎯 **Overview** + +This document provides a comprehensive implementation guide for enhancing the seamless integration between ALwrity's strategy activation workflow and calendar wizard, focusing on auto-population enrichment, context preservation, and improved calendar generation capabilities. The integration transforms the platform into a unified content strategy and calendar management system. + +## 🏗️ **Architecture Enhancement** + +### **1. Current State Analysis** + +**Existing Implementation**: +- **Strategy Activation**: Independent workflow with review and confirmation system +- **Calendar Wizard**: Standalone 4-step wizard with comprehensive data integration +- **Data Flow**: Separate data sources and processing pipelines +- **User Experience**: Disconnected workflows requiring manual navigation + +**Integration Challenges**: +- **Navigation Gap**: No seamless transition from strategy activation to calendar creation +- **Context Loss**: Strategy context not preserved in calendar wizard +- **Data Redundancy**: Duplicate data collection and processing +- **User Friction**: Manual navigation and re-entry of strategy information + +### **2. Enhanced Architecture Design** + +**Unified Workflow Architecture**: +``` +Strategy Generation → Strategy Review → Strategy Activation → Calendar Wizard → Calendar Generation +``` + +**Integration Components**: +- **Strategy Activation Service**: Enhanced activation with database persistence +- **Navigation Orchestrator**: Automatic redirection with context preservation +- **Context Management System**: Real-time context synchronization +- **Enhanced Auto-Population Engine**: Strategy-aware data integration +- **Unified State Management**: Cross-component state synchronization + +### **3. Data Flow Architecture** + +**Enhanced Data Flow**: +``` +Active Strategy Data → Context Preservation → Calendar Auto-Population → Enhanced Generation → Performance Tracking +``` + +**Data Source Hierarchy**: +1. **Active Strategy Data** (Primary): Confirmed and activated strategy information +2. **Enhanced Strategy Intelligence** (Secondary): Strategic insights and recommendations +3. **Onboarding Data** (Tertiary): Website analysis and user preferences +4. **Gap Analysis** (Quaternary): Content gaps and opportunities +5. **Performance Data** (Quinary): Historical performance and engagement patterns + +## 📊 **Auto-Population Enhancement Specifications** + +### **1. Calendar Configuration Auto-Population** + +**Industry & Business Context Enhancement**: +- **Primary Source**: Active strategy industry analysis and business positioning +- **Enhancement**: Incorporate strategic market positioning and competitive landscape +- **Enrichment**: Add industry-specific best practices and seasonal considerations +- **Validation**: Cross-reference with onboarding data for accuracy verification +- **Reusability**: Industry context can be reused across multiple calendar generations + +**Content Pillars & Strategy Alignment Enhancement**: +- **Primary Source**: Confirmed content pillars from active strategy +- **Enhancement**: Include strategic content themes and messaging frameworks +- **Enrichment**: Add content pillar performance predictions and audience alignment +- **Validation**: Ensure alignment with business goals and target audience +- **Reusability**: Content pillars serve as reusable templates for future calendars + +**Target Audience & Demographics Enhancement**: +- **Primary Source**: Active strategy audience analysis and segmentation +- **Enhancement**: Include behavioral patterns and engagement preferences +- **Enrichment**: Add audience journey mapping and touchpoint optimization +- **Validation**: Cross-reference with performance data for audience validation +- **Reusability**: Audience profiles can be reused for multiple content strategies + +### **2. Content Mix Optimization Enhancement** + +**Strategic Content Distribution Enhancement**: +- **Primary Source**: Active strategy content recommendations and priorities +- **Enhancement**: Include content type performance predictions and audience preferences +- **Enrichment**: Add seasonal content adjustments and trending topic integration +- **Validation**: Ensure balanced distribution across educational, thought leadership, engagement, and promotional content +- **Reusability**: Content mix templates can be reused and adapted for different time periods + +**Platform-Specific Optimization Enhancement**: +- **Primary Source**: Active strategy platform recommendations and audience behavior +- **Enhancement**: Include platform-specific content formats and engagement patterns +- **Enrichment**: Add cross-platform content repurposing strategies and scheduling optimization +- **Validation**: Ensure platform alignment with target audience preferences +- **Reusability**: Platform strategies can be reused and optimized over time + +### **3. Advanced Configuration Auto-Population Enhancement** + +**Optimal Timing & Scheduling Enhancement**: +- **Primary Source**: Active strategy audience behavior analysis and engagement patterns +- **Enhancement**: Include platform-specific optimal posting times and frequency recommendations +- **Enrichment**: Add seasonal timing adjustments and trending topic timing optimization +- **Validation**: Cross-reference with historical performance data for timing accuracy +- **Reusability**: Timing patterns can be reused and refined based on performance data + +**Performance Predictions & Metrics Enhancement**: +- **Primary Source**: Active strategy performance predictions and success metrics +- **Enhancement**: Include ROI projections and conversion rate predictions +- **Enrichment**: Add competitive benchmarking and industry performance comparisons +- **Validation**: Ensure predictions align with business goals and market conditions +- **Reusability**: Performance models can be reused and updated with new data + +**Target Keywords & SEO Integration Enhancement**: +- **Primary Source**: Active strategy keyword opportunities and SEO recommendations +- **Enhancement**: Include keyword difficulty analysis and ranking potential +- **Enrichment**: Add long-tail keyword opportunities and semantic keyword clustering +- **Validation**: Ensure keyword alignment with content strategy and audience intent +- **Reusability**: Keyword strategies can be reused and expanded over time + +## 🤖 **Calendar Generation Enhancement** + +### **1. AI Prompt Engineering Improvements** + +**Strategy-Aware Prompt Construction**: +- **Context Integration**: Incorporate active strategy context and strategic intelligence +- **Goal Alignment**: Ensure calendar generation aligns with confirmed business objectives +- **Audience Focus**: Prioritize audience preferences and engagement patterns from active strategy +- **Performance Optimization**: Include performance predictions and success metrics in generation logic +- **Reusability**: Prompt templates can be reused and adapted for different industries and strategies + +**Enhanced Data Integration**: +- **Multi-Source Synthesis**: Combine active strategy data with historical performance and market insights +- **Quality Assessment**: Implement data quality scoring and confidence level validation +- **Contextual Relevance**: Ensure all data points are relevant to the active strategy context +- **Real-time Updates**: Incorporate latest market trends and competitive intelligence +- **Reusability**: Data integration patterns can be reused across different calendar types + +### **2. Content Generation Intelligence Enhancement** + +**Strategic Content Planning Enhancement**: +- **Content Pillar Alignment**: Generate content that aligns with confirmed content pillars +- **Audience Journey Mapping**: Create content that supports audience journey stages +- **Competitive Differentiation**: Incorporate competitive analysis for content differentiation +- **Performance Optimization**: Include performance predictions for content optimization +- **Reusability**: Content planning frameworks can be reused for different strategies + +**Advanced Content Recommendations Enhancement**: +- **Topic Clustering**: Group related topics for comprehensive content coverage +- **Content Repurposing**: Identify content repurposing opportunities across platforms +- **Trending Integration**: Incorporate trending topics and seasonal content opportunities +- **Engagement Optimization**: Focus on content types that drive maximum engagement +- **Reusability**: Recommendation algorithms can be reused and improved over time + +### **3. Calendar Optimization Features Enhancement** + +**Intelligent Scheduling Enhancement**: +- **Optimal Timing**: Use audience behavior data for optimal posting times +- **Frequency Optimization**: Determine optimal posting frequency based on platform and audience +- **Seasonal Adjustments**: Incorporate seasonal trends and industry-specific timing +- **Cross-Platform Coordination**: Ensure coordinated posting across multiple platforms +- **Reusability**: Scheduling algorithms can be reused and optimized based on performance + +**Performance-Driven Generation Enhancement**: +- **ROI Optimization**: Focus on content types with highest ROI potential +- **Engagement Maximization**: Prioritize content that drives maximum engagement +- **Conversion Optimization**: Include content that supports conversion goals +- **Brand Consistency**: Ensure all content maintains brand voice and messaging +- **Reusability**: Performance models can be reused and updated with new data + +## 🔄 **Navigation & Context Preservation** + +### **1. Seamless Navigation Flow Enhancement** + +**Strategy Activation to Calendar Wizard Navigation**: +- **Automatic Redirection**: Seamless transition from strategy confirmation to calendar wizard +- **Context Preservation**: Maintain all strategy context and user preferences +- **Progress Tracking**: Track user progress through the integrated workflow +- **State Management**: Preserve application state and user selections +- **Reusability**: Navigation patterns can be reused for other workflow integrations + +**Enhanced User Experience**: +- **Guided Workflow**: Provide clear guidance through the integrated process +- **Progress Indicators**: Show progress through strategy activation and calendar creation +- **Error Handling**: Graceful handling of navigation and data flow errors +- **Accessibility**: Ensure accessibility throughout the integrated workflow +- **Reusability**: UX patterns can be reused for other integrated workflows + +### **2. Context Preservation Strategy Enhancement** + +**Strategy Context Maintenance**: +- **Active Strategy Reference**: Maintain reference to the active strategy throughout the process +- **Strategic Intelligence**: Preserve all strategic insights and recommendations +- **User Preferences**: Maintain user-specific configurations and preferences +- **Session Continuity**: Ensure seamless session continuity across components +- **Reusability**: Context preservation mechanisms can be reused for other integrations + +**Data Synchronization Enhancement**: +- **Real-time Updates**: Synchronize data changes across all components +- **Conflict Resolution**: Handle data conflicts and inconsistencies +- **Validation**: Ensure data integrity and consistency throughout the process +- **Caching**: Implement intelligent caching for performance optimization +- **Reusability**: Synchronization patterns can be reused for other data flows + +## 📈 **Performance & Analytics Enhancement** + +### **1. Enhanced Performance Tracking** + +**Strategy-to-Calendar Metrics**: +- **Conversion Tracking**: Track strategy activation to calendar creation conversion rates +- **User Engagement**: Monitor user engagement throughout the integrated workflow +- **Completion Rates**: Track completion rates for the entire strategy-to-calendar process +- **Time Optimization**: Measure time savings from integrated workflow +- **Reusability**: Metrics can be reused for other workflow performance tracking + +**Quality Assessment Enhancement**: +- **Data Quality Metrics**: Track data quality and accuracy throughout the process +- **User Satisfaction**: Monitor user satisfaction with the integrated experience +- **Error Rates**: Track error rates and user friction points +- **Performance Optimization**: Monitor system performance and optimization opportunities +- **Reusability**: Quality assessment frameworks can be reused for other processes + +### **2. Advanced Analytics Integration Enhancement** + +**Strategic Intelligence Analytics Enhancement**: +- **Strategy Performance**: Track strategy performance and effectiveness +- **Calendar Performance**: Monitor calendar performance and engagement +- **Integration Effectiveness**: Measure the effectiveness of strategy-to-calendar integration +- **User Behavior Analysis**: Analyze user behavior patterns and preferences +- **Reusability**: Analytics frameworks can be reused for other integrations + +**Predictive Analytics Enhancement**: +- **Success Prediction**: Predict success rates for strategy-to-calendar workflows +- **Performance Forecasting**: Forecast performance improvements from integration +- **User Journey Optimization**: Optimize user journey based on analytics insights +- **Continuous Improvement**: Use analytics for continuous process improvement +- **Reusability**: Predictive models can be reused and improved over time + +## 🔧 **Technical Implementation Considerations** + +### **1. Data Architecture Enhancement** + +**Enhanced Data Models**: +- **Strategy Activation Model**: Track strategy activation status and metadata +- **Context Preservation Model**: Maintain context across workflow components +- **Auto-Population Model**: Store auto-population rules and data mappings +- **Performance Tracking Model**: Track performance metrics and analytics +- **Reusability**: Data models can be reused for other workflow integrations + +**Data Flow Optimization**: +- **Real-time Synchronization**: Implement real-time data synchronization +- **Caching Strategy**: Optimize caching for performance and data consistency +- **Error Handling**: Implement comprehensive error handling and recovery +- **Validation**: Ensure data validation and integrity throughout the process +- **Reusability**: Data flow patterns can be reused for other integrations + +### **2. State Management Enhancement** + +**Enhanced State Architecture**: +- **Global State Management**: Implement global state for workflow context +- **Component State Synchronization**: Ensure state synchronization across components +- **Persistence Strategy**: Implement state persistence for session continuity +- **Recovery Mechanisms**: Provide state recovery mechanisms for error scenarios +- **Reusability**: State management patterns can be reused for other workflows + +**Context Management Enhancement**: +- **Context Provider**: Implement context provider for strategy and calendar data +- **Context Validation**: Validate context integrity throughout the workflow +- **Context Recovery**: Provide context recovery mechanisms +- **Context Optimization**: Optimize context management for performance +- **Reusability**: Context management patterns can be reused for other integrations + +## 🚀 **Implementation Phases** + +### **Phase 1: Foundation Enhancement (Week 1-2)** +- **Strategy Activation Enhancement**: Implement enhanced strategy activation with database persistence +- **Navigation Integration**: Implement seamless navigation from strategy activation to calendar wizard +- **Context Preservation**: Implement basic context preservation mechanisms +- **Data Flow Optimization**: Optimize data flow between strategy and calendar components +- **Reusability Components**: Create reusable navigation and context management components + +### **Phase 2: Auto-Population Enhancement (Week 3-4)** +- **Active Strategy Integration**: Implement active strategy data integration for auto-population +- **Enhanced Data Sources**: Implement enhanced data source hierarchy and prioritization +- **Validation Mechanisms**: Implement data validation and quality assessment +- **Performance Optimization**: Optimize auto-population performance and accuracy +- **Reusability Components**: Create reusable auto-population and validation components + +### **Phase 3: Calendar Generation Enhancement (Week 5-6)** +- **AI Prompt Enhancement**: Implement enhanced AI prompts with strategy context +- **Content Generation Intelligence**: Implement intelligent content generation and optimization +- **Performance Tracking**: Implement enhanced performance tracking and analytics +- **Quality Assurance**: Implement comprehensive quality assurance and testing +- **Reusability Components**: Create reusable AI prompt and generation components + +### **Phase 4: Advanced Features (Week 7-8)** +- **Advanced Analytics**: Implement advanced analytics and predictive capabilities +- **Performance Optimization**: Implement comprehensive performance optimization +- **User Experience Enhancement**: Implement advanced user experience features +- **Documentation and Training**: Complete documentation and user training materials +- **Reusability Components**: Create reusable analytics and optimization components + +## 📊 **Success Metrics** + +### **Technical Metrics** +- **Navigation Success Rate**: Target 98%+ successful strategy-to-calendar navigation +- **Auto-Population Accuracy**: Target 95%+ accurate auto-population from active strategy +- **Context Preservation**: Target 100% context preservation throughout workflow +- **Performance Optimization**: Target <3 seconds calendar generation time +- **Reusability Index**: Target 80%+ component reusability across workflows + +### **User Experience Metrics** +- **Workflow Completion Rate**: Target 90%+ completion rate for integrated workflow +- **User Satisfaction**: Target 90%+ user satisfaction with integrated experience +- **Time Savings**: Target 50%+ time savings from integrated workflow +- **Error Reduction**: Target 80%+ reduction in user errors and friction +- **Reusability Adoption**: Target 85%+ adoption of reusable components + +### **Business Metrics** +- **Strategy Activation Rate**: Target 85%+ strategy activation rate +- **Calendar Creation Rate**: Target 80%+ calendar creation rate from activated strategies +- **User Retention**: Target 90%+ user retention with integrated workflow +- **ROI Improvement**: Target 25%+ ROI improvement from integrated workflow +- **Component Efficiency**: Target 30%+ efficiency improvement from reusable components + +## 🎯 **Reusability Components** + +### **1. Navigation Components** +- **Workflow Navigator**: Reusable component for managing workflow transitions +- **Progress Tracker**: Reusable component for tracking workflow progress +- **Context Router**: Reusable component for maintaining context during navigation +- **State Synchronizer**: Reusable component for synchronizing state across components + +### **2. Data Integration Components** +- **Data Source Manager**: Reusable component for managing multiple data sources +- **Auto-Population Engine**: Reusable component for intelligent field auto-population +- **Data Validator**: Reusable component for data validation and quality assessment +- **Context Preserver**: Reusable component for preserving context across workflows + +### **3. AI Integration Components** +- **Prompt Builder**: Reusable component for building context-aware AI prompts +- **Response Parser**: Reusable component for parsing and validating AI responses +- **Generation Optimizer**: Reusable component for optimizing AI generation processes +- **Quality Assessor**: Reusable component for assessing AI output quality + +### **4. Analytics Components** +- **Performance Tracker**: Reusable component for tracking workflow performance +- **Metrics Collector**: Reusable component for collecting and analyzing metrics +- **Predictive Model**: Reusable component for predictive analytics and forecasting +- **Optimization Engine**: Reusable component for continuous optimization + +### **5. User Experience Components** +- **Workflow Guide**: Reusable component for guiding users through workflows +- **Progress Indicator**: Reusable component for showing workflow progress +- **Error Handler**: Reusable component for graceful error handling +- **Accessibility Manager**: Reusable component for ensuring accessibility + +## 🎉 **Conclusion** + +This enhancement will transform the ALwrity platform into a truly integrated content strategy and calendar management system. The seamless navigation, enhanced auto-population, and improved calendar generation will provide users with a comprehensive, intelligent, and efficient content planning experience that maximizes the value of their strategic investments. + +The implementation focuses on maintaining the existing robust foundation while adding sophisticated integration capabilities that enhance user experience, improve data accuracy, and optimize content performance. The phased approach ensures smooth implementation with minimal disruption to existing functionality while delivering maximum value to users. + +The emphasis on reusability ensures that components and patterns developed for this integration can be leveraged across other workflows, improving development efficiency and maintaining consistency across the platform. + +**Overall Enhancement Value**: +- **User Experience**: 50%+ improvement in workflow efficiency +- **Data Accuracy**: 95%+ accuracy in auto-population +- **System Performance**: 30%+ improvement in processing speed +- **Component Reusability**: 80%+ reusability across workflows +- **Business Impact**: 25%+ improvement in user engagement and retention + +--- + +**Last Updated**: August 13, 2025 +**Version**: 1.0 +**Status**: Implementation Ready +**Next Review**: September 13, 2025 diff --git a/docs/strategy_data_display_fix.md b/docs/strategy_data_display_fix.md deleted file mode 100644 index 5d6733ce..00000000 --- a/docs/strategy_data_display_fix.md +++ /dev/null @@ -1,155 +0,0 @@ -# Strategy Data Display Fix - -## 🚨 **Issue Summary** - -The frontend was not displaying the rich backend data in the Strategic Intelligence cards. While the backend was generating comprehensive AI data with detailed strategic insights, competitive analysis, performance predictions, implementation roadmap, and risk assessment, the frontend was showing empty arrays and missing data. - -## 🔍 **Root Cause Analysis** - -### **Backend Data Generation (Working Correctly)** -The backend was successfully generating comprehensive strategy data including: -- ✅ **Strategic Insights**: Full SWOT analysis with strengths, opportunities, content opportunities, growth potential -- ✅ **Competitive Analysis**: Detailed competitor analysis with 3 competitors, market gaps, opportunities -- ✅ **Performance Predictions**: ROI, traffic growth, engagement metrics, conversion predictions -- ✅ **Risk Assessment**: 5 detailed risks with mitigation strategies, risk categories, monitoring framework -- ✅ **Implementation Roadmap**: Timeline, phases, resource allocation, SWOT integration - -### **Frontend Data Flow Issues (Broken)** -The issues were in multiple areas: - -1. **API Response Structure Mismatch**: The `getLatestGeneratedStrategy` API was returning the entire response instead of extracting the strategy data -2. **Data Transformation Fallbacks**: The transformation was using fallback values that could override real data -3. **React Object Rendering**: Risk assessment objects were being rendered directly instead of their properties -4. **Missing Debugging**: Insufficient logging to trace data flow issues - -## 🛠️ **Solution Implemented** - -### **1. Fixed API Response Extraction** -Updated `getLatestGeneratedStrategy` in `contentPlanningApi.ts`: - -```typescript -// Before: Returning entire response -return response.data; - -// After: Extracting strategy data -console.log('🔍 getLatestGeneratedStrategy response:', response.data); -return response.data?.strategy || response.data; -``` - -### **2. Enhanced Data Flow Debugging** -Added comprehensive logging in `useStrategyData.ts`: - -```typescript -console.log('🔍 Latest strategy response from API:', latestStrategyResponse); - -if (latestStrategyResponse?.strategy) { - // Handle nested strategy data - const transformedStrategy = transformPollingStrategyData(latestStrategyResponse.strategy); -} else if (latestStrategyResponse) { - // Handle direct strategy data - const transformedStrategy = transformPollingStrategyData(latestStrategyResponse); -} -``` - -### **3. Fixed React Object Rendering** -Updated `RiskAssessmentCard.tsx` to handle object formats: - -```typescript -// Fixed mitigation strategies rendering -primary={typeof strategy === 'string' ? strategy : strategy.mitigation || strategy.risk || 'Mitigation strategy'} - -// Fixed risk categories rendering -primary={typeof risk === 'string' ? risk : risk.risk || 'Risk'} - -// Added null checking for empty arrays -if (!risks || !Array.isArray(risks) || risks.length === 0) { - return null; -} -``` - -### **4. Enhanced Transformation Debugging** -Added detailed logging in `strategyTransformers.ts`: - -```typescript -console.log('🔍 Strategic Insights Raw Data:', strategicInsights); -console.log('🔍 Competitive Analysis Raw Data:', competitiveAnalysis); -console.log('🔍 Performance Predictions Raw Data:', performancePredictions); -console.log('🔍 Implementation Roadmap Raw Data:', implementationRoadmap); -console.log('🔍 Risk Assessment Raw Data:', riskAssessment); -console.log('✅ Transformed Polling Strategy Data:', transformedData); -``` - -### **5. Enhanced Component Debugging** -Added detailed logging in `StrategicInsightsCard.tsx`: - -```typescript -console.log('🔍 StrategicInsightsCard - strategyData:', strategyData); -console.log('🔍 StrategicInsightsCard - strategic_insights:', strategyData?.strategic_insights); -console.log('🔍 StrategicInsightsCard - market_positioning:', strategyData?.strategic_insights?.market_positioning); -console.log('🔍 StrategicInsightsCard - swot_analysis:', strategyData?.strategic_insights?.market_positioning?.swot_analysis); -console.log('🔍 StrategicInsightsCard - strengths:', strategyData?.strategic_insights?.market_positioning?.swot_analysis?.strengths); -console.log('🔍 StrategicInsightsCard - opportunities:', strategyData?.strategic_insights?.market_positioning?.swot_analysis?.opportunities); -``` - -## 📊 **Expected Results** - -### **Before Fix:** -- ❌ Empty arrays: `strengths: Array(0)`, `opportunities: Array(0)`, `key_drivers: Array(0)` -- ❌ Missing data: Strategic insights showing empty arrays despite backend having rich data -- ❌ React errors: Objects being rendered directly as React children -- ❌ Incomplete display: Many sections showing empty or missing data - -### **After Fix:** -- ✅ **Rich Strategic Insights**: Full SWOT analysis with strengths and opportunities displayed -- ✅ **Complete Competitive Analysis**: 3 competitors with detailed analysis, market gaps, opportunities -- ✅ **Performance Predictions**: ROI, traffic growth, engagement metrics, conversion predictions -- ✅ **Risk Assessment**: 5 detailed risks with mitigation strategies (no React errors) -- ✅ **Implementation Roadmap**: Timeline, phases, resource allocation, SWOT integration -- ✅ **Proper Data Flow**: Backend data properly extracted and transformed to frontend format - -## 🔧 **Files Modified** - -1. **`frontend/src/services/contentPlanningApi.ts`** - - Fixed `getLatestGeneratedStrategy` to extract strategy data from response - - Added debugging for API response structure - -2. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/hooks/useStrategyData.ts`** - - Enhanced data flow debugging - - Added handling for both nested and direct strategy data - - Improved error handling and logging - -3. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/RiskAssessmentCard.tsx`** - - Fixed object rendering for mitigation strategies and risks - - Added null checking for empty arrays - - Enhanced error handling for monitoring framework - -4. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/utils/strategyTransformers.ts`** - - Added comprehensive debugging for data transformation - - Enhanced logging for all strategy components - - Improved data extraction and mapping - -5. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategicInsightsCard.tsx`** - - Added detailed debugging for component data reception - - Enhanced logging for strategic insights structure - -## 🎯 **Testing** - -To verify the fix: -1. Generate a new strategy using the polling system -2. Navigate to the Content Strategy tab -3. Check browser console for detailed debugging logs -4. Verify that all data points are properly displayed: - - Strategic insights with full SWOT analysis - - Competitive analysis with detailed competitor information - - Performance predictions with metrics and projections - - Risk assessment with detailed risks and mitigation strategies - - Implementation roadmap with phases and timeline - -## 🚀 **Next Steps** - -With this fix in place, the strategy data display is now working correctly and ready for: -1. **Calendar Generation**: The next phase of development -2. **Enhanced UI**: Further improvements to the strategy display -3. **User Testing**: Validation of the complete workflow - -The system now properly displays all AI-generated strategy data, ensuring users see the full value of the comprehensive strategy generation. diff --git a/docs/strategy_data_transformation_fix.md b/docs/strategy_data_transformation_fix.md deleted file mode 100644 index 6894fa3c..00000000 --- a/docs/strategy_data_transformation_fix.md +++ /dev/null @@ -1,156 +0,0 @@ -# Strategy Data Transformation Fix - -## 🚨 **Issue Summary** - -The final generated strategy displayed in the content strategy tab was not showing all the datapoints from the backend. While the backend was generating rich, comprehensive AI data, the frontend was displaying limited information with many empty arrays. - -## 🔍 **Root Cause Analysis** - -### **Backend Data Generation (Working Correctly)** -The backend was successfully generating comprehensive strategy data including: -- ✅ **Strategic Insights**: Full SWOT analysis, content opportunities, growth potential -- ✅ **Competitive Analysis**: Detailed competitor analysis with 3 competitors -- ✅ **Performance Predictions**: ROI, traffic growth, engagement metrics -- ✅ **Risk Assessment**: 5 detailed risks with mitigation strategies -- ✅ **Implementation Roadmap**: Timeline and structure - -### **Frontend Data Transformation (Broken)** -The issue was in the `transformPollingStrategyData` function in `strategyTransformers.ts`: - -1. **Incorrect Data Mapping**: The transformation function was not properly mapping the backend data structure to frontend expectations -2. **Type Mismatches**: The transformation was creating objects that didn't match the TypeScript interface definitions -3. **Missing Data Extraction**: Many fields were being set to empty arrays instead of extracting the actual backend data - -## 🛠️ **Solution Implemented** - -### **1. Fixed Data Structure Mapping** -Updated `transformPollingStrategyData` to properly extract and map backend data: - -```typescript -// Before: Incorrect mapping -return { - ...strategyData, // This was spreading the raw backend data - strategy_metadata: strategyData.metadata || strategyData.strategy_metadata, - // Missing proper component extraction -} - -// After: Correct mapping -const strategicInsights = strategyData.strategic_insights; -const competitiveAnalysis = strategyData.competitive_analysis; -const performancePredictions = strategyData.performance_predictions; -const implementationRoadmap = strategyData.implementation_roadmap; -const riskAssessment = strategyData.risk_assessment; - -return { - // Proper component-by-component mapping - strategic_insights: strategicInsights ? { - market_positioning: { - positioning_strength: strategicInsights.market_positioning?.positioning_strength || 75, - current_position: strategicInsights.market_positioning?.current_position || "Emerging", - swot_analysis: { - strengths: strategicInsights.market_positioning?.swot_analysis?.strengths || [], - opportunities: strategicInsights.market_positioning?.swot_analysis?.opportunities || [] - } - }, - content_opportunities: strategicInsights.content_opportunities || [], - growth_potential: { - market_size: strategicInsights.growth_potential?.market_size || "Growing", - growth_rate: strategicInsights.growth_potential?.growth_rate || "High", - key_drivers: strategicInsights.growth_potential?.key_drivers || [], - competitive_advantages: strategicInsights.growth_potential?.competitive_advantages || [] - } - } : undefined, - // ... similar mapping for other components -} -``` - -### **2. Fixed TypeScript Type Compliance** -Updated transformations to match the defined TypeScript interfaces: - -```typescript -// Performance Predictions - Fixed to match interface -performance_predictions: performancePredictions ? { - estimated_roi: performancePredictions.estimated_roi || "15-25%", - key_metrics: { - engagement_rate: performancePredictions.engagement_metrics?.time_on_page || "3-5 minutes", - conversion_rate: performancePredictions.conversion_predictions?.lead_generation || "5-8%", - reach_growth: performancePredictions.traffic_growth?.month_12 || "100%", - brand_awareness: performancePredictions.engagement_metrics?.social_shares || "15-25 per post", - market_share: performancePredictions.success_probability || "85%" - }, - timeline_projections: { - "month_1": "Initial setup and content creation", - "month_3": performancePredictions.traffic_growth?.month_3 || "25% growth", - "month_6": performancePredictions.traffic_growth?.month_6 || "50% growth", - "month_12": performancePredictions.traffic_growth?.month_12 || "100% growth" - } -} : undefined -``` - -### **3. Added Debugging and Logging** -Enhanced the transformation function with comprehensive logging: - -```typescript -export const transformPollingStrategyData = (strategyData: any): StrategyData => { - console.log('🔄 Transforming polling strategy data:', strategyData); - - // Extract the actual strategy components from the backend structure - const strategicInsights = strategyData.strategic_insights; - const competitiveAnalysis = strategyData.competitive_analysis; - const performancePredictions = strategyData.performance_predictions; - const implementationRoadmap = strategyData.implementation_roadmap; - const riskAssessment = strategyData.risk_assessment; - - console.log('📊 Extracted components:', { - hasStrategicInsights: !!strategicInsights, - hasCompetitiveAnalysis: !!competitiveAnalysis, - hasPerformancePredictions: !!performancePredictions, - hasImplementationRoadmap: !!implementationRoadmap, - hasRiskAssessment: !!riskAssessment - }); - - // ... transformation logic -} -``` - -## 📊 **Expected Results** - -### **Before Fix:** -- ❌ Empty arrays: `competitive_advantages: Array(0)`, `key_drivers: Array(0)`, `strengths: Array(0)` -- ❌ Missing data: Many sections showed empty arrays despite backend having rich data -- ❌ Value mismatch: UI showed 85% but backend showed 75 for positioning strength - -### **After Fix:** -- ✅ **Rich Data Display**: All backend data properly mapped and displayed -- ✅ **Correct Values**: Positioning strength, content opportunities, growth drivers all showing -- ✅ **Complete Components**: Strategic insights, competitive analysis, performance predictions all populated -- ✅ **Type Safety**: All transformations comply with TypeScript interfaces - -## 🔧 **Files Modified** - -1. **`frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/utils/strategyTransformers.ts`** - - Fixed `transformPollingStrategyData` function - - Added proper data extraction and mapping - - Fixed TypeScript type compliance - - Added debugging and logging - -## 🎯 **Testing** - -To verify the fix: -1. Generate a new strategy using the polling system -2. Navigate to the Content Strategy tab -3. Verify that all data points are properly displayed: - - Strategic insights with full SWOT analysis - - Competitive analysis with detailed competitor information - - Performance predictions with metrics and projections - - Risk assessment with detailed risks and mitigation strategies - - Implementation roadmap with phases and timeline - -## 🚀 **Next Steps** - -With this fix in place, the strategy generation workflow is now complete and ready for: -1. **Calendar Generation**: The next phase of development -2. **Enhanced UI**: Further improvements to the strategy display -3. **User Testing**: Validation of the complete workflow - -The system now properly displays all AI-generated strategy data, ensuring users see the full value of the comprehensive strategy generation. diff --git a/docs/strategy_empty_datapoints_fix.md b/docs/strategy_empty_datapoints_fix.md deleted file mode 100644 index 0dbe236f..00000000 --- a/docs/strategy_empty_datapoints_fix.md +++ /dev/null @@ -1,179 +0,0 @@ -# Strategy Empty Datapoints Fix - -## 🎯 **Issue Summary** - -**Problem**: Most of the existing strategy datapoints were showing up as empty arrays in the frontend, despite the backend successfully generating AI responses. - -**Root Cause**: Data mapping mismatch between AI-generated responses and frontend-expected structure. - -## 🔍 **Root Cause Analysis** - -### **1. Backend Logs Showed Success** -- ✅ Strategy generation completed successfully -- ✅ AI calls working (strategic_intelligence, market_position_analysis, performance_prediction) -- ✅ Strategy saved to database with ID: 63 -- ✅ All AI services completing in reasonable time (13-38 seconds) - -### **2. Frontend Showed Empty Arrays** -The image clearly showed empty arrays for critical fields: -- `competitive_advantages: Array(0)` - **Empty** -- `key_drivers: Array(0)` - **Empty** -- `swot_analysis: {strengths: Array(0), opportunities: Array(0)}` - **Empty** -- `key_opportunities: Array(0)` - **Empty** -- `primary_strengths: Array(0)` - **Empty** - -### **3. Data Quality Issues** -From the logs, data quality problems were identified: -``` -Data quality assessment for user 1: -- Completeness: 0.10 (10% complete) -- Freshness: 0.50 (50% fresh) -- Relevance: 0.00 (0% relevant) -- Confidence: 0.20 (20% confidence) -``` - -## 🛠️ **The Solution** - -### **Problem**: Data Structure Mismatch -The AI was generating responses with different field names than what the frontend expected: - -**AI Generated**: `insights` array with `type`, `insight`, `reasoning` fields -**Frontend Expected**: `competitive_advantages`, `key_drivers`, `swot_analysis` fields - -### **Solution**: Data Transformation Layer -Added a comprehensive data transformation layer in `strategy_generator.py` that maps AI responses to frontend-expected format. - -## 📋 **Implementation Details** - -### **1. Added Transformation Methods** -Created `_transform_ai_response_to_frontend_format()` method that: -- Takes raw AI response -- Maps it to frontend-expected structure -- Ensures all required fields are populated -- Limits arrays to reasonable sizes (3-5 items) - -### **2. Specific Transformations** - -#### **Strategic Insights Transformation** -```python -def _transform_strategic_insights(self, ai_response: Dict[str, Any]) -> Dict[str, Any]: - transformed = { - "market_positioning": { - "positioning_strength": 75, - "current_position": "Emerging", - "swot_analysis": { - "strengths": [], - "opportunities": [] - } - }, - "content_opportunities": [], - "growth_potential": { - "market_size": "Growing", - "growth_rate": "High", - "key_drivers": [], - "competitive_advantages": [] - }, - "swot_summary": { - "overall_score": 75, - "primary_strengths": [], - "key_opportunities": [] - } - } -``` - -#### **Competitive Analysis Transformation** -```python -def _transform_competitive_analysis(self, ai_response: Dict[str, Any]) -> Dict[str, Any]: - transformed = { - "competitors": [], - "market_gaps": [], - "opportunities": [], - "recommendations": [], - "competitive_advantages": { - "primary": [], - "sustainable": [], - "development_areas": [] - }, - "swot_competitive_insights": { - "leverage_strengths": [], - "address_weaknesses": [], - "capitalize_opportunities": [], - "mitigate_threats": [] - } - } -``` - -### **3. Smart Data Extraction** -The transformation methods intelligently extract data from AI responses: - -```python -# Extract insights from AI response -insights = ai_response.get("insights", []) -if insights: - for insight in insights: - insight_type = insight.get("type", "").lower() - insight_text = insight.get("insight", "") - - if "opportunity" in insight_type or "opportunity" in insight_text.lower(): - if "content" in insight_text.lower(): - content_opportunities.append(insight_text) - else: - opportunities.append(insight_text) - elif "strength" in insight_type or "advantage" in insight_type: - if "competitive" in insight_text.lower(): - competitive_advantages.append(insight_text) - else: - strengths.append(insight_text) -``` - -### **4. Updated Generation Methods** -Modified all AI generation methods to use the transformation layer: - -```python -# Before -return response.get("data", {}) - -# After -transformed_response = self._transform_ai_response_to_frontend_format(response.get("data", {}), "strategic_insights") -return transformed_response -``` - -## 🎯 **Expected Results** - -### **Before Fix** -- Empty arrays: `competitive_advantages: Array(0)` -- Missing data: `key_drivers: Array(0)` -- No insights: `swot_analysis: {strengths: Array(0), opportunities: Array(0)}` - -### **After Fix** -- Populated arrays: `competitive_advantages: ["Direct lead generation capabilities", "Authentic personal brand voice", "Thought leadership positioning"]` -- Rich insights: `key_drivers: ["Market growth", "Content demand", "Competitive gaps"]` -- Complete SWOT: `swot_analysis: {strengths: ["Unique perspective", "Agile approach"], opportunities: ["Market gaps", "Content opportunities"]}` - -## 🔧 **Technical Benefits** - -1. **Data Consistency**: Ensures frontend always receives properly structured data -2. **Fallback Values**: Provides sensible defaults when AI responses are incomplete -3. **Array Limits**: Prevents overwhelming the UI with too many items -4. **Error Handling**: Graceful degradation if transformation fails -5. **Maintainability**: Centralized transformation logic for easy updates - -## 🚀 **Next Steps** - -1. **Test the Fix**: Generate a new strategy to verify data is properly populated -2. **Monitor Performance**: Ensure transformation doesn't impact generation speed -3. **Enhance AI Prompts**: Improve AI prompts to generate more structured responses -4. **Add Validation**: Add validation to ensure transformed data meets frontend requirements - -## 📊 **Success Metrics** - -- [ ] All strategy datapoints show populated arrays instead of empty ones -- [ ] Frontend displays meaningful insights and recommendations -- [ ] No degradation in strategy generation performance -- [ ] Improved user experience with rich, actionable data - ---- - -**Status**: ✅ **IMPLEMENTED** -**Priority**: 🔴 **HIGH** -**Impact**: 🎯 **CRITICAL** - Fixes core functionality issue diff --git a/docs/strategy_empty_datapoints_fix_updated.md b/docs/strategy_empty_datapoints_fix_updated.md deleted file mode 100644 index 2343a137..00000000 --- a/docs/strategy_empty_datapoints_fix_updated.md +++ /dev/null @@ -1,152 +0,0 @@ -# Strategy Empty Datapoints Fix - Updated Implementation - -## 🎯 **Issue Summary** - -**Problem**: Most of the existing strategy datapoints were showing up as empty arrays in the frontend, despite the backend successfully generating AI responses. - -**Root Cause**: Multiple issues identified: -1. **API Endpoint Mismatch**: Frontend was calling wrong endpoint -2. **Data Transformation Issues**: Transformation layer was too restrictive -3. **Data Structure Mismatch**: AI response structure didn't match transformation expectations - -## 🔍 **Root Cause Analysis** - -### **1. API Endpoint Issue** -- **Frontend was calling**: `/api/content-planning/enhanced-strategies/latest-generated` -- **Backend endpoint is**: `/api/content-planning/content-strategy/ai-generation/latest-strategy` -- **Result**: Frontend was getting 404 errors or empty data - -### **2. Data Transformation Issues** -- **Problem**: Transformation methods were too restrictive in categorizing AI insights -- **Issue**: Only populating arrays if exact keyword matches were found -- **Result**: Most insights were being ignored, leading to empty arrays - -### **3. Data Structure Mismatch** -- **AI Response Structure**: `insights` array with `type`, `insight`, `reasoning` fields -- **Frontend Expected**: Specific fields like `competitive_advantages`, `key_drivers`, `swot_analysis` -- **Issue**: Transformation wasn't properly mapping between these structures - -## 🛠️ **The Solution** - -### **1. Fixed API Endpoint** -```typescript -// Before (WRONG) -const response = await apiClient.get(`${this.baseURL}/enhanced-strategies/latest-generated`, { params }); - -// After (CORRECT) -const response = await apiClient.get(`${this.baseURL}/content-strategy/ai-generation/latest-strategy`, { params }); -``` - -### **2. Enhanced Data Transformation** - -#### **Improved Strategic Insights Transformation** -```python -def _transform_strategic_insights(self, ai_response: Dict[str, Any]) -> Dict[str, Any]: - # More flexible keyword matching - if any(keyword in insight_type for keyword in ["opportunity", "content", "market"]) or any(keyword in insight_text.lower() for keyword in ["opportunity", "content", "market"]): - if any(keyword in insight_text.lower() for keyword in ["content", "blog", "article", "post", "video", "social"]): - content_opportunities.append(insight_text) - else: - opportunities.append(insight_text) - - # Fallback data population - if not content_opportunities and insights: - content_opportunities = [insight.get("insight", "") for insight in insights[:3]] - if not opportunities and insights: - opportunities = [insight.get("insight", "") for insight in insights[3:6]] -``` - -#### **Enhanced Competitive Analysis Transformation** -```python -def _transform_competitive_analysis(self, ai_response: Dict[str, Any]) -> Dict[str, Any]: - # Handle both insights array and direct fields - insights = ai_response.get("insights", []) - competitors = ai_response.get("competitors", []) - market_gaps = ai_response.get("market_gaps", []) - opportunities = ai_response.get("opportunities", []) - recommendations = ai_response.get("recommendations", []) - - # Ensure we have some data even if categorization didn't work - if not market_gaps and insights: - market_gaps = [insight.get("insight", "") for insight in insights[:3]] -``` - -### **3. Added Debugging Logging** -```python -# Log the raw AI response for debugging -logger.info(f"🔍 Raw AI response for strategic insights: {json.dumps(response.get('data', {}), indent=2)}") - -# Log the transformed response for debugging -logger.info(f"🔄 Transformed strategic insights: {json.dumps(transformed_response, indent=2)}") -``` - -## 📋 **Implementation Details** - -### **1. API Endpoint Fix** -- **File**: `frontend/src/services/contentPlanningApi.ts` -- **Method**: `getLatestGeneratedStrategy` -- **Change**: Updated endpoint path to match backend - -### **2. Enhanced Transformation Methods** -- **File**: `backend/api/content_planning/services/content_strategy/ai_generation/strategy_generator.py` -- **Methods**: - - `_transform_strategic_insights` - - `_transform_competitive_analysis` -- **Improvements**: - - More flexible keyword matching - - Fallback data population - - Better error handling - -### **3. Debugging Enhancements** -- **Added logging** to track AI response structure -- **Added logging** to track transformation results -- **Better error handling** in transformation methods - -## 🎯 **Expected Results** - -### **Before Fix** -- Empty arrays: `competitive_advantages: Array(0)` -- Missing data: `key_drivers: Array(0)` -- No insights: `swot_analysis: {strengths: Array(0), opportunities: Array(0)}` -- API errors: 404 on strategy retrieval - -### **After Fix** -- Populated arrays: `competitive_advantages: ["Direct lead generation capabilities", "Authentic personal brand voice", "Thought leadership positioning"]` -- Rich insights: `key_drivers: ["Market growth", "Content demand", "Competitive gaps"]` -- Complete SWOT: `swot_analysis: {strengths: ["Unique perspective", "Agile approach"], opportunities: ["Market gaps", "Content opportunities"]}` -- Successful API calls: Proper strategy data retrieval - -## 🔧 **Technical Benefits** - -1. **Data Consistency**: Ensures frontend always receives properly structured data -2. **Fallback Values**: Provides sensible defaults when AI responses are incomplete -3. **Flexible Matching**: More robust keyword matching for data categorization -4. **Error Handling**: Graceful degradation if transformation fails -5. **Debugging**: Comprehensive logging for troubleshooting -6. **API Reliability**: Correct endpoint mapping for data retrieval - -## 🚀 **Next Steps** - -1. **Test the Fix**: Generate a new strategy to verify data is properly populated -2. **Monitor Logs**: Check backend logs for transformation debugging information -3. **Verify Frontend**: Ensure Content Strategy tab displays populated data -4. **Performance Check**: Ensure transformation doesn't impact generation speed -5. **User Testing**: Verify end-user experience with populated strategy data - -## 📊 **Success Metrics** - -- [ ] API endpoint returns strategy data successfully -- [ ] All strategy datapoints show populated arrays instead of empty ones -- [ ] Frontend displays meaningful insights and recommendations -- [ ] No degradation in strategy generation performance -- [ ] Improved user experience with rich, actionable data -- [ ] Debugging logs show proper data transformation - ---- - -**Status**: ✅ **IMPLEMENTED** -**Priority**: 🔴 **HIGH** -**Impact**: 🎯 **CRITICAL** - Fixes core functionality issue -**Files Modified**: -- `frontend/src/services/contentPlanningApi.ts` -- `backend/api/content_planning/services/content_strategy/ai_generation/strategy_generator.py` diff --git a/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder.tsx b/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder.tsx index a6e019ea..04481cca 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder.tsx +++ b/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder.tsx @@ -160,6 +160,34 @@ const ContentStrategyBuilder: React.FC = () => { handleShowEducationalInfo } = useEventHandlers(); + // Create a state for educational modal that can be passed to both hooks + const [showEducationalModal, setShowEducationalModal] = useState(false); + const [showEnterpriseModal, setShowEnterpriseModal] = useState(false); + + // Persist enterprise modal state across hot reloads + useEffect(() => { + const savedModalState = sessionStorage.getItem('showEnterpriseModal'); + if (savedModalState === 'true') { + console.log('🎯 Restoring enterprise modal state from sessionStorage'); + setShowEnterpriseModal(true); + } + }, []); + + // Save modal state to sessionStorage when it changes + useEffect(() => { + sessionStorage.setItem('showEnterpriseModal', showEnterpriseModal.toString()); + }, [showEnterpriseModal]); + + // Cleanup sessionStorage on component unmount + useEffect(() => { + return () => { + // Only clear if we're not in the middle of showing the modal + if (!showEnterpriseModal) { + sessionStorage.removeItem('showEnterpriseModal'); + } + }; + }, [showEnterpriseModal]); + // Use strategy creation hook first const { originalHandleCreateStrategy, handleSaveStrategy } = useStrategyCreation({ formData, @@ -171,7 +199,7 @@ const ContentStrategyBuilder: React.FC = () => { setSaving, setGenerationProgress: setStoreGenerationProgress, setEducationalContent: setStoreEducationalContent, - setShowEducationalModal: () => {}, // Temporary placeholder + setShowEducationalModal, // Pass the actual setShowEducationalModal function validateAllFields, getCompletionStats, generateAIRecommendations: (strategyId: string) => generateAIRecommendations(strategyId), @@ -180,15 +208,12 @@ const ContentStrategyBuilder: React.FC = () => { }); const { - showEducationalModal, - setShowEducationalModal, - showEnterpriseModal, - setShowEnterpriseModal, handleProceedWithCurrentStrategy, handleAddEnterpriseDatapoints } = useModalManagement({ aiGenerating, - originalHandleCreateStrategy + originalHandleCreateStrategy, + setShowEnterpriseModal }); const { diff --git a/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CardExpansionWrapper.tsx b/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CardExpansionWrapper.tsx new file mode 100644 index 00000000..9212ba7f --- /dev/null +++ b/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CardExpansionWrapper.tsx @@ -0,0 +1,198 @@ +import React, { useState, useEffect } from 'react'; +import { Box, Paper } from '@mui/material'; +import { motion, AnimatePresence } from 'framer-motion'; +import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material'; + +interface CardExpansionWrapperProps { + children: React.ReactNode; + isExpanded?: boolean; + onExpand?: (expanded: boolean) => void; + gridSize?: { + xs?: number; + sm?: number; + md?: number; + lg?: number; + }; +} + +const CardExpansionWrapper: React.FC = ({ + children, + isExpanded = false, + onExpand, + gridSize = { xs: 12, sm: 12, md: 6, lg: 4 } +}) => { + const [isHovered, setIsHovered] = useState(false); + const [isExpandedState, setIsExpandedState] = useState(false); + + useEffect(() => { + console.log('🎯 CardExpansionWrapper mounted'); + }, []); + + const handleMouseEnter = () => { + console.log('🖱️ Mouse entered card'); + setIsHovered(true); + setIsExpandedState(true); + onExpand?.(true); + }; + + const handleMouseLeave = () => { + console.log('🖱️ Mouse left card'); + setIsHovered(false); + setIsExpandedState(false); + onExpand?.(false); + }; + + const handleClick = () => { + console.log('🖱️ Card clicked'); + }; + + const isExpandedFinal = isExpanded || isExpandedState; + + console.log('🎯 Card expansion state:', { isExpandedFinal, isHovered, isExpandedState }); + + return ( +
+ + + {/* Hover Hint - Only show when not expanded */} + + {!isExpandedFinal && isHovered && ( + + + Expand + + )} + + + + {isExpandedFinal && ( + + ✨ + Expanded for better readability + + )} + + + + {children} + + + +
+ ); +}; + +export default CardExpansionWrapper; diff --git a/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CategoryDetailView.tsx b/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CategoryDetailView.tsx index 2c11f5c5..1ef81a2c 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CategoryDetailView.tsx +++ b/frontend/src/components/ContentPlanningDashboard/components/ContentStrategyBuilder/components/CategoryDetailView.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Box, Typography, @@ -12,17 +12,19 @@ import { ListItem, ListItemIcon, ListItemText, - Grid, - CircularProgress + CircularProgress, + Paper, + Grid } from '@mui/material'; import { School as SchoolIcon, Lightbulb as LightbulbIcon, Psychology as PsychologyIcon, Timeline as TimelineIcon, - CheckCircle as CheckCircleIcon + CheckCircle as CheckCircleIcon, + ExpandMore as ExpandMoreIcon } from '@mui/icons-material'; -import { motion } from 'framer-motion'; +import { motion, AnimatePresence } from 'framer-motion'; import StrategicInputField from '../StrategicInputField'; import { CategoryDetailViewProps, EducationalInfoDialogProps } from '../types/contentStrategy.types'; import { useEnhancedStrategyStore } from '../../../../../stores/enhancedStrategyStore'; @@ -116,8 +118,11 @@ const CategoryDetailView: React.FC = ({ getCategoryColor, getEducationalContent }) => { + const [expandedCard, setExpandedCard] = useState(null); + // Get confidence scores from store const { confidenceScores } = useEnhancedStrategyStore(); + if (!activeCategory) { return ( = ({ ); } + const categoryFields = STRATEGIC_INPUT_FIELDS.filter(field => field.category === activeCategory); + return ( = ({ getEducationalContent={getEducationalContent} /> - {/* Category Fields */} + {/* Category Fields with Hover Expansion */} - {STRATEGIC_INPUT_FIELDS - .filter(field => field.category === activeCategory) - .map((field, index) => { - // Determine grid size based on field type for better layout organization - const type = field.type; - const isWideField = type === 'json'; - const isMediumField = type === 'multiselect' || type === 'select' || type === 'text'; - const isCompactField = type === 'number' || type === 'boolean'; - const forceFullWidth = field.id === 'content_budget' || field.id === 'team_size'; + {categoryFields.map((field, index) => { + // Determine grid size based on field type + const type = field.type; + const isWideField = type === 'json'; + const isMediumField = type === 'multiselect' || type === 'select' || type === 'text'; + const isCompactField = type === 'number' || type === 'boolean'; + const forceFullWidth = field.id === 'content_budget' || field.id === 'team_size'; + + const gridSm = isWideField ? 12 : isMediumField ? 6 : 4; + const gridMd = isWideField ? 12 : isMediumField ? 6 : 4; + const gridLg = isWideField ? 12 : isMediumField ? 6 : 4; - const gridMd = forceFullWidth ? 12 : (isWideField ? 12 : isMediumField ? 6 : 4); - const gridLg = forceFullWidth ? 12 : (isWideField ? 12 : isMediumField ? 6 : 4); - const gridSm = 12; - return ( - - - onUpdateFormField(field.id, value)} - onValidate={() => onValidateFormField(field.id)} - onShowTooltip={() => onShowTooltip(field.id)} - onViewDataSource={() => onViewDataSource(field.id)} - accentColorKey={getCategoryColor(activeCategory) as any} - isCompact={isCompactField} - /> - + + + onUpdateFormField(field.id, value)} + onValidate={() => onValidateFormField(field.id)} + onShowTooltip={() => onShowTooltip(field.id)} + onViewDataSource={() => onViewDataSource(field.id)} + accentColorKey={getCategoryColor(activeCategory) as any} + isCompact={isCompactField} + /> + ); })} @@ -218,18 +223,10 @@ const CategoryDetailView: React.FC = ({ {(() => { const isReviewed = reviewedCategories.has(activeCategory); - console.log('🔍 Category review status:', { - activeCategory, - isReviewed, - reviewedCategories: Array.from(reviewedCategories) - }); return !isReviewed ? ( - )} - - )} - - {/* Summary Section - Always Visible */} - - {summary} - - - {/* Progressive Details Section */} - - {isExpanded && ( - - - - {details} - - - - )} - - - {/* Hover Indicator (for hover trigger) */} - {trigger === 'hover' && !isExpanded && ( - + <> + + + + {/* Header Section */} + {title && ( - - - Hover to see more - + + {icon && ( + + {icon} + + )} + + + {title} + + {subtitle && ( + + {subtitle} + + )} + + + + {/* Review Status Indicator */} + {componentId && ( + + + + )} + + {/* Trigger Button */} + {trigger === 'click' && ( + + )} - - )} - - - + )} + + {/* Summary Section - Always Visible */} + + {summary} + + + {/* Progressive Details Section */} + + {isExpanded && ( + + + + {details} + + + + )} + + + {/* Hover Indicator (for hover trigger) */} + {trigger === 'hover' && !isExpanded && ( + + + + + Hover to see more + + + + )} + + {/* Full Width Expansion Indicator */} + {trigger === 'hover' && isExpanded && ( + + + + ✨ Expanded to full width for better readability + + + + )} + + + + + {/* Review Confirmation Dialog */} + {componentId && ( + setShowReviewDialog(false)} + onConfirm={handleConfirmReview} + componentId={componentId} + componentTitle={title || ''} + componentSubtitle={subtitle || ''} + isConfirming={isConfirmingReview} + /> + )} + ); }; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewConfirmationDialog.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewConfirmationDialog.tsx new file mode 100644 index 00000000..ecf031d4 --- /dev/null +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewConfirmationDialog.tsx @@ -0,0 +1,326 @@ +import React, { useState } from 'react'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Button, + Typography, + Box, + TextField, + Chip, + List, + ListItem, + ListItemIcon, + ListItemText, + CircularProgress +} from '@mui/material'; +import { + CheckCircle as CheckCircleIcon, + Lightbulb as LightbulbIcon, + TrendingUp as TrendingUpIcon, + ShowChart as ShowChartIcon, + Timeline as TimelineIcon, + Warning as WarningIcon, + Close as CloseIcon +} from '@mui/icons-material'; +import { motion } from 'framer-motion'; +import { ANALYSIS_CARD_STYLES } from '../styles'; + +interface ReviewConfirmationDialogProps { + open: boolean; + onClose: () => void; + onConfirm: (notes?: string) => void; + componentId: string; + componentTitle: string; + componentSubtitle: string; + isConfirming?: boolean; +} + +const ReviewConfirmationDialog: React.FC = ({ + open, + onClose, + onConfirm, + componentId, + componentTitle, + componentSubtitle, + isConfirming = false +}) => { + const [notes, setNotes] = useState(''); + + const getComponentIcon = (id: string) => { + switch (id) { + case 'strategic_insights': + return ; + case 'competitive_analysis': + return ; + case 'performance_predictions': + return ; + case 'implementation_roadmap': + return ; + case 'risk_assessment': + return ; + default: + return ; + } + }; + + const getComponentSummary = (id: string) => { + switch (id) { + case 'strategic_insights': + return [ + 'Market positioning analysis', + 'Growth potential assessment', + 'SWOT analysis summary', + 'Content opportunities identification' + ]; + case 'competitive_analysis': + return [ + 'Competitor landscape analysis', + 'Market gaps identification', + 'Competitive advantages', + 'Strategic recommendations' + ]; + case 'performance_predictions': + return [ + 'ROI projections', + 'Traffic growth forecasts', + 'Engagement metrics predictions', + 'Success probability assessment' + ]; + case 'implementation_roadmap': + return [ + 'Project timeline and phases', + 'Resource allocation plan', + 'Milestone tracking', + 'Success metrics definition' + ]; + case 'risk_assessment': + return [ + 'Risk identification and analysis', + 'Mitigation strategies', + 'Monitoring framework', + 'Contingency planning' + ]; + default: + return ['Strategy component analysis']; + } + }; + + const handleConfirm = () => { + onConfirm(notes.trim() || undefined); + setNotes(''); + }; + + const handleClose = () => { + setNotes(''); + onClose(); + }; + + return ( + + + + {getComponentIcon(componentId)} + + + + Review Strategy Component + + + {componentSubtitle} + + + + + + + + You're reviewing "{componentTitle}" + + + + This component includes the following analysis: + + + + {getComponentSummary(componentId).map((item, index) => ( + + + + + + + ))} + + + + + 💡 Tip: Review all the insights and data, then confirm to mark this component as reviewed. + + + + + + + Optional Notes (for your reference): + + setNotes(e.target.value)} + sx={{ + '& .MuiOutlinedInput-root': { + fontSize: '1rem', + borderRadius: 2, + '&:hover fieldset': { + borderColor: ANALYSIS_CARD_STYLES.colors.primary, + borderWidth: '2px' + }, + '&.Mui-focused fieldset': { + borderColor: ANALYSIS_CARD_STYLES.colors.primary, + borderWidth: '2px' + } + }, + '& .MuiInputBase-input': { + fontSize: '1rem', + lineHeight: 1.5 + } + }} + /> + + + + + + + + + ); +}; + +export default ReviewConfirmationDialog; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewProgressHeader.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewProgressHeader.tsx new file mode 100644 index 00000000..7579d037 --- /dev/null +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewProgressHeader.tsx @@ -0,0 +1,489 @@ +import React from 'react'; +import { + Box, + Typography, + Chip, + IconButton, + Tooltip, + Card, + CardContent, + Badge, + Button, + CircularProgress +} from '@mui/material'; +import { + Refresh as RefreshIcon, + CheckCircle as CheckCircleIcon, + Schedule as ScheduleIcon, + Warning as WarningIcon, + PlayArrow as PlayArrowIcon +} from '@mui/icons-material'; +import { motion } from 'framer-motion'; +import { useStrategyReviewStore } from '../../../../../stores/strategyReviewStore'; +import { ANALYSIS_CARD_STYLES } from '../styles'; +import { contentPlanningApi } from '../../../../../services/contentPlanningApi'; + +const ReviewProgressHeader: React.FC = () => { + const { + components, + reviewProgress, + isAllReviewed, + resetAllReviews, + getUnreviewedComponents, + getReviewedComponents + } = useStrategyReviewStore(); + + // Extract domain name from strategy data (you can pass this as prop if needed) + const getDomainName = () => { + // For now, return a default domain - you can enhance this to get from strategy data + return "alwrity.com"; + }; + + const unreviewedCount = getUnreviewedComponents().length; + const reviewedCount = getReviewedComponents().length; + const totalCount = components.length; + + // Debug logging + console.log('🔍 ReviewProgressHeader Debug:', { + components, + reviewProgress, + unreviewedCount, + reviewedCount, + totalCount, + isAllReviewed: isAllReviewed() + }); + + const getProgressColor = () => { + if (reviewProgress === 100) return ANALYSIS_CARD_STYLES.colors.success; + if (reviewProgress >= 60) return ANALYSIS_CARD_STYLES.colors.primary; + if (reviewProgress >= 30) return ANALYSIS_CARD_STYLES.colors.warning; + return ANALYSIS_CARD_STYLES.colors.error; + }; + + const getProgressText = () => { + if (reviewProgress === 100) return 'All components reviewed!'; + if (reviewProgress >= 60) return 'Great progress!'; + if (reviewProgress >= 30) return 'Making good progress'; + return 'Getting started'; + }; + + return ( + + + {/* Animated Border Lights */} + + + + {/* Header with Circular Progress and Status Chips */} + + + {/* Circular Progress */} + + + + + {Math.round(reviewProgress)}% + + + + + + + Strategy Review Progress + + + {getProgressText()} + + + + {/* Status Chips */} + + } + label={`${reviewedCount} Reviewed`} + size="small" + sx={{ + background: ANALYSIS_CARD_STYLES.colors.success, + color: 'white', + fontWeight: 500, + fontSize: '0.65rem', + height: 24, + '& .MuiChip-icon': { + color: 'white', + fontSize: 14 + } + }} + /> + + {unreviewedCount > 0 && ( + } + label={`${unreviewedCount} Pending`} + size="small" + sx={{ + background: ANALYSIS_CARD_STYLES.colors.warning, + color: 'white', + fontWeight: 500, + fontSize: '0.65rem', + height: 24, + '& .MuiChip-icon': { + color: 'white', + fontSize: 14 + } + }} + /> + )} + + + + {/* Reset Button */} + + + + + + + + {/* Progress Summary */} + + + {reviewedCount} of {totalCount} components reviewed + + + + {/* Informative Text */} + + + Complete review by clicking 'Not Reviewed' button and confirming datapoints of 5 analysis components below. +
+ + Important: Content strategy for {getDomainName()} will shape content generation next. + + + + + {/* Individual Component Status and Activate Strategy Button */} + + + + Component Status + + + {/* Confirm & Activate Strategy Button */} + + + + + + + {components.map((component) => ( + + + ) : ( + + ) + } + color={component.status === 'reviewed' ? 'success' : 'warning'} + > + + + + ))} + + + + {/* Completion Status */} + {isAllReviewed() && ( + + } + label="Ready for Calendar Creation" + size="small" + sx={{ + background: ANALYSIS_CARD_STYLES.colors.success, + color: 'white', + fontWeight: 500, + animation: 'pulse 2s infinite', + fontSize: '0.65rem', + height: 22, + '@keyframes pulse': { + '0%, 100%': { opacity: 1 }, + '50%': { opacity: 0.7 } + }, + '& .MuiChip-icon': { + color: 'white', + fontSize: 14 + } + }} + /> + + )} + + {/* Completion Message */} + {isAllReviewed() && ( + + + + 🎉 All strategy components have been reviewed! You can now proceed to create your content calendar. + + + + )} + + + + ); +}; + +export default ReviewProgressHeader; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewStatusIndicator.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewStatusIndicator.tsx new file mode 100644 index 00000000..8a92522e --- /dev/null +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/ReviewStatusIndicator.tsx @@ -0,0 +1,244 @@ +import React from 'react'; +import { + Box, + Chip, + IconButton, + Tooltip, + Typography, + Button +} from '@mui/material'; +import { + CheckCircle as CheckCircleIcon, + Schedule as ScheduleIcon, + Warning as WarningIcon, + Edit as EditIcon, + Undo as UndoIcon +} from '@mui/icons-material'; +import { motion } from 'framer-motion'; +import { ReviewStatus } from '../../../../../stores/strategyReviewStore'; +import { ANALYSIS_CARD_STYLES } from '../styles'; + +interface ReviewStatusIndicatorProps { + status: ReviewStatus; + reviewedAt?: Date; + onStartReview?: () => void; + onCompleteReview?: () => void; + onResetReview?: () => void; + isReviewing?: boolean; +} + +const ReviewStatusIndicator: React.FC = ({ + status, + reviewedAt, + onStartReview, + onCompleteReview, + onResetReview, + isReviewing = false +}) => { + const getStatusConfig = () => { + switch (status) { + case 'reviewed': + return { + icon: , + label: 'Reviewed', + color: ANALYSIS_CARD_STYLES.colors.success, + bgColor: 'rgba(76, 175, 80, 0.1)', + borderColor: 'rgba(76, 175, 80, 0.3)', + textColor: ANALYSIS_CARD_STYLES.colors.success + }; + case 'not_reviewed': + default: + return { + icon: , + label: 'Not Reviewed', + color: ANALYSIS_CARD_STYLES.colors.warning, + bgColor: 'rgba(255, 152, 0, 0.1)', + borderColor: 'rgba(255, 152, 0, 0.3)', + textColor: ANALYSIS_CARD_STYLES.colors.warning + }; + } + }; + + const config = getStatusConfig(); + + const formatReviewDate = (date: Date) => { + return new Intl.DateTimeFormat('en-US', { + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }).format(date); + }; + + return ( + + { + if (status === 'not_reviewed' && onStartReview) { + onStartReview(); + } else if (status === 'reviewed' && onResetReview) { + onResetReview(); + } + }} + > + {/* Status Icon */} + + {config.icon} + + + {/* Status Label */} + + {config.label} + + + {/* Review Date */} + {status === 'reviewed' && reviewedAt && ( + + {formatReviewDate(reviewedAt)} + + )} + + {/* Action Buttons - Enhanced for better UX */} + + {status === 'not_reviewed' && onStartReview && ( + + + + )} + + {status === 'reviewed' && onResetReview && ( + + + + )} + + + + ); +}; + +export default ReviewStatusIndicator; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/RiskAssessmentCard.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/RiskAssessmentCard.tsx index cbd8500a..1adcd201 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/RiskAssessmentCard.tsx +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/RiskAssessmentCard.tsx @@ -35,6 +35,8 @@ interface RiskAssessmentCardProps { } const RiskAssessmentCard: React.FC = ({ strategyData }) => { + + // Get style objects const sectionStyles = getSectionStyles(); const accordionStyles = getAccordionStyles(); @@ -51,29 +53,27 @@ const RiskAssessmentCard: React.FC = ({ strategyData }) if (!strategyData?.risk_assessment) { return ( - - } - summary={ - - - Risk assessment data not available - - - } - details={ - - - Available data keys: {strategyData ? Object.keys(strategyData).join(', ') : 'No data'} - - - } - trigger="hover" - autoCollapseDelay={3000} - /> - + } + summary={ + + + Risk assessment data not available + + + } + details={ + + + Available data keys: {strategyData ? Object.keys(strategyData).join(', ') : 'No data'} + + + } + trigger="hover" + autoCollapseDelay={3000} + /> ); } @@ -395,17 +395,16 @@ const RiskAssessmentCard: React.FC = ({ strategyData }) ); return ( - - } - summary={summaryContent} - details={detailedContent} - trigger="hover" - autoCollapseDelay={3000} - /> - + } + summary={summaryContent} + details={detailedContent} + trigger="hover" + autoCollapseDelay={3000} + componentId="risk_assessment" + /> ); }; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategicInsightsCard.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategicInsightsCard.tsx index 36abaf65..382a6d3d 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategicInsightsCard.tsx +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategicInsightsCard.tsx @@ -40,15 +40,7 @@ const StrategicInsightsCard: React.FC = ({ strategyD const accordionStyles = getAccordionStyles(); const listItemStyles = getListItemStyles(); - console.log('🔍 StrategicInsightsCard - strategyData:', strategyData); - console.log('🔍 StrategicInsightsCard - strategic_insights:', strategyData?.strategic_insights); - console.log('🔍 StrategicInsightsCard - market_positioning:', strategyData?.strategic_insights?.market_positioning); - console.log('🔍 StrategicInsightsCard - swot_analysis:', strategyData?.strategic_insights?.market_positioning?.swot_analysis); - console.log('🔍 StrategicInsightsCard - strengths:', strategyData?.strategic_insights?.market_positioning?.swot_analysis?.strengths); - console.log('🔍 StrategicInsightsCard - opportunities:', strategyData?.strategic_insights?.market_positioning?.swot_analysis?.opportunities); - console.log('🔍 StrategicInsightsCard - content_opportunities:', strategyData?.strategic_insights?.content_opportunities); - console.log('🔍 StrategicInsightsCard - growth_potential:', strategyData?.strategic_insights?.growth_potential); - console.log('🔍 StrategicInsightsCard - swot_summary:', strategyData?.strategic_insights?.swot_summary); + if (!strategyData?.strategic_insights) { return ( @@ -587,17 +579,16 @@ const StrategicInsightsCard: React.FC = ({ strategyD ); return ( - - } - summary={summaryContent} - details={detailedContent} - trigger="hover" - autoCollapseDelay={2000} - /> - + } + summary={summaryContent} + details={detailedContent} + trigger="hover" + autoCollapseDelay={2000} + componentId="strategic_insights" + /> ); }; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategyHeader.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategyHeader.tsx index f96cac19..de458be5 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategyHeader.tsx +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/components/StrategyHeader.tsx @@ -42,9 +42,10 @@ import { getStrategyName, getStrategyGenerationDate } from '../utils/strategyTra interface StrategyHeaderProps { strategyData: StrategyData | null; strategyConfirmed: boolean; + onStartReview?: () => void; } -const StrategyHeader: React.FC = ({ strategyData, strategyConfirmed }) => { +const StrategyHeader: React.FC = ({ strategyData, strategyConfirmed, onStartReview }) => { const [showNextStepText, setShowNextStepText] = useState(false); if (!strategyData) return null; @@ -577,13 +578,14 @@ const StrategyHeader: React.FC = ({ strategyData, strategyC {/* Next Steps Button - Area B */} setShowNextStepText(false)} > diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/index.ts b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/index.ts index b494ec08..b30396a6 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/index.ts +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/index.ts @@ -1,5 +1,5 @@ // Main Strategy Intelligence Tab -export { default as StrategyIntelligenceTab } from '../StrategyIntelligenceTab'; +export { default as StrategyIntelligenceTab } from './StrategyIntelligenceTab'; // Components export { default as StrategyHeader } from './components/StrategyHeader'; diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/utils/strategyTransformers.ts b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/utils/strategyTransformers.ts index c0ced3db..697fecf9 100644 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/utils/strategyTransformers.ts +++ b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligence/utils/strategyTransformers.ts @@ -165,6 +165,13 @@ export const transformPollingStrategyData = (strategyData: any): StrategyData => competitive_risks: riskAssessment.risk_categories?.competitive_risks || [], technical_risks: riskAssessment.risk_categories?.technical_risks || [], financial_risks: riskAssessment.risk_categories?.financial_risks || [] + }, + mitigation_strategies: riskAssessment.mitigation_strategies || [], + monitoring_framework: riskAssessment.monitoring_framework || { + key_indicators: [], + monitoring_frequency: "Weekly", + escalation_procedures: [], + review_schedule: "Monthly" } } : undefined, diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx deleted file mode 100644 index fefc7793..00000000 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; -import { Box, CircularProgress, Alert, Typography, Grid } from '@mui/material'; -import { useStrategyData } from './StrategyIntelligence/hooks/useStrategyData'; -import { useStrategyActions } from './StrategyIntelligence/hooks/useStrategyActions'; -import StrategyHeader from './StrategyIntelligence/components/StrategyHeader'; -import StrategicInsightsCard from './StrategyIntelligence/components/StrategicInsightsCard'; -import CompetitiveAnalysisCard from './StrategyIntelligence/components/CompetitiveAnalysisCard'; -import PerformancePredictionsCard from './StrategyIntelligence/components/PerformancePredictionsCard'; -import ImplementationRoadmapCard from './StrategyIntelligence/components/ImplementationRoadmapCard'; -import RiskAssessmentCard from './StrategyIntelligence/components/RiskAssessmentCard'; -import StrategyActions from './StrategyIntelligence/components/StrategyActions'; -import ConfirmationDialog from './StrategyIntelligence/components/ConfirmationDialog'; - -const StrategyIntelligenceTab: React.FC = () => { - const { strategyData, loading, error, loadStrategyData } = useStrategyData(); - const { - strategyConfirmed, - showConfirmDialog, - setShowConfirmDialog, - handleConfirmStrategy, - confirmStrategy, - handleGenerateContentCalendar - } = useStrategyActions(); - - const handleConfirmStrategyClick = () => { - handleConfirmStrategy(); - }; - - const handleConfirmStrategyAction = async () => { - await confirmStrategy(strategyData); - }; - - const handleGenerateContentCalendarAction = async () => { - try { - await handleGenerateContentCalendar(strategyData); - } catch (error) { - console.error('Error generating content calendar:', error); - } - }; - - if (loading) { - return ( - - - - ); - } - - if (error) { - return ( - - {error} - - ); - } - - if (!strategyData) { - return ( - - - No Strategy Data Available - - - Generate a comprehensive strategy first to view strategic intelligence. - - - ); - } - - return ( - - {/* Header Section */} - - - {/* Strategy Components Grid */} - - - - - - - - - {/* Action Buttons */} - - - {/* Confirmation Dialog */} - setShowConfirmDialog(false)} - onConfirm={handleConfirmStrategyAction} - /> - - ); -}; - -export default StrategyIntelligenceTab; \ No newline at end of file diff --git a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx.backup b/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx.backup deleted file mode 100644 index 61f126c0..00000000 --- a/frontend/src/components/ContentPlanningDashboard/components/StrategyIntelligenceTab.tsx.backup +++ /dev/null @@ -1,1578 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { - Box, - Grid, - Paper, - Typography, - Button, - Card, - CardContent, - CardActions, - Chip, - Divider, - Alert, - List, - ListItem, - ListItemText, - ListItemIcon, - CircularProgress, - Accordion, - AccordionSummary, - AccordionDetails, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - IconButton, - Tooltip, - Badge, - Dialog, - DialogTitle, - DialogContent, - DialogActions, - LinearProgress, - Stepper, - Step, - StepLabel, - StepContent -} from '@mui/material'; -import { - TrendingUp as TrendingUpIcon, - Business as BusinessIcon, - Lightbulb as LightbulbIcon, - CheckCircle as CheckCircleIcon, - Warning as WarningIcon, - Search as SearchIcon, - Analytics as AnalyticsIcon, - Timeline as TimelineIcon, - Assessment as AssessmentIcon, - ExpandMore as ExpandMoreIcon, - Refresh as RefreshIcon, - Add as AddIcon, - Edit as EditIcon, - Visibility as VisibilityIcon, - BarChart as BarChartIcon, - PieChart as PieChartIcon, - ShowChart as ShowChartIcon, - AutoAwesome as AutoAwesomeIcon, - Psychology as PsychologyIcon, - Security as SecurityIcon, - Schedule as ScheduleIcon, - ThumbUp as ThumbUpIcon, - ThumbDown as ThumbDownIcon, - Save as SaveIcon, - PlayArrow as PlayArrowIcon, - CalendarToday as CalendarIcon, - Info as InfoIcon, - Star as StarIcon, - TrendingDown as TrendingDownIcon, - Speed as SpeedIcon, - MyLocation as TargetIcon, - Flag as FlagIcon, - Check as CheckIcon, - Close as CloseIcon -} from '@mui/icons-material'; -import { motion, AnimatePresence } from 'framer-motion'; -import { contentPlanningApi } from '../../../services/contentPlanningApi'; - -// Helper function to get user ID from context or store -const getUserId = (): number => { - // TODO: Replace with actual user context/store - // For now, return default user ID - return 1; -}; - -interface StrategyData { - strategy_metadata?: { - generated_at?: string; - generation_timestamp?: string; - user_id: number; - strategy_name: string; - generation_version?: string; - ai_model?: string; - personalization_level?: string; - ai_generated: boolean; - comprehensive: boolean; - content_calendar_ready: boolean; - }; - metadata?: { - generated_at?: string; - generation_timestamp?: string; - user_id: number; - strategy_name: string; - generation_version?: string; - ai_model?: string; - personalization_level?: string; - ai_generated: boolean; - comprehensive: boolean; - content_calendar_ready: boolean; - }; - base_strategy?: any; - strategic_insights?: any; - competitive_analysis?: any; - performance_predictions?: any; - implementation_roadmap?: any; - risk_assessment?: any; - summary?: { - estimated_roi: string; - implementation_timeline: string; - risk_level: string; - success_probability: string; - next_step: string; - }; -} - -const StrategyIntelligenceTab: React.FC = () => { - const [strategyData, setStrategyData] = useState(null); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); - const [activeStep, setActiveStep] = useState(0); - const [showConfirmDialog, setShowConfirmDialog] = useState(false); - const [strategyConfirmed, setStrategyConfirmed] = useState(false); - - // Load the most recent strategy data - useEffect(() => { - loadStrategyData(); - }, []); - - const loadStrategyData = async () => { - try { - setLoading(true); - setError(null); - - // Get the latest generated strategy from the backend - const userId = getUserId(); - - // First, try to get the latest generated strategy from the polling system - try { - const latestStrategyResponse = await contentPlanningApi.getLatestGeneratedStrategy(userId); - - if (latestStrategyResponse?.data?.strategy) { - console.log('✅ Found latest generated strategy from polling system:', latestStrategyResponse.data.strategy); - - // Transform the data structure to match frontend expectations - const strategyData = latestStrategyResponse.data.strategy; - - // Map metadata to strategy_metadata for frontend compatibility - const transformedStrategy = { - ...strategyData, - strategy_metadata: strategyData.metadata || strategyData.strategy_metadata, - // Add summary if not present - summary: strategyData.summary || { - estimated_roi: strategyData.performance_predictions?.estimated_roi || "15-25%", - implementation_timeline: strategyData.implementation_roadmap?.total_duration || "12 months", - risk_level: strategyData.risk_assessment?.overall_risk_level || "Medium", - success_probability: strategyData.performance_predictions?.success_probability || "85%", - next_step: "Review strategy and generate content calendar" - } - }; - - console.log('🔄 Transformed strategy data:', transformedStrategy); - setStrategyData(transformedStrategy); - setLoading(false); - return; - } - } catch (pollingError) { - console.log('No latest strategy found in polling system, checking database...', pollingError); - } - - // If no strategy found in polling system, try to get from database - try { - const strategiesResponse = await contentPlanningApi.getEnhancedStrategies(userId); - - // Handle the enhanced strategies response structure - const strategies = strategiesResponse?.data?.strategies || strategiesResponse?.strategies || []; - - if (strategies && strategies.length > 0) { - // Get the most recent strategy (assuming it's sorted by creation date) - const latestStrategy = strategies[0]; - - // Check if this strategy has comprehensive AI-generated data - if (latestStrategy.comprehensive_ai_analysis) { - console.log('✅ Found comprehensive strategy in database:', latestStrategy); - console.log('📊 Comprehensive AI analysis structure:', latestStrategy.comprehensive_ai_analysis); - console.log('🔍 Available fields:', Object.keys(latestStrategy.comprehensive_ai_analysis)); - - // Check if this is the full 5-component structure or SWOT analysis - const hasFullStructure = latestStrategy.comprehensive_ai_analysis.strategic_insights || - latestStrategy.comprehensive_ai_analysis.competitive_analysis || - latestStrategy.comprehensive_ai_analysis.performance_predictions; - - if (hasFullStructure) { - // Transform the data to match frontend expectations (full 5-component structure) - const transformedStrategy = { - ...latestStrategy.comprehensive_ai_analysis, - strategy_metadata: latestStrategy.comprehensive_ai_analysis.metadata || latestStrategy.comprehensive_ai_analysis.strategy_metadata, - // Add summary if not present - summary: latestStrategy.comprehensive_ai_analysis.summary || { - estimated_roi: latestStrategy.comprehensive_ai_analysis.performance_predictions?.estimated_roi || "15-25%", - implementation_timeline: latestStrategy.comprehensive_ai_analysis.implementation_roadmap?.total_duration || "12 months", - risk_level: latestStrategy.comprehensive_ai_analysis.risk_assessment?.overall_risk_level || "Medium", - success_probability: latestStrategy.comprehensive_ai_analysis.performance_predictions?.success_probability || "85%", - next_step: "Review strategy and generate content calendar" - } - }; - - console.log('🔄 Transformed enhanced strategy data (full structure):', transformedStrategy); - console.log('🎯 Final strategy data structure:', { - hasStrategicInsights: !!transformedStrategy.strategic_insights, - hasCompetitiveAnalysis: !!transformedStrategy.competitive_analysis, - hasPerformancePredictions: !!transformedStrategy.performance_predictions, - hasImplementationRoadmap: !!transformedStrategy.implementation_roadmap, - hasRiskAssessment: !!transformedStrategy.risk_assessment, - hasSummary: !!transformedStrategy.summary - }); - setStrategyData(transformedStrategy); - setLoading(false); - return; - } else { - // This is SWOT analysis, create a comprehensive 5-component structure enhanced with SWOT data - console.log('🔄 Creating comprehensive 5-component structure from SWOT analysis'); - const swotData = latestStrategy.comprehensive_ai_analysis; - - const transformedStrategy = { - strategy_metadata: { - user_id: latestStrategy.user_id, - strategy_name: latestStrategy.name, - ai_generated: true, - comprehensive: true, - content_calendar_ready: false, - generation_timestamp: latestStrategy.created_at - }, - // Enhanced Strategic Insights with SWOT data - strategic_insights: { - market_positioning: { - positioning_strength: swotData.overall_score || 75, - current_position: "Emerging", - swot_analysis: { - strengths: swotData.strengths || [], - opportunities: swotData.opportunities || [] - } - }, - content_opportunities: [ - ...(swotData.opportunities || []), - "Leverage identified market gaps", - "Focus on unique value propositions", - "Build thought leadership content" - ], - growth_potential: { - market_size: "Growing", - growth_rate: "High", - key_drivers: swotData.opportunities || [], - competitive_advantages: swotData.strengths || [] - }, - swot_summary: { - overall_score: swotData.overall_score || 75, - primary_strengths: (swotData.strengths || []).slice(0, 3), - key_opportunities: (swotData.opportunities || []).slice(0, 3) - } - }, - // Enhanced Competitive Analysis with SWOT data - competitive_analysis: { - competitors: [ - { - name: "Direct Competitors", - market_position: "Established", - strengths: swotData.strengths || [], - weaknesses: swotData.weaknesses || [], - competitive_response: "Focus on differentiation" - }, - { - name: "Emerging Competitors", - market_position: "Growing", - strengths: [], - weaknesses: swotData.weaknesses || [], - competitive_response: "Establish market leadership" - } - ], - market_gaps: [ - ...(swotData.opportunities || []), - "Content personalization opportunities", - "Niche market segments", - "Innovation in content delivery" - ], - competitive_advantages: { - primary: swotData.strengths || [], - sustainable: swotData.opportunities || [], - development_areas: swotData.weaknesses || [] - }, - swot_competitive_insights: { - leverage_strengths: swotData.strengths || [], - address_weaknesses: swotData.weaknesses || [], - capitalize_opportunities: swotData.opportunities || [], - mitigate_threats: swotData.threats || [] - } - }, - // Enhanced Performance Predictions with SWOT context - performance_predictions: { - estimated_roi: "20-30%", - key_metrics: { - engagement_rate: "5-8%", - conversion_rate: "2-4%", - reach_growth: "40-60%", - brand_awareness: "25-35%", - market_share: "3-5%" - }, - timeline_projections: { - "3_months": "Initial traction and brand awareness leveraging identified strengths", - "6_months": "Established presence and engagement addressing market opportunities", - "12_months": "Market leadership and growth capitalizing on competitive advantages" - }, - success_factors: { - primary: swotData.strengths || [], - secondary: swotData.opportunities || [], - risk_mitigation: swotData.threats || [] - }, - swot_based_predictions: { - strength_impact: "High performance in areas of identified strengths", - opportunity_impact: "Growth potential through market opportunities", - weakness_mitigation: "Improved performance by addressing weaknesses", - threat_management: "Risk-adjusted projections considering market threats" - } - }, - // Enhanced Implementation Roadmap with SWOT considerations - implementation_roadmap: { - total_duration: "12 months", - phases: [ - { - phase: "Foundation (Months 1-3)", - activities: [ - "Brand positioning leveraging identified strengths", - "Content strategy development addressing market opportunities", - "Weakness assessment and improvement planning" - ], - deliverables: ["Brand guidelines", "Content calendar", "SWOT action plan"], - swot_focus: "Strengths and Opportunities" - }, - { - phase: "Growth (Months 4-8)", - activities: [ - "Content execution based on competitive advantages", - "Community building addressing market gaps", - "Threat mitigation strategies implementation" - ], - deliverables: ["Content library", "Engaged audience", "Risk management framework"], - swot_focus: "Opportunities and Threats" - }, - { - phase: "Scale (Months 9-12)", - activities: [ - "Market expansion capitalizing on strengths", - "Performance optimization addressing weaknesses", - "Sustainable competitive advantage development" - ], - deliverables: ["Market leadership", "Optimized strategy", "Long-term competitive position"], - swot_focus: "Strengths and Weaknesses" - } - ], - resource_allocation: { - team_requirements: "Content team + Marketing support + SWOT analysis expertise", - budget_allocation: "Distributed across phases with focus on opportunity areas", - swot_priorities: { - high_priority: swotData.opportunities || [], - medium_priority: swotData.strengths || [], - low_priority: swotData.weaknesses || [] - } - }, - swot_integration: { - strength_leverage: swotData.strengths || [], - weakness_improvement: swotData.weaknesses || [], - opportunity_capitalization: swotData.opportunities || [], - threat_mitigation: swotData.threats || [] - } - }, - // Enhanced Risk Assessment with SWOT threats - risk_assessment: { - overall_risk_level: "Medium", - risk_categories: { - market_risks: [ - ...(swotData.threats?.map((threat: string) => ({ - risk: threat, - probability: "Medium", - impact: "High", - mitigation: "Strategic planning and monitoring" - })) || []), - { - risk: "Market saturation", - probability: "Medium", - impact: "Medium", - mitigation: "Innovation and differentiation" - } - ], - operational_risks: [ - { - risk: "Resource constraints", - probability: "Medium", - impact: "Medium", - mitigation: "Efficient resource allocation" - }, - { - risk: "Weakness areas", - probability: "High", - impact: "Medium", - mitigation: "Targeted improvement programs" - } - ], - competitive_risks: [ - { - risk: "Market competition", - probability: "High", - impact: "Medium", - mitigation: "Leverage competitive advantages" - }, - { - risk: "Strength erosion", - probability: "Medium", - impact: "High", - mitigation: "Continuous improvement and innovation" - } - ] - }, - swot_risk_mapping: { - strength_risks: "Risk of over-reliance on current strengths", - weakness_risks: "Risk of weakness exploitation by competitors", - opportunity_risks: "Risk of missing market opportunities", - threat_risks: "Risk of threat materialization" - }, - risk_mitigation_strategies: { - based_on_strengths: "Leverage strengths to mitigate threats", - based_on_opportunities: "Use opportunities to address weaknesses", - based_on_weaknesses: "Develop improvement plans for weak areas", - based_on_threats: "Create contingency plans for identified threats" - } - }, - // Enhanced summary with SWOT context - summary: { - estimated_roi: "20-30%", - implementation_timeline: "12 months", - risk_level: "Medium", - success_probability: `${swotData.overall_score || 75}%`, - next_step: "Review strategy and generate content calendar", - swot_highlights: { - key_strengths: (swotData.strengths || []).slice(0, 2), - key_opportunities: (swotData.opportunities || []).slice(0, 2), - primary_risks: (swotData.threats || []).slice(0, 2) - } - } - }; - - console.log('🔄 Created comprehensive 5-component structure from SWOT analysis:', transformedStrategy); - console.log('🎯 Final strategy data structure:', { - hasStrategicInsights: !!transformedStrategy.strategic_insights, - hasCompetitiveAnalysis: !!transformedStrategy.competitive_analysis, - hasPerformancePredictions: !!transformedStrategy.performance_predictions, - hasImplementationRoadmap: !!transformedStrategy.implementation_roadmap, - hasRiskAssessment: !!transformedStrategy.risk_assessment, - hasSummary: !!transformedStrategy.summary, - swotEnhanced: true - }); - setStrategyData(transformedStrategy); - setLoading(false); - return; - } - } else { - console.log('⚠️ Strategy found but no comprehensive_ai_analysis field:', { - strategyId: latestStrategy.id, - strategyName: latestStrategy.name, - availableFields: Object.keys(latestStrategy) - }); - } - } - } catch (dbError) { - console.log('No comprehensive strategies found in database, checking for recent generation...', dbError); - } - - // If no comprehensive strategy found in database, check for recent generation tasks - // This would be the data from our polling-based generation that might not be saved yet - try { - // Try to get the latest strategy generation result - const recentStrategies = await contentPlanningApi.getStrategies(userId); - - // Handle the enhanced strategies response structure - const strategies = recentStrategies?.data?.strategies || recentStrategies?.strategies || []; - - if (strategies && strategies.length > 0) { - // Find the most recent AI-generated strategy - const aiGeneratedStrategy = strategies.find( - (strategy: any) => strategy.comprehensive_ai_analysis - ); - - if (aiGeneratedStrategy && aiGeneratedStrategy.comprehensive_ai_analysis) { - console.log('✅ Found AI-generated strategy in recent strategies:', aiGeneratedStrategy); - - // Transform the data to match frontend expectations - const transformedStrategy = { - ...aiGeneratedStrategy.comprehensive_ai_analysis, - strategy_metadata: aiGeneratedStrategy.comprehensive_ai_analysis.metadata || aiGeneratedStrategy.comprehensive_ai_analysis.strategy_metadata, - // Add summary if not present - summary: aiGeneratedStrategy.comprehensive_ai_analysis.summary || { - estimated_roi: aiGeneratedStrategy.comprehensive_ai_analysis.performance_predictions?.estimated_roi || "15-25%", - implementation_timeline: aiGeneratedStrategy.comprehensive_ai_analysis.implementation_roadmap?.total_duration || "12 months", - risk_level: aiGeneratedStrategy.comprehensive_ai_analysis.risk_assessment?.overall_risk_level || "Medium", - success_probability: aiGeneratedStrategy.comprehensive_ai_analysis.performance_predictions?.success_probability || "85%", - next_step: "Review strategy and generate content calendar" - } - }; - - console.log('🔄 Transformed recent strategy data:', transformedStrategy); - setStrategyData(transformedStrategy); - setLoading(false); - return; - } - } - } catch (strategyError) { - console.log('No recent strategies found, checking for generation tasks...', strategyError); - } - - // If no strategy data is available, show appropriate message - console.log('❌ No comprehensive strategy data found'); - setStrategyData(null); - setError('No comprehensive strategy data available. Please generate a strategy first.'); - setLoading(false); - - } catch (err: any) { - console.error('Error loading strategy data:', err); - setError(err.message || 'Failed to load strategy data'); - setStrategyData(null); - setLoading(false); - } - }; - - const handleConfirmStrategy = () => { - setShowConfirmDialog(true); - }; - - const confirmStrategy = async () => { - try { - setStrategyConfirmed(true); - setShowConfirmDialog(false); - - // Save confirmation status to backend - const userId = strategyData?.strategy_metadata?.user_id || strategyData?.metadata?.user_id; - if (userId) { - try { - // Update the strategy with confirmation status - await contentPlanningApi.updateEnhancedStrategy( - userId.toString(), - { confirmed: true, confirmed_at: new Date().toISOString() } - ); - console.log('Strategy confirmation saved to backend'); - } catch (updateError) { - console.warn('Could not save confirmation to backend:', updateError); - // Don't fail the confirmation if backend update fails - } - } - - console.log('Strategy confirmed! Ready to generate content calendar.'); - } catch (error) { - console.error('Error confirming strategy:', error); - setStrategyConfirmed(false); - } - }; - - const handleGenerateContentCalendar = async () => { - try { - const userId = strategyData?.strategy_metadata?.user_id || strategyData?.metadata?.user_id; - if (!userId) { - console.error('No strategy data available for calendar generation'); - return; - } - - // Generate content calendar based on confirmed strategy - const calendarRequest = { - user_id: userId, - strategy_id: userId, // Using user_id as strategy_id for now - calendar_type: 'comprehensive', - industry: strategyData.base_strategy?.industry || 'technology', - business_size: 'medium', // TODO: Get from strategy data - force_refresh: false - }; - - console.log('Generating content calendar with request:', calendarRequest); - - // Call the calendar generation API - const calendarResponse = await contentPlanningApi.generateCalendar(calendarRequest); - - console.log('Content calendar generated successfully:', calendarResponse); - - // TODO: Navigate to calendar tab or show success message - // You could also store the calendar data in a global state - - } catch (error) { - console.error('Error generating content calendar:', error); - // Show error message to user - setError('Failed to generate content calendar. Please try again.'); - } - }; - - if (loading) { - return ( - - - - ); - } - - if (error) { - return ( - - {error} - - ); - } - - if (!strategyData) { - return ( - - - No Strategy Data Available - - - Generate a comprehensive strategy first to view strategic intelligence. - - - ); - } - - return ( - - {/* Header Section */} - - - - - 🧠 Strategic Intelligence - - - {strategyData.strategy_metadata?.strategy_name || strategyData.metadata?.strategy_name || 'AI-Generated Strategy'} - - - Generated on {new Date(strategyData.strategy_metadata?.generated_at || strategyData.strategy_metadata?.generation_timestamp || strategyData.metadata?.generated_at || strategyData.metadata?.generation_timestamp || '').toLocaleDateString()} - - - - - - - - - - - - - {/* Strategy Confirmation Status */} - {strategyConfirmed && ( - - } - sx={{ - fontWeight: 600, - '&:hover': { - backgroundColor: 'rgba(76, 175, 80, 0.1)', - transform: 'translateY(-1px)' - }, - transition: 'all 0.3s ease' - }} - > - Generate Content Calendar - - } - > - Strategy confirmed! You can now generate a content calendar based on this strategy. - - - )} - - {/* Strategy Components - Enhanced Grid Layout */} - - {/* Strategic Insights */} - - - - - - - - - Strategic Insights - - - {strategyData.strategic_insights && ( - <> - - - Market Positioning - - - - - - {strategyData.strategic_insights.market_positioning?.positioning_strength || 0} - - - - {strategyData.strategic_insights.market_positioning?.current_position} - - - - - - - - Content Opportunities - - - {(strategyData.strategic_insights.content_opportunities || []).map((opportunity: string, index: number) => ( - - - - - - - - - ))} - - - - - - Growth Potential - - - - - - - )} - - - - - - {/* Competitive Analysis */} - - - - - - - - - Competitive Analysis - - - {strategyData.competitive_analysis && ( - <> - - Key Competitors - - {(strategyData.competitive_analysis.competitors || []).slice(0, 2).map((competitor: any, index: number) => ( - - - {competitor.name} - - - {competitor.market_position} - - - - - - - ))} - - - - - Market Gaps - - - {(strategyData.competitive_analysis.market_gaps || []).slice(0, 3).map((gap: string, index: number) => ( - - - - - - - - - ))} - - - )} - - - - - - {/* Performance Predictions */} - - - - - - - - - Performance Predictions - - - {strategyData.performance_predictions && ( - <> - - - {strategyData.performance_predictions.estimated_roi} - - - Estimated ROI - - - - - Key Metrics - - - {Object.entries(strategyData.performance_predictions.key_metrics || {}).map(([metric, value]) => ( - - - - {value as string} - - - {metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())} - - - - ))} - - - - - - Timeline Projections - - - {Object.entries(strategyData.performance_predictions.timeline_projections || {}).map(([period, projection]) => ( - - - - - - - l.toUpperCase())} - primaryTypographyProps={{ - variant: 'body2', - sx: { fontWeight: 500, lineHeight: 1.4 } - }} - secondaryTypographyProps={{ - variant: 'caption', - sx: { fontWeight: 600, color: '#4caf50' } - }} - /> - - ))} - - - )} - - - - - - {/* Implementation Roadmap */} - - - - - - - - - Implementation Roadmap - - - {strategyData.implementation_roadmap && ( - <> - - {strategyData.implementation_roadmap.total_duration} - - - - {(strategyData.implementation_roadmap.phases || []).map((phase: any, index: number) => ( - - - - {phase.phase} - - - - - - Activities: {phase.activities?.length || 0} - - - Deliverables: {phase.deliverables?.length || 0} - - - - - ))} - - - - - - Resource Requirements - - - - {strategyData.implementation_roadmap.resource_allocation?.team_requirements} - - - Budget: {strategyData.implementation_roadmap.resource_allocation?.budget_allocation} - - - - )} - - - - - - {/* Risk Assessment */} - - - - - - - - - Risk Assessment - - - - {strategyData.risk_assessment && ( - - {Object.entries(strategyData.risk_assessment.risk_categories || {}).map(([category, risks]) => ( - - - {category.replace(/_/g, ' ')} - - {(risks as any[]).map((risk: any, index: number) => ( - - - {risk.risk} - - - - - - - ))} - - ))} - - )} - - - - - - - {/* Action Buttons */} - - {!strategyConfirmed ? ( - - - - ) : ( - - - - )} - - - - - - - {/* Confirmation Dialog */} - setShowConfirmDialog(false)} - maxWidth="sm" - fullWidth - PaperProps={{ - sx: { - borderRadius: 3, - boxShadow: '0 16px 48px rgba(0, 0, 0, 0.2)' - } - }} - > - - - - - - - Confirm Strategy - - - - - - Are you sure you want to confirm this strategy? Once confirmed, you'll be able to generate a content calendar based on this strategy. - - - - Next Steps: After confirmation, you can generate a comprehensive content calendar that follows this strategy. - - - - - - - - - - ); -}; - -export default StrategyIntelligenceTab; \ No newline at end of file diff --git a/frontend/src/components/ContentPlanningDashboard/tabs/ContentStrategyTab.tsx b/frontend/src/components/ContentPlanningDashboard/tabs/ContentStrategyTab.tsx index 1c02e6fe..65433b70 100644 --- a/frontend/src/components/ContentPlanningDashboard/tabs/ContentStrategyTab.tsx +++ b/frontend/src/components/ContentPlanningDashboard/tabs/ContentStrategyTab.tsx @@ -51,7 +51,7 @@ import { } from '@mui/icons-material'; import { useContentPlanningStore } from '../../../stores/contentPlanningStore'; import { contentPlanningApi } from '../../../services/contentPlanningApi'; -import StrategyIntelligenceTab from '../components/StrategyIntelligenceTab'; +import StrategyIntelligenceTab from '../components/StrategyIntelligence/StrategyIntelligenceTab'; import StrategyOnboardingDialog from '../components/StrategyOnboardingDialog'; const ContentStrategyTab: React.FC = () => { @@ -96,25 +96,70 @@ const ContentStrategyTab: React.FC = () => { // Check strategy status when strategies are loaded useEffect(() => { - if (strategies && strategies.length > 0 && !hasCheckedStrategy) { + console.log('🔄 useEffect triggered - strategies changed:', strategies); + console.log('🔄 Strategies type:', typeof strategies); + console.log('🔄 Is Array:', Array.isArray(strategies)); + console.log('🔄 Strategies length:', strategies?.length); + console.log('🔄 Has checked strategy:', hasCheckedStrategy); + + // Handle different response formats + let strategiesArray: any[] = []; + + if (Array.isArray(strategies)) { + // Direct array + strategiesArray = strategies; + } else if (strategies && typeof strategies === 'object' && 'strategies' in strategies && Array.isArray((strategies as any).strategies)) { + // API response object with strategies array + strategiesArray = (strategies as any).strategies; + } + + console.log('🔄 StrategiesArray length:', strategiesArray.length); + + if (strategiesArray.length > 0) { + console.log('✅ Strategies found, checking status...'); checkStrategyStatus(); - } else if ((!strategies || strategies.length === 0) && !hasCheckedStrategy) { + } else if (strategiesArray.length === 0 && hasCheckedStrategy) { + // Only set to 'none' if we've already checked and confirmed no strategies + console.log('❌ No strategies found, setting status to none...'); setStrategyStatus('none'); - setHasCheckedStrategy(true); setShowOnboarding(true); } - }, [strategies, hasCheckedStrategy]); + // If strategiesArray.length === 0 and !hasCheckedStrategy, do nothing (wait for data to load) + }, [strategies, loadStrategies]); const checkStrategyStatus = () => { - if (strategies && strategies.length > 0) { + console.log('🔍 Checking strategy status...'); + console.log('🔍 Strategies from store:', strategies); + console.log('🔍 Strategies type:', typeof strategies); + console.log('🔍 Is Array:', Array.isArray(strategies)); + console.log('🔍 Strategies length:', strategies?.length); + + // Handle different response formats + let strategiesArray: any[] = []; + + if (Array.isArray(strategies)) { + // Direct array + strategiesArray = strategies; + } else if (strategies && typeof strategies === 'object' && 'strategies' in strategies && Array.isArray((strategies as any).strategies)) { + // API response object with strategies array + strategiesArray = (strategies as any).strategies; + } + + console.log('🔍 StrategiesArray length:', strategiesArray.length); + + if (strategiesArray.length > 0) { // Find the most recent strategy - const latestStrategy = strategies[0]; // Assuming strategies are sorted by date + const latestStrategy = strategiesArray[0]; // Assuming strategies are sorted by date + + console.log('✅ Found strategies in database:', strategiesArray.length); + console.log('📊 Latest strategy:', latestStrategy); // For now, we'll assume strategies are active if they exist // In a real implementation, you would check a status field from the database setStrategyStatus('active'); setShowOnboarding(false); } else { + console.log('❌ No strategies found in database'); setStrategyStatus('none'); setShowOnboarding(true); } @@ -154,20 +199,16 @@ const ContentStrategyTab: React.FC = () => { contentPlanningApi.handleSSEData( eventSource, (data) => { - console.log('Strategic Intelligence SSE Data:', data); if (data.type === 'status') { // Update loading message - console.log('Status:', data.message); } else if (data.type === 'progress') { // Update progress (could be used for progress bar) - console.log('Progress:', data.progress, '%'); } else if (data.type === 'result' && data.status === 'success') { // Set the strategic intelligence data setStrategicIntelligence(data.data); setDataLoading(prev => ({ ...prev, strategicIntelligence: false })); } else if (data.type === 'error') { - console.error('Strategic Intelligence Error:', data.message); // Set fallback data on error setStrategicIntelligence({ market_positioning: { @@ -188,7 +229,6 @@ const ContentStrategyTab: React.FC = () => { } }, (error) => { - console.error('Strategic Intelligence SSE Error:', error); // Set fallback data on error setStrategicIntelligence({ market_positioning: { @@ -356,13 +396,7 @@ const ContentStrategyTab: React.FC = () => { )} - {strategyStatus === 'active' && ( - - - Strategy Active: Your content strategy is running and ALwrity is managing your content marketing automatically. - - - )} + {/* Strategic Intelligence */} diff --git a/frontend/src/stores/contentPlanningStore.ts b/frontend/src/stores/contentPlanningStore.ts index 369e4bd0..bf803620 100644 --- a/frontend/src/stores/contentPlanningStore.ts +++ b/frontend/src/stores/contentPlanningStore.ts @@ -476,9 +476,24 @@ export const useContentPlanningStore = create((set, get) = loadStrategies: async () => { set({ loading: true, error: null }); try { + console.log('🔍 Loading strategies from API...'); const strategies = await contentPlanningApi.getStrategiesSafe(); - set({ strategies, loading: false }); + console.log('🔍 API response for strategies:', strategies); + console.log('🔍 Strategies type:', typeof strategies); + console.log('🔍 Is Array:', Array.isArray(strategies)); + + if (Array.isArray(strategies)) { + console.log('✅ Strategies loaded successfully (direct array):', strategies.length); + set({ strategies, loading: false }); + } else if (strategies && strategies.strategies && Array.isArray(strategies.strategies)) { + console.log('✅ Strategies found in response.strategies:', strategies.strategies.length); + set({ strategies: strategies.strategies, loading: false }); + } else { + console.log('❌ No strategies found in response'); + set({ strategies: [], loading: false }); + } } catch (error: any) { + console.error('❌ Error loading strategies:', error); set({ error: error.message || 'Failed to load strategies', loading: false }); } }, diff --git a/frontend/src/stores/strategyReviewStore.ts b/frontend/src/stores/strategyReviewStore.ts new file mode 100644 index 00000000..79d26d36 --- /dev/null +++ b/frontend/src/stores/strategyReviewStore.ts @@ -0,0 +1,189 @@ +import { create } from 'zustand'; +import { devtools } from 'zustand/middleware'; + +export type ReviewStatus = 'not_reviewed' | 'in_review' | 'reviewed'; + +export interface StrategyComponent { + id: string; + title: string; + subtitle: string; + status: ReviewStatus; + reviewedAt?: Date; + reviewedBy?: string; + notes?: string; +} + +export interface ReviewState { + // Review state + components: StrategyComponent[]; + isReviewing: boolean; + reviewProgress: number; + + // Actions + initializeComponents: (components: Omit[]) => void; + startReview: (componentId: string) => void; + completeReview: (componentId: string, notes?: string) => void; + resetReview: (componentId: string) => void; + resetAllReviews: () => void; + updateReviewProgress: () => void; + getReviewProgress: () => number; + isAllReviewed: () => boolean; + getUnreviewedComponents: () => StrategyComponent[]; + getReviewedComponents: () => StrategyComponent[]; +} + +const STRATEGY_COMPONENTS = [ + { + id: 'strategic_insights', + title: 'Strategic Insights', + subtitle: 'AI-powered market analysis' + }, + { + id: 'competitive_analysis', + title: 'Competitive Analysis', + subtitle: 'Market positioning insights' + }, + { + id: 'performance_predictions', + title: 'Performance Predictions', + subtitle: 'ROI and success metrics' + }, + { + id: 'implementation_roadmap', + title: 'Implementation Roadmap', + subtitle: 'Project timeline and phases' + }, + { + id: 'risk_assessment', + title: 'Risk Assessment', + subtitle: 'Risk analysis and mitigation' + } +]; + +export const useStrategyReviewStore = create()( + devtools( + (set, get) => ({ + // Initial state + components: [], + isReviewing: false, + reviewProgress: 0, + + // Initialize components with default review status + initializeComponents: (components) => { + const initializedComponents = components.map(component => ({ + ...component, + status: 'not_reviewed' as ReviewStatus + })); + + set({ components: initializedComponents }); + get().updateReviewProgress(); + }, + + // Start reviewing a component + startReview: (componentId: string) => { + set(state => ({ + isReviewing: true, + components: state.components.map(comp => + comp.id === componentId + ? { ...comp, status: 'in_review' as ReviewStatus } + : comp + ) + })); + }, + + // Complete review for a component + completeReview: (componentId: string, notes?: string) => { + set(state => ({ + isReviewing: false, + components: state.components.map(comp => + comp.id === componentId + ? { + ...comp, + status: 'reviewed' as ReviewStatus, + reviewedAt: new Date(), + reviewedBy: 'current_user', // In real app, get from auth + notes + } + : comp + ) + })); + + get().updateReviewProgress(); + }, + + // Reset review for a component + resetReview: (componentId: string) => { + set(state => ({ + components: state.components.map(comp => + comp.id === componentId + ? { + ...comp, + status: 'not_reviewed' as ReviewStatus, + reviewedAt: undefined, + reviewedBy: undefined, + notes: undefined + } + : comp + ) + })); + + get().updateReviewProgress(); + }, + + // Reset all reviews + resetAllReviews: () => { + set(state => ({ + components: state.components.map(comp => ({ + ...comp, + status: 'not_reviewed' as ReviewStatus, + reviewedAt: undefined, + reviewedBy: undefined, + notes: undefined + })) + })); + + get().updateReviewProgress(); + }, + + // Update review progress + updateReviewProgress: () => { + const { components } = get(); + const reviewedCount = components.filter(comp => comp.status === 'reviewed').length; + const totalCount = components.length; + const progress = totalCount > 0 ? (reviewedCount / totalCount) * 100 : 0; + + set({ reviewProgress: progress }); + }, + + // Get review progress percentage + getReviewProgress: () => { + return get().reviewProgress; + }, + + // Check if all components are reviewed + isAllReviewed: () => { + const { components } = get(); + return components.every(comp => comp.status === 'reviewed'); + }, + + // Get unreviewed components + getUnreviewedComponents: () => { + const { components } = get(); + return components.filter(comp => comp.status !== 'reviewed'); + }, + + // Get reviewed components + getReviewedComponents: () => { + const { components } = get(); + return components.filter(comp => comp.status === 'reviewed'); + } + }), + { + name: 'strategy-review-store', + enabled: process.env.NODE_ENV === 'development' + } + ) +); + +// Initialize components when store is created +useStrategyReviewStore.getState().initializeComponents(STRATEGY_COMPONENTS);