Member tiers implementation intact. Icons updated to be Lucide React. Create/edit member tiers. Display member badge. Transaction history now in My profile dashboard. Adjusted Icons for badges. Added badges on my profile page
This commit is contained in:
@@ -2,15 +2,15 @@
|
||||
import React from 'react';
|
||||
import { Badge } from './ui/badge';
|
||||
import { getTierForMember } from '../utils/member-tiers';
|
||||
import { MEMBER_TIER_ICONS } from '../config/memberTierIcons';
|
||||
import { getTierIcon } from '../config/memberTierIcons';
|
||||
|
||||
const MemberBadge = ({ memberSince, tiers }) => {
|
||||
const tier = getTierForMember(memberSince, tiers);
|
||||
const Icon = MEMBER_TIER_ICONS[tier.icon] || MEMBER_TIER_ICONS.FaUser;
|
||||
const Icon = getTierIcon(tier.iconKey);
|
||||
|
||||
return (
|
||||
<Badge className={`px-3 py-1 rounded-md text-sm flex items-center gap-2 ${tier.badgeClass}`}>
|
||||
<Icon className="h-4 w-4" />
|
||||
<Badge className={`px-3 py-2 rounded-md text-sm flex items-center gap-2 border hover:text-white ${tier.badgeClass}`}>
|
||||
<Icon className="size-6" />
|
||||
{tier.label}
|
||||
</Badge>
|
||||
);
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react'
|
||||
import { Card } from './ui/card';
|
||||
import { Button } from './ui/button';
|
||||
import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
|
||||
import MemberBadge from './MemberBadge';
|
||||
|
||||
// Helper function to get initials
|
||||
const getInitials = (firstName, lastName) => {
|
||||
@@ -17,13 +18,13 @@ const getSocialMediaLink = (url) => {
|
||||
return url;
|
||||
};
|
||||
|
||||
const MemberCard = ({ member, onViewProfile }) => {
|
||||
const joinedDate = member.created_at;
|
||||
const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
const memberSince = member.member_since || member.created_at;
|
||||
return (
|
||||
<Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
|
||||
{/* Profile Photo */}
|
||||
<div className='flex justify-end items-center'>
|
||||
member since badge
|
||||
{/* Member Tier Badge */}
|
||||
<div className='flex justify-end items-center mb-2'>
|
||||
<MemberBadge memberSince={memberSince} tiers={tiers} />
|
||||
</div>
|
||||
<div className="flex justify-center mb-4">
|
||||
{member.profile_photo_url ? (
|
||||
@@ -64,11 +65,11 @@ const MemberCard = ({ member, onViewProfile }) => {
|
||||
)}
|
||||
|
||||
{/* Member Since */}
|
||||
{joinedDate && (
|
||||
{memberSince && (
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Calendar className="h-4 w-4 text-brand-purple " />
|
||||
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Member since {new Date(joinedDate).toLocaleDateString('en-US', {
|
||||
Member since {new Date(memberSince).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
|
||||
@@ -1,27 +1,70 @@
|
||||
// src/config/memberTiers.js
|
||||
|
||||
/**
|
||||
* Default member tier configuration
|
||||
* Used as fallback when API is unavailable
|
||||
* Format matches backend MemberTier interface
|
||||
*/
|
||||
export const DEFAULT_MEMBER_TIERS = [
|
||||
{
|
||||
id: 'new',
|
||||
id: 'new_member',
|
||||
label: 'New Member',
|
||||
minDays: 0,
|
||||
maxDays: 364, // < 1 year
|
||||
icon: 'FaSeedling',
|
||||
badgeClass: 'bg-[var(--lavender-300)] text-[var(--purple-ink)] hover:text-white',
|
||||
minYears: 0,
|
||||
maxYears: 0.999,
|
||||
iconKey: 'sparkle',
|
||||
badgeClass: 'bg-blue-100 text-blue-800 border-blue-200',
|
||||
},
|
||||
{
|
||||
id: 'silver',
|
||||
label: 'Silver Member',
|
||||
minDays: 365,
|
||||
maxDays: 729,
|
||||
icon: 'FaMedal',
|
||||
badgeClass: 'bg-slate-200 text-slate-900 hover:text-white',
|
||||
id: 'member_1_year',
|
||||
label: '1 Year Member',
|
||||
minYears: 1,
|
||||
maxYears: 2.999,
|
||||
iconKey: 'star',
|
||||
badgeClass: 'bg-green-100 text-green-800 border-green-200',
|
||||
},
|
||||
{
|
||||
id: 'gold',
|
||||
label: 'Gold Member',
|
||||
minDays: 730,
|
||||
maxDays: null, // open-ended
|
||||
icon: 'FaCrown',
|
||||
badgeClass: 'bg-amber-200 text-amber-900 hover:text-white',
|
||||
id: 'member_3_year',
|
||||
label: '3+ Year Member',
|
||||
minYears: 3,
|
||||
maxYears: 4.999,
|
||||
iconKey: 'award',
|
||||
badgeClass: 'bg-purple-100 text-purple-800 border-purple-200',
|
||||
},
|
||||
{
|
||||
id: 'veteran',
|
||||
label: 'Veteran Member',
|
||||
minYears: 5,
|
||||
maxYears: 999,
|
||||
iconKey: 'crown',
|
||||
badgeClass: 'bg-amber-100 text-amber-800 border-amber-200',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Available icon options for tier configuration
|
||||
*/
|
||||
export const TIER_ICON_OPTIONS = [
|
||||
{ key: 'sparkle', label: 'Sparkle' },
|
||||
{ key: 'star', label: 'Star' },
|
||||
{ key: 'award', label: 'Award' },
|
||||
{ key: 'crown', label: 'Crown' },
|
||||
{ key: 'medal', label: 'Medal' },
|
||||
{ key: 'trophy', label: 'Trophy' },
|
||||
{ key: 'gem', label: 'Gem' },
|
||||
{ key: 'heart', label: 'Heart' },
|
||||
{ key: 'shield', label: 'Shield' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Available badge color presets
|
||||
*/
|
||||
export const BADGE_COLOR_PRESETS = [
|
||||
{ label: 'Blue', badgeClass: 'bg-blue-100 text-blue-800 border-blue-200' },
|
||||
{ label: 'Green', badgeClass: 'bg-green-100 text-green-800 border-green-200' },
|
||||
{ label: 'Purple', badgeClass: 'bg-purple-100 text-purple-800 border-purple-200' },
|
||||
{ label: 'Amber', badgeClass: 'bg-amber-100 text-amber-800 border-amber-200' },
|
||||
{ label: 'Red', badgeClass: 'bg-red-100 text-red-800 border-red-200' },
|
||||
{ label: 'Teal', badgeClass: 'bg-teal-100 text-teal-800 border-teal-200' },
|
||||
{ label: 'Pink', badgeClass: 'bg-pink-100 text-pink-800 border-pink-200' },
|
||||
{ label: 'Indigo', badgeClass: 'bg-indigo-100 text-indigo-800 border-indigo-200' },
|
||||
];
|
||||
@@ -1,9 +1,29 @@
|
||||
// src/config/memberTierIcons.js
|
||||
import { FaSeedling, FaMedal, FaCrown, FaUser } from 'react-icons/fa';
|
||||
import { User, Star, Crown, Award, Sparkles, Medal, Trophy, Gem, Heart, Shield } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Member tier icon mapping
|
||||
* Maps iconKey strings from backend to Lucide React components
|
||||
*/
|
||||
export const MEMBER_TIER_ICONS = {
|
||||
FaSeedling,
|
||||
FaMedal,
|
||||
FaCrown,
|
||||
FaUser,
|
||||
// Primary tier icons
|
||||
sparkle: Sparkles,
|
||||
sparkles: Sparkles,
|
||||
star: Star,
|
||||
award: Award,
|
||||
crown: Crown,
|
||||
// Additional options
|
||||
medal: Medal,
|
||||
trophy: Trophy,
|
||||
gem: Gem,
|
||||
heart: Heart,
|
||||
shield: Shield,
|
||||
user: User,
|
||||
};
|
||||
|
||||
/**
|
||||
* Get icon component by key with fallback
|
||||
*/
|
||||
export const getTierIcon = (iconKey) => {
|
||||
return MEMBER_TIER_ICONS[iconKey?.toLowerCase()] || MEMBER_TIER_ICONS.sparkle;
|
||||
};
|
||||
106
src/hooks/use-member-tiers.js
Normal file
106
src/hooks/use-member-tiers.js
Normal file
@@ -0,0 +1,106 @@
|
||||
// src/hooks/use-member-tiers.js
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import api from '../utils/api';
|
||||
import { DEFAULT_MEMBER_TIERS } from '../config/MemberTiers';
|
||||
|
||||
/**
|
||||
* Hook for fetching and managing member tier configuration
|
||||
* @param {Object} options
|
||||
* @param {boolean} options.isAdmin - Whether to use admin endpoint (includes metadata)
|
||||
* @returns {Object} Tier state and methods
|
||||
*/
|
||||
const useMemberTiers = ({ isAdmin = false } = {}) => {
|
||||
const [tiers, setTiers] = useState(DEFAULT_MEMBER_TIERS);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const endpoint = isAdmin
|
||||
? '/admin/settings/member-tiers'
|
||||
: '/settings/member-tiers';
|
||||
|
||||
const fetchTiers = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await api.get(endpoint);
|
||||
const data = response.data?.tiers || response.data || DEFAULT_MEMBER_TIERS;
|
||||
setTiers(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch member tiers:', err);
|
||||
setError('Failed to load member tiers');
|
||||
// Use defaults on error
|
||||
setTiers(DEFAULT_MEMBER_TIERS);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [endpoint]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTiers();
|
||||
}, [fetchTiers]);
|
||||
|
||||
/**
|
||||
* Update tier configuration (admin only)
|
||||
* @param {Array} newTiers - Updated tier array
|
||||
* @returns {Promise<boolean>} Success status
|
||||
*/
|
||||
const updateTiers = useCallback(async (newTiers) => {
|
||||
if (!isAdmin) {
|
||||
console.error('updateTiers requires admin access');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
await api.put('/admin/settings/member-tiers', { tiers: newTiers });
|
||||
setTiers(newTiers);
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Failed to update member tiers:', err);
|
||||
setError('Failed to save member tiers');
|
||||
return false;
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [isAdmin]);
|
||||
|
||||
/**
|
||||
* Reset tiers to defaults (superadmin only)
|
||||
* @returns {Promise<boolean>} Success status
|
||||
*/
|
||||
const resetToDefaults = useCallback(async () => {
|
||||
if (!isAdmin) {
|
||||
console.error('resetToDefaults requires admin access');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
const response = await api.post('/admin/settings/member-tiers/reset');
|
||||
const data = response.data?.tiers || response.data || DEFAULT_MEMBER_TIERS;
|
||||
setTiers(data);
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Failed to reset member tiers:', err);
|
||||
setError('Failed to reset member tiers');
|
||||
return false;
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [isAdmin]);
|
||||
|
||||
return {
|
||||
tiers,
|
||||
loading,
|
||||
error,
|
||||
saving,
|
||||
fetchTiers,
|
||||
updateTiers,
|
||||
resetToDefaults,
|
||||
};
|
||||
};
|
||||
|
||||
export default useMemberTiers;
|
||||
@@ -10,7 +10,8 @@ import MemberFooter from '../components/MemberFooter';
|
||||
import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import TransactionHistory from '../components/TransactionHistory';
|
||||
|
||||
import MemberBadge from '@/components/MemberBadge';
|
||||
import useMemberTiers from '../hooks/use-member-tiers'
|
||||
|
||||
const Dashboard = () => {
|
||||
const { user, resendVerificationEmail, refreshUser } = useAuth();
|
||||
@@ -23,6 +24,7 @@ const Dashboard = () => {
|
||||
const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
|
||||
const [activeTransactionTab, setActiveTransactionTab] = useState('all');
|
||||
const joinedDate = user?.member_since || user?.created_at;
|
||||
const { tiers, loading: tiersLoading } = useMemberTiers();
|
||||
|
||||
useEffect(() => {
|
||||
fetchUpcomingEvents();
|
||||
@@ -131,6 +133,8 @@ const Dashboard = () => {
|
||||
return messages[status] || '';
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Navbar />
|
||||
@@ -209,20 +213,31 @@ const Dashboard = () => {
|
||||
Quick Info
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
|
||||
</div>
|
||||
{/* member date and badge */}
|
||||
<div className='flex justify-between'>
|
||||
<div>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
|
||||
</p>
|
||||
</div>
|
||||
{!tiersLoading && (
|
||||
<div className='lg:mr-10'>
|
||||
<MemberBadge memberSince={joinedDate} tiers={tiers} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* email */}
|
||||
<div>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
|
||||
</div>
|
||||
{/* role */}
|
||||
<div>
|
||||
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
|
||||
<p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,43 +1,361 @@
|
||||
import React from 'react';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { DEFAULT_MEMBER_TIERS } from '../../config/MemberTiers';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Label } from '../../components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '../../components/ui/select';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '../../components/ui/alert-dialog';
|
||||
import { toast } from 'sonner';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import useMemberTiers from '../../hooks/use-member-tiers';
|
||||
import { TIER_ICON_OPTIONS, BADGE_COLOR_PRESETS } from '../../config/MemberTiers';
|
||||
import { getTierIcon } from '../../config/memberTierIcons';
|
||||
import { Save, RotateCcw, Plus, Trash2, GripVertical, AlertTriangle, Users } from 'lucide-react';
|
||||
|
||||
const AdminMemberTiers = () => {
|
||||
const { user } = useAuth();
|
||||
const { tiers, loading, saving, updateTiers, resetToDefaults } = useMemberTiers({ isAdmin: true });
|
||||
const [editedTiers, setEditedTiers] = useState([]);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
const [showResetDialog, setShowResetDialog] = useState(false);
|
||||
|
||||
const isSuperAdmin = user?.role === 'superadmin';
|
||||
|
||||
// Initialize edited tiers when tiers load
|
||||
useEffect(() => {
|
||||
if (tiers && tiers.length > 0) {
|
||||
setEditedTiers(JSON.parse(JSON.stringify(tiers)));
|
||||
setHasChanges(false);
|
||||
}
|
||||
}, [tiers]);
|
||||
|
||||
// Check for changes
|
||||
useEffect(() => {
|
||||
if (tiers && editedTiers.length > 0) {
|
||||
const changed = JSON.stringify(tiers) !== JSON.stringify(editedTiers);
|
||||
setHasChanges(changed);
|
||||
}
|
||||
}, [tiers, editedTiers]);
|
||||
|
||||
const handleTierChange = useCallback((index, field, value) => {
|
||||
setEditedTiers(prev => {
|
||||
const updated = [...prev];
|
||||
updated[index] = { ...updated[index], [field]: value };
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleAddTier = useCallback(() => {
|
||||
const newTier = {
|
||||
id: `tier_${Date.now()}`,
|
||||
label: 'New Tier',
|
||||
minYears: editedTiers.length > 0
|
||||
? Math.max(...editedTiers.map(t => t.maxYears || 0)) + 0.001
|
||||
: 0,
|
||||
maxYears: 999,
|
||||
iconKey: 'star',
|
||||
badgeClass: 'bg-gray-100 text-gray-800 border-gray-200',
|
||||
};
|
||||
setEditedTiers(prev => [...prev, newTier]);
|
||||
}, [editedTiers]);
|
||||
|
||||
const handleRemoveTier = useCallback((index) => {
|
||||
if (editedTiers.length <= 1) {
|
||||
toast.error('You must have at least one tier');
|
||||
return;
|
||||
}
|
||||
setEditedTiers(prev => prev.filter((_, i) => i !== index));
|
||||
}, [editedTiers.length]);
|
||||
|
||||
const validateTiers = useCallback(() => {
|
||||
for (let i = 0; i < editedTiers.length; i++) {
|
||||
const tier = editedTiers[i];
|
||||
if (!tier.label?.trim()) {
|
||||
toast.error(`Tier ${i + 1} must have a label`);
|
||||
return false;
|
||||
}
|
||||
if (tier.minYears < 0) {
|
||||
toast.error(`Tier "${tier.label}" has invalid minimum years`);
|
||||
return false;
|
||||
}
|
||||
if (tier.maxYears <= tier.minYears) {
|
||||
toast.error(`Tier "${tier.label}" max years must be greater than min years`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for overlapping ranges
|
||||
const sorted = [...editedTiers].sort((a, b) => a.minYears - b.minYears);
|
||||
for (let i = 0; i < sorted.length - 1; i++) {
|
||||
if (sorted[i].maxYears >= sorted[i + 1].minYears) {
|
||||
toast.error(`Tier ranges overlap between "${sorted[i].label}" and "${sorted[i + 1].label}"`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}, [editedTiers]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validateTiers()) return;
|
||||
|
||||
const success = await updateTiers(editedTiers);
|
||||
if (success) {
|
||||
toast.success('Member tiers saved successfully');
|
||||
} else {
|
||||
toast.error('Failed to save member tiers');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
const success = await resetToDefaults();
|
||||
if (success) {
|
||||
toast.success('Member tiers reset to defaults');
|
||||
setShowResetDialog(false);
|
||||
} else {
|
||||
toast.error('Failed to reset member tiers');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscardChanges = () => {
|
||||
setEditedTiers(JSON.parse(JSON.stringify(tiers)));
|
||||
setHasChanges(false);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header and Actions */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<p className="text-muted-foreground">
|
||||
Configure tier names, time ranges, and badges used in the members directory.
|
||||
Configure tier names, time ranges, and badges displayed in the members directory.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
{hasChanges && (
|
||||
<Button variant="outline" onClick={handleDiscardChanges}>
|
||||
Discard
|
||||
</Button>
|
||||
)}
|
||||
{isSuperAdmin && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowResetDialog(true)}
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4 mr-2" />
|
||||
Reset
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleSave} disabled={saving || !hasChanges}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
||||
{/* Tier Cards */}
|
||||
<div className="space-y-4">
|
||||
{DEFAULT_MEMBER_TIERS.map((tier) => {
|
||||
const rangeLabel = tier.maxDays == null
|
||||
? `${tier.minDays}+ days`
|
||||
: `${tier.minDays}–${tier.maxDays} days`;
|
||||
{editedTiers.map((tier, index) => {
|
||||
const IconComponent = getTierIcon(tier.iconKey);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tier.id}
|
||||
className="flex flex-wrap items-center justify-between gap-4 border border-[var(--neutral-800)] rounded-xl p-4"
|
||||
<Card key={tier.id} className="bg-background">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Drag Handle & Remove */}
|
||||
<div className="flex lg:flex-col items-center gap-2 lg:pt-6">
|
||||
<GripVertical className="h-5 w-5 text-muted-foreground cursor-move" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveTier(index)}
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
disabled={editedTiers.length <= 1}
|
||||
>
|
||||
<div>
|
||||
<div className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{tier.label}
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{rangeLabel}
|
||||
|
||||
{/* Tier Configuration */}
|
||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* Label */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`tier-label-${index}`}>Label</Label>
|
||||
<Input
|
||||
id={`tier-label-${index}`}
|
||||
value={tier.label}
|
||||
onChange={(e) => handleTierChange(index, 'label', e.target.value)}
|
||||
placeholder="Tier Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Min Years */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`tier-min-${index}`}>Min Years</Label>
|
||||
<Input
|
||||
id={`tier-min-${index}`}
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0"
|
||||
value={tier.minYears}
|
||||
onChange={(e) => handleTierChange(index, 'minYears', parseFloat(e.target.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
<Badge className={`px-3 py-1 rounded-md text-sm ${tier.badgeClass}`}>
|
||||
{tier.icon}
|
||||
|
||||
{/* Max Years */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`tier-max-${index}`}>Max Years</Label>
|
||||
<Input
|
||||
id={`tier-max-${index}`}
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0"
|
||||
value={tier.maxYears}
|
||||
onChange={(e) => handleTierChange(index, 'maxYears', parseFloat(e.target.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`tier-icon-${index}`}>Icon</Label>
|
||||
<Select
|
||||
value={tier.iconKey}
|
||||
onValueChange={(value) => handleTierChange(index, 'iconKey', value)}
|
||||
>
|
||||
<SelectTrigger id={`tier-icon-${index}`}>
|
||||
<SelectValue placeholder="Select icon" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{TIER_ICON_OPTIONS.map((option) => {
|
||||
const OptionIcon = getTierIcon(option.key);
|
||||
return (
|
||||
<SelectItem key={option.key} value={option.key}>
|
||||
<div className="flex items-center gap-2">
|
||||
<OptionIcon className="h-4 w-4" />
|
||||
{option.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Badge Color */}
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor={`tier-badge-${index}`}>Badge Style</Label>
|
||||
<Select
|
||||
value={tier.badgeClass}
|
||||
onValueChange={(value) => handleTierChange(index, 'badgeClass', value)}
|
||||
>
|
||||
<SelectTrigger id={`tier-badge-${index}`}>
|
||||
<SelectValue placeholder="Select color" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BADGE_COLOR_PRESETS.map((preset) => (
|
||||
<SelectItem key={preset.label} value={preset.badgeClass}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-4 h-4 rounded ${preset.badgeClass}`} />
|
||||
{preset.label}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="space-y-2 md:col-span-2 flex flex-col">
|
||||
<Label>Preview</Label>
|
||||
<div className="flex-1 flex items-center">
|
||||
<Badge className={`px-3 py-1.5 rounded-md text-sm flex items-center gap-2 border ${tier.badgeClass}`}>
|
||||
<IconComponent className="h-4 w-4" />
|
||||
{tier.label || 'Tier Name'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Add Tier Button */}
|
||||
<Button variant="outline" onClick={handleAddTier} className="w-full border-dashed">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Tier
|
||||
</Button>
|
||||
|
||||
{/* Info Card */}
|
||||
<Card className="bg-muted/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
How Member Tiers Work
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground space-y-2">
|
||||
<p>
|
||||
Member tiers are automatically assigned based on how long a member has been active.
|
||||
The tier badge appears on member profiles and in the member directory.
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
<li>Tiers are matched based on membership duration in years</li>
|
||||
<li>Each tier should have non-overlapping year ranges</li>
|
||||
<li>The last tier typically uses a high max value (e.g., 999) to catch all long-term members</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Reset Confirmation Dialog */}
|
||||
<AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5 text-destructive" />
|
||||
Reset Tiers to Defaults?
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will delete all custom tier configurations and restore the default member tiers.
|
||||
This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleReset}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Reset to Defaults
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -15,9 +15,10 @@ import {
|
||||
} from '../../components/ui/dialog';
|
||||
import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import StatusBadge from '@/components/StatusBadge';
|
||||
import MemberCard from '../../components/MemberCard';
|
||||
import MemberBadge from '../../components/MemberBadge';
|
||||
import useMembers from '../../hooks/use-members';
|
||||
import useMemberTiers from '../../hooks/use-member-tiers';
|
||||
|
||||
const MembersDirectory = () => {
|
||||
const [selectedMember, setSelectedMember] = useState(null);
|
||||
@@ -25,7 +26,27 @@ const MembersDirectory = () => {
|
||||
const { toast } = useToast();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 12;
|
||||
const { tiers } = useMemberTiers();
|
||||
const allowedRoles = useMemo(() => [], []);
|
||||
const normalizeStatus = useCallback((status) => {
|
||||
if (typeof status === 'string') {
|
||||
return status.toLowerCase();
|
||||
}
|
||||
return status;
|
||||
}, []);
|
||||
const normalizeMembers = useCallback(
|
||||
(data) => {
|
||||
const list = Array.isArray(data)
|
||||
? data
|
||||
: data?.members || data?.results || data?.items || data?.data || [];
|
||||
|
||||
return list.map((member) => ({
|
||||
...member,
|
||||
status: normalizeStatus(member.status ?? member.membership_status ?? member.member_status),
|
||||
}));
|
||||
},
|
||||
[normalizeStatus]
|
||||
);
|
||||
const searchAccessor = useCallback(
|
||||
(member) => [
|
||||
`${member.first_name} ${member.last_name}`,
|
||||
@@ -47,12 +68,14 @@ const MembersDirectory = () => {
|
||||
loading,
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
filterValue,
|
||||
} = useMembers({
|
||||
endpoint: '/members/directory',
|
||||
initialFilter: 'active',
|
||||
initialFilter: 'all',
|
||||
filterKey: 'status',
|
||||
allowedRoles,
|
||||
searchAccessor,
|
||||
transform: normalizeMembers,
|
||||
fetchErrorMessage: 'Failed to load members directory. Please try again.',
|
||||
onFetchError: handleFetchError
|
||||
});
|
||||
@@ -67,7 +90,12 @@ const MembersDirectory = () => {
|
||||
|
||||
const paginatedMembers = filteredMembers.slice(pageStart, pageStart + pageSize);
|
||||
|
||||
const totalMembers = members.length;
|
||||
const totalMembers = useMemo(() => {
|
||||
if (!filterValue || filterValue === 'all') {
|
||||
return members.length;
|
||||
}
|
||||
return members.filter((member) => member.status === filterValue).length;
|
||||
}, [members, filterValue]);
|
||||
|
||||
|
||||
|
||||
@@ -158,7 +186,7 @@ const MembersDirectory = () => {
|
||||
) : filteredMembers.length > 0 ? (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{paginatedMembers.map((member) => (
|
||||
<MemberCard key={member.id} member={member} onViewProfile={handleViewProfile} />
|
||||
<MemberCard key={member.id} member={member} onViewProfile={handleViewProfile} tiers={tiers} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
@@ -210,7 +238,7 @@ const MembersDirectory = () => {
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)] flex items-center justify-between mr-8" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{selectedMember.first_name} {selectedMember.last_name}
|
||||
<StatusBadge status={selectedMember.membership_status || selectedMember.status} />
|
||||
<MemberBadge memberSince={selectedMember.member_since || selectedMember.created_at} tiers={tiers} />
|
||||
</DialogTitle>
|
||||
{selectedMember.directory_partner_name && (
|
||||
<DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
|
||||
@@ -1,23 +1,56 @@
|
||||
// src/utils/member-tiers.js
|
||||
import { differenceInDays } from 'date-fns';
|
||||
import { DEFAULT_MEMBER_TIERS } from '../config/memberTiers';
|
||||
import { DEFAULT_MEMBER_TIERS } from '../config/MemberTiers';
|
||||
|
||||
export const getTenureDays = (memberSince) => {
|
||||
/**
|
||||
* Calculate tenure in years (with decimal precision)
|
||||
* @param {string|Date} memberSince - The date the member joined
|
||||
* @returns {number|null} - Years of membership or null if invalid
|
||||
*/
|
||||
export const getTenureYears = (memberSince) => {
|
||||
if (!memberSince) return null;
|
||||
const since = new Date(memberSince);
|
||||
if (Number.isNaN(since.getTime())) return null;
|
||||
return Math.max(0, differenceInDays(new Date(), since));
|
||||
|
||||
const now = new Date();
|
||||
const days = differenceInDays(now, since);
|
||||
// Convert to years with decimal precision
|
||||
return Math.max(0, days / 365.25);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the tier for a member based on their membership duration
|
||||
* @param {string|Date} memberSince - The date the member joined
|
||||
* @param {Array} tiers - Array of tier configurations
|
||||
* @returns {Object} - The matching tier object
|
||||
*/
|
||||
export const getTierForMember = (memberSince, tiers = DEFAULT_MEMBER_TIERS) => {
|
||||
const days = getTenureDays(memberSince);
|
||||
if (days == null) return tiers[0];
|
||||
const years = getTenureYears(memberSince);
|
||||
if (years == null) return tiers[0];
|
||||
|
||||
const match = tiers.find(
|
||||
(tier) =>
|
||||
days >= tier.minDays &&
|
||||
(tier.maxDays == null || days <= tier.maxDays)
|
||||
years >= tier.minYears &&
|
||||
(tier.maxYears == null || years <= tier.maxYears)
|
||||
);
|
||||
|
||||
return match || tiers[0];
|
||||
};
|
||||
|
||||
/**
|
||||
* Format tenure for display
|
||||
* @param {string|Date} memberSince - The date the member joined
|
||||
* @returns {string} - Human-readable tenure string
|
||||
*/
|
||||
export const formatTenure = (memberSince) => {
|
||||
const years = getTenureYears(memberSince);
|
||||
if (years == null) return 'Unknown';
|
||||
|
||||
if (years < 1) {
|
||||
const months = Math.floor(years * 12);
|
||||
return months <= 1 ? '< 1 month' : `${months} months`;
|
||||
}
|
||||
|
||||
const wholeYears = Math.floor(years);
|
||||
return wholeYears === 1 ? '1 year' : `${wholeYears} years`;
|
||||
};
|
||||
Reference in New Issue
Block a user