From 5c20ea16a3094c7923f7ad643286ba779cc88bd2 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sun, 28 Dec 2025 17:55:33 +0700
Subject: [PATCH] Fix incorrect Calendar usage in OrderDetail.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue:**
- Runtime error: 'Calendar is not defined' on order detail page
- Line 340 and 458 used <Calendar /> instead of <CalendarIcon />

**Root Cause:**
- OrderDetail.tsx imports: `import { Calendar as CalendarIcon } from 'lucide-react'`
- But JSX used: `<Calendar className="w-5 h-5" />` instead of `<CalendarIcon />`
- This referenced an undefined 'Calendar' variable

**Fix:**
- Changed line 340: <Calendar /> → <CalendarIcon />
- Changed line 458: <Calendar /> → <CalendarIcon />

**Context:**
- CalendarIcon is the lucide-react icon component
- Calendar (without Icon suffix) doesn't exist in this file's scope
- Combined with App.tsx fix, this fully resolves the ReferenceError

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/member/OrderDetail.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/member/OrderDetail.tsx b/src/pages/member/OrderDetail.tsx
index 2110fb5..91c2614 100644
--- a/src/pages/member/OrderDetail.tsx
+++ b/src/pages/member/OrderDetail.tsx
@@ -337,7 +337,7 @@ export default function OrderDetail() {
         <Card className="border-2 border-border mb-6">
           <CardHeader>
             <CardTitle className="text-lg flex items-center gap-2">
-              <Calendar className="w-5 h-5" />
+              <CalendarIcon className="w-5 h-5" />
               Informasi Order
             </CardTitle>
           </CardHeader>
@@ -455,7 +455,7 @@ export default function OrderDetail() {
                       Order ini telah dibatalkan secara otomatis karena waktu pembayaran habis.
                     </p>
                     <Button onClick={() => navigate("/consulting-booking")} className="shadow-sm">
-                      <Calendar className="w-4 h-4 mr-2" />
+                      <CalendarIcon className="w-4 h-4 mr-2" />
                       Buat Booking Baru
                     </Button>
                   </div>