added frontend code

.github/workflows/main_poweron-nyla.yml

@@ -20,14 +20,19 @@ jobs:
           node-version: '18'
           cache: 'npm' # Aktiviert Caching für schnellere Builds
 
+      - name: Install dependencies
+        working-directory: ./frontend
+        run: npm install
+
+      - name: Build React app
+        working-directory: ./frontend
+        run: npm run build
+
       - name: Prepare deployment package
         run: |
-          # Create deployment package with source files
+          # Create deployment package with build files
           mkdir deploy
-          cp -r src deploy/
+          cp -r frontend/dist/* deploy/
-          cp -r public deploy/
-          cp package.json deploy/
-          cp package-lock.json deploy/
           cp staticwebapp.config.json deploy/
 
       - name: 'Deploy to Azure Web App'

frontend/.env

@@ -0,0 +1,8 @@
+VITE_API_URL="http://127.0.0.1:8000"
+
+VITE_MICROSOFT_CLIENT_ID="24cd6c8a-b592-4905-a5ba-d5fa9f911154"
+VITE_MICROSOFT_TENANT_ID="6a51aaeb-2467-4186-9504-2a05aedc591f"
+VITE_ENTRA_CLIENT_SECRET="2iw8Q~jwqG1iacxHopBt5pstu6R45UC1gIQabcbD"
+VITE_ENTRA_AUTHORITY="https://login.microsoftonline.com/6a51aaeb-2467-4186-9504-2a05aedc591f"
+VITE_ENTRA_REDIRECT_PATH="/auth/callback/"
+VITE_ENTRA_REDIRECT_URI="https://127.0.0.1:8000/auth/callback/"

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

frontend/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string
+    readonly VITE_MICROSOFT_CLIENT_ID: string
+    readonly VITE_MICROSOFT_TENANT_ID: string
+    readonly VITE_ENTRA_CLIENT_SECRET: string
+    readonly VITE_ENTRA_AUTHORITY: string
+    readonly VITE_ENTRA_REDIRECT_PATH: string
+    readonly VITE_ENTRA_REDIRECT_URI: string
+  }
+  
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }

frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5176",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^4.8.0",
+    "@azure/msal-react": "^3.0.7",
+    "axios": "^1.8.3",
+    "dotenv": "^16.0.3",
+    "framer-motion": "^12.7.3",
+    "fs": "^0.0.1-security",
+    "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
+    "jwt-decode": "^4.0.0",
+    "motion": "^12.7.3",
+    "pg": "^8.8.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.8",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "vite": "^6.2.0"
+  }
+}

frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/server.ts

@@ -0,0 +1,6 @@
+import fs from 'fs';
+
+export const httpsConfig: { key: Buffer; cert: Buffer } = {
+  key: fs.readFileSync("C:\\Users\\Ida Dittrich\\OneDrive - ValueOn AG\\Desktop\\Django_React\\backend\\private.key"),
+  cert: fs.readFileSync("C:\\Users\\Ida Dittrich\\OneDrive - ValueOn AG\\Desktop\\Django_React\\backend\\cert.pem"),
+};

frontend/src/App.tsx

@@ -0,0 +1,43 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { ProtectedRoute } from "./auth/ProtectedRoute";
+import Login from './pages/Login';
+import Home from './pages/Home';
+import Dashboard from './pages/Home/Dashboard/Dashboard';
+import { AuthProvider } from './auth/Hooks/auth-provider';
+import RegisterOrganisation from './pages/Register/RegisterOrganisation';
+import RegisterPricing from './pages/Register/RegisterPricing';
+import RegisterSummary from './pages/Register/RegisterSummary';
+import Mitglieder from './pages/Home/Mitglieder/Mitglieder';
+import Organisation from './pages/Home/Organisation/Organisation';
+import Dateien from './pages/Home/Dateien/Dateien';
+
+function App() {
+    return (
+        <AuthProvider>
+            <Router>
+                <Routes>
+                    {/* Public route */}
+                    <Route path="/login" element={<Login />} />
+                    <Route path="/register-organisation" element={<RegisterOrganisation />} />
+                    <Route path="/register-pricing" element={<RegisterPricing />} />
+                    <Route path="/register-summary" element={<RegisterSummary />} />
+                    
+                    {/* Protected routes */}
+                    <Route path="/" element={
+                        <ProtectedRoute>
+                            <Home />
+                        </ProtectedRoute>
+                    }>
+                        {/* Child route of Home - note the relative path */}
+                        <Route path="dashboard" element={<Dashboard />} />
+                        <Route path="dateien" element={<Dateien />} />
+                        <Route path="mitglieder" element={<Mitglieder />} />
+                        <Route path="organisation" element={<Organisation />} />
+                    </Route>
+                </Routes>
+            </Router>
+        </AuthProvider>
+    );
+}
+
+export default App;

frontend/src/api.ts

@@ -0,0 +1,126 @@
+// api.ts
+import axios from 'axios';
+
+const API_URL = import.meta.env?.VITE_API_URL || 'http://127.0.0.1:8000';
+
+const api = axios.create({
+    baseURL: API_URL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+export async function authorizedGet(endpoint: string, getToken: () => Promise<string>) {
+    try {
+        const token = await getToken();
+        // Ensure that token is not null or undefined
+        if (!token) {
+            throw new Error("No token found");
+        }
+        
+        const response = await api.get(endpoint, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        });
+
+        return response;  // Axios already wraps the response, no need to call .data here
+    } catch (err) {
+        console.error("API request failed:", err);
+        throw err;
+    }
+}
+
+export async function authorizedDelete(endpoint: string, getToken: () => Promise<string>) {
+    try {
+        const token = await getToken();
+        // Ensure that token is not null or undefined
+        if (!token) {
+            throw new Error("No token found");
+        }
+       
+        const response = await api.delete(endpoint, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        });
+        return response;  // Axios already wraps the response, no need to call .data here
+    } catch (err) {
+        console.error("API request failed:", err);
+        throw err;
+    }
+}
+
+export async function authorizedPut(endpoint: string, data: any, getToken: () => Promise<string>) {
+    try {
+        const token = await getToken();
+        // Ensure that token is not null or undefined
+        if (!token) {
+            throw new Error("No token found");
+        }
+       
+        const response = await api.put(endpoint, data, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        });
+        return response;
+    } catch (err) {
+        console.error("API request failed:", err);
+        throw err;
+    }
+}
+
+export async function authorizedPost(endpoint: string, getToken: () => Promise<string>, data: any) {
+    try {
+        const token = await getToken();
+        // Ensure that token is not null or undefined
+        if (!token) {
+            throw new Error("No token found");
+        }
+       
+        const response = await api.post(endpoint, data, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        });
+        return response;
+    } catch (err) {
+        console.error("API request failed:", err);
+        throw err;
+    }
+}
+
+export async function downloadFile(fileId: number, getToken: () => Promise<string>) {
+    try {
+        const token = await getToken();
+        if (!token) {
+            throw new Error("No token found");
+        }
+        
+        const response = await api.get(`/api/user/files/${fileId}/download`, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+            responseType: 'blob', // Important for file downloads
+        });
+        
+        // Create a blob URL and trigger download
+        const blob = new Blob([response.data]);
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = response.headers['content-disposition']?.split('filename=')[1] || 'download';
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+        
+        return response;
+    } catch (err) {
+        console.error("File download failed:", err);
+        throw err;
+    }
+}
+
+export default api;

frontend/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/src/auth/Hooks/auth-provider.tsx

@@ -0,0 +1,110 @@
+import { 
+    AuthenticationResult, 
+    EventType, 
+    PublicClientApplication, 
+    InteractionStatus
+  } from "@azure/msal-browser";
+  import { msalConfig } from "../auth-config";
+  import { MsalProvider } from "@azure/msal-react";
+  import { ReactNode, useEffect, useState } from "react";
+  
+  interface AuthProviderProps {
+    children: ReactNode;
+  }
+  
+  export const AuthProvider = ({ children }: AuthProviderProps) => {
+    const [msalInstance, setMsalInstance] = useState<PublicClientApplication | null>(null);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [loginAttempted, setLoginAttempted] = useState(false);
+    
+    useEffect(() => {
+      const msalApp = new PublicClientApplication(msalConfig);
+      
+      const initializeMsal = async () => {
+        try {
+          // Set event handlers first, so we catch all events
+          msalApp.addEventCallback((event) => {
+            if (event.eventType === EventType.LOGIN_SUCCESS) {
+              const payload = event?.payload as AuthenticationResult;
+              if (payload?.account) {
+                msalApp.setActiveAccount(payload.account);
+                console.log("Login successful");
+              }
+            } else if (event.eventType === EventType.LOGIN_FAILURE) {
+              console.error("Login failed:", event.error);
+            }
+          });
+          
+          // Initialize MSAL
+          await msalApp.initialize();
+          msalApp.enableAccountStorageEvents();
+          
+          // Handle any redirect response
+          const response = await msalApp.handleRedirectPromise();
+          if (response) {
+            // If we have a response, we've completed a redirect flow
+            console.log("Redirect completed successfully");
+            if (response.account) {
+              msalApp.setActiveAccount(response.account);
+            }
+          }
+          
+          // Check for accounts
+          const accounts = msalApp.getAllAccounts();
+          if (accounts.length > 0) {
+            msalApp.setActiveAccount(accounts[0]);
+          }
+          
+          setMsalInstance(msalApp);
+          setIsInitialized(true);
+        } catch (err) {
+          console.error("MSAL initialization failed", err);
+        }
+      };
+      
+      initializeMsal();
+    }, []);
+    
+    // Separate login effect with protection against loops
+    useEffect(() => {
+      if (!isInitialized || !msalInstance || loginAttempted) return;
+      
+      const accounts = msalInstance.getAllAccounts();
+      if (accounts.length === 0) {
+        // Set a flag to avoid repeated login attempts
+        setLoginAttempted(true);
+        
+        // Check local/session storage for redirect in progress
+        const inProgress = sessionStorage.getItem("msal.interaction.status");
+        if (inProgress === "login" || inProgress === "handleRedirect") {
+          console.log("Login already in progress according to session storage");
+          return;
+        }
+        
+        console.log("No accounts found, triggering login...");
+        
+        // Use a small timeout to ensure everything is ready
+        const loginTimer = setTimeout(() => {
+          msalInstance.loginRedirect({
+            scopes: ["openid", "profile", "email"]
+          }).catch(error => {
+            console.error("Login redirect failed:", error);
+            // Reset the flag if login fails
+            setLoginAttempted(false);
+          });
+        }, 500);
+        
+        return () => clearTimeout(loginTimer);
+      }
+    }, [isInitialized, msalInstance, loginAttempted]);
+    
+    if (!isInitialized || !msalInstance) {
+      return <div>Loading authentication...</div>;
+    }
+    
+    return <MsalProvider instance={msalInstance}>{children}</MsalProvider>;
+  };
+  
+  export function useAuthProvider() {
+    return { AuthProvider };
+  }

frontend/src/auth/Hooks/delete-user.ts

@@ -0,0 +1,14 @@
+import { authorizedDelete } from "../../api";
+
+async function deleteUser(userId: string, token: string): Promise<void> {
+    try {
+        const response = await authorizedDelete(`/api/user/${userId}`, async () => token);
+        // You can add additional handling here if needed
+        console.log("User deleted successfully:", response.status);
+    } catch (error) {
+        console.error("Failed to delete user:", error);
+        throw error;
+    }
+}
+
+export default deleteUser;

frontend/src/auth/Hooks/get-all-users.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { authorizedGet } from '../../api';
+import { useAuthToken } from '../../auth/Hooks/use-auth-token';
+
+type User = {
+  id: string;
+  name: string;
+  azure_id: string;
+  created_at: string;
+  role: string;
+  email: string;
+  phone: string;
+  position: string;
+};
+
+export const useOrgUsers = () => {
+    const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const { getToken } = useAuthToken();
+
+    const fetchUsers = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await authorizedGet("/api/organisation/users", getToken);
+            console.log(response)
+            setUsers(response.data)
+        } catch (err) {
+            setError("Failed to fetch users");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    return { users, loading, error, refetch: fetchUsers };
+};

frontend/src/auth/Hooks/use-auth-token.ts

@@ -0,0 +1,39 @@
+// src/hooks/useAuthToken.ts
+import { useMsal } from "@azure/msal-react";
+import { useCallback } from "react";
+import { InteractionRequiredAuthError } from "@azure/msal-browser";
+
+const tokenRequest = {
+  scopes: ["api://24cd6c8a-b592-4905-a5ba-d5fa9f911154/user_impersonation"], // Adjust scopes as needed
+};
+
+export function useAuthToken() {
+  const { instance, accounts } = useMsal();
+
+  const getToken = useCallback(async () => {
+    if (accounts.length === 0) throw new Error("No signed-in account found");
+
+    try {
+      const response = await instance.acquireTokenSilent({
+        ...tokenRequest,
+        account: accounts[0],
+      });
+      return response.accessToken;
+    } catch (err: any) {
+      if (err instanceof InteractionRequiredAuthError) {
+        console.warn("Silent token failed, redirecting for interactive login...");
+        // Trigger full-page redirect to login
+        instance.acquireTokenRedirect({
+          ...tokenRequest,
+          account: accounts[0], // you might omit this if it's undefined
+        });
+        return ""; // won't reach this anyway
+      }
+
+      console.error("Token acquisition failed unexpectedly:", err);
+      throw err;
+    }
+  }, [instance, accounts]);
+
+  return { getToken };
+}

frontend/src/auth/Hooks/use-msal-login.ts

@@ -0,0 +1,30 @@
+import { useMsal } from "@azure/msal-react";
+import { useState } from "react";
+import { loginRequest } from "../auth-config";
+
+export const useMsalLogin = () => {
+  const { instance } = useMsal();
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [error, setError] = useState<null | string>(null);
+
+  const login = async () => {
+    setIsLoggingIn(true);
+    setError(null);
+    try {
+      console.log("Starting login process...");
+      await instance.loginPopup(loginRequest); // or loginRedirect
+      console.log("Login successful");
+    } catch (err: any) {
+      console.error("Login failed:", err);
+      setError(err?.message || "Login failed");
+    } finally {
+      setIsLoggingIn(false);
+    }
+  };
+
+  return {
+    login,
+    isLoggingIn,
+    error,
+  };
+};

frontend/src/auth/Hooks/use-user-files.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { authorizedGet } from '../../api';
+import { useAuthToken } from './use-auth-token';
+
+type File = {
+    id: number;
+    file_name: string;
+    action: string;
+    user_id: number;
+    prompt_id: number;
+    meta_data: Record<string, any> | null;
+    created_at: string;
+};
+
+export const useUserFiles = () => {
+    const [files, setFiles] = useState<File[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const { getToken } = useAuthToken();
+
+    const fetchFiles = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await authorizedGet("/api/user/files", getToken);
+            setFiles(response.data);
+        } catch (err) {
+            setError("Failed to fetch files");
+            console.error("Error fetching files:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchFiles();
+    }, []);
+
+    return { files, loading, error, refetch: fetchFiles };
+}; 

