1f0dcb1ddb
- Frontend: Next.js 14 with TypeScript - Backend: FastAPI with SQLAlchemy - Agent: Carmodoo sync agent - Deployment: Docker Compose based staging/production setup - Scripts: Automated deployment with rollback support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
617 lines
25 KiB
TypeScript
617 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { adminUserApi, AdminUser } from '@/lib/api';
|
|
|
|
type TabType = 'active' | 'deleted';
|
|
|
|
interface DeletedUser extends AdminUser {
|
|
deleted_at?: string;
|
|
withdrawal_reason?: string;
|
|
}
|
|
|
|
export default function AdminUsersPage() {
|
|
const [activeTab, setActiveTab] = useState<TabType>('active');
|
|
|
|
// Active users state
|
|
const [users, setUsers] = useState<AdminUser[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize] = useState(20);
|
|
const [search, setSearch] = useState('');
|
|
const [filterDealer, setFilterDealer] = useState<boolean | undefined>(undefined);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Deleted users state
|
|
const [deletedUsers, setDeletedUsers] = useState<DeletedUser[]>([]);
|
|
const [deletedTotal, setDeletedTotal] = useState(0);
|
|
const [deletedPage, setDeletedPage] = useState(1);
|
|
const [deletedSearch, setDeletedSearch] = useState('');
|
|
const [deletedLoading, setDeletedLoading] = useState(true);
|
|
|
|
// Modal state
|
|
const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
|
|
const [showCCModal, setShowCCModal] = useState(false);
|
|
const [ccAmount, setCCAmount] = useState('');
|
|
const [ccReason, setCCReason] = useState('');
|
|
|
|
// Delete modal state
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [deleteUser, setDeleteUser] = useState<AdminUser | null>(null);
|
|
const [deleteLoading, setDeleteLoading] = useState(false);
|
|
const [hardDelete, setHardDelete] = useState(false);
|
|
|
|
// Restore state
|
|
const [restoreLoading, setRestoreLoading] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'active') {
|
|
loadUsers();
|
|
} else {
|
|
loadDeletedUsers();
|
|
}
|
|
}, [page, filterDealer, activeTab, deletedPage]);
|
|
|
|
const loadUsers = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await adminUserApi.getUsers({
|
|
page,
|
|
page_size: pageSize,
|
|
search: search || undefined,
|
|
is_dealer: filterDealer,
|
|
});
|
|
setUsers(response.users);
|
|
setTotal(response.total);
|
|
} catch (error) {
|
|
console.error('Failed to load users:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadDeletedUsers = async () => {
|
|
try {
|
|
setDeletedLoading(true);
|
|
const response = await adminUserApi.getDeletedUsers({
|
|
page: deletedPage,
|
|
page_size: pageSize,
|
|
search: deletedSearch || undefined,
|
|
});
|
|
setDeletedUsers(response.users);
|
|
setDeletedTotal(response.total);
|
|
} catch (error) {
|
|
console.error('Failed to load deleted users:', error);
|
|
} finally {
|
|
setDeletedLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setPage(1);
|
|
loadUsers();
|
|
};
|
|
|
|
const handleDeletedSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setDeletedPage(1);
|
|
loadDeletedUsers();
|
|
};
|
|
|
|
const handleAdjustCC = async () => {
|
|
if (!selectedUser || !ccAmount) return;
|
|
|
|
try {
|
|
const result = await adminUserApi.adjustCC(
|
|
selectedUser.id,
|
|
parseFloat(ccAmount),
|
|
ccReason || 'Admin adjustment'
|
|
);
|
|
alert(`CC adjusted! New balance: ${result.new_balance}`);
|
|
setShowCCModal(false);
|
|
setCCAmount('');
|
|
setCCReason('');
|
|
loadUsers();
|
|
} catch (error) {
|
|
console.error('Failed to adjust CC:', error);
|
|
alert('Failed to adjust CC');
|
|
}
|
|
};
|
|
|
|
const handleDeleteUser = async () => {
|
|
if (!deleteUser) return;
|
|
|
|
setDeleteLoading(true);
|
|
try {
|
|
const result = await adminUserApi.deleteUser(deleteUser.id, hardDelete);
|
|
alert(result.message);
|
|
setShowDeleteModal(false);
|
|
setDeleteUser(null);
|
|
setHardDelete(false);
|
|
loadUsers();
|
|
loadDeletedUsers();
|
|
} catch (error: any) {
|
|
console.error('Failed to delete user:', error);
|
|
alert(error.response?.data?.detail || 'Failed to delete user');
|
|
} finally {
|
|
setDeleteLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRestoreUser = async (userId: number) => {
|
|
if (!confirm('Are you sure you want to restore this user?')) return;
|
|
|
|
setRestoreLoading(userId);
|
|
try {
|
|
const result = await adminUserApi.restoreUser(userId);
|
|
alert(result.message);
|
|
loadDeletedUsers();
|
|
loadUsers();
|
|
} catch (error: any) {
|
|
console.error('Failed to restore user:', error);
|
|
alert(error.response?.data?.detail || 'Failed to restore user');
|
|
} finally {
|
|
setRestoreLoading(null);
|
|
}
|
|
};
|
|
|
|
const handlePermanentDelete = async (user: DeletedUser) => {
|
|
if (!confirm(`Are you sure you want to PERMANENTLY delete ${user.email}? This cannot be undone!`)) return;
|
|
|
|
setRestoreLoading(user.id);
|
|
try {
|
|
const result = await adminUserApi.deleteUser(user.id, true);
|
|
alert(result.message);
|
|
loadDeletedUsers();
|
|
} catch (error: any) {
|
|
console.error('Failed to permanently delete user:', error);
|
|
alert(error.response?.data?.detail || 'Failed to delete user');
|
|
} finally {
|
|
setRestoreLoading(null);
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateStr?: string) => {
|
|
if (!dateStr) return '-';
|
|
return new Date(dateStr).toLocaleDateString('ko-KR', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
const deletedTotalPages = Math.ceil(deletedTotal / pageSize);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-gray-800">User Management</h1>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="border-b border-gray-200">
|
|
<nav className="-mb-px flex space-x-8">
|
|
<button
|
|
onClick={() => { setActiveTab('active'); setPage(1); }}
|
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
activeTab === 'active'
|
|
? 'border-primary-500 text-primary-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
Active Users
|
|
<span className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
|
|
activeTab === 'active' ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{total}
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() => { setActiveTab('deleted'); setDeletedPage(1); }}
|
|
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
activeTab === 'deleted'
|
|
? 'border-red-500 text-red-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
Deleted Users
|
|
<span className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
|
|
activeTab === 'deleted' ? 'bg-red-100 text-red-600' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{deletedTotal}
|
|
</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Active Users Tab */}
|
|
{activeTab === 'active' && (
|
|
<>
|
|
{/* Search & Filter */}
|
|
<div className="bg-white rounded-xl shadow-sm p-4">
|
|
<form onSubmit={handleSearch} className="flex flex-wrap gap-4">
|
|
<div className="flex-1 min-w-[200px]">
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Search by email, name, or phone..."
|
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={filterDealer === undefined ? '' : filterDealer ? 'true' : 'false'}
|
|
onChange={(e) => {
|
|
if (e.target.value === '') setFilterDealer(undefined);
|
|
else setFilterDealer(e.target.value === 'true');
|
|
setPage(1);
|
|
}}
|
|
className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">All Users</option>
|
|
<option value="true">Dealers Only</option>
|
|
<option value="false">Non-Dealers</option>
|
|
</select>
|
|
<button
|
|
type="submit"
|
|
className="px-6 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600"
|
|
>
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Users Table */}
|
|
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
|
|
</div>
|
|
) : users.length === 0 ? (
|
|
<div className="text-center py-12 text-gray-500">
|
|
No users found
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Country</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">CC Balance</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Referral</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Registered</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{users.map((user) => (
|
|
<tr key={user.id} className="hover:bg-gray-50">
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.id}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.email}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.name || '-'}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.phone || '-'}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.country || '-'}</td>
|
|
<td className="px-4 py-3 text-sm font-semibold text-blue-600">
|
|
{user.cc_balance.toLocaleString()} CC
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
{user.is_dealer ? (
|
|
<span className="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">Dealer</span>
|
|
) : (
|
|
<span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">User</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-500">
|
|
<div className="text-xs">
|
|
<div>Code: {user.referral_code || '-'}</div>
|
|
{user.referred_by && <div className="text-blue-500">By: {user.referred_by}</div>}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-500">
|
|
{formatDate(user.created_at)}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => {
|
|
setSelectedUser(user);
|
|
setShowCCModal(true);
|
|
}}
|
|
className="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600"
|
|
>
|
|
Adjust CC
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setDeleteUser(user);
|
|
setShowDeleteModal(true);
|
|
}}
|
|
className="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-between px-4 py-3 border-t">
|
|
<div className="text-sm text-gray-500">
|
|
Page {page} of {totalPages}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
|
disabled={page === totalPages}
|
|
className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Deleted Users Tab */}
|
|
{activeTab === 'deleted' && (
|
|
<>
|
|
{/* Search */}
|
|
<div className="bg-white rounded-xl shadow-sm p-4">
|
|
<form onSubmit={handleDeletedSearch} className="flex flex-wrap gap-4">
|
|
<div className="flex-1 min-w-[200px]">
|
|
<input
|
|
type="text"
|
|
value={deletedSearch}
|
|
onChange={(e) => setDeletedSearch(e.target.value)}
|
|
placeholder="Search deleted users by email, name, or phone..."
|
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
|
>
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Deleted Users Table */}
|
|
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
|
{deletedLoading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-red-500"></div>
|
|
</div>
|
|
) : deletedUsers.length === 0 ? (
|
|
<div className="text-center py-12 text-gray-500">
|
|
No deleted users found
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-red-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">ID</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Email</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Name</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Phone</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">CC Balance</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Deleted At</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Reason</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{deletedUsers.map((user) => (
|
|
<tr key={user.id} className="hover:bg-red-50">
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.id}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.email}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.name || '-'}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-800">{user.phone || '-'}</td>
|
|
<td className="px-4 py-3 text-sm font-semibold text-blue-600">
|
|
{user.cc_balance.toLocaleString()} CC
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-red-600">
|
|
{formatDate(user.deleted_at)}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-500 max-w-[200px] truncate">
|
|
{user.withdrawal_reason || '-'}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleRestoreUser(user.id)}
|
|
disabled={restoreLoading === user.id}
|
|
className="px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
|
|
>
|
|
{restoreLoading === user.id ? 'Restoring...' : 'Restore'}
|
|
</button>
|
|
<button
|
|
onClick={() => handlePermanentDelete(user)}
|
|
disabled={restoreLoading === user.id}
|
|
className="px-3 py-1 text-xs bg-red-700 text-white rounded hover:bg-red-800 disabled:opacity-50"
|
|
>
|
|
Permanent Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{deletedTotalPages > 1 && (
|
|
<div className="flex items-center justify-between px-4 py-3 border-t">
|
|
<div className="text-sm text-gray-500">
|
|
Page {deletedPage} of {deletedTotalPages}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setDeletedPage(p => Math.max(1, p - 1))}
|
|
disabled={deletedPage === 1}
|
|
className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => setDeletedPage(p => Math.min(deletedTotalPages, p + 1))}
|
|
disabled={deletedPage === deletedTotalPages}
|
|
className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* CC Adjustment Modal */}
|
|
{showCCModal && selectedUser && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
|
|
<h3 className="text-lg font-semibold mb-4">Adjust CC Balance</h3>
|
|
<div className="mb-4">
|
|
<p className="text-sm text-gray-600">User: {selectedUser.email}</p>
|
|
<p className="text-sm text-gray-600">Current Balance: {selectedUser.cc_balance.toLocaleString()} CC</p>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Amount (positive to add, negative to subtract)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={ccAmount}
|
|
onChange={(e) => setCCAmount(e.target.value)}
|
|
placeholder="e.g., 100 or -50"
|
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Reason (optional)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={ccReason}
|
|
onChange={(e) => setCCReason(e.target.value)}
|
|
placeholder="e.g., Bonus credit, Refund, etc."
|
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
onClick={() => {
|
|
setShowCCModal(false);
|
|
setCCAmount('');
|
|
setCCReason('');
|
|
}}
|
|
className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleAdjustCC}
|
|
disabled={!ccAmount}
|
|
className="flex-1 px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 disabled:opacity-50"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete User Modal */}
|
|
{showDeleteModal && deleteUser && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
|
|
<h3 className="text-lg font-semibold text-red-600 mb-4">Delete User</h3>
|
|
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
|
|
<p className="text-red-700 text-sm">
|
|
Are you sure you want to delete this user?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-4 space-y-2">
|
|
<p className="text-sm text-gray-600"><span className="font-medium">Email:</span> {deleteUser.email}</p>
|
|
<p className="text-sm text-gray-600"><span className="font-medium">Name:</span> {deleteUser.name || '-'}</p>
|
|
<p className="text-sm text-gray-600"><span className="font-medium">CC Balance:</span> {deleteUser.cc_balance.toLocaleString()} CC</p>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={hardDelete}
|
|
onChange={(e) => setHardDelete(e.target.checked)}
|
|
className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
|
|
/>
|
|
<span className="text-sm text-gray-700">
|
|
Permanently delete (cannot be recovered)
|
|
</span>
|
|
</label>
|
|
<p className="text-xs text-gray-500 mt-1 ml-6">
|
|
{hardDelete
|
|
? 'User and all related data will be permanently deleted from the database.'
|
|
: 'User will be soft deleted (can be restored from Deleted Users tab).'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-6">
|
|
<button
|
|
onClick={() => {
|
|
setShowDeleteModal(false);
|
|
setDeleteUser(null);
|
|
setHardDelete(false);
|
|
}}
|
|
className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleDeleteUser}
|
|
disabled={deleteLoading}
|
|
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
|
|
>
|
|
{deleteLoading ? 'Deleting...' : (hardDelete ? 'Delete Permanently' : 'Delete')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|