saving diagrams

db/migrations/002_add_diagram_text_to_profiles.sql

@@ -0,0 +1 @@
+ALTER TABLE `gtm_profiles` ADD `diagram_mermaid_text` TEXT NULL DEFAULT NULL;

generate_diagram.php

@@ -106,6 +106,7 @@ file_put_contents($log_file, $log_entry, FILE_APPEND);
 
 // Clean up the response and extract the Mermaid code
 $diagram = trim($diagram);
+$is_error = false;
 
 // Regex to find Mermaid code block, with or without backticks and optional "mermaid" label
 if (preg_match('/```(?:mermaid)?\s*(graph\s(TD|LR|BT|RL);?[\s\S]*?)```|^(graph\s(TD|LR|BT|RL);?[\s\S]*)/', $diagram, $matches)) {
@@ -116,8 +117,19 @@ if (preg_match('/```(?:mermaid)?\s*(graph\s(TD|LR|BT|RL);?[\s\S]*?)```|^(graph\s
     // If no match, log the bad response and set an error for the user
     error_log("Invalid AI response format: " . $diagram);
     $diagram = "graph TD; A[Error: Invalid AI response format.];";
+    $is_error = true;
 }
 
-
+// --- Auto-save the generated diagram to the database ---
+if (!$is_error) {
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("UPDATE gtm_profiles SET diagram_mermaid_text = ? WHERE id = ?");
+        $stmt->execute([$diagram, $profile_id]);
+    } catch (PDOException $e) {
+        // Log the error, but don't block the user. The diagram was generated, just not saved.
+        error_log("DB Error saving diagram for profile {$profile_id}: " . $e->getMessage());
+    }
+}
 
 echo json_encode(['diagram' => $diagram]);

generate_roles.php

@@ -0,0 +1,50 @@
+<?php
+require_once 'db/config.php';
+
+header('Content-Type: application/json');
+
+$profile_id = $_GET['id'] ?? null;
+
+if (!$profile_id) {
+    echo json_encode(['error' => 'Profile ID is missing.']);
+    exit;
+}
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
+    $stmt->execute([$profile_id]);
+    $profile = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    if (!$profile) {
+        echo json_encode(['error' => 'Profile not found.']);
+        exit;
+    }
+
+    // Simulate AI-powered recommendations based on profile data
+    $recommendations = '<ul>';
+    
+    if (strpos(strtolower($profile['sales_motions']), 'outbound') !== false) {
+        $recommendations .= '<li><strong>SDR:</strong> 2 roles (Lead nurturing, qualification, demo scheduling)</li>';
+    }
+    
+    if (strpos(strtolower($profile['sells_what']), 'product') !== false) {
+        $recommendations .= '<li><strong>Product Marketing Manager:</strong> 1 role (Positioning, ICP refinement)</li>';
+    }
+
+    if (strpos(strtolower($profile['sales_motions']), 'partner') !== false) {
+        $recommendations .= '<li><strong>Partner Marketing Manager:</strong> 1 role (Managing partner relationships)</li>';
+    }
+
+    if ($recommendations === '<ul>') {
+        $recommendations = '<p>No specific role recommendations for this profile.</p>';
+    } else {
+        $recommendations .= '</ul>';
+    }
+
+    echo json_encode(['recommendations' => $recommendations]);
+
+} catch (PDOException $e) {
+    error_log($e->getMessage());
+    echo json_encode(['error' => 'Database error occurred.']);
+}

generate_tools.php

@@ -0,0 +1,50 @@
+<?php
+require_once 'db/config.php';
+
+header('Content-Type: application/json');
+
+$profile_id = $_GET['id'] ?? null;
+
+if (!$profile_id) {
+    echo json_encode(['error' => 'Profile ID is missing.']);
+    exit;
+}
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
+    $stmt->execute([$profile_id]);
+    $profile = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    if (!$profile) {
+        echo json_encode(['error' => 'Profile not found.']);
+        exit;
+    }
+
+    // Simulate AI-powered recommendations based on profile data
+    $recommendations = '<ul>';
+
+    if (strpos(strtolower($profile['sales_motions']), 'outbound') !== false || strpos(strtolower($profile['roles']), 'sdr') !== false) {
+        $recommendations .= '<li><strong>CRM:</strong> HubSpot (Integrates with SDR workflows)</li>';
+    }
+
+    if (strpos(strtolower($profile['sells_what']), 'product') !== false) {
+        $recommendations .= '<li><strong>Analytics:</strong> Mixpanel (Tracks Product-led growth)</li>';
+    }
+
+    if (strpos(strtolower($profile['market_size']), 'large') !== false || strpos(strtolower($profile['market_size']), 'enterprise') !== false) {
+        $recommendations .= '<li><strong>Automation:</strong> Zapier (Connects CRM to email marketing tools)</li>';
+    }
+
+    if ($recommendations === '<ul>') {
+        $recommendations = '<p>No specific tool recommendations for this profile.</p>';
+    } else {
+        $recommendations .= '</ul>';
+    }
+
+    echo json_encode(['recommendations' => $recommendations]);
+
+} catch (PDOException $e) {
+    error_log($e->getMessage());
+    echo json_encode(['error' => 'Database error occurred.']);
+}

