- Add Settings menu for Stripe configuration- In the Member Profile page, Superadmin can assign new Role to the member- Stripe Configuration is now stored with encryption in Database
This commit is contained in:
Koncept Kit
@@ -22,6 +22,7 @@ import AdminUserView from './pages/admin/AdminUserView';
|
||||
import AdminStaff from './pages/admin/AdminStaff';
|
||||
import AdminMembers from './pages/admin/AdminMembers';
|
||||
import AdminPermissions from './pages/admin/AdminPermissions';
|
||||
import AdminSettings from './pages/admin/AdminSettings';
|
||||
import AdminRoles from './pages/admin/AdminRoles';
|
||||
import AdminEvents from './pages/admin/AdminEvents';
|
||||
import AdminEventAttendance from './pages/admin/AdminEventAttendance';
|
||||
@@ -290,6 +291,13 @@ function App() {
|
||||
</AdminLayout>
|
||||
</PrivateRoute>
|
||||
} />
|
||||
<Route path="/admin/settings" element={
|
||||
<PrivateRoute adminOnly>
|
||||
<AdminLayout>
|
||||
<AdminSettings />
|
||||
</AdminLayout>
|
||||
</PrivateRoute>
|
||||
} />
|
||||
|
||||
{/* 404 - Catch all undefined routes */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
|
||||
@@ -175,17 +175,28 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
path: '/admin/permissions',
|
||||
disabled: false,
|
||||
superadminOnly: true
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
icon: Settings,
|
||||
path: '/admin/settings',
|
||||
disabled: false,
|
||||
superadminOnly: true
|
||||
}
|
||||
];
|
||||
|
||||
// Filter nav items based on user role
|
||||
const filteredNavItems = navItems.filter(item => {
|
||||
if (item.superadminOnly && user?.role !== 'superadmin') {
|
||||
console.log('Filtering out superadmin-only item:', item.name, 'User role:', user?.role);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Debug: Log filtered items count
|
||||
console.log('Total nav items:', navItems.length, 'Filtered items:', filteredNavItems.length, 'User role:', user?.role);
|
||||
|
||||
const isActive = (path) => {
|
||||
if (path === '/admin') {
|
||||
return location.pathname === '/admin';
|
||||
@@ -364,12 +375,22 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
|
||||
</div>
|
||||
|
||||
{/* Permissions - Superadmin only (no header) */}
|
||||
{/* SYSTEM Section - Superadmin only */}
|
||||
{user?.role === 'superadmin' && (
|
||||
<div className="mt-6">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
|
||||
<>
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
System
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Settings'))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* User Section */}
|
||||
|
||||
149
src/components/ChangeRoleDialog.js
Normal file
149
src/components/ChangeRoleDialog.js
Normal file
@@ -0,0 +1,149 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
|
||||
import { Button } from './ui/button';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { Label } from './ui/label';
|
||||
import { AlertCircle, Shield } from 'lucide-react';
|
||||
import api from '../utils/api';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function ChangeRoleDialog({ open, onClose, user, onSuccess }) {
|
||||
const [roles, setRoles] = useState([]);
|
||||
const [selectedRole, setSelectedRole] = useState('');
|
||||
const [selectedRoleId, setSelectedRoleId] = useState(null);
|
||||
const [loadingRoles, setLoadingRoles] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchRoles();
|
||||
// Pre-select current role
|
||||
setSelectedRole(user.role);
|
||||
setSelectedRoleId(user.role_id);
|
||||
}
|
||||
}, [open, user]);
|
||||
|
||||
const fetchRoles = async () => {
|
||||
setLoadingRoles(true);
|
||||
try {
|
||||
// Reuse existing endpoint that returns assignable roles based on privilege
|
||||
const response = await api.get('/admin/roles/assignable');
|
||||
// Map API response to format expected by Select component
|
||||
const mappedRoles = response.data.map(role => ({
|
||||
value: role.code,
|
||||
label: role.name,
|
||||
id: role.id,
|
||||
description: role.description
|
||||
}));
|
||||
setRoles(mappedRoles);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch assignable roles:', error);
|
||||
toast.error('Failed to load roles. Please try again.');
|
||||
} finally {
|
||||
setLoadingRoles(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedRole) {
|
||||
toast.error('Please select a role');
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't submit if role hasn't changed
|
||||
if (selectedRole === user.role && selectedRoleId === user.role_id) {
|
||||
toast.info('The selected role is the same as current role');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await api.put(`/admin/users/${user.id}/role`, {
|
||||
role: selectedRole,
|
||||
role_id: selectedRoleId
|
||||
});
|
||||
|
||||
toast.success(`Role changed to ${selectedRole}`);
|
||||
|
||||
onSuccess();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.detail || 'Failed to change role';
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-[#664fa3]" />
|
||||
Change User Role
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Change role for {user.first_name} {user.last_name} ({user.email})
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Current Role Display */}
|
||||
<div className="p-3 bg-[#f1eef9] rounded-lg border border-[#DDD8EB]">
|
||||
<p className="text-sm text-gray-600">Current Role</p>
|
||||
<p className="font-semibold text-[#664fa3] capitalize">{user.role}</p>
|
||||
</div>
|
||||
|
||||
{/* Role Selection */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role">New Role</Label>
|
||||
<Select value={selectedRole} onValueChange={setSelectedRole} disabled={loadingRoles}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select role"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{roles.map((role) => (
|
||||
<SelectItem key={role.value} value={role.value}>
|
||||
<span className="capitalize">{role.label}</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Warning for privileged roles */}
|
||||
{(selectedRole === 'admin' || selectedRole === 'superadmin') && (
|
||||
<div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm">
|
||||
<p className="font-semibold text-amber-900">Admin Access Warning</p>
|
||||
<p className="text-amber-700">
|
||||
This user will gain full administrative access to the system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={submitting}
|
||||
className="border-2 border-gray-300 rounded-full"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || loadingRoles}
|
||||
className="bg-[#664fa3] hover:bg-[#7d5ec2] text-white rounded-full"
|
||||
>
|
||||
{submitting ? 'Changing Role...' : 'Change Role'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
486
src/pages/admin/AdminSettings.js
Normal file
486
src/pages/admin/AdminSettings.js
Normal file
@@ -0,0 +1,486 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Label } from '../../components/ui/label';
|
||||
import { AlertCircle, CheckCircle, Settings as SettingsIcon, RefreshCw, Zap, Edit, Save, X, Copy, Eye, EyeOff, ExternalLink } from 'lucide-react';
|
||||
import api from '../../utils/api';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function AdminSettings() {
|
||||
const [stripeStatus, setStripeStatus] = useState(null);
|
||||
const [loadingStatus, setLoadingStatus] = useState(true);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
secret_key: '',
|
||||
webhook_secret: ''
|
||||
});
|
||||
|
||||
// Show/hide sensitive values
|
||||
const [showSecretKey, setShowSecretKey] = useState(false);
|
||||
const [showWebhookSecret, setShowWebhookSecret] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStripeStatus();
|
||||
}, []);
|
||||
|
||||
const fetchStripeStatus = async () => {
|
||||
setLoadingStatus(true);
|
||||
try {
|
||||
const response = await api.get('/admin/settings/stripe/status');
|
||||
setStripeStatus(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch Stripe status:', error);
|
||||
toast.error('Failed to load Stripe status');
|
||||
} finally {
|
||||
setLoadingStatus(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
setTesting(true);
|
||||
try {
|
||||
const response = await api.post('/admin/settings/stripe/test-connection');
|
||||
toast.success(response.data.message);
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.detail || 'Connection test failed';
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
setIsEditing(true);
|
||||
setFormData({
|
||||
secret_key: '',
|
||||
webhook_secret: ''
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setIsEditing(false);
|
||||
setFormData({
|
||||
secret_key: '',
|
||||
webhook_secret: ''
|
||||
});
|
||||
setShowSecretKey(false);
|
||||
setShowWebhookSecret(false);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
// Validate inputs
|
||||
if (!formData.secret_key || !formData.webhook_secret) {
|
||||
toast.error('Both Secret Key and Webhook Secret are required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.secret_key.startsWith('sk_test_') && !formData.secret_key.startsWith('sk_live_')) {
|
||||
toast.error('Invalid Secret Key format. Must start with sk_test_ or sk_live_');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.webhook_secret.startsWith('whsec_')) {
|
||||
toast.error('Invalid Webhook Secret format. Must start with whsec_');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.put('/admin/settings/stripe', formData);
|
||||
toast.success('Stripe settings updated successfully');
|
||||
setIsEditing(false);
|
||||
setFormData({
|
||||
secret_key: '',
|
||||
webhook_secret: ''
|
||||
});
|
||||
setShowSecretKey(false);
|
||||
setShowWebhookSecret(false);
|
||||
// Refresh status
|
||||
await fetchStripeStatus();
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.detail || 'Failed to update Stripe settings';
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text, label) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
toast.success(`${label} copied to clipboard`);
|
||||
};
|
||||
|
||||
if (loadingStatus) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<RefreshCw className="h-8 w-8 animate-spin text-brand-purple" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 max-w-4xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
|
||||
<SettingsIcon className="h-8 w-8 text-brand-purple" />
|
||||
Settings
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Manage system configuration and integrations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stripe Integration Card */}
|
||||
<Card className="border-2 border-[var(--lavender-200)] shadow-sm">
|
||||
<CardHeader className="bg-gradient-to-r from-[var(--lavender-100)] to-white border-b-2 border-[var(--lavender-200)]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-brand-purple" />
|
||||
Stripe Integration
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Payment processing and subscription management
|
||||
</CardDescription>
|
||||
</div>
|
||||
{!isEditing && (
|
||||
<Button
|
||||
onClick={handleEditClick}
|
||||
variant="outline"
|
||||
className="border-2 border-brand-purple text-brand-purple hover:bg-[#f1eef9] rounded-full"
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit Settings
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-6 space-y-6">
|
||||
{isEditing ? (
|
||||
/* Edit Mode */
|
||||
<div className="space-y-6">
|
||||
{/* Secret Key Input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="secret_key">Stripe Secret Key</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="secret_key"
|
||||
type={showSecretKey ? 'text' : 'password'}
|
||||
value={formData.secret_key}
|
||||
onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
|
||||
placeholder="sk_test_... or sk_live_..."
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSecretKey(!showSecretKey)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showSecretKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
Get this from your Stripe Dashboard → Developers → API keys
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Webhook Secret Input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="webhook_secret">Stripe Webhook Secret</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="webhook_secret"
|
||||
type={showWebhookSecret ? 'text' : 'password'}
|
||||
value={formData.webhook_secret}
|
||||
onChange={(e) => setFormData({ ...formData, webhook_secret: e.target.value })}
|
||||
placeholder="whsec_..."
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowWebhookSecret(!showWebhookSecret)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{showWebhookSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
Get this from your Stripe Dashboard → Developers → Webhooks → Add endpoint
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
|
||||
<Button
|
||||
onClick={handleCancelEdit}
|
||||
variant="outline"
|
||||
className="border-2 border-gray-300 rounded-full"
|
||||
disabled={saving}
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
|
||||
>
|
||||
{saving ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Save Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* View Mode */
|
||||
<>
|
||||
{/* Status Display */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Configuration Status</p>
|
||||
<p className="text-sm text-gray-600">Credentials stored in database (encrypted)</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{stripeStatus?.configured ? (
|
||||
<>
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<span className="text-green-600 font-semibold">Configured</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AlertCircle className="h-5 w-5 text-amber-600" />
|
||||
<span className="text-amber-600 font-semibold">Not Configured</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{stripeStatus?.configured && (
|
||||
<>
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Environment</p>
|
||||
<p className="text-sm text-gray-600">Detected from secret key prefix</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-semibold ${
|
||||
stripeStatus.environment === 'live'
|
||||
? 'bg-green-100 text-green-800 border-2 border-green-300'
|
||||
: 'bg-blue-100 text-blue-800 border-2 border-blue-300'
|
||||
}`}>
|
||||
{stripeStatus.environment === 'live' ? 'Live' : 'Test'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Secret Key</p>
|
||||
<p className="text-sm text-gray-600 font-mono">
|
||||
{stripeStatus.secret_key_prefix}...
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">Webhook Secret</p>
|
||||
<p className="text-sm text-gray-600">Webhook endpoint configuration</p>
|
||||
</div>
|
||||
{stripeStatus.webhook_secret_set ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<span className="text-green-600 font-semibold text-sm">Set</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="h-5 w-5 text-amber-600" />
|
||||
<span className="text-amber-600 font-semibold text-sm">Not Set</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Webhook URL */}
|
||||
<div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Webhook URL
|
||||
</p>
|
||||
<p className="text-sm text-blue-700 mb-2">
|
||||
Configure this webhook endpoint in your Stripe Dashboard:
|
||||
</p>
|
||||
<div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
|
||||
{stripeStatus.webhook_url}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => copyToClipboard(stripeStatus.webhook_url, 'Webhook URL')}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-300 text-blue-700 hover:bg-blue-100"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-blue-600">
|
||||
<p className="font-semibold mb-1">Webhook Events:</p>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<p className="font-medium text-blue-700">✅ Currently Handled:</p>
|
||||
<ul className="list-disc list-inside ml-2">
|
||||
<li>checkout.session.completed - Subscription & donation payments</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="opacity-70">
|
||||
<p className="font-medium text-blue-700">🔄 Coming Soon:</p>
|
||||
<ul className="list-disc list-inside ml-2">
|
||||
<li>invoice.payment_succeeded</li>
|
||||
<li>invoice.payment_failed</li>
|
||||
<li>customer.subscription.updated</li>
|
||||
<li>customer.subscription.deleted</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Configuration Instructions (Not Configured) */}
|
||||
{!stripeStatus?.configured && (
|
||||
<>
|
||||
<div className="p-4 bg-amber-50 border-2 border-amber-200 rounded-lg">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm">
|
||||
<p className="font-semibold text-amber-900 mb-2">Configuration Required</p>
|
||||
<p className="text-amber-700 mb-2">
|
||||
Click "Edit Settings" above to configure your Stripe credentials.
|
||||
</p>
|
||||
<p className="text-amber-700">
|
||||
Get your API keys from{' '}
|
||||
<a
|
||||
href="https://dashboard.stripe.com/apikeys"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold underline"
|
||||
>
|
||||
Stripe Dashboard
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Webhook URL Info (Always visible) */}
|
||||
<div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Webhook URL Configuration
|
||||
</p>
|
||||
<p className="text-sm text-blue-700 mb-2">
|
||||
After configuring your API keys, set up this webhook endpoint in your Stripe Dashboard:
|
||||
</p>
|
||||
<div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
|
||||
{stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe'}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => copyToClipboard(stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe', 'Webhook URL')}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-300 text-blue-700 hover:bg-blue-100"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-blue-600">
|
||||
<p className="font-semibold mb-1">Webhook Events:</p>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<p className="font-medium text-blue-700">✅ Currently Handled:</p>
|
||||
<ul className="list-disc list-inside ml-2">
|
||||
<li>checkout.session.completed - Subscription & donation payments</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="opacity-70">
|
||||
<p className="font-medium text-blue-700">🔄 Coming Soon:</p>
|
||||
<ul className="list-disc list-inside ml-2">
|
||||
<li>invoice.payment_succeeded</li>
|
||||
<li>invoice.payment_failed</li>
|
||||
<li>customer.subscription.updated</li>
|
||||
<li>customer.subscription.deleted</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Test Connection Button */}
|
||||
{stripeStatus?.configured && (
|
||||
<div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
|
||||
<Button
|
||||
onClick={fetchStripeStatus}
|
||||
variant="outline"
|
||||
className="border-2 border-gray-300 rounded-full"
|
||||
disabled={loadingStatus}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loadingStatus ? 'animate-spin' : ''}`} />
|
||||
Refresh Status
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleTestConnection}
|
||||
disabled={testing}
|
||||
className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
|
||||
>
|
||||
{testing ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 mr-2 animate-spin" />
|
||||
Testing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="h-4 w-4 mr-2" />
|
||||
Test Connection
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Future Settings Sections Placeholder */}
|
||||
<div className="mt-6 p-6 border-2 border-dashed border-gray-300 rounded-lg text-center text-gray-500">
|
||||
<p className="text-sm">Additional settings sections will be added here</p>
|
||||
<p className="text-xs mt-1">(Email, Storage, Notifications, etc.)</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,9 +5,10 @@ import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';
|
||||
import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2 } from 'lucide-react';
|
||||
import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2, Shield } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||
import ChangeRoleDialog from '../../components/ChangeRoleDialog';
|
||||
|
||||
const AdminUserView = () => {
|
||||
const { userId } = useParams();
|
||||
@@ -24,6 +25,7 @@ const AdminUserView = () => {
|
||||
const [maxFileSizeMB, setMaxFileSizeMB] = useState(50);
|
||||
const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800);
|
||||
const fileInputRef = useRef(null);
|
||||
const [changeRoleDialogOpen, setChangeRoleDialogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfig();
|
||||
@@ -202,6 +204,11 @@ const AdminUserView = () => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const handleRoleChanged = () => {
|
||||
// Refresh user data after role change
|
||||
fetchUserProfile();
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (!user) return null;
|
||||
|
||||
@@ -278,6 +285,15 @@ const AdminUserView = () => {
|
||||
{resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => setChangeRoleDialogOpen(true)}
|
||||
variant="outline"
|
||||
className="border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
|
||||
>
|
||||
<Shield className="h-4 w-4 mr-2" />
|
||||
Change Role
|
||||
</Button>
|
||||
|
||||
{!user.email_verified && (
|
||||
<Button
|
||||
onClick={handleResendVerificationRequest}
|
||||
@@ -476,6 +492,14 @@ const AdminUserView = () => {
|
||||
loading={resetPasswordLoading || resendVerificationLoading}
|
||||
{...getActionMessage()}
|
||||
/>
|
||||
|
||||
{/* Change Role Dialog */}
|
||||
<ChangeRoleDialog
|
||||
open={changeRoleDialogOpen}
|
||||
onClose={() => setChangeRoleDialogOpen(false)}
|
||||
user={user}
|
||||
onSuccess={handleRoleChanged}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user