- Profile Picture\
Donation Tracking\ Validation Rejection\ Subscription Data Export\ Admin Dashboard Logo\ Admin Navbar Reorganization
This commit is contained in:
Koncept Kit
@@ -26,6 +26,7 @@ import AdminEvents from './pages/admin/AdminEvents';
|
||||
import AdminValidations from './pages/admin/AdminValidations';
|
||||
import AdminPlans from './pages/admin/AdminPlans';
|
||||
import AdminSubscriptions from './pages/admin/AdminSubscriptions';
|
||||
import AdminDonations from './pages/admin/AdminDonations';
|
||||
import AdminLayout from './layouts/AdminLayout';
|
||||
import { AuthProvider, useAuth } from './context/AuthContext';
|
||||
import MemberRoute from './components/MemberRoute';
|
||||
@@ -231,6 +232,13 @@ function App() {
|
||||
</AdminLayout>
|
||||
</PrivateRoute>
|
||||
} />
|
||||
<Route path="/admin/donations" element={
|
||||
<PrivateRoute adminOnly>
|
||||
<AdminLayout>
|
||||
<AdminDonations />
|
||||
</AdminLayout>
|
||||
</PrivateRoute>
|
||||
} />
|
||||
<Route path="/admin/gallery" element={
|
||||
<PrivateRoute adminOnly>
|
||||
<AdminLayout>
|
||||
|
||||
@@ -21,7 +21,8 @@ import {
|
||||
DollarSign,
|
||||
Scale,
|
||||
HardDrive,
|
||||
Repeat
|
||||
Repeat,
|
||||
Heart
|
||||
} from 'lucide-react';
|
||||
|
||||
const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
@@ -123,6 +124,12 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
path: '/admin/subscriptions',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: 'Donations',
|
||||
icon: Heart,
|
||||
path: '/admin/donations',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: 'Events',
|
||||
icon: Calendar,
|
||||
@@ -177,6 +184,73 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
return location.pathname.startsWith(path);
|
||||
};
|
||||
|
||||
const renderNavItem = (item) => {
|
||||
if (!item) return null;
|
||||
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
|
||||
return (
|
||||
<div key={item.name} className="relative group">
|
||||
<Link
|
||||
to={item.disabled ? '#' : item.path}
|
||||
onClick={(e) => {
|
||||
if (item.disabled) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
|
||||
${item.disabled
|
||||
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
|
||||
: active
|
||||
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
|
||||
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Active border */}
|
||||
{active && !item.disabled && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
|
||||
)}
|
||||
|
||||
<Icon className="h-5 w-5 flex-shrink-0" />
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
{item.disabled && (
|
||||
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
{item.badge > 0 && !item.disabled && (
|
||||
<Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
|
||||
{item.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Badge when collapsed */}
|
||||
{!isOpen && item.badge > 0 && !item.disabled && (
|
||||
<div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Tooltip when collapsed */}
|
||||
{!isOpen && (
|
||||
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
|
||||
{item.name}
|
||||
{item.badge > 0 && ` (${item.badge})`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Sidebar */}
|
||||
@@ -191,14 +265,23 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
|
||||
{isOpen && (
|
||||
<h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Admin
|
||||
</h2>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
|
||||
alt="LOAF Logo"
|
||||
className={`object-contain transition-all duration-200 ${
|
||||
isOpen ? 'h-10 w-10' : 'h-8 w-8'
|
||||
}`}
|
||||
/>
|
||||
{isOpen && (
|
||||
<h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Admin
|
||||
</h2>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors ml-auto"
|
||||
className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors"
|
||||
aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
|
||||
>
|
||||
{isMobile ? (
|
||||
@@ -212,71 +295,71 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-4 space-y-2">
|
||||
{filteredNavItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const active = isActive(item.path);
|
||||
<nav className="flex-1 overflow-y-auto p-4">
|
||||
{/* Dashboard - Standalone */}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
|
||||
|
||||
return (
|
||||
<div key={item.name} className="relative group">
|
||||
<Link
|
||||
to={item.disabled ? '#' : item.path}
|
||||
onClick={(e) => {
|
||||
if (item.disabled) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
|
||||
${item.disabled
|
||||
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
|
||||
: active
|
||||
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
|
||||
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Active border */}
|
||||
{active && !item.disabled && (
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
|
||||
)}
|
||||
{/* MEMBERSHIP Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Membership
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Staff'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Members'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
|
||||
</div>
|
||||
|
||||
<Icon className="h-5 w-5 flex-shrink-0" />
|
||||
{/* FINANCIALS Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Financials
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Plans'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Subscriptions'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Donations'))}
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<span className="flex-1">{item.name}</span>
|
||||
{item.disabled && (
|
||||
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
|
||||
Soon
|
||||
</Badge>
|
||||
)}
|
||||
{item.badge > 0 && !item.disabled && (
|
||||
<Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
|
||||
{item.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/* EVENTS & MEDIA Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Events & Media
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Events'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Gallery'))}
|
||||
</div>
|
||||
|
||||
{/* Badge when collapsed */}
|
||||
{!isOpen && item.badge > 0 && !item.disabled && (
|
||||
<div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
{/* DOCUMENTATION Section */}
|
||||
{isOpen && (
|
||||
<div className="px-4 py-2 mt-6">
|
||||
<h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
|
||||
Documentation
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Newsletters'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Financials'))}
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
|
||||
</div>
|
||||
|
||||
{/* Tooltip when collapsed */}
|
||||
{!isOpen && (
|
||||
<div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
|
||||
{item.name}
|
||||
{item.badge > 0 && ` (${item.badge})`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* Permissions - Superadmin only (no header) */}
|
||||
{user?.role === 'superadmin' && (
|
||||
<div className="mt-6">
|
||||
{renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* User Section */}
|
||||
|
||||
107
src/components/RejectionDialog.js
Normal file
107
src/components/RejectionDialog.js
Normal file
@@ -0,0 +1,107 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from './ui/dialog';
|
||||
import { Button } from './ui/button';
|
||||
import { Textarea } from './ui/textarea';
|
||||
import { Label } from './ui/label';
|
||||
import { AlertTriangle, X } from 'lucide-react';
|
||||
|
||||
export default function RejectionDialog({ open, onOpenChange, onConfirm, user, loading }) {
|
||||
const [reason, setReason] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!reason.trim()) {
|
||||
setError('Rejection reason is required');
|
||||
return;
|
||||
}
|
||||
onConfirm(reason);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setReason('');
|
||||
setError('');
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-3 bg-red-100 rounded-full">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Reject Application
|
||||
</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="bg-[#f9f5ff] border border-[#ddd8eb] rounded-lg p-4">
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<strong>Applicant:</strong> {user?.email}
|
||||
</p>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<strong>Status:</strong> {user?.status}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="reason" className="text-[#422268] font-medium">
|
||||
Rejection Reason <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="reason"
|
||||
value={reason}
|
||||
onChange={(e) => {
|
||||
setReason(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
placeholder="Please provide a clear reason for rejection. This will be sent to the applicant."
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-red-500 min-h-[120px]"
|
||||
disabled={loading}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
<p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
The applicant will receive an email with this reason.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
variant="outline"
|
||||
className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6"
|
||||
disabled={loading}
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
className="bg-red-600 text-white hover:bg-red-700 rounded-full px-6"
|
||||
disabled={loading}
|
||||
>
|
||||
<AlertTriangle className="h-4 w-4 mr-2" />
|
||||
{loading ? 'Rejecting...' : 'Confirm Rejection'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import api from '../utils/api';
|
||||
import { Card } from '../components/ui/card';
|
||||
@@ -9,7 +9,8 @@ import { Textarea } from '../components/ui/textarea';
|
||||
import { toast } from 'sonner';
|
||||
import Navbar from '../components/Navbar';
|
||||
import MemberFooter from '../components/MemberFooter';
|
||||
import { User, Save, Lock, Heart, Users, Mail, BookUser } from 'lucide-react';
|
||||
import { User, Save, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2 } from 'lucide-react';
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
|
||||
import ChangePasswordDialog from '../components/ChangePasswordDialog';
|
||||
|
||||
const Profile = () => {
|
||||
@@ -17,6 +18,12 @@ const Profile = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [profileData, setProfileData] = useState(null);
|
||||
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
|
||||
const [profilePhotoUrl, setProfilePhotoUrl] = useState(null);
|
||||
const [previewImage, setPreviewImage] = useState(null);
|
||||
const [uploadingPhoto, setUploadingPhoto] = useState(false);
|
||||
const fileInputRef = useRef(null);
|
||||
const [maxFileSizeMB, setMaxFileSizeMB] = useState(50); // Default 50MB
|
||||
const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800); // Default 50MB in bytes
|
||||
const [formData, setFormData] = useState({
|
||||
// Personal Information
|
||||
first_name: '',
|
||||
@@ -49,13 +56,27 @@ const Profile = () => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfig();
|
||||
fetchProfile();
|
||||
}, []);
|
||||
|
||||
const fetchConfig = async () => {
|
||||
try {
|
||||
const response = await api.get('/config');
|
||||
setMaxFileSizeMB(response.data.max_file_size_mb);
|
||||
setMaxFileSizeBytes(response.data.max_file_size_bytes);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch config, using defaults:', error);
|
||||
// Keep default values if fetch fails
|
||||
}
|
||||
};
|
||||
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
const response = await api.get('/users/profile');
|
||||
setProfileData(response.data);
|
||||
setProfilePhotoUrl(response.data.profile_photo_url);
|
||||
setPreviewImage(response.data.profile_photo_url);
|
||||
setFormData({
|
||||
// Personal Information
|
||||
first_name: response.data.first_name || '',
|
||||
@@ -124,6 +145,57 @@ const Profile = () => {
|
||||
'Hospitality'
|
||||
];
|
||||
|
||||
const handlePhotoUpload = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
if (!file.type.startsWith('image/')) {
|
||||
toast.error('Please select an image file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size
|
||||
if (file.size > maxFileSizeBytes) {
|
||||
toast.error(`File size must be less than ${maxFileSizeMB}MB`);
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadingPhoto(true);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await api.post('/members/profile/upload-photo', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
|
||||
setProfilePhotoUrl(response.data.profile_photo_url);
|
||||
setPreviewImage(response.data.profile_photo_url);
|
||||
toast.success('Profile photo updated successfully!');
|
||||
} catch (error) {
|
||||
toast.error('Failed to upload photo');
|
||||
} finally {
|
||||
setUploadingPhoto(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePhotoDelete = async () => {
|
||||
if (!profilePhotoUrl) return;
|
||||
|
||||
setUploadingPhoto(true);
|
||||
try {
|
||||
await api.delete('/members/profile/delete-photo');
|
||||
setProfilePhotoUrl(null);
|
||||
setPreviewImage(null);
|
||||
toast.success('Profile photo deleted successfully!');
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete photo');
|
||||
} finally {
|
||||
setUploadingPhoto(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
@@ -205,6 +277,59 @@ const Profile = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile Photo Section */}
|
||||
<div className="pb-8 mb-8 border-b border-[#ddd8eb]">
|
||||
<h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Camera className="h-6 w-6 text-[#664fa3]" />
|
||||
Profile Photo
|
||||
</h2>
|
||||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||||
<Avatar className="h-32 w-32 border-4 border-[#ddd8eb]">
|
||||
<AvatarImage src={previewImage} alt="Profile" />
|
||||
<AvatarFallback className="bg-[#f1eef9] text-[#664fa3] text-3xl">
|
||||
{profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handlePhotoUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploadingPhoto}
|
||||
className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-6 py-3"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
{uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
|
||||
</Button>
|
||||
|
||||
{profilePhotoUrl && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handlePhotoDelete}
|
||||
disabled={uploadingPhoto}
|
||||
variant="outline"
|
||||
className="border-2 border-red-500 text-red-500 hover:bg-red-50 rounded-full px-6 py-3"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete Photo
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Upload a profile photo (Max {maxFileSizeMB}MB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editable Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6" data-testid="profile-form">
|
||||
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
|
||||
472
src/pages/admin/AdminDonations.js
Normal file
472
src/pages/admin/AdminDonations.js
Normal file
@@ -0,0 +1,472 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '../../components/ui/select';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '../../components/ui/dropdown-menu';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import api from '../../utils/api';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
DollarSign,
|
||||
Heart,
|
||||
Users,
|
||||
Globe,
|
||||
Search,
|
||||
Loader2,
|
||||
Download,
|
||||
FileDown,
|
||||
Calendar
|
||||
} from 'lucide-react';
|
||||
|
||||
const AdminDonations = () => {
|
||||
const [donations, setDonations] = useState([]);
|
||||
const [filteredDonations, setFilteredDonations] = useState([]);
|
||||
const [stats, setStats] = useState({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('all');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
filterDonations();
|
||||
}, [searchQuery, typeFilter, statusFilter, startDate, endDate, donations]);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [donationsResponse, statsResponse] = await Promise.all([
|
||||
api.get('/admin/donations'),
|
||||
api.get('/admin/donations/stats')
|
||||
]);
|
||||
|
||||
setDonations(donationsResponse.data);
|
||||
setStats(statsResponse.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch donation data:', error);
|
||||
toast.error('Failed to load donation data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filterDonations = () => {
|
||||
let filtered = [...donations];
|
||||
|
||||
// Search filter (donor name or email)
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(donation =>
|
||||
donation.donor_name?.toLowerCase().includes(query) ||
|
||||
donation.donor_email?.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
// Type filter
|
||||
if (typeFilter !== 'all') {
|
||||
filtered = filtered.filter(donation => donation.donation_type === typeFilter);
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (statusFilter !== 'all') {
|
||||
filtered = filtered.filter(donation => donation.status === statusFilter);
|
||||
}
|
||||
|
||||
// Date range filter
|
||||
if (startDate) {
|
||||
filtered = filtered.filter(donation =>
|
||||
new Date(donation.created_at) >= new Date(startDate)
|
||||
);
|
||||
}
|
||||
|
||||
if (endDate) {
|
||||
filtered = filtered.filter(donation =>
|
||||
new Date(donation.created_at) <= new Date(endDate)
|
||||
);
|
||||
}
|
||||
|
||||
setFilteredDonations(filtered);
|
||||
};
|
||||
|
||||
const handleExport = async (exportType) => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const params = exportType === 'current' ? {
|
||||
donation_type: typeFilter !== 'all' ? typeFilter : undefined,
|
||||
status: statusFilter !== 'all' ? statusFilter : undefined,
|
||||
start_date: startDate || undefined,
|
||||
end_date: endDate || undefined,
|
||||
search: searchQuery || undefined
|
||||
} : {};
|
||||
|
||||
const response = await api.get('/admin/donations/export', {
|
||||
params,
|
||||
responseType: 'blob'
|
||||
});
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', `donations_export_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Donations exported successfully');
|
||||
} catch (error) {
|
||||
console.error('Failed to export donations:', error);
|
||||
toast.error('Failed to export donations');
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatPrice = (cents) => {
|
||||
return `$${(cents / 100).toFixed(2)}`;
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadgeVariant = (status) => {
|
||||
const variants = {
|
||||
completed: 'default',
|
||||
pending: 'secondary',
|
||||
failed: 'destructive'
|
||||
};
|
||||
return variants[status] || 'outline';
|
||||
};
|
||||
|
||||
const getTypeBadgeColor = (type) => {
|
||||
return type === 'member' ? 'bg-[#81B29A]' : 'bg-[#664fa3]';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="h-12 w-12 animate-spin text-[#664fa3]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Donation Management
|
||||
</h1>
|
||||
<p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Track and manage all donations from members and the public
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Total Donations
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.total_donations || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#DDD8EB]/20 rounded-full">
|
||||
<Heart className="h-6 w-6 text-[#664fa3]" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Member Donations
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#81B29A] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.member_donations || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#81B29A]/10 rounded-full">
|
||||
<Users className="h-6 w-6 text-[#81B29A]" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Public Donations
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#664fa3] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.public_donations || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#DDD8EB]/20 rounded-full">
|
||||
<Globe className="h-6 w-6 text-[#664fa3]" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Total Amount
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.total_amount || '$0.00'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#DDD8EB]/20 rounded-full">
|
||||
<DollarSign className="h-6 w-6 text-[#664fa3]" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters and Actions */}
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<div className="space-y-4">
|
||||
{/* Search and Export Row */}
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-between">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
|
||||
<Input
|
||||
placeholder="Search by donor name or email..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 rounded-full border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
/>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
disabled={exporting}
|
||||
className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-3 flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{exporting ? 'Exporting...' : 'Export'}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExport('all')}
|
||||
className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
|
||||
>
|
||||
<FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
|
||||
<span className="text-[#422268]">Export All Donations</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExport('current')}
|
||||
className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
|
||||
>
|
||||
<FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
|
||||
<span className="text-[#422268]">Export Current View</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Filters Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="rounded-full border-2 border-[#ddd8eb]">
|
||||
<SelectValue placeholder="All Types" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Types</SelectItem>
|
||||
<SelectItem value="member">Member Donations</SelectItem>
|
||||
<SelectItem value="public">Public Donations</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="rounded-full border-2 border-[#ddd8eb]">
|
||||
<SelectValue placeholder="All Statuses" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
<SelectItem value="completed">Completed</SelectItem>
|
||||
<SelectItem value="pending">Pending</SelectItem>
|
||||
<SelectItem value="failed">Failed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="rounded-full border-2 border-[#ddd8eb]"
|
||||
placeholder="Start Date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className="rounded-full border-2 border-[#ddd8eb]"
|
||||
placeholder="End Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Filters Summary */}
|
||||
{(searchQuery || typeFilter !== 'all' || statusFilter !== 'all' || startDate || endDate) && (
|
||||
<div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Showing {filteredDonations.length} of {donations.length} donations
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Donations Table */}
|
||||
<Card className="bg-white rounded-2xl border-2 border-[#ddd8eb] overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[#f1eef9] border-b-2 border-[#ddd8eb]">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Donor
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Amount
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Date
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Payment Method
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#ddd8eb]">
|
||||
{filteredDonations.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-6 py-12 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Heart className="h-12 w-12 text-[#ddd8eb]" />
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredDonations.map((donation) => (
|
||||
<tr key={donation.id} className="hover:bg-[#f9f5ff] transition-colors">
|
||||
<td className="px-6 py-4">
|
||||
<div>
|
||||
<p className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.donor_name || 'Anonymous'}
|
||||
</p>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.donor_email || 'No email'}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge
|
||||
className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
{donation.donation_type === 'member' ? 'Member' : 'Public'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="font-semibold text-[#422268] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.amount}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
|
||||
{donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-[#664fa3]">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(donation.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.payment_method || 'N/A'}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* This Month Summary */}
|
||||
{stats.this_month_count > 0 && (
|
||||
<Card className="p-6 bg-gradient-to-r from-[#f9f5ff] to-[#f1eef9] rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
This Month's Donations
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.this_month_count} donations • {stats.this_month_amount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-full shadow-sm">
|
||||
<Heart className="h-8 w-8 text-[#ff9e77]" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminDonations;
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
@@ -11,9 +12,10 @@ import CreateStaffDialog from '../../components/CreateStaffDialog';
|
||||
import InviteStaffDialog from '../../components/InviteStaffDialog';
|
||||
import PendingInvitationsTable from '../../components/PendingInvitationsTable';
|
||||
import { toast } from 'sonner';
|
||||
import { UserCog, Search, Shield, UserPlus, Mail } from 'lucide-react';
|
||||
import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye } from 'lucide-react';
|
||||
|
||||
const AdminStaff = () => {
|
||||
const navigate = useNavigate();
|
||||
const { hasPermission } = useAuth();
|
||||
const [users, setUsers] = useState([]);
|
||||
const [filteredUsers, setFilteredUsers] = useState([]);
|
||||
@@ -246,6 +248,18 @@ const AdminStaff = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => navigate(`/admin/users/${user.id}`)}
|
||||
variant="outline"
|
||||
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-4 py-2"
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Manage
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
@@ -30,8 +30,18 @@ import {
|
||||
Loader2,
|
||||
Calendar,
|
||||
Edit,
|
||||
XCircle
|
||||
XCircle,
|
||||
Download,
|
||||
FileDown,
|
||||
AlertTriangle,
|
||||
Info
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '../../components/ui/dropdown-menu';
|
||||
|
||||
const AdminSubscriptions = () => {
|
||||
const [subscriptions, setSubscriptions] = useState([]);
|
||||
@@ -42,6 +52,7 @@ const AdminSubscriptions = () => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [planFilter, setPlanFilter] = useState('all');
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
// Edit subscription dialog state
|
||||
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
||||
@@ -118,6 +129,62 @@ const AdminSubscriptions = () => {
|
||||
const handleSaveSubscription = async () => {
|
||||
if (!selectedSubscription) return;
|
||||
|
||||
// Check if status is changing
|
||||
const statusChanged = editFormData.status !== selectedSubscription.status;
|
||||
|
||||
if (statusChanged) {
|
||||
// Get status change consequences
|
||||
let warningMessage = '';
|
||||
let confirmText = '';
|
||||
|
||||
if (editFormData.status === 'cancelled') {
|
||||
warningMessage = `⚠️ CRITICAL: Cancelling this subscription will:
|
||||
|
||||
• Set the user's status to INACTIVE
|
||||
• Remove their member access immediately
|
||||
• Stop all future billing
|
||||
• This action affects: ${selectedSubscription.user.first_name} ${selectedSubscription.user.last_name} (${selectedSubscription.user.email})
|
||||
|
||||
Current Status: ${selectedSubscription.status.toUpperCase()}
|
||||
New Status: CANCELLED
|
||||
|
||||
Are you absolutely sure you want to proceed?`;
|
||||
confirmText = 'Yes, Cancel Subscription';
|
||||
} else if (editFormData.status === 'expired') {
|
||||
warningMessage = `⚠️ WARNING: Setting this subscription to EXPIRED will:
|
||||
|
||||
• Set the user's status to INACTIVE
|
||||
• Remove their member access
|
||||
• Mark the subscription as ended
|
||||
• This action affects: ${selectedSubscription.user.first_name} ${selectedSubscription.user.last_name} (${selectedSubscription.user.email})
|
||||
|
||||
Current Status: ${selectedSubscription.status.toUpperCase()}
|
||||
New Status: EXPIRED
|
||||
|
||||
Are you sure you want to proceed?`;
|
||||
confirmText = 'Yes, Mark as Expired';
|
||||
} else if (editFormData.status === 'active') {
|
||||
warningMessage = `✓ Activating this subscription will:
|
||||
|
||||
• Set the user's status to ACTIVE
|
||||
• Grant full member access
|
||||
• Resume billing if applicable
|
||||
• This action affects: ${selectedSubscription.user.first_name} ${selectedSubscription.user.last_name} (${selectedSubscription.user.email})
|
||||
|
||||
Current Status: ${selectedSubscription.status.toUpperCase()}
|
||||
New Status: ACTIVE
|
||||
|
||||
Proceed with activation?`;
|
||||
confirmText = 'Yes, Activate Subscription';
|
||||
}
|
||||
|
||||
// Show confirmation dialog
|
||||
const confirmed = window.confirm(warningMessage);
|
||||
if (!confirmed) {
|
||||
return; // User cancelled
|
||||
}
|
||||
}
|
||||
|
||||
setIsUpdating(true);
|
||||
try {
|
||||
await api.put(`/admin/subscriptions/${selectedSubscription.id}`, {
|
||||
@@ -151,6 +218,38 @@ const AdminSubscriptions = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async (exportType) => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const params = exportType === 'current' ? {
|
||||
status: statusFilter !== 'all' ? statusFilter : undefined,
|
||||
plan_id: planFilter !== 'all' ? planFilter : undefined,
|
||||
search: searchQuery || undefined
|
||||
} : {};
|
||||
|
||||
const response = await api.get('/admin/subscriptions/export', {
|
||||
params,
|
||||
responseType: 'blob'
|
||||
});
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', `subscriptions_export_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Subscriptions exported successfully');
|
||||
} catch (error) {
|
||||
console.error('Failed to export subscriptions:', error);
|
||||
toast.error('Failed to export subscriptions');
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatPrice = (cents) => {
|
||||
return `$${(cents / 100).toFixed(2)}`;
|
||||
};
|
||||
@@ -307,8 +406,39 @@ const AdminSubscriptions = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
|
||||
</div>
|
||||
|
||||
{/* Export Dropdown */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
disabled={exporting}
|
||||
className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-2 flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{exporting ? 'Exporting...' : 'Export'}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExport('all')}
|
||||
className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
|
||||
>
|
||||
<FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
|
||||
<span className="text-[#422268]">Export All Subscriptions</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExport('current')}
|
||||
className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
|
||||
>
|
||||
<FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
|
||||
<span className="text-[#422268]">Export Current View</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -542,6 +672,59 @@ const AdminSubscriptions = () => {
|
||||
<SelectItem value="expired">Expired</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Warning Box - Show when status is different */}
|
||||
{selectedSubscription && editFormData.status !== selectedSubscription.status && (
|
||||
<div className={`mt-3 p-4 rounded-xl border-2 ${
|
||||
editFormData.status === 'cancelled'
|
||||
? 'bg-red-50 border-red-300'
|
||||
: editFormData.status === 'expired'
|
||||
? 'bg-orange-50 border-orange-300'
|
||||
: 'bg-green-50 border-green-300'
|
||||
}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
{editFormData.status === 'cancelled' || editFormData.status === 'expired' ? (
|
||||
<AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<Info className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-sm mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{editFormData.status === 'cancelled' && 'Critical: This will cancel the subscription'}
|
||||
{editFormData.status === 'expired' && 'Warning: This will mark subscription as expired'}
|
||||
{editFormData.status === 'active' && 'This will activate the subscription'}
|
||||
</p>
|
||||
<ul className="text-xs space-y-1 list-disc list-inside" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{editFormData.status === 'cancelled' && (
|
||||
<>
|
||||
<li>User status will be set to INACTIVE</li>
|
||||
<li>Member access will be removed immediately</li>
|
||||
<li>All future billing will be stopped</li>
|
||||
</>
|
||||
)}
|
||||
{editFormData.status === 'expired' && (
|
||||
<>
|
||||
<li>User status will be set to INACTIVE</li>
|
||||
<li>Member access will be removed</li>
|
||||
<li>Subscription will be marked as ended</li>
|
||||
</>
|
||||
)}
|
||||
{editFormData.status === 'active' && (
|
||||
<>
|
||||
<li>User status will be set to ACTIVE</li>
|
||||
<li>Full member access will be granted</li>
|
||||
<li>Billing will resume if applicable</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
<p className="text-xs mt-2 font-medium">
|
||||
Current: <span className="font-bold">{selectedSubscription.status.toUpperCase()}</span> →
|
||||
New: <span className="font-bold">{editFormData.status.toUpperCase()}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* End Date */}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle } from 'lucide-react';
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';
|
||||
import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||
|
||||
@@ -19,8 +20,13 @@ const AdminUserView = () => {
|
||||
const [subscriptionsLoading, setSubscriptionsLoading] = useState(true);
|
||||
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
|
||||
const [pendingAction, setPendingAction] = useState(null);
|
||||
const [uploadingPhoto, setUploadingPhoto] = useState(false);
|
||||
const [maxFileSizeMB, setMaxFileSizeMB] = useState(50);
|
||||
const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfig();
|
||||
fetchUserProfile();
|
||||
fetchSubscriptions();
|
||||
}, [userId]);
|
||||
@@ -48,6 +54,80 @@ const AdminUserView = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchConfig = async () => {
|
||||
try {
|
||||
const response = await api.get('/config');
|
||||
setMaxFileSizeMB(response.data.max_file_size_mb);
|
||||
setMaxFileSizeBytes(response.data.max_file_size_bytes);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch config, using defaults:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePhotoUpload = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// Validate file type
|
||||
if (!file.type.startsWith('image/')) {
|
||||
toast.error('Please select an image file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size
|
||||
if (file.size > maxFileSizeBytes) {
|
||||
toast.error(`File size must be less than ${maxFileSizeMB}MB`);
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadingPhoto(true);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await api.post(`/admin/users/${userId}/upload-photo`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
|
||||
// Update user state with new photo URL
|
||||
setUser(prev => ({
|
||||
...prev,
|
||||
profile_photo_url: response.data.profile_photo_url
|
||||
}));
|
||||
|
||||
toast.success('Profile photo updated successfully');
|
||||
} catch (error) {
|
||||
toast.error(error.response?.data?.detail || 'Failed to upload photo');
|
||||
} finally {
|
||||
setUploadingPhoto(false);
|
||||
// Reset file input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handlePhotoDelete = async () => {
|
||||
if (!user?.profile_photo_url) return;
|
||||
|
||||
setUploadingPhoto(true);
|
||||
try {
|
||||
await api.delete(`/admin/users/${userId}/delete-photo`);
|
||||
|
||||
// Update user state to remove photo URL
|
||||
setUser(prev => ({
|
||||
...prev,
|
||||
profile_photo_url: null
|
||||
}));
|
||||
|
||||
toast.success('Profile photo deleted successfully');
|
||||
} catch (error) {
|
||||
toast.error(error.response?.data?.detail || 'Failed to delete photo');
|
||||
} finally {
|
||||
setUploadingPhoto(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetPasswordRequest = () => {
|
||||
setPendingAction({ type: 'reset_password' });
|
||||
setConfirmDialogOpen(true);
|
||||
@@ -141,9 +221,12 @@ const AdminUserView = () => {
|
||||
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Avatar */}
|
||||
<div className="h-24 w-24 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold text-3xl">
|
||||
{user.first_name?.[0]}{user.last_name?.[0]}
|
||||
</div>
|
||||
<Avatar className="h-24 w-24 border-4 border-[#ddd8eb]">
|
||||
<AvatarImage src={user.profile_photo_url} alt={`${user.first_name} ${user.last_name}`} />
|
||||
<AvatarFallback className="bg-[#DDD8EB] text-[#422268] font-semibold text-3xl">
|
||||
{user.first_name?.[0]}{user.last_name?.[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
{/* User Info */}
|
||||
<div className="flex-1">
|
||||
@@ -207,6 +290,37 @@ const AdminUserView = () => {
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Profile Photo Management */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handlePhotoUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploadingPhoto}
|
||||
variant="outline"
|
||||
className="border-2 border-[#81B29A] text-[#81B29A] hover:bg-[#E8F5E9] rounded-full px-4 py-2 disabled:opacity-50"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
{uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
|
||||
</Button>
|
||||
|
||||
{user.profile_photo_url && (
|
||||
<Button
|
||||
onClick={handlePhotoDelete}
|
||||
disabled={uploadingPhoto}
|
||||
variant="outline"
|
||||
className="border-2 border-red-500 text-red-500 hover:bg-red-50 rounded-full px-4 py-2 disabled:opacity-50"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete Photo
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm text-[#664fa3] ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<span>User will receive a temporary password via email</span>
|
||||
|
||||
@@ -29,9 +29,10 @@ import {
|
||||
PaginationEllipsis,
|
||||
} from '../../components/ui/pagination';
|
||||
import { toast } from 'sonner';
|
||||
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown } from 'lucide-react';
|
||||
import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X } from 'lucide-react';
|
||||
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||
import RejectionDialog from '../../components/RejectionDialog';
|
||||
|
||||
const AdminValidations = () => {
|
||||
const [pendingUsers, setPendingUsers] = useState([]);
|
||||
@@ -42,6 +43,8 @@ const AdminValidations = () => {
|
||||
const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
|
||||
const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
|
||||
const [pendingAction, setPendingAction] = useState(null);
|
||||
const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
|
||||
const [userToReject, setUserToReject] = useState(null);
|
||||
|
||||
// Filtering state
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -193,6 +196,28 @@ const AdminValidations = () => {
|
||||
fetchPendingUsers(); // Refresh list
|
||||
};
|
||||
|
||||
const handleRejectUser = (user) => {
|
||||
setUserToReject(user);
|
||||
setRejectionDialogOpen(true);
|
||||
};
|
||||
|
||||
const confirmRejection = async (reason) => {
|
||||
if (!userToReject) return;
|
||||
|
||||
setActionLoading(userToReject.id);
|
||||
try {
|
||||
await api.post(`/admin/users/${userToReject.id}/reject`, { reason });
|
||||
toast.success(`${userToReject.first_name} ${userToReject.last_name} has been rejected`);
|
||||
fetchPendingUsers();
|
||||
setRejectionDialogOpen(false);
|
||||
setUserToReject(null);
|
||||
} catch (error) {
|
||||
toast.error(error.response?.data?.detail || 'Failed to reject user');
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
const config = {
|
||||
pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
|
||||
@@ -360,32 +385,68 @@ const AdminValidations = () => {
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
{user.status === 'pending_email' ? (
|
||||
<Button
|
||||
onClick={() => handleBypassAndValidateRequest(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
|
||||
>
|
||||
{actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
onClick={() => handleBypassAndValidateRequest(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
|
||||
>
|
||||
{actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleRejectUser(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-2 border-red-500 text-red-500 hover:bg-red-50"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Reject
|
||||
</Button>
|
||||
</>
|
||||
) : user.status === 'payment_pending' ? (
|
||||
<Button
|
||||
onClick={() => handleActivatePayment(user)}
|
||||
size="sm"
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 mr-1" />
|
||||
Activate Payment
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
onClick={() => handleActivatePayment(user)}
|
||||
size="sm"
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 mr-1" />
|
||||
Activate Payment
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleRejectUser(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-2 border-red-500 text-red-500 hover:bg-red-50"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Reject
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => handleValidateRequest(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
|
||||
>
|
||||
{actionLoading === user.id ? 'Validating...' : 'Validate'}
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
onClick={() => handleValidateRequest(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
|
||||
>
|
||||
{actionLoading === user.id ? 'Validating...' : 'Validate'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleRejectUser(user)}
|
||||
disabled={actionLoading === user.id}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-2 border-red-500 text-red-500 hover:bg-red-50"
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Reject
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -502,6 +563,15 @@ const AdminValidations = () => {
|
||||
loading={actionLoading !== null}
|
||||
{...getActionMessage()}
|
||||
/>
|
||||
|
||||
{/* Rejection Dialog */}
|
||||
<RejectionDialog
|
||||
open={rejectionDialogOpen}
|
||||
onOpenChange={setRejectionDialogOpen}
|
||||
onConfirm={confirmRejection}
|
||||
user={userToReject}
|
||||
loading={actionLoading !== null}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user