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:

```bash
# 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:

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

**Option B: Manuel Integration**

```typescript
// 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:**

```typescript
// 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:**

```typescript
// 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:**

```typescript
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

```bash
# 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:

```typescript
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

```typescript
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

```typescript
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:

```typescript
// 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

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

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

### Integrer Backend Data

```typescript
// 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*