autoamtiona nd other pages udpates,

2026-01-01 01:40:34 +00:00
parent a02e485f7d
commit 0d3e25e50f
11 changed files with 701 additions and 434 deletions
--- a/frontend/src/pages/account/AccountSettingsPage.tsx
+++ b/frontend/src/pages/account/AccountSettingsPage.tsx
@@ -13,6 +13,7 @@ import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import Badge from '../../components/ui/badge/Badge';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { useAuthStore } from '../../store/authStore';
 import {
@@ -265,47 +266,42 @@ export default function AccountSettingsPage() {

  if (loading) {
    return (
-      <div className="p-6">
+      <>
        <PageMeta title="Account Settings" description="Manage your account, profile, and team" />
-        <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)]" />
-            <div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
+        <PageHeader
+          title="Account Settings"
+          badge={{ icon: <Settings 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)]" />
+              <div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
+            </div>
          </div>
        </div>
-      </div>
+      </>
    );
  }

-  return (
-    <div className="p-6">
-      <PageMeta title="Account Settings" description="Manage your account, profile, and team" />
-      
-      {/* Page Header with Breadcrumb */}
-      <div className="mb-6">
-        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
-          <span>Account Settings</span>
-          <span>›</span>
-          <span className="text-gray-900 dark:text-white font-medium">
-            {activeTab === 'account' && 'Account'}
-            {activeTab === 'profile' && 'Profile'}
-            {activeTab === 'team' && 'Team'}
-          </span>
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-          {activeTab === 'account' && 'Account Information'}
-          {activeTab === 'profile' && 'Profile Settings'}
-          {activeTab === 'team' && 'Team Management'}
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          {activeTab === 'account' && 'Manage your organization and billing information'}
-          {activeTab === 'profile' && 'Update your personal information and preferences'}
-          {activeTab === 'team' && 'Invite and manage team members'}
-        </p>
-      </div>
+  // Page titles based on active tab
+  const pageTitles = {
+    account: { title: 'Account Information', description: 'Manage your organization and billing information' },
+    profile: { title: 'Profile Settings', description: 'Update your personal information and preferences' },
+    team: { title: 'Team Management', description: 'Invite and manage team members' },
+  };

-      {/* Tab Content */}
-      <div className="mt-6">
+  return (
+    <>
+      <PageMeta title="Account Settings" description="Manage your account, profile, and team" />
+      <PageHeader
+        title={pageTitles[activeTab].title}
+        description={pageTitles[activeTab].description}
+        badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
+        parent="Account Settings"
+      />
+      <div className="p-6">
+        {/* Tab Content */}
        {/* Account Tab */}
        {activeTab === 'account' && (
          <div className="space-y-6 max-w-4xl">
@@ -762,15 +758,14 @@ export default function AccountSettingsPage() {
            </Card>
          </div>
        )}
-      </div>

-      {/* Invite Modal */}
-      {showInviteModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <Card className="p-6 w-full max-w-md mx-4">
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-              Invite Team Member
-            </h2>
+        {/* Invite Modal */}
+        {showInviteModal && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <Card className="p-6 w-full max-w-md mx-4">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                Invite Team Member
+              </h2>
            
            <div className="space-y-4">
              <div>
@@ -921,5 +916,6 @@ export default function AccountSettingsPage() {
        </div>
      )}
    </div>
+    </>
  );
 }
--- a/frontend/src/pages/account/NotificationsPage.tsx
+++ b/frontend/src/pages/account/NotificationsPage.tsx
@@ -15,6 +15,8 @@ import {
 } from 'lucide-react';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
+import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import { useNotificationStore } from '../../store/notificationStore';
 import type { NotificationAPI } from '../../services/notifications.api';
 import { deleteNotification as deleteNotificationAPI } from '../../services/notifications.api';
@@ -177,28 +179,30 @@ export default function NotificationsPage() {

  return (
    <>
-      <Helmet>
-        <title>Notifications - IGNY8</title>
-      </Helmet>
+      <PageMeta title="Notifications" description="View and manage your notifications" />
+      <PageHeader
+        title="Notifications"
+        description="View and manage your notifications"
+        badge={{ icon: <Bell className="w-4 h-4" />, color: 'blue' }}
+      />

-      <div className="space-y-6">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-              Notifications
-            </h1>
-            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-              {unreadCount > 0 ? (
-                <span className="font-medium text-brand-600 dark:text-brand-400">
-                  {unreadCount} unread notification{unreadCount !== 1 ? 's' : ''}
+      <div className="p-6 space-y-6">
+        {/* Action Buttons */}
+        <div className="flex items-center justify-between gap-3">
+          {/* Unread count indicator */}
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            {unreadCount > 0 ? (
+              <span className="flex items-center gap-2">
+                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-brand-500 text-white text-xs font-semibold">
+                  {unreadCount}
                </span>
-              ) : (
-                'All caught up!'
-              )}
-            </p>
+                unread notification{unreadCount !== 1 ? 's' : ''}
+              </span>
+            ) : (
+              <span className="text-success-600 dark:text-success-400">✓ All caught up!</span>
+            )}
          </div>
-
+          
          <div className="flex items-center gap-3">
            <Button
              variant="outline"
--- a/frontend/src/pages/account/PlansAndBillingPage.tsx
+++ b/frontend/src/pages/account/PlansAndBillingPage.tsx
@@ -15,6 +15,8 @@ import {
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
+import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { PricingPlan } from '../../components/ui/pricing-table';
 import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
@@ -340,9 +342,18 @@ export default function PlansAndBillingPage() {

  if (loading) {
    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
-      </div>
+      <>
+        <PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
+        <PageHeader
+          title="Plans & Billing"
+          badge={{ icon: <CreditCard 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)]" />
+          </div>
+        </div>
+      </>
    );
  }

@@ -365,28 +376,23 @@ export default function PlansAndBillingPage() {
  };

  return (
-    <div className="p-6">
-      {/* Page Header with Breadcrumb */}
-      <div className="mb-6">
-        <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
-          <span>Plans & Billing</span>
-          <span>›</span>
-          <span className="text-gray-900 dark:text-white font-medium">{pageTitles[activeTab].title}</span>
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{pageTitles[activeTab].title}</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          {pageTitles[activeTab].description}
-        </p>
-      </div>
-
-      {/* Activation / pending payment notice */}
-      {!hasActivePlan && (
-        <div className="mb-4 p-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">
-          No active plan. Choose a plan below to activate your account.
-        </div>
-      )}
-      {hasPendingManualPayment && (
-        <div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
+    <>
+      <PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
+      <PageHeader
+        title={pageTitles[activeTab].title}
+        description={pageTitles[activeTab].description}
+        badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
+        parent="Plans & Billing"
+      />
+      <div className="p-6">
+        {/* Activation / pending payment notice */}
+        {!hasActivePlan && (
+          <div className="mb-4 p-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">
+            No active plan. Choose a plan below to activate your account.
+          </div>
+        )}
+        {hasPendingManualPayment && (
+          <div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
          We received your manual payment. It’s pending admin approval; activation will complete once approved.
        </div>
      )}
@@ -587,14 +593,6 @@ export default function PlansAndBillingPage() {
          <div className="space-y-6">
            {/* Upgrade Plans Section */}
            <div>
-              <div className="mb-6">
-                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-                  {hasActivePlan ? 'Upgrade or Change Your Plan' : 'Choose Your Plan'}
-                </h2>
-                <p className="text-gray-600 dark:text-gray-400 mt-1">
-                  Select the plan that best fits your needs
-                </p>
-              </div>
              <div className="mx-auto" style={{ maxWidth: '1560px' }}>
                <PricingTable1
                  title=""
@@ -895,6 +893,7 @@ export default function PlansAndBillingPage() {
          </div>
        </div>
      )}
-    </div>
+      </div>
+    </>
  );
 }
--- a/frontend/src/pages/account/PurchaseCreditsPage.tsx
+++ b/frontend/src/pages/account/PurchaseCreditsPage.tsx
@@ -4,8 +4,10 @@
 */

 import { useState, useEffect } from 'react';
-import { AlertCircle, Check, CreditCard, Building2, Wallet, Loader2 } from 'lucide-react';
+import { AlertCircle, Check, CreditCard, Building2, Wallet, Loader2, Zap } from 'lucide-react';
 import Button from '../../components/ui/button/Button';
+import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import {
  getCreditPackages,
  getAvailablePaymentMethods,
@@ -142,9 +144,18 @@ export default function PurchaseCreditsPage() {

  if (loading) {
    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
-      </div>
+      <>
+        <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' }}
+        />
+        <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)]" />
+          </div>
+        </div>
+      </>
    );
  }

@@ -152,25 +163,30 @@ export default function PurchaseCreditsPage() {
    const selectedMethod = paymentMethods.find((m) => m.type === selectedPaymentMethod);

    return (
-      <div className="container mx-auto px-4 py-8 max-w-2xl">
-        <h1 className="text-3xl font-bold mb-6">Complete Payment</h1>
-
-        {/* Invoice Details */}
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-xl font-semibold mb-4">Invoice Details</h2>
-          <div className="space-y-2">
-            <div className="flex justify-between">
-              <span className="text-gray-600">Invoice Number:</span>
-              <span className="font-mono">{invoiceData.invoice_number}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-600">Package:</span>
-              <span>{selectedPackage?.name}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-600">Credits:</span>
-              <span>{selectedPackage?.credits.toLocaleString()}</span>
-            </div>
+      <>
+        <PageMeta title="Complete Payment" description="Complete your credit purchase" />
+        <PageHeader
+          title="Complete Payment"
+          badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
+          parent="Purchase Credits"
+        />
+        <div className="p-6 max-w-2xl">
+          {/* Invoice Details */}
+          <div className="bg-white rounded-lg shadow p-6 mb-6">
+            <h2 className="text-xl font-semibold mb-4">Invoice Details</h2>
+            <div className="space-y-2">
+              <div className="flex justify-between">
+                <span className="text-gray-600">Invoice Number:</span>
+                <span className="font-mono">{invoiceData.invoice_number}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Package:</span>
+                <span>{selectedPackage?.name}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Credits:</span>
+                <span>{selectedPackage?.credits.toLocaleString()}</span>
+              </div>
            <div className="flex justify-between text-lg font-bold border-t pt-2 mt-2">
              <span>Total Amount:</span>
              <span>${invoiceData.total_amount}</span>
@@ -285,35 +301,38 @@ export default function PurchaseCreditsPage() {
            </div>
          </div>
        </form>
-      </div>
+        </div>
+      </>
    );
  }

  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        <h1 className="text-3xl font-bold mb-2">Purchase Credits</h1>
-        <p className="text-gray-600 mb-8">
-          Choose a credit package and payment method to top up your account balance.
-        </p>
+    <>
+      <PageMeta title="Purchase Credits" description="Top up your account with credit packages" />
+      <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' }}
+      />
+      <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" />
+              <p className="text-error-800">{error}</p>
+            </div>
+          )}

-        {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" />
-            <p className="text-error-800">{error}</p>
-          </div>
-        )}
-
-        {/* Credit Packages */}
-        <div className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Select Credit Package</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {packages.map((pkg) => (
-              <div
-                key={pkg.id}
-                onClick={() => setSelectedPackage(pkg)}
-                className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
-                  selectedPackage?.id === pkg.id
+          {/* Credit Packages */}
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">Select Credit Package</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              {packages.map((pkg) => (
+                <div
+                  key={pkg.id}
+                  onClick={() => setSelectedPackage(pkg)}
+                  className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
+                    selectedPackage?.id === pkg.id
                    ? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
                    : 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
                } ${pkg.is_featured ? 'ring-2 ring-warning-400' : ''}`}
@@ -424,7 +443,8 @@ export default function PurchaseCreditsPage() {
            </Button>
          </div>
        )}
+        </div>
      </div>
-    </div>
+    </>
  );
 }
--- a/frontend/src/pages/account/UsageAnalyticsPage.tsx
+++ b/frontend/src/pages/account/UsageAnalyticsPage.tsx
@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { getUsageAnalytics, UsageAnalytics, getCreditBalance, type CreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
@@ -57,15 +58,21 @@ export default function UsageAnalyticsPage() {

  if (loading) {
    return (
-      <div className="p-6">
+      <>
        <PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
-        <div className="flex items-center justify-center h-64">
-          <div className="flex flex-col items-center gap-3">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500"></div>
-            <div className="text-gray-500 dark:text-gray-400">Loading usage data...</div>
+        <PageHeader
+          title="Usage & Analytics"
+          badge={{ icon: <TrendingUp 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">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500"></div>
+              <div className="text-gray-500 dark:text-gray-400">Loading usage data...</div>
+            </div>
          </div>
        </div>
-      </div>
+      </>
    );
  }

@@ -75,28 +82,27 @@ export default function UsageAnalyticsPage() {
    api: 'Activity Log',
  };

-  return (
-    <div className="p-6">
-      <PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
-      
-      {/* Page Header */}
-      <div className="mb-6">
-        <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
-          Usage & Analytics / {tabTitles[activeTab]}
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tabTitles[activeTab]}</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          {activeTab === 'limits' && 'See how much you\'re using - Track your credits and content limits'}
-          {activeTab === 'activity' && 'See where your credits go - Track credit usage history'}
-          {activeTab === 'api' && 'Technical requests - Monitor API activity and usage'}
-        </p>
-      </div>
+  const tabDescriptions: Record<TabType, string> = {
+    limits: 'See how much you\'re using - Track your credits and content limits',
+    activity: 'See where your credits go - Track credit usage history',
+    api: 'Technical requests - Monitor API activity and usage',
+  };

-      {/* Quick Stats Overview */}
-      {creditBalance && (
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-          <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">
+  return (
+    <>
+      <PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
+      <PageHeader
+        title={tabTitles[activeTab]}
+        description={tabDescriptions[activeTab]}
+        badge={{ icon: <TrendingUp className="w-4 h-4" />, color: 'blue' }}
+        parent="Usage & Analytics"
+      />
+      <div className="p-6">
+        {/* Quick Stats Overview */}
+        {creditBalance && (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+            <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" />
              </div>
@@ -276,5 +282,6 @@ export default function UsageAnalyticsPage() {
        )}
      </div>
    </div>
+    </>
  );
 }