feat: Add Admin UI for banner management
- Create /admin/banners page with full CRUD operations - Add BannerManager.tsx client component for interactive management - Add banner-actions.ts server actions (create, update, toggle, delete) - Add 'Manage Banners' link to admin dashboard - Features: image preview, activate/deactivate toggle, edit inline
This commit is contained in:
396
src/app/admin/banners/BannerManager.tsx
Normal file
396
src/app/admin/banners/BannerManager.tsx
Normal file
@@ -0,0 +1,396 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Image, ExternalLink, ToggleLeft, ToggleRight, Trash2, Plus, Edit2, Save, X, Loader2, Check } from 'lucide-react';
|
||||
import { Banner, createBanner, updateBanner, toggleBannerActive, deleteBanner } from '@/services/banner-actions';
|
||||
|
||||
interface BannerManagerProps {
|
||||
initialBanners: Banner[];
|
||||
}
|
||||
|
||||
export default function BannerManager({ initialBanners }: BannerManagerProps) {
|
||||
const [banners, setBanners] = useState<Banner[]>(initialBanners);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<string | null>(null);
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
||||
|
||||
// Form states
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
image_url: '',
|
||||
link_target: '',
|
||||
cta_text: 'Open',
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({ title: '', image_url: '', link_target: '', cta_text: 'Open' });
|
||||
setShowCreateForm(false);
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const showMessage = (type: 'success' | 'error', text: string) => {
|
||||
setMessage({ type, text });
|
||||
setTimeout(() => setMessage(null), 3000);
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading('create');
|
||||
|
||||
const form = new FormData();
|
||||
form.append('title', formData.title);
|
||||
form.append('image_url', formData.image_url);
|
||||
form.append('link_target', formData.link_target);
|
||||
form.append('cta_text', formData.cta_text);
|
||||
|
||||
const result = await createBanner(form);
|
||||
|
||||
if (result.success) {
|
||||
showMessage('success', 'Banner created successfully');
|
||||
// Refresh - in real app would revalidate
|
||||
window.location.reload();
|
||||
} else {
|
||||
showMessage('error', result.error || 'Failed to create banner');
|
||||
}
|
||||
|
||||
setIsLoading(null);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const handleUpdate = async (id: string) => {
|
||||
setIsLoading(id);
|
||||
|
||||
const form = new FormData();
|
||||
form.append('title', formData.title);
|
||||
form.append('image_url', formData.image_url);
|
||||
form.append('link_target', formData.link_target);
|
||||
form.append('cta_text', formData.cta_text);
|
||||
|
||||
const result = await updateBanner(id, form);
|
||||
|
||||
if (result.success) {
|
||||
showMessage('success', 'Banner updated successfully');
|
||||
setBanners(banners.map(b =>
|
||||
b.id === id
|
||||
? { ...b, ...formData }
|
||||
: b
|
||||
));
|
||||
} else {
|
||||
showMessage('error', result.error || 'Failed to update banner');
|
||||
}
|
||||
|
||||
setIsLoading(null);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const handleToggleActive = async (id: string, currentStatus: boolean) => {
|
||||
setIsLoading(id);
|
||||
|
||||
const result = await toggleBannerActive(id, !currentStatus);
|
||||
|
||||
if (result.success) {
|
||||
showMessage('success', !currentStatus ? 'Banner activated' : 'Banner deactivated');
|
||||
// If activating, deactivate all others
|
||||
setBanners(banners.map(b => ({
|
||||
...b,
|
||||
is_active: b.id === id ? !currentStatus : (!currentStatus ? false : b.is_active)
|
||||
})));
|
||||
} else {
|
||||
showMessage('error', result.error || 'Failed to toggle banner');
|
||||
}
|
||||
|
||||
setIsLoading(null);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Are you sure you want to delete this banner?')) return;
|
||||
|
||||
setIsLoading(id);
|
||||
|
||||
const result = await deleteBanner(id);
|
||||
|
||||
if (result.success) {
|
||||
showMessage('success', 'Banner deleted');
|
||||
setBanners(banners.filter(b => b.id !== id));
|
||||
} else {
|
||||
showMessage('error', result.error || 'Failed to delete banner');
|
||||
}
|
||||
|
||||
setIsLoading(null);
|
||||
};
|
||||
|
||||
const startEditing = (banner: Banner) => {
|
||||
setEditingId(banner.id);
|
||||
setFormData({
|
||||
title: banner.title,
|
||||
image_url: banner.image_url,
|
||||
link_target: banner.link_target || '',
|
||||
cta_text: banner.cta_text || 'Open',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Message Toast */}
|
||||
{message && (
|
||||
<div className={`fixed top-4 right-4 z-50 px-4 py-3 rounded-xl shadow-lg animate-in slide-in-from-right ${message.type === 'success'
|
||||
? 'bg-green-500/20 border border-green-500/50 text-green-400'
|
||||
: 'bg-red-500/20 border border-red-500/50 text-red-400'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Button / Form */}
|
||||
{!showCreateForm ? (
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="w-full py-4 bg-zinc-900 hover:bg-zinc-800 border border-dashed border-zinc-700 hover:border-orange-600/50 rounded-2xl text-zinc-400 hover:text-orange-500 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus size={20} />
|
||||
<span className="font-bold">Add New Banner</span>
|
||||
</button>
|
||||
) : (
|
||||
<form onSubmit={handleCreate} className="p-6 bg-zinc-900 rounded-2xl border border-zinc-800 space-y-4">
|
||||
<h3 className="text-lg font-bold text-white mb-4">Create New Banner</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-zinc-400 mb-1">Title *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={e => setFormData({ ...formData, title: e.target.value })}
|
||||
placeholder="Banner title"
|
||||
className="w-full px-4 py-3 bg-zinc-950 border border-zinc-800 rounded-xl text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-zinc-400 mb-1">Image URL * (16:9 recommended)</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.image_url}
|
||||
onChange={e => setFormData({ ...formData, image_url: e.target.value })}
|
||||
placeholder="https://example.com/banner.jpg"
|
||||
className="w-full px-4 py-3 bg-zinc-950 border border-zinc-800 rounded-xl text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-zinc-400 mb-1">Link Target</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.link_target}
|
||||
onChange={e => setFormData({ ...formData, link_target: e.target.value })}
|
||||
placeholder="/sessions"
|
||||
className="w-full px-4 py-3 bg-zinc-950 border border-zinc-800 rounded-xl text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-zinc-400 mb-1">CTA Text</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.cta_text}
|
||||
onChange={e => setFormData({ ...formData, cta_text: e.target.value })}
|
||||
placeholder="Open"
|
||||
className="w-full px-4 py-3 bg-zinc-950 border border-zinc-800 rounded-xl text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{formData.image_url && (
|
||||
<div className="mt-4">
|
||||
<label className="block text-xs font-bold text-zinc-400 mb-2">Preview</label>
|
||||
<div className="aspect-video rounded-xl overflow-hidden bg-zinc-800">
|
||||
<img
|
||||
src={formData.image_url}
|
||||
alt="Preview"
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => { (e.target as HTMLImageElement).src = '/placeholder.png'; }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetForm}
|
||||
className="flex-1 py-3 bg-zinc-800 text-zinc-400 rounded-xl font-bold hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading === 'create'}
|
||||
className="flex-1 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-xl font-bold disabled:opacity-50 flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
{isLoading === 'create' ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Plus size={18} />
|
||||
Create Banner
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Banners List */}
|
||||
<div className="space-y-4">
|
||||
{banners.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto rounded-2xl bg-zinc-900 flex items-center justify-center mb-4">
|
||||
<Image size={32} className="text-zinc-600" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-white mb-2">No Banners Yet</p>
|
||||
<p className="text-sm text-zinc-500">Create your first banner to display on the home page.</p>
|
||||
</div>
|
||||
) : (
|
||||
banners.map(banner => (
|
||||
<div
|
||||
key={banner.id}
|
||||
className={`p-4 bg-zinc-900 rounded-2xl border transition-all ${banner.is_active
|
||||
? 'border-green-600/50 ring-1 ring-green-600/20'
|
||||
: 'border-zinc-800'
|
||||
}`}
|
||||
>
|
||||
{editingId === banner.id ? (
|
||||
/* Edit Form */
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={e => setFormData({ ...formData, title: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded-lg text-white"
|
||||
/>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.image_url}
|
||||
onChange={e => setFormData({ ...formData, image_url: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-zinc-950 border border-zinc-700 rounded-lg text-white"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.link_target}
|
||||
onChange={e => setFormData({ ...formData, link_target: e.target.value })}
|
||||
placeholder="Link target"
|
||||
className="px-3 py-2 bg-zinc-950 border border-zinc-700 rounded-lg text-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.cta_text}
|
||||
onChange={e => setFormData({ ...formData, cta_text: e.target.value })}
|
||||
placeholder="CTA text"
|
||||
className="px-3 py-2 bg-zinc-950 border border-zinc-700 rounded-lg text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => resetForm()}
|
||||
className="px-4 py-2 bg-zinc-800 text-zinc-400 rounded-lg"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleUpdate(banner.id)}
|
||||
disabled={isLoading === banner.id}
|
||||
className="flex-1 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-bold flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading === banner.id ? (
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Save size={16} />
|
||||
Save
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Display Mode */
|
||||
<div className="flex gap-4">
|
||||
{/* Thumbnail */}
|
||||
<div className="w-32 h-20 rounded-lg overflow-hidden bg-zinc-800 flex-shrink-0">
|
||||
<img
|
||||
src={banner.image_url}
|
||||
alt={banner.title}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-bold text-white truncate">{banner.title}</h3>
|
||||
{banner.is_active && (
|
||||
<span className="px-2 py-0.5 bg-green-600/20 text-green-400 text-[10px] font-bold uppercase rounded-full">
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{banner.link_target && (
|
||||
<p className="text-xs text-zinc-500 flex items-center gap-1">
|
||||
<ExternalLink size={12} />
|
||||
{banner.link_target}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-zinc-600 mt-1">
|
||||
CTA: {banner.cta_text}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleToggleActive(banner.id, banner.is_active)}
|
||||
disabled={isLoading === banner.id}
|
||||
className={`p-2 rounded-lg transition-colors ${banner.is_active
|
||||
? 'bg-green-600/20 text-green-400 hover:bg-green-600/30'
|
||||
: 'bg-zinc-800 text-zinc-500 hover:text-white'
|
||||
}`}
|
||||
title={banner.is_active ? 'Deactivate' : 'Activate'}
|
||||
>
|
||||
{isLoading === banner.id ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : banner.is_active ? (
|
||||
<ToggleRight size={18} />
|
||||
) : (
|
||||
<ToggleLeft size={18} />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => startEditing(banner)}
|
||||
className="p-2 bg-zinc-800 text-zinc-400 hover:text-white rounded-lg transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(banner.id)}
|
||||
disabled={isLoading === banner.id}
|
||||
className="p-2 bg-zinc-800 text-zinc-400 hover:text-red-500 rounded-lg transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
src/app/admin/banners/page.tsx
Normal file
56
src/app/admin/banners/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
import { createClient } from '@/lib/supabase/server';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { checkIsAdmin } from '@/services/track-api-usage';
|
||||
import { getBanners } from '@/services/banner-actions';
|
||||
import Link from 'next/link';
|
||||
import { ArrowLeft, Image, ExternalLink, ToggleLeft, ToggleRight, Trash2, Plus, Edit2 } from 'lucide-react';
|
||||
import BannerManager from './BannerManager';
|
||||
|
||||
export default async function AdminBannersPage() {
|
||||
const supabase = await createClient();
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
redirect('/');
|
||||
}
|
||||
|
||||
const isAdmin = await checkIsAdmin(user.id);
|
||||
if (!isAdmin) {
|
||||
redirect('/');
|
||||
}
|
||||
|
||||
const { banners, error } = await getBanners();
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-950 p-6 pb-24">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="p-2 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-700 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</Link>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-white">Banner Management</h1>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Manage hero banners for the home page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-sm">
|
||||
Error loading banners: {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Client Component for Interactive Banner Management */}
|
||||
<BannerManager initialBanners={banners} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -117,6 +117,12 @@ export default async function AdminPage() {
|
||||
>
|
||||
Manage Users
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/banners"
|
||||
className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-xl font-bold transition-colors"
|
||||
>
|
||||
Manage Banners
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="px-4 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-xl font-bold hover:bg-zinc-800 transition-colors"
|
||||
|
||||
123
src/services/banner-actions.ts
Normal file
123
src/services/banner-actions.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
'use server';
|
||||
|
||||
import { createClient } from '@/lib/supabase/server';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
export interface Banner {
|
||||
id: string;
|
||||
title: string;
|
||||
image_url: string;
|
||||
link_target: string | null;
|
||||
cta_text: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export async function getBanners(): Promise<{ banners: Banner[]; error: string | null }> {
|
||||
const supabase = await createClient();
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('app_banners')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error('[getBanners] Error:', error);
|
||||
return { banners: [], error: error.message };
|
||||
}
|
||||
|
||||
return { banners: data || [], error: null };
|
||||
}
|
||||
|
||||
export async function createBanner(formData: FormData): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient();
|
||||
|
||||
const title = formData.get('title') as string;
|
||||
const image_url = formData.get('image_url') as string;
|
||||
const link_target = formData.get('link_target') as string || null;
|
||||
const cta_text = formData.get('cta_text') as string || 'Open';
|
||||
|
||||
if (!title || !image_url) {
|
||||
return { success: false, error: 'Title and image URL are required' };
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('app_banners')
|
||||
.insert({ title, image_url, link_target, cta_text, is_active: false });
|
||||
|
||||
if (error) {
|
||||
console.error('[createBanner] Error:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
|
||||
revalidatePath('/admin/banners');
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function updateBanner(id: string, formData: FormData): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient();
|
||||
|
||||
const title = formData.get('title') as string;
|
||||
const image_url = formData.get('image_url') as string;
|
||||
const link_target = formData.get('link_target') as string || null;
|
||||
const cta_text = formData.get('cta_text') as string || 'Open';
|
||||
|
||||
const { error } = await supabase
|
||||
.from('app_banners')
|
||||
.update({ title, image_url, link_target, cta_text })
|
||||
.eq('id', id);
|
||||
|
||||
if (error) {
|
||||
console.error('[updateBanner] Error:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
|
||||
revalidatePath('/admin/banners');
|
||||
revalidatePath('/');
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function toggleBannerActive(id: string, isActive: boolean): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient();
|
||||
|
||||
// If activating, first deactivate all other banners (only one active at a time)
|
||||
if (isActive) {
|
||||
await supabase
|
||||
.from('app_banners')
|
||||
.update({ is_active: false })
|
||||
.neq('id', id);
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('app_banners')
|
||||
.update({ is_active: isActive })
|
||||
.eq('id', id);
|
||||
|
||||
if (error) {
|
||||
console.error('[toggleBannerActive] Error:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
|
||||
revalidatePath('/admin/banners');
|
||||
revalidatePath('/');
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function deleteBanner(id: string): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient();
|
||||
|
||||
const { error } = await supabase
|
||||
.from('app_banners')
|
||||
.delete()
|
||||
.eq('id', id);
|
||||
|
||||
if (error) {
|
||||
console.error('[deleteBanner] Error:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
|
||||
revalidatePath('/admin/banners');
|
||||
revalidatePath('/');
|
||||
return { success: true };
|
||||
}
|
||||
Reference in New Issue
Block a user