frontend/src/auth/Hooks/use-user-info.ts

@@ -0,0 +1,33 @@
+import { useMsal } from "@azure/msal-react";
+
+interface UserInfo {
+  name?: string;
+  email?: string;
+  oid?: string;
+  tenantId?: string;
+  rawClaims?: Record<string, any>;
+}
+
+export const useUserInfo = (): UserInfo  => {
+  const { instance } = useMsal();
+  const account = instance.getActiveAccount();
+
+  if (!account) return {};
+
+  const idTokenClaims = account.idTokenClaims as {
+    name?: string;
+    preferred_username?: string;
+    email?: string;
+    oid?: string;
+    tid?: string;
+    [key: string]: any;
+  };
+
+  return {
+    name: idTokenClaims?.name,
+    email: idTokenClaims?.email || idTokenClaims?.preferred_username,
+    oid: idTokenClaims?.oid,
+    tenantId: idTokenClaims?.tid,
+    rawClaims: idTokenClaims,
+  };
+};

frontend/src/auth/Hooks/use-user-prompts.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { authorizedGet } from '../../api';
+import { useAuthToken } from './use-auth-token';
+
+type Prompt = {
+    id: string;
+    user_id: string;
+    prompt_title: string;
+    workflow_manager_plan: string;
+    result: string;
+    created_at: string;
+    user_prompt: string;
+};
+
+export const useUserPrompts = () => {
+    const [prompts, setPrompts] = useState<Prompt[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const { getToken } = useAuthToken();
+
+    const fetchPrompts = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await authorizedGet("/api/user/prompts", getToken);
+            setPrompts(response.data);
+        } catch (err) {
+            setError("Failed to fetch prompts");
+            console.error("Error fetching prompts:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchPrompts();
+    }, []);
+
+    return { prompts, loading, error, refetch: fetchPrompts };
+}; 

frontend/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,40 @@
+import { useMsal } from "@azure/msal-react";
+import { Navigate, useLocation } from "react-router-dom";
+import { ReactNode, useEffect, useState } from "react";
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  redirectPath?: string;
+}
+
+export const ProtectedRoute = ({ 
+  children, 
+  redirectPath = "/login" 
+}: ProtectedRouteProps) => {
+  const { accounts } = useMsal();
+  const location = useLocation();
+  const [isChecking, setIsChecking] = useState(true);
+  
+  useEffect(() => {
+    // Give a small delay to ensure MSAL is fully initialized
+    const timer = setTimeout(() => {
+      setIsChecking(false);
+    }, 100);
+    
+    return () => clearTimeout(timer);
+  }, []);
+  
+  // If still checking, show loading
+  if (isChecking) {
+    return <div>Checking authentication...</div>;
+  }
+  
+  // Check if user is authenticated
+  if (accounts.length === 0) {
+    console.log("No accounts found, redirecting to login");
+    return <Navigate to={redirectPath} state={{ from: location }} replace />;
+  }
+  
+  console.log("User is authenticated, rendering protected content");
+  return <>{children}</>;
+};

frontend/src/auth/auth-config.ts

@@ -0,0 +1,45 @@
+import { LogLevel } from '@azure/msal-browser';
+
+export const msalConfig = {
+    auth: {
+        clientId: '24cd6c8a-b592-4905-a5ba-d5fa9f911154', 
+        authority: 'https://login.microsoftonline.com/6a51aaeb-2467-4186-9504-2a05aedc591f/', 
+        redirectUri: '/', 
+        postLogoutRedirectUri: '/', 
+        navigateToLoginRequestUrl: false, 
+    },
+    cache: {
+        cacheLocation: 'localStorage', 
+        storeAuthStateInCookie: false, 
+    },
+    system: {
+        loggerOptions: {
+            loggerCallback: (level: any, message: any, containsPii: any) => {
+                if (containsPii) {
+                    return;
+                }
+                switch (level) {
+                    case LogLevel.Error:
+                        console.error(message);
+                        return;
+                    case LogLevel.Info:
+                        console.info(message);
+                        return;
+                    case LogLevel.Verbose:
+                        console.debug(message);
+                        return;
+                    case LogLevel.Warning:
+                        console.warn(message);
+                        return;
+                    default:
+                        return;
+                }
+            },
+        },
+    },
+};
+
+
+export const loginRequest = {
+    scopes: ["openid", "profile", "email", "api://24cd6c8a-b592-4905-a5ba-d5fa9f911154/user_impersonation"],
+};

frontend/src/components/DashboardPrompts/DashboardPrompt.module.css

