481 أسطر
18 KiB
TypeScript
481 أسطر
18 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { gql } from '@apollo/client';
|
|
import { useQuery, useMutation } from '@apollo/client/react';
|
|
|
|
|
|
|
|
import { useUserData, useAuthenticationStatus } from '@nhost/react';
|
|
|
|
// GraphQL Queries and Mutations
|
|
const GET_USER_PROFILE = gql`
|
|
|
|
query GetUserProfile{
|
|
user_profiles{
|
|
id
|
|
display_name
|
|
created_at
|
|
metadata
|
|
}
|
|
}
|
|
`;
|
|
|
|
const UPDATE_USER_PROFILE = gql`
|
|
mutation UpdateUserProfile($userId: uuid!, $displayName: String!, $metadata: jsonb) {
|
|
update_user_profiles_by_pk(
|
|
pk_columns: { id: $userId }
|
|
_set: { display_name: $displayName, metadata: $metadata }
|
|
) {
|
|
id
|
|
display_name
|
|
metadata
|
|
}
|
|
}
|
|
`;
|
|
|
|
const GET_USER_CAMPAIGNS = gql`
|
|
query GetUserCampaigns($userId: uuid!) {
|
|
campaigns(where: { user_id: { _eq: $userId } }) {
|
|
id
|
|
name
|
|
status
|
|
keywords_count
|
|
performance_metrics
|
|
created_at
|
|
updated_at
|
|
}
|
|
}
|
|
`;
|
|
|
|
const CREATE_CAMPAIGN = gql`
|
|
mutation CreateCampaign($userId: uuid!, $name: String!, $keywords: jsonb) {
|
|
insert_campaigns_one(object: {
|
|
user_id: $userId,
|
|
name: $name,
|
|
keywords: $keywords,
|
|
status: "draft",
|
|
keywords_count: 0
|
|
}) {
|
|
id
|
|
name
|
|
status
|
|
created_at
|
|
}
|
|
}
|
|
`;
|
|
|
|
const UPDATE_CAMPAIGN = gql`
|
|
mutation UpdateCampaign($campaignId: uuid!, $name: String, $status: String) {
|
|
update_campaigns_by_pk(
|
|
pk_columns: { id: $campaignId }
|
|
_set: { name: $name, status: $status }
|
|
) {
|
|
id
|
|
name
|
|
status
|
|
updated_at
|
|
}
|
|
}
|
|
`;
|
|
|
|
const DELETE_CAMPAIGN = gql`
|
|
mutation DeleteCampaign($campaignId: uuid!) {
|
|
delete_campaigns_by_pk(id: $campaignId) {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Settings = () => {
|
|
const [activeSection, setActiveSection] = useState("profile");
|
|
const [activeSubSection, setActiveSubSection] = useState("payment-history");
|
|
const [formData, setFormData] = useState({
|
|
displayName: '',
|
|
email: ''
|
|
});
|
|
|
|
// NHost Authentication
|
|
const user = useUserData();
|
|
const { isAuthenticated } = useAuthenticationStatus();
|
|
|
|
// GraphQL Queries
|
|
const { data: profileData, loading: profileLoading, refetch: refetchProfile } = useQuery(GET_USER_PROFILE, {
|
|
variables: { userId: user?.id },
|
|
skip: !user?.id
|
|
});
|
|
|
|
const { data: campaignsData, loading: campaignsLoading, refetch: refetchCampaigns } = useQuery(GET_USER_CAMPAIGNS, {
|
|
variables: { userId: user?.id },
|
|
skip: !user?.id
|
|
});
|
|
|
|
// GraphQL Mutations
|
|
const [updateUserProfile, { loading: updatingProfile }] = useMutation(UPDATE_USER_PROFILE);
|
|
const [createCampaign, { loading: creatingCampaign }] = useMutation(CREATE_CAMPAIGN);
|
|
const [updateCampaign] = useMutation(UPDATE_CAMPAIGN);
|
|
const [deleteCampaign] = useMutation(DELETE_CAMPAIGN);
|
|
|
|
// Initialize form data when profile loads
|
|
useEffect(() => {
|
|
if (profileData?.user_profiles) {
|
|
const userProfile = profileData.user_profiles[0];
|
|
setFormData({
|
|
displayName: userProfile.display_name || '',
|
|
email: userProfile.email || ''
|
|
});
|
|
}
|
|
}, [profileData]);
|
|
|
|
const handleSectionClick = (sectionId: string) => {
|
|
setActiveSection(sectionId);
|
|
if (sectionId === "billing") {
|
|
setActiveSubSection("payment-history");
|
|
}
|
|
};
|
|
|
|
const handleSubSectionClick = (subSection: string) => {
|
|
setActiveSubSection(subSection);
|
|
};
|
|
|
|
const handleInputChange = (field: string, value: string) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[field]: value
|
|
}));
|
|
};
|
|
|
|
const handleSaveProfile = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!user?.id) return;
|
|
|
|
try {
|
|
await updateUserProfile({
|
|
variables: {
|
|
userId: user.id,
|
|
displayName: formData.displayName,
|
|
metadata: { last_updated: new Date().toISOString() }
|
|
}
|
|
});
|
|
await refetchProfile();
|
|
// You can add a toast notification here for success
|
|
} catch (error) {
|
|
console.error('Error updating profile:', error);
|
|
// Handle error (show toast, etc.)
|
|
}
|
|
};
|
|
|
|
const handleCreateCampaign = async () => {
|
|
if (!user?.id) return;
|
|
|
|
try {
|
|
await createCampaign({
|
|
variables: {
|
|
userId: user.id,
|
|
name: `New Campaign ${new Date().toLocaleDateString()}`,
|
|
keywords: []
|
|
}
|
|
});
|
|
await refetchCampaigns();
|
|
} catch (error) {
|
|
console.error('Error creating campaign:', error);
|
|
}
|
|
};
|
|
|
|
const handleUpdateCampaign = async (campaignId: string, updates: { name?: string; status?: string }) => {
|
|
try {
|
|
await updateCampaign({
|
|
variables: {
|
|
campaignId,
|
|
...updates
|
|
}
|
|
});
|
|
await refetchCampaigns();
|
|
} catch (error) {
|
|
console.error('Error updating campaign:', error);
|
|
}
|
|
};
|
|
|
|
const handleDeleteCampaign = async (campaignId: string) => {
|
|
if (!confirm('Are you sure you want to delete this campaign?')) return;
|
|
|
|
try {
|
|
await deleteCampaign({
|
|
variables: { campaignId }
|
|
});
|
|
await refetchCampaigns();
|
|
} catch (error) {
|
|
console.error('Error deleting campaign:', error);
|
|
}
|
|
};
|
|
|
|
const sidebarItems = [
|
|
{
|
|
id: "profile",
|
|
label: "Profile",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
},
|
|
{
|
|
id: "campaigns",
|
|
label: "Campaigns",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
},
|
|
{
|
|
id: "billing",
|
|
label: "Billing",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
|
|
<path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: true,
|
|
subItems: [
|
|
"Billing info",
|
|
"Update",
|
|
"Monthly Engagement",
|
|
"Billing Date",
|
|
"Payment History",
|
|
"Cancel Membership"
|
|
]
|
|
},
|
|
{
|
|
id: "help-desk",
|
|
label: "Help Desk",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
},
|
|
{
|
|
id: "feature-request",
|
|
label: "Feature Request",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clipRule="evenodd" />
|
|
</svg>
|
|
),
|
|
hasSubItems: false
|
|
}
|
|
];
|
|
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
|
|
<div className="text-center">
|
|
<h2 className="text-2xl font-bold text-gray-900">Please log in to access settings</h2>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
|
|
<div className="flex flex-col lg:flex-row gap-8">
|
|
{/* Sidebar */}
|
|
<div className="w-full lg:w-64 flex-shrink-0">
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 lg:mb-8">Settings</h1>
|
|
|
|
<nav className="space-y-2">
|
|
{sidebarItems.map((item) => (
|
|
<div key={item.id}>
|
|
<button
|
|
onClick={() => handleSectionClick(item.id)}
|
|
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
|
|
activeSection === item.id
|
|
? "bg-blue-50 text-blue-600"
|
|
: "text-gray-700 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
<span className="font-medium">{item.label}</span>
|
|
{item.hasSubItems && (
|
|
<svg className="w-4 h-4 ml-auto" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
{item.hasSubItems && activeSection === item.id && (
|
|
<div className="ml-8 mt-2 space-y-1">
|
|
{item.subItems?.map((subItem) => (
|
|
<button
|
|
key={subItem}
|
|
onClick={() => handleSubSectionClick(subItem.toLowerCase().replace(/\s+/g, "-"))}
|
|
className={`w-full flex items-center px-4 py-2 rounded-lg text-left transition-colors ${
|
|
activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-")
|
|
? "bg-blue-600 text-white"
|
|
: "text-gray-600 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-") && (
|
|
<div className="w-1 h-6 bg-blue-600 rounded-full mr-3"></div>
|
|
)}
|
|
<span className="text-sm">{subItem}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1">
|
|
{activeSection === "profile" && (
|
|
<div className="bg-white">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
|
|
<p className="text-gray-600 mb-8">
|
|
View and update your personal details and account information.
|
|
</p>
|
|
|
|
{profileLoading ? (
|
|
<div className="text-center py-8">Loading profile...</div>
|
|
) : (
|
|
<form onSubmit={handleSaveProfile} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.displayName}
|
|
onChange={(e) => handleInputChange('displayName', e.target.value)}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* <div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
disabled
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50"
|
|
/>
|
|
<p className="text-sm text-gray-500 mt-1">Email cannot be changed</p>
|
|
</div> */}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Member Since
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={new Date(profileData?.user_profiles[0]?.created_at).toLocaleDateString() || 'N/A'}
|
|
disabled
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={updatingProfile}
|
|
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
|
>
|
|
{updatingProfile ? 'Saving...' : 'Save'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeSection === "campaigns" && (
|
|
<div className="bg-white">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
|
<div>
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Campaigns</h2>
|
|
<p className="text-sm sm:text-base text-gray-600">
|
|
Manage your keyword campaigns and track performance.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleCreateCampaign}
|
|
disabled={creatingCampaign}
|
|
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap self-start sm:self-auto disabled:opacity-50"
|
|
>
|
|
{creatingCampaign ? 'Creating...' : 'Create Campaign'}
|
|
</button>
|
|
</div>
|
|
|
|
{campaignsLoading ? (
|
|
<div className="text-center py-8">Loading campaigns...</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{campaignsData?.campaigns?.map((campaign: any) => (
|
|
<div key={campaign.id} className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:border-blue-300 transition-colors">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-2">
|
|
<h3 className="text-base sm:text-lg font-semibold text-gray-900">{campaign.name}</h3>
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium self-start ${
|
|
campaign.status === "active"
|
|
? "bg-green-100 text-green-700"
|
|
: campaign.status === "paused"
|
|
? "bg-yellow-100 text-yellow-700"
|
|
: "bg-gray-100 text-gray-700"
|
|
}`}>
|
|
{campaign.status}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 text-sm text-gray-600">
|
|
<span>{campaign.keywords_count || 0} keywords</span>
|
|
<span>Created: {new Date(campaign.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={() => handleUpdateCampaign(campaign.id, {
|
|
name: prompt('Enter new campaign name:', campaign.name) || campaign.name
|
|
})}
|
|
className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteCampaign(campaign.id)}
|
|
className="p-2 text-gray-400 hover:text-red-600 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{(!campaignsData?.campaigns || campaignsData.campaigns.length === 0) && (
|
|
<div className="text-center py-8 text-gray-500">
|
|
No campaigns found. Create your first campaign!
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings; |