Section 5 Complete

frontend/src/pages/Help/Help.tsx

@@ -26,6 +26,11 @@ export default function Help() {
     { id: "getting-started", title: "Getting Started", level: 1 },
     { id: "quick-start", title: "Quick Start Guide", level: 2 },
     { id: "workflow-overview", title: "Workflow Overview", level: 2 },
+    { id: "dashboard", title: "Dashboard", level: 1 },
+    { id: "setup", title: "Setup Module", level: 1 },
+    { id: "add-keywords", title: "Add Keywords", level: 2 },
+    { id: "content-settings", title: "Content Settings", level: 2 },
+    { id: "sites", title: "Sites Management", level: 2 },
     { id: "planner-module", title: "Planner Module", level: 1 },
     { id: "keywords", title: "Keywords Management", level: 2 },
     { id: "clusters", title: "Keyword Clusters", level: 2 },
@@ -34,7 +39,12 @@ export default function Help() {
     { id: "tasks", title: "Tasks Management", level: 2 },
     { id: "content", title: "Content Generation", level: 2 },
     { id: "images", title: "Image Generation", level: 2 },
+    { id: "review-publish", title: "Review & Publish", level: 2 },
     { id: "automation", title: "Automation Setup", level: 1 },
+    { id: "account", title: "Account & Billing", level: 1 },
+    { id: "account-settings", title: "Account Settings", level: 2 },
+    { id: "plans-billing", title: "Plans & Billing", level: 2 },
+    { id: "usage", title: "Usage & Limits", level: 2 },
     { id: "faq", title: "Frequently Asked Questions", level: 1 },
   ];
 
@@ -133,6 +143,45 @@ export default function Help() {
     {
       question: "How do I view content details?",
       answer: "Click on any content item in the Content table to open the detailed view. Here you can see the full content, edit it, view associated images, see metadata, and manage publication status."
+    },
+    // Credits & Billing FAQs
+    {
+      question: "How do credits work?",
+      answer: "Credits are used for AI operations like content generation, image creation, and idea generation. Each operation has a credit cost. Your plan includes a monthly credit allocation that resets each billing period. You can purchase additional credits anytime."
+    },
+    {
+      question: "What uses credits?",
+      answer: "Content generation, image generation, keyword clustering, and idea generation all use credits. The exact cost varies by operation type. Check your Usage page to see credit costs and your current balance."
+    },
+    {
+      question: "How do I purchase more credits?",
+      answer: "Go to Account → Purchase Credits. Select a credit package and complete the purchase. Credits are added to your balance immediately and never expire."
+    },
+    {
+      question: "How do I change my payment method?",
+      answer: "Go to Account → Plans & Billing → History tab. You can add new payment methods, remove old ones, and set a default payment method for renewals."
+    },
+    {
+      question: "Can I cancel my subscription?",
+      answer: "Yes. Go to Account → Plans & Billing, and click 'Cancel Plan' on the Current Plan tab. You'll be asked to confirm. Your subscription remains active until the end of the billing period, and remaining credits are preserved for 30 days."
+    },
+    // WordPress FAQs
+    {
+      question: "How do I connect WordPress?",
+      answer: "Go to Sites, select your site, and configure WordPress integration in Site Settings. You'll need your WordPress URL and either REST API credentials or an application password. Test the connection before saving."
+    },
+    {
+      question: "Why isn't my content syncing to WordPress?",
+      answer: "Check: 1) WordPress credentials are correct, 2) REST API is enabled on your WordPress site, 3) Auto-sync is enabled in Content Settings, 4) The content status is 'Published'. You can manually sync individual posts from the Published tab."
+    },
+    // Automation FAQs
+    {
+      question: "Can I schedule automation to run at specific times?",
+      answer: "Yes! Go to the Automation page for advanced scheduling. You can set specific days, times, and frequencies for your automation runs. The Dashboard shows quick toggle controls for each automation stage."
+    },
+    {
+      question: "What happens if automation fails?",
+      answer: "Failed items are logged in the automation activity feed. You can retry failed items individually or in bulk. Check the error message for details and ensure you have sufficient credits."
     }
   ];
 
@@ -314,6 +363,160 @@ export default function Help() {
           </Accordion>
         </div>
 
+        {/* Dashboard Section */}
+        <div ref={(el) => (sectionRefs.current["dashboard"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <BoltIcon className="size-8 text-brand-600 dark:text-brand-400" />
+            Dashboard
+          </h2>
+
+          <Card className="p-6">
+            <p className="text-gray-700 dark:text-gray-300 mb-4">
+              Your command center showing workflow progress, key metrics, and quick actions.
+            </p>
+            
+            <div className="space-y-4">
+              <div className="border-l-4 border-brand-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
+                <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                  <li><strong>Keywords:</strong> Total keywords in your workflow</li>
+                  <li><strong>Articles:</strong> Content pieces created</li>
+                  <li><strong>Images:</strong> Images generated</li>
+                  <li><strong>Completion %:</strong> Overall workflow progress</li>
+                </ul>
+              </div>
+
+              <div className="border-l-4 border-purple-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Workflow Pipeline</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Visual pipeline showing your progress: Sites → Keywords → Clusters → Ideas → Content → Published
+                </p>
+              </div>
+
+              <div className="border-l-4 border-green-500 pl-4">
+                <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setup Checklist</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Track your setup progress. Complete all items to start creating content efficiently.
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Setup Module Section */}
+        <div ref={(el) => (sectionRefs.current["setup"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <CheckCircleIcon className="size-8 text-green-600 dark:text-green-400" />
+            Setup Module
+          </h2>
+
+          <Accordion>
+            <AccordionItem title="Add Keywords" defaultOpen>
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Browse and add keywords from our curated database to your content workflow.
+                </p>
+                
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Step-by-Step Guide:</h4>
+                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                    <li>Navigate to <strong>SETUP → Add Keywords</strong></li>
+                    <li>Browse keywords filtered by your site's industry/sector</li>
+                    <li>Use filters to narrow results (search, country, difficulty)</li>
+                    <li>Toggle "Not Yet Added Only" to see available keywords</li>
+                    <li>Select keywords by clicking checkboxes</li>
+                    <li>Click "Add to Workflow" button</li>
+                    <li>Click "Next: Plan Your Content →" to proceed to Planner</li>
+                  </ol>
+                </div>
+
+                <div className="bg-blue-50 dark:bg-blue-900/10 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
+                  <p className="text-sm text-blue-800 dark:text-blue-300">
+                    <strong>Tip:</strong> Start with 10-20 keywords to test your workflow. Mix high and low difficulty keywords for variety.
+                  </p>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Content Settings">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Configure how AI generates and publishes your content.
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="border-l-4 border-blue-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Generation Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li><strong>Default Tone:</strong> Professional, Casual, Friendly, etc.</li>
+                      <li><strong>Default Length:</strong> Short, Medium, Long articles</li>
+                      <li><strong>Custom Prompt:</strong> Additional instructions for AI</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-green-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li><strong>Auto-Publish:</strong> Automatically publish approved content</li>
+                      <li><strong>Auto-Sync:</strong> Keep WordPress in sync with changes</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-purple-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Settings Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Configure default image styles</li>
+                      <li>Set image generation preferences</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Sites Management">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Manage your WordPress sites and their integration settings.
+                </p>
+                
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setting Up a Site:</h4>
+                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                    <li>Go to <strong>Sites</strong> in the main menu</li>
+                    <li>Click "Add Site" button</li>
+                    <li>Enter site name and WordPress URL</li>
+                    <li>Select industry and sectors</li>
+                    <li>Configure WordPress credentials (REST API)</li>
+                    <li>Test connection and save</li>
+                  </ol>
+                </div>
+
+                <div className="space-y-3 mt-4">
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">Site Dashboard</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        View site setup progress, connected content, and quick actions.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <CheckCircleIcon className="size-5 text-green-500 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="font-semibold text-gray-900 dark:text-white">WordPress Integration</h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Connect your WordPress site to automatically publish content, sync posts, and manage images.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
         {/* Planner Module Section */}
         <div ref={(el) => (sectionRefs.current["planner-module"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
@@ -545,6 +748,146 @@ export default function Help() {
           </Card>
         </div>
 
+        {/* Account & Billing Section */}
+        <div ref={(el) => (sectionRefs.current["account"] = el)} className="mb-12 scroll-mt-24">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
+            <GroupIcon className="size-8 text-indigo-600 dark:text-indigo-400" />
+            Account & Billing
+          </h2>
+
+          <Accordion>
+            <AccordionItem title="Account Settings" defaultOpen>
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Manage your account, profile, and team from one place.
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="border-l-4 border-blue-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Account Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Organization name and billing email</li>
+                      <li>Billing address for invoices</li>
+                      <li>Tax ID / VAT number</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-green-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Profile Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Personal information (name, email, phone)</li>
+                      <li>Timezone and language preferences</li>
+                      <li>Notification settings</li>
+                      <li>Password change (under Security)</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-purple-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Team Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>View all team members</li>
+                      <li>Invite new members (Admin or Member roles)</li>
+                      <li>Remove team members</li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg mt-4">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Changing Your Password:</h4>
+                  <ol className="list-decimal list-inside space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                    <li>Go to Account Settings → Profile tab</li>
+                    <li>Click "Change Password" in the Security section</li>
+                    <li>Enter your current password</li>
+                    <li>Enter and confirm your new password (min 8 characters)</li>
+                    <li>Click "Change Password" to save</li>
+                  </ol>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Plans & Billing">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Manage your subscription, view invoices, and track payments.
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="border-l-4 border-brand-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Current Plan Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>View your plan name and features</li>
+                      <li>Check credit balance</li>
+                      <li>See renewal date</li>
+                      <li>Cancel subscription (with confirmation)</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-green-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Upgrade Plan Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Compare available plans</li>
+                      <li>See feature differences</li>
+                      <li>Upgrade with prorated billing</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-orange-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">History Tab</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Invoice history with PDF downloads</li>
+                      <li>Payment records</li>
+                      <li>Payment method management</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </AccordionItem>
+
+            <AccordionItem title="Usage & Limits">
+              <div className="space-y-4">
+                <p className="text-gray-700 dark:text-gray-300">
+                  Track your credit usage, limits, and activity.
+                </p>
+                
+                <div className="space-y-3">
+                  <div className="border-l-4 border-blue-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Your Limits & Usage</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li><strong>Hard Limits:</strong> Maximum allowed (sites, users, keywords)</li>
+                      <li><strong>Monthly Limits:</strong> Reset each billing cycle</li>
+                      <li>Visual progress bars show current usage</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-purple-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Credit History</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>View all credit transactions</li>
+                      <li>See credits added and used</li>
+                      <li>Filter by date range</li>
+                    </ul>
+                  </div>
+
+                  <div className="border-l-4 border-green-500 pl-4">
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Activity</h4>
+                    <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      <li>Track operations by type</li>
+                      <li>Monitor daily averages</li>
+                      <li>See credits used per operation</li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div className="bg-amber-50 dark:bg-amber-900/10 p-4 rounded-lg border border-amber-200 dark:border-amber-800 mt-4">
+                  <p className="text-sm text-amber-800 dark:text-amber-300">
+                    <strong>Usage Alerts:</strong> You'll receive automatic alerts at 80%, 90%, and 100% of your limits.
+                  </p>
+                </div>
+              </div>
+            </AccordionItem>
+          </Accordion>
+        </div>
+
         {/* FAQ Section */}
         <div ref={(el) => (sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
@@ -571,12 +914,18 @@ export default function Help() {
               Can't find what you're looking for? Our support team is here to help.
             </p>
             <div className="flex flex-wrap justify-center gap-4">
-              <button className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+              <a 
+                href="mailto:support@igny8.com?subject=Support Request" 
+                className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-block"
+              >
                 Contact Support
-              </button>
-              <button className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20">
+              </a>
+              <a 
+                href="mailto:feedback@igny8.com?subject=Feature Request" 
+                className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20 inline-block"
+              >
                 Feature Request
-              </button>
+              </a>
             </div>
           </div>
         </Card>