From 0e55ab201a6ac68dd3ea0cf5d55c3565e501d6e2 Mon Sep 17 00:00:00 2001
From: AutonetSellCar Deploy <autonet@grantech.kr>
Date: Sat, 3 Jan 2026 12:26:47 +0900
Subject: [PATCH] Fix vehicle click issue in My Vehicle Requests page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use car_id or fallback to car_data.local_car_id or car_data.id
- Disable link if no valid car ID is available
- Show "Vehicle unavailable" message when car ID is missing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/app/my-request/page.tsx | 144 ++++++++++++++++++---------
 1 file changed, 98 insertions(+), 46 deletions(-)

diff --git a/frontend/src/app/my-request/page.tsx b/frontend/src/app/my-request/page.tsx
index 77ce258..cb8901f 100644
--- a/frontend/src/app/my-request/page.tsx
+++ b/frontend/src/app/my-request/page.tsx
@@ -211,58 +211,110 @@ export default function MyRequestPage() {
                       {item.approved_vehicles.map((vehicle) => {
                         const carData = vehicle.car_data;
                         const priceInfo = formatPrice(carData?.final_price);
+                        const isSoldout = carData?.soldout === true;
+                        // Use car_id from vehicle or fallback to local_car_id in car_data
+                        const carId = vehicle.car_id || carData?.local_car_id || carData?.id;
 
                         return (
-                          <div key={vehicle.id} className="bg-white rounded-lg shadow-sm overflow-hidden border">
-                            {/* Vehicle Image */}
-                            <div className="relative h-40 bg-gray-200">
-                              {carData?.main_image ? (
-                                <Image
-                                  src={carData.main_image}
-                                  alt={carData.car_name || 'Vehicle'}
-                                  fill
-                                  className="object-cover"
-                                  unoptimized
-                                />
+                          <div key={vehicle.id} className={`bg-white rounded-lg shadow-sm overflow-hidden border transition-shadow ${isSoldout ? 'opacity-75' : 'hover:shadow-md'}`}>
+                            {/* Clickable Vehicle Card */}
+                            <Link href={carId ? `/cars/${carId}` : '#'} className={`block ${!carId ? 'pointer-events-none' : ''}`}>
+                              {/* Vehicle Image */}
+                              <div className="relative h-40 bg-gray-200">
+                                {carData?.main_image ? (
+                                  <Image
+                                    src={carData.main_image}
+                                    alt={carData.car_name || 'Vehicle'}
+                                    fill
+                                    className={`object-cover ${isSoldout ? 'grayscale' : ''}`}
+                                    unoptimized
+                                  />
+                                ) : (
+                                  <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+                                    <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                    </svg>
+                                  </div>
+                                )}
+                                {/* Soldout Badge */}
+                                {isSoldout && (
+                                  <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+                                    <span className="bg-red-600 text-white px-4 py-2 rounded-lg font-bold text-lg transform -rotate-12 shadow-lg">
+                                      {language === 'ko' ? '판매완료' : 'SOLD OUT'}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+
+                              {/* Vehicle Info */}
+                              <div className="p-4">
+                                <h5 className="font-semibold text-gray-800 mb-2 line-clamp-2">
+                                  {translateCarName(carData?.car_name, language)}
+                                </h5>
+
+                                <div className="text-sm text-gray-600 space-y-1 mb-3">
+                                  <div className="flex justify-between">
+                                    <span>{t.year}</span>
+                                    <span>{carData?.year || '-'}</span>
+                                  </div>
+                                  <div className="flex justify-between">
+                                    <span>{t.mileage}</span>
+                                    <span>{carData?.mileage?.toLocaleString()} km</span>
+                                  </div>
+                                  <div className="flex justify-between">
+                                    <span>{t.fuel}</span>
+                                    <span>{translateCarName(carData?.fuel, language) || '-'}</span>
+                                  </div>
+                                </div>
+
+                                <div className="border-t pt-3">
+                                  <div className="text-primary-600 font-bold text-lg">
+                                    {priceInfo.usdt}
+                                  </div>
+                                  <div className="text-gray-500 text-sm">
+                                    {priceInfo.local}
+                                  </div>
+                                </div>
+                              </div>
+                            </Link>
+
+                            {/* Action Buttons */}
+                            <div className="px-4 pb-4 flex gap-2">
+                              {isSoldout ? (
+                                <div className="flex-1 bg-gray-400 text-white text-sm py-2 px-3 rounded-lg text-center font-medium">
+                                  {language === 'ko' ? '판매완료' : 'Sold Out'}
+                                </div>
+                              ) : carId ? (
+                                <>
+                                  <button
+                                    type="button"
+                                    onClick={() => router.push(`/cars/${carId}?action=purchase`)}
+                                    className="flex-1 bg-primary-600 text-white text-sm py-2 px-3 rounded-lg hover:bg-primary-700 transition font-medium"
+                                  >
+                                    {language === 'ko' ? '구매하기' : 'Purchase'}
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() => {
+                                      if (user?.is_dealer) {
+                                        router.push(`/cars/${carId}?action=recommend`);
+                                      } else {
+                                        alert(language === 'ko'
+                                          ? '딜러 회원만 지인 추천 기능을 사용할 수 있습니다. 딜러 등록을 원하시면 고객센터로 문의해주세요.'
+                                          : 'Only dealer members can use the referral feature. Please contact customer service to register as a dealer.');
+                                      }
+                                    }}
+                                    className="flex-1 bg-green-600 text-white text-sm py-2 px-3 rounded-lg hover:bg-green-700 transition font-medium"
+                                  >
+                                    {language === 'ko' ? '지인에게 추천' : 'Recommend to friend'}
+                                  </button>
+                                </>
                               ) : (
-                                <div className="absolute inset-0 flex items-center justify-center text-gray-400">
-                                  <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                  </svg>
+                                <div className="flex-1 bg-gray-300 text-gray-500 text-sm py-2 px-3 rounded-lg text-center font-medium">
+                                  {language === 'ko' ? '차량 정보 없음' : 'Vehicle unavailable'}
                                 </div>
                               )}
                             </div>
-
-                            {/* Vehicle Info */}
-                            <div className="p-4">
-                              <h5 className="font-semibold text-gray-800 mb-2 line-clamp-2">
-                                {translateCarName(carData?.car_name, language)}
-                              </h5>
-
-                              <div className="text-sm text-gray-600 space-y-1 mb-3">
-                                <div className="flex justify-between">
-                                  <span>{t.year}</span>
-                                  <span>{carData?.year || '-'}</span>
-                                </div>
-                                <div className="flex justify-between">
-                                  <span>{t.mileage}</span>
-                                  <span>{carData?.mileage?.toLocaleString()} km</span>
-                                </div>
-                                <div className="flex justify-between">
-                                  <span>{t.fuel}</span>
-                                  <span>{translateCarName(carData?.fuel, language) || '-'}</span>
-                                </div>
-                              </div>
-
-                              <div className="border-t pt-3">
-                                <div className="text-primary-600 font-bold text-lg">
-                                  {priceInfo.usdt}
-                                </div>
-                                <div className="text-gray-500 text-sm">
-                                  {priceInfo.local}
-                                </div>
-                              </div>
-                            </div>
                           </div>
                         );
                       })}