@atlashub/smartstack-cli 2.1.0 → 2.3.0

package/templates/skills/business-analyse/react/components.md

@@ -1,17 +1,19 @@
-# React Components - FRD Documentation
+# React Components - Business Analyse Viewer
 
-> **Usage:** React component templates for documentation pages
-> **Loaded in:** step-06-doc-html.md
+> **Usage:** React component that renders feature.json directly
+> **Loaded in:** step-04-handoff.md
+> **Data source:** `docs/business/{app}/{module}/business-analyse/v{X.Y}/feature.json`
 > **Context7:** /facebook/react, /lucide-icons/lucide-react
 
 ---
 
-## FrdDocPage Component
+## BusinessAnalyseViewer Component
 
 ```tsx
-// web/smartstack-web/src/pages/docs/business/{app}/{module}/FrdDocPage.tsx
+// web/smartstack-web/src/pages/docs/business/[app]/[module]/BusinessAnalyseViewer.tsx
 
-import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   FileText,
@@ -23,22 +25,41 @@ import {
   ArrowRight,
   List,
   Layout,
-  Database
+  Database,
+  GitBranch,
+  Zap,
+  BookOpen,
+  Target
 } from 'lucide-react';
-import type { FrdData } from './types';
+import type { FeatureJson, FeatureStatus } from '@/types/business-analyse';
+import { loadFeature, listVersions } from '@/services/businessAnalyse';
 
-// Import data (generated from FRD)
-import { frdData } from './frdData';
+// Status Badge Component
+function StatusBadge({ status }: { status: FeatureStatus }) {
+  const config: Record<FeatureStatus, { color: string; label: string }> = {
+    'draft': { color: 'bg-gray-500/10 text-gray-600', label: 'Draft' },
+    'analysed': { color: 'bg-blue-500/10 text-blue-600', label: 'Analysed' },
+    'specified': { color: 'bg-yellow-500/10 text-yellow-600', label: 'Specified' },
+    'approved': { color: 'bg-green-500/10 text-green-600', label: 'Approved' },
+    'handed-off': { color: 'bg-purple-500/10 text-purple-600', label: 'Handed Off' }
+  };
+  const { color, label } = config[status];
+  return (
+    <span className={`px-2 py-0.5 rounded text-xs font-medium ${color}`}>
+      {label}
+    </span>
+  );
+}
 
 // Priority Badge Component
 function PriorityBadge({ priority }: { priority: string }) {
-  const colors = {
+  const colors: Record<string, string> = {
     Must: 'bg-red-500/10 text-red-600',
     Should: 'bg-yellow-500/10 text-yellow-600',
     Could: 'bg-blue-500/10 text-blue-600'
   };
   return (
-    <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[priority as keyof typeof colors] || 'bg-gray-500/10 text-gray-600'}`}>
+    <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[priority] || 'bg-gray-500/10 text-gray-600'}`}>
       {priority}
     </span>
   );
@@ -72,55 +93,110 @@ function NumberedSection({
   );
 }
 
-// Export page component
-export function {ModuleName}FrdDocPage() {
-  const { t } = useTranslation('docs-business');
-
+// Version Selector Component
+function VersionSelector({
+  versions,
+  current,
+  onChange
+}: {
+  versions: string[];
+  current: string;
+  onChange: (v: string) => void;
+}) {
   return (
-    <div className="space-y-8">
-      {/* Component implementation follows standard patterns */}
+    <div className="flex items-center gap-2">
+      <GitBranch className="w-4 h-4 text-[var(--text-secondary)]" />
+      <select
+        value={current}
+        onChange={(e) => onChange(e.target.value)}
+        className="text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded px-2 py-1"
+      >
+        {versions.map((v) => (
+          <option key={v} value={v}>v{v}</option>
+        ))}
+      </select>
     </div>
   );
 }
 
-export function {ModuleName}FrdDocPage() {
+// Main Viewer Component
+export function BusinessAnalyseViewer() {
+  const { app, module } = useParams<{ app: string; module: string }>();
   const { t } = useTranslation('docs-business');
+  const [feature, setFeature] = useState<FeatureJson | null>(null);
+  const [versions, setVersions] = useState<string[]>([]);
+  const [currentVersion, setCurrentVersion] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!app || !module) return;
+    listVersions(app, module).then((vs) => {
+      setVersions(vs);
+      setCurrentVersion(vs[vs.length - 1]); // latest
+    });
+  }, [app, module]);
+
+  useEffect(() => {
+    if (!app || !module || !currentVersion) return;
+    setLoading(true);
+    loadFeature(app, module, currentVersion)
+      .then(setFeature)
+      .finally(() => setLoading(false));
+  }, [app, module, currentVersion]);
+
+  if (loading || !feature) {
+    return <div className="animate-pulse p-8">Loading...</div>;
+  }
+
+  const sections = [
+    { key: 'discovery', label: t('sections.discovery', 'Discovery'), icon: Target },
+    { key: 'businessRules', label: t('sections.businessRules', 'Business Rules'), icon: CheckCircle },
+    { key: 'entities', label: t('sections.entities', 'Entities'), icon: Database },
+    { key: 'useCases', label: t('sections.useCases', 'Use Cases'), icon: Users },
+    { key: 'permissions', label: t('sections.permissions', 'Permissions'), icon: Shield },
+    { key: 'api', label: t('sections.api', 'API Endpoints'), icon: Zap },
+    { key: 'suggestions', label: t('sections.suggestions', 'Suggestions'), icon: BookOpen },
+    { key: 'changelog', label: t('sections.changelog', 'Changelog'), icon: GitBranch }
+  ];
 
   return (
     <div className="space-y-8">
       {/* Breadcrumb */}
       <nav className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
         <Link to="/docs" className="hover:text-[var(--color-primary-600)]">
-          {t('breadcrumb.docs')}
+          {t('breadcrumb.docs', 'Documentation')}
         </Link>
         <span>/</span>
         <Link to="/docs/business" className="hover:text-[var(--color-primary-600)]">
-          {t('breadcrumb.business')}
+          {t('breadcrumb.business', 'Business')}
         </Link>
         <span>/</span>
-        <Link to={`/docs/business/${frdData.applicationName.toLowerCase()}`} className="hover:text-[var(--color-primary-600)]">
-          {t(`apps.${frdData.applicationName.toLowerCase()}.name`)}
+        <Link to={`/docs/business/${app}`} className="hover:text-[var(--color-primary-600)]">
+          {feature.metadata.application}
         </Link>
         <span>/</span>
-        <span>{t(`modules.${frdData.moduleName.toLowerCase()}.name`)}</span>
+        <span>{feature.metadata.module}</span>
       </nav>
 
       {/* Header */}
       <header>
         <div className="flex items-center gap-2 mb-2">
           <span className="px-2 py-0.5 rounded bg-[var(--color-primary-600)]/10 text-[var(--color-primary-600)] text-xs font-medium">
-            {frdData.featureId}
-          </span>
-          <span className="px-2 py-0.5 rounded bg-green-500/10 text-green-600 text-xs font-medium">
-            v{frdData.version}
+            {feature.id}
           </span>
+          <StatusBadge status={feature.status} />
+          <VersionSelector
+            versions={versions}
+            current={currentVersion}
+            onChange={setCurrentVersion}
+          />
         </div>
         <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
           <FileText className="w-8 h-8 text-[var(--color-primary-600)]" />
-          {t(`modules.${frdData.moduleName.toLowerCase()}.title`)}
+          {feature.metadata.module} - Business Analysis
         </h1>
         <p className="text-lg text-[var(--text-secondary)]">
-          {t(`modules.${frdData.moduleName.toLowerCase()}.subtitle`)}
+          {feature.discovery.problem}
         </p>
       </header>
 
@@ -128,91 +204,89 @@ export function {ModuleName}FrdDocPage() {
       <div className="card p-4 bg-[var(--bg-secondary)]">
         <h2 className="font-semibold mb-3 flex items-center gap-2">
           <List className="w-4 h-4" />
-          {t('common.tableOfContents')}
+          {t('common.tableOfContents', 'Table of Contents')}
         </h2>
-        <nav className="grid grid-cols-2 md:grid-cols-3 gap-2">
-          {['overview', 'useCases', 'businessRules', 'permissions', 'wireframes', 'api'].map((section, idx) => (
+        <nav className="grid grid-cols-2 md:grid-cols-4 gap-2">
+          {sections.map((section, idx) => (
             <a
-              key={section}
+              key={section.key}
               href={`#section-${idx + 1}`}
               className="flex items-center gap-2 p-2 rounded hover:bg-[var(--bg-tertiary)] text-sm"
             >
               <ChevronRight className="w-4 h-4 text-[var(--color-primary-600)]" />
