Changeset 3346700

Timestamp:

08/19/2025 02:06:48 AM (6 months ago)

Author:

infoforte

Message:

Version 1.4
Added content creation feature

Location:

lyxity/trunk

Files:

• README.md (modified) (1 diff)
• assets/css/dashboard.css (modified) (6 diffs)
• assets/css/realtime.css (added)
• assets/css/settings.css (modified) (1 diff)
• assets/images/lyxity_background.svg (added)
• assets/js/admin.js (modified) (13 diffs)
• assets/js/dashboard.js (modified) (1 diff)
• assets/js/main-page.js (modified) (18 diffs)
• assets/js/realtime-status.js (added)
• assets/js/settings.js (modified) (2 diffs)
• includes/class-lyxity-api.php (modified) (12 diffs)
• lyxity.php (modified) (12 diffs)
• readme.txt (modified) (2 diffs)
• templates/dashboard-page.php (modified) (2 diffs)
• templates/settings-page.php (modified) (1 diff)

lyxity/trunk/README.md

@@ -92 +92 @@
 
 ## Changelog
+### 1.4.0
+- Added content creation feature
 
 ### 1.3.0

lyxity/trunk/assets/css/dashboard.css

@@ -1 +1 @@
 .lyxity-dashboard {
-    background: #f8f9fa;
-    padding: 20px;
-    margin: 20px 20px 0 0;
-    border-radius: 8px;
+
+    background: #fff;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
 }
 
@@ -10 +11 @@
     padding-bottom: 20px;
     border-bottom: 1px solid #e9ecef;
+}
+
+/* Dashboard logo sizing (match realtime, keep aspect ratio) */
+.dashboard-header .dashboard-logo {
+    height: 56px;
+    width: auto;
+    margin-right: 12px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.dashboard-header .dashboard-logo img {
+    height: 100%;
+    width: auto;
+    display: block;
 }
 
@@ -35 +51 @@
     border-radius: 6px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.date-range-selector .form-control {
-    width: 160px;
-}
-
-.dashboard-stats {
+    width: 100%;
+}
+
+/* Ensure date inputs are properly sized on mobile */
+.date-range-selector input[type="date"] {
+    min-height: 38px;
+}
+
+/* Date picker styling handled by Bootstrap */
+
+/* Dashboard Container Layout */
+.lyxity-dashboard-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    margin-top: 16px;
+    margin-bottom: 24px;
+}
+
+.lyxity-dashboard-column {
+    flex: 1;
+    min-width: 300px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    overflow: hidden;
+}
+
+.lyxity-section-header {
+    background: #f8f9fa;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.lyxity-section-header h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #2c3338;
+}
+
+.lyxity-card-group {
+    padding: 16px;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-    margin-top: 30px;
-}
-
-.stat-card {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 16px;
+}
+
+/* Card Styling */
+.lyxity-card {
     background: white;
-    padding: 25px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+    padding: 14px 16px;
+    border-radius: 6px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
     transition: transform 0.2s ease;
     position: relative;
     overflow: hidden;
-}
-
-.stat-card:hover {
+    display: flex;
+    align-items: center;
+    min-height: 80px;
+    height: 100%;
+}
+
+.lyxity-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0,0,0,0.12);
 }
 
-.stat-card h3 {
-    font-size: 16px;
-    color: #50575e;
-    margin: 0 0 15px 0;
-    font-weight: 500;
-}
-
-.stat-card .number {
-    font-size: 36px;
+.lyxity-card-icon {
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    flex-shrink: 0;
+}
+
+.lyxity-card-icon i,
+.lyxity-card-icon .dashicons {
+    font-size: 18px;
+    color: #b19044;
+}
+
+.lyxity-card-content {
+    flex: 1;
+}
+
+.lyxity-card-number {
+    font-size: 24px;
     font-weight: 600;
     color: #2c3338;
-    margin-bottom: 10px;
-}
-
-.stat-card i {
-    font-size: 24px;
-    margin-bottom: 15px;
+    margin-bottom: 4px;
+    line-height: 1.2;
+}
+
+.lyxity-card-label {
+    font-size: 13px;
+    color: #50575e;
+    margin: 0 0 2px 0;
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+.lyxity-card-description {
+    font-size: 11px;
+    color: #6c757d;
+    margin: 0;
+    line-height: 1.3;
+}
+
+/* Card Color Styling */
+.update-card {
+    border-left: 3px solid #b19044;
+}
+
+.update-card .lyxity-card-icon i {
     color: #b19044;
 }
 
-.stat-card p {
-    font-size: 13px;
-    margin: 0;
-}
-
-.update-card {
-    border-left: 4px solid #b19044;
-}
-
 .enhance-card {
-    border-left: 4px solid #2271b1;
+    border-left: 3px solid #2271b1;
+}
+
+.enhance-card .lyxity-card-icon i {
+    color: #2271b1;
 }
 
 .stale-card {
-    border-left: 4px solid #dc3545;
-}
-
-.stale-card i {
+    border-left: 3px solid #dc3545;
+}
+
+.stale-card .lyxity-card-icon i {
     color: #dc3545;
+}
+
+.queued-card {
+    border-left: 3px solid #b19044;
+}
+
+.processing-card {
+    border-left: 3px solid #2271b1;
+}
+
+.completed-card {
+    border-left: 3px solid #00a32a;
+}
+
+.completed-card .lyxity-card-icon .dashicons {
+    color: #00a32a;
+}
+
+.failed-card {
+    border-left: 3px solid #dc3545;
+}
+
+.failed-card .lyxity-card-icon .dashicons {
+    color: #dc3545;
+}
+
+.generated-card {
+    border-left: 3px solid #6f42c1;
+}
+
+.generated-card .lyxity-card-icon .dashicons {
+    color: #6f42c1;
+}
+
+.pending-card {
+    border-left: 3px solid #17a2b8;
+}
+
+.pending-card .lyxity-card-icon .dashicons {
+    color: #17a2b8;
 }
 
@@ -118 +240 @@
     background-color: #f8f9fa;
     border-right: none;
-    font-size: 26px;  /* Increased from default to match textbox height */
+    font-size: 20px;  /* Adjusted for better mobile display */
     padding: 0 10px;  /* Adjusted padding for better alignment */
+    min-width: 40px;
+    justify-content: center;
 }
 
@@ -135 +259 @@
 }
 
+@media (max-width: 1200px) {
+    .lyxity-card-group {
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    }
+}
+
+@media (max-width: 992px) {
+    .lyxity-dashboard-container {
+        flex-direction: column;
+    }
+    
+    .lyxity-dashboard-column {
+        width: 100%;
+        margin-bottom: 16px;
+    }
+    
+    .lyxity-card-group {
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    }
+    
+    /* Date picker responsiveness handled by Bootstrap */
+}
+
 @media (max-width: 782px) {
     .lyxity-dashboard {
@@ -140 +287 @@
     }
     
-    .date-range-selector .d-flex {
+    .dashboard-header {
         flex-direction: column;
     }
     
-    .date-range-selector .form-control {
-        margin: 10px 0;
-    }
-    
-    .stat-card {
-        padding: 20px;
-    }
-}
+    /* Date picker responsiveness handled by Bootstrap */
+    
+    .lyxity-card {
+        padding: 12px 14px;
+    }
+    
+    .lyxity-card-group {
+        grid-template-columns: 1fr;
+    }
+    
+    .lyxity-card-number {
+        font-size: 20px;
+    }
+}
+
+/* Write Articles Card - Basic Styling */

lyxity/trunk/assets/css/settings.css

@@ -5 +5 @@
  */
 
-/* Import Libre Baskerville font from Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
+/* Clean Bootstrap-based styles */
 
