autoamtiona nd other pages udpates,

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 01:40:34 +00:00
parent a02e485f7d
commit 0d3e25e50f
11 changed files with 701 additions and 434 deletions

View File

@@ -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>
</>
);
}