salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Section 5 Complete

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-27 03:09:57 +00:00
parent 74a3441ee4
commit 4e9bf0ba56
9 changed files with 529 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
CHANGELOG.md
View File

@@ -1,7 +1,7 @@
# IGNY8 Change Log
**Current Version:** 1.1.5
**Last Updated:** January 2, 2025
**Current Version:** 1.1.7
**Last Updated:** December 27, 2025
---
@@ -9,6 +9,8 @@
| Version | Date | Summary |
|---------|------|---------|
| 1.1.7 | Dec 27, 2025 | Section 5 HELP module - Support links, Documentation, FAQ updates |
| 1.1.6 | Dec 27, 2025 | Section 4 ACCOUNT modules - Profile API, Password Change, Billing improvements |
| 1.1.5 | Jan 2, 2025 | Section 3 WORKFLOW modules - Planner, Writer, Progress Modal fixes |
| 1.1.4 | Dec 27, 2025 | Section 2 SETUP modules - Add Keywords, Content Settings, Sites fixes |
| 1.1.3 | Dec 27, 2025 | Merged RULES.md into .rules |
@@ -24,6 +26,100 @@
---
## v1.1.7 - December 27, 2025
### Section 5 HELP Module Implementation
**Support Links Fixed (CRITICAL):**
- Fixed UserDropdown links going to `/profile` (404)
- "Edit profile" → `/account/settings`
- "Account settings" → `/account/settings`
- "Support" → `/help`
- Implemented Contact Support button with `mailto:support@igny8.com`
- Implemented Feature Request button with `mailto:feedback@igny8.com`
**Placeholder Pages Deleted (HIGH):**
- **DELETED** `pages/Help/Docs.tsx` - Empty placeholder
- **DELETED** `pages/Help/SystemTesting.tsx` - Empty placeholder
- **DELETED** `pages/Help/FunctionTesting.tsx` - Empty placeholder
- Removed routes `/help/docs`, `/help/system-testing`, `/help/function-testing` from App.tsx
**Documentation Added:**
- Added comprehensive Table of Contents with new sections
- Added Dashboard documentation section
- Added Setup Module documentation:
- Add Keywords (step-by-step guide)
- Content Settings (3 tabs explained)
- Sites Management (WordPress integration)
- Added Account & Billing documentation:
- Account Settings (Account, Profile, Team tabs)
- Plans & Billing (plan management, cancellation)
- Usage & Limits (credit tracking, alerts)
**FAQ Expanded:**
- Added 8 new FAQ items:
- How do credits work?
- What uses credits?
- How do I purchase more credits?
- How do I change my payment method?
- Can I cancel my subscription?
- How do I connect WordPress?
- Why isn't my content syncing to WordPress?
- Can I schedule automation to run at specific times?
- What happens if automation fails?
### Files Changed
- `frontend/src/App.tsx` - Removed placeholder help page imports/routes
- `frontend/src/components/header/UserDropdown.tsx` - Fixed all broken links
- `frontend/src/pages/Help/Help.tsx` - Added documentation sections, expanded FAQ, working support buttons
### Files Deleted
- `frontend/src/pages/Help/Docs.tsx`
- `frontend/src/pages/Help/SystemTesting.tsx`
- `frontend/src/pages/Help/FunctionTesting.tsx`
---
## v1.1.6 - December 27, 2025
### Section 4 ACCOUNT Modules Implementation
**Account Settings Page (`/account/settings`):**
- **Profile Tab**: Now loads user data from auth store (name, email, phone, timezone)
- **Password Change**: Added password change modal with validation
- Connects to `/v1/auth/change-password/` backend endpoint
- Validates minimum 8 characters, confirmation match
- Shows success/error feedback via toast
- Added `getUserProfile()`, `updateUserProfile()`, `changePassword()` to billing.api.ts
**Plans & Billing Page (`/account/plans`):**
- **Cancellation Confirmation Modal**: Cancel button now shows confirmation dialog
- Explains consequences: loss of features, 30-day credit preservation
- Requires explicit "Yes, Cancel Subscription" confirmation
- Prevents accidental cancellations
**Usage Analytics Page (`/account/usage`):**
- **Fixed Fake API Activity Data**: Removed hardcoded values
- Old: Hardcoded "98.5%" success rate, 1,234/567/342 endpoint calls
- New: Uses real `analytics?.usage_by_type` data
- Shows "Operations by Type" with actual credits/counts from backend
- Empty state when no operations recorded
**Cleanup:**
- **DELETED** `TeamManagementPage.tsx` - orphaned page (functionality exists in AccountSettingsPage Team tab)
- Legacy routes verified working: `/account/team` → `/account/settings`, `/settings/profile` → `/account/settings`
### Files Changed
- `frontend/src/services/billing.api.ts` - Added profile/password API functions
- `frontend/src/pages/account/AccountSettingsPage.tsx` - Password change modal, profile loading
- `frontend/src/pages/account/PlansAndBillingPage.tsx` - Cancellation confirmation modal
- `frontend/src/pages/account/UsageAnalyticsPage.tsx` - Real data for API Activity tab
### Files Deleted
- `frontend/src/pages/account/TeamManagementPage.tsx`
---
## v1.1.5 - January 2, 2025
### Section 3 WORKFLOW Modules Implementation