-/* Apply font family only to elements within the settings page container */
-.lyxity-settings-wrap h1, 
-.lyxity-settings-wrap h2, 
-.lyxity-settings-wrap h3, 
-.lyxity-settings-wrap h4, 
-.lyxity-settings-wrap h5, 
-.lyxity-settings-wrap h6, 
-.lyxity-settings-wrap p, 
-.lyxity-settings-wrap input, 
-.lyxity-settings-wrap button, 
-.lyxity-settings-wrap select, 
-.lyxity-settings-wrap textarea {
-    font-family: 'Libre Baskerville', serif;
+/* Only minimal custom styling needed */
+.lyxity-settings-wrap {
+    margin: 20px 0 0 0;
+    max-width: 100%;
+    padding-right: 20px;
 }
 
-.lyxity-settings-wrap {
-    background-color: #f8f8f5;
-    /* padding: 20px; */
+.lyxity-settings-wrap .container-fluid {
     max-width: 100%;
-    position: relative;
-    overflow: hidden;
+    padding-right: 0;
 }
 
-/* Background images */
-.lyxity-settings-wrap:before, 
-.lyxity-settings-wrap:after {
-    content: "";
-    position: absolute;
-    width: 250px;
-    height: 250px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    opacity: 0.6;
-    z-index: 0;
+/* Using Bootstrap mb-4 class */
+
+/* No background images - clean UI */
+
+/* Using Bootstrap d-flex and align-items-center classes */
+
+/* Using Bootstrap img-fluid class */
+
+/* Keep gradient text effect but use Bootstrap classes for size and weight */
+.lyxity-text-logo {
+    background: linear-gradient(90deg, #4285f4, #34a853);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.lyxity-settings-wrap:before {
-    top: 20px;
-    left: 20px;
-    background-image: url('../images/HH_Background.svg');
-    background-position: top left;
+/* Using Bootstrap h1 and text-dark classes */
+
+
+/* No background images */
+
+/* Using Bootstrap card component instead */
+#lyxity-settings-form .card {
+    max-width: none !important;
+    width: 100%;
+    border: 1px solid rgba(0,0,0,.125);
 }
 
-.lyxity-settings-wrap:after {
-    bottom: 20px;
-    right: 20px;
-    background-image: url('../images/HH_Background.svg');
-    background-position: bottom right;
+#lyxity-settings-form .card-header {
+    padding-left: 0;
+    padding-right: 0;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
 }
 
-.lyxity-container {
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    /* max-width: 800px; */
-    margin: 20px;
-    position: relative;
-    z-index: 1;
+/* No background decorations - clean UI */
+
+/* Using Bootstrap spacing and typography classes */
+
+/* Using Bootstrap card and border utilities */
+
+/* Using Bootstrap row and col classes */
+/* Using Bootstrap img-fluid class */
+
+/* Using Bootstrap link classes */
+
+/* Using Bootstrap btn and btn-primary classes */
+
+/* Using Bootstrap form-group and form-control classes */
+
+/* Using Bootstrap img-fluid class */
+
+/* Using Bootstrap row and col-md-4 classes */
+
+/* Using Bootstrap responsive classes instead of custom media queries */
+
+/* Mobile responsive styles */
+@media (max-width: 782px) {
+    input.form-control {
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+    
+    .lyxity-settings-wrap {
+        margin: 10px 0 0 0;
+        padding-right: 10px;
+    }
+    
+    .card-body {
+        padding: 15px !important;
+    }
 }
 
-.lyxity-logo {
-    margin-bottom: 20px;
-    text-align: center;
+/* Using native Bootstrap utility classes instead */
+
+/* Using Bootstrap form-group and form-label classes */
+.form-group {
+    margin-bottom: 5px;
 }
 
-.lyxity-logo svg {
-    max-width: 180px;
-    height: auto;
+.form-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #23282d;
 }
 
-.lyxity-back {
-    display: block;
-    text-align: left;
-    margin-bottom: 15px;
-    text-decoration: none;
-    color: #333;
-    font-family: 'Libre Baskerville', serif;
+
+/* Using Bootstrap form-control class */
+
+/* Using Bootstrap form-select class */
+
+/* Minimal input group styles - using Bootstrap for most styling */
+
+
+/* Minimal button styles - using Bootstrap for most styling */
+
+/* Using Bootstrap btn and btn-primary classes instead */
+
+/* Using Bootstrap ms-2 class */
+
+/* Using Bootstrap hover effects */
+
+/* Using Bootstrap spacing and flex utilities */
+
+/* Using Bootstrap form-text utility */
+
+/* Using Bootstrap alert components instead */
+
+/* Using Bootstrap hover effects */
+.password-control{
+    width: unset !important;
 }
-
-.lyxity-btn-submit {
-    background-color: black;
-    color: white;
-    width: 100%;
-    padding: 10px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: bold;
-    font-family: 'Libre Baskerville', serif;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+.dashicons {
+    vertical-align: middle !important;
 }
-
-.lyxity-btn-submit:hover {
-    background-color: #333;
-}
-
-.lyxity-form-group {
-    margin-bottom: 20px;
-}
-
-.lyxity-form-control {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-family: 'Libre Baskerville', serif;
-}
-
-.lyxity-img {
-    max-width: 100px;
-    height: auto;
-    margin: 15px 0;
-}
-
-/* Settings page specific typography */
-.h4 {
-    font-family: 'Libre Baskerville', serif;
-    font-weight: 700;
-    margin-bottom: 15px;
-    font-size: 20px;
-}
-
-p {
-    font-family: 'Libre Baskerville', serif;
-    font-size: 14px;
-    line-height: 1.6;
-    color: #555;
-}
-
-/* Background image positioning */
-.lyxity-bg-top-left,
-.lyxity-bg-bottom-right {
-    position: absolute;
-    z-index: -1;
-    pointer-events: none;
-}
-
-.lyxity-bg-top-left {
-    top: 0;
-    left: 0;
-    max-width: 30%;
-    opacity: 0.7;
-}
-
-.lyxity-bg-bottom-right {
-    bottom: 0;
-    right: 0;
-    max-width: 30%;
-    opacity: 0.7;
-}
-
-/* Add the CSS from the settings page */
-.lyxity-input-group {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-.lyxity-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 8px;
-    color: #555;
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 10;
-}
-
-.lyxity-btn:hover {
-    color: #b19044;
-}

lyxity/trunk/assets/js/admin.js

@@ -1 +1 @@
 jQuery(document).ready(function($) {
-    console.log("Lyxity plugin initialized");
-    
-    // Debug info for buttons
-    if ($(".update-single-post").length) {
-        console.log("Found " + $(".update-single-post").length + " update buttons");
-    } else {
-        console.log("No update buttons found on page");
-    }
-
+    
     // Attach click handlers directly
     $(document).on("click", ".update-single-post", function(e) {
         e.preventDefault();
-        console.log("Update button clicked");
         handleUpdateButtonClick($(this));
     });
@@ -18 +9 @@
     $(document).on("click", ".rewrite-single-post", function(e) {
         e.preventDefault();
-        console.log("Rewrite button clicked");
         handleRewriteButtonClick($(this));
     });
     
     function handleAjaxError(xhr, status, error, button, type) {
-        console.error("AJAX request failed:", error);
-        console.log(xhr.responseText);
         var messages = {
             update: lyxityVars.i18n.updateError,
@@ -44 +32 @@
     function handleUpdateButtonClick(button) {
         const postId = button.data("post-id");
-        console.log("Processing update for post ID: " + postId);
         
         button.attr("disabled", true)
@@ -58 +45 @@
             },
             success: function(response) {
-                console.log("AJAX response received", response);
                 if (response.success) {
                     const data = response.data;
@@ -64 +50 @@
                 } else {
                     alertify.error(lyxityVars.i18n.updateError);
-                    console.error("Error response:", response);
                 }
                 
@@ -78 +63 @@
     function handleRewriteButtonClick(button) {
         const postId = button.data("post-id");
-        console.log("Processing rewrite for post ID: " + postId);
         
         button.attr("disabled", true)
@@ -92 +76 @@
             },
             success: function(response) {
-                console.log("AJAX response received", response);
                 if (response.success) {
                     const data = response.data;
@@ -98 +81 @@
                 } else {
                     alertify.error(lyxityVars.i18n.rewriteError);
-                    console.error("Error response:", response);
                 }
                 
@@ -111 +93 @@
     
     function showUpdatePreviewModal(postId, data) {
-        console.log("Showing update preview modal for post ID: " + postId);
         const modal = $("#update-preview-modal");
         
@@ -139 +120 @@
     
     function showRewritePreviewModal(postId, data) {
-        console.log("Showing rewrite preview modal for post ID: " + postId);
         const modal = $("#rewrite-preview-modal");
         
@@ -168 +148 @@
     $(document).on('click', '.modal .btn-close, .modal .btn-secondary[data-bs-dismiss="modal"]', function() {
         const modalEl = $(this).closest('.modal')[0];
-        console.log('Closing modal with Bootstrap 5:', modalEl.id);
         const modalInstance = bootstrap.Modal.getInstance(modalEl);
         if (modalInstance) {
@@ -178 +157 @@
     $(document).on("click", ".apply-update", function(e) {
         e.preventDefault();
-        console.log("Apply update button clicked");
         const modal = $("#update-preview-modal");
         const postId = modal.data("post-id");
@@ -222 +200 @@
     $(document).on("click", ".apply-rewrite", function(e) {
         e.preventDefault();
-        console.log("Apply rewrite button clicked");
         const modal = $("#rewrite-preview-modal");
         const postId = modal.data("post-id");

lyxity/trunk/assets/js/dashboard.js

@@ -53 +53 @@
             },
             success: function(response) {
-                console.log(response);
                 if(response.result){
                     $('#update-count').text(response.updates);
                     $('#enhance-count').text(response.rewrites);
-                } else {
-                    console.error('API returned false result');
                 }
             },
             error: function() {
-                console.error('Error calling lyxity_get_dashboard_data_v2');
+                // Error handled silently
             }
         });

lyxity/trunk/assets/js/main-page.js

@@ -43 +43 @@
             function() {
                 $.ajax({
-                    url: ajaxurl,
+                    url: lyxityVars.ajaxUrl,
                     type: 'POST',
                     data: {
@@ -74 +74 @@
             function() {
                 $.ajax({
-                    url: ajaxurl,
+                    url: lyxityVars.ajaxUrl,
                     type: 'POST',
                     data: {
@@ -137 +137 @@
         
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -197 +197 @@
         
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -250 +250 @@
     $(document).on('click', '.modal .btn-close, .modal .btn-secondary[data-bs-dismiss="modal"]', function() {
         const modalEl = $(this).closest('.modal')[0];
-        console.log('Closing modal with Bootstrap 5:', modalEl.id);
         const modalInstance = bootstrap.Modal.getInstance(modalEl);
         if (modalInstance) {
@@ -269 +268 @@
 
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -311 +310 @@
 
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -333 +332 @@
                     // Redirect to WordPress editor
                     if (response.edit_url) {
-                        console.log('Redirecting to:', response.edit_url);
                         window.location.href = response.edit_url;
-                    } else {
-                        console.error('No edit_url in response');
                     }
                 } else {
-                    console.error('Error in response:', response.message);
                     alertify.error(response.message || lyxityVars.i18n.updateError);
                     button.attr('disabled', false)
@@ -364 +359 @@
 
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -395 +390 @@
     // Apply rewrite and edit button click
     $(document).on('click', '.apply-rewrite-and-edit', function() {
-        console.log('Enhance and Edit button clicked');
         const modal = $('#rewrite-preview-modal');
         const postId = modal.data('post-id');
@@ -401 +395 @@
         const button = $(this);
         
-        console.log('Post ID:', postId);
-        console.log('Content available:', !!content);
-
         button.attr('disabled', true)
               .html('<i class="fas fa-spinner fa-spin"></i> ' + lyxityVars.i18n.applying);
 
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -417 +408 @@
             },
             success: function(response) {
-                console.log('AJAX response received:', response);
                 if (response.success) {
-                    console.log('Success response, edit URL:', response.edit_url);
                     alertify.success('Content enhanced successfully');
                     
@@ -431 +420 @@
                     // Redirect to WordPress editor
                     if (response.edit_url) {
-                        console.log('Redirecting to:', response.edit_url);
                         window.location.href = response.edit_url;
                     } else {
-                        console.error('No edit_url in response');
                     }
                 } else {
-                    console.error('Error in response:', response.message);
                     alertify.error(response.message || lyxityVars.i18n.updateError);
                     button.attr('disabled', false)
@@ -454 +440 @@
     function processUpdates(offset = 0) {
         $.ajax({
-            url: ajaxurl,
+            url: lyxityVars.ajaxUrl,
             type: 'POST',
             data: {
@@ -484 +470 @@
                     }
                 } else {
-                    console.error('Error:', response.data);
                     alertify.error(lyxityVars.i18n.processingError);
                     $('#start-update').attr('disabled', false);
@@ -490 +475 @@
             },
             error: function(xhr, status, error) {
-                console.error('AJAX Error:', error);
-                console.log(xhr.responseText);
                 alertify.error(lyxityVars.i18n.processingErrorDetails);
                 $('#start-update').attr('disabled', false);
@@ -500 +483 @@
     // Helper function for AJAX errors
     function handleAjaxError(xhr, status, error, button, type) {
-        console.error("AJAX request failed:", error);
-        console.log(xhr.responseText);
         var messages = {
             update: lyxityVars.i18n.updateError,
@@ -524 +505 @@
     });
 
+    // Write Articles functionality
+    let suggestedKeywords = [];
+    
+    // Handle keyword source selection
+    function handleKeywordSourceChange() {
+        const selectedValue = $('input[name="keyword-source"]:checked').val();
+        
+        if (selectedValue === 'suggested') {
+            $('#suggested-keywords-section').show();
+            $('#manual-keyword-section').hide();
+            // Auto-fetch keywords when AI Suggested is selected
+            fetchSuggestedKeywords();
+        } else if (selectedValue === 'manual') {
+            $('#suggested-keywords-section').hide();
+            $('#manual-keyword-section').show();
+        } else {
+            $('#suggested-keywords-section').hide();
+            $('#manual-keyword-section').hide();
+        }
+        
+        // Reset and hide article generation section
+        $('#article-generation-section').hide();
+        $('#final-keyword').val('');
+        $('#write-articles-btn').prop('disabled', true);
+        $('#metrics-column').hide();
+    }
+    
+    // Store the currently selected keyword text
+    let currentSelectedKeyword = '';
+    
+    // Handle keyword selection from dropdown or manual input
+    function handleKeywordSelection(keyword) {
+        if (keyword) {
+            // Extract keyword text if it's an object
+            const keywordText = typeof keyword === 'object' && keyword.keyword ? keyword.keyword : keyword;
+            
+            // Store the keyword text in our variable
+            currentSelectedKeyword = keywordText;
+            
+            // Show article generation section
+            document.getElementById('article-generation-section').style.display = 'block';
+            document.getElementById('write-articles-btn').disabled = false;
+            
+            // Show the entire metrics column
+            document.getElementById('metrics-column').style.display = 'block';
+            
+            // Fetch and display keyword metrics
+            fetchKeywordMetrics(keyword);
+        } else {
+            // Clear selected keyword
+            currentSelectedKeyword = '';
+            
+            // Hide article generation section
+            document.getElementById('article-generation-section').style.display = 'none';
+            document.getElementById('write-articles-btn').disabled = true;
+            
+            // Hide the entire metrics column
+            document.getElementById('metrics-column').style.display = 'none';
+        }
+    }
+    
+    // Function to fetch suggested keywords
+    function fetchSuggestedKeywords() {
+        const $select = $('#keywords-select');
+        const $loadingDiv = $('#keywords-loading');
+        const $errorDiv = $('#keywords-error');
+        
+        // Show loading state
+        $select.html('<option value="">Loading keywords...</option>').prop('disabled', true);
+        $loadingDiv.show();
+        $errorDiv.hide();
+        
+        $.ajax({
+            url: lyxityVars.ajaxUrl,
+            type: 'POST',
+            data: {
+                action: 'lyxity_get_suggested_keywords',
+                nonce: lyxityVars.nonce
+            },
+            success: function(response) {
+                
+                if (response.success) {
+                    let keywordsData = response.data.suggestedKeywords;
+                    
+                    if (keywordsData && keywordsData.length > 0) {
+                        suggestedKeywords = keywordsData;
+                        populateKeywordsDropdown(keywordsData);
+                        $select.prop('disabled', false);
+                        $loadingDiv.hide();
+                    } else {
+                        showKeywordsError('No keywords found in response');
+                    }
+                } else {
+                    const errorMessage = (response.data && response.data.message) || response.message || 'Failed to fetch keywords';
+                    showKeywordsError(errorMessage);
+                }
+            },
+            error: function(xhr, status, error) {
+                showKeywordsError('Error fetching keywords. Please try again.');
+            },
+            complete: function() {
+                $loadingDiv.hide();
+            }
+        });
+    }
+    
+    // Function to populate keywords dropdown
+    function populateKeywordsDropdown(keywords) {
+        const $select = $('#keywords-select');
+        $select.empty().append('<option value="">Choose a keyword...</option>');
+        
+        keywords.forEach(function(keyword) {
+            $select.append(`<option value="${keyword.keyword}">${keyword.keyword}</option>`);
+        });
+    }
+    
+    // Function to show keywords error
+    function showKeywordsError(message) {
+        $('#keywords-select').html('<option value="">Error loading keywords</option>').prop('disabled', true);
+        $('#keywords-error-message').text(message);
+        $('#keywords-error').show();
+        $('#keywords-loading').hide();
+    }
+    
+    // Function to fetch and display keyword metrics
+    function fetchKeywordMetrics(selectedKeyword) {
+        // Find the keyword data from the suggestedKeywords array
+        const keywordData = suggestedKeywords.find(k => k.keyword === selectedKeyword);
+        
+        if (keywordData) {
+            // Populate metrics with data from the keyword object
+            $('#metric-clicks').text(keywordData.clicks || '0');
+            $('#metric-impressions').text(keywordData.impressions || '0');
+            $('#metric-position').text(keywordData.position ? parseFloat(keywordData.position).toFixed(1) : '0.0');
+            $('#metric-ctr').text(keywordData.ctr ? (parseFloat(keywordData.ctr) * 100).toFixed(2) : '0.00');
+            $('#metric-score').text(keywordData.score || 'N/A');
+            $('#metric-recommendation').text(keywordData.recommendation || 'No recommendation available');
+        } else {
+            // If no data found, show default values
+            $('#metric-clicks').text('0');
+            $('#metric-impressions').text('0');
+            $('#metric-position').text('0.0');
+            $('#metric-ctr').text('0.00');
+            $('#metric-score').text('N/A');
+            $('#metric-recommendation').text('No data available for this keyword');
+        }
+    }
+    
+    // Add event listeners to radio buttons
+    $('input[name="keyword-source"]').on('change', handleKeywordSourceChange);
+    
+    // Handle dropdown selection
+    $('#keywords-select').on('change', function() {
+        const selectedKeyword = $(this).val();
+        handleKeywordSelection(selectedKeyword);
+    });
+    
+    // Handle manual keyword input
+    $('#manual-keyword-input').on('input', function() {
+        const keyword = $(this).val().trim();
+        handleKeywordSelection(keyword);
+    });
+    
+    // Legacy fetch keywords button click (if still exists)
+    $('#fetch-keywords-btn').on('click', function() {
+        const button = $(this);
+        const originalText = button.html();
+        
+        // Show loading state
+        button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Fetching...');
+        $('#keywords-loading').show();
+        $('#keywords-error').hide();
+        $('#keywords-dropdown-section').hide();
+        
+        $.ajax({
+            url: lyxityVars.ajaxUrl,
+            type: 'POST',
+            data: {
+                action: 'lyxity_get_suggested_keywords',
+                nonce: lyxityVars.nonce
+            },
+            success: function(response) {
+                
+                if (response.success) {
+                    // The API returns data directly with suggestedKeywords at root level
+                    let keywordsData = response.data.suggestedKeywords;
+                    
+                    if (keywordsData && keywordsData.length > 0) {
+                        suggestedKeywords = keywordsData;
+                        populateKeywordsDropdown(keywordsData);
+                        $('#keywords-dropdown-section').show();
+                        $('#keywords-loading').hide();
+                        
+                        // Show success message with keyword count
+                    } else {
+                        showKeywordsError('No keywords found in response');
+                    }
+                } else {
+                    const errorMessage = (response.data && response.data.message) || response.message || 'Failed to fetch keywords';
+                    showKeywordsError(errorMessage);
+                }
+            },
+            error: function(xhr, status, error) {
+                showKeywordsError('Error fetching keywords. Please try again.');
+            },
+            complete: function() {
+                button.prop('disabled', false).html(originalText);
+                $('#keywords-loading').hide();
+            }
+        });
+    });
+    
+    // Populate keywords dropdown
+    function populateKeywordsDropdown(keywords) {
+        const select = $('#keywords-select');
+        select.empty().append('<option value="">Choose a keyword...</option>');
+        
+        
+        keywords.forEach(function(keyword, index) {
+            // Create a more informative option text
+            const optionText = keyword.keyword + 
+                ' (Score: ' + Math.round(keyword.opportunityScore) + 
+                ', Pos: ' + keyword.metrics.averagePosition.toFixed(1) + 
+                ', Clicks: ' + keyword.metrics.totalClicks + ')';
+            
+            const option = $('<option></option>')
+                .attr('value', index)
+                .text(optionText);
+            select.append(option);
+            
+        });
+        
+    }
+    
+    // Keyword selection change
+    $('#keywords-select').on('change', function() {
+        const selectedIndex = $(this).val();
+        
+        if (selectedIndex === '') {
+            handleKeywordSelection(null); // Clear keyword selection
+            return;
+        }
+        
+        const selectedKeyword = suggestedKeywords[selectedIndex];
+        handleKeywordSelection(selectedKeyword); // Use the handleKeywordSelection function
+        
+        // Update metrics display
+        $('#metric-clicks').text(selectedKeyword.metrics.totalClicks.toLocaleString());
+        $('#metric-impressions').text(selectedKeyword.metrics.totalImpressions.toLocaleString());
+        $('#metric-position').text(selectedKeyword.metrics.averagePosition.toFixed(1));
+        $('#metric-ctr').text(selectedKeyword.metrics.averageCtr.toFixed(2));
+        $('#metric-score').text(Math.round(selectedKeyword.opportunityScore));
+        $('#metric-recommendation').text(selectedKeyword.recommendation);
+        
+        $('#keyword-details').show();
+    });
+    
+    // Write articles button click
+    $('#write-articles-btn').on('click', function() {
+        const keywordValue = currentSelectedKeyword; // Use our variable instead of input field
+        const articleCount = parseInt($('#article-count').val());
+        const articleStatus = $('#article-status').val();
+        const ctaLink = $('#cta-link').val().trim();
+        const ctaCaption = $('#cta-caption').val().trim();
+        
+        
+        if (!keywordValue) {
+            alertify.error('Please select a keyword first.');
+            return;
+        }
+        
+        if (!articleCount || articleCount < 1 || articleCount > 10) {
+            alertify.error('Please enter a valid number of articles (1-10).');
+            return;
+        }
+        
+        // Validate CTA link and caption - if link is provided but caption is not, show error
+        if (ctaLink && !ctaCaption) {
+            alertify.error('Please provide a caption for your Call to Action link.');
+            return;
+        }
+        
+        // Show confirmation dialog
+        alertify.confirm(
+            'Write Articles',
+            'Are you sure you want to write ' + articleCount + ' article(s) for the keyword "' + keywordValue + '"?',
+            function() {
+                // User confirmed - submit data to API
+                const $button = $('#write-articles-btn');
+                const originalText = $button.html();
+                
+                // Show loading state
+                $button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');
+                
+                // Get API key from plugin settings
+                const apiKey = lyxityVars.apiKey || '';
+                
+                // Get site URL
+                const siteUrl = lyxityVars.siteUrl || window.location.origin;
+                
+                // Prepare data in the required format
+                const requestData = {
+                    Keywords: keywordValue, // Use the keywordValue string directly
+                    NumberOfArticles: articleCount,
+                    SiteUrl: siteUrl,
+                    ClickToActionText: ctaCaption,
+                    ClickToActionLink: ctaLink,
+                    ApiKey: apiKey,
+                    ArticleStatus: articleStatus
+                };
+                
+                
+                // Make request via WordPress AJAX to proxy through PHP
+                $.ajax({
+                    url: lyxityVars.ajaxUrl,
+                    type: 'POST',
+                    data: {
+                        action: 'lyxity_generate_articles',
+                        nonce: lyxityVars.nonce,
+                        keywords: requestData.Keywords,
+                        number_of_articles: requestData.NumberOfArticles,
+                        site_url: requestData.SiteUrl,
+                        cta_text: requestData.ClickToActionText,
+                        cta_link: requestData.ClickToActionLink
+                    },
+                    success: function(response) {
+                        // Show a single white-background message per requirements
+                        
+                        alertify.success('Article is being generated in background, you can track progress using Dashboard.');
+                    },
+                    error: function(xhr, status, error) {
+                        alertify.error('Error generating articles: ' + (xhr.responseJSON?.message || error || 'Unknown error'));
+                    },
+                    complete: function() {
+                        // Restore button state
+                        $button.prop('disabled', false).html(originalText);
+                    }
+                });
+            },
+            function() {
+                // User cancelled
+            }
+        );
+    });
+    
+    // Show keywords error
+    function showKeywordsError(message) {
+        $('#keywords-error-message').text(message);
+        $('#keywords-error').show();
+        $('#keywords-dropdown-section').hide();
+        $('#keywords-loading').hide();
+    }
+
     // Update select all checkbox when individual checkboxes change
     $(document).on('change', '.post-checkbox', function() {

lyxity/trunk/assets/js/settings.js

@@ -1 +1 @@
 
 
+/**
+ * Settings page JavaScript
+ *
+ * @package Lyxity
+ */
+
 document.addEventListener('DOMContentLoaded', function() {
-    // Toggle password visibility
+    // Toggle API key visibility
     document.getElementById('toggle-password-visibility').addEventListener('click', function(e) {
         e.preventDefault();
@@ -18 +24 @@
         }
     });
+    
+    // Toggle WordPress password visibility
+    if (document.getElementById('toggle-wp-password-visibility')) {
+        document.getElementById('toggle-wp-password-visibility').addEventListener('click', function(e) {
+            e.preventDefault();
+            const passwordField = document.getElementById('lyxity_wp_password');
+            const toggleIcon = this.querySelector('.dashicons');
+            
+            if (passwordField.type === 'password') {
+                passwordField.type = 'text';
+                toggleIcon.classList.remove('dashicons-visibility');
+                toggleIcon.classList.add('dashicons-hidden');
+            } else {
+                passwordField.type = 'password';
+                toggleIcon.classList.remove('dashicons-hidden');
+                toggleIcon.classList.add('dashicons-visibility');
+            }
+        });
+    }
+    
+    // Handle settings form submission
+    const settingsForm = document.getElementById('lyxity-settings-form');
+    if (settingsForm) {
+        settingsForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // Get form data
+            const apiKey = document.getElementById('lyxity_api_key').value;
+            const wpApiUrl = document.getElementById('lyxity_wp_api_url').value;
+            const wpUsername = document.getElementById('lyxity_wp_username').value;
+            const wpPassword = document.getElementById('lyxity_wp_password').value;
+            const articleStatus = document.getElementById('lyxity_article_status').value;
+            const articleLength = document.getElementById('lyxity_article_length').value;
+            const defaultLanguage = document.getElementById('lyxity_default_language').value;
+            
+            // Get site URL
+            const siteUrl = window.location.origin;
+            
+            // Show loading state
+            const submitButton = document.getElementById('lyxity-settings-submit');
+            const originalButtonText = submitButton.innerHTML;
+            submitButton.disabled = true;
+            submitButton.innerHTML = '<span class="dashicons dashicons-update-alt"></span> Saving...';
+            
+            // Prepare data for API
+            const data = {
+                action: 'lyxity_save_settings',
+                nonce: document.getElementById('lyxity_settings_nonce').value,
+                api_key: apiKey,
+                wp_api_url: wpApiUrl,
+                wp_username: wpUsername,
+                wp_password: wpPassword,
+                article_status: articleStatus,
+                article_length: articleLength,
+                default_language: defaultLanguage,
+                site_url: siteUrl
+            };
+            
+            // Send AJAX request
+            jQuery.post(ajaxurl, data, function(response) {
+                // Display response
+                const responseDiv = document.getElementById('settings-response');
+                responseDiv.style.display = 'block';
+                
+                if (response.success) {
+                    // Ensure we're using success class for successful responses
+                    responseDiv.className = 'lyxity-form-response error';
+                    responseDiv.innerHTML = '<p>' + response.data.message + '</p>';
+                    
+                } else {
+                    responseDiv.className = 'lyxity-form-response error';
+                    responseDiv.innerHTML = '<p>' + response.data.message + '</p>';
+                }
+                
+                // Restore button state
+                submitButton.innerHTML = originalButtonText;
+                submitButton.disabled = false;
+                
+                // Scroll to response
+                responseDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                
+                // Hide response after 5 seconds
+                setTimeout(function() {
+                    if (response.success) {
+                        jQuery(responseDiv).fadeOut();
+                    }
+                }, 5000);
+            }).fail(function(xhr, status, error) {
+                // Handle AJAX failure
+                const responseDiv = document.getElementById('settings-response');
+                responseDiv.style.display = 'block';
+                responseDiv.className = 'lyxity-form-response error';
+                responseDiv.innerHTML = '<p>Error saving settings. Please try again.</p>';
+                
+                // Restore button state
+                submitButton.innerHTML = originalButtonText;
+                submitButton.disabled = false;
+                
+                // Scroll to response
+                responseDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            });
+        });
+    }
+    
+    // Handle API key update button
+    const updateApiKeyButton = document.getElementById('update-api-key');
+    if (updateApiKeyButton) {
+        updateApiKeyButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            const apiKey = document.getElementById('lyxity_api_key').value.trim();
+            
+            if (!apiKey) {
+                alertify.error('Please enter an API key.');
+                return;
+            }
+            
+            // Show loading state
+            const originalButtonText = this.innerHTML;
+            this.disabled = true;
+            this.innerHTML = '<span class="dashicons dashicons-update-alt"></span> Updating...';
+            
+            // Prepare data for AJAX
+            const data = {
+                action: 'lyxity_save_api_key',
+                nonce: document.getElementById('lyxity_settings_nonce').value,
+                api_key: apiKey
+            };
+            
+            // Send AJAX request
+            jQuery.post(ajaxurl, data, function(response) {
+                if (response.success) {
+                    alertify.success(response.data.message || 'API key updated successfully!');
+                } else {
+                    alertify.error(response.data.message || 'Failed to update API key.');
+                }
+                
+                // Restore button state
+                updateApiKeyButton.innerHTML = originalButtonText;
+                updateApiKeyButton.disabled = false;
+            }).fail(function(xhr, status, error) {
+                alertify.error('Error updating API key. Please try again.');
+                
+                // Restore button state
+                updateApiKeyButton.innerHTML = originalButtonText;
+                updateApiKeyButton.disabled = false;
+            });
+        });
+    }
+    
+    // Add focus effects to form fields
+    const formControls = document.querySelectorAll('.lyxity-form-control');
+    formControls.forEach(function(control) {
+        control.addEventListener('focus', function() {
+            this.closest('.lyxity-form-group').classList.add('is-focused');
+        });
+        
+        control.addEventListener('blur', function() {
+            this.closest('.lyxity-form-group').classList.remove('is-focused');
+        });
+    });
 });

lyxity/trunk/includes/class-lyxity-api.php

@@ -14 +14 @@
      * API endpoint
      */
+
     private $api_endpoint = 'https://lyxity.com/api/';
+    
     /**
      * Request timeout in seconds
@@ -29 +31 @@
     /**
      * Make API request
-     */
-    private function make_request($endpoint, $data = array()) {
+     * 
+     * @param string $endpoint API endpoint
+     * @param array $data Request data
+     * @return array|WP_Error Response array or WP_Error on failure
+     */
+    public function make_request($endpoint, $data = array()) {
+            
         $api_key = $this->get_api_key();
         if (empty($api_key)) {
@@ -38 +45 @@
         $url = $this->api_endpoint . $endpoint;
 
+        // Determine if we're using a local/dev environment based on the API endpoint
+        $is_dev_environment = (strpos($this->api_endpoint, 'localhost') !== false || strpos($this->api_endpoint, '127.0.0.1') !== false);
+        
         $args = array(
             'headers' => array(
@@ -52 +62 @@
             'curl_timeout' => $this->timeout
         );
-
-
+        
 
         $response = wp_remote_post($url, $args);
@@ -63 +72 @@
         $status = wp_remote_retrieve_response_code($response);
         $body = wp_remote_retrieve_body($response);
+        
 
         $decoded = json_decode($body, true);
@@ -69 +79 @@
             return new WP_Error('json_decode_error', 'Failed to decode API response');
         }
+
 
         return $decoded;
@@ -81 +92 @@
      * @return array|WP_Error Response array or WP_Error on failure
      */
+    /**
+     * Get site settings from the API
+     * 
+     * @return array|WP_Error Response array or WP_Error on failure
+     */
+    public function get_settings() {
+        
+        $site_url = get_site_url();
+        $api_key = $this->get_api_key();
+        
+        $data = array(
+            'siteUrl' => $site_url,
+            'apiKey' => $api_key
+        );
+        
+        
+        $result = $this->make_request('site/getsettings', $data);
+        
+        
+        return $result;
+    }
+    
     public function log_content_update($page_url, $appended_content, $update_type = 1) {
 
@@ -105 +138 @@
 
 
+        // Determine if we're using a local/dev environment based on the API endpoint
+        $is_dev_environment = (strpos($this->api_endpoint, 'localhost') !== false || strpos($this->api_endpoint, '127.0.0.1') !== false);
+        
         $args = array(
             'method'  => 'POST',
@@ -114 +150 @@
             'sslverify' => true
         );
+        
 
         $response = wp_remote_post($endpoint_url, $args);
@@ -123 +160 @@
         $response_code = wp_remote_retrieve_response_code($response);
         $body = wp_remote_retrieve_body($response);
+        
 
         $data = json_decode($body, true);
@@ -463 +501 @@
 
     /**
+     * Generate articles via Lyxity API
+     *
+     * @param array $data Payload including Keys: Keywords, NumberOfArticles, SiteUrl, ClickToActionText, ClickToActionLink
+     * @return array|WP_Error
+     */
+    public function generate_articles($data = array()) {
+        // Basic validation
+        if (empty($data['Keywords']) || empty($data['NumberOfArticles'])) {
+            return new WP_Error('missing_params', 'Keywords and NumberOfArticles are required');
+        }
+        // Ensure ApiKey is included in payload as required by API
+        $api_key = $this->get_api_key();
+        if (empty($api_key)) {
+            return new WP_Error('missing_api_key', 'API key is not configured');
+        }
+        // API expects 'ApiKey' in the body (note casing)
+        $data['ApiKey'] = $api_key;
+        return $this->make_request('articles/generate', $data);
+    }
+
+    /**
+     * Get real-time status for article generation requests.
+     *
+     * Expected $params keys (casing per API):
+     *  - SiteUrl (required)
+     *  - RequestId (optional)
+     *  - PageSize (optional)
+     *  - Page (optional)
+     *
+     * @param array $params
+     * @return array|WP_Error
+     */
+    public function get_realtime_status($params = array()) {
+        
+        $api_key = $this->get_api_key();
+        if (empty($api_key)) {
+            return new WP_Error('missing_api_key', 'API key is not configured');
+        }
+        if (empty($params['SiteUrl'])) {
+            $params['SiteUrl'] = get_site_url();
+        }
+        $payload = array(
+            'ApiKey' => $api_key,
+            'SiteUrl' => $params['SiteUrl'],
+        );
+        if (!empty($params['RequestId'])) {
+            $payload['RequestId'] = (int) $params['RequestId'];
+        }
+        if (!empty($params['PageSize'])) {
+            $payload['PageSize'] = max(1, (int) $params['PageSize']);
+        }
+        if (!empty($params['Page'])) {
+            $payload['Page'] = max(1, (int) $params['Page']);
+        }
+        
+        
+        $result = $this->make_request('articles/realtime', $payload);
+        
+        
+        return $result;
+    }
+
+    /**
      * Update content for a Gutenberg post
      *
@@ -577 +678 @@
         return $this->make_request('Dashboard/GetDashboardDataV2', $data);
     }
+
+    /**
+     * Get suggested keywords from the API
+     *
+     * @return array|WP_Error Response array or WP_Error on failure
+     */
+    public function get_suggested_keywords() {
+        
+        $site_url = get_site_url();
+        $api_key = $this->get_api_key();
+        
+        
+        $data = array(
+            'siteUrl' => $site_url,
+            'apiKey' => $api_key
+        );
+        
+        
+        $result = $this->make_request('articles/suggestkeyword', $data);
+        
+        
+        return $result;
+    }
 }

lyxity/trunk/lyxity.php

@@ -3 +3 @@
 Plugin Name: Lyxity
 Description: The art of modern search engine optimization
-Version: 1.3.0
+Version: 1.4.0
 Author: Infoforte
 Author URI: https://infoforte.com
@@ -20 +20 @@
 
 // Define plugin constants
-define('LYXITY_VERSION', '1.3.0');
+define('LYXITY_VERSION', '1.4.0');
 define('LYXITY_FILE', __FILE__);
 define('LYXITY_PATH', plugin_dir_path(__FILE__));
 define('LYXITY_URL', plugin_dir_url(__FILE__));
-define('LYXITY_DEBUG', true); // Set to false in production
+define('LYXITY_DEBUG', false); // Disabled for production
 
 // Remove the logger class include
@@ -68 +68 @@
         add_action('wp_ajax_lyxity_schedule_bulk_rewrite', array($this, 'ajax_schedule_bulk_rewrite'));
         
+        // Add AJAX handlers for settings
+        add_action('wp_ajax_lyxity_save_settings', array($this, 'ajax_save_settings'));
+        add_action('wp_ajax_lyxity_save_api_key', array($this, 'ajax_save_api_key'));
+        add_action('wp_ajax_lyxity_get_suggested_keywords', array($this, 'ajax_get_suggested_keywords'));
+        // New: Generate articles via Lyxity API
+        add_action('wp_ajax_lyxity_generate_articles', array($this, 'ajax_generate_articles'));
+        // New: Real-time status proxy
+        add_action('wp_ajax_lyxity_realtime_status', array($this, 'ajax_realtime_status'));
+        
         // Add cron hooks
         add_action('lyxity_bulk_update_cron', array($this, 'process_bulk_update'), 10, 1);
@@ -101 +110 @@
         
         // Add dashboard-specific styles
+
+        if (strpos($hook, 'hazel-harlow-dashboard') !== false || strpos($hook, 'Lyxity-dashboard') !== false) {
+            wp_enqueue_style('hazel-dashboard', LYXITY_URL . 'assets/css/dashboard.css', array(), LYXITY_VERSION);
+            // Also load realtime styles on Dashboard (merged view)
+            wp_enqueue_style('lyxity-realtime-status', LYXITY_URL . 'assets/css/realtime.css', array(), LYXITY_VERSION);
+        }
+        
+        // Add real-time status page styles
+        if (strpos($hook, 'Lyxity-realtime') !== false) {
+            wp_enqueue_style('lyxity-realtime-status', LYXITY_URL . 'assets/css/realtime.css', array(), LYXITY_VERSION);
+        }
+
         if (strpos($hook, 'lyxity-dashboard') !== false || strpos($hook, 'Lyxity-dashboard') !== false) {
             wp_enqueue_style('lyxity-dashboard', LYXITY_URL . 'assets/css/dashboard.css', array(), LYXITY_VERSION);
@@ -115 +136 @@
         wp_register_script('bootstrap-js', LYXITY_URL . 'assets/js/vendor/bootstrap.bundle.min.js', array('jquery', 'popper-js'), '5.3.5', true);
         wp_register_script('alertify-js', LYXITY_URL . 'assets/js/vendor/alertify.min.js', array('jquery'), '1.14.0', true);
+        wp_register_script('hazel-harlow-admin', LYXITY_URL . 'assets/js/admin.js', array('jquery', 'bootstrap-js', 'alertify-js'), LYXITY_VERSION, true);
+        wp_register_script('hazel-main-page-js', LYXITY_URL . 'assets/js/main-page.js', array('jquery', 'bootstrap-js', 'alertify-js'), LYXITY_VERSION, true);
+        // New: Real-time Status page script
+        wp_register_script('lyxity-realtime-status-js', LYXITY_URL . 'assets/js/realtime-status.js', array('jquery', 'bootstrap-js', 'alertify-js'), LYXITY_VERSION, true);
         wp_register_script('lyxity-admin', LYXITY_URL . 'assets/js/admin.js', array('jquery', 'bootstrap-js', 'alertify-js'), LYXITY_VERSION, true);
         wp_register_script('lyxity-main-page-js', LYXITY_URL . 'assets/js/main-page.js', array('jquery', 'bootstrap-js', 'alertify-js'), LYXITY_VERSION, true);
@@ -132 +157 @@
         }
         
+
+        if (strpos($hook, 'hazel-harlow-dashboard') !== false || strpos($hook, 'Lyxity-dashboard') !== false) {
+            wp_enqueue_script('hazel-dashboard-js', LYXITY_URL . 'assets/js/dashboard.js', array('jquery'), LYXITY_VERSION, true);
+            // Also load realtime script on Dashboard (merged view)
+            wp_enqueue_script('lyxity-realtime-status-js');
+        }
+        // Enqueue real-time status page assets
+        if (strpos($hook, 'Lyxity-realtime') !== false) {
+            wp_enqueue_script('lyxity-realtime-status-js');
+        }
+
         if (strpos($hook, 'lyxity-dashboard') !== false || strpos($hook, 'Lyxity-dashboard') !== false) {
             wp_enqueue_script('lyxity-dashboard-js', LYXITY_URL . 'assets/js/dashboard.js', array('jquery'), LYXITY_VERSION, true);
@@ -178 +214 @@
         
         // Localize all scripts that need these variables
+
+        wp_localize_script('hazel-harlow-admin', 'hazelHarlowVars', $localization_array);
+        wp_localize_script('hazel-main-page-js', 'hazelHarlowVars', $localization_array);
+        // New: also localize with lyxityVars for consistency across JS files
+        wp_localize_script('hazel-harlow-admin', 'lyxityVars', $localization_array);
+        wp_localize_script('hazel-main-page-js', 'lyxityVars', $localization_array);
+        // Localize real-time status script as well
+        if (wp_script_is('lyxity-realtime-status-js', 'registered')) {
+            wp_localize_script('lyxity-realtime-status-js', 'lyxityVars', $localization_array);
+            wp_localize_script('lyxity-realtime-status-js', 'hazelHarlowVars', $localization_array);
+        }
+
         wp_localize_script('lyxity-admin', 'lyxityVars', $localization_array);
         wp_localize_script('lyxity-main-page-js', 'lyxityVars', $localization_array);
@@ -187 +235 @@
                 'nonce' => wp_create_nonce('lyxity-ajax-nonce')
             ));
-        }
+            // Also localize lyxityVars for dashboard
+            wp_localize_script('hazel-dashboard-js', 'lyxityVars', array(
+                'ajaxUrl' => esc_url(admin_url('admin-ajax.php')),
+                'nonce' => wp_create_nonce('lyxity-ajax-nonce')
+            ));
+        }
+        // END enqueue_admin_assets
+    }
+
+    /**
+     * Render Real-time Status page
+     */
+    public function render_realtime_status_page() {
+        if (!current_user_can('edit_posts')) {
+            wp_die(esc_html__('You do not have sufficient permissions to access this page.', 'lyxity'));
+        }
+        $site_url = esc_url(get_site_url());
+        ?>
+        <div class="wrap lyxity-dashboard">
+            <div class="lyxity-dashboard-header">
+                <h1 class="wp-heading-inline" style="display:flex;align-items:center;gap:10px;">
+                    <span class="dashboard-logo">
+                        <img src="<?php echo esc_url( defined('LYXITY_URL') ? LYXITY_URL . 'assets/images/logo.png' : plugins_url('assets/images/logo.png', __FILE__) ); ?>" alt="Lyxity" />
+                    </span>
+                    <?php echo esc_html__('Article Generation Dashboard', 'lyxity'); ?>
+                </h1>
+                <div class="lyxity-dashboard-controls">
+                    <button type="button" class="button button-primary" id="rt-refresh-btn">
+                        <span class="dashicons dashicons-update" style="font-size:16px;line-height:1;"></span>
+                        <?php echo esc_html__('Refresh', 'lyxity'); ?>
+                    </button>
+                    <label class="lyxity-auto-refresh-toggle">
+                        <input type="checkbox" id="rt-auto-refresh" />
+                        <span class="dashicons dashicons-clock" style="font-size:16px;margin-right:4px;"></span>
+                        <?php echo esc_html__('Auto-refresh', 'lyxity'); ?>
+                    </label>
+                </div>
+            </div>
+
+            <!-- System Status Cards -->
+            <div class="lyxity-status-grid" id="rt-system-status">
+                <div class="lyxity-status-card lyxity-loading">
+                    <div class="lyxity-status-icon">
+                        <span class="dashicons dashicons-clock"></span>
+                    </div>
+                    <div class="lyxity-status-content">
+                        <div class="lyxity-status-number">—</div>
+                        <div class="lyxity-status-label"><?php echo esc_html__('Queued', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                <div class="lyxity-status-card lyxity-loading">
+                    <div class="lyxity-status-icon">
+                        <span class="dashicons dashicons-update-alt"></span>
+                    </div>
+                    <div class="lyxity-status-content">
+                        <div class="lyxity-status-number">—</div>
+                        <div class="lyxity-status-label"><?php echo esc_html__('Processing', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                <div class="lyxity-status-card lyxity-loading">
+                    <div class="lyxity-status-icon">
+                        <span class="dashicons dashicons-yes-alt"></span>
+                    </div>
+                    <div class="lyxity-status-content">
+                        <div class="lyxity-status-number">—</div>
+                        <div class="lyxity-status-label"><?php echo esc_html__('Completed', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                <div class="lyxity-status-card lyxity-loading">
+                    <div class="lyxity-status-icon">
+                        <span class="dashicons dashicons-dismiss"></span>
+                    </div>
+                    <div class="lyxity-status-content">
+                        <div class="lyxity-status-number">—</div>
+                        <div class="lyxity-status-label"><?php echo esc_html__('Failed', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                <div class="lyxity-status-card lyxity-loading">
+                    <div class="lyxity-status-icon">
+                        <span class="dashicons dashicons-edit-page"></span>
+                    </div>
+                    <div class="lyxity-status-content">
+                        <div class="lyxity-status-number">—</div>
+                        <div class="lyxity-status-label"><?php echo esc_html__('Articles Generated', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                <div class="lyxity-status-card lyxity-loading">
+                    <div class="lyxity-status-icon">
+                        <span class="dashicons dashicons-wordpress-alt"></span>
+                    </div>
+                    <div class="lyxity-status-content">
+                        <div class="lyxity-status-number">—</div>
+                        <div class="lyxity-status-label"><?php echo esc_html__('Pending WP Posts', 'lyxity'); ?></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Requests Table -->
+            <div class="lyxity-requests-section">
+                <div class="lyxity-section-header">
+                    <h2><?php echo esc_html__('Recent Requests', 'lyxity'); ?></h2>
+                    <div class="lyxity-pagination-controls">
+                        <button type="button" class="button" id="rt-prev-btn" disabled>
+                            <span class="dashicons dashicons-arrow-left-alt2"></span>
+                        </button>
+                        <span id="rt-page-indicator" class="lyxity-page-info"><?php echo esc_html__('Page 1 of 1', 'lyxity'); ?></span>
+                        <button type="button" class="button" id="rt-next-btn" disabled>
+                            <span class="dashicons dashicons-arrow-right-alt2"></span>
+                        </button>
+                    </div>
+                </div>
+                <div class="lyxity-table-container">
+                    <table class="wp-list-table widefat fixed striped" id="rt-requests-table">
+                        <thead>
+                            <tr>
+                                <th class="column-keyword"><?php echo esc_html__('Keyword', 'lyxity'); ?></th>
+                                <th class="column-created"><?php echo esc_html__('Created', 'lyxity'); ?></th>
+                                <th class="column-updated"><?php echo esc_html__('Updated', 'lyxity'); ?></th>
+                                <th class="column-articles"><?php echo esc_html__('Articles', 'lyxity'); ?></th>
+                                <th class="column-status"><?php echo esc_html__('Status', 'lyxity'); ?></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="lyxity-loading-row">
+                                <td colspan="5">
+                                    <div class="lyxity-loading-indicator">
+                                        <span class="spinner is-active"></span>
+                                        <?php echo esc_html__('Loading requests...', 'lyxity'); ?>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <?php
+    }
+
+    /**
+     * AJAX: Real-time status proxy
+     */
+    public function ajax_realtime_status() {
+        // Security
+        if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'lyxity-ajax-nonce')) {
+            wp_send_json_error(array('message' => 'Security check failed.'), 403);
+        }
+        if (!current_user_can('edit_posts')) {
+            wp_send_json_error(array('message' => 'Insufficient permissions.'), 403);
+        }
+
+        // Sanitize inputs
+        $site_url   = isset($_POST['site_url']) ? esc_url_raw(wp_unslash($_POST['site_url'])) : get_site_url();
+        $request_id = isset($_POST['request_id']) ? absint($_POST['request_id']) : null;
+        $page_size  = isset($_POST['page_size']) ? max(1, min(100, absint($_POST['page_size']))) : 50;
+        $page       = isset($_POST['page']) ? max(1, absint($_POST['page'])) : 1;
+
+        $params = array(
+            'SiteUrl' => $site_url,
+            'PageSize' => $page_size,
+            'Page' => $page,
+        );
+        if (!empty($request_id)) {
+            $params['RequestId'] = $request_id;
+        }
+
+        $api = new Lyxity_API();
+        $result = $api->get_realtime_status($params);
+
+        if (is_wp_error($result)) {
+            wp_send_json_error(array('message' => $result->get_error_message()), 500);
+        }
+        wp_send_json_success($result);
     }
     
@@ -207 +427 @@
             'absint'                       // Use WordPress core function directly
         );
+        
+        // Register new settings
+        register_setting('lyxity-settings-group', 'lyxity_wp_api_url', 'sanitize_text_field');
+        register_setting('lyxity-settings-group', 'lyxity_wp_username', 'sanitize_text_field');
+        register_setting('lyxity-settings-group', 'lyxity_wp_password', 'sanitize_text_field');
+        register_setting('lyxity-settings-group', 'lyxity_article_status', 'sanitize_text_field');
+        register_setting('lyxity-settings-group', 'lyxity_article_length', 'absint');
+        register_setting('lyxity-settings-group', 'lyxity_default_language', 'sanitize_text_field');
     }
     
@@ -217 +445 @@
     public function sanitize_api_key($input) {
         return sanitize_text_field($input);
+    }
+    
+    /**
+     * AJAX handler for saving settings to the API
+     */
+    public function ajax_save_settings() {
+        // Check nonce
+        if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'lyxity_settings_nonce')) {
+            wp_send_json_error(array('message' => 'Security check failed.'));
+        }
+        
+        // Check user capabilities
+        if (!current_user_can('manage_options')) {
+            wp_send_json_error(array('message' => 'You do not have permission to perform this action.'));
+        }
+        
+        // Get API key
+        $api_key = isset($_POST['api_key']) ? sanitize_text_field($_POST['api_key']) : '';
+        
+        if (empty($api_key)) {
+            wp_send_json_error(array('message' => 'API key is required.'));
+        }
+        
+        // Get other settings
+        $wp_api_url = isset($_POST['wp_api_url']) ? sanitize_text_field($_POST['wp_api_url']) : '';
+        $wp_username = isset($_POST['wp_username']) ? sanitize_text_field($_POST['wp_username']) : '';
+        $wp_password = isset($_POST['wp_password']) ? sanitize_text_field($_POST['wp_password']) : '';
+        $article_status = isset($_POST['article_status']) ? sanitize_text_field($_POST['article_status']) : 'draft';
+        $article_length = isset($_POST['article_length']) ? absint($_POST['article_length']) : 1500;
+        $default_language = isset($_POST['default_language']) ? sanitize_text_field($_POST['default_language']) : 'en-GB';
+        $site_url = isset($_POST['site_url']) ? sanitize_text_field($_POST['site_url']) : get_site_url();
+        
+        // Create API instance
+        $api = new Lyxity_API();
+        
+        // Prepare data for API
+        $data = array(
+            'apiKey' => $api_key,
+            'wpApiUrl' => $wp_api_url,
+            'wpUsername' => $wp_username,
+            'wpPassword' => $wp_password,
+            'articleStatus' => $article_status,
+            'articleLength' => $article_length,
+            'defaultLanguage' => $default_language,
+            'siteUrl' => $site_url
+        );
+        
+
+        // Send to API
+        $response = $api->make_request('site/updatesettings', $data);
+        
+        
+        if (is_wp_error($response)) {
+            $error_message = $response->get_error_message();
+            wp_send_json_error(array('message' => 'API Error: ' . $error_message));
+        }
+        
+        if (!isset($response['result']) || $response['result'] !== true) {
+            $error_message = isset($response['message']) ? $response['message'] : 'Unknown API error';
+            wp_send_json_error(array('message' => $error_message));
+        }
+        
+        // Only save API key locally
+        // update_option('lyxity_api_key', $api_key);
+        // All other settings are only sent to the API, not stored locally
+        
+        wp_send_json_success(array('message' => 'Settings saved successfully.'));
+    }
+    
+    /**
+     * AJAX handler for saving API key locally
+     */
+    public function ajax_save_api_key() {
+        // Check nonce
+        if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'lyxity_settings_nonce')) {
+            wp_send_json_error(array('message' => 'Security check failed.'));
+        }
+        
+        // Check user capabilities
+        if (!current_user_can('manage_options')) {
+            wp_send_json_error(array('message' => 'You do not have permission to perform this action.'));
+        }
+        
+        // Get API key
+        $api_key = isset($_POST['api_key']) ? sanitize_text_field($_POST['api_key']) : '';
+        
+        if (empty($api_key)) {
+            wp_send_json_error(array('message' => 'API key is required.'));
+        }
+        
+        // Save API key locally
+        update_option('lyxity_api_key', $api_key);
+        
+        wp_send_json_success(array('message' => 'API key updated successfully.'));
+    }
+    
+    /**
+     * AJAX handler for fetching suggested keywords
+     */
+    public function ajax_get_suggested_keywords() {
+        
+        // Check nonce
+        if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'lyxity-ajax-nonce')) {
+            wp_send_json_error(array('message' => 'Security check failed.'));
+        }
+        
+        
+        // Check user capabilities
+        if (!current_user_can('edit_posts')) {
+            wp_send_json_error(array('message' => 'You do not have permission to perform this action.'));
+        }
+        
+        
+        // Get API instance and fetch suggested keywords
+        $api = new Lyxity_API();
+        $response = $api->get_suggested_keywords();
+        
+        
+        if (is_wp_error($response)) {
+            wp_send_json_error(array('message' => 'API Error: ' . $response->get_error_message()));
+        }
+        
+        
+        // For keywords API, check if suggestedKeywords exists instead of success flag
+        if (!isset($response['suggestedKeywords'])) {
+            $error_message = isset($response['message']) ? $response['message'] : 'No keywords found in response';
+            wp_send_json_error(array('message' => $error_message));
+        }
+        
+        
+        wp_send_json_success($response);
+    }
+    
+    /**
+     * AJAX handler: Generate articles via Lyxity API
+     */
+    public function ajax_generate_articles() {
+        // Verify nonce
+        check_ajax_referer('lyxity-ajax-nonce', 'nonce');
+
+        // Capability check
+        if (!current_user_can('edit_posts')) {
+            wp_send_json_error(array('message' => 'Insufficient permissions'));
+        }
+
+        // Sanitize inputs
+        $keywords = isset($_POST['keywords']) ? sanitize_text_field(wp_unslash($_POST['keywords'])) : '';
+        $number_of_articles = isset($_POST['number_of_articles']) ? absint(wp_unslash($_POST['number_of_articles'])) : 0;
+        $site_url = isset($_POST['site_url']) ? esc_url_raw(wp_unslash($_POST['site_url'])) : get_site_url();
+        $cta_text = isset($_POST['cta_text']) ? sanitize_text_field(wp_unslash($_POST['cta_text'])) : '';
+        $cta_link = isset($_POST['cta_link']) ? esc_url_raw(wp_unslash($_POST['cta_link'])) : '';
+
+        if (empty($keywords) || $number_of_articles <= 0) {
+            wp_send_json_error(array('message' => 'Missing or invalid parameters'));
+        }
+
+        // Prepare payload for API (use expected casing)
+        $payload = array(
+            'Keywords' => $keywords,
+            'NumberOfArticles' => $number_of_articles,
+            'SiteUrl' => $site_url,
+            'ClickToActionText' => $cta_text,
+            'ClickToActionLink' => $cta_link,
+        );
+
+        // Call API via centralized class
+        $api = new Lyxity_API();
+        $response = $api->generate_articles($payload);
+
+        if (is_wp_error($response)) {
+            wp_send_json_error(array('message' => 'API Error: ' . $response->get_error_message()));
+        }
+
+        wp_send_json_success($response);
     }
     
@@ -296 +698 @@
             array($this, 'render_settings_page')
         );
+
+        // Real-time Status submenu removed (merged into Dashboard)
     }
     
@@ -608 +1012 @@
                 <?php endif; ?>
             </div>
+
+            <!-- Write Articles Card -->
+        <div class="card">
+            <h2><?php esc_html_e('Write Articles', 'lyxity'); ?></h2>
+            
+            <div style="display: flex; gap: 30px; align-items: flex-start;">
+                <!-- Left Column: Form -->
+                <div style="flex: 1; min-width: 0;">
+                    <form id="write-articles-form">
+                        <table class="form-table">
+                            <tr>
+                                <th scope="row"><?php esc_html_e('Keyword Source:', 'lyxity'); ?></th>
+                                <td>
+                                    <label>
+                                        <input type="radio" name="keyword-source" value="suggested" id="suggested-source">
+                                        <?php esc_html_e('AI Suggested', 'lyxity'); ?>
+                                    </label>
+                                    &nbsp;&nbsp;
+                                    <label>
+                                        <input type="radio" name="keyword-source" value="manual" id="manual-source">
+                                        <?php esc_html_e('Manual Entry', 'lyxity'); ?>
+                                    </label>
+                                </td>
+                            </tr>
+                        </table>
+                        
+                        <!-- Suggested Keywords Section -->
+                        <div id="suggested-keywords-section" style="display: none;">
+                            <?php if (!$api_key_set): ?>
+                                <table class="form-table">
+                                    <tr>
+                                        <th scope="row"></th>
+                                        <td>
+                                            <p class="description" style="color: #d63638;"><?php esc_html_e('Please set your API key in settings to use this feature', 'lyxity'); ?></p>
+                                        </td>
+                                    </tr>
+                                </table>
+                            <?php else: ?>
+                                <table class="form-table" id="keywords-dropdown-section">
+                                    <tr>
+                                        <th scope="row" style="width: 150px;"><label for="keywords-select"><?php esc_html_e('Select Keyword:', 'lyxity'); ?></label></th>
+                                        <td>
+                                            <select id="keywords-select" style="width: 300px;">
+                                                <option value=""><?php esc_html_e('Loading keywords...', 'lyxity'); ?></option>
+                                            </select>
+                                        </td>
+                                    </tr>
+                                </table>
+                            <?php endif; ?>
+                        </div>
+                        
+                        <!-- Manual Keyword Section -->
+                        <div id="manual-keyword-section" style="display: none;">
+                            <table class="form-table">
+                                <tr>
+                                    <th scope="row" style="width: 150px;"><label for="manual-keyword-input"><?php esc_html_e('Enter Keyword:', 'lyxity'); ?></label></th>
+                                    <td>
+                                        <input type="text" id="manual-keyword-input" class="regular-text" style="width: 300px;" placeholder="<?php esc_attr_e('e.g., best productivity apps', 'lyxity'); ?>">
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        
+                        <!-- Article Generation Section -->
+                        <div id="article-generation-section" style="display: none;">
+                            <table class="form-table">
+                                <tr>
+                                    <th scope="row" style="width: 150px;"><label for="article-count"><?php esc_html_e('Number of Articles:', 'lyxity'); ?></label></th>
+                                    <td>
+                                        <input type="number" id="article-count" style="width: 300px;" min="1" max="10" value="1">
+                                    </td>
+                                </tr>
+                                
+                                <tr>
+                                    <th scope="row" style="width: 150px;"><label for="cta-link"><?php esc_html_e('Call to Action Link:', 'lyxity'); ?></label></th>
+                                    <td>
+                                        <input type="url" id="cta-link" style="width: 300px;" placeholder="<?php esc_attr_e('https://example.com/your-link', 'lyxity'); ?>">
+                                        <p class="description"><?php esc_html_e('Optional. Add a call to action link for your articles.', 'lyxity'); ?></p>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row" style="width: 150px;"><label for="cta-caption"><?php esc_html_e('CTA Caption:', 'lyxity'); ?></label></th>
+                                    <td>
+                                        <input type="text" id="cta-caption" style="width: 300px;" placeholder="<?php esc_attr_e('Learn More', 'lyxity'); ?>">
+                                        <p class="description"><?php esc_html_e('Optional. Caption text for the call to action link.', 'lyxity'); ?></p>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th scope="row" style="width: 150px;"></th>
+                                    <td>
+                                        <button type="button" id="write-articles-btn" class="button button-primary" disabled>
+                                            <i class="fas fa-pen"></i> <?php esc_html_e('Write Articles', 'lyxity'); ?>
+                                        </button>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        
+                        <div id="keywords-loading" style="display: none; text-align: center; padding: 20px;">
+                            <i class="fas fa-spinner fa-spin"></i> <?php esc_html_e('Fetching suggested keywords...', 'lyxity'); ?>
+                        </div>
+                        
+                        <div id="keywords-error" style="display: none;" class="notice notice-error">
+                            <p id="keywords-error-message"></p>
+                        </div>
+                    </form>
+                </div>
+                
+                <!-- Right Column: Metrics -->
+                <div id="metrics-column" style="flex: 1; min-width: 0; border-left: 1px solid #ddd; padding-left: 30px; display: none;">
+                    <div id="keyword-details">
+                        <h3 style="margin-top: 0;"><?php esc_html_e('Keyword Metrics', 'lyxity'); ?></h3>
+                        <table class="form-table">
+                            <tr>
+                                <th scope="row"><?php esc_html_e('Performance Data:', 'lyxity'); ?></th>
+                                <td>
+                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
+                                        <div>
+                                            <strong><?php esc_html_e('Total Clicks:', 'lyxity'); ?></strong><br>
+                                            <span id="metric-clicks" style="font-size: 1.2em; color: #0073aa;">-</span>
+                                        </div>
+                                        <div>
+                                            <strong><?php esc_html_e('Total Impressions:', 'lyxity'); ?></strong><br>
+                                            <span id="metric-impressions" style="font-size: 1.2em; color: #0073aa;">-</span>
+                                        </div>
+                                        <div>
+                                            <strong><?php esc_html_e('Average Position:', 'lyxity'); ?></strong><br>
+                                            <span id="metric-position" style="font-size: 1.2em; color: #0073aa;">-</span>
+                                        </div>
+                                        <div>
+                                            <strong><?php esc_html_e('Average CTR:', 'lyxity'); ?></strong><br>
+                                            <span id="metric-ctr" style="font-size: 1.2em; color: #0073aa;">-</span>%
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="row"><?php esc_html_e('Opportunity Score:', 'lyxity'); ?></th>
+                                <td>
+                                    <span id="metric-score" style="font-size: 1.5em; color: #d63638; font-weight: bold;">-</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="row"><?php esc_html_e('Recommendation:', 'lyxity'); ?></th>
+                                <td>
+                                    <p id="metric-recommendation" style="margin: 0; font-style: italic; background: #f0f0f1; padding: 10px; border-radius: 4px;">-</p>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
         </div>
+        
+        
+        </div>
+        
         
         <!-- Update Preview Modal -->

lyxity/trunk/readme.txt

@@ -4 +4 @@
 Requires at least: 5.0
 Tested up to: 6.8
-Stable tag: 1.3.0
+Stable tag: 1.4.0
 Requires PHP: 7.0
 License: GPLv2 or later
@@ -82 +82 @@
 
 == Changelog ==
+= 1.4.0 =
+- Added content creation feature
+
 = 1.3.0 =
 * Complete WordPress.org compliance update

lyxity/trunk/templates/dashboard-page.php

@@ -30 +30 @@
                 echo '<span style="font-size: 24px; font-weight: bold; margin-right: 10px;"><span style="color: black;">Lyxity</span></span>';
             }
-            echo '<span class="wp-heading-inline">' . esc_html__('Analytics Dashboard', 'lyxity') . '</span>';
+            echo '<span class="wp-heading-inline">' . esc_html__('Dashboard', 'lyxity') . '</span>';
             ?>
         </h1>
         
         <div class="date-range-selector">
-            <div class="d-flex align-items-center">
-                <div class="d-flex align-items-center me-4">
-                    <label class="date-selector-label" for="start-date"><?php esc_html_e('Start Date', 'lyxity'); ?></label>
-                    <input type="date" id="start-date" class="form-control">
-                </div>
-                
-                <div class="d-flex align-items-center">
-                    <label class="date-selector-label" for="end-date"><?php esc_html_e('End Date', 'lyxity'); ?></label>
-                    <input type="date" id="end-date" class="form-control">
+            <div class="row g-3">
+                <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
+                    <div class="d-flex flex-column flex-sm-row align-items-sm-center">
+                        <label class="date-selector-label me-sm-2 mb-1 mb-sm-0" for="start-date"><?php esc_html_e('Start Date', 'lyxity'); ?></label>
+                        <input type="date" id="start-date" class="form-control w-100">
+                    </div>
+                </div>
+                
+                <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
+                    <div class="d-flex flex-column flex-sm-row align-items-sm-center">
+                        <label class="date-selector-label me-sm-2 mb-1 mb-sm-0" for="end-date"><?php esc_html_e('End Date', 'lyxity'); ?></label>
+                        <input type="date" id="end-date" class="form-control w-100">
+                    </div>
                 </div>
             </div>
@@ -49 +53 @@
     </div>
 
-    <div class="dashboard-stats">
-        <div class="stat-card update-card">
-            <i class="fas fa-sync-alt"></i>
-            <h3><?php esc_html_e('Content Updates', 'lyxity'); ?></h3>
-            <div class="number" id="update-count">0</div>
-            <p class="text-muted"><?php esc_html_e('Total updates in selected period', 'lyxity'); ?></p>
+    <div class="lyxity-dashboard-container">
+        <!-- Left Column: Content Updates Section -->
+        <div class="lyxity-dashboard-column">
+            <div class="lyxity-section-header">
+                <h2><?php echo esc_html__('Content Updates', 'lyxity'); ?></h2>
+            </div>
+            
+            <div class="lyxity-card-group">
+                <!-- Content Updates Card -->
+                <div class="lyxity-card update-card">
+                    <div class="lyxity-card-icon">
+                        <i class="fas fa-sync-alt"></i>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number" id="update-count">0</div>
+                        <div class="lyxity-card-label"><?php esc_html_e('Content Updates', 'lyxity'); ?></div>
+                        <p class="lyxity-card-description"><?php esc_html_e('Total updates in selected period', 'lyxity'); ?></p>
+                    </div>
+                </div>
+                
+                <!-- Content Enhancements Card -->
+                <div class="lyxity-card enhance-card">
+                    <div class="lyxity-card-icon">
+                        <i class="fas fa-pen-fancy"></i>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number" id="enhance-count">0</div>
+                        <div class="lyxity-card-label"><?php esc_html_e('Content Enhancements', 'lyxity'); ?></div>
+                        <p class="lyxity-card-description"><?php esc_html_e('Total enhancements in selected period', 'lyxity'); ?></p>
+                    </div>
+                </div>
+                
+                <!-- Stale Posts Card -->
+                <div class="lyxity-card stale-card">
+                    <div class="lyxity-card-icon">
+                        <i class="fas fa-clock"></i>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number" id="stale-count">1</div>
+                        <div class="lyxity-card-label"><?php esc_html_e('Stale Posts', 'lyxity'); ?></div>
+                        <p class="lyxity-card-description"><?php esc_html_e('Posts not updated in 30 days', 'lyxity'); ?></p>
+                    </div>
+                </div>
+            </div>
         </div>
         
-        <div class="stat-card enhance-card">
-            <i class="fas fa-pen-fancy"></i>
-            <h3><?php esc_html_e('Content Enhancements', 'lyxity'); ?></h3>
-            <div class="number" id="enhance-count">0</div>
-            <p class="text-muted"><?php esc_html_e('Total enhancements in selected period', 'lyxity'); ?></p>
-        </div>
+        <!-- Right Column: Content Creation Section -->
+        <div class="lyxity-dashboard-column">
+            <div class="lyxity-section-header">
+                <h2><?php echo esc_html__('Content Creation', 'lyxity'); ?></h2>
+            </div>
+            
+            <div class="lyxity-card-group">
+                <!-- Queued Card -->
+                <div class="lyxity-card queued-card">
+                    <div class="lyxity-card-icon">
+                        <span class="dashicons dashicons-clock"></span>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number lyxity-status-number">—</div>
+                        <div class="lyxity-card-label"><?php echo esc_html__('Queued', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                
+                <!-- Processing Card -->
+                <div class="lyxity-card processing-card">
+                    <div class="lyxity-card-icon">
+                        <span class="dashicons dashicons-update-alt"></span>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number lyxity-status-number">—</div>
+                        <div class="lyxity-card-label"><?php echo esc_html__('Processing', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                
+                <!-- Completed Card -->
+                <div class="lyxity-card completed-card">
+                    <div class="lyxity-card-icon">
+                        <span class="dashicons dashicons-yes-alt"></span>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number lyxity-status-number">—</div>
+                        <div class="lyxity-card-label"><?php echo esc_html__('Completed', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                
+                <!-- Failed Card -->
+                <div class="lyxity-card failed-card">
+                    <div class="lyxity-card-icon">
+                        <span class="dashicons dashicons-dismiss"></span>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number lyxity-status-number">—</div>
+                        <div class="lyxity-card-label"><?php echo esc_html__('Failed', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                
+                <!-- Articles Generated Card -->
+                <div class="lyxity-card generated-card">
+                    <div class="lyxity-card-icon">
+                        <span class="dashicons dashicons-edit-page"></span>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number lyxity-status-number">—</div>
+                        <div class="lyxity-card-label"><?php echo esc_html__('Articles Generated', 'lyxity'); ?></div>
+                    </div>
+                </div>
+                
+                <!-- Pending WP Posts Card -->
+                <div class="lyxity-card pending-card">
+                    <div class="lyxity-card-icon">
+                        <span class="dashicons dashicons-wordpress-alt"></span>
+                    </div>
+                    <div class="lyxity-card-content">
+                        <div class="lyxity-card-number lyxity-status-number">—</div>
+                        <div class="lyxity-card-label"><?php echo esc_html__('Pending WP Posts', 'lyxity'); ?></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-        <div class="stat-card stale-card">
-            <i class="fas fa-clock"></i>
-            <h3><?php esc_html_e('Stale Posts', 'lyxity'); ?></h3>
-            <div class="number" id="stale-count">0</div>
-            <p class="text-muted"><?php esc_html_e('Posts not updated in 30 days', 'lyxity'); ?></p>
+    <!-- Requests Table -->
+    <div class="lyxity-requests-section">
+        <div class="lyxity-section-header">
+            <h2><?php echo esc_html__('Recent Requests', 'lyxity'); ?></h2>
+            <div class="lyxity-pagination-controls">
+                <button type="button" class="button" id="rt-prev-btn" disabled>
+                    <span class="dashicons dashicons-arrow-left-alt2"></span>
+                </button>
+                <span id="rt-page-indicator" class="lyxity-page-info"><?php echo esc_html__('Page 1 of 1', 'lyxity'); ?></span>
+                <button type="button" class="button" id="rt-next-btn" disabled>
+                    <span class="dashicons dashicons-arrow-right-alt2"></span>
+                </button>
+            </div>
+        </div>
+        <div class="lyxity-table-container">
+            <table class="wp-list-table widefat fixed striped" id="rt-requests-table">
+                <thead>
+                    <tr>
+                        <th class="column-keyword"><?php echo esc_html__('Keyword', 'lyxity'); ?></th>
+                        <th class="column-created"><?php echo esc_html__('Created', 'lyxity'); ?></th>
+                        <th class="column-updated"><?php echo esc_html__('Updated', 'lyxity'); ?></th>
+                        <th class="column-articles"><?php echo esc_html__('Articles', 'lyxity'); ?></th>
+                        <th class="column-status"><?php echo esc_html__('Status', 'lyxity'); ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="lyxity-loading-row">
+                        <td colspan="5">
+                            <div class="lyxity-loading-indicator">
+                                <span class="spinner is-active"></span>
+                                <?php echo esc_html__('Loading requests...', 'lyxity'); ?>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>

lyxity/trunk/templates/settings-page.php

@@ -10 +10 @@
 }
 
+// Debug output - Only visible in development
+if (defined('WP_DEBUG') && WP_DEBUG) {
+    echo '<!-- DEBUG: Settings page template loaded at ' . date('Y-m-d H:i:s') . ' -->';
+}
+
 // Get the referrer URL for the back button
 $referer = wp_get_referer() ? wp_get_referer() : admin_url('admin.php?page=Lyxity');
 
+// Load API key from WordPress settings
+$api_key = get_option('lyxity_api_key', '');
+
+// Initialize default values
+$wp_api_url = trailingslashit(get_site_url()) . 'wp-json/';
+$wp_username = '';
+$article_status = 'draft';
+$article_length = 1500;
+$default_language = 'en-GB';
+
+// If API key is set, try to load settings from API
+if (!empty($api_key)) {
+    // Debug output - Only visible in development
+    if (defined('WP_DEBUG') && WP_DEBUG) {
+        error_log('Lyxity: About to call get_settings() with API key present.');
+    }
+    
+    $api = new Lyxity_API();
+    $settings = $api->get_settings();
+    
+    // Debug output - Only visible in development
+    if (defined('WP_DEBUG') && WP_DEBUG) {
+        error_log('Lyxity: get_settings() returned: ' . (is_wp_error($settings) ? 'WP_Error' : json_encode($settings)));
+    }
+    
+    if (!is_wp_error($settings) && isset($settings['success']) && $settings['success'] === true && isset($settings['data'])) {
+        // Extract settings from API response
+        $data = $settings['data'];
+        
+        if (isset($data['wordPressApiUrl'])) {
+            $wp_api_url = $data['wordPressApiUrl'];
+        }
+        
+        if (isset($data['wordPressUsername'])) {
+            $wp_username = $data['wordPressUsername'];
+        }
+        
+        if (isset($data['defaultArticleStatus'])) {
+            $article_status = $data['defaultArticleStatus'];
+        }
+        
+        if (isset($data['articleLength'])) {
+            $article_length = $data['articleLength'];
+        }
+        
+        if (isset($data['defaultLanguage'])) {
+            $default_language = $data['defaultLanguage'];
+        }
+    }
+}
+
 // Enqueue the settings page styles - Note: This is not needed anymore, as we handle enqueuing in the main plugin file
 ?>
-<div class="wrap lyxity-settings-wrap">
-    
-    <div class="lyxity-container">
-        <!-- Background images -->
-    <?php 
-    // Use wp_get_attachment_image if the image is in the media library
-    // Otherwise, use wp_get_attachment_image_src with a placeholder and style it appropriately
-    $bg_image_url = esc_url(LYXITY_URL . 'assets/images/HH_Background.svg');
-    echo '<div class="lyxity-bg-top-left" style="background-image: url(' . esc_url($bg_image_url) . ');"></div>';
-    echo '<div class="lyxity-bg-bottom-right" style="background-image: url(' . esc_url($bg_image_url) . ');"></div>';
-    ?>
-    <div class="lyxity-logo mb-5">
-            <a href="https://lyxity.com" target="_blank" rel="noopener noreferrer">
-                <?php
-                // Fix the SVG logo path to use the correct plugin directory
-                $logo_path = LYXITY_PATH . 'assets/images/logo.png';
-                
-                if (file_exists($logo_path)) {
-                    // Get the attachment ID if the image is in the media library
-                    $attachment_id = attachment_url_to_postid(LYXITY_URL . 'assets/images/logo.png');
+<div class="wrap lyxity-settings-wrap container-fluid">
+    <div class="container-fluid p-0" style="max-width: none;">
+        <div class="row mb-4">
+            
+                <div class="card col-12 shadow-sm w-100">
+                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
+                        <div class="d-flex align-items-center">
+                            <a href="https://lyxity.com" target="_blank" rel="noopener noreferrer" class="me-3">
+                                <?php
+                                $logo_path = LYXITY_PATH . 'assets/images/logo.png';
+                                
+                                if (file_exists($logo_path)) {
+                                    $attachment_id = attachment_url_to_postid(LYXITY_URL . 'assets/images/logo.png');
+                                    
+                                    if ($attachment_id) {
+                                        echo wp_get_attachment_image($attachment_id, 'full', false, array(
+                                            'class' => 'img-fluid',
+                                            'style' => 'max-height: 40px;',
+                                            'alt' => 'Lyxity'
+                                        ));
+                                    } else {
+                                        echo '<img src="' . esc_url(LYXITY_URL . 'assets/images/logo.png') . '" class="img-fluid" style="max-height: 40px;" alt="Lyxity">';
+                                    }
+                                } else {
+                                    echo '<span class="h4 fw-bold text-primary mb-0">Lyxity</span>';
+                                }
+                                ?>
+                            </a>
+                            <h1 class="h4 mb-0"><?php esc_html_e('Settings', 'lyxity'); ?></h1>
+                        </div>
+                        
+                    </div>
                     
-                    if ($attachment_id) {
-                        // If the image is in the media library, use wp_get_attachment_image
-                        echo wp_get_attachment_image($attachment_id, 'full', false, array(
-                            'class' => 'dashboard-logo',
-                            'style' => 'max-width: 180px; height: auto;',
-                            'alt' => 'Lyxity'
-                        ));
-                    } else {
-                        // If not in media library, use a div with background image or other WordPress-approved method
-                        echo '<div class="dashboard-logo" style="background-image: url(' . esc_url(LYXITY_URL . 'assets/images/logo.png') . '); 
-                              background-repeat: no-repeat; background-size: contain; width: 180px; height: 60px;" 
-                              role="img" aria-label="Lyxity"></div>';
-                    }
-                } else {
-                    // Fallback if SVG file is not found
-                    echo '<span style="font-size: 24px; font-weight: bold; color: black;">Lyxity</span>';
-                }
-                ?>
-            </a>
+                    <div class="card-body p-4">
+                        <div class="row mb-4">
+                            <div class="col-12">
+                                <h4 class="mb-3"><?php esc_html_e('Set Plugin API Key', 'lyxity'); ?></h4>
+                                <p class="mb-1"><?php esc_html_e('Welcome to Lyxity.', 'lyxity'); ?></p>
+                                <p>
+                                <?php echo wp_kses(
+                                    __('Please enter your API key below. You can obtain API key from <a href="https://lyxity.com" target="_blank" rel="noopener noreferrer">Here</a>.', 'lyxity'),
+                                    array(
+                                        'a' => array(
+                                            'href' => array(),
+                                            'target' => array(),
+                                            'rel' => array()
+                                        )
+                                    )
+                                ); ?>
+                                </p>
+                            </div>
+                        </div>
+                        
+                        <?php settings_errors(); ?>
+                        
+                        <form id="lyxity-settings-form" method="post">
+                            <?php wp_nonce_field('lyxity_settings_nonce', 'lyxity_settings_nonce'); ?>
+                            
+                            <div class="card mb-4 p-0 border-0 shadow-sm">
+                                <div class="card-header bg-light">
+                                    <h5 class="mb-0 ps-3"><?php esc_html_e('API Configuration', 'lyxity'); ?></h5>
+                                </div>
+                                <div class="card-body p-4">
+                                    <div class="row">
+                                        <div class="col-12">
+                                            <div class="mb-3">
+                                                <label for="lyxity_api_key" class="form-label"><?php esc_html_e('API Key', 'lyxity'); ?></label>
+                                                <div class="input-group mb-3">
+                                                    <input type="password" id="lyxity_api_key" aria-describedby="toggle-password-visibility" name="lyxity_api_key" class="form-control password-control" 
+                                                        placeholder="<?php esc_attr_e('Enter your API key', 'lyxity'); ?>" 
+                                                        value="<?php echo esc_attr($api_key); ?>">
+                                                    <button class="btn btn-outline-secondary" type="button" id="toggle-password-visibility" title="<?php esc_attr_e('Show/Hide API key', 'lyxity'); ?>">
+                                                        <span class="dashicons dashicons-visibility"></span>
+                                                    </button>
+                                                    
+                                                </div>
+                                                <button class="button button-primary" type="button" id="update-api-key" title="<?php esc_attr_e('Update API Key', 'lyxity'); ?>">
+                                                        <?php esc_html_e('Update', 'lyxity'); ?>
+                                                    </button>
+                                                <div class="form-text">
+                                                    <?php echo wp_kses(
+                                                        __('You can obtain an API key from <a href="https://lyxity.com" target="_blank" rel="noopener noreferrer">Lyxity.com</a>', 'lyxity'),
+                                                        array(
+                                                            'a' => array(
+                                                                'href' => array(),
+                                                                'target' => array(),
+                                                                'rel' => array()
+                                                            )
+                                                        )
+                                                    ); ?>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="card mb-4 p-0 border-0 shadow-sm">
+                                <div class="card-header bg-light">
+                                    <h5 class="mb-0 ps-3"><?php esc_html_e('WordPress Integration', 'lyxity'); ?></h5>
+                                </div>
+                                <div class="card-body p-4">
+                                    <div class="row g-3">
+                                        <div class="col-md-4">
+                                            <div class="mb-3">
+                                                <label for="lyxity_wp_api_url" class="form-label"><?php esc_html_e('WordPress Base API URL', 'lyxity'); ?></label>
+                                                <input type="text" id="lyxity_wp_api_url" name="lyxity_wp_api_url" class="form-control" 
+                                                    placeholder="<?php esc_attr_e('WordPress API URL', 'lyxity'); ?>" 
+                                                    value="<?php echo esc_attr($wp_api_url); ?>">
+                                                <div class="form-text"><?php esc_html_e('Default is auto-detected', 'lyxity'); ?></div>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="col-md-4">
+                                            <div class="mb-3">
+                                                <label for="lyxity_wp_username" class="form-label"><?php esc_html_e('WordPress Username', 'lyxity'); ?></label>
+                                                <input type="text" id="lyxity_wp_username" name="lyxity_wp_username" class="form-control" 
+                                                    placeholder="<?php esc_attr_e('WordPress Username', 'lyxity'); ?>" 
+                                                    value="<?php echo esc_attr($wp_username); ?>">
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="col-md-4">
+                                            <div class="mb-3">
+                                                <label for="lyxity_wp_password" class="form-label"><?php esc_html_e('WordPress Password', 'lyxity'); ?></label>
+                                                <div class="input-group mb-3">
+                                                    <input type="password" id="lyxity_wp_password" name="lyxity_wp_password" class="form-control password-control" aria-describedby="toggle-wp-password-visibility" 
+                                                        placeholder="<?php esc_attr_e('WordPress Password', 'lyxity'); ?>" 
+                                                        value="">
+                                                    <button class="btn btn-outline-secondary" type="button" id="toggle-wp-password-visibility" title="<?php esc_attr_e('Show/Hide Password', 'lyxity'); ?>">
+                                                        <span class="dashicons dashicons-visibility"></span>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="card mb-4 p-0 border-0 shadow-sm">
+                                <div class="card-header bg-light">
+                                    <h5 class="mb-0 ps-3"><?php esc_html_e('Content Settings', 'lyxity'); ?></h5>
+                                </div>
+                                <div class="card-body p-4">
+                                    <div class="row g-3">
+                                        <div class="col-md-4">
+                                            <div class="mb-3">
+                                                <label for="lyxity_article_status" class="form-label"><?php esc_html_e('Default Article Status', 'lyxity'); ?></label>
+                                                <select id="lyxity_article_status" name="lyxity_article_status" class="form-control">
+                                                    <option value="draft" <?php selected($article_status, 'draft'); ?>>
+                                                        <?php esc_html_e('Draft', 'lyxity'); ?>
+                                                    </option>
+                                                    <option value="publish" <?php selected($article_status, 'publish'); ?>>
+                                                        <?php esc_html_e('Published', 'lyxity'); ?>
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="col-md-4">
+                                            <div class="mb-3">
+                                                <label for="lyxity_article_length" class="form-label"><?php esc_html_e('Article Length (characters)', 'lyxity'); ?></label>
+                                                <input type="number" id="lyxity_article_length" name="lyxity_article_length" class="form-control" 
+                                                    min="100" step="100" 
+                                                    value="<?php echo esc_attr($article_length); ?>">
+                                                <div class="form-text"><?php esc_html_e('Maximum characters for generated articles', 'lyxity'); ?></div>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="col-md-4">
+                                            <div class="mb-3">
+                                                <label for="lyxity_default_language" class="form-label"><?php esc_html_e('Default Language', 'lyxity'); ?></label>
+                                                <select id="lyxity_default_language" name="lyxity_default_language" class="form-control">
+                                                    <option value="en-GB" <?php selected($default_language, 'en-GB'); ?>>
+                                                        <?php esc_html_e('English (UK)', 'lyxity'); ?>
+                                                    </option>
+                                                    <option value="en-US" <?php selected($default_language, 'en-US'); ?>>
+                                                        <?php esc_html_e('English (US)', 'lyxity'); ?>
+                                                    </option>
+                                                    <option value="fr-FR" <?php selected($default_language, 'fr-FR'); ?>>
+                                                        <?php esc_html_e('French', 'lyxity'); ?>
+                                                    </option>
+                                                    <option value="de-DE" <?php selected($default_language, 'de-DE'); ?>>
+                                                        <?php esc_html_e('German', 'lyxity'); ?>
+                                                    </option>
+                                                    <option value="es-ES" <?php selected($default_language, 'es-ES'); ?>>
+                                                        <?php esc_html_e('Spanish', 'lyxity'); ?>
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div id="settings-response" class="alert" style="display: none;"></div>
+                            
+                            <div class="d-flex justify-content-start mt-4">
+                                <button type="submit" id="lyxity-settings-submit" class="button button-primary">
+                                    <!-- <span class="dashicons dashicons-saved me-2"></span> -->
+                                    <?php esc_html_e('Save Settings', 'lyxity'); ?>
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            
         </div>
-        
-        <!-- <?php 
-        // This is commented out, but updating to use WordPress functions for future reference
-        $image_url = LYXITY_URL . 'assets/images/API_Key.png';
-        $attachment_id = attachment_url_to_postid($image_url);
-        
-        if ($attachment_id) {
-            echo wp_get_attachment_image($attachment_id, 'full', false, array(
-                'class' => 'lyxity-img',
-                'alt' => 'API Key Setup'
-            ));
-        } else {
-            echo '<div class="lyxity-img" style="background-image: url(' . esc_url($image_url) . '); 
-                  background-repeat: no-repeat; background-size: contain;" role="img" aria-label="API Key Setup"></div>';
-        }
-        ?> -->
-        <h4 class="mb-5"><?php esc_html_e('Set Plugin API Key', 'lyxity'); ?></h4>
-        
-        <p class="mb-3">
-            <?php esc_html_e('Welcome to Lyxity.', 'lyxity'); ?>
-           
-        </p>
-        <p class="mb-3">
-        <?php echo wp_kses(
-            __('Please enter your API key below. You can obtain API key from <a href="https://lyxity.com" target="_blank" rel="noopener noreferrer">Here</a>.', 'lyxity'),
-            array(
-                'a' => array(
-                    'href' => array(),
-                    'target' => array(),
-                    'rel' => array()
-                )
-            )
-        ); ?>
-            </p>
-        <?php settings_errors(); ?>
-        
-        <form method="post" action="options.php">
-            <?php settings_fields('lyxity-settings-group'); ?>
-            
-            <div class="lyxity-form-group mb-3">
-                <div class="lyxity-input-group">
-                    <input type="password" id="lyxity_api_key" name="lyxity_api_key" class="lyxity-form-control" 
-                           placeholder="<?php esc_attr_e('Enter your API key', 'lyxity'); ?>" 
-                           value="<?php echo esc_attr(get_option('lyxity_api_key')); ?>">
-                    <button type="button" class="lyxity-btn" id="toggle-password-visibility" title="<?php esc_attr_e('Show/Hide API key', 'lyxity'); ?>">
-                        <span class="dashicons dashicons-visibility"></span>
-                    </button>
-                </div>
-            </div>
-            
-            <button type="submit" class="lyxity-btn-submit"><?php esc_html_e('SUBMIT', 'lyxity'); ?></button>
-        </form>
     </div>
 </div>