# Dependency Map - Frontend Nyla

Diese Datei enthält eine detaillierte Dependency Map aller Code-Elemente im Frontend Nyla.

## Legende

- `→` = Import/Dependency
- `[Module]` = Modul/Namespace
- `(Hook)` = React Hook
- `(Component)` = React Component
- `(Context)` = React Context
- `(Type)` = TypeScript Type/Interface

---

## 1. Application Entry & Core

### main.tsx
```
main.tsx
  → react (StrictMode)
  → react-dom/client (createRoot)
  → App.tsx
```

### App.tsx
```
App.tsx
  → react-router-dom (BrowserRouter, Routes, Route)
  → react (useEffect)
  → pages/Login (Login)
  → pages/Register (Register)
  → auth/authProvider (AuthProvider)
  → auth/ProtectedRoute (ProtectedRoute)
  → contexts/LanguageContext (LanguageProvider)
  → pages/Home/Home (Home)
  → assets/styles/light.css
  → index.css
```

---

## 2. Authentication Layer

### auth/authProvider.tsx
```
auth/authProvider.tsx
  → @azure/msal-browser (AuthenticationResult, EventType, PublicClientApplication)
  → @azure/msal-react (MsalProvider)
  → auth/authConfig (msalConfig)
  → react (ReactNode, useEffect, useState)
```

### auth/ProtectedRoute.tsx
```
auth/ProtectedRoute.tsx
  → react-router-dom (Navigate)
  → hooks/useAuthentication (useAuth)
  → react (ReactNode)
```

### hooks/useAuthentication.ts
```
hooks/useAuthentication.ts
  → @azure/msal-react (useMsal, useIsAuthenticated)
  → api.ts (api)
  → react (useState, useCallback, useEffect)
```

---

## 3. API Layer

### api.ts
```
api.ts
  → axios (axios.create, AxiosInstance)
  → [Environment Variables]
```

### hooks/useApi.ts
```
hooks/useApi.ts
  → api.ts (api)
  → react (useState, useCallback)
```

---

## 4. Context Layer

### contexts/LanguageContext.tsx
```
contexts/LanguageContext.tsx
  → react (createContext, useContext, useState, useEffect, ReactNode)
  → locales/index (loadLanguage)
  → locales/types (Language, TranslationKeys)
```

### locales/index.ts
```
locales/index.ts
  → locales/de (de)
  → locales/en (en)
  → locales/fr (fr)
  → locales/types (Language, TranslationKeys, LanguageLoader)
```

---

## 5. Page Management System

### components/PageManager/PageManager.tsx
```
PageManager.tsx
  → react (useEffect, useState, Suspense)
  → react-router-dom (useLocation)
  → framer-motion (motion, AnimatePresence)
  → components/PageManager/pageConfigs (pageConfigs)
  → components/PageManager/PageManager.module.css
```

### components/PageManager/pageConfigs.ts
```
pageConfigs.ts
  → react (lazy)
  → components/PageManager/pageConfigInterface (PageConfig)
  → pages/Home/Dashboard (Dashboard) [lazy]
  → pages/Home/Dateien (Dateien) [lazy]
  → pages/Home/TeamBereich (TeamBereich) [lazy]
  → pages/Home/Connections (Connections) [lazy]
  → pages/Home/Workflows (Workflows) [lazy]
  → pages/Home/Einstellungen (Einstellungen) [lazy]
  → pages/Home/Prompts (Prompts) [lazy]
  → react-icons/* (Icons)
```

### components/PageManager/pageConfigInterface.ts
```
pageConfigInterface.ts
  → react (ComponentType)
  → react-icons (IconType)
```

---

## 6. Sidebar System

### components/Sidebar/Sidebar.tsx
```
Sidebar.tsx
  → react (React)
  → components/Sidebar/SidebarItem (SidebarItem)
  → components/Sidebar/SidebarUser (SidebarUser)
  → hooks/useSidebar (useSidebarFromPageConfigs)
  → components/Sidebar/sidebarLogic (useSidebarLogic)
  → components/Sidebar/sidebarTypes (SidebarProps)
  → components/Sidebar/SidebarStyles/Sidebar.module.css
  → react-icons/go (GoSidebarExpand, GoSidebarCollapse)
```

### hooks/useSidebar.ts
```
useSidebar.ts
  → components/PageManager/pageConfigs (getSidebarItems)
  → react (useMemo)
```

### components/Sidebar/sidebarLogic.ts
```
sidebarLogic.ts
  → react-router-dom (useLocation, useNavigate)
  → react (useState, useCallback, useEffect)
```

---

## 7. Dashboard & Workflow System

### pages/Home/Dashboard.tsx
```
Dashboard.tsx
  → react (useState, useCallback, useRef, useEffect)
  → react-router-dom (useSearchParams)
  → hooks/useWorkflows (useWorkflows)
  → components/Dashboard/DashboardChat/dashboardChatAreaTypes (Workflow)
  → components/Dashboard/DashboardChat/useWorkflowManager (useWorkflowManager)
  → contexts/LanguageContext (useLanguage)
  → components/Dashboard/DashboardChat/DashboardChat (DashboardChat)
  → pages/Home/HomeStyles/Dashboard.module.css
  → components/PageManager/pages.module.css
  → react-icons/io (IoMdArrowDropdown, IoMdClose)
```