41
docs/30-FRONTEND/PAGES.md
View File

@@ -1,7 +1,7 @@
# Frontend Pages & Routes
**Last Verified:** January 2, 2025
**Version:** 1.1.4
**Last Verified:** December 27, 2025
**Version:** 1.1.7
**Framework:** React 19 + TypeScript + React Router 6 + Vite
---
@@ -139,9 +139,14 @@ Routes defined in `/frontend/src/App.tsx`:
**Tab Structure:**
- **Account**: Organization name, billing address, tax ID
- **Profile**: Name, email, phone, timezone, language, notifications, security
- **Profile**: Name, email, phone, timezone, language, notifications, security (password change modal)
- **Team**: Team member list, invite, remove
**v1.1.6 Changes:**
- Profile tab loads from auth store user data
- Added Change Password modal with validation
- Uses `/v1/auth/change-password/` endpoint
### Plans & Billing
| Route | File | Description |
@@ -153,6 +158,9 @@ Routes defined in `/frontend/src/App.tsx`:
- **Upgrade Plan**: Pricing table, plan comparison
- **History**: Invoices, payments, payment methods
**v1.1.6 Changes:**
- Added cancellation confirmation modal (prevents accidental cancellations)
### Usage
| Route | File | Description |
@@ -162,7 +170,11 @@ Routes defined in `/frontend/src/App.tsx`:
**Tab Structure:**
- **Your Limits & Usage**: Hard + monthly limits with usage bars
- **Credit History**: Transaction log
- **API Activity**: Call statistics (currently placeholder data)
- **API Activity**: Operations by type (using real analytics data)
**v1.1.6 Changes:**
- Fixed fake API Activity data - now shows real `usage_by_type` data
- Removed hardcoded placeholder values
### AI Models (Admin Only)
@@ -176,10 +188,23 @@ Routes defined in `/frontend/src/App.tsx`:
| Route | File | Description |
|-------|------|-------------|
| `/help` | `Help/HelpCenter.tsx` | Documentation, FAQ, support CTAs |
| `/help/docs` | `Help/Documentation.tsx` | Placeholder |
| `/help/system-testing` | `Help/SystemTesting.tsx` | Placeholder |
| `/help/function-testing` | `Help/FunctionTesting.tsx` | Placeholder |
| `/help` | `Help/Help.tsx` | Documentation, FAQ, support CTAs |
**v1.1.7 Changes:**
- Fixed support buttons (now mailto: links)
- Added Dashboard, Setup, Account & Billing documentation sections
- Expanded FAQ with credits, billing, WordPress, automation topics
- Deleted placeholder pages: Documentation.tsx, SystemTesting.tsx, FunctionTesting.tsx
**Documentation Sections:**
- Getting Started (Quick Start, Workflow Overview)
- Dashboard (Metrics, Pipeline, Setup Checklist)
- Setup Module (Add Keywords, Content Settings, Sites)
- Planner Module (Keywords, Clusters, Ideas)
- Writer Module (Tasks, Content, Images)
- Automation Setup
- Account & Billing (Account Settings, Plans, Usage)
- FAQ (~28 questions)
---

6
frontend/src/App.tsx
View File

