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:
@@ -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">
|
||||
<p className="text-muted-foreground">
|
||||
Configure tier names, time ranges, and badges used in the members directory.
|
||||
</p>
|
||||
{/* 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 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)]">
|
||||
<div className="space-y-4">
|
||||
{DEFAULT_MEMBER_TIERS.map((tier) => {
|
||||
const rangeLabel = tier.maxDays == null
|
||||
? `${tier.minDays}+ days`
|
||||
: `${tier.minDays}–${tier.maxDays} days`;
|
||||
{/* Tier Cards */}
|
||||
<div className="space-y-4">
|
||||
{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"
|
||||
>
|
||||
<div>
|
||||
<div className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{tier.label}
|
||||
return (
|
||||
<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}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<Badge className={`px-3 py-1 rounded-md text-sm ${tier.badgeClass}`}>
|
||||
{tier.icon}
|
||||
</Badge>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user