@@ -0,0 +1,51 @@
+.dashboard_prompt {
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    align-self: stretch;
+    border-radius: 30px;
+    border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
+    background: var(--Grayscale-True-White, #FFF);
+    position: relative;
+    box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);
+    height: 100%;
+}
+
+.prompt_button_div {
+    display: flex;
+    align-self: stretch;
+    gap: 30px;
+}
+
+.prompt_button {
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    border: none;
+    background: none;
+    outline: none;
+    color: var(--Grayscale-Black, #24262B);
+}
+
+.prompt_button_inactive {
+    opacity: 50%;
+}
+
+.horizontalLine {
+    width: 100%;
+    background-color: black;
+    height: 2px;
+    margin-top: 19px;
+}
+
+.horizontalLineLight {
+    width: calc(100%);
+    background-color: #F1F1F1;
+    height: 2px;
+    margin-top: 39px;
+    margin-left: -20px;
+    position: absolute;
+}
+

frontend/src/components/DashboardPrompts/DashboardPrompt.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import DashboardPromptArea from './DashboardPromptArea/DashboardPromptArea';
+import DashboardPromptSet from './DashboardPromptSet/DashboardPromptSet';
+
+import styles from './DashboardPrompt.module.css';
+
+const DashboardPrompt: React.FC = () => {
+    const [activeTab, setActiveTab] = useState("Prompt Area");
+    const [searchParams] = useSearchParams();
+
+    useEffect(() => {
+        // If there's an expandedPrompt parameter, switch to the Prompt Set tab
+        const expandedPrompt = searchParams.get('expandedPrompt');
+        const promptId = searchParams.get('promptId');
+        
+        if (expandedPrompt) {
+            setActiveTab("Prompt Set");
+        } else if (promptId) {
+            setActiveTab("Prompt Area");
+        }
+    }, [searchParams]);
+
+    return (
+        <div className={ styles.dashboard_prompt }>
+            <div className={ styles.prompt_button_div }>
+                {["Prompt Area", "Prompt Set"].map((tab) => (
+                    <div key={tab} className={styles.buttonWrapper}>
+                        <button 
+                            key={tab} 
+                            className={`${styles.prompt_button} ${activeTab === tab ? styles.prompt_button_active : styles.prompt_button_inactive}`} 
+                            onClick={()=> setActiveTab(tab)} >
+                            { tab }
+                        </button>
+                        {activeTab === tab && <div className={styles.horizontalLine}></div>}
+                    </div>
+                ))}
+            </div>
+            <div className={styles.horizontalLineLight}></div>
+            <div>
+                {activeTab === "Prompt Area" ? <DashboardPromptArea /> : <DashboardPromptSet />}
+            </div>
+        </div>
+    )
+}
+
+export default DashboardPrompt;

frontend/src/components/DashboardPrompts/DashboardPromptArea/DashboardPromptArea.module.css

@@ -0,0 +1,37 @@
+.promptArea {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+}
+
+.cancelContainer {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+}
+
+.cancelButton {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 16px;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    color: #666;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.cancelButton:hover {
+    background-color: #f5f5f5;
+    border-color: #ccc;
+}
+
+.cancelIcon {
+    font-size: 16px;
+}

frontend/src/components/DashboardPrompts/DashboardPromptArea/DashboardPromptArea.tsx

@@ -0,0 +1,69 @@
+import { useState, useRef } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import DashboardPromptAreaMessage from './DashboardPromptAreaMessage';
+import DashboardPromptAreaChat from './DashboardPromptAreaChat';
+import { useAuthToken } from "../../../auth/Hooks/use-auth-token";
+import { authorizedGet } from "../../../api";
+import styles from './DashboardPromptArea.module.css';
+import { IoClose } from 'react-icons/io5';
+
+function DashboardPromptArea() {
+    const [messages, setMessages] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const messagesEndRef = useRef<HTMLDivElement | null>(null);
+    const { getToken } = useAuthToken();
+
+    const handleCancel = () => {
+        navigate('/dashboard');
+    };
+
+    const fetchMessages = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await authorizedGet("/api/messages/", getToken);
+            setMessages(response.data);
+        } catch (err) {
+            console.error("Error fetching messages:", err);
+            setError("Failed to fetch messages");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const addMessage = (newMessage: any) => {
+        setMessages((prevMessages) => [...prevMessages, newMessage]);
+    };
+
+    return (
+        <div className={styles.promptArea}>
+            {searchParams.get('promptId') && (
+                <div className={styles.cancelContainer}>
+                    <button 
+                        className={styles.cancelButton}
+                        onClick={handleCancel}
+                        title="Cancel prompt"
+                    >
+                        <IoClose className={styles.cancelIcon} />
+                        Cancel
+                    </button>
+                </div>
+            )}
+            <DashboardPromptAreaChat
+                messages={messages}
+                loading={loading}
+                error={error}
+                fetchMessages={fetchMessages}
+            />
+            <DashboardPromptAreaMessage
+                addMessage={addMessage}
+            />
+            <div ref={messagesEndRef} />
+        </div>
+    );
+}
+
+export default DashboardPromptArea;

frontend/src/components/DashboardPrompts/DashboardPromptArea/DashboardPromptAreaChat.module.css

@@ -0,0 +1,29 @@
+.messages_container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Align messages to the left */
+    width: 100%;
+    padding: 10px;
+    width: calc(100% - 40px);
+    height: calc(100% - 100px);
+    overflow-y: auto;
+    margin-bottom: 12px;
+  }
+
+
+.message_item {
+  margin-bottom: 10px;
+  }
+
+.message_content {
+    display: inline-block; /* Ensures the div is only as wide as the message content */
+    background-color: var(--Grayscale-Light-Gray, #F9F9F9); /* Background color for the message */
+    padding: 9px 14px;
+    border-radius: 10px; /* Optional: for rounded corners */
+    color: #000;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }

frontend/src/components/DashboardPrompts/DashboardPromptArea/DashboardPromptAreaChat.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useAuthToken } from "../../../auth/Hooks/use-auth-token";
+import styles from "./DashboardPromptAreaChat.module.css";
+
+function DashboardPromptAreaChat({ messages: propMessages, loading: propLoading, error: propError }: any) {
+    const [messages, setMessages] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [searchParams] = useSearchParams();
+    const { getToken } = useAuthToken();
+
+    const promptId = searchParams.get('promptId');
+    const promptText = searchParams.get('promptText');
+
+    useEffect(() => {
+        const fetchResponse = async () => {
+            if (promptId && promptText) {
+                setLoading(true);
+                setError(null);
+                
+                // Initialize with the user's prompt
+                setMessages([{
+                    id: promptId,
+                    content: promptText,
+                    created_at: new Date().toISOString(),
+                    type: 'user'
+                }]);
+
+                try {
+                    const token = await getToken();
+                    if (!token) {
+                        throw new Error('No authentication token available');
+                    }
+
+                    console.log('Making request with token:', token);
+                    
+                    const response = await fetch(
+                        `http://localhost:8000/api/prompts/?promptText=${encodeURIComponent(promptText)}`,
+                        {
+                            method: 'GET',
+                            headers: {
+                                'Authorization': `Bearer ${token}`,
+                                'Accept': 'text/event-stream',
+                                'Cache-Control': 'no-cache',
+                                'Connection': 'keep-alive',
+                            }
+                        }
+                    );
+
+                    console.log('Response status:', response.status);
+                    console.log('Response headers:', Object.fromEntries(response.headers.entries()));
+
+                    if (!response.ok) {
+                        const errorText = await response.text();
+                        console.error('Error response:', errorText);
+                        throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+                    }
+
+                    const reader = response.body?.getReader();
+                    if (!reader) {
+                        throw new Error('No reader available');
+                    }
+
+                    let fullContent = '';
+                    let buffer = '';
+
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+
+                        // Convert the Uint8Array to a string
+                        const chunk = new TextDecoder().decode(value);
+                        console.log('Received chunk:', chunk);
+                        buffer += chunk;
+
+                        // Process complete SSE messages
+                        const lines = buffer.split('\n\n');
+                        buffer = lines.pop() || ''; // Keep the last incomplete chunk in the buffer
+
+                        for (const line of lines) {
+                            if (line.startsWith('data: ')) {
+                                try {
+                                    const jsonStr = line.slice(6); // Remove 'data: ' prefix
+                                    console.log('Processing SSE data:', jsonStr);
+                                    const data = JSON.parse(jsonStr);
+                                    if (data.content) {
+                                        fullContent += data.content;
+                                        // Update the message with the accumulated content
+                                        setMessages(prevMessages => {
+                                            const lastMessage = prevMessages[prevMessages.length - 1];
+                                            if (lastMessage && lastMessage.type === 'assistant') {
+                                                return [
+                                                    ...prevMessages.slice(0, -1),
+                                                    {
+                                                        ...lastMessage,
+                                                        content: fullContent
+                                                    }
+                                                ];
+                                            } else {
+                                                return [
+                                                    ...prevMessages,
+                                                    {
+                                                        id: `${promptId}-response`,
+                                                        content: fullContent,
+                                                        created_at: new Date().toISOString(),
+                                                        type: 'assistant'
+                                                    }
+                                                ];
+                                            }
+                                        });
+                                    }
+                                } catch (err) {
+                                    console.error('Error parsing SSE data:', err, 'Raw line:', line);
+                                }
+                            }
+                        }
+                    }
+                } catch (err) {
+                    console.error('Error in fetchResponse:', err);
+                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
+                } finally {
+                    setLoading(false);
+                }
+            } else if (propMessages) {
+                // Use messages from props if no prompt is being processed
+                setMessages(propMessages);
+                setLoading(propLoading);
+                setError(propError);
+            } else {
+                setLoading(false);
+            }
+        };
+
+        fetchResponse();
+    }, [promptId, promptText, propMessages, propLoading, propError]);
+
+    return (
+        <div className={styles.messages_container}>
+            {loading ? (
+                <div className="loading-indicator">
+                    <p>Loading messages...</p>
+                </div>
+            ) : error ? (
+                <div className="error-message">
+                    <p>Error: {error}</p>
+                </div>
+            ) : (
+                <>
+                    {messages && messages.length > 0 ? (
+                        <div className={styles.message_list}>
+                            {messages.map((message: any) => (
+                                <div key={message.id} className={styles.message_item}>
+                                    <div className={styles.message_content}>
+                                        {message.content}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <p className="no-messages">No messages found.</p>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
+
+export default DashboardPromptAreaChat;

frontend/src/components/DashboardPrompts/DashboardPromptArea/DashboardPromptAreaMessage.module.css

@@ -0,0 +1,27 @@
+.messageField {
+    display: flex;
+    height: 70px;
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
+}
+
+.inputField {
+    height: 70px;
+    padding: 15px 24px 0 15px;
+    width: calc(100% - 40px);
+    color: #000;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    opacity: 0.4;
+    resize: none;
+    overflow: hidden;
+    font-family: Helvetica;
+    border: none;
+}
+
+.inputButton {
+    height: 40px;
+    width: 40px;
+}

frontend/src/components/DashboardPrompts/DashboardPromptArea/DashboardPromptAreaMessage.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { useAuthToken } from "../../../auth/Hooks/use-auth-token";
+import api from "../../../api";
+import styles from "./DashboardPromptAreaMessage.module.css";
+
+interface DashboardPromptAreaMessageProps {
+    addMessage: (newMessage: any) => void;
+}
+
+function DashboardPromptAreaMessage({ addMessage }: DashboardPromptAreaMessageProps) {
+    const [message, setMessage] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    const { getToken } = useAuthToken();
+
+    const sendMessage = async () => {
+        if (!message.trim()) return;
+
+        setLoading(true);
+        setError("");
+
+        try {
+            const token = await getToken();
+
+            const response = await api.post(
+                '/api/messages/create',
+                { content: message.trim() },
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+                }
+            );
+
+            addMessage(response.data);
+            setMessage("");
+        } catch (error: unknown) {
+            console.error("Error sending message:", error);
+            if (error instanceof Error) {
+                setError(`Error: ${error.message}`);
+            } else {
+                setError("An unexpected error occurred");
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className={styles.messageField}>
+            <textarea
+                placeholder="Ask a question or make a request..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                disabled={loading}
+                className={styles.inputField}
+            />
+            <button
+                onClick={sendMessage}
+                disabled={loading || !message.trim()}
+                className={styles.inputButton}
+            >
+                {loading ? "Sending message..." : "Send"}
+            </button>
+            {error && <div className="error">{error}</div>}
+        </div>
+    );
+}
+
+export default DashboardPromptAreaMessage;

frontend/src/components/DashboardPrompts/DashboardPromptSet/DashboardPromptSet.module.css

@@ -0,0 +1,218 @@
+.container {
+    width: 100%;
+    padding-top: 20px;
+    position: relative;
+}
+
+.promptList {
+    width: 100%;
+    max-width: 100%;
+}
+
+.promptCard {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 12px;
+    overflow: hidden;
+    width: 100%;
+    will-change: transform, opacity;
+}
+
+.promptHeader {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: #f8f9fa;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.expandButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    flex-shrink: 0;
+    outline: none;
+}
+
+.expandButton:hover {
+    color: #333;
+}
+
+.promptTitle {
+    margin: 0;
+    flex-grow: 1;
+    font-size: 12pt;
+    font-weight: 550;
+    color: var(--Grayscale-Black, #24262B);
+    font-family: Arial, Helvetica, sans-serif;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.actionButtons {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.iconButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px;
+    color: #666;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    outline: none;
+}
+
+.iconButton:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
+}
+
+.promptContentWrapper {
+    border-top: 1px solid #eee;
+    overflow: hidden;
+}
+
+.promptContent {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 16px;
+    padding-right: 16px;
+    color: #666;
+    line-height: 0.7;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10pt;
+}
+
+.promptContent p {
+    margin: 0;
+    padding: 4px 0;
+}
+
+.filesContainer {
+    display: flex;
+    gap: 2rem;
+    padding: 1rem;
+    border-top: 1px solid var(--border-color, #e0e0e0);
+    margin-top: 1rem;
+}
+
+.filesColumn {
+    flex: 1;
+    min-width: 0;
+}
+
+.filesColumn h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    color: var(--text-color-secondary, #666);
+}
+
+.filesList {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.fileItem {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: var(--background-color-light, #f5f5f5);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    gap: 8px;
+    position: relative;
+    overflow: hidden;
+}
+
+.fileItem:hover {
+    background-color: var(--background-color-hover, #e8e8e8);
+}
+
+.fileItem.downloading {
+    background-color: var(--background-color-hover, #e8e8e8);
+    cursor: default;
+    opacity: 0.8;
+}
+
+.fileIcon {
+    color: var(--text-color-secondary, #666);
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+
+.fileName {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.9rem;
+}
+
+.fileDate {
+    color: var(--text-color-secondary, #666);
+    font-size: 0.8rem;
+    white-space: nowrap;
+    margin-left: auto;
+}
+
+.downloadingText {
+    position: absolute;
+    right: 12px;
+    font-size: 0.8rem;
+    color: var(--text-color-secondary, #666);
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.6;
+    }
+}
+
+.errorMessage {
+    margin: 1rem;
+    padding: 0.75rem;
+    background-color: #fee2e2;
+    border: 1px solid #fecaca;
+    border-radius: 4px;
+    color: #dc2626;
+    font-size: 0.9rem;
+}
+
+.noFiles {
+    color: var(--text-color-disabled, #999);
+    font-style: italic;
+    font-size: 0.9rem;
+}

frontend/src/components/DashboardPrompts/DashboardPromptSet/DashboardPromptSet.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from 'react';
+import styles from './DashboardPromptSet.module.css';
+import { useUserPrompts } from '../../../auth/Hooks/use-user-prompts';
+import { useUserFiles } from '../../../auth/Hooks/use-user-files';
+import { FaEdit, FaRedo, FaChevronRight } from 'react-icons/fa';
+import PromptItemDelete from './PromptItemDelete';
+import PromptItemShare from './PromptItemShare';
+import NewPromptButton from './NewPromptButton';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useSearchParams } from 'react-router-dom';
+import { useFileOperations } from '../../../hooks/use-file-operations';
+import { FileList } from './FileList';
+
+const formatPromptText = (text: string) => {
+    // Split text at 5 or more consecutive spaces
+    const parts = text.split(/\s{4,}/g);
+    // Join with line breaks
+    return parts.join('\n');
+};
+
+function DashboardPromptSet() {
+    const { prompts, loading, error, refetch } = useUserPrompts();
+    const { files, loading: filesLoading } = useUserFiles();
+    const [expandedPrompts, setExpandedPrompts] = useState<Set<string>>(new Set());
+    const [searchParams] = useSearchParams();
+    const { downloadingFiles, downloadError, handleFileDownload } = useFileOperations();
+
+    useEffect(() => {
+        if (!loading && prompts.length > 0) {
+            const expandedPrompt = searchParams.get('expandedPrompt');
+            console.log('URL Parameter expandedPrompt:', expandedPrompt);
+            console.log('Available prompts:', prompts.map(p => ({ id: p.id, title: p.prompt_title })));
+            console.log('Current expandedPrompts:', Array.from(expandedPrompts));
+            
+            if (expandedPrompt) {
+                const matchingPrompt = prompts.find(p => p.id.toString() === expandedPrompt.toString());
+                console.log('Matching prompt:', matchingPrompt);
+                
+                if (matchingPrompt) {
+                    console.log('Setting expanded prompt:', matchingPrompt.id);
+                    setExpandedPrompts(new Set([matchingPrompt.id]));
+                }
+            }
+        }
+    }, [searchParams, prompts, loading]);
+
+    const toggleExpand = (promptId: string) => {
+        console.log('Toggling prompt:', promptId);
+        setExpandedPrompts(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(promptId)) {
+                newSet.delete(promptId);
+            } else {
+                newSet.add(promptId);
+            }
+            return newSet;
+        });
+    };
+
+    const handleDelete = async () => {
+        try {
+            await refetch(); // Refetch prompts after successful deletion
+        } catch (error) {
+            console.error('Error deleting prompt:', error);
+        }
+    };
+
+    const getPromptFiles = (promptId: string | null) => {
+        if (!files || !promptId) return { uploadedFiles: [], downloadFiles: [] };
+        
+        const promptFiles = files.filter(file => {
+            // Check if either file.prompt_id or promptId is null
+            if (file.prompt_id === null || promptId === null) return false;
+            return file.prompt_id.toString() === promptId.toString();
+        });
+        
+        return {
+            uploadedFiles: promptFiles.filter(file => file.action === 'upload'),
+            downloadFiles: promptFiles.filter(file => file.action === 'download')
+        };
+    };
+
+    return (
+        <div className={styles.container}>
+            <NewPromptButton />
+            {loading || filesLoading ? (
+                <div>Loading...</div>
+            ) : error ? (
+                <div>Error: {error}</div>
+            ) : (
+                <div className={styles.promptList}>
+                {prompts.map(prompt => (
+                    <motion.div 
+                        key={prompt.id} 
+                        className={styles.promptCard}
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <div className={styles.promptHeader}>
+                            <motion.button 
+                                className={styles.expandButton}
+                                onClick={() => toggleExpand(prompt.id)}
+                                animate={{ 
+                                    rotate: expandedPrompts.has(prompt.id) ? 90 : 0 
+                                }}
+                                transition={{ duration: 0.2 }}
+                            >
+                                <FaChevronRight />
+                            </motion.button>
+                            <h2 className={styles.promptTitle}>{prompt.prompt_title}</h2>
+                            <div className={styles.actionButtons}>
+                                <button className={styles.iconButton} title="Edit">
+                                    <FaEdit />
+                                </button>
+                                <PromptItemDelete 
+                                    promptId={prompt.id}
+                                    promptTitle={prompt.prompt_title}
+                                    onDelete={handleDelete}
+                                />
+                                <button className={styles.iconButton} title="Repeat">
+                                    <FaRedo />
+                                </button>
+                                <PromptItemShare
+                                    promptId={prompt.id}
+                                    promptTitle={prompt.prompt_title}
+                                />
+                            </div>
+                        </div>
+                        <AnimatePresence initial={false}>
+                            {expandedPrompts.has(prompt.id) && (
+                                <motion.div 
+                                    className={styles.promptContentWrapper}
+                                    initial={{ height: 0, opacity: 0, borderTopWidth: 0 }}
+                                    animate={{ 
+                                        height: "auto", 
+                                        opacity: 1,
+                                        borderTopWidth: 1,
+                                        transition: {
+                                            height: { duration: 0.3, ease: "easeOut" },
+                                            opacity: { duration: 0.2, delay: 0.1 },
+                                            borderTopWidth: { duration: 0.2, delay: 0.1 }
+                                        }
+                                    }}
+                                    exit={{ 
+                                        height: 0, 
+                                        opacity: 0,
+                                        borderTopWidth: 0,
+                                        transition: {
+                                            height: { duration: 0.3, ease: "easeIn" },
+                                            opacity: { duration: 0.2 },
+                                            borderTopWidth: { duration: 0.1 }
+                                        }
+                                    }}
+                                >
+                                    <div className={styles.promptContent}>
+                                        {formatPromptText(prompt.user_prompt).split('\n').map((line, index) => (
+                                            <p key={index}>{line}</p>
+                                        ))}
+                                    </div>
+                                    <FileList
+                                        {...getPromptFiles(prompt.id)}
+                                        downloadingFiles={downloadingFiles}
+                                        onFileClick={handleFileDownload}
+                                    />
+                                    {downloadError && (
+                                        <div className={styles.errorMessage}>
+                                            {downloadError}
+                                        </div>
+                                    )}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </motion.div>
+                ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default DashboardPromptSet; 

frontend/src/components/DashboardPrompts/DashboardPromptSet/FileItem.tsx

@@ -0,0 +1,34 @@
+import { FaFile } from 'react-icons/fa';
+import styles from './DashboardPromptSet.module.css';
+
+type FileItemProps = {
+    id: number;
+    fileName: string;
+    createdAt: string;
+    isDownloading: boolean;
+    onFileClick: (fileId: number, fileName: string) => void;
+};
+
+export const FileItem = ({ 
+    id, 
+    fileName, 
+    createdAt, 
+    isDownloading, 
+    onFileClick 
+}: FileItemProps) => {
+    return (
+        <div 
+            className={`${styles.fileItem} ${isDownloading ? styles.downloading : ''}`}
+            onClick={() => onFileClick(id, fileName)}
+        >
+            <FaFile className={styles.fileIcon} />
+            <span className={styles.fileName}>{fileName}</span>
+            <span className={styles.fileDate}>
+                {new Date(createdAt).toLocaleDateString()}
+            </span>
+            {isDownloading && (
+                <span className={styles.downloadingText}>Downloading...</span>
+            )}
+        </div>
+    );
+}; 

frontend/src/components/DashboardPrompts/DashboardPromptSet/FileList.tsx

@@ -0,0 +1,64 @@
+import { FaUpload, FaDownload } from 'react-icons/fa';
+import styles from './DashboardPromptSet.module.css';
+import { FileItem } from './FileItem';
+
+type File = {
+    id: number;
+    file_name: string;
+    created_at: string;
+};
+
+type FileListProps = {
+    uploadedFiles: File[];
+    downloadFiles: File[];
+    downloadingFiles: Set<number>;
+    onFileClick: (fileId: number, fileName: string) => void;
+};
+
+export const FileList = ({
+    uploadedFiles,
+    downloadFiles,
+    downloadingFiles,
+    onFileClick
+}: FileListProps) => {
+    return (
+        <div className={styles.filesContainer}>
+            <div className={styles.filesColumn}>
+                <h3><FaUpload /> Uploaded Files</h3>
+                <div className={styles.filesList}>
+                    {uploadedFiles.map(file => (
+                        <FileItem
+                            key={file.id}
+                            id={file.id}
+                            fileName={file.file_name}
+                            createdAt={file.created_at}
+                            isDownloading={downloadingFiles.has(file.id)}
+                            onFileClick={onFileClick}
+                        />
+                    ))}
+                    {uploadedFiles.length === 0 && (
+                        <p className={styles.noFiles}>No uploaded files</p>
+                    )}
+                </div>
+            </div>
+            <div className={styles.filesColumn}>
+                <h3><FaDownload /> Files for Download</h3>
+                <div className={styles.filesList}>
+                    {downloadFiles.map(file => (
+                        <FileItem
+                            key={file.id}
+                            id={file.id}
+                            fileName={file.file_name}
+                            createdAt={file.created_at}
+                            isDownloading={downloadingFiles.has(file.id)}
+                            onFileClick={onFileClick}
+                        />
+                    ))}
+                    {downloadFiles.length === 0 && (
+                        <p className={styles.noFiles}>No files for download</p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}; 

frontend/src/components/DashboardPrompts/DashboardPromptSet/NewPromptButton.module.css

@@ -0,0 +1,144 @@
+.container {
+    margin-bottom: 20px;
+}
+
+.newPromptButton {
+    background-color: var(--Brand-Purple-Purple, #5F59D4);;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 30px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.newPromptButton:hover {
+    background-color: var(--Brand-Purple-Purple, #5F59D4);
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.popup {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    background: white;
+    padding: 24px;
+    border-radius: 30px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 400px;
+    margin: 20px;
+}
+
+.popupHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 35px;
+}
+
+.popup h2 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    color: #24262B;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 550;
+    height: 80%;
+
+}
+.cancelButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80%;
+    border: none;
+    background: none;
+    color: #666;
+    transition: all 0.2s;
+}
+
+.cancelButton:hover {
+    cursor: pointer;
+}
+
+.cancelButtonIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.inputGroup {
+    margin-bottom: 20px;
+}
+
+.inputGroup label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #666;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.inputGroup textarea {
+    display: flex;
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    font-family: Arial, Helvetica, sans-serif;
+    box-sizing: border-box;
+    height: 100px;
+    resize: none;
+    vertical-align: top;
+    line-height: 1.5;
+}
+
+.inputGroup textarea:focus {
+    outline: none;
+    border-color: var(--Brand-Purple-Purple, #5F59D4);
+    box-shadow: 0 0 0 2px rgba(95, 89, 212, 0.25);
+}
+
+.buttonGroup {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+
+
+.submitButton {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 30px;
+    background: var(--Brand-Purple-Purple, #5F59D4);
+    color: white;
+    font-size: 14px;
+    cursor: pointer;
+    font-family: Arial, Helvetica, sans-serif;
+    transition: background-color 0.2s;
+}
+
+.submitButton:hover {
+    background-color: var(--Brand-Purple-Purple, #5F59D4);
+}

frontend/src/components/DashboardPrompts/DashboardPromptSet/NewPromptButton.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import styles from './NewPromptButton.module.css';
+import { IoClose } from 'react-icons/io5';
+import { authorizedGet } from '../../../api';
+import { useAuthToken } from '../../../auth/Hooks/use-auth-token';
+import { useNavigate } from 'react-router-dom';
+
+function NewPromptButton() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [promptText, setPromptText] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const { getToken } = useAuthToken();
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        
+        try {
+            console.log('Submitting prompt:', promptText);
+            // Make the API call to start the streaming
+            const response = await authorizedGet(
+                `/api/prompts/?promptText=${encodeURIComponent(promptText)}`,
+                getToken
+            );
+            console.log('API response:', response);
+            
+            // Close the popup and reset the form
+            setIsOpen(false);
+            setPromptText('');
+            
+            // Navigate to dashboard with both the prompt ID and text
+            navigate(`/dashboard?promptId=${Date.now()}&promptText=${encodeURIComponent(promptText)}`);
+        } catch (error) {
+            console.error('Error creating prompt:', error);
+            // You might want to show an error message to the user here
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <motion.button
+                className={styles.newPromptButton}
+                onClick={() => setIsOpen(true)}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+            >
+                New Prompt
+            </motion.button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        className={styles.overlay}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={() => setIsOpen(false)}
+                    >
+                        <motion.div
+                            className={styles.popup}
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            onClick={e => e.stopPropagation()}
+                        >
+                            <div className={styles.popupHeader}>
+                                <h2>Create New Prompt</h2>
+                                <button
+                                    type="button"
+                                    className={styles.cancelButton}
+                                    onClick={() => setIsOpen(false)}
+                                >
+                                    <IoClose className={styles.cancelButtonIcon}/>
+                                </button>
+                            </div>
+                            <form onSubmit={handleSubmit}>
+                                <div className={styles.inputGroup}>
+                                    <label htmlFor="promptText">Please enter your prompt here.</label>
+                                    <textarea
+                                        id="promptText"
+                                        value={promptText}
+                                        onChange={(e) => setPromptText(e.target.value)}
+                                        placeholder="Enter prompt."
+                                        required
+                                    />
+                                </div>
+                                <div className={styles.buttonGroup}>
+                                    <button
+                                        type="submit"
+                                        className={styles.submitButton}
+                                        disabled={isSubmitting}
+                                    >
+                                        {isSubmitting ? 'Processing...' : 'Prompt starten'}
+                                    </button>
+                                </div>
+                            </form>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+export default NewPromptButton;

frontend/src/components/DashboardPrompts/DashboardPromptSet/PromptItemDelete.module.css

@@ -0,0 +1,132 @@
+.deleteButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px;
+    color: #666;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.deleteButton:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
+}
+
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    backdrop-filter: blur(2px);
+}
+
+.modalContent {
+    background: white;
+    padding: 24px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 90%;
+    text-align: center;
+    position: relative;
+    z-index: 10000;
+    animation: modalAppear 0.3s ease-out;
+}
+
+@keyframes modalAppear {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.modalContent h2 {
+    margin: 0 0 16px;
+    color: var(--Grayscale-Black, #24262B);
+    font-size: 1.5rem;
+    font-weight: 600;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.modalContent p {
+    margin: 8px 0;
+    color: #666;
+    font-size: 1rem;
+    line-height: 1.2;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.deletePromptTitle {
+    font-weight: 600;
+    color: var(--Grayscale-Black, #24262B);
+    margin: 16px 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.modalButtons {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 15px;
+}
+
+.modalButton {
+    padding: 8px 24px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.95rem;
+    min-width: 100px;
+}
+
+.cancelButton {
+    background-color: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+}
+
+.cancelButton:hover {
+    background-color: #e9ecef;
+}
+
+.confirmButton {
+    background-color: #dc3545;
+    color: white;
+}
+
+.confirmButton:hover {
+    background-color: #c82333;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+    .modalContent {
+        width: calc(100% - 32px);
+        padding: 24px;
+    }
+
+    .modalButtons {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .modalButton {
+        width: 100%;
+    }
+} 

frontend/src/components/DashboardPrompts/DashboardPromptSet/PromptItemDelete.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { FaTrash } from 'react-icons/fa';
+import { createPortal } from 'react-dom';
+import styles from './PromptItemDelete.module.css';
+import { useAuthToken } from '../../../auth/Hooks/use-auth-token';
+import { authorizedDelete } from '../../../api';
+
+interface PromptItemDeleteProps {
+    promptId: string;
+    promptTitle: string;
+    onDelete: (promptId: string) => Promise<void>;
+}
+
+export const PromptItemDelete: React.FC<PromptItemDeleteProps> = ({ promptId, promptTitle, onDelete }) => {
+    const [showConfirmation, setShowConfirmation] = useState(false);
+    const { getToken } = useAuthToken();
+
+    const handleDeleteClick = () => {
+        setShowConfirmation(true);
+    };
+
+    const handleConfirm = async () => {
+        try {
+            await authorizedDelete(`/api/user/prompts/${promptId}`, getToken);
+            setShowConfirmation(false);
+            await onDelete(promptId);
+        } catch (error) {
+            console.error('Error deleting prompt:', error);
+        }
+    };
+
+    const handleCancel = () => {
+        setShowConfirmation(false);
+    };
+
+    return (
+        <>
+            <button 
+                className={styles.deleteButton} 
+                title="Delete"
+                onClick={handleDeleteClick}
+            >
+                <FaTrash />
+            </button>
+
+            {showConfirmation && createPortal(
+                <div className={styles.modalOverlay}>
+                    <div className={styles.modalContent}>
+                        <h2>Delete Prompt</h2>
+                        <p>Are you sure you want to delete the prompt:</p>
+                        <p className={styles.deletePromptTitle}>{promptTitle}?</p>
+                        <div className={styles.modalButtons}>
+                            <button 
+                                className={`${styles.modalButton} ${styles.cancelButton}`}
+                                onClick={handleCancel}
+                            >
+                                Cancel
+                            </button>
+                            <button 
+                                className={`${styles.modalButton} ${styles.confirmButton}`}
+                                onClick={handleConfirm}
+                            >
+                                Delete
+                            </button>
+                        </div>
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+};
+
+export default PromptItemDelete; 

frontend/src/components/DashboardPrompts/DashboardPromptSet/PromptItemShare.module.css

@@ -0,0 +1,169 @@
+.shareButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #666;
+    border-radius: 30px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.shareButton:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
+}
+
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    backdrop-filter: blur(2px);
+}
+
+.modalContent {
+    background: white;
+    padding: 24px;
+    border-radius: 30px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 90%;
+    position: relative;
+    z-index: 10000;
+    animation: modalAppear 0.3s ease-out;
+}
+
+@keyframes modalAppear {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.modalContent h2 {
+    margin: 0 0 16px;
+    color: var(--Grayscale-Black, #24262B);
+    font-size: 1.5rem;
+    font-weight: 600;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.modalContent p {
+    margin: 8px 0;
+    color: #666;
+    font-size: 1rem;
+    line-height: 1.2;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.userList {
+    max-height: 300px;
+    overflow-y: auto;
+    margin: 10px 0;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10px;
+    line-height: 0.5;
+}
+
+.userItem {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border-radius: 4px;
+    height: 18px;
+}
+
+.userItem:hover {
+    background-color: #f8f9fa;
+}
+
+.userItem input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+.userName {
+    font-size: 14px;
+    color: #333;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.userEmail {
+    color: #666;
+    font-size: 12px;
+}
+
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+}
+
+.error {
+    text-align: center;
+    padding: 20px;
+    color: #dc3545;
+}
+
+.modalButtons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    margin-top: 24px;
+}
+
+.modalButton {
+    padding: 8px 24px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.95rem;
+}
+
+.modalButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.cancelButton {
+    background-color: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+}
+
+.cancelButton:hover:not(:disabled) {
+    background-color: #e9ecef;
+}
+
+.modalButton.shareButton {
+    background-color: var(--Brand-Purple-Purple, #5F59D4);
+    color: white;
+}
+
+.modalButton.shareButton:hover:not(:disabled) {
+    background-color: var(--Brand-Purple-Purple, #5F59D4);
+} 

frontend/src/components/DashboardPrompts/DashboardPromptSet/PromptItemShare.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { FaShare } from 'react-icons/fa';
+import { createPortal } from 'react-dom';
+import styles from './PromptItemShare.module.css';
+import { useAuthToken } from '../../../auth/Hooks/use-auth-token';
+import { useOrgUsers } from '../../../auth/Hooks/get-all-users';
+import { authorizedPost } from '../../../api';
+
+interface PromptItemShareProps {
+    promptId: string;
+    promptTitle: string;
+}
+
+export const PromptItemShare: React.FC<PromptItemShareProps> = ({ promptId, promptTitle }) => {
+    const [showModal, setShowModal] = useState(false);
+    const [selectedUsers, setSelectedUsers] = useState<Set<string>>(new Set());
+    const { getToken } = useAuthToken();
+    const { users, loading, error } = useOrgUsers();
+
+    const handleShareClick = () => {
+        setShowModal(true);
+    };
+
+    const handleUserToggle = (userId: string) => {
+        setSelectedUsers(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(userId)) {
+                newSet.delete(userId);
+            } else {
+                newSet.add(userId);
+            }
+            return newSet;
+        });
+    };
+
+    const handleShare = async () => {
+        try {
+            console.log(Array.from(selectedUsers));
+            await authorizedPost(`/api/user/prompts/${promptId}/share`, getToken, {
+                user_ids: Array.from(selectedUsers)
+            });
+            setShowModal(false);
+            setSelectedUsers(new Set());
+        } catch (error) {
+            console.error('Error sharing prompt:', error);
+        }
+    };
+
+    const handleCancel = () => {
+        setShowModal(false);
+        setSelectedUsers(new Set());
+    };
+
+    return (
+        <>
+            <button 
+                className={styles.shareButton} 
+                title="Share"
+                onClick={handleShareClick}
+            >
+                <FaShare />
+            </button>
+
+            {showModal && createPortal(
+                <div className={styles.modalOverlay}>
+                    <div className={styles.modalContent}>
+                        <h2>Share Prompt</h2>
+                        <p>Share "{promptTitle}" with:</p>
+                        
+                        {loading && <div className={styles.loading}>Loading users...</div>}
+                        {error && <div className={styles.error}>{error}</div>}
+                        
+                        <div className={styles.userList}>
+                            {users.map(user => (
+                                <label key={user.id} className={styles.userItem}>
+                                    <input
+                                        type="checkbox"
+                                        checked={selectedUsers.has(user.id)}
+                                        onChange={() => handleUserToggle(user.id)}
+                                    />
+                                    <span className={styles.userName}>
+                                        {user.name}
+                                        <span className={styles.userEmail}>({user.email})</span>
+                                    </span>
+                                </label>
+                            ))}
+                        </div>
+
+                        <div className={styles.modalButtons}>
+                            <button 
+                                className={`${styles.modalButton} ${styles.cancelButton}`}
+                                onClick={handleCancel}
+                            >
+                                Cancel
+                            </button>
+                            <button 
+                                className={`${styles.modalButton} ${styles.shareButton}`}
+                                onClick={handleShare}
+                                disabled={selectedUsers.size === 0}
+                            >
+                                Share
+                            </button>
+                        </div>
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+};
+
+export default PromptItemShare; 

frontend/src/components/Dateien/DateienItem.module.css

@@ -0,0 +1,120 @@
+.fileItem {
+    display: flex;
+    align-items: center;
+    height: 70px;
+    padding: 0px 16px;
+    justify-content: space-between;
+    color: var(--Grayscale-Black, #24262B);
+}
+
+.fileIcon {
+    margin-right: 12px;
+}
+
+.icon {
+    font-size: 24px;
+    color: var(--Grayscale-Gray, #E9E9E9);
+}
+
+.fileInfo {
+    display: grid;
+    grid-template-columns: 400px 250px 100px;
+    gap: 16px;
+    flex-grow: 1;
+    align-items: center;
+}
+
+.fileName {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.fileAction,
+.fileDate {
+    margin: 0;
+    font-size: 12px;
+    color: #666;
+    font-weight: light;
+}
+
+.actionButtons {
+    display: flex;
+    gap: 8px;
+    margin-left: 16px;
+}
+
+.downloadButton,
+.deleteButton {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background-color: transparent;
+    color: var(--text-color-secondary, #666);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 40px;
+    justify-content: center;
+}
+
+.downloadButton:hover:not(:disabled),
+.deleteButton:hover:not(:disabled) {
+    background-color: var(--background-color-hover, #e8e8e8);
+    color: var(--text-color-primary, #333);
+}
+
+.deleteButton:hover:not(:disabled) {
+    color: #dc2626;
+}
+
+.deleteButton.confirm {
+    background-color: #fee2e2;
+    color: #dc2626;
+}
+
+.deleteButton.confirm:hover:not(:disabled) {
+    background-color: #fecaca;
+}
+
+.downloadButton:disabled,
+.deleteButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.actionIcon {
+    font-size: 16px;
+    flex-shrink: 0;
+}
+
+.downloadButton.downloading,
+.deleteButton.deleting {
+    background-color: var(--background-color-light, #f5f5f5);
+}
+
+.actionText {
+    font-size: 12px;
+    color: var(--text-color-secondary, #666);
+    animation: pulse 1.5s infinite;
+    white-space: nowrap;
+}
+
+.deleteButton.confirm .actionText {
+    color: #dc2626;
+    animation: none;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.6;
+    }
+}

frontend/src/components/Dateien/DateienItem.tsx

@@ -0,0 +1,76 @@
+import { FaFile, FaDownload, FaTrash } from "react-icons/fa";
+import styles from "./DateienItem.module.css";
+import { useFileOperations } from "../../hooks/use-file-operations";
+import { useState } from "react";
+
+type DateienItemProps = {
+    file: {
+        id: number;
+        file_name: string;
+        action: string;
+        created_at: string;
+    };
+    onDelete?: () => void;
+};
+
+const DateienItem = ({ file, onDelete }: DateienItemProps) => {
+    const { downloadingFiles, deletingFiles, handleFileDownload, handleFileDelete } = useFileOperations();
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const isDownloading = downloadingFiles.has(file.id);
+    const isDeleting = deletingFiles.has(file.id);
+
+    const handleDeleteClick = async () => {
+        if (showDeleteConfirm) {
+            const success = await handleFileDelete(file.id);
+            if (success && onDelete) {
+                onDelete();
+            }
+            setShowDeleteConfirm(false);
+        } else {
+            setShowDeleteConfirm(true);
+        }
+    };
+
+    const handleCancelDelete = () => {
+        setShowDeleteConfirm(false);
+    };
+
+    return (
+        <li className={styles.fileItem}>
+            <div className={styles.fileIcon}>
+                <FaFile className={styles.icon} />
+            </div>
+            <div className={styles.fileInfo}>
+                <span className={styles.fileName}>{file.file_name}</span>
+                <span className={styles.fileAction}>{file.action}</span>
+                <span className={styles.fileDate}>
+                    {new Date(file.created_at).toLocaleDateString()}
+                </span>
+            </div>
+            <div className={styles.actionButtons}>
+                <button 
+                    className={`${styles.downloadButton} ${isDownloading ? styles.downloading : ''}`}
+                    onClick={() => handleFileDownload(file.id, file.file_name)}
+                    disabled={isDownloading || isDeleting}
+                    title="Download file"
+                >
+                    <FaDownload className={styles.actionIcon} />
+                    {isDownloading && <span className={styles.actionText}>Downloading...</span>}
+                </button>
+                <button 
+                    className={`${styles.deleteButton} ${isDeleting ? styles.deleting : ''} ${showDeleteConfirm ? styles.confirm : ''}`}
+                    onClick={handleDeleteClick}
+                    disabled={isDownloading || isDeleting}
+                    title={showDeleteConfirm ? "Click again to confirm deletion" : "Delete file"}
+                    onBlur={handleCancelDelete}
+                >
+                    <FaTrash className={styles.actionIcon} />
+                    {isDeleting && <span className={styles.actionText}>Deleting...</span>}
+                    {showDeleteConfirm && <span className={styles.actionText}>Click to confirm</span>}
+                </button>
+            </div>
+        </li>
+    );
+};
+
+export default DateienItem;

frontend/src/components/Mitglieder/MitgliederItem.module.css

@@ -0,0 +1,53 @@
+.memberItem {
+    display: flex;
+    align-items: center;
+    height: 70px;
+    padding: 0px 16px;
+    justify-content: space-between;
+    color: var(--Grayscale-Black, #24262B);
+  }
+  
+  .userProfile {
+    margin-right: 12px;
+  }
+  
+  .profileIcon {
+    font-size: 36px;
+    color: var(--Grayscale-Gray, #E9E9E9);
+  }
+  
+  .userInfo {
+    display: grid;
+    grid-template-columns: 200px 250px 100px;
+    gap: 16px;
+    flex-grow: 1;
+    align-items: center;
+  }
+  
+  .userName {
+    margin: 0;
+    font-size: 14px;
+  }
+  
+  .userEmail,
+  .userRole {
+    margin: 0;
+    font-size: 12px;
+    font-weight: light;
+  }
+  
+  .actions {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .editBtn:hover {
+    color: var(--Brand-Green-Green, #3A8088);
+  }
+  
+  .deleteBtn:hover {
+    color: var(--Brand-Green-Green, #3A8088);
+  }
+  

frontend/src/components/Mitglieder/MitgliederItem.tsx

@@ -0,0 +1,38 @@
+import { FaUserCircle } from "react-icons/fa";
+import styles from "./MitgliederItem.module.css";
+import MitgliederItemDelete from "./MitgliederItemDelete/MitgliederItemDelete";
+import MitgliederItemEdit from "./MitgliederItemEdit/MitgliederItemEdit";
+
+type MitgliederItemProps = {
+    user: {
+      id: string;
+      name: string;
+      email: string;
+      role: string;
+      position: string;
+      azure_id: string;
+    };
+    refetchUsers: () => Promise<void>;
+    totalUsers: number;
+  };
+
+  const MitgliederItem = ({ user, refetchUsers, totalUsers }: MitgliederItemProps) => {
+    return (
+      <li className={styles.memberItem}>
+        <div className={styles.userProfile}>
+          <FaUserCircle className={styles.profileIcon} />
+        </div>
+        <div className={styles.userInfo}>
+            <span className={styles.userName}>{user.name}</span>
+            <span className={styles.userEmail}>{user.email}</span>
+            <span className={styles.userRole}>{user.role}</span>
+        </div>
+        <div className={styles.actions}>
+          <MitgliederItemEdit user={user} refetchUsers={refetchUsers} />
+          <MitgliederItemDelete user={user} refetchUsers={refetchUsers} isDisabled={totalUsers <= 1} />
+        </div>
+      </li>
+    );
+  };
+  
+  export default MitgliederItem;

frontend/src/components/Mitglieder/MitgliederItemDelete/DeletePopUp.module.css

@@ -0,0 +1,92 @@
+.popupHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top:10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 5px;
+    width: 300px;
+    height: 20px;
+    color: gray;
+    font-size: 10px;
+
+}
+
+.closeButton {
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 20px;  /* Increased button size */
+    height: 20px;
+    line-height: 0;
+    padding: 0;
+    margin:0;
+    
+}
+
+.closeIcon {
+    width: 100%;  /* Make the icon fill the button's width */
+    height: 100%; 
+    padding: 0;
+    margin:0;
+    display: block;
+}
+
+.horizontalLineLight {
+    width: 100%;
+    background-color: #F1F1F1;
+    height: 1px;
+}
+
+.userInfo {
+    display: grid;
+    grid-column: 1;
+    padding: none;
+    margin: none;  
+    align-items: center;
+    justify-content: center;    /* Center horizontally */
+}
+
+.userInfoParagraph{
+    display: flex;
+    color: gray;
+    font-size: 10px;
+    margin:0px;
+    justify-content: center;
+    gap: 10px;
+}
+.userInfo h2{
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    margin-top:10px;
+    justify-content: center;
+}
+
+.submitButtonDiv {
+    margin: 10px;
+    display: flex;             /* Use Flexbox */
+    justify-content: center;   /* Center horizontally */
+    align-items: center;  
+}
+.submitButton {
+    background: none;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding: 5px 20px;        /* Optional: Adds some padding for better button size */
+    cursor: pointer;
+    width: 80%
+}
+
+.submitButton:hover {
+    background: rgb(168, 18, 18);
+    border: 1px solid rgb(168, 18, 18);
+    border-radius: 5px;
+    padding: 5px 20px;        /* Optional: Adds some padding for better button size */
+    cursor: pointer;
+    color: white;
+    transition: 0.2s;
+}   

frontend/src/components/Mitglieder/MitgliederItemDelete/DeletePopUp.tsx

@@ -0,0 +1,86 @@
+import { IoCloseOutline } from "react-icons/io5";
+import styles from "./DeletePopUp.module.css";
+import deleteUser from "../../../auth/Hooks/delete-user";
+import { useAuthToken } from "../../../auth/Hooks/use-auth-token";
+
+type DeletePopUpProps = {
+  closePopup: () => void;
+  refetchUsers: () => Promise<void>;
+  user: {
+    name: string;
+    email: string;
+    role: string;
+    position: string;
+    azure_id: string;
+  };
+};
+
+const DeletePopUp = ({ closePopup, refetchUsers, user }: DeletePopUpProps) => {
+    const { getToken } = useAuthToken();
+
+    const handleDelete = async () => {
+        try {
+            const token = await getToken();
+            await deleteUser(user.azure_id, token);
+            await refetchUsers();
+            closePopup();
+        } catch (error) {
+            console.error("Failed to delete user:", error);
+        }
+    };
+
+    return (
+            <div style={popupStyles.overlay}>
+                <div style={popupStyles.popup}>
+                    <div className={styles.popupHeader}>
+                        <p>Delete User...</p>
+                        <button 
+                            className={styles.closeButton}
+                            onClick={closePopup}><IoCloseOutline className={styles.closeIcon}/>
+                        </button>
+                        
+                    </div>
+                    <div className={styles.horizontalLineLight}></div>
+                    <div className={styles.userInfo}>
+                        <h2>{user.name}</h2>
+                        <div className={styles.userInfoParagraph}>
+                            <p>Email: {user.email}</p>
+                            <p>Role: {user.role}</p>
+                        </div>
+                    </div>
+                    <div className={styles.horizontalLineLight}></div>
+                    <div className={styles.submitButtonDiv}>
+                        <button 
+                            className={styles.submitButton}
+                            onClick={handleDelete}>
+                                Delete
+                        </button>
+                    </div>
+                    
+                </div>
+            </div>
+          )
+}
+
+const popupStyles: { overlay: React.CSSProperties; popup: React.CSSProperties } = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+
+  },
+  popup: {
+    backgroundColor: "#fff",
+    borderRadius: "8px",
+    boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
+    position: "relative"
+  }
+};
+
+export default DeletePopUp;

frontend/src/components/Mitglieder/MitgliederItemDelete/MitgliederItemDelete.module.css

@@ -0,0 +1,33 @@
+.deleteBtn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: #444;
+  height: 100;
+}
+
+.deleteBtn:hover {
+  color: var(--Brand-Green-Green, #3A8088);
+}
+
+.deleteBtn.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: #444;
+}
+
+.deleteBtn.disabled:hover {
+  color: #444;
+}
+
+.deleteBtnContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}

frontend/src/components/Mitglieder/MitgliederItemDelete/MitgliederItemDelete.tsx

@@ -0,0 +1,43 @@
+import { FaTrash } from "react-icons/fa";
+import styles from "./MitgliederItemDelete.module.css";
+import { useState } from "react";
+import DeletePopUp from "./DeletePopUp";
+
+type MitgliederItemDeleteProps = {
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    position: string;
+    azure_id: string;
+  };
+  refetchUsers: () => Promise<void>;
+  isDisabled?: boolean;
+};
+
+const MitgliederItemDelete = ({ user, refetchUsers, isDisabled = false }: MitgliederItemDeleteProps) => {
+    const [deleteWindow, setDeleteWindow] = useState(false);
+
+    return (
+        <div className={styles.deleteBtnContainer}>
+          <button 
+            onClick={() => !isDisabled && setDeleteWindow(true)}
+            className={`${styles.deleteBtn} ${isDisabled ? styles.disabled : ''}`}
+            disabled={isDisabled}
+            title={isDisabled ? "Cannot delete the only remaining user" : "Delete user"}>
+            <FaTrash />
+          </button>
+
+          {deleteWindow && (
+            <DeletePopUp 
+              user={user} 
+              closePopup={() => setDeleteWindow(false)}
+              refetchUsers={refetchUsers}
+            />
+          )}
+        </div>
+    );
+  };
+  
+  export default MitgliederItemDelete;

frontend/src/components/Mitglieder/MitgliederItemEdit/EditPopUp.module.css

@@ -0,0 +1,89 @@
+.popupHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+}
+
+.popupHeader p {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.closeButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.closeIcon {
+    font-size: 1.5rem;
+    color: #666;
+}
+
+.horizontalLineLight {
+    height: 1px;
+    background-color: #e0e0e0;
+    width: 100%;
+    margin: 0;
+}
+
+.form {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 20px;
+}
+
+.formGroup {
+    margin-bottom: 15px;
+    box-sizing: border-box;
+}
+
+.formGroup label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+
+.formGroup input,
+.formGroup select {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    box-sizing: border-box;
+}
+
+.submitButtonDiv {
+    display: flex;
+    justify-content: flex-end;
+    padding: 15px 0 10px;
+}
+
+.submitButton {
+    background-color: #4c9aff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.submitButton:hover {
+    background-color: #3d8df5;
+}
+
+.userInfo h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+
+

frontend/src/components/Mitglieder/MitgliederItemEdit/EditPopUp.tsx

@@ -0,0 +1,143 @@
+import { IoCloseOutline } from "react-icons/io5";
+import { useState } from "react";
+import styles from "./EditPopUp.module.css";
+import updateUser from "./update-user";
+import { useAuthToken } from "../../../auth/Hooks/use-auth-token";
+
+type EditPopUpProps = {
+  closePopup: () => void;
+  refetchUsers: () => Promise<void>;
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    position: string;
+    azure_id: string;
+  };
+};
+
+const EditPopUp = ({ closePopup, refetchUsers, user }: EditPopUpProps) => {
+    const { getToken } = useAuthToken();
+    const [formData, setFormData] = useState({
+        name: user.name,
+        email: user.email,
+        role: user.role,
+        position: user.position || ""
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value
+        }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            const token = await getToken();
+            await updateUser(user.azure_id, formData, token);
+            await refetchUsers();
+            closePopup();
+        } catch (error) {
+            console.error("Failed to update user:", error);
+        }
+    };
+
+    return (
+        <div style={popupStyles.overlay}>
+            <div style={popupStyles.popup}>
+                <div className={styles.popupHeader}>
+                    <p>Edit User</p>
+                    <button 
+                        className={styles.closeButton}
+                        onClick={closePopup}><IoCloseOutline className={styles.closeIcon}/>
+                    </button>
+                </div>
+                <div className={styles.horizontalLineLight}></div>
+                <form onSubmit={handleSubmit} className={styles.form}>
+                    <div className={styles.formGroup}>
+                        <label htmlFor="name">Name:</label>
+                        <input
+                            type="text"
+                            id="name"
+                            name="name"
+                            value={formData.name}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className={styles.formGroup}>
+                        <label htmlFor="email">Email:</label>
+                        <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            value={formData.email}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className={styles.formGroup}>
+                        <label htmlFor="role">Role:</label>
+                        <select
+                            id="role"
+                            name="role"
+                            value={formData.role}
+                            onChange={handleChange}
+                            required
+                        >
+                            <option value="admin">admin</option>
+                            <option value="member">member</option>
+                        </select>
+                    </div>
+                    <div className={styles.formGroup}>
+                        <label htmlFor="position">Position:</label>
+                        <input
+                            type="text"
+                            id="position"
+                            name="position"
+                            value={formData.position}
+                            onChange={handleChange}
+                        />
+                    </div>
+                    <div className={styles.horizontalLineLight}></div>
+                    <div className={styles.submitButtonDiv}>
+                        <button 
+                            type="submit"
+                            className={styles.submitButton}>
+                                Update
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+const popupStyles: { overlay: React.CSSProperties; popup: React.CSSProperties } = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+
+  },
+  popup: {
+    backgroundColor: "#fff",
+    borderRadius: "8px",
+    boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
+    position: "relative",
+    width: "400px",
+    maxWidth: "90%"
+  }
+};
+
+export default EditPopUp; 

frontend/src/components/Mitglieder/MitgliederItemEdit/MitgliederItemEdit.module.css

@@ -0,0 +1,12 @@
+.editBtn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    color: #444;
+    height: 100;
+}
+
+.editBtn:hover {
+  color: #3d8df5;
+} 

frontend/src/components/Mitglieder/MitgliederItemEdit/MitgliederItemEdit.tsx

@@ -0,0 +1,42 @@
+import { FaEdit } from "react-icons/fa";
+import { useState } from "react";
+import styles from "./MitgliederItemEdit.module.css";
+import EditPopUp from "./EditPopUp";
+
+type MitgliederItemEditProps = {
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    position: string;
+    azure_id: string;
+  };
+  refetchUsers: () => Promise<void>;
+};
+
+const MitgliederItemEdit = ({ user, refetchUsers }: MitgliederItemEditProps) => {
+  const [editWindow, setEditWindow] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setEditWindow(true)}
+        className={styles.editBtn}
+        title="Edit user"
+      >
+        <FaEdit />
+      </button>
+
+      {editWindow && (
+        <EditPopUp
+          user={user}
+          closePopup={() => setEditWindow(false)}
+          refetchUsers={refetchUsers}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MitgliederItemEdit; 

frontend/src/components/Mitglieder/MitgliederItemEdit/update-user.ts

@@ -0,0 +1,20 @@
+import { authorizedPut } from "../../../api";
+
+type UserUpdateData = {
+    name?: string;
+    email?: string;
+    role?: string;
+    position?: string;
+};
+
+async function updateUser(userId: string, userData: UserUpdateData, token: string): Promise<void> {
+    try {
+        const response = await authorizedPut(`/api/user/${userId}`, userData, async () => token);
+        console.log("User updated successfully:", response.status);
+    } catch (error) {
+        console.error("Failed to update user:", error);
+        throw error;
+    }
+}
+
+export default updateUser; 

frontend/src/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,42 @@
+/* Allgemeine Stile */
+.sidebarContainer {
+    border-radius: 30px;
+    border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
+    background: var(--Grayscale-True-White, #FFF);
+    box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);
+    width: 240px;
+    flex-shrink: 0;
+    margin-top: 51px;
+    margin-left: 49px;
+}
+
+.sidebar {
+    display: flex;
+    width: 200px;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-shrink: 0;
+    margin: 0 0 30px 0;
+}
+
+.logoContainer {
+    display: flex;
+    width: 200px;
+    height: 60px;
+    padding: 13px 20px;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+}
+
+.logo {
+    max-width: 100%;
+    height: auto;
+}
+
+
+
+
+
+
+

frontend/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+import styles from './Sidebar.module.css'
+
+import SidebarItem from './SidebarItem';
+
+import { useAuthToken } from '../../auth/Hooks/use-auth-token';
+import { authorizedGet } from '../../api';
+
+import useSidebarData from './sidebarData';
+import SidebarUser from './SidebarUser';
+
+
+interface SidebarItemType {
+    id: string;
+    name: string;
+    link?: string;
+    submenu?: SidebarItemType[];
+  }
+  
+interface SidebarProps {
+    data: SidebarItemType[];
+  }
+
+interface User {
+    id: number,
+    name: string,
+    role: string,
+}
+
+  //frontend\frontend\src\components\Sidebar\Sidebar.tsx
+
+  const Sidebar: React.FC<SidebarProps> = ({ data }) => {
+    const [user, setUser] = useState<User>({id: 0, name: '', role: ''});
+    const [_loading, setLoading] = useState(true);
+    const [_error, setError] = useState<string | null>(null);
+
+    const { getToken } = useAuthToken();
+
+    useEffect(() => {
+            fetchUser();
+        }, []);
+
+    const fetchUser = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const response = await authorizedGet("/api/user/", getToken);
+                console.log(response)
+                setUser(response.data[0]);
+            } catch (err) {
+                console.error("Error fetching messages:", err);
+                setError("Failed to fetch messages");
+            } finally {
+                setLoading(false);
+            }
+        };
+
+    return (
+        <div className={styles.sidebarContainer}>
+
+            <div className={styles.logoContainer}>
+                <img src="..\..\..\src\assets\LogoPowerOn.png" alt="Logo" className={styles.logo} />
+            </div>
+
+            <div>
+                <SidebarUser user={user} />
+            </div>
+            
+            <div className={styles.sidebar}>
+                {data.map(item => {
+                    return <SidebarItem key={item.id} item={item} />;
+                })}
+            </div>
+            
+
+        </div>
+    )
+    }
+
+const SidebarWithData: React.FC = () => {
+        return <Sidebar data={useSidebarData()} />;
+    };
+export default SidebarWithData;

frontend/src/components/Sidebar/SidebarItem.module.css

@@ -0,0 +1,69 @@
+.menu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+}
+
+.menu li {
+    display: flex;
+    width: 200px;
+    height: 44px;
+    padding: 0 3px 0 15px;
+    align-items: center;
+    gap: 9px;
+    color: var(--Grayscale-Black, #24262B);
+}
+
+.menu li:hover, .menu li.active {
+    background: var(--Brand-Purple-Purple, #5F59D4);
+    color: white;
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.menu li:hover a, .menu li.active a {
+    color: white;
+    text-decoration: none;
+}
+
+.menu li a {
+    text-decoration: none;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.menuLink {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding-right: 15px;
+}
+
+.icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    padding: 2.292px 2.3px 2.508px 2.292px;
+    justify-content: center;
+    align-items: center;
+    margin-left: 20px;
+}
+
+.hassubmenu {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.3s ease;
+}
+
+.rotated {
+    transform: rotate(180deg);
+}

frontend/src/components/Sidebar/SidebarItem.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { IoIosArrowDown } from "react-icons/io";
+
+import styles from './SidebarItem.module.css';
+import SidebarSubmenu from "./SidebarSubmenu";
+
+interface SidebarItemProps {
+  item: {
+    id: string;
+    name: string;
+    link?: string;
+    icon?: React.ComponentType;
+    submenu?: {
+        id: string;
+        name: string;
+        link?: string;
+      }[];
+    };
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({ item }) => {
+    const location = useLocation();
+    const Icon = item.icon as React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    const hasSubItems = item.submenu && item.submenu.length > 0;
+
+    const [isOpen, setIsOpen] = useState(false);
+    
+    const toggleSubmenu = (e: React.MouseEvent) => {
+        if (hasSubItems) {
+            e.preventDefault();
+            setIsOpen(!isOpen);
+        }
+    };
+
+    const isActive = item.link && location.pathname === item.link;
+
+    return (
+        <div className={styles.menu}>
+            <li className={`${isActive ? styles.active : ""}`}>
+                {Icon && <Icon className={styles.icon} />}
+                {hasSubItems ? (
+                    <a href="#" onClick={toggleSubmenu} className={styles.menuLink}>
+                        {item.name}
+                        <IoIosArrowDown className={`${styles.hassubmenu} ${isOpen ? styles.rotated : ''}`} />
+                    </a>
+                ) : (
+                    <Link to={item.link || "#"}>{item.name}</Link>
+                )}
+            </li>
+            {hasSubItems && <SidebarSubmenu item={item} isOpen={isOpen} />}
+        </div>
+    );
+};
+
+export default SidebarItem;

frontend/src/components/Sidebar/SidebarSubmenu.module.css

@@ -0,0 +1,58 @@
+.submenu {
+    position: relative;
+    background-color: white;
+    overflow: hidden;
+}
+
+.open {
+    opacity: 1;
+    visibility: visible;
+    height: auto;
+}
+
+.submenuLineContainer {
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    padding: 5px 0;
+}
+
+.verticalLine {
+    width: 1px;
+    background-color: #F1F1F1;
+    margin-left: 46px;
+    margin-right: -40px;
+}
+
+.submenuList {
+    margin: 5px 0;
+    flex-grow: 1;
+}
+
+.submenuList li {
+    width: 153px;
+    height: 20px;
+    color: var(--Grayscale-Black, #24262B);
+    margin: 4px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.submenuList li a {
+    padding: 4px 0;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    color: var(--Grayscale-Black, #24262B);
+    text-decoration: none;
+    display: block;
+    overflow: hidden;
+}
+
+.textContainer {
+    position: relative;
+    width: 153px;
+    overflow: hidden;
+    white-space: nowrap;
+}

frontend/src/components/Sidebar/SidebarSubmenu.tsx

@@ -0,0 +1,100 @@
+import styles from './SidebarSubmenu.module.css';
+import { Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRef, useEffect, useState } from 'react';
+
+interface SidebarSubmenuProps {
+  item: {
+    id: string;
+    name: string;
+    submenu?: {
+      id: string;
+      name: string;
+      link?: string;
+    }[];
+  };
+  isOpen: boolean;
+}
+
+const SidebarSubmenu: React.FC<SidebarSubmenuProps> = ({ item, isOpen }) => {
+    if (!item.submenu) return null;
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                    className={styles.submenu}
+                >
+                    <div className={styles.submenuLineContainer}>
+                        <div className={styles.verticalLine}></div>
+                        <ul className={styles.submenuList}>
+                            {item.submenu.map(subitem => {
+                                const textRef = useRef<HTMLSpanElement>(null);
+                                const containerRef = useRef<HTMLDivElement>(null);
+                                const [isOverflowing, setIsOverflowing] = useState(false);
+
+                                useEffect(() => {
+                                    const checkOverflow = () => {
+                                        if (textRef.current && containerRef.current) {
+                                            const textWidth = textRef.current.scrollWidth;
+                                            const containerWidth = containerRef.current.clientWidth;
+                                            setIsOverflowing(textWidth > containerWidth);
+                                        }
+                                    };
+                                    
+                                    checkOverflow();
+                                    // Also check on window resize
+                                    window.addEventListener('resize', checkOverflow);
+                                    return () => window.removeEventListener('resize', checkOverflow);
+                                }, [subitem.name]);
+
+                                return (
+                                    <li key={subitem.id}>
+                                        <Link 
+                                            to={subitem.link || '#'} 
+                                            title={subitem.name}
+                                        >
+                                            <div 
+                                                ref={containerRef}
+                                                className={styles.textContainer}
+                                            >
+                                                <motion.span
+                                                    ref={textRef}
+                                                    style={{
+                                                        display: 'block',
+                                                        whiteSpace: 'nowrap',
+                                                    }}
+                                                    initial={{ x: 0 }}
+                                                    animate={{ x: 0 }}
+                                                    {...(isOverflowing && {
+                                                        whileHover: {
+                                                            x: -(textRef.current?.scrollWidth || 0) + (containerRef.current?.clientWidth || 153),
+                                                            transition: {
+                                                                duration: 2,
+                                                                ease: "linear"
+                                                            }
+                                                        }
+                                                    })}
+                                                >
+                                                    <div style={{ display: 'inline-block', paddingRight: '10px' }}>
+                                                        {subitem.name}
+                                                    </div>
+                                                </motion.span>
+                                            </div>
+                                        </Link>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};
+
+export default SidebarSubmenu;

frontend/src/components/Sidebar/SidebarUser.module.css

@@ -0,0 +1,63 @@
+.user_section {
+    display: flex;
+    width: 200px;
+    height: auto;
+    min-height: 100px;
+    padding: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.user_info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+}
+
+.user_icon {
+    font-size: 40px;
+    color: #666;
+    flex-shrink: 0;
+}
+
+.text_content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.user_section h1 {
+    margin: 0;
+    font-size: 16pt;
+    line-height: 1.2;
+}
+
+.user_section p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #666;
+}
+
+.logout_button {
+    margin-top: 4px;
+    padding: 8px 16px;
+    background-color: var(--Brand-Purple-Purple, #5F59D4);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+    width: 100%;
+}
+
+.logout_button:hover {
+    cursor: pointer;
+}
+
+.logout_button:active {
+    background-color: #b71c1c;
+}
+

frontend/src/components/Sidebar/SidebarUser.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useMsal } from '@azure/msal-react'
+import { FaUserCircle } from 'react-icons/fa'
+import styles from './SidebarUser.module.css'
+
+interface SidebarUserProps {
+    user: {
+        id: number,
+        name: string,
+        role: string,
+    } 
+}
+
+const SidebarUser: React.FC<SidebarUserProps> = ({ user }) => {
+    const { instance } = useMsal();
+
+    const handleLogout = async () => {
+        try {
+            // Clear MSAL cache and sign out
+            await instance.logoutRedirect({
+                onRedirectNavigate: () => {
+                    // Clear any application-specific data from localStorage
+                    localStorage.clear();
+                    return true;
+                }
+            });
+        } catch (error) {
+            console.error('Logout failed:', error);
+        }
+    };
+
+    return (
+        <div className={styles.user_section}>
+            <div className={styles.user_info}>
+                <FaUserCircle className={styles.user_icon} />
+                <div className={styles.text_content}>
+                    <h1>{ user.name }</h1>
+                    <p>role: {user.role}</p>
+                </div>
+            </div>
+            <button 
+                className={styles.logout_button}
+                onClick={handleLogout}
+            >
+                Logout
+            </button>
+        </div>
+    )
+}
+
+export default SidebarUser;

frontend/src/components/Sidebar/index.ts

@@ -0,0 +1,3 @@
+import Sidebar from "./Sidebar";
+
+export default Sidebar;

frontend/src/components/Sidebar/sidebarData.tsx

@@ -0,0 +1,77 @@
+import { MdOutlineWorkOutline } from 'react-icons/md';
+import { BsChatDots } from "react-icons/bs";
+import { LuTicket } from "react-icons/lu";
+import { RiTeamLine } from "react-icons/ri";
+import { BiInfoSquare } from "react-icons/bi";
+import { GoGear } from "react-icons/go";
+import { FaRegFileAlt } from "react-icons/fa";
+import { TbLogs } from "react-icons/tb";
+import { useUserPrompts } from '../../auth/Hooks/use-user-prompts';
+import { useMemo } from 'react';
+
+export const useSidebarData = () => {
+  const { prompts, loading } = useUserPrompts();
+
+  return useMemo(() => [
+    {
+      id: '1',
+      name: 'Organisation',
+      link: '/organisation',
+      icon: MdOutlineWorkOutline,
+    },
+    {
+      id: '2',
+      name: 'Prompts',
+      icon: BsChatDots,
+      submenu: loading ? [] : prompts.map(prompt => ({
+        id: `prompt-${prompt.id}`,
+        name: prompt.prompt_title.substring(0, 100),
+        link: `/dashboard?expandedPrompt=${prompt.id}`,
+      })),
+    },
+    {
+      id: '3',
+      name: 'Aktivitätszentrum',
+      link: '/dashboard',
+      icon: LuTicket,
+    },
+    {
+      id: '4',
+      name: 'Dateien',
+      link: '/dateien',
+      icon: FaRegFileAlt,
+    },
+    {
+      id: '5',
+      name: 'Mitglieder',
+      link: '/mitglieder',
+      icon: RiTeamLine,
+    },
+    {
+      id: '6',
+      name: 'Nachrichten',
+      link: '',
+      icon: BiInfoSquare,
+    },
+    {
+      id: '6',
+      name: 'Logs',
+      link: '',
+      icon: TbLogs ,
+    },
+    {
+      id: '7',
+      name: 'Settings',
+      link: '',
+      icon: GoGear,
+    },
+    {
+      id: '8',
+      name: 'Help',
+      link: '',
+      icon: BiInfoSquare,
+    },
+  ], [prompts, loading]);
+} 
+
+export default useSidebarData;

frontend/src/hooks/use-file-operations.ts

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useAuthToken } from '../auth/Hooks/use-auth-token';
+import { downloadFile } from '../api';
+import { authorizedDelete } from '../api';
+
+export type FileOperationState = {
+    downloadingFiles: Set<number>;
+    downloadError: string | null;
+    deletingFiles: Set<number>;
+    deleteError: string | null;
+};
+
+export const useFileOperations = () => {
+    const [downloadingFiles, setDownloadingFiles] = useState<Set<number>>(new Set());
+    const [downloadError, setDownloadError] = useState<string | null>(null);
+    const [deletingFiles, setDeletingFiles] = useState<Set<number>>(new Set());
+    const [deleteError, setDeleteError] = useState<string | null>(null);
+    const { getToken } = useAuthToken();
+
+    const handleFileDownload = async (fileId: number, fileName: string) => {
+        try {
+            setDownloadError(null);
+            setDownloadingFiles(prev => new Set(prev).add(fileId));
+            
+            await downloadFile(fileId, getToken);
+            
+        } catch (error) {
+            console.error('Error downloading file:', error);
+            setDownloadError('Failed to download file. Please try again.');
+        } finally {
+            setDownloadingFiles(prev => {
+                const newSet = new Set(prev);
+                newSet.delete(fileId);
+                return newSet;
+            });
+        }
+    };
+
+    const handleFileDelete = async (fileId: number) => {
+        try {
+            setDeleteError(null);
+            setDeletingFiles(prev => new Set(prev).add(fileId));
+            
+            await authorizedDelete(`/api/user/files/${fileId}`, getToken);
+            
+            // Return true to indicate successful deletion
+            return true;
+        } catch (error) {
+            console.error('Error deleting file:', error);
+            setDeleteError('Failed to delete file. Please try again.');
+            return false;
+        } finally {
+            setDeletingFiles(prev => {
+                const newSet = new Set(prev);
+                newSet.delete(fileId);
+                return newSet;
+            });
+        }
+    };
+
+    return {
+        downloadingFiles,
+        downloadError,
+        deletingFiles,
+        deleteError,
+        handleFileDownload,
+        handleFileDelete,
+        clearDownloadError: () => setDownloadError(null),
+        clearDeleteError: () => setDeleteError(null)
+    };
+}; 

frontend/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import { AuthProvider } from './auth/Hooks/auth-provider.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AuthProvider>
+      <App />
+    </AuthProvider>
+  </StrictMode>,
+)

frontend/src/pages/Home/Dashboard/Dashboard.module.css

@@ -0,0 +1,4 @@
+.dashboardContainer {
+    margin: 51px 49px 0 36px;
+
+}

frontend/src/pages/Home/Dashboard/Dashboard.tsx

@@ -0,0 +1,13 @@
+import DashboardPrompt from '../../../components/DashboardPrompts/DashboardPrompt';
+
+import styles from './Dashboard.module.css'
+
+function Dashboard () {
+    return (
+        <div className={styles.dashboardContainer}> 
+            <DashboardPrompt />
+        </div>
+    );
+}
+
+export default Dashboard;

frontend/src/pages/Home/Dateien/Dateien.module.css

@@ -0,0 +1,90 @@
+.dateienContainer {
+    margin: 51px 49px 0 36px;
+    display: flex;
+    padding: 0px 30px 30px 30px;
+    flex-direction: column;
+    align-self: stretch;
+    border-radius: 30px;
+    border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
+    background: var(--Grayscale-True-White, #FFF);
+    position: relative;
+    box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);
+    max-height: calc(100vh - 100px);
+    overflow: hidden;
+}
+
+.horizontalLineLight {
+    width: 100%;
+    background-color: #F1F1F1;
+    height: 1px;
+    margin-top: 90px;
+    margin-left: -30px;
+    position: absolute;
+}
+
+.header {
+    display: flex;
+    gap: 30px;
+    align-items: flex-start;
+    height: 62px;
+    color: var(--Grayscale-Black, #24262B);
+    padding-top: 30px;
+}
+
+.datei_hinzufügen_button {
+    border-radius: 30px;
+    background: var(--Grayscale-Gray, #E9E9E9);
+    border: none;
+    outline: none;
+    text-align: left;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.datei_hinzufügen_button:hover {
+    cursor: pointer;
+
+}
+
+.add_icon {
+    font-size: 16px;
+}
+
+.filesList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.filesList li {
+    display: flex;
+    align-items: center;
+    height: 60px; /* Specific height for each item */
+    padding: 0 16px;
+    border-bottom: 1px solid #F1F1F1;
+    font-size: 16px;
+    transition: background-color 0.2s ease;
+  }
+
+.actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+  }
+
+.error {
+    color: #d32f2f;
+    margin: 1rem 0;
+    padding: 0.5rem;
+    background-color: #ffebee;
+    border-radius: 4px;
+    text-align: center;
+}

frontend/src/pages/Home/Dateien/Dateien.tsx

@@ -0,0 +1,94 @@
+import styles from './Dateien.module.css'
+import { useUserFiles } from '../../../auth/Hooks/use-user-files';
+import { IoAddCircleOutline } from "react-icons/io5";
+import DateienItem from '../../../components/Dateien/DateienItem';
+import DateienUpload from './DateienHinzufügen/DateienUpload';
+import { useState } from 'react';
+import { useAuthToken } from '../../../auth/Hooks/use-auth-token';
+import { useFileOperations } from '../../../hooks/use-file-operations';
+import axios from 'axios';
+
+function Dateien() {
+    const { files, loading, error, refetch } = useUserFiles();
+    const [isUploadOpen, setIsUploadOpen] = useState(false);
+    const [uploadError, setUploadError] = useState<string | null>(null);
+    const { getToken } = useAuthToken();
+    const { downloadError, deleteError } = useFileOperations();
+
+    const handleFileUpload = async (file: File) => {
+        try {
+            setUploadError(null);
+            console.log('Starting file upload for:', file.name);
+            
+            const token = await getToken();
+            console.log('Got authentication token');
+            
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            console.log('Sending request to backend...');
+            const response = await axios.post('http://localhost:8000/api/user/files/upload', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    'Authorization': `Bearer ${token}`
+                }
+            });
+            
+            console.log('Upload successful:', response.data);
+            await refetch();
+        } catch (error: any) {
+            console.error('Error uploading file:', error);
+            console.error('Error response:', error.response?.data);
+            setUploadError(error.response?.data?.detail || 'Failed to upload file. Please try again.');
+        }
+    };
+
+    const handleFileDeleted = () => {
+        refetch();
+    };
+
+    return (
+        <div className={styles.dateienContainer}>
+            <div className={styles.header}>
+                <button 
+                    className={styles.datei_hinzufügen_button}
+                    onClick={() => setIsUploadOpen(true)}
+                >
+                    <IoAddCircleOutline className={styles.add_icon}/>
+                    Datei hinzufügen
+                </button>
+            </div>
+            <div className={styles.horizontalLineLight}></div>
+
+            <DateienUpload 
+                isOpen={isUploadOpen}
+                onClose={() => setIsUploadOpen(false)}
+                onFileUpload={handleFileUpload}
+            />
+
+            {(uploadError || downloadError || deleteError) && (
+                <p className={styles.error}>
+                    {uploadError || downloadError || deleteError}
+                </p>
+            )}
+            {loading && <p>Loading files...</p>}
+            {error && <p>Error: {error}</p>}
+            
+            {!loading && !error && files.length === 0 ? (
+                <p>No files found.</p>
+            ) : (
+                <ul className={styles.filesList}>
+                    {files.map(file => (
+                        <DateienItem 
+                            key={file.id} 
+                            file={file}
+                            onDelete={handleFileDeleted}
+                        />
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
+
+export default Dateien;

frontend/src/pages/Home/Dateien/DateienHinzufügen/DateienUpload.module.css

@@ -0,0 +1,101 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.closeButton {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #666;
+}
+
+.closeButton:hover {
+    color: #333;
+}
+
+.dropzone {
+    border: 2px dashed #ccc;
+    border-radius: 4px;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    margin: 1rem 0;
+    transition: all 0.3s ease;
+}
+
+.dropzone.active {
+    border-color: #2196f3;
+    background-color: rgba(33, 150, 243, 0.1);
+}
+
+.uploadIcon {
+    font-size: 3rem;
+    color: #666;
+    margin-bottom: 1rem;
+}
+
+.dropzoneText {
+    color: #666;
+}
+
+.dropzoneText p {
+    margin: 0.5rem 0;
+}
+
+.browseButton {
+    background-color: #2196f3;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 0.5rem;
+}
+
+.browseButton:hover {
+    background-color: #1976d2;
+}
+
+.selectedFile {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+}
+
+.uploadButton {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 0.5rem;
+}
+
+.uploadButton:hover {
+    background-color: #388e3c;
+} 

frontend/src/pages/Home/Dateien/DateienHinzufügen/DateienUpload.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import styles from './DateienUpload.module.css';
+import { IoCloudUploadOutline } from "react-icons/io5";
+import { IoClose } from "react-icons/io5";
+
+interface DateienUploadProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onFileUpload: (file: File) => void;
+}
+
+function DateienUpload({ isOpen, onClose, onFileUpload }: DateienUploadProps) {
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        if (acceptedFiles.length > 0) {
+            setSelectedFile(acceptedFiles[0]);
+        }
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        multiple: false
+    });
+
+    const handleUpload = () => {
+        if (selectedFile) {
+            onFileUpload(selectedFile);
+            setSelectedFile(null);
+            onClose();
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className={styles.overlay}>
+            <div className={styles.modal}>
+                <button className={styles.closeButton} onClick={onClose}>
+                    <IoClose />
+                </button>
+                <h2>Datei hochladen</h2>
+                
+                <div 
+                    {...getRootProps()} 
+                    className={`${styles.dropzone} ${isDragActive ? styles.active : ''}`}
+                >
+                    <input {...getInputProps()} />
+                    <IoCloudUploadOutline className={styles.uploadIcon} />
+                    {isDragActive ? (
+                        <p>Datei hier ablegen...</p>
+                    ) : (
+                        <div className={styles.dropzoneText}>
+                            <p>Dateien hierher ziehen</p>
+                            <p>oder</p>
+                            <button className={styles.browseButton}>
+                                Durchsuchen
+                            </button>
+                        </div>
+                    )}
+                </div>
+
+                {selectedFile && (
+                    <div className={styles.selectedFile}>
+                        <p>Ausgewählte Datei: {selectedFile.name}</p>
+                        <button 
+                            className={styles.uploadButton}
+                            onClick={handleUpload}
+                        >
+                            Hochladen
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default DateienUpload; 

frontend/src/pages/Home/Home.module.css

@@ -0,0 +1,36 @@
+.homeContainer {
+    position: relative;
+    background-color: #F7F7F7;
+    min-height: calc(100vh - 15px);
+    max-height: calc(100vh - 15px);
+    width: 100%;
+    font-family: Arial, Helvetica, sans-serif;
+    z-index: 0;
+    overflow: hidden; /* just in case */
+  }
+  
+  .homeContainer::before {
+    content: "";
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-image: url('../../assets/background.png');
+    background-repeat: repeat;
+    background-size: 50px;
+    opacity: 0.2; /* Adjust this to your liking */
+    z-index: -1;
+    pointer-events: none;
+  }
+
+.homeSidebar {
+    height: auto;
+}
+.homeContent {
+    height: 100vh;
+    width: 100%;
+}
+
+.body {
+    display: flex;
+    max-width: 100vw;
+}

frontend/src/pages/Home/Home.tsx

@@ -0,0 +1,38 @@
+import { useEffect  } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import styles from './Home.module.css'
+
+import Sidebar from '../../components/Sidebar';
+
+import { AnimatePresence, motion } from "framer-motion";
+
+function Home () {
+    useEffect(()=> {
+        document.title = "PowerOn";
+    }, []);
+    const location = useLocation();
+    return (
+        <div className={styles.homeContainer}> 
+            <div className={styles.body}>
+                <div className={styles.homeSidebar}>
+                    <Sidebar />
+                </div>
+                <div className={styles.homeContent}>
+                    <AnimatePresence mode="wait">
+                    <motion.div
+                        key={location.pathname}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.3, ease: "easeInOut" }}
+                        >
+                            <Outlet />
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+                
+            </div>
+        </div>)
+}
+
+export default Home;

frontend/src/pages/Home/Mitglieder/Mitglieder.module.css

@@ -0,0 +1,85 @@
+.mitgliederContainer {
+    margin: 51px 49px 0 36px;
+    display: flex;
+    padding: 0px 30px 30px 30px;
+    flex-direction: column;
+    align-self: stretch;
+    border-radius: 30px;
+    border: 1px solid var(--f-1-f-1-f-1, #F1F1F1);
+    background: var(--Grayscale-True-White, #FFF);
+    position: relative;
+    box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);
+    max-height: calc(100vh - 100px);
+    overflow: hidden;
+}
+
+.horizontalLineLight {
+    width: 100%;
+    background-color: #F1F1F1;
+    height: 1px;
+    margin-top: 90px;
+    margin-left: -30px;
+    position: absolute;
+}
+
+.header{
+    display: flex;
+    gap: 30px;
+    align-items: flex-start;
+    height: 62px;
+    color: var(--Grayscale-Black, #24262B);
+    padding-top: 30px;
+    padding-bottom: 30px;
+}
+
+.mitglieder_hinzufügen_button {
+    
+    border-radius: 30px;
+    background: var(--Grayscale-Gray, #E9E9E9);
+    
+    border: none;
+    outline: none;
+    text-align: left;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.mitglieder_hinzufügen_button:hover {
+    cursor: pointer;
+}
+
+.add_icon {
+    font-size: 16px;
+}
+
+.membersList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    overflow-y: auto; /* Enable vertical scrolling */
+ /* Space for the header line */
+}
+  
+.membersList li {
+    display: flex;
+    align-items: center;
+    height: 60px; /* Specific height for each item */
+    padding: 0 16px;
+    border-bottom: 1px solid #F1F1F1;
+    font-size: 16px;
+    transition: background-color 0.2s ease;
+  }
+
+.actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+  }

frontend/src/pages/Home/Mitglieder/Mitglieder.tsx

@@ -0,0 +1,39 @@
+import styles from './Mitglieder.module.css'
+import { useOrgUsers } from '../../../auth/Hooks/get-all-users';
+import MitgliederItem from '../../../components/Mitglieder/MitgliederItem';
+import { IoPersonAddSharp } from "react-icons/io5";
+
+function Mitglieder () {
+    const { users, loading, error, refetch } = useOrgUsers();
+
+
+    return (
+        <div className={styles.mitgliederContainer}>
+            <div className={styles.header}>
+                <button className={styles.mitglieder_hinzufügen_button}>
+                    <IoPersonAddSharp className={styles.add_icon}/>
+                    Mitglied hinzufügen 
+                </button>
+            </div>
+           <div className={styles.horizontalLineLight}></div>
+
+           {users.length === 0 ? (
+                <p>No users found.</p>
+            ) : (
+                <ul className={styles.membersList}>
+                {users.map(user => (
+                    <MitgliederItem 
+                        key={user.azure_id} 
+                        user={user} 
+                        refetchUsers={refetch}
+                        totalUsers={users.length}
+                    />
+                ))}
+                </ul>
+            )}
+
+        </div>
+    );
+}
+
+export default Mitglieder;

frontend/src/pages/Home/Organisation/Organisation.tsx

@@ -0,0 +1,16 @@
+function Organisation () {
+
+
+    return(
+        <div>
+            <h1>Organisation</h1>
+            <p>Hier sind die Infos über deine Organisation:</p>
+
+            
+
+        </div>
+        
+    )
+}
+
+export default Organisation;

frontend/src/pages/Home/index.ts

@@ -0,0 +1,3 @@
+import Home from "./Home";
+
+export default Home;

frontend/src/pages/Login.module.css

@@ -0,0 +1,108 @@
+.container {
+  display: flex;
+  min-height: calc(100vh - 20pt);
+  max-height: calc(100vh - 20pt);
+  background: var(--Grayscale-True-White, #FFF);
+  padding: 20pt;
+  box-sizing: border-box;
+}
+
+.leftPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  background-color: white;
+  border-radius: 8px;
+  margin-right: 20pt;
+}
+
+.rightPanel {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.logo {
+  margin-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo img {
+  height: 40px;
+  width: auto;
+}
+
+.loginBox {
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  color: var(--Grayscale-Black, #24262B);
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+
+}
+
+.button {
+  width: 100%;
+  padding: 0.8rem;
+  margin: 0.5rem 0;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.primaryButton {
+  background: var(--Brand-Purple-Purple, #5F59D4);
+  color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.primaryButton:hover {
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.secondaryButton {
+  background-color: #f0f0f0;
+  color: #333;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.secondaryButton:hover {
+  background-color: #e0e0e0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.rightContent {
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.rightContent img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  height: auto;
+}

frontend/src/pages/Login.tsx

@@ -0,0 +1,74 @@
+import { useMsal } from '@azure/msal-react';
+import { loginRequest } from '../auth/auth-config';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import styles from './Login.module.css';
+import agentDiagram from '../assets/Frame 43.png';
+import logo from '../assets/LogoPowerOn.png';
+
+function Login() {
+  const { instance, accounts, inProgress } = useMsal();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  
+  // Get the page the user was trying to visit
+  const from = location.state?.from?.pathname || "/";
+  
+  useEffect(() => {
+    if (accounts.length > 0 && inProgress === "none") {
+      console.log("User is already logged in, redirecting to:", from);
+      setTimeout(() => {
+        navigate(from, { replace: true });
+      }, 300);
+    } else {
+      console.log("User not logged in or auth in progress:", inProgress);
+    }
+  }, [accounts, inProgress, navigate, from]);
+
+  const handleLoginRedirect = async () => {
+    setIsLoggingIn(true);
+    try {
+      console.log("Starting login process...");
+      // Use popup instead of redirect for easier debugging
+      await instance.loginPopup(loginRequest);
+      console.log("Login successful, auth should redirect shortly");
+    } catch (error) {
+      console.error("Login failed:", error);
+      setIsLoggingIn(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.leftPanel}>
+        <div className={styles.logo}>
+          <img src={logo} alt="PowerOn Logo" />
+        </div>
+        <div className={styles.loginBox}>
+          <h1 className={styles.title}>Sign In or Register Your Organisation</h1>
+          <button 
+            className={`${styles.button} ${styles.primaryButton}`}
+            onClick={handleLoginRedirect}
+            disabled={isLoggingIn || inProgress !== "none"}
+          >
+            {isLoggingIn ? "Signing in..." : "Sign in with Microsoft"}
+          </button>
+          <button 
+            className={`${styles.button} ${styles.secondaryButton}`}
+            onClick={() => navigate("/register-organisation")}
+          >
+            Register Organisation
+          </button>
+        </div>
+      </div>
+      <div className={styles.rightPanel}>
+        <div className={styles.rightContent}>
+          <img src={agentDiagram} alt="Agent Diagram" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

frontend/src/pages/Register/RegisterOrganisation.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import { useMsalLogin } from '../../auth/Hooks/use-msal-login';
+import { useUserInfo } from '../../auth/Hooks/use-user-info';
+import { useNavigate } from 'react-router-dom'; // Use useNavigate instead of useHistory
+
+function RegisterOrganisation() {
+  const { login, isLoggingIn, error } = useMsalLogin();
+  const user = useUserInfo();
+  console.log(user);
+  const navigate = useNavigate(); // Initialize useNavigate hook
+
+  const [userName, setUserName] = useState("");
+  const [userEmail, setUserEmail] = useState("");
+  const [userAzureID, setUserAzureID] = useState("");
+  const [tenantID, setTenantID] = useState("");
+
+  const [organisationName, setOrganisationName] = useState("");
+  const [userPosition, setUserPosition] = useState("");
+  const [organisationSize, setOrganisationSize] = useState("");
+  const [country, setCountry] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+
+  useEffect(() => {
+    if (user?.name) {setUserName(user.name);}
+    if (user?.email) {setUserEmail(user.email);}
+    if (user?.oid) {setUserAzureID(user.oid);}
+    if (user?.tenantId) {setTenantID(user.tenantId);}
+  }, [user]);
+  
+  const handleRedirectToPricingSetup = () => {
+    // Use navigate to redirect to the pricing setup page
+    navigate('/register-pricing', {
+      state: {
+        user: {
+          userName,
+          userEmail,
+          userAzureID,
+          userPosition,
+          phoneNumber
+        },
+        organisation: {
+          organisationName,
+          organisationSize,
+          country,
+          tenantID,
+        }
+      }
+    });
+  };
+
+  return (
+    <div className="register-form">
+      <h1>Register Your Organisation</h1>
+      {!user?.name && (
+        <div className="login-section">
+          <p>Great! Please log in with MSAL:</p>
+          <button onClick={login} disabled={isLoggingIn} className="login-button">
+            {isLoggingIn ? "Logging in..." : "Login with Microsoft"}
+          </button>
+          {error && <p style={{ color: "red" }}>Login error: {error}</p>}
+        </div>
+      )}
+
+      {user?.name && (
+        <div className="user-info-section">
+          <p>Hello {user.name}</p>
+          <p>These are your information:</p>
+          <ul>
+            <li>Name: {user.name}</li>
+            <li>Email: {user.email}</li>
+            <li>Azure ID: {user.oid}</li>
+            <li>Tenant ID: {user.tenantId}</li>
+          </ul>
+          <p>Now, please enter your organisation's information:</p>
+
+          <form className="organisation-form">
+            <div className="form-group">
+              <label htmlFor="organisationName">Organisation Name:</label>
+              <input
+                type="text"
+                id="organisationName"
+                value={organisationName}
+                onChange={(e) => setOrganisationName(e.target.value)}
+                placeholder="Enter your organisation's name"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="userPosition">Your Position:</label>
+              <input
+                type="text"
+                id="userPosition"
+                value={userPosition}
+                onChange={(e) => setUserPosition(e.target.value)}
+                placeholder="Enter your position"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="organisationSize">Organisation Size:</label>
+              <input
+                type="text"
+                id="organisationSize"
+                value={organisationSize}
+                onChange={(e) => setOrganisationSize(e.target.value)}
+                placeholder="Enter your organisation's size"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="country">Country:</label>
+              <input
+                type="text"
+                id="country"
+                value={country}
+                onChange={(e) => setCountry(e.target.value)}
+                placeholder="Enter your country"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="phoneNumber">Phone Number:</label>
+              <input
+                type="tel"
+                id="phoneNumber"
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.target.value)}
+                placeholder="Enter your phone number"
+                required
+              />
+            </div>
+
+            {/* Button to navigate to pricing setup page */}
+            <button
+              type="button"
+              onClick={handleRedirectToPricingSetup}
+              className="redirect-button"
+            >
+              Go to Pricing Setup
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default RegisterOrganisation;

frontend/src/pages/Register/RegisterPricing.tsx

@@ -0,0 +1,52 @@
+// Example of PricingSetup component
+
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+
+
+function RegisterPricing() {
+    const [ price, setPrice ] = useState("");
+
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const organisationData = location.state?.organisation;
+    const organisationUser = location.state?.user;
+
+    const handleRedirectToSummary = () => {
+        // Use navigate to redirect to the pricing setup page
+        navigate('/register-summary', {
+          state: {
+            organisation: organisationData,
+            user: organisationUser,
+            price,
+          }
+        });
+      };
+      
+    return (
+      <div>
+        <h1>Pricing Setup</h1>
+        <p>Here you can set up your pricing options!</p>
+        <input
+            type="text"
+            id="price"
+            value={price}
+            onChange={(e) => setPrice(e.target.value)}
+            placeholder="Enter your price"
+            required
+            />
+            <button
+              type="button"
+              onClick={handleRedirectToSummary}
+              className="redirect-button"
+            >
+              Go to Summary
+            </button>
+      </div>
+    );
+  }
+  
+  export default RegisterPricing;
+  

frontend/src/pages/Register/RegisterSummary.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+
+import api from '../../api';
+import { useAuthToken } from '../../auth/Hooks/use-auth-token';
+
+function RegisterSummary() {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const user = location.state?.user;
+    const organisation = location.state?.organisation;
+    const pricing = location.state?.price;
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitSuccess, setSubmitSuccess] = useState(false);
+    const [submitError, setSubmitError] = useState<string | null>(null);
+
+    const [responseMessageUser, setResponseMessageUser] = useState<string | null>(null);
+    const [responseMessageOrganisation, setResponseMessageOrganisation] = useState<string | null>(null);
+
+    const { getToken } = useAuthToken();
+
+    const handleSubmit = async () => {
+        setIsSubmitting(true);
+        setSubmitError(null);
+        setResponseMessageUser(null);
+        setResponseMessageOrganisation(null);
+
+        const payload = {
+          organisation: {
+            name: organisation.organisationName,
+            size: organisation.organisationSize,
+            country: organisation.country,
+            tenant_id: organisation.tenantID
+          },
+          user: {
+            name: user.userName,
+            email: user.userEmail,
+            azure_id: user.userAzureID,
+            position: user.userPosition,
+            phone: user.phoneNumber,
+            role: "admin"
+          }
+        };
+    
+        try {
+          const token = await getToken();
+          const response = await api.post(
+            'http://localhost:8000/api/organisation/register',
+            payload,
+            {
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            }
+          );
+    
+        const message = response.data[0]?.message;
+        setResponseMessageOrganisation(message);
+    
+          setSubmitSuccess(true);
+        } catch (error: any) {
+          const detailMessage = error?.response?.data?.detail;
+          setSubmitError(detailMessage || 'Something went wrong');
+        } finally {
+          setIsSubmitting(false);
+        };
+      };
+
+    useEffect(() => {
+      if (submitSuccess) {
+        setTimeout(() => {
+          navigate('/');
+        }, 2000); // 2-second delay
+      }
+    }, [submitSuccess]);
+    
+    return (
+        <div>
+          <h1>Summary of Your Registration</h1>
+          <h2>Your Information</h2>
+          <ul>
+            <li>Name: {user.userName}</li>
+            <li>Email: {user.userEmail}</li>
+            <li>Your Position: {user.userPosition}</li>
+            <li>Phone Number: {user.phoneNumber}</li>
+          </ul>
+
+          {/* Display Organisation Data */}
+          <h2>Organisation Information</h2>
+          <ul>
+            <li>Tenant ID: {organisation.tenantID}</li>
+            <li>Organisation Name: {organisation.organisationName}</li>
+            <li>Organisation Size: {organisation.organisationSize}</li>
+            <li>Country: {organisation.country}</li>
+          </ul>
+    
+          {/* Display Pricing Data */}
+          <h2>Pricing Information</h2>
+          <ul>
+            <li>Price: {pricing}</li>
+          </ul>
+
+            <button onClick={handleSubmit} disabled={isSubmitting}>
+                {isSubmitting ? 'Submitting...' : 'Submit Registration'}
+            </button>
+
+            {submitSuccess && <div><p style={{ color: 'green' }}>{responseMessageUser}</p><p style={{ color: 'green' }}>{responseMessageOrganisation}</p></div>}
+            {submitError && <p style={{ color: 'red' }}>Error: {submitError}</p>}
+            
+          
+        </div>
+      );
+  }
+  
+  export default RegisterSummary;

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src",
+    "src/**/*.ts",     // Include all .ts files
+    "src/**/*.tsx",    // Include all .tsx files
+    "src/**/*.d.ts",   // Include all declaration files
+    "src/global.d.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { httpsConfig } from './server.ts';
+
+export default defineConfig({
+  plugins: [react()],
+  envPrefix: 'VITE_',
+  server: {
+    https: false,
+  },
+  css: {
+    modules: {
+      scopeBehaviour: 'local',  // Default behavior for CSS modules
+    },
+  },
+});

public/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="React Test App for Deployment" />
-    <title>React Test App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html> 

requirements.txt

@@ -1 +0,0 @@
-