### components/Dashboard/DashboardChat/DashboardChat.tsx
```
DashboardChat.tsx
  → react (React)
  → components/Dashboard/DashboardChat/DashboardChatArea (DashboardChatArea)
  → components/Dashboard/DashboardChat/dashboardChatAreaTypes (DashboardChatProps)
  → components/Dashboard/DashboardChatAreaStyles/DashboardChat.module.css
```

### components/Dashboard/DashboardChat/DashboardChatArea.tsx
```
DashboardChatArea.tsx
  → react (useState, useEffect, useRef, useCallback, useMemo)
  → components/Dashboard/DashboardChat/DashboardChatAreaMessageList (DashboardChatAreaMessageList)
  → components/Dashboard/DashboardChat/DashboardChatAreaInput (DashboardChatAreaInput)
  → components/Dashboard/DashboardChat/DashboardChatAreaConnectedFiles (DashboardChatAreaConnectedFiles)
  → components/Dashboard/DashboardChat/DashboardChatAreaFilePreview (DashboardChatAreaFilePreview)
  → components/Dashboard/DashboardChat/DashboardChatAreaLogItem (DashboardChatAreaLogItem)
  → components/Dashboard/DashboardChat/dashboardChatAreaTypes (Types)
  → components/Dashboard/DashboardChatAreaStyles/*.module.css
```

### components/Dashboard/DashboardChat/useWorkflowManager.ts
```
useWorkflowManager.ts
  → react (useState, useEffect, useCallback, useRef, useMemo)
  → hooks/useWorkflows (useWorkflow, useWorkflowStatus, useWorkflowMessages, useWorkflowLogs, useWorkflowOperations, StartWorkflowRequest)
  → components/Dashboard/DashboardChat/dashboardChatAreaTypes (WorkflowState, WorkflowActions)
```

### hooks/useWorkflows.ts
```
useWorkflows.ts
  → react (useState, useEffect)
  → hooks/useApi (useApiRequest)
  → components/Dashboard/DashboardChat/dashboardChatAreaTypes (Workflow, WorkflowMessage, WorkflowStats, WorkflowDocument, WorkflowLog)
```

---

## 8. Connections Module

### pages/Home/Connections.tsx
```
Connections.tsx
  → react (useState)
  → components/Connections (ConnectionsTable, useConnectionsLogic)
  → contexts/LanguageContext (useLanguage)
  → components/PageManager/pages.module.css
  → react-icons/io (IoIosLink)
```

### components/Connections/ConnectionsTable.tsx
```
ConnectionsTable.tsx
  → react (useState, useEffect)
  → components/Connections/connectionsLogic (useConnectionsLogic)
  → components/Connections/ConnectionEditModal (ConnectionEditModal)
  → components/Connections/ConnectionsErrorDisplay (ConnectionsErrorDisplay)
  → hooks/useConnections (useConnections)
  → contexts/LanguageContext (useLanguage)
  → components/Connections/ConnectionsTable.module.css
```

### components/Connections/connectionsLogic.tsx
```
connectionsLogic.tsx
  → react (useState, useCallback)
  → hooks/useConnections (useConnections, useConnectionOperations)
  → components/Connections/connectionsInterfaces (Connection Types)
```

### hooks/useConnections.ts
```
useConnections.ts
  → react (useState, useEffect, useCallback)
  → hooks/useApi (useApiRequest)
  → components/Connections/connectionsInterfaces (Connection Types)
```

---

## 9. Files Module

### pages/Home/Dateien.tsx
```
Dateien.tsx
  → react (useRef, useState)
  → components/Dateien (DateienTable)
  → hooks/useFiles (useFileOperations)
  → contexts/LanguageContext (useLanguage)
  → components/PageManager/pages.module.css
  → pages/Home/HomeStyles/Dateien.module.css
  → react-icons/io (IoMdCloudUpload)
```

### components/Dateien/DateienTable.tsx
```
DateienTable.tsx
  → react (useState, useEffect, useCallback)
  → components/Dateien/dateienLogic (useDateienLogic)
  → components/FilePreview (FilePreview)
  → hooks/useFiles (useFiles, useFileOperations)
  → contexts/LanguageContext (useLanguage)
  → components/Dateien/DateienTable.module.css
```

### hooks/useFiles.ts
```
useFiles.ts
  → react (useState, useEffect, useCallback)
  → hooks/useApi (useApiRequest)
```

### components/FilePreview/FilePreview.tsx
```
FilePreview.tsx
  → react (useState, useEffect)
  → components/FilePreview/renderers/* (Alle Renderer)
  → components/FilePreview/FilePreview.module.css
```

### components/FilePreview/renderers/*
```
renderers/
  → ApplicationRenderer.tsx
  → ErrorRenderer.tsx
  → HtmlRenderer.tsx
  → ImageRenderer.tsx
  → JsonRenderer.tsx
  → LoadingRenderer.tsx
  → PdfRenderer.tsx
  → TextRenderer.tsx
  → UnsupportedRenderer.tsx
  → index.ts (Exports)
```

