apps/widget-board/widgets/INSTALLATION_GUIDE.md

🚀 INSTALLATION & INTEGRATION GUIDE

Hvad Er Implementeret

✅ Neural Ascension Protocol (11 Widgets)

• Master Control Dashboard
• 10 Transformation Points (SEGA, THG, SCE, NSQI, PTAM, CDMM, APD, MSH, QEK, CCA)

✅ Data & Indsigter Hub (1 Widget)

• Omfattende data management interface
• Advanced search & filtering
• AI-powered insights
• Multi-source data access

---

Step-by-Step Installation

TRIN 1: Verificer Filer Er På Plads

Tjek at alle filer findes:

# Neural Ascension Widgets
apps/widget-board/widgets/NeuralAscension/
├── index.ts
├── MasterControl.tsx
├── SEGA.tsx
├── THG.tsx
├── SCE.tsx
├── NSQI.tsx
├── PTAM.tsx
└── RestWidgets.tsx

# Data & Indsigter
apps/widget-board/widgets/
├── DataInsightsHub.tsx
├── IntegrationExample.tsx
└── README.md

TRIN 2: Import Widgets i Din App

Option A: Brug Integration Example

Kopier IntegrationExample.tsx kode til din main app:

import { COMPLETE_WIDGET_REGISTRY, MENU_CATEGORIES, WIDGET_COMPONENTS } from './widgets/IntegrationExample';

Option B: Manuel Integration

// I din App.tsx eller WidgeTDC_Pro.tsx
import { NeuralAscensionWidgets } from './widgets/NeuralAscension';
import DataInsightsHub from './widgets/DataInsightsHub';

// Kombiner med eksisterende widgets
const allWidgets = [
  ...existingWidgets,
  ...NeuralAscensionWidgets,
  {
    id: 'DataInsightsHub',
    name: 'Data & Indsigter Central',
    category: 'data',
    // ... resten af metadata
  }
];

TRIN 3: Opdater Widget Registry

Hvis du bruger WidgetRegistryContext:

// I WidgetRegistryContext.tsx eller lignende
import { NeuralAscensionWidgets } from './widgets/NeuralAscension';
import DataInsightsHub from './widgets/DataInsightsHub';

// Registrer widgets
NeuralAscensionWidgets.forEach(widget => {
  registerWidget(widget);
});

registerWidget({
  id: 'DataInsightsHub',
  name: 'Data & Indsigter Central',
  // ... metadata
});

Hvis du bruger statisk registry:

// I din widgetRegistry fil
export const WIDGETS = {
  // Eksisterende widgets...
  
  // Neural Ascension
  MasterControl: { /* metadata */ },
  SEGA: { /* metadata */ },
  THG: { /* metadata */ },
  // ... osv
  
  // Data & Indsigter
  DataInsightsHub: { /* metadata */ }
};

TRIN 4: Tilføj til Navigation Menu

Eksempel navigation struktur:

const navigationMenu = [
  {
    category: 'Neural Ascension',
    icon: 'Rocket',
    items: [
      { id: 'MasterControl', name: 'Master Control' },
      { id: 'SEGA', name: 'Self-Evolving Graph' },
      { id: 'THG', name: 'Temporal Hypergraphs' },
      { id: 'SCE', name: 'Swarm Consciousness' },
      // ... resten
    ]
  },
  {
    category: 'Data & Indsigter',
    icon: 'Database',
    items: [
      { id: 'DataInsightsHub', name: 'Data Central' }
    ]
  }
];

TRIN 5: Test Widgets Individuelt

# Start din dev server
npm run dev

# Åbn browser og test hver widget:
# 1. Master Control → Verificer metrics vises
# 2. SEGA → Test evolution mode
# 3. THG → Test timeline navigation
# 4. SCE → Verificer model status
# 5. Data & Indsigter → Test search og filters

---

Integration Patterns

Pattern 1: Widget Selector Modal

Brug WidgetSelectorModal fra IntegrationExample:

import { WidgetSelectorModal } from './widgets/IntegrationExample';

function MyApp() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Add Widget</button>
      <WidgetSelectorModal 
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSelectWidget={(widget) => {
          // Add widget to dashboard
        }}
      />
    </>
  );
}

Pattern 2: Dynamic Widget Rendering

import { WIDGET_COMPONENTS } from './widgets/IntegrationExample';

function WidgetContainer({ widgetId }) {
  const Widget = WIDGET_COMPONENTS[widgetId];
  return Widget ? <Widget /> : <div>Widget not found</div>;
}

Pattern 3: Category-Based Organization

import { MENU_CATEGORIES } from './widgets/IntegrationExample';

function Sidebar() {
  return (
    <div>
      {MENU_CATEGORIES.map(category => (
        <div key={category.id}>
          <h3>{category.name}</h3>
          {category.widgets.map(widget => (
            <button onClick={() => addWidget(widget)}>
              {widget.name}
            </button>
          ))}
        </div>
      ))}
    </div>
  );
}

---

Troubleshooting

Problem: Widgets vises ikke

Løsning:

1. Verificer import paths er korrekte
2. Tjek console for fejl
3. Verificer widget IDs matcher mellem registry og component map

Problem: Styling ser forkert ud

Løsning:

1. Tjek at TailwindCSS er konfigureret korrekt
2. Verificer gradient colors er supporteret
3. Prøv at rebuild CSS: npm run build:css

Problem: TypeScript errors

Løsning:

1. Installer types: npm install -D @types/react
2. Opdater tsconfig.json med correct paths
3. Restart TypeScript server

Problem: Icons vises ikke

Løsning:

1. Install lucide-react: npm install lucide-react
2. Verificer import statements
3. Check bundle size hvis for stor

---

Customization

Ændre Farver

Rediger widget filer direkte:

// I SEGA.tsx - skift fra purple til blue
className="bg-gradient-to-br from-blue-950 via-blue-950 to-black"

Tilføj Nye Metrics

// I MasterControl.tsx
const [customMetric, setCustomMetric] = useState(0);

<MetricCard
  icon={<YourIcon />}
  label="Custom Metric"
  value={customMetric}
  trend="+10%"
  color="blue"
/>

Integrer Backend Data

// Eksempel: Connect SEGA til Neo4j
useEffect(() => {
  fetch('/api/neo4j/stats')
    .then(res => res.json())
    .then(data => setMetrics(data));
}, []);

---

Deployment Checklist

• Alle widgets importeret korrekt
• Widget registry opdateret
• Navigation menu inkluderer nye kategorier
• TypeScript kompilerer uden fejl
• Ingen console errors i browser
• Widgets renderer korrekt på alle skærmstørrelser
• Performance metrics er acceptable
• Backend endpoints connected (hvis relevant)

---

Support & Documentation

README: apps/widget-board/widgets/README.md
Integration Example: apps/widget-board/widgets/IntegrationExample.tsx
Widget Source: apps/widget-board/widgets/NeuralAscension/

For hjælp:

1. Tjek README.md først
2. Se IntegrationExample.tsx for kode-eksempler
3. Inspicér widget source code for detaljer

---

Succes med integrationen! 🚀

Created by Claude Sonnet 4.5
December 14, 2025