From 47bde56d2a3c66cc00f69785ab9251c2891cdf0b Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 18 Nov 2025 12:35:22 +0000 Subject: [PATCH] Add article detail view to documentation page - Add state to track selected article (sectionId + articleId) - Implement renderArticleContent() function to display full article content - Display intro, steps, tips, and conclusion sections from translations - Add click handlers to article cards to show detail view - Add back button to return to article list - Reset selected article when switching sections in sidebar Fixes issue where clicking on article cards only showed metadata instead of full content with steps, tips, and detailed information. --- .../src/pages/public/DocumentationPage.tsx | 246 +++++++++++++++--- 1 file changed, 204 insertions(+), 42 deletions(-) diff --git a/frontend/src/pages/public/DocumentationPage.tsx b/frontend/src/pages/public/DocumentationPage.tsx index 673b49c5..4d6ea395 100644 --- a/frontend/src/pages/public/DocumentationPage.tsx +++ b/frontend/src/pages/public/DocumentationPage.tsx @@ -41,6 +41,7 @@ interface DocArticle { const DocumentationPage: React.FC = () => { const { t } = useTranslation('help'); const [activeSection, setActiveSection] = useState('getting-started'); + const [selectedArticle, setSelectedArticle] = useState<{ sectionId: string; articleId: string } | null>(null); const sections: DocSection[] = [ { @@ -287,6 +288,160 @@ const DocumentationPage: React.FC = () => { return t(`difficulty.${difficulty}` as any) || difficulty; }; + const getCategoryKey = (sectionId: string): string => { + const categoryMap: Record = { + 'getting-started': 'gettingStarted', + 'features': 'features', + 'analytics': 'analytics', + 'account': 'account', + 'billing': 'billing', + 'privacy': 'privacy', + }; + return categoryMap[sectionId] || sectionId; + }; + + const getArticleKey = (articleId: string): string => { + const articleMap: Record = { + 'quick-start': 'quickStart', + 'import-data': 'importData', + 'products-catalog': 'productsCatalog', + 'first-prediction': 'firstPrediction', + 'demand-forecasting': 'demandForecasting', + 'production-planning': 'productionPlanning', + 'inventory-management': 'inventoryManagement', + 'pos-integration': 'posIntegration', + 'waste-tracking': 'wasteTracking', + 'dashboard-overview': 'dashboardOverview', + 'reports': 'reports', + 'ai-insights': 'aiInsights', + 'performance-metrics': 'performanceMetrics', + }; + return articleMap[articleId] || articleId; + }; + + const handleArticleClick = (sectionId: string, articleId: string) => { + setSelectedArticle({ sectionId, articleId }); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + const handleBackToList = () => { + setSelectedArticle(null); + }; + + const renderArticleContent = () => { + if (!selectedArticle) return null; + + const categoryKey = getCategoryKey(selectedArticle.sectionId); + const articleKey = getArticleKey(selectedArticle.articleId); + const contentPath = `articles.${categoryKey}.${articleKey}.content`; + + const content: any = t(contentPath, { returnObjects: true }); + const article = sections + .find((s) => s.id === selectedArticle.sectionId) + ?.articles.find((a) => a.id === selectedArticle.articleId); + + if (!article || !content) return null; + + return ( +
+ {/* Back Button */} + + + {/* Article Header */} +
+

+ {article.title} +

+

{article.description}

+
+ + + {article.readTime} + + + {getDifficultyLabel(article.difficulty)} + +
+
+ + {/* Article Content */} +
+ {/* Intro */} + {content.intro && ( +
+

+ {content.intro} +

+
+ )} + + {/* Steps */} + {content.steps && Array.isArray(content.steps) && ( +
+ {content.steps.map((step: any, index: number) => ( +
+

+ {step.title} +

+

+ {step.description} +

+
+ ))} +
+ )} + + {/* Tips */} + {content.tips && Array.isArray(content.tips) && content.tips.length > 0 && ( +
+

+ + Consejos Útiles +

+
    + {content.tips.map((tip: string, index: number) => ( +
  • + + {tip} +
    • + ))} +
+
+ )} + + {/* Conclusion */} + {content.conclusion && ( +
+

+ {content.conclusion} +

+
+ )} +
+ + {/* Back to List Button */} +
+ +
+
+ ); + }; + return ( { {sections.map((section) => ( + ))} + - + ) )}