---

## 10. Prompts Module

### pages/Home/Prompts.tsx
```
Prompts.tsx
  → react (useState)
  → components/Prompts (PromptsTable)
  → components/Popup (Popup, EditForm)
  → hooks/usePrompts (usePrompts, usePromptOperations)
  → contexts/LanguageContext (useLanguage)
  → components/PageManager/pages.module.css
  → react-icons/io (IoMdAdd)
```

### components/Prompts/PromptsTable.tsx
```
PromptsTable.tsx
  → react (useState, useEffect)
  → components/Prompts/promptsLogic (usePromptsLogic)
  → hooks/usePrompts (usePrompts, usePromptOperations)
  → contexts/LanguageContext (useLanguage)
  → components/Prompts/PromptsTable.module.css
```

### hooks/usePrompts.ts
```
usePrompts.ts
  → react (useState, useEffect, useCallback)
  → hooks/useApi (useApiRequest)
  → components/Prompts/promptsTypes (Prompt Types)
```

---

## 11. Workflows Module

### pages/Home/Workflows.tsx
```
Workflows.tsx
  → components/Workflows (WorkflowsTable)
  → contexts/LanguageContext (useLanguage)
  → components/PageManager/pages.module.css
  → pages/Home/HomeStyles/Workflows.module.css
```

### components/Workflows/WorkflowsTable.tsx
```
WorkflowsTable.tsx
  → react (useState, useEffect)
  → components/Workflows/workflowsLogic (useWorkflowsLogic)
  → hooks/useWorkflows (useWorkflows)
  → contexts/LanguageContext (useLanguage)
  → components/Workflows/WorkflowsTable.module.css
```

---

## 12. Popup/Modal System

### components/Popup/Popup.tsx
```
Popup.tsx
  → react (useEffect, ReactNode)
  → components/Popup/Popup.module.css
```

### components/Popup/EditForm.tsx
```
EditForm.tsx
  → react (useState, useEffect, useCallback)
  → components/Popup/EditForm.module.css
```

### components/Popup/ViewForm.tsx
```
ViewForm.tsx
  → react (ReactNode)
  → components/Popup/ViewForm.module.css
```

---

## 13. Form Generator

### components/FormGenerator/FormGenerator.tsx
```
FormGenerator.tsx
  → react (useState, useEffect)
  → components/FormGenerator/FormGenerator.module.css
```

---

## 14. Users & Settings

### pages/Home/Einstellungen.tsx
```
Einstellungen.tsx
  → react (useState, useEffect, useRef)
  → hooks/useUsers (useCurrentUser, useUser, User)
  → contexts/LanguageContext (useLanguage, Language)
  → components/settings/settingsUser (SettingsUser)
  → components/PageManager/pages.module.css
  → pages/Home/HomeStyles/Einstellungen.module.css
```

### hooks/useUsers.ts
```
useUsers.ts
  → react (useState, useEffect, useCallback)
  → hooks/useApi (useApiRequest)
```

---

## 15. Team/Mitglieder Module

### pages/Home/TeamBereich.tsx
```
TeamBereich.tsx
  → components/Mitglieder/MitgliederTable (MitgliederTable)
  → components/PageManager/pages.module.css
```

### components/Mitglieder/MitgliederTable.tsx
```
MitgliederTable.tsx
  → react (useState, useEffect)
  → components/Mitglieder/mitgliederLogic (useMitgliederLogic)
  → contexts/LanguageContext (useLanguage)
  → components/Mitglieder/MitgliederTable.module.css
```

---

## 16. SharePoint Test Module

### pages/Home/TestSharepoint.tsx
```
TestSharepoint.tsx
  → react (useState)
  → components/TestSharepoint (TestSharepointTable, useTestSharepointLogic)
  → contexts/LanguageContext (useLanguage)
  → components/PageManager/pages.module.css
  → pages/Home/HomeStyles/TestSharepoint.module.css
  → react-icons/io (IoIosRefresh, IoIosLink)
```

### hooks/useSharePointTest.ts
```
useSharePointTest.ts
  → react (useState, useEffect, useCallback)
  → hooks/useApi (useApiRequest)
```

---

## Dependency Summary

### Most Imported Modules
1. **react** - In fast allen Komponenten und Hooks
2. **react-router-dom** - Für Routing und Navigation
3. **hooks/useApi** - Für API-Aufrufe
4. **contexts/LanguageContext** - Für Internationalisierung
5. **components/PageManager/pageConfigs** - Für Seiten-Konfiguration

### Core Infrastructure Dependencies
- `api.ts` → Alle API-Hooks
- `hooks/useApi.ts` → Alle Feature-Hooks
- `contexts/LanguageContext.tsx` → Alle Komponenten mit i18n
- `components/PageManager/pageConfigs.ts` → PageManager & Sidebar

### External Library Dependencies
- **@azure/msal-*** → Authentication
- **axios** → HTTP Client
- **framer-motion** → Animations
- **react-icons** → Icons
- **xstate** → State Machine (optional)

---

*Zuletzt aktualisiert: 2025-01-15*