-              {t(`sections.${section}`)}
+              {section.label}
             </a>
           ))}
         </nav>
       </div>
 
-      {/* Sections follow standard pattern - see templates-react.md */}
+      {/* Stats Overview */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        {[
+          { label: 'Business Rules', value: feature.analysis.businessRules.length },
+          { label: 'Entities', value: feature.analysis.entities.length },
+          { label: 'Use Cases', value: feature.specification.useCases.length },
+          { label: 'Requirements', value: feature.specification.functionalRequirements.length },
+          { label: 'Permissions', value: feature.specification.permissionMatrix.permissions.length }
+        ].map(({ label, value }) => (
+          <div key={label} className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
+            <div className="text-2xl font-bold text-[var(--color-primary-600)]">{value}</div>
+            <div className="text-sm text-[var(--text-secondary)]">{label}</div>
+          </div>
+        ))}
+      </div>
 
-      {/* Section 1: Overview */}
-      <NumberedSection number={1} title={t('sections.overview')} icon={Layout}>
-        <p className="text-[var(--text-secondary)] mb-4">
-          {t(`modules.${frdData.moduleName.toLowerCase()}.overview`)}
-        </p>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
-          <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
-            <div className="text-2xl font-bold text-[var(--color-primary-600)]">
-              {frdData.useCases.length}
-            </div>
-            <div className="text-sm text-[var(--text-secondary)]">{t('stats.useCases')}</div>
+      {/* Section 1: Discovery */}
+      <NumberedSection number={1} title={sections[0].label} icon={Target}>
+        <div className="space-y-4">
+          <div>
+            <h3 className="font-medium mb-1">Problem</h3>
+            <p className="text-[var(--text-secondary)]">{feature.discovery.problem}</p>
           </div>
-          <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
-            <div className="text-2xl font-bold text-[var(--color-primary-600)]">
-              {frdData.businessRules.length}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <h3 className="font-medium mb-1">AS-IS</h3>
+              <p className="text-[var(--text-secondary)] text-sm">{feature.discovery.asIs}</p>
             </div>
-            <div className="text-sm text-[var(--text-secondary)]">{t('stats.businessRules')}</div>
-          </div>
-          <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
-            <div className="text-2xl font-bold text-[var(--color-primary-600)]">
-              {frdData.permissions.length}
+            <div>
+              <h3 className="font-medium mb-1">TO-BE</h3>
+              <p className="text-[var(--text-secondary)] text-sm">{feature.discovery.toBe}</p>
             </div>
-            <div className="text-sm text-[var(--text-secondary)]">{t('stats.permissions')}</div>
           </div>
-        </div>
-      </NumberedSection>
-
-      {/* Section 2: Use Cases */}
-      <NumberedSection number={2} title={t('sections.useCases')} icon={Users}>
-        <div className="space-y-4">
-          {frdData.useCases.map((uc) => (
-            <div key={uc.id} className="border border-[var(--border-color)] rounded-lg p-4">
-              <div className="flex items-center justify-between mb-2">
-                <h3 className="font-semibold flex items-center gap-2">
-                  <span className="px-2 py-0.5 rounded bg-[var(--color-primary-600)]/10 text-[var(--color-primary-600)] text-xs font-mono">
-                    {uc.id}
-                  </span>
-                  {uc.name}
-                </h3>
-                <span className="text-sm text-[var(--text-secondary)]">
-                  {t('labels.actor')}: {uc.actor}
-                </span>
-              </div>
-              <p className="text-sm text-[var(--text-secondary)] mb-2">{uc.description}</p>
-              <div className="flex items-center gap-2 text-xs">
-                <Shield className="w-3 h-3 text-amber-500" />
-                <code className="bg-[var(--bg-secondary)] px-2 py-0.5 rounded">{uc.permission}</code>
-              </div>
+          {feature.discovery.risks.length > 0 && (
+            <div>
+              <h3 className="font-medium mb-2">Risks</h3>
+              {feature.discovery.risks.map((risk) => (
+                <div key={risk.id} className="flex items-start gap-2 p-2 rounded bg-[var(--bg-secondary)] mb-1">
+                  <AlertTriangle className={`w-4 h-4 flex-shrink-0 mt-0.5 ${
+                    risk.severity === 'high' ? 'text-red-500' :
+                    risk.severity === 'medium' ? 'text-yellow-500' : 'text-blue-500'
+                  }`} />
+                  <div>
+                    <span className="text-sm font-medium">{risk.description}</span>
+                    <span className="text-xs text-[var(--text-secondary)] ml-2">({risk.mitigation})</span>
+                  </div>
+                </div>
+              ))}
             </div>
-          ))}
+          )}
         </div>
       </NumberedSection>
 
-      {/* Section 3: Business Rules */}
-      <NumberedSection number={3} title={t('sections.businessRules')} icon={CheckCircle}>
+      {/* Section 2: Business Rules */}
+      <NumberedSection number={2} title={sections[1].label} icon={CheckCircle}>
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
               <tr className="bg-[var(--bg-secondary)]">
                 <th className="text-left py-2 px-3 rounded-tl-lg">ID</th>
-                <th className="text-left py-2 px-3">{t('labels.rule')}</th>
-                <th className="text-left py-2 px-3">{t('labels.category')}</th>
-                <th className="text-left py-2 px-3 rounded-tr-lg">{t('labels.priority')}</th>
+                <th className="text-left py-2 px-3">Rule</th>
+                <th className="text-left py-2 px-3">Category</th>
+                <th className="text-left py-2 px-3 rounded-tr-lg">Priority</th>
               </tr>
             </thead>
             <tbody>
-              {frdData.businessRules.map((br, idx) => (
+              {feature.analysis.businessRules.map((br, idx) => (
                 <tr key={br.id} className={idx % 2 === 1 ? 'bg-[var(--bg-secondary)]/50' : ''}>
                   <td className="py-2 px-3 font-mono text-[var(--color-primary-600)]">{br.id}</td>
                   <td className="py-2 px-3">{br.rule}</td>
@@ -225,63 +299,108 @@ export function {ModuleName}FrdDocPage() {
         </div>
       </NumberedSection>
 
-      {/* Section 4: Permissions */}
-      <NumberedSection number={4} title={t('sections.permissions')} icon={Shield}>
-        <div className="space-y-3">
-          {frdData.permissions.map((perm) => (
-            <div key={perm.path} className="flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)]">
-              <div>
-                <code className="text-sm font-mono text-[var(--color-primary-600)]">{perm.path}</code>
-                <p className="text-sm text-[var(--text-secondary)] mt-1">{perm.description}</p>
+      {/* Section 3: Entities */}
+      <NumberedSection number={3} title={sections[2].label} icon={Database}>
+        <div className="space-y-4">
+          {feature.analysis.entities.map((entity) => (
+            <div key={entity.name} className="border border-[var(--border-color)] rounded-lg p-4">
+              <h3 className="font-semibold mb-2">{entity.name}</h3>
+              <p className="text-sm text-[var(--text-secondary)] mb-3">{entity.description}</p>
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-[var(--bg-secondary)]">
+                    <th className="text-left py-1 px-2">Attribute</th>
+                    <th className="text-left py-1 px-2">Type</th>
+                    <th className="text-left py-1 px-2">Required</th>
+                    <th className="text-left py-1 px-2">Rules</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {entity.attributes.map((attr) => (
+                    <tr key={attr.name}>
+                      <td className="py-1 px-2 font-mono text-xs">{attr.name}</td>
+                      <td className="py-1 px-2 text-xs">{attr.type}</td>
+                      <td className="py-1 px-2 text-xs">{attr.required ? 'Yes' : 'No'}</td>
+                      <td className="py-1 px-2 text-xs text-[var(--text-secondary)]">{attr.rules}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {entity.relationships.length > 0 && (
+                <div className="mt-2 text-xs text-[var(--text-secondary)]">
+                  Relationships: {entity.relationships.map(r => `${r.type} -> ${r.target}`).join(', ')}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </NumberedSection>
+
+      {/* Section 4: Use Cases */}
+      <NumberedSection number={4} title={sections[3].label} icon={Users}>
+        <div className="space-y-4">
+          {feature.specification.useCases.map((uc) => (
+            <div key={uc.id} className="border border-[var(--border-color)] rounded-lg p-4">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="font-semibold flex items-center gap-2">
+                  <span className="px-2 py-0.5 rounded bg-[var(--color-primary-600)]/10 text-[var(--color-primary-600)] text-xs font-mono">
+                    {uc.id}
+                  </span>
+                  {uc.name}
+                </h3>
+                <span className="text-sm text-[var(--text-secondary)]">
+                  Actor: {uc.actor}
+                </span>
               </div>
-              <div className="flex gap-1">
-                {perm.roles.map((role) => (
-                  <span key={role} className="px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-xs">
-                    {role}
+              <div className="text-sm mb-2">
+                <ol className="list-decimal list-inside space-y-1 text-[var(--text-secondary)]">
+                  {uc.mainScenario.map((step, i) => (
+                    <li key={i}>{step}</li>
+                  ))}
+                </ol>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <Shield className="w-3 h-3 text-amber-500" />
+                <code className="bg-[var(--bg-secondary)] px-2 py-0.5 rounded">{uc.permission}</code>
+                {uc.linkedRules.length > 0 && (
+                  <span className="text-[var(--text-secondary)]">
+                    Rules: {uc.linkedRules.join(', ')}
                   </span>
-                ))}
+                )}
               </div>
             </div>
           ))}
         </div>
-
-        {/* Permission Warning */}
-        <div className="mt-4 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-start gap-3">
-          <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
-          <div>
-            <div className="font-medium text-amber-600">{t('warnings.permissionCheck')}</div>
-            <p className="text-sm text-[var(--text-secondary)]">
-              {t('warnings.permissionCheckDescription')}
-            </p>
-          </div>
-        </div>
       </NumberedSection>
 
-      {/* Section 5: Wireframes */}
-      <NumberedSection number={5} title={t('sections.wireframes')} icon={Layout}>
-        <div className="border-2 border-dashed border-[var(--border-color)] rounded-lg p-6">
-          <div className="text-center text-sm text-[var(--text-tertiary)] mb-4">
-            {t('common.wireframePreview')}
-          </div>
-          <div className="space-y-4">
-            <div className="h-12 bg-[var(--bg-secondary)] rounded flex items-center px-4 justify-between">
-              <span className="text-sm">[Header + Navigation]</span>
-              <span className="text-sm">[User Menu]</span>
-            </div>
-            <div className="grid grid-cols-4 gap-4">
-              <div className="col-span-1 h-64 bg-[var(--bg-secondary)] rounded p-4">
-                <span className="text-sm">[Filters]</span>
-              </div>
-              <div className="col-span-3 h-64 bg-[var(--bg-secondary)] rounded p-4">
-                <span className="text-sm">[Data Table]</span>
+      {/* Section 5: Permissions */}
+      <NumberedSection number={5} title={sections[4].label} icon={Shield}>
+        <div className="space-y-3">
+          {feature.specification.permissionMatrix.permissions.map((perm) => {
+            const assignedRoles = feature.specification.permissionMatrix.roleAssignments
+              .filter(ra => ra.permissions.includes(perm.path))
+              .map(ra => ra.role);
+            return (
+              <div key={perm.path} className="flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)]">
+                <div>
+                  <code className="text-sm font-mono text-[var(--color-primary-600)]">{perm.path}</code>
+                  <p className="text-sm text-[var(--text-secondary)] mt-1">{perm.description}</p>
+                </div>
+                <div className="flex gap-1">
+                  {assignedRoles.map((role) => (
+                    <span key={role} className="px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-xs">
+                      {role}
+                    </span>
+                  ))}
+                </div>
               </div>
-            </div>
-          </div>
+            );
+          })}
         </div>
       </NumberedSection>
 
       {/* Section 6: API Endpoints */}
-      <NumberedSection number={6} title={t('sections.api')} icon={Database}>
+      <NumberedSection number={6} title={sections[5].label} icon={Zap}>
         <div className="overflow-x-auto">
           <table className="w-full text-sm font-mono">
             <thead>
@@ -292,45 +411,89 @@ export function {ModuleName}FrdDocPage() {
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td className="py-2 px-3"><span className="px-2 py-0.5 rounded bg-green-500/10 text-green-600">GET</span></td>
-                <td className="py-2 px-3">/api/business/{'{module}'}</td>
-                <td className="py-2 px-3 text-[var(--text-secondary)]">.read</td>
-              </tr>
-              <tr className="bg-[var(--bg-secondary)]/50">
-                <td className="py-2 px-3"><span className="px-2 py-0.5 rounded bg-blue-500/10 text-blue-600">POST</span></td>
-                <td className="py-2 px-3">/api/business/{'{module}'}</td>
-                <td className="py-2 px-3 text-[var(--text-secondary)]">.create</td>
-              </tr>
-              <tr>
-                <td className="py-2 px-3"><span className="px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-600">PUT</span></td>
-                <td className="py-2 px-3">/api/business/{'{module}'}/{'{id}'}</td>
-                <td className="py-2 px-3 text-[var(--text-secondary)]">.update</td>
-              </tr>
-              <tr className="bg-[var(--bg-secondary)]/50">
-                <td className="py-2 px-3"><span className="px-2 py-0.5 rounded bg-red-500/10 text-red-600">DELETE</span></td>
-                <td className="py-2 px-3">/api/business/{'{module}'}/{'{id}'}</td>
-                <td className="py-2 px-3 text-[var(--text-secondary)]">.delete</td>
-              </tr>
+              {feature.specification.apiEndpoints.map((ep, idx) => {
+                const methodColors: Record<string, string> = {
+                  GET: 'bg-green-500/10 text-green-600',
+                  POST: 'bg-blue-500/10 text-blue-600',
+                  PUT: 'bg-yellow-500/10 text-yellow-600',
+                  DELETE: 'bg-red-500/10 text-red-600'
+                };
+                return (
+                  <tr key={`${ep.method}-${ep.path}`} className={idx % 2 === 1 ? 'bg-[var(--bg-secondary)]/50' : ''}>
+                    <td className="py-2 px-3">
+                      <span className={`px-2 py-0.5 rounded ${methodColors[ep.method]}`}>{ep.method}</span>
+                    </td>
+                    <td className="py-2 px-3">{ep.path}</td>
+                    <td className="py-2 px-3 text-[var(--text-secondary)]">{ep.permission}</td>
+                  </tr>
+                );
+              })}
             </tbody>
           </table>
         </div>
       </NumberedSection>
 
+      {/* Section 7: Suggestions */}
+      {feature.suggestions.length > 0 && (
+        <NumberedSection number={7} title={sections[6].label} icon={BookOpen}>
+          <div className="space-y-2">
+            {feature.suggestions.map((s) => (
+              <div key={s.code} className={`flex items-center justify-between p-3 rounded-lg border ${
+                s.accepted === true ? 'border-green-500/30 bg-green-500/5' :
+                s.accepted === false ? 'border-red-500/30 bg-red-500/5 opacity-50' :
+                'border-[var(--border-color)]'
+              }`}>
+                <div>
+                  <span className="font-medium text-sm">{s.title}</span>
+                  <span className="text-xs text-[var(--text-secondary)] ml-2">({s.type}: {s.code})</span>
+                  <p className="text-xs text-[var(--text-secondary)]">{s.reason}</p>
+                </div>
+                <span className={`px-2 py-0.5 rounded text-xs ${
+                  s.accepted === true ? 'bg-green-500/10 text-green-600' :
+                  s.accepted === false ? 'bg-red-500/10 text-red-600' :
+                  'bg-gray-500/10 text-gray-600'
+                }`}>
+                  {s.accepted === true ? 'Accepted' : s.accepted === false ? 'Declined' : 'Pending'}
+                </span>
+              </div>
+            ))}
+          </div>
+        </NumberedSection>
+      )}
+
+      {/* Section 8: Changelog */}
+      <NumberedSection number={8} title={sections[7].label} icon={GitBranch}>
+        <div className="space-y-3">
+          {feature.changelog.map((entry) => (
+            <div key={entry.version} className="border-l-2 border-[var(--color-primary-600)] pl-4">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="font-mono text-sm font-medium">v{entry.version}</span>
+                <span className="text-xs text-[var(--text-secondary)]">{entry.timestamp}</span>
+              </div>
+              <ul className="text-sm text-[var(--text-secondary)] space-y-0.5">
+                {entry.changes.map((change, i) => (
+                  <li key={i}>{change}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </NumberedSection>
+
       {/* Navigation Footer */}
       <div className="flex justify-between pt-6 border-t border-[var(--border-color)]">
         <Link
-          to={`/docs/business/${frdData.applicationName.toLowerCase()}`}
+          to={`/docs/business/${app}`}
           className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]"
         >
           <ArrowRight className="w-4 h-4 rotate-180" />
-          {t('nav.backToApp')}
+          {t('nav.backToApp', 'Back to Application')}
         </Link>
         <Link
           to="/docs/business"
           className="flex items-center gap-2 text-[var(--color-primary-600)]"
         >
-          {t('nav.allModules')}
+          {t('nav.allModules', 'All Modules')}
           <ArrowRight className="w-4 h-4" />
         </Link>
       </div>