Initial commit: AutonetSellCar platform with deployment system
- 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>
This commit is contained in:
AutonetSellCar Deploy
616
frontend/src/app/admin/users/page.tsx
Normal file
616
frontend/src/app/admin/users/page.tsx
Normal file
@@ -0,0 +1,616 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user