@@ -102,9 +102,6 @@ const DeploymentPanel = lazy(() => import("./pages/Sites/DeploymentPanel"));
// Help - Lazy loaded
const Help = lazy(() => import("./pages/Help/Help"));
const Docs = lazy(() => import("./pages/Help/Docs"));
const SystemTesting = lazy(() => import("./pages/Help/SystemTesting"));
const FunctionTesting = lazy(() => import("./pages/Help/FunctionTesting"));
// Components - Lazy loaded
const Components = lazy(() => import("./pages/Components"));
@@ -243,9 +240,6 @@ export default function App() {
{/* Help */}
<Route path="/help" element={<Help />} />
<Route path="/help/docs" element={<Docs />} />
<Route path="/help/system-testing" element={<SystemTesting />} />
<Route path="/help/function-testing" element={<FunctionTesting />} />
{/* Components (Showcase Page) */}
<Route path="/components" element={<Components />} />

6
frontend/src/components/header/UserDropdown.tsx
View File

@@ -90,7 +90,7 @@ export default function UserDropdown() {
<DropdownItem
onItemClick={closeDropdown}
tag="a"
to="/profile"
to="/account/settings"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg
@@ -115,7 +115,7 @@ export default function UserDropdown() {
<DropdownItem
onItemClick={closeDropdown}
tag="a"
to="/profile"
to="/account/settings"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg
@@ -140,7 +140,7 @@ export default function UserDropdown() {
<DropdownItem
onItemClick={closeDropdown}
tag="a"
to="/profile"
to="/help"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
<svg

22
frontend/src/pages/Help/Docs.tsx
View File

@@ -1,22 +0,0 @@
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
export default function Docs() {
return (
<>
<PageMeta title="Documentation - IGNY8" description="Complete documentation" />
<ComponentCard title="Coming Soon" desc="Complete documentation">
<div className="text-center py-8">
<p className="text-gray-600 dark:text-gray-400">
Documentation - Coming Soon
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
Comprehensive documentation and guides
</p>
</div>
</ComponentCard>
</>
);
}

22
frontend/src/pages/Help/FunctionTesting.tsx
View File

@@ -1,22 +0,0 @@
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
export default function FunctionTesting() {
return (
<>
<PageMeta title="Function Testing - IGNY8" description="Function testing" />
<ComponentCard title="Coming Soon" desc="Function testing">
<div className="text-center py-8">
<p className="text-gray-600 dark:text-gray-400">
Function Testing - Coming Soon
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
Test individual functions and components
</p>
</div>
</ComponentCard>
</>
);
}

357
frontend/src/pages/Help/Help.tsx
View File

@@ -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>

22
frontend/src/pages/Help/SystemTesting.tsx
View File

@@ -1,22 +0,0 @@
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
export default function SystemTesting() {
return (
<>
<PageMeta title="System Testing - IGNY8" description="System diagnostics" />
<ComponentCard title="Coming Soon" desc="System diagnostics">
<div className="text-center py-8">
<p className="text-gray-600 dark:text-gray-400">
System Testing - Coming Soon
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
Test system functionality and diagnose issues
</p>
</div>
</ComponentCard>
</>
);
}

42
to-do-s/part1/SECTION_5_FINAL_MODS.md
View File

@@ -608,3 +608,45 @@ Create detailed step-by-step documentation for:
16. ✅ Usage
---
## Section 5 HELP Module - All CRITICAL Items Fixed:
1. **Fixed Support Dropdown Links** (UserDropdown.tsx)
- "Edit profile" → `/account/settings`
- "Account settings" → `/account/settings`
- "Support" → `/help`
2. **Implemented Contact Support Button** (Help.tsx)
- Now opens `mailto:support@igny8.com?subject=Support Request`
3. **Implemented Feature Request Button** (Help.tsx)
- Now opens `mailto:feedback@igny8.com?subject=Feature Request`
### Section 5 HIGH Priority Items:
4. **Deleted Placeholder Pages**
- Docs.tsx ❌
- SystemTesting.tsx ❌
- FunctionTesting.tsx ❌
5. **Removed Routes from App.tsx**
- `/help/docs`, `/help/system-testing`, `/help/function-testing`
6. **Added Comprehensive Documentation** (Help.tsx)
- **Dashboard** section - Metrics, Pipeline, Setup Checklist
- **Setup Module** section - Add Keywords, Content Settings, Sites Management
- **Account & Billing** section - Account Settings, Plans & Billing, Usage & Limits
- **8 new FAQ items** covering credits, billing, WordPress, automation
### Files Changed:
- CHANGELOG.md - Updated to v1.1.7
- PAGES.md - Updated to v1.1.7
- App.tsx - Removed placeholder imports/routes
- UserDropdown.tsx - Fixed all links
- Help.tsx - Full documentation overhaul
### Files Deleted:
- Docs.tsx
- SystemTesting.tsx
- FunctionTesting.tsx