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

GLobal Styling part 1

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 14:54:27 +00:00
parent 0e57c50e56
commit e96069775c
60 changed files with 812 additions and 1712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/pages/Settings/ImportExport.tsx
View File

@@ -1,7 +1,7 @@
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
import { Card } from "../../components/ui/card";
import { Download, Upload, Database, FileArchive, CheckCircle } from 'lucide-react';
import { DownloadIcon, UploadIcon, DatabaseIcon, FileArchiveIcon, CheckCircleIcon } from '../../icons';
export default function ImportExport() {
return (
@@ -12,7 +12,7 @@ export default function ImportExport() {
<div className="text-center py-8 max-w-3xl mx-auto">
<div className="mb-6 flex justify-center">
<div className="p-4 bg-brand-100 dark:bg-brand-900/30 rounded-full">
<Database className="w-12 h-12 text-brand-600 dark:text-brand-400" />
<DatabaseIcon className="w-12 h-12 text-brand-600 dark:text-brand-400" />
</div>
</div>
@@ -30,31 +30,31 @@ export default function ImportExport() {
</h2>
<div className="space-y-3 text-left">
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Export your keywords as a file</strong> (backup or share)
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Export all your articles</strong> in different formats
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Import keywords from other sources</strong>
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Backup and restore</strong> your entire account
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Download your settings</strong> and configurations
</div>

8
frontend/src/pages/Settings/Sites.tsx
View File

@@ -22,10 +22,10 @@ import Badge from '../../components/ui/badge/Badge';
// Site Icon SVG - Globe
const SiteIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M2 12h20" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-brand-500">
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M2 12h20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);

60
frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
View File

@@ -1,16 +1,16 @@
import React, { useState, useEffect, useCallback } from 'react';
import {
CheckCircle,
XCircle,
AlertTriangle,
Loader2,
Activity,
Clock,
Globe,
RefreshCw,
TestTube,
Wrench
} from 'lucide-react';
import {
CheckCircleIcon,
XCircleIcon,
AlertTriangleIcon,
Loader2Icon,
ActivityIcon,
ClockIcon,
GlobeIcon,
RefreshCwIcon,
TestTubeIcon,
SettingsIcon as WrenchIcon
} from '../../icons';
import { useSiteStore } from '../../store/siteStore';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { API_BASE_URL, fetchAPI } from '../../services/api';
@@ -343,7 +343,7 @@ export default function WordPressIntegrationDebug() {
if (initializing) {
return (
<div className="p-8 text-center">
<Loader2 className="h-8 w-8 animate-spin mx-auto text-brand-600 dark:text-brand-400" />
<Loader2Icon className="h-8 w-8 animate-spin mx-auto text-brand-600 dark:text-brand-400" />
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Loading WordPress integration...</p>
</div>
);
@@ -354,7 +354,7 @@ export default function WordPressIntegrationDebug() {
return (
<div className="p-8">
<div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6 text-center">
<AlertTriangle className="h-12 w-12 text-warning-600 dark:text-warning-400 mx-auto mb-4" />
<AlertTriangleIcon className="h-12 w-12 text-warning-600 dark:text-warning-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
No WordPress Integration Found
</h3>
@@ -423,13 +423,13 @@ export default function WordPressIntegrationDebug() {
{/* No WordPress Integration Found */}
{initializing ? (
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 text-center">
<Loader2 className="h-8 w-8 animate-spin mx-auto text-gray-400 mb-2" />
<Loader2Icon className="h-8 w-8 animate-spin mx-auto text-gray-400 mb-2" />
<p className="text-gray-600 dark:text-gray-400">Checking for WordPress integration...</p>
</div>
) : !integrationId && activeSite ? (
<div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6">
<div className="flex items-start space-x-3">
<AlertTriangle className="h-8 w-8 text-warning-500 mt-0.5" />
<AlertTriangleIcon className="h-8 w-8 text-warning-500 mt-0.5" />
<div>
<p className="text-lg font-semibold text-warning-800 dark:text-warning-200">No WordPress Integration Found</p>
<p className="text-sm text-warning-600 dark:text-warning-300 mt-2">
@@ -444,7 +444,7 @@ export default function WordPressIntegrationDebug() {
) : !activeSite ? (
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<div className="text-center py-12">
<Globe className="h-12 w-12 mx-auto text-gray-400 mb-4" />
<GlobeIcon className="h-12 w-12 mx-auto text-gray-400 mb-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Site Selected</h3>
<p className="text-gray-500 dark:text-gray-400">
Please select a site to view WordPress integration debug data.
@@ -463,7 +463,7 @@ export default function WordPressIntegrationDebug() {
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-brand-100 hover:bg-brand-200 text-brand-700 rounded-md disabled:opacity-50"
>
<TestTube className="h-3 w-3 mr-1" />
<TestTubeIcon className="h-3 w-3 mr-1" />
Test Connection
</button>
<button
@@ -471,7 +471,7 @@ export default function WordPressIntegrationDebug() {
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-warning-100 hover:bg-warning-200 text-warning-700 rounded-md disabled:opacity-50"
>
<RefreshCw className="h-3 w-3 mr-1" />
<RefreshCwIcon className="h-3 w-3 mr-1" />
Re-sync Metadata
</button>
<button
@@ -479,7 +479,7 @@ export default function WordPressIntegrationDebug() {
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md disabled:opacity-50"
>
<Wrench className="h-3 w-3 mr-1" />
<SettingsIcon className="h-3 w-3 mr-1" />
Validate Content
</button>
</div>
@@ -491,9 +491,9 @@ export default function WordPressIntegrationDebug() {
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">API Connection</span>
{integrationHealth.api_status === 'healthy' ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<XCircle className="h-4 w-4 text-error-500" />
<XCircleIcon className="h-4 w-4 text-error-500" />
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">{integrationHealth.api_message}</p>
@@ -506,9 +506,9 @@ export default function WordPressIntegrationDebug() {
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Plugin Status</span>
{integrationHealth.plugin_active ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<XCircle className="h-4 w-4 text-error-500" />
<XCircleIcon className="h-4 w-4 text-error-500" />
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">
@@ -523,9 +523,9 @@ export default function WordPressIntegrationDebug() {
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Sync Status</span>
{integrationHealth.sync_healthy ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<AlertTriangle className="h-4 w-4 text-warning-500" />
<AlertTriangleIcon className="h-4 w-4 text-warning-500" />
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">
@@ -539,7 +539,7 @@ export default function WordPressIntegrationDebug() {
</div>
) : (
<div className="text-center py-4 text-gray-500">
<Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />
<Loader2Icon className="h-5 w-5 animate-spin mx-auto mb-2" />
Loading WordPress integration health...
</div>
)}
@@ -587,7 +587,7 @@ export default function WordPressIntegrationDebug() {
</div>
) : (
<div className="text-center py-8 text-gray-500">
<Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
<ClockIcon className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>No WordPress sync events yet. Actions will appear here in real-time.</p>
<p className="text-xs mt-2">Content publishing, metadata sync, and webhook calls will be logged here.</p>
</div>
@@ -631,10 +631,10 @@ export default function WordPressIntegrationDebug() {
</td>
<td className="px-6 py-4 whitespace-nowrap">
{validation.matches ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<div className="flex items-center space-x-1">
<XCircle className="h-4 w-4 text-error-500" />
<XCircleIcon className="h-4 w-4 text-error-500" />
{validation.error && (
<span className="text-xs text-error-600">{validation.error}</span>
)}

4
frontend/src/pages/Sites/Content.tsx
View File

@@ -11,7 +11,7 @@ import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';
import { Search } from 'lucide-react';
import { SearchIcon } from '../../icons';
import {
PencilIcon,
EyeIcon,
@@ -139,7 +139,7 @@ export default function SiteContentManager() {
<Card className="p-4 mb-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
<input
type="text"
placeholder="Search content..."

2
frontend/src/pages/Sites/Dashboard.tsx
View File

@@ -344,7 +344,7 @@ export default function SiteDashboard() {
<h4 className="font-semibold text-gray-900 mb-1">Publishing Queue</h4>
<p className="text-sm text-gray-600">View scheduled content</p>
</div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-amber-500 transition" />
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-warning-500 transition" />
</button>
</div>
</ComponentCard>

3
frontend/src/pages/Sites/List.tsx
View File

@@ -601,8 +601,7 @@ export default function SiteList() {
{/* Standard Filters Bar for Grid View - Matches Table View */}
<div className="flex justify-center mb-4">
<div
className="w-[75%] igny8-filter-bar p-3 rounded-lg bg-transparent"
style={{ boxShadow: '0 2px 6px 3px rgba(0, 0, 0, 0.08)' }}
className="w-[75%] igny8-filter-bar p-3 rounded-lg bg-transparent shadow-theme-md"
>
<div className="flex flex-nowrap gap-3 items-center justify-between w-full">
<div className="flex flex-nowrap gap-3 items-center flex-1 min-w-0 w-full">

2
frontend/src/pages/Sites/PostEditor.tsx
View File

@@ -5,7 +5,7 @@
*/
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { SaveIcon, XIcon, FileTextIcon, TagIcon, CheckCircleIcon, XCircleIcon, AlertCircleIcon } from 'lucide-react';
import { SaveIcon, XIcon, FileTextIcon, TagIcon, CheckCircleIcon, XCircleIcon, AlertCircleIcon } from '../../icons';
import PageMeta from '../../components/common/PageMeta';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';

24
frontend/src/pages/Sites/PublishingQueue.tsx
View File

@@ -166,14 +166,14 @@ export default function PublishingQueue() {
}
if (item.site_status === 'publishing') {
return (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-brand-100 text-brand-700 dark:bg-brand-900 dark:text-brand-300">
<ArrowRightIcon className="w-3 h-3 animate-pulse" />
Publishing...
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300">
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-300">
<ClockIcon className="w-3 h-3" />
Scheduled
</span>
@@ -228,8 +228,8 @@ export default function PublishingQueue() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
<ClockIcon className="w-5 h-5 text-amber-600" />
<div className="size-10 rounded-lg bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center">
<ClockIcon className="w-5 h-5 text-warning-600" />
</div>
<div>
<p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.scheduled}</p>
@@ -239,8 +239,8 @@ export default function PublishingQueue() {
</Card>
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
<ArrowRightIcon className="w-5 h-5 text-blue-600" />
<div className="size-10 rounded-lg bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
<ArrowRightIcon className="w-5 h-5 text-brand-600" />
</div>
<div>
<p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.publishing}</p>
@@ -250,8 +250,8 @@ export default function PublishingQueue() {
</Card>
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
<CheckCircleIcon className="w-5 h-5 text-green-600" />
<div className="size-10 rounded-lg bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
<CheckCircleIcon className="w-5 h-5 text-success-600" />
</div>
<div>
<p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.published}</p>
@@ -261,8 +261,8 @@ export default function PublishingQueue() {
</Card>
<Card className="p-4">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
<TrashBinIcon className="w-5 h-5 text-red-600" />
<div className="size-10 rounded-lg bg-error-100 dark:bg-error-900/30 flex items-center justify-center">
<TrashBinIcon className="w-5 h-5 text-error-600" />
</div>
<div>
<p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.failed}</p>
@@ -377,7 +377,7 @@ export default function PublishingQueue() {
</button>
<button
onClick={() => handleRemoveFromQueue(item)}
className="p-2 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
className="p-2 text-error-500 hover:text-error-700 dark:text-error-400 dark:hover:text-error-300 rounded-lg hover:bg-error-50 dark:hover:bg-error-900/20"
title="Remove from queue"
>
<TrashBinIcon className="w-4 h-4" />
@@ -422,7 +422,7 @@ export default function PublishingQueue() {
<div
key={item.id}
onClick={() => handleViewContent(item)}
className="text-xs p-1 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200 rounded truncate cursor-pointer hover:bg-amber-200 dark:hover:bg-amber-900/50"
className="text-xs p-1 bg-warning-100 dark:bg-warning-900/30 text-warning-800 dark:text-warning-200 rounded truncate cursor-pointer hover:bg-warning-200 dark:hover:bg-warning-900/50"
title={item.title}
>
{item.title}

10
frontend/src/pages/Sites/Settings.tsx
View File

@@ -861,7 +861,7 @@ export default function SiteSettings() {
setPublishingSettings({ ...publishingSettings, publish_time_slots: newSlots });
savePublishingSettings({ publish_time_slots: newSlots });
}}
className="p-2 text-gray-400 hover:text-red-500 transition-colors"
className="p-2 text-gray-400 hover:text-error-500 transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -888,14 +888,14 @@ export default function SiteSettings() {
</div>
{/* Info Box */}
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div className="mt-6 p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg">
<div className="flex items-start gap-3">
<svg className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div className="text-sm text-blue-800 dark:text-blue-200">
<div className="text-sm text-brand-800 dark:text-brand-200">
<p className="font-medium mb-1">How Publishing Works</p>
<ul className="list-disc list-inside space-y-1 text-blue-700 dark:text-blue-300">
<ul className="list-disc list-inside space-y-1 text-brand-700 dark:text-brand-300">
<li>Content moves from <span className="font-medium">Draft</span> → <span className="font-medium">Review</span> → <span className="font-medium">Approved</span> → <span className="font-medium">Published</span></li>
<li>Auto-approval moves content from Review to Approved automatically</li>
<li>Auto-publish sends Approved content to your WordPress site</li>

3
frontend/src/pages/Writer/Images.tsx
View File

@@ -657,8 +657,7 @@ export default function Images() {
<img
src={modalImageUrl}
alt="Content image"
className="w-full h-auto object-contain rounded-lg"
style={{ maxHeight: '90vh' }}
className="w-full h-auto object-contain rounded-lg max-h-[90vh]"
/>
</div>
)}

34
frontend/src/pages/account/AccountSettingsPage.tsx
View File

@@ -6,9 +6,9 @@
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import {
Save, Loader2, Settings, User, Users, UserPlus, Shield, Lock, X
} from 'lucide-react';
import {
SaveIcon, Loader2Icon, SettingsIcon, UserIcon, UsersIcon, UserIcon as UserPlusIcon, LockIcon, LockIcon as ShieldIcon, XIcon
} from '../../icons';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import Badge from '../../components/ui/badge/Badge';
@@ -259,9 +259,9 @@ export default function AccountSettingsPage() {
};
const tabs = [
{ id: 'account' as TabType, label: 'Account', icon: <Settings className="w-4 h-4" /> },
{ id: 'profile' as TabType, label: 'Profile', icon: <User className="w-4 h-4" /> },
{ id: 'team' as TabType, label: 'Team', icon: <Users className="w-4 h-4" /> },
{ id: 'account' as TabType, label: 'Account', icon: <SettingsIcon className="w-4 h-4" /> },
{ id: 'profile' as TabType, label: 'Profile', icon: <UserIcon className="w-4 h-4" /> },
{ id: 'team' as TabType, label: 'Team', icon: <UsersIcon className="w-4 h-4" /> },
];
if (loading) {
@@ -270,12 +270,12 @@ export default function AccountSettingsPage() {
<PageMeta title="Account Settings" description="Manage your account, profile, and team" />
<PageHeader
title="Account Settings"
badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <SettingsIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
</div>
</div>
@@ -297,7 +297,7 @@ export default function AccountSettingsPage() {
<PageHeader
title={pageTitles[activeTab].title}
description={pageTitles[activeTab].description}
badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <SettingsIcon className="w-4 h-4" />, color: 'blue' }}
parent="Account Settings"
/>
<div className="p-6">
@@ -468,7 +468,7 @@ export default function AccountSettingsPage() {
variant="primary"
tone="brand"
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Changes'}
</Button>
@@ -608,7 +608,7 @@ export default function AccountSettingsPage() {
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center gap-2">
<Lock className="w-5 h-5" />
<LockIcon className="w-5 h-5" />
Security
</h2>
<Button
@@ -627,7 +627,7 @@ export default function AccountSettingsPage() {
variant="primary"
tone="brand"
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Profile'}
</Button>
@@ -658,7 +658,7 @@ export default function AccountSettingsPage() {
{teamLoading ? (
<div className="flex items-center justify-center h-32">
<Loader2 className="w-6 h-6 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-6 h-6 animate-spin text-[var(--color-brand-500)]" />
</div>
) : (
<Card className="overflow-hidden">
@@ -714,7 +714,7 @@ export default function AccountSettingsPage() {
{members.length === 0 && (
<tr>
<td colSpan={6} className="py-12 text-center text-gray-500 dark:text-gray-400">
<Users className="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" />
<UsersIcon className="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" />
No team members yet. Invite your first team member!
</td>
</tr>
@@ -728,7 +728,7 @@ export default function AccountSettingsPage() {
{/* Role Permissions Info */}
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center gap-2">
<Shield className="w-5 h-5" />
<ShieldIcon className="w-5 h-5" />
Role Permissions
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -841,14 +841,14 @@ export default function AccountSettingsPage() {
<Card className="relative z-10 w-full max-w-md p-6 m-4">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Lock className="w-5 h-5" />
<LockIcon className="w-5 h-5" />
Change Password
</h2>
<button
onClick={() => setShowPasswordModal(false)}
className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<X className="w-5 h-5" />
<XIcon className="w-5 h-5" />
</button>
</div>

18
frontend/src/pages/account/ContentSettingsPage.tsx
View File

@@ -6,9 +6,9 @@
import { useState, useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import {
Save, Loader2, Image as ImageIcon, FileText, Send, Settings
} from 'lucide-react';
import {
SaveIcon, Loader2Icon, ImageIcon, FileTextIcon, PaperPlaneIcon as SendIcon, SettingsIcon
} from '../../icons';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import { fetchAPI } from '../../services/api';
@@ -316,7 +316,7 @@ export default function ContentSettingsPage() {
<PageMeta title="Content Settings" description="Configure your content generation settings" />
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
</div>
</div>
@@ -346,7 +346,7 @@ export default function ContentSettingsPage() {
<Card className="p-6">
<div className="flex items-center gap-3 mb-6">
<div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
<FileText className="w-5 h-5 text-brand-600 dark:text-brand-400" />
<FileTextIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
</div>
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Content Generation</h2>
@@ -410,7 +410,7 @@ export default function ContentSettingsPage() {
tone="brand"
onClick={handleSave}
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Settings'}
</Button>
@@ -424,7 +424,7 @@ export default function ContentSettingsPage() {
<Card className="p-6">
<div className="flex items-center gap-3 mb-6">
<div className="p-2 bg-success-100 dark:bg-success-900/30 rounded-lg">
<Send className="w-5 h-5 text-success-600 dark:text-success-400" />
<PaperPlaneIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
</div>
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">WordPress Publishing</h2>
@@ -486,7 +486,7 @@ export default function ContentSettingsPage() {
tone="brand"
onClick={handleSave}
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Settings'}
</Button>
@@ -643,7 +643,7 @@ export default function ContentSettingsPage() {
tone="brand"
onClick={handleSave}
disabled={saving}
startIcon={saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
startIcon={saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
>
{saving ? 'Saving...' : 'Save Settings'}
</Button>

44
frontend/src/pages/account/NotificationsPage.tsx
View File

@@ -2,17 +2,17 @@ import { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { Link } from 'react-router-dom';
import {
Bell,
CheckCircle,
AlertTriangle,
XCircle,
Info,
Trash2,
CheckCheck,
Filter,
Calendar,
Globe,
} from 'lucide-react';
BellIcon,
CheckCircleIcon,
AlertTriangleIcon,
XCircleIcon,
InfoIcon,
Trash2Icon,
CheckCheckIcon,
FilterIcon,
CalendarIcon,
GlobeIcon,
} from '../../icons';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
@@ -70,13 +70,13 @@ export default function NotificationsPage() {
const getSeverityIcon = (severity: string) => {
switch (severity) {
case 'success':
return <CheckCircle className="w-5 h-5 text-success-500" />;
return <CheckCircleIcon className="w-5 h-5 text-success-500" />;
case 'warning':
return <AlertTriangle className="w-5 h-5 text-warning-500" />;
return <AlertTriangleIcon className="w-5 h-5 text-warning-500" />;
case 'error':
return <XCircle className="w-5 h-5 text-error-500" />;
return <XCircleIcon className="w-5 h-5 text-error-500" />;
default:
return <Info className="w-5 h-5 text-brand-500" />;
return <InfoIcon className="w-5 h-5 text-brand-500" />;
}
};
@@ -183,7 +183,7 @@ export default function NotificationsPage() {
<PageHeader
title="Notifications"
description="View and manage your notifications"
badge={{ icon: <Bell className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <BellIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6 space-y-6">
@@ -210,7 +210,7 @@ export default function NotificationsPage() {
onClick={() => setShowFilters(!showFilters)}
className="flex items-center gap-2"
>
<Filter className="w-4 h-4" />
<FilterIcon className="w-4 h-4" />
Filters
</Button>
@@ -221,7 +221,7 @@ export default function NotificationsPage() {
onClick={handleMarkAllRead}
className="flex items-center gap-2"
>
<CheckCheck className="w-4 h-4" />
<CheckCheckIcon className="w-4 h-4" />
Mark All Read
</Button>
)}
@@ -321,7 +321,7 @@ export default function NotificationsPage() {
</div>
) : filteredNotifications.length === 0 ? (
<div className="text-center p-12">
<Bell className="w-12 h-12 text-gray-400 mx-auto mb-3" />
<BellIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
<p className="text-gray-600 dark:text-gray-400">
{apiNotifications.length === 0
? 'No notifications yet'
@@ -363,7 +363,7 @@ export default function NotificationsPage() {
{/* Metadata */}
<div className="flex flex-wrap items-center gap-3 mt-2 text-xs text-gray-500 dark:text-gray-500">
<span className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
<CalendarIcon className="w-3 h-3" />
{formatTimestamp(notification.created_at)}
</span>
@@ -383,7 +383,7 @@ export default function NotificationsPage() {
handleNotificationClick(notification.id, false)
}
>
<CheckCircle className="w-4 h-4" />
<CheckCircleIcon className="w-4 h-4" />
</Button>
)}
@@ -393,7 +393,7 @@ export default function NotificationsPage() {
onClick={() => handleDelete(notification.id)}
className="text-error-600 hover:text-error-700 hover:bg-error-50 dark:hover:bg-error-900/20"
>
<Trash2 className="w-4 h-4" />
<Trash2Icon className="w-4 h-4" />
</Button>
</div>
</div>

60
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -8,10 +8,10 @@
import { useState, useEffect, useRef } from 'react';
import { Link, useLocation } from 'react-router-dom';
import {
CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
Loader2, AlertCircle, CheckCircle, Download, Zap, Globe, Users, X
} from 'lucide-react';
import {
CreditCardIcon, BoxIcon as PackageIcon, TrendingUpIcon, FileTextIcon, WalletIcon, ArrowUpIcon as ArrowUpCircleIcon,
Loader2Icon, AlertCircleIcon, CheckCircleIcon, DownloadIcon, ZapIcon, GlobeIcon, UsersIcon, XIcon
} from '../../icons';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
@@ -346,11 +346,11 @@ export default function PlansAndBillingPage() {
<PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
<PageHeader
title="Plans & Billing"
badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <CreditCardIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
</div>
</>
@@ -381,7 +381,7 @@ export default function PlansAndBillingPage() {
<PageHeader
title={pageTitles[activeTab].title}
description={pageTitles[activeTab].description}
badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <CreditCardIcon className="w-4 h-4" />, color: 'blue' }}
parent="Plans & Billing"
/>
<div className="p-6">
@@ -399,7 +399,7 @@ export default function PlansAndBillingPage() {
{error && (
<div className="mb-6 p-4 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg flex items-center gap-3">
<AlertCircle className="w-5 h-5 text-error-600" />
<AlertCircleIcon className="w-5 h-5 text-error-600" />
<p className="text-error-800 dark:text-error-200">{error}</p>
</div>
)}
@@ -416,7 +416,7 @@ export default function PlansAndBillingPage() {
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Your Current Plan</h2>
{!hasActivePlan && (
<div className="p-4 mb-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200 flex items-start gap-3">
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
<AlertCircleIcon className="w-5 h-5 mt-0.5 flex-shrink-0" />
<div>
<p className="font-medium">No Active Plan</p>
<p className="text-sm mt-1">Choose a plan below to activate your account and unlock all features.</p>
@@ -442,7 +442,7 @@ export default function PlansAndBillingPage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<div className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 rounded-lg border border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-2 text-sm text-brand-700 dark:text-brand-300 mb-1">
<Zap className="w-4 h-4" />
<ZapIcon className="w-4 h-4" />
Monthly Credits
</div>
<div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
@@ -451,7 +451,7 @@ export default function PlansAndBillingPage() {
</div>
<div className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 rounded-lg border border-success-200 dark:border-success-700">
<div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
<Wallet className="w-4 h-4" />
<WalletIcon className="w-4 h-4" />
Current Balance
</div>
<div className="text-2xl font-bold text-success-600 dark:text-success-400">
@@ -460,7 +460,7 @@ export default function PlansAndBillingPage() {
</div>
<div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg border border-purple-200 dark:border-purple-700">
<div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
<Package className="w-4 h-4" />
<PackageIcon className="w-4 h-4" />
Renewal Date
</div>
<div className="text-lg font-bold text-purple-600 dark:text-purple-400">
@@ -478,7 +478,7 @@ export default function PlansAndBillingPage() {
tone="brand"
as={Link}
to="/account/plans/upgrade"
startIcon={<ArrowUpCircle className="w-4 h-4" />}
startIcon={<ArrowUpIcon className="w-4 h-4" />}
>
Upgrade Plan
</Button>
@@ -513,7 +513,7 @@ export default function PlansAndBillingPage() {
: ['AI Content Writer', 'Image Generation', 'Auto Publishing', 'Custom Prompts', 'Email Support', 'API Access'])
.map((feature: string, index: number) => (
<div key={index} className="flex items-start gap-2 text-sm">
<CheckCircle className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
<CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
</div>
))}
@@ -544,7 +544,7 @@ export default function PlansAndBillingPage() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<Globe className="w-4 h-4" />
<GlobeIcon className="w-4 h-4" />
Sites
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -553,7 +553,7 @@ export default function PlansAndBillingPage() {
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<Users className="w-4 h-4" />
<UsersIcon className="w-4 h-4" />
Team Members
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -562,7 +562,7 @@ export default function PlansAndBillingPage() {
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<FileText className="w-4 h-4" />
<FileTextIcon className="w-4 h-4" />
Content Words/mo
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -575,7 +575,7 @@ export default function PlansAndBillingPage() {
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
<Zap className="w-4 h-4" />
<ZapIcon className="w-4 h-4" />
Monthly Credits
</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
@@ -593,7 +593,7 @@ export default function PlansAndBillingPage() {
<div className="space-y-6">
{/* Upgrade Plans Section */}
<div>
<div className="mx-auto" style={{ maxWidth: '1560px' }}>
<div className="mx-auto max-w-[1560px]">
<PricingTable1
title=""
plans={plans
@@ -616,24 +616,24 @@ export default function PlansAndBillingPage() {
{/* Plan Change Policy */}
<Card className="p-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mt-6">
<h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
<AlertCircle className="w-5 h-5" />
<AlertCircleIcon className="w-5 h-5" />
Plan Change Policy
</h3>
<ul className="space-y-2 text-sm text-brand-800 dark:text-brand-200">
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
<CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
Upgrades take effect immediately with prorated billing
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
<CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
Downgrades take effect at the end of your current billing period
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
<CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
Unused credits carry over when changing plans
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
<CheckCircleIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
Cancel anytime - no long-term commitments
</li>
</ul>
@@ -677,7 +677,7 @@ export default function PlansAndBillingPage() {
{invoices.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-center text-gray-500">
<FileText className="w-12 h-12 mx-auto mb-2 text-gray-400" />
<FileTextIcon className="w-12 h-12 mx-auto mb-2 text-gray-400" />
No invoices yet
</td>
</tr>
@@ -702,7 +702,7 @@ export default function PlansAndBillingPage() {
variant="ghost"
tone="brand"
size="sm"
startIcon={<Download className="w-4 h-4" />}
startIcon={<DownloadIcon className="w-4 h-4" />}
className="ml-auto"
onClick={() => handleDownloadInvoice(invoice.id)}
>
@@ -790,7 +790,7 @@ export default function PlansAndBillingPage() {
{paymentMethods.map((method) => (
<div key={method.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
<div className="flex items-center gap-4">
<CreditCard className="w-8 h-8 text-gray-400" />
<CreditCardIcon className="w-8 h-8 text-gray-400" />
<div>
<div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
<div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
@@ -837,12 +837,12 @@ export default function PlansAndBillingPage() {
onClick={() => setShowCancelConfirm(false)}
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
>
<X className="w-5 h-5 text-gray-500" />
<XIcon className="w-5 h-5 text-gray-500" />
</button>
</div>
<div className="p-6 space-y-4">
<div className="flex items-start gap-3 p-4 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
<AlertCircle className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 flex-shrink-0" />
<AlertCircleIcon className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-warning-800 dark:text-warning-200">
<p className="font-medium mb-1">Are you sure you want to cancel?</p>
<p>Your subscription will remain active until the end of your current billing period. After that:</p>
@@ -882,7 +882,7 @@ export default function PlansAndBillingPage() {
>
{planLoadingId === currentSubscription?.id ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
<Loader2Icon className="w-4 h-4 mr-2 animate-spin" />
Cancelling...
</>
) : (

980
frontend/src/pages/account/PlansAndBillingPage.tsx.backup
View File

@@ -1,980 +0,0 @@
/**
* Plans & Billing Page - Consolidated
* Tabs: Current Plan, Upgrade/Downgrade, Credits Overview, Purchase Credits, Billing History, Payment Methods
*/
import { useState, useEffect, useRef } from 'react';
import {
CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
Loader2, AlertCircle, CheckCircle, Download
} from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import { useToast } from '../../components/ui/toast/ToastContainer';
import {
getCreditBalance,
getCreditPackages,
getInvoices,
getAvailablePaymentMethods,
purchaseCreditPackage,
downloadInvoicePDF,
getPayments,
submitManualPayment,
createPaymentMethod,
deletePaymentMethod,
setDefaultPaymentMethod,
type CreditBalance,
type CreditPackage,
type Invoice,
type PaymentMethod,
type Payment,
getPlans,
getSubscriptions,
createSubscription,
cancelSubscription,
type Plan,
type Subscription,
} from '../../services/billing.api';
import { useAuthStore } from '../../store/authStore';
type TabType = 'plan' | 'credits' | 'billing-history';
export default function PlansAndBillingPage() {
const [activeTab, setActiveTab] = useState<TabType>('plan');
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string>('');
const [planLoadingId, setPlanLoadingId] = useState<number | null>(null);
const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);
// Data states
const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
const [packages, setPackages] = useState<CreditPackage[]>([]);
const [invoices, setInvoices] = useState<Invoice[]>([]);
const [payments, setPayments] = useState<Payment[]>([]);
const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
const [plans, setPlans] = useState<Plan[]>([]);
const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string | undefined>(undefined);
const [manualPayment, setManualPayment] = useState({
invoice_id: '',
amount: '',
payment_method: '',
reference: '',
notes: '',
});
const [newPaymentMethod, setNewPaymentMethod] = useState({
type: 'bank_transfer',
display_name: '',
instructions: '',
});
const { user } = useAuthStore.getState();
const hasLoaded = useRef(false);
const isAwsAdmin = user?.account?.slug === 'aws-admin';
const handleBillingError = (err: any, fallback: string) => {
const message = err?.message || fallback;
setError(message);
toast?.error?.(message);
};
const toast = useToast();
useEffect(() => {
if (hasLoaded.current) return;
hasLoaded.current = true;
loadData();
}, []);
const loadData = async (allowRetry = true) => {
try {
setLoading(true);
// Fetch in controlled sequence to avoid burst 429s on auth/system scopes
const balanceData = await getCreditBalance();
// Small gap between auth endpoints to satisfy tight throttles
const wait = (ms: number) => new Promise((res) => setTimeout(res, ms));
const packagesPromise = getCreditPackages();
const invoicesPromise = getInvoices({});
const paymentsPromise = getPayments({});
const methodsPromise = getAvailablePaymentMethods();
const plansData = await getPlans();
await wait(400);
// Subscriptions: retry once on 429 after short backoff; do not hard-fail page
let subsData: { results: Subscription[] } = { results: [] };
try {
subsData = await getSubscriptions();
} catch (subErr: any) {
if (subErr?.status === 429 && allowRetry) {
await wait(2500);
try {
subsData = await getSubscriptions();
} catch {
subsData = { results: [] };
}
} else {
subsData = { results: [] };
}
}
const [packagesData, invoicesData, paymentsData, methodsData] = await Promise.all([
packagesPromise,
invoicesPromise,
paymentsPromise,
methodsPromise,
]);
setCreditBalance(balanceData);
setPackages(packagesData.results || []);
setInvoices(invoicesData.results || []);
setPayments(paymentsData.results || []);
// Prefer manual payment method id 14 as default (tenant-facing)
const methods = (methodsData.results || []).filter((m) => m.is_enabled !== false);
setPaymentMethods(methods);
if (methods.length > 0) {
// Preferred ordering: bank_transfer (default), then manual
const bank = methods.find((m) => m.type === 'bank_transfer');
const manual = methods.find((m) => m.type === 'manual');
const selected =
bank ||
manual ||
methods.find((m) => m.is_default) ||
methods[0];
setSelectedPaymentMethod((prev) => prev || selected.type || selected.id);
}
// Surface all active plans (avoid hiding plans and showing empty state)
const activePlans = (plansData.results || []).filter((p) => p.is_active !== false);
// Exclude Enterprise plan for non aws-admin accounts
const filteredPlans = activePlans.filter((p) => {
const name = (p.name || '').toLowerCase();
const slug = (p.slug || '').toLowerCase();
const isEnterprise = name.includes('enterprise') || slug === 'enterprise';
return isAwsAdmin ? true : !isEnterprise;
});
// Ensure the user's assigned plan is included even if subscriptions list is empty
const accountPlan = user?.account?.plan;
const isAccountEnterprise = (() => {
if (!accountPlan) return false;
const name = (accountPlan.name || '').toLowerCase();
const slug = (accountPlan.slug || '').toLowerCase();
return name.includes('enterprise') || slug === 'enterprise';
})();
const shouldIncludeAccountPlan = accountPlan && (!isAccountEnterprise || isAwsAdmin);
if (shouldIncludeAccountPlan && !filteredPlans.find((p) => p.id === accountPlan.id)) {
filteredPlans.push(accountPlan as any);
}
setPlans(filteredPlans);
const subs = subsData.results || [];
if (subs.length === 0 && shouldIncludeAccountPlan && accountPlan) {
subs.push({
id: accountPlan.id || 0,
plan: accountPlan,
status: 'active',
} as any);
}
setSubscriptions(subs);
} catch (err: any) {
// Handle throttling gracefully: don't block the page on subscriptions throttle
if (err?.status === 429 && allowRetry) {
setError('Request was throttled. Retrying...');
setTimeout(() => loadData(false), 2500);
} else if (err?.status === 429) {
setError(''); // suppress lingering banner
} else {
setError(err.message || 'Failed to load billing data');
console.error('Billing load error:', err);
}
} finally {
setLoading(false);
}
};
const handleSelectPlan = async (planId: number) => {
try {
if (!selectedPaymentMethod && paymentMethods.length > 0) {
setError('Select a payment method to continue');
return;
}
setPlanLoadingId(planId);
await createSubscription({ plan_id: planId, payment_method: selectedPaymentMethod });
toast?.success?.('Subscription updated');
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to update subscription');
} finally {
setPlanLoadingId(null);
}
};
const handleCancelSubscription = async () => {
if (!currentSubscription?.id) {
setError('No active subscription to cancel');
return;
}
try {
setPlanLoadingId(currentSubscription.id);
await cancelSubscription(currentSubscription.id);
toast?.success?.('Subscription cancellation requested');
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to cancel subscription');
} finally {
setPlanLoadingId(null);
}
};
const handlePurchase = async (packageId: number) => {
try {
if (!selectedPaymentMethod && paymentMethods.length > 0) {
setError('Select a payment method to continue');
return;
}
setPurchaseLoadingId(packageId);
await purchaseCreditPackage({
package_id: packageId,
payment_method: (selectedPaymentMethod as any) || 'stripe',
});
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to purchase credits');
} finally {
setPurchaseLoadingId(null);
setLoading(false);
}
};
const handleDownloadInvoice = async (invoiceId: number) => {
try {
const blob = await downloadInvoicePDF(invoiceId);
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `invoice-${invoiceId}.pdf`;
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
} catch (err: any) {
handleBillingError(err, 'Failed to download invoice');
}
};
const handleSubmitManualPayment = async () => {
try {
const payload = {
invoice_id: manualPayment.invoice_id ? Number(manualPayment.invoice_id) : undefined,
amount: manualPayment.amount,
payment_method: manualPayment.payment_method || (selectedPaymentMethod as any) || 'manual',
reference: manualPayment.reference,
notes: manualPayment.notes,
};
await submitManualPayment(payload as any);
toast?.success?.('Manual payment submitted');
setManualPayment({ invoice_id: '', amount: '', payment_method: '', reference: '', notes: '' });
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to submit payment');
}
};
const handleAddPaymentMethod = async () => {
if (!newPaymentMethod.display_name.trim()) {
setError('Payment method name is required');
return;
}
try {
await createPaymentMethod(newPaymentMethod as any);
toast?.success?.('Payment method added');
setNewPaymentMethod({ type: 'bank_transfer', display_name: '', instructions: '' });
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to add payment method');
}
};
const handleRemovePaymentMethod = async (id: string) => {
try {
await deletePaymentMethod(id);
toast?.success?.('Payment method removed');
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to remove payment method');
}
};
const handleSetDefaultPaymentMethod = async (id: string) => {
try {
await setDefaultPaymentMethod(id);
toast?.success?.('Default payment method updated');
await loadData();
} catch (err: any) {
handleBillingError(err, 'Failed to set default');
}
};
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
</div>
);
}
const currentSubscription = subscriptions.find((sub) => sub.status === 'active') || subscriptions[0];
const currentPlanId = typeof currentSubscription?.plan === 'object' ? currentSubscription.plan.id : currentSubscription?.plan;
// Fallback to account plan if subscription is missing
const accountPlanId = user?.account?.plan?.id;
const effectivePlanId = currentPlanId || accountPlanId;
const currentPlan = plans.find((p) => p.id === effectivePlanId) || user?.account?.plan;
const hasActivePlan = Boolean(effectivePlanId);
const hasPaymentMethods = paymentMethods.length > 0;
const subscriptionStatus = currentSubscription?.status || (hasActivePlan ? 'active' : 'none');
const hasPendingManualPayment = payments.some((p) => p.status === 'pending_approval');
const tabs = [
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
{ id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'billing-history' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
];
return (
<div className="p-6">
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Plans & Billing</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage your subscription, credits, and billing information
</p>
</div>
{/* Activation / pending payment notice */}
{!hasActivePlan && (
<div className="mb-4 p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
No active plan. Choose a plan below to activate your account.
</div>
)}
{hasPendingManualPayment && (
<div className="mb-4 p-4 rounded-lg border border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-100">
We received your manual payment. It’s pending admin approval; activation will complete once approved.
</div>
)}
{error && (
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
<AlertCircle className="w-5 h-5 text-red-600" />
<p className="text-red-800 dark:text-red-200">{error}</p>
</div>
)}
{/* Tabs */}
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
<nav className="-mb-px flex space-x-8 overflow-x-auto">
{tabs.map((tab) => (
<button
type="button"
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
${activeTab === tab.id
? 'border-blue-500 text-blue-600 dark:text-blue-400'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
}
`}
>
{tab.icon}
{tab.label}
</button>
))}
</nav>
</div>
{/* Tab Content */}
<div className="mt-6">
{/* Current Plan Tab */}
{activeTab === 'plan' && (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
{!hasActivePlan && (
<div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
No active plan found. Please choose a plan to activate your account.
</div>
)}
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{currentPlan?.name || 'No Plan Selected'}
</div>
<div className="text-gray-600 dark:text-gray-400">
{currentPlan?.description || 'Select a plan to unlock full access.'}
</div>
</div>
<Badge variant="light" color={hasActivePlan ? 'success' : 'warning'}>
{hasActivePlan ? subscriptionStatus : 'plan required'}
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{creditBalance?.plan_credits_per_month?.toLocaleString?.() || 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-sm text-gray-600 dark:text-gray-400">Current Balance</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{creditBalance?.credits?.toLocaleString?.() || 0}
</div>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="text-sm text-gray-600 dark:text-gray-400">Period Ends</div>
<div className="text-2xl font-bold text-gray-900 dark:text-white text-base">
{currentSubscription?.current_period_end
? new Date(currentSubscription.current_period_end).toLocaleDateString()
: '—'}
</div>
</div>
</div>
<div className="mt-6 flex gap-3">
<Button variant="primary" tone="brand" onClick={() => setActiveTab('upgrade')}>
{hasActivePlan ? 'Change Plan' : 'Choose a Plan'}
</Button>
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
Purchase Credits
</Button>
{hasActivePlan && (
<Button
variant="outline"
tone="neutral"
disabled={planLoadingId === currentSubscription?.id}
onClick={handleCancelSubscription}
>
{planLoadingId === currentSubscription?.id ? 'Cancelling...' : 'Cancel Subscription'}
</Button>
)}
</div>
</div>
</Card>
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Plan Features</h2>
<ul className="space-y-3">
{(currentPlan?.features && currentPlan.features.length > 0
? currentPlan.features
: ['Credits included each month', 'Module access per plan limits', 'Email support'])
.map((feature) => (
<li key={feature} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
<CheckCircle className="w-5 h-5 text-green-600" />
{feature}
</li>
))}
</ul>
</Card>
</div>
)}
{/* Upgrade/Downgrade Tab */}
{activeTab === 'upgrade' && (
<div className="space-y-6">
<div className="mb-4">
<h2 className="text-xl font-semibold mb-2">Available Plans</h2>
<p className="text-gray-600 dark:text-gray-400">Choose the plan that best fits your needs</p>
</div>
{hasPaymentMethods ? (
<div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
<div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Select payment method</div>
<div className="flex flex-wrap gap-3">
{paymentMethods.map((method) => (
<label
key={method.id}
className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${
selectedPaymentMethod === (method.type || method.id)
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
: 'border-gray-200 dark:border-gray-700'
}`}
>
<input
type="radio"
className="sr-only"
checked={selectedPaymentMethod === (method.type || method.id)}
onChange={() => setSelectedPaymentMethod(method.type || method.id)}
/>
<div className="font-semibold text-gray-900 dark:text-white">{method.display_name}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">{method.type}</div>
</label>
))}
</div>
</div>
) : (
<div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
No payment methods available. Please contact support or add one from the Payment Methods tab.
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{plans.map((plan) => {
const isCurrent = plan.id === currentPlanId;
const price = plan.price ? `$${plan.price}/${plan.interval || 'month'}` : 'Custom';
return (
<Card key={plan.id} className="p-6 relative border border-gray-200 dark:border-gray-700">
<div className="mb-4">
<h3 className="text-lg font-semibold">{plan.name}</h3>
<div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{price}</div>
<div className="text-sm text-gray-500">{plan.description || 'Standard plan'}</div>
</div>
<div className="space-y-3 mb-6">
{(plan.features && plan.features.length > 0 ? plan.features : ['Monthly credits included', 'Module access per plan', 'Email support']).map((feature) => (
<div key={feature} className="flex items-center gap-2 text-sm">
<CheckCircle className="w-4 h-4 text-green-600" />
<span>{feature}</span>
</div>
))}
</div>
<Button
variant={isCurrent ? 'outline' : 'primary'}
tone="brand"
fullWidth
disabled={isCurrent || planLoadingId === plan.id}
onClick={() => handleSelectPlan(plan.id)}
>
{planLoadingId === plan.id
? 'Updating...'
: isCurrent
? 'Current Plan'
: 'Select Plan'}
</Button>
</Card>
);
})}
{plans.length === 0 && (
<div className="col-span-3 text-center py-12 text-gray-500">
No plans available. Please contact support.
</div>
)}
</div>
<Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
<h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Plan Change Policy</h3>
<ul className="space-y-2 text-sm text-blue-800 dark:text-blue-200">
<li>• Upgrades take effect immediately and you'll be charged a prorated amount</li>
<li>• Downgrades take effect at the end of your current billing period</li>
<li>• Unused credits from your current plan will carry over</li>
<li>• You can cancel your subscription at any time</li>
</ul>
</Card>
</div>
)}
{/* Credits Overview Tab */}
{activeTab === 'credits' && (
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
{creditBalance?.credits.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 mt-2">credits available</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Used This Month</div>
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
{creditBalance?.credits_used_this_month.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 mt-2">credits consumed</div>
</Card>
<Card className="p-6">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Monthly Included</div>
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
</div>
<div className="text-sm text-gray-500 mt-2">from your plan</div>
</Card>
</div>
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Credit Usage Summary</h2>
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-gray-700 dark:text-gray-300">Remaining Credits</span>
<span className="font-semibold">{creditBalance?.credits_remaining.toLocaleString() || 0}</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full"
style={{
width: creditBalance?.credits
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
: '0%'
}}
></div>
</div>
</div>
</Card>
</div>
)}
{/* Purchase Credits Tab */}
{activeTab === 'purchase' && (
<div className="space-y-6">
{hasPaymentMethods ? (
<div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
<div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Select payment method</div>
<div className="flex flex-wrap gap-3">
{paymentMethods.map((method) => (
<label
key={method.id}
className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${
selectedPaymentMethod === (method.type || method.id)
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
: 'border-gray-200 dark:border-gray-700'
}`}
>
<input
type="radio"
className="sr-only"
checked={selectedPaymentMethod === (method.type || method.id)}
onChange={() => setSelectedPaymentMethod(method.type || method.id)}
/>
<div className="font-semibold text-gray-900 dark:text-white">{method.display_name}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">{method.type}</div>
</label>
))}
</div>
</div>
) : (
<div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
No payment methods available. Please contact support or add one from the Payment Methods tab.
</div>
)}
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Credit Packages</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{packages.map((pkg) => (
<div key={pkg.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-blue-500 transition-colors">
<div className="text-lg font-semibold text-gray-900 dark:text-white">{pkg.name}</div>
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">
{pkg.credits.toLocaleString()} <span className="text-sm text-gray-500">credits</span>
</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white mt-4">
${pkg.price}
</div>
{pkg.description && (
<div className="text-sm text-gray-600 dark:text-gray-400 mt-2">{pkg.description}</div>
)}
<Button
variant="primary"
tone="brand"
onClick={() => handlePurchase(pkg.id)}
fullWidth
className="mt-6"
disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
>
{purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase'}
</Button>
</div>
))}
{packages.length === 0 && (
<div className="col-span-3 text-center py-12 text-gray-500">
No credit packages available at this time
</div>
)}
</div>
</Card>
</div>
)}
{/* Billing History Tab */}
{activeTab === 'invoices' && (
<Card className="overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Invoice
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Date
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Amount
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
{invoices.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-center text-gray-500">
<FileText className="w-12 h-12 mx-auto mb-2 text-gray-400" />
No invoices yet
</td>
</tr>
) : (
invoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
<td className="px-6 py-4 font-medium">{invoice.invoice_number}</td>
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
{new Date(invoice.created_at).toLocaleDateString()}
</td>
<td className="px-6 py-4 font-semibold">${invoice.total_amount}</td>
<td className="px-6 py-4">
<Badge
variant="light"
color={invoice.status === 'paid' ? 'success' : 'warning'}
>
{invoice.status}
</Badge>
</td>
<td className="px-6 py-4 text-right">
<Button
variant="ghost"
tone="brand"
size="sm"
startIcon={<Download className="w-4 h-4" />}
className="ml-auto"
onClick={() => handleDownloadInvoice(invoice.id)}
>
Download
</Button>
</td>
</tr>
))
)}
</tbody>
</table>
</div>
</Card>
)}
{/* Payments Tab */}
{activeTab === 'payments' && (
<div className="space-y-6">
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-lg font-semibold">Payments</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">Recent payments and manual submissions</p>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
{payments.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-center text-gray-500">
No payments yet
</td>
</tr>
) : (
payments.map((payment) => (
<tr key={payment.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
<td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
{payment.invoice_number || payment.invoice_id || '-'}
</td>
<td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
${payment.amount}
</td>
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
{payment.payment_method}
</td>
<td className="px-6 py-4">
<Badge
variant="light"
color={
payment.status === 'succeeded' || payment.status === 'completed'
? 'success'
: payment.status === 'pending' || payment.status === 'processing'
? 'warning'
: 'error'
}
>
{payment.status}
</Badge>
</td>
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
{new Date(payment.created_at).toLocaleDateString()}
</td>
</tr>
))
)}
</tbody>
</table>
</div>
</Card>
<Card className="p-6">
<h3 className="text-lg font-semibold mb-4">Submit Manual Payment</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Invoice ID (optional)</label>
<input
type="number"
value={manualPayment.invoice_id}
onChange={(e) => setManualPayment((p) => ({ ...p, invoice_id: e.target.value }))}
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="Invoice ID"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Amount</label>
<input
type="text"
value={manualPayment.amount}
onChange={(e) => setManualPayment((p) => ({ ...p, amount: e.target.value }))}
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="e.g., 99.00"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment Method</label>
<input
type="text"
value={manualPayment.payment_method}
onChange={(e) => setManualPayment((p) => ({ ...p, payment_method: e.target.value }))}
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="bank_transfer / local_wallet / manual"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reference</label>
<input
type="text"
value={manualPayment.reference}
onChange={(e) => setManualPayment((p) => ({ ...p, reference: e.target.value }))}
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="Reference or transaction id"
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
<textarea
value={manualPayment.notes}
onChange={(e) => setManualPayment((p) => ({ ...p, notes: e.target.value }))}
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="Optional notes"
/>
</div>
</div>
<div className="mt-4 flex justify-end">
<Button variant="primary" tone="brand" onClick={handleSubmitManualPayment}>
Submit Manual Payment
</Button>
</div>
</Card>
</div>
)}
{/* Payment Methods Tab */}
{activeTab === 'payment-methods' && (
<div className="space-y-6">
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold">Payment Methods</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
<select
value={newPaymentMethod.type}
onChange={(e) => setNewPaymentMethod((p) => ({ ...p, type: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
>
<option value="bank_transfer">Bank Transfer</option>
<option value="local_wallet">Local Wallet</option>
<option value="manual">Manual</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Display Name</label>
<input
type="text"
value={newPaymentMethod.display_name}
onChange={(e) => setNewPaymentMethod((p) => ({ ...p, display_name: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="e.g., Bank Transfer (USD)"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Instructions (optional)</label>
<input
type="text"
value={newPaymentMethod.instructions}
onChange={(e) => setNewPaymentMethod((p) => ({ ...p, instructions: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
placeholder="Where to send payment"
/>
</div>
</div>
<div className="mb-4">
<Button variant="primary" tone="brand" onClick={handleAddPaymentMethod}>
Add Payment Method
</Button>
</div>
<div className="space-y-4">
{paymentMethods.map((method) => (
<div key={method.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
<div className="flex items-center gap-4">
<CreditCard className="w-8 h-8 text-gray-400" />
<div>
<div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
<div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
{method.instructions && (
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{method.instructions}</div>
)}
</div>
</div>
<div className="flex items-center gap-2">
{method.is_enabled && (
<Badge variant="light" color="success">Active</Badge>
)}
{method.is_default ? (
<Badge variant="light" color="info">Default</Badge>
) : (
<Button variant="outline" size="sm" onClick={() => handleSetDefaultPaymentMethod(method.id)}>
Make Default
</Button>
)}
<Button variant="outline" size="sm" tone="neutral" onClick={() => handleRemovePaymentMethod(method.id)}>
Remove
</Button>
</div>
</div>
))}
{paymentMethods.length === 0 && (
<div className="text-center py-12 text-gray-500">
No payment methods configured
</div>
)}
</div>
</Card>
</div>
)}
</div>
</div>
);
}

30
frontend/src/pages/account/PurchaseCreditsPage.tsx
View File

@@ -4,7 +4,7 @@
*/
import { useState, useEffect } from 'react';
import { AlertCircle, Check, CreditCard, Building2, Wallet, Loader2, Zap } from 'lucide-react';
import { AlertCircleIcon, CheckIcon, CreditCardIcon, Building2Icon, WalletIcon, Loader2Icon, ZapIcon } from '../../icons';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
@@ -132,13 +132,13 @@ export default function PurchaseCreditsPage() {
const getPaymentMethodIcon = (type: string) => {
switch (type) {
case 'stripe':
return <CreditCard className="w-5 h-5" />;
return <CreditCardIcon className="w-5 h-5" />;
case 'bank_transfer':
return <Building2 className="w-5 h-5" />;
return <Building2Icon className="w-5 h-5" />;
case 'local_wallet':
return <Wallet className="w-5 h-5" />;
return <WalletIcon className="w-5 h-5" />;
default:
return <CreditCard className="w-5 h-5" />;
return <CreditCardIcon className="w-5 h-5" />;
}
};
@@ -148,11 +148,11 @@ export default function PurchaseCreditsPage() {
<PageMeta title="Purchase Credits" description="Top up your account with credit packages" />
<PageHeader
title="Purchase Credits"
badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <ZapIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<Loader2Icon className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
</div>
</>
@@ -167,7 +167,7 @@ export default function PurchaseCreditsPage() {
<PageMeta title="Complete Payment" description="Complete your credit purchase" />
<PageHeader
title="Complete Payment"
badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <ZapIcon className="w-4 h-4" />, color: 'blue' }}
parent="Purchase Credits"
/>
<div className="p-6 max-w-2xl">
@@ -238,7 +238,7 @@ export default function PurchaseCreditsPage() {
{error && (
<div className="bg-error-50 border border-error-200 rounded-lg p-4 mb-4 flex items-start gap-2">
<AlertCircle className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
<AlertCircleIcon className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
<p className="text-error-800 text-sm">{error}</p>
</div>
)}
@@ -293,7 +293,7 @@ export default function PurchaseCreditsPage() {
tone="brand"
type="submit"
disabled={purchasing}
startIcon={purchasing ? <Loader2 className="w-4 h-4 animate-spin" /> : undefined}
startIcon={purchasing ? <Loader2Icon className="w-4 h-4 animate-spin" /> : undefined}
className="flex-1"
>
{purchasing ? 'Submitting...' : 'Submit Payment'}
@@ -312,13 +312,13 @@ export default function PurchaseCreditsPage() {
<PageHeader
title="Purchase Credits"
description="Choose a credit package and payment method to top up your account balance."
badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <ZapIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="max-w-6xl mx-auto">
{error && (
<div className="bg-error-50 border border-error-200 rounded-lg p-4 mb-6 flex items-start gap-2">
<AlertCircle className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
<AlertCircleIcon className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
<p className="text-error-800">{error}</p>
</div>
)}
@@ -363,7 +363,7 @@ export default function PurchaseCreditsPage() {
{selectedPackage?.id === pkg.id && (
<div className="absolute top-3 right-3">
<div className="w-6 h-6 bg-[var(--color-brand-500)] rounded-full flex items-center justify-center">
<Check className="w-4 h-4 text-white" />
<CheckIcon className="w-4 h-4 text-white" />
</div>
</div>
)}
@@ -402,7 +402,7 @@ export default function PurchaseCreditsPage() {
<p className="text-sm text-gray-600">{method.instructions}</p>
</div>
{selectedPaymentMethod === method.type && (
<Check className="w-5 h-5 text-[var(--color-brand-500)] flex-shrink-0" />
<CheckIcon className="w-5 h-5 text-[var(--color-brand-500)] flex-shrink-0" />
)}
</div>
</div>
@@ -436,7 +436,7 @@ export default function PurchaseCreditsPage() {
size="lg"
onClick={handlePurchase}
disabled={purchasing}
startIcon={purchasing ? <Loader2 className="w-5 h-5 animate-spin" /> : undefined}
startIcon={purchasing ? <Loader2Icon className="w-5 h-5 animate-spin" /> : undefined}
fullWidth
>
{purchasing ? 'Processing...' : 'Proceed to Payment'}

22
frontend/src/pages/account/UsageAnalyticsPage.tsx
View File

@@ -6,7 +6,7 @@
import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
import { TrendingUpIcon, ActivityIcon, BarChart3Icon, ZapIcon, CalendarIcon } from '../../icons';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
@@ -62,7 +62,7 @@ export default function UsageAnalyticsPage() {
<PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
<PageHeader
title="Usage & Analytics"
badge={{ icon: <TrendingUp className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <TrendingUpIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
@@ -94,7 +94,7 @@ export default function UsageAnalyticsPage() {
<PageHeader
title={tabTitles[activeTab]}
description={tabDescriptions[activeTab]}
badge={{ icon: <TrendingUp className="w-4 h-4" />, color: 'blue' }}
badge={{ icon: <TrendingUpIcon className="w-4 h-4" />, color: 'blue' }}
parent="Usage & Analytics"
/>
<div className="p-6">
@@ -104,7 +104,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-brand-500 rounded-lg">
<Zap className="w-5 h-5 text-white" />
<ZapIcon className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-brand-700 dark:text-brand-300">Credits Left</div>
@@ -119,7 +119,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 border-purple-200 dark:border-purple-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-500 rounded-lg">
<TrendingUp className="w-5 h-5 text-white" />
<TrendingUpIcon className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-purple-700 dark:text-purple-300">Credits Used This Month</div>
@@ -134,7 +134,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 border-success-200 dark:border-success-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-success-500 rounded-lg">
<BarChart3 className="w-5 h-5 text-white" />
<BarChart3Icon className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-success-700 dark:text-success-300">Your Monthly Limit</div>
@@ -149,7 +149,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 border-purple-200 dark:border-purple-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-500 rounded-lg">
<Calendar className="w-5 h-5 text-white" />
<CalendarIcon className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-purple-700 dark:text-purple-300">Usage %</div>
@@ -210,7 +210,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-6">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
<Activity className="w-5 h-5 text-brand-600 dark:text-brand-400" />
<ActivityIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Total Operations</div>
</div>
@@ -223,7 +223,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-6">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<BarChart3 className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Operations/Day</div>
</div>
@@ -236,7 +236,7 @@ export default function UsageAnalyticsPage() {
<Card className="p-6">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-success-100 dark:bg-success-900/30 rounded-lg">
<TrendingUp className="w-5 h-5 text-success-600 dark:text-success-400" />
<TrendingUpIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
</div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Credits Used</div>
</div>
@@ -273,7 +273,7 @@ export default function UsageAnalyticsPage() {
</div>
) : (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
<Activity className="w-12 h-12 mx-auto mb-3 opacity-30" />
<ActivityIcon className="w-12 h-12 mx-auto mb-3 opacity-30" />
<p>No operations recorded in the selected period</p>
</div>
)}

8
frontend/src/pages/settings/ProfileSettingsPage.tsx
View File

@@ -4,7 +4,7 @@
*/
import { useState } from 'react';
import { Save, User, Mail, Lock, Loader2 } from 'lucide-react';
import { SaveIcon, UserIcon, MailIcon, LockIcon, Loader2Icon } from '../../icons';
import { Card } from '../../components/ui/card';
export default function ProfileSettingsPage() {
@@ -31,7 +31,7 @@ export default function ProfileSettingsPage() {
<div className="mb-6 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<User className="w-6 h-6" />
<UserIcon className="w-6 h-6" />
Your Profile
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
@@ -43,7 +43,7 @@ export default function ProfileSettingsPage() {
disabled={saving}
className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50"
>
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
{saving ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <SaveIcon className="w-4 h-4" />}
{saving ? 'Saving...' : '✓ Save My Settings'}
</button>
</div>
@@ -174,7 +174,7 @@ export default function ProfileSettingsPage() {
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
<Lock className="w-5 h-5" />
<LockIcon className="w-5 h-5" />
Security
</h2>
<button className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">