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
525
frontend/src/app/admin/vehicle-requests/page.tsx
Normal file
525
frontend/src/app/admin/vehicle-requests/page.tsx
Normal file
@@ -0,0 +1,525 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { vehicleRequestsApi, carmodooApi, VehicleRequest, VehicleRequestWithVehicles, CarmodooSearchResult } from '@/lib/api';
|
||||
|
||||
const ITEMS_PER_PAGE = 12;
|
||||
|
||||
export default function AdminVehicleRequestsPage() {
|
||||
const [requests, setRequests] = useState<VehicleRequest[]>([]);
|
||||
const [selectedRequest, setSelectedRequest] = useState<VehicleRequestWithVehicles | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState<CarmodooSearchResult[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [deletingVehicleId, setDeletingVehicleId] = useState<number | null>(null);
|
||||
|
||||
// Pagination state
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalResults, setTotalResults] = useState(0);
|
||||
|
||||
// Load requests
|
||||
useEffect(() => {
|
||||
loadRequests();
|
||||
}, [statusFilter]);
|
||||
|
||||
const loadRequests = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await vehicleRequestsApi.adminGetAllRequests(statusFilter || undefined);
|
||||
setRequests(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load requests:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Load request detail
|
||||
const loadRequestDetail = async (requestId: number) => {
|
||||
try {
|
||||
const data = await vehicleRequestsApi.adminGetRequestDetail(requestId);
|
||||
setSelectedRequest(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load request detail:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Search for vehicles based on request criteria
|
||||
const searchVehicles = async (page: number = 1) => {
|
||||
if (!selectedRequest) return;
|
||||
|
||||
try {
|
||||
setIsSearching(true);
|
||||
const params: any = {
|
||||
page: page,
|
||||
page_size: 50, // Fetch more results
|
||||
};
|
||||
|
||||
if (selectedRequest.request.maker_code) params.maker_code = selectedRequest.request.maker_code;
|
||||
if (selectedRequest.request.model_code) params.model_code = selectedRequest.request.model_code;
|
||||
if (selectedRequest.request.grade_code) params.grade = selectedRequest.request.grade_code;
|
||||
if (selectedRequest.request.year_from) params.year_min = selectedRequest.request.year_from;
|
||||
if (selectedRequest.request.year_to) params.year_max = selectedRequest.request.year_to;
|
||||
if (selectedRequest.request.mileage_min) params.mileage_min = selectedRequest.request.mileage_min;
|
||||
if (selectedRequest.request.mileage_max) params.mileage_max = selectedRequest.request.mileage_max;
|
||||
if (selectedRequest.request.fuel) params.fuel = selectedRequest.request.fuel;
|
||||
|
||||
const result = await carmodooApi.requestSearch(params);
|
||||
setSearchResults(result.cars);
|
||||
setTotalResults(result.cars.length);
|
||||
setCurrentPage(page);
|
||||
} catch (error) {
|
||||
console.error('Failed to search vehicles:', error);
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Get paginated results
|
||||
const getPaginatedResults = () => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
return searchResults.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(searchResults.length / ITEMS_PER_PAGE);
|
||||
|
||||
// Add vehicle to request
|
||||
const addVehicleToRequest = async (car: CarmodooSearchResult) => {
|
||||
if (!selectedRequest) return;
|
||||
|
||||
try {
|
||||
await vehicleRequestsApi.adminAddVehicle(selectedRequest.request.id, {
|
||||
request_id: selectedRequest.request.id,
|
||||
car_data: car,
|
||||
is_approved: true, // Auto-approve when adding
|
||||
});
|
||||
|
||||
// Reload request detail
|
||||
await loadRequestDetail(selectedRequest.request.id);
|
||||
|
||||
// Remove from search results
|
||||
setSearchResults(prev => prev.filter(c => c.id !== car.id));
|
||||
} catch (error) {
|
||||
console.error('Failed to add vehicle:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Delete vehicle from request
|
||||
const deleteVehicleFromRequest = async (vehicleId: number) => {
|
||||
if (!selectedRequest) return;
|
||||
|
||||
if (!confirm('Are you sure you want to remove this vehicle from the recommendation list?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setDeletingVehicleId(vehicleId);
|
||||
await vehicleRequestsApi.adminDeleteVehicle(selectedRequest.request.id, vehicleId);
|
||||
|
||||
// Reload request detail
|
||||
await loadRequestDetail(selectedRequest.request.id);
|
||||
} catch (error) {
|
||||
console.error('Failed to delete vehicle:', error);
|
||||
} finally {
|
||||
setDeletingVehicleId(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Update request status
|
||||
const updateStatus = async (requestId: number, newStatus: string) => {
|
||||
try {
|
||||
await vehicleRequestsApi.adminUpdateRequestStatus(requestId, newStatus);
|
||||
loadRequests();
|
||||
if (selectedRequest?.request.id === requestId) {
|
||||
loadRequestDetail(requestId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Format date
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
// Get status badge
|
||||
const getStatusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
pending: 'bg-yellow-100 text-yellow-800',
|
||||
reviewed: 'bg-blue-100 text-blue-800',
|
||||
completed: 'bg-green-100 text-green-800',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
pending: 'Pending',
|
||||
reviewed: 'Reviewed',
|
||||
completed: 'Completed',
|
||||
};
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status] || 'bg-gray-100 text-gray-800'}`}>
|
||||
{labels[status] || status}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-gray-800">Vehicle Requests</h1>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="border border-gray-300 rounded-lg px-4 py-2"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="reviewed">Reviewed</option>
|
||||
<option value="completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Requests List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="font-semibold text-gray-700">Requests ({requests.length})</h2>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
|
||||
</div>
|
||||
) : requests.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">No requests found</div>
|
||||
) : (
|
||||
<div className="divide-y max-h-[600px] overflow-y-auto">
|
||||
{requests.map((request) => (
|
||||
<div
|
||||
key={request.id}
|
||||
onClick={() => loadRequestDetail(request.id)}
|
||||
className={`p-4 cursor-pointer hover:bg-gray-50 transition ${
|
||||
selectedRequest?.request.id === request.id ? 'bg-primary-50' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-800">
|
||||
{request.maker_name} - {request.model_name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
User ID: {request.user_id}
|
||||
</p>
|
||||
</div>
|
||||
{getStatusBadge(request.status)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{request.year_from && request.year_to && (
|
||||
<span className="mr-4">Year: {request.year_from}-{request.year_to}</span>
|
||||
)}
|
||||
{request.mileage_max && (
|
||||
<span>Max Mileage: {Math.round(request.mileage_max / 10000)}만km</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{formatDate(request.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Request Detail */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="font-semibold text-gray-700">Request Detail</h2>
|
||||
</div>
|
||||
|
||||
{!selectedRequest ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
Select a request to view details
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Request Info */}
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<h3 className="font-semibold text-gray-700 mb-3">Search Criteria</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">Maker:</span>
|
||||
<span className="ml-2 font-medium">{selectedRequest.request.maker_name}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Model:</span>
|
||||
<span className="ml-2 font-medium">{selectedRequest.request.model_name}</span>
|
||||
</div>
|
||||
{selectedRequest.request.grade_name && (
|
||||
<div>
|
||||
<span className="text-gray-500">Grade:</span>
|
||||
<span className="ml-2 font-medium">{selectedRequest.request.grade_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{(selectedRequest.request.year_from || selectedRequest.request.year_to) && (
|
||||
<div>
|
||||
<span className="text-gray-500">Year:</span>
|
||||
<span className="ml-2 font-medium">
|
||||
{selectedRequest.request.year_from || '-'} ~ {selectedRequest.request.year_to || '-'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{(selectedRequest.request.mileage_min || selectedRequest.request.mileage_max) && (
|
||||
<div>
|
||||
<span className="text-gray-500">Mileage:</span>
|
||||
<span className="ml-2 font-medium">
|
||||
{selectedRequest.request.mileage_min ? Math.round(selectedRequest.request.mileage_min / 10000) : '-'} ~{' '}
|
||||
{selectedRequest.request.mileage_max ? Math.round(selectedRequest.request.mileage_max / 10000) : '-'} 만km
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedRequest.request.fuel && (
|
||||
<div>
|
||||
<span className="text-gray-500">Fuel:</span>
|
||||
<span className="ml-2 font-medium">{selectedRequest.request.fuel}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-500">Status:</span>
|
||||
{getStatusBadge(selectedRequest.request.status)}
|
||||
<select
|
||||
value={selectedRequest.request.status}
|
||||
onChange={(e) => updateStatus(selectedRequest.request.id, e.target.value)}
|
||||
className="ml-auto border border-gray-300 rounded px-3 py-1 text-sm"
|
||||
>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="reviewed">Reviewed</option>
|
||||
<option value="completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Approved Vehicles */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="font-semibold text-gray-700">
|
||||
Recommended Vehicles ({selectedRequest.approved_vehicles.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddModal(true);
|
||||
setCurrentPage(1);
|
||||
searchVehicles(1);
|
||||
}}
|
||||
className="bg-primary-600 text-white px-3 py-1 rounded text-sm hover:bg-primary-700"
|
||||
>
|
||||
+ Add Vehicle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{selectedRequest.approved_vehicles.length === 0 ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500 text-sm">
|
||||
No vehicles added yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
||||
{selectedRequest.approved_vehicles.map((vehicle) => (
|
||||
<div key={vehicle.id} className="bg-gray-50 rounded-lg p-3 flex items-center gap-3">
|
||||
{vehicle.car_data.main_image && (
|
||||
<img
|
||||
src={vehicle.car_data.main_image}
|
||||
alt=""
|
||||
className="w-16 h-12 object-cover rounded"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-sm truncate">{vehicle.car_data.car_name}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{vehicle.car_data.year} | {vehicle.car_data.mileage?.toLocaleString()}km
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-primary-600">
|
||||
{vehicle.car_data.final_price?.toLocaleString()}만원
|
||||
</p>
|
||||
<button
|
||||
onClick={() => deleteVehicleFromRequest(vehicle.id)}
|
||||
disabled={deletingVehicleId === vehicle.id}
|
||||
className="text-red-500 hover:text-red-700 p-1 disabled:opacity-50"
|
||||
title="Remove from list"
|
||||
>
|
||||
{deletingVehicleId === vehicle.id ? (
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-red-500"></div>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Vehicle Modal */}
|
||||
{showAddModal && selectedRequest && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<div className="p-4 border-b flex items-center justify-between shrink-0">
|
||||
<h3 className="font-semibold text-gray-800">Search & Add Vehicles</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddModal(false);
|
||||
setSearchResults([]);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="text-gray-500 hover:text-gray-700 text-2xl"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-b shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Searching for: <span className="font-medium">{selectedRequest.request.maker_name} {selectedRequest.request.model_name}</span>
|
||||
</p>
|
||||
{searchResults.length > 0 && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Found {searchResults.length} vehicles (showing {Math.min((currentPage - 1) * ITEMS_PER_PAGE + 1, searchResults.length)}-{Math.min(currentPage * ITEMS_PER_PAGE, searchResults.length)})
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => searchVehicles(1)}
|
||||
disabled={isSearching}
|
||||
className="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
{isSearching ? 'Searching...' : 'Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{isSearching ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-500">Searching from Carmodoo...</p>
|
||||
</div>
|
||||
) : searchResults.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">No vehicles found</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{getPaginatedResults().map((car) => (
|
||||
<div key={car.id} className="border rounded-lg p-3 hover:shadow-md transition">
|
||||
{car.main_image && (
|
||||
<img
|
||||
src={car.main_image}
|
||||
alt=""
|
||||
className="w-full h-32 object-cover rounded mb-2"
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-sm truncate" title={car.car_name}>{car.car_name}</p>
|
||||
<div className="text-xs text-gray-500 space-y-0.5">
|
||||
<p>{car.year}년 | {car.mileage?.toLocaleString()}km</p>
|
||||
<p>{car.fuel} | {car.transmission}</p>
|
||||
{car.color && <p>Color: {car.color}</p>}
|
||||
</div>
|
||||
<p className="text-sm font-bold text-primary-600">
|
||||
{car.final_price?.toLocaleString()}만원
|
||||
</p>
|
||||
<button
|
||||
onClick={() => addVehicleToRequest(car)}
|
||||
className="w-full bg-green-600 text-white px-3 py-1.5 rounded text-sm hover:bg-green-700 mt-2"
|
||||
>
|
||||
+ Add to List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{searchResults.length > ITEMS_PER_PAGE && (
|
||||
<div className="p-4 border-t shrink-0 flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{/* Page numbers */}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1)
|
||||
.filter(page => {
|
||||
// Show first, last, current, and pages near current
|
||||
return page === 1 || page === totalPages || Math.abs(page - currentPage) <= 2;
|
||||
})
|
||||
.map((page, index, array) => (
|
||||
<span key={page}>
|
||||
{index > 0 && array[index - 1] !== page - 1 && (
|
||||
<span className="px-2 text-gray-400">...</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={`px-3 py-1 border rounded ${
|
||||
currentPage === page
|
||||
? 'bg-primary-600 text-white border-primary-600'
|
||||
: 'hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(totalPages)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user