profile.php

@@ -7,6 +7,7 @@ $profile_id = $_GET['id'] ?? null;
 if ($profile_id) {
     try {
         $pdo = db();
+        // Updated to fetch the diagram text as well
         $stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
         $stmt->execute([$profile_id]);
         $profile = $stmt->fetch(PDO::FETCH_ASSOC);
@@ -38,28 +39,18 @@ if ($profile_id) {
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
-                    <li class="nav-item">
+                    <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
-                        <a class="nav-link" href="#">Dashboard</a>
+                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="profile.php">Profile</a></li>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="profile.php">Profile</a>
-                    </li>
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tools</a>
-                            Tools
-                        </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                             <li><a class="dropdown-item" href="#">Design</a></li>
                             <li><a class="dropdown-item" href="#">Diagram</a></li>
                             <li><a class="dropdown-item" href="#">Integrations</a></li>
                         </ul>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
-                        <a class="nav-link" href="#">Settings</a>
+                    <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">Account</a>
-                    </li>
                 </ul>
             </div>
         </div>
@@ -74,7 +65,20 @@ if ($profile_id) {
                     <h5 class="card-title mb-0">Business Name: <?php echo htmlspecialchars($profile['business_name']); ?></h5>
                     <button id="generate-diagram-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate GTM Process Flow Diagram</button>
                 </div>
+
+                <!-- Diagram and Editor Section -->
                 <div id="diagram-container" class="mb-4"></div>
+                <div id="diagram-editor-container" class="mb-4" style="display: none;">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Diagram Editor</h5>
+                            <div id="save-status" class="mb-2"></div>
+                            <textarea id="diagram-editor" class="form-control" rows="10"></textarea>
+                            <button id="save-diagram-btn" class="btn btn-success mt-2">Save Diagram</button>
+                        </div>
+                    </div>
+                </div>
+
                 <p class="card-text"><strong>Sells What:</strong> <?php echo htmlspecialchars($profile['sells_what']); ?></p>
                 <hr>
                 <h6 class="card-subtitle mb-2 text-muted">Market & Sales</h6>
@@ -88,6 +92,29 @@ if ($profile_id) {
                 <hr>
                 <h6 class="card-subtitle mb-2 text-muted">Goals</h6>
                 <p class="card-text"><strong>Growth Goals:</strong> <?php echo htmlspecialchars($profile['goals']); ?></p>
+                <hr>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-body">
+                                <h5 class="card-title">AI-Generated Role Recommendations</h5>
+                                <p class="card-text">Get AI-powered suggestions for marketing and sales roles to execute your GTM strategy.</p>
+                                <button id="generate-roles-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Roles</button>
+                                <div id="roles-container" class="mt-3"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-body">
+                                <h5 class="card-title">AI-Recommended Tools & Integrations</h5>
+                                <p class="card-text">Discover top industry solutions and integrations to efficiently execute your GTM strategy.</p>
+                                <button id="generate-tools-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Tools</button>
+                                <div id="tools-container" class="mt-3"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     <?php else: ?>
@@ -109,12 +136,100 @@ if ($profile_id) {
         document.addEventListener('DOMContentLoaded', function () {
             const generateBtn = document.getElementById('generate-diagram-btn');
             const diagramContainer = document.getElementById('diagram-container');
+            const editorContainer = document.getElementById('diagram-editor-container');
+            const editor = document.getElementById('diagram-editor');
+            const saveBtn = document.getElementById('save-diagram-btn');
+            const saveStatus = document.getElementById('save-status');
+            const profileId = generateBtn ? generateBtn.dataset.profileId : null;
 
+            const generateRolesBtn = document.getElementById('generate-roles-btn');
+            const rolesContainer = document.getElementById('roles-container');
+            const generateToolsBtn = document.getElementById('generate-tools-btn');
+            const toolsContainer = document.getElementById('tools-container');
+
+            if (generateRolesBtn) {
+                generateRolesBtn.addEventListener('click', function () {
+                    rolesContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating roles...</p></div>';
+                    generateRolesBtn.disabled = true;
+
+                    fetch(`generate_roles.php?id=${profileId}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.error) {
+                                rolesContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
+                            } else {
+                                rolesContainer.innerHTML = data.recommendations;
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error generating roles:', error);
+                            rolesContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating roles.</div>';
+                        })
+                        .finally(() => {
+                            generateRolesBtn.disabled = false;
+                        });
+                });
+            }
+
+            if (generateToolsBtn) {
+                generateToolsBtn.addEventListener('click', function () {
+                    toolsContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating tools...</p></div>';
+                    generateToolsBtn.disabled = true;
+
+                    fetch(`generate_tools.php?id=${profileId}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.error) {
+                                toolsContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
+                            } else {
+                                toolsContainer.innerHTML = data.recommendations;
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error generating tools:', error);
+                            toolsContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating tools.</div>';
+                        })
+                        .finally(() => {
+                            generateToolsBtn.disabled = false;
+                        });
+                });
+            }
+
+            // Function to render the diagram
+            const renderDiagram = (mermaidCode) => {
+                if (!mermaidCode) {
+                    diagramContainer.innerHTML = '';
+                    return;
+                }
+                try {
+                    diagramContainer.innerHTML = `
+                        <div class="card">
+                            <div class="card-body">
+                                <h5 class="card-title">GTM Process Flow Diagram</h5>
+                                <div class="mermaid text-center">${mermaidCode}</div>
+                            </div>
+                        </div>`;
+                    mermaid.run();
+                    editor.value = mermaidCode;
+                    editorContainer.style.display = 'block';
+                } catch (e) {
+                    diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
+                    console.error("Mermaid render error:", e);
+                }
+            };
+
+            // Load existing diagram on page load
+            const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
+            if (existingDiagram) {
+                renderDiagram(existingDiagram);
+            }
+
+            // Generate button click handler
             if (generateBtn) {
                 generateBtn.addEventListener('click', function () {
-                    const profileId = this.dataset.profileId;
                     diagramContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating diagram...</p></div>';
                     generateBtn.disabled = true;
+                    editorContainer.style.display = 'none';
 
                     fetch(`generate_diagram.php?id=${profileId}`)
                         .then(response => response.json())
@@ -122,17 +237,7 @@ if ($profile_id) {
                             if (data.error) {
                                 diagramContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                             } else {
-                                const mermaidCode = data.diagram;
+                                renderDiagram(data.diagram);
-                                diagramContainer.innerHTML = `
-                                    <div class="card">
-                                        <div class="card-body">
-                                            <h5 class="card-title">GTM Process Flow Diagram</h5>
-                                            <div class="mermaid text-center">
-                                                ${mermaidCode}
-                                            </div>
-                                        </div>
-                                    </div>`;
-                                mermaid.run();
                             }
                         })
                         .catch(error => {
@@ -144,6 +249,49 @@ if ($profile_id) {
                         });
                 });
             }
+
+            // Live update diagram from editor
+            let debounceTimer;
+            editor.addEventListener('input', () => {
+                clearTimeout(debounceTimer);
+                debounceTimer = setTimeout(() => {
+                    renderDiagram(editor.value);
+                }, 500); // 500ms debounce
+            });
+
+            // Save button click handler
+            if (saveBtn) {
+                saveBtn.addEventListener('click', function () {
+                    const diagramText = editor.value;
+                    saveStatus.innerHTML = '<span class="text-info">Saving...</span>';
+                    saveBtn.disabled = true;
+
+                    fetch('save_diagram.php', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            profile_id: profileId,
+                            diagram_text: diagramText
+                        })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            saveStatus.innerHTML = '<span class="text-success">Saved successfully!</span>';
+                        } else {
+                            saveStatus.innerHTML = `<span class="text-danger">Error: ${data.error || 'Could not save.'}</span>`;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error saving diagram:', error);
+                        saveStatus.innerHTML = '<span class="text-danger">An unexpected error occurred.</span>';
+                    })
+                    .finally(() => {
+                        saveBtn.disabled = false;
+                        setTimeout(() => { saveStatus.innerHTML = ''; }, 3000);
+                    });
+                });
+            }
         });
     </script>
 </body>

save_diagram.php

@@ -0,0 +1,44 @@
+<?php
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+require_once 'db/config.php';
+
+header('Content-Type: application/json');
+
+$response = ['success' => false, 'message' => 'An unknown error occurred.'];
+
+try {
+    $data = json_decode(file_get_contents('php://input'), true);
+
+    if (json_last_error() !== JSON_ERROR_NONE) {
+        throw new Exception('Invalid JSON received. ' . json_last_error_msg());
+    }
+
+    if (isset($data['profile_id']) && isset($data['diagram_text'])) {
+        $profileId = $data['profile_id'];
+        $diagramText = $data['diagram_text'];
+
+        $pdo = db();
+
+        $stmt = $pdo->prepare("UPDATE gtm_profiles SET diagram_mermaid_text = :diagram_text WHERE id = :profile_id");
+
+        $stmt->bindValue(':diagram_text', $diagramText, PDO::PARAM_STR);
+        $stmt->bindValue(':profile_id', $profileId, PDO::PARAM_INT);
+
+        if ($stmt->execute()) {
+            $response['success'] = true;
+            $response['message'] = 'Diagram saved successfully.';
+        } else {
+            $errorInfo = $stmt->errorInfo();
+            $response['message'] = 'Failed to save diagram. DB Error: ' . ($errorInfo[2] ?? 'Unknown');
+        }
+    } else {
+        $response['message'] = 'Invalid input.';
+    }
+} catch (Exception $e) {
+    $response['message'] = 'Error: ' . $e->getMessage();
+}
+
+echo json_encode($response);