Improve cancelled order display and add notes to order detail

- Add "Catatan" field display in consulting order detail page
- Add dedicated "Cancelled Order" section with rebooking option
- Update status alert to show proper message for cancelled orders
- Refactor edge function to focus on calendar cleanup only
- Set payment_status to 'failed' when auto-cancelling expired orders

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/member/OrderDetail.tsx

@@ -517,6 +517,57 @@ export default function OrderDetail() {
               </div>
             )}
 
+            {/* Cancelled Order Handling */}
+            {order.status === "cancelled" && (
+              <div className="pt-4">
+                <Alert className="mb-4 border-red-200 bg-red-50">
+                  <AlertCircle className="h-4 w-4 text-red-600" />
+                  <AlertDescription className="text-red-900">
+                    {isConsultingOrder
+                      ? "Order ini telah dibatalkan. Slot konsultasi telah dilepaskan."
+                      : "Order ini telah dibatalkan."}
+                  </AlertDescription>
+                </Alert>
+
+                {isConsultingOrder ? (
+                  // Consulting order - show booking button with pre-filled data
+                  <div className="text-center space-y-4">
+                    <Button
+                      onClick={() => {
+                        // Pass expired order data to prefill the booking form
+                        const expiredData = {
+                          fromExpiredOrder: true,
+                          orderId: order.id,
+                          topicCategory: consultingSlots[0]?.topic_category || '',
+                          notes: consultingSlots[0]?.notes || ''
+                        };
+                        // Store in sessionStorage for the booking page to retrieve
+                        sessionStorage.setItem('expiredConsultingOrder', JSON.stringify(expiredData));
+                        navigate("/consulting");
+                      }}
+                      className="shadow-sm"
+                    >
+                      <CalendarIcon className="w-4 h-4 mr-2" />
+                      Buat Booking Baru
+                    </Button>
+                    <p className="text-xs text-muted-foreground">
+                      Kategori dan catatan akan terisi otomatis dari order sebelumnya
+                    </p>
+                  </div>
+                ) : (
+                  // Product order - show back to products button
+                  <Button
+                    onClick={() => navigate("/products")}
+                    variant="outline"
+                    className="w-full"
+                  >
+                    <Package className="w-4 h-4 mr-2" />
+                    Kembali ke Produk
+                  </Button>
+                )}
+              </div>
+            )}
+
             {/* Fallback button for pending payments without QR */}
             {order.payment_status === "pending" && !order.qr_string && order.payment_url && (
               <div className="pt-4">
@@ -572,6 +623,13 @@ export default function OrderDetail() {
                       </div>
                     )}
 
+                    {consultingSlots[0]?.notes && (
+                      <div>
+                        <p className="text-muted-foreground">Catatan</p>
+                        <p className="font-medium">{consultingSlots[0].notes}</p>
+                      </div>
+                    )}
+
                     {consultingSlots[0]?.meet_link && (
                       <div className="space-y-2">
                         <div>
@@ -613,6 +671,13 @@ export default function OrderDetail() {
                       Pembayaran berhasil! Silakan bergabung sesuai jadwal.
                     </AlertDescription>
                   </Alert>
+                ) : order.status === "cancelled" ? (
+                  <Alert className="bg-red-50 border-red-200">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertDescription>
+                      Order telah dibatalkan. Silakan buat booking baru jika masih tertarik.
+                    </AlertDescription>
+                  </Alert>
                 ) : (
                   <Alert className="bg-yellow-50 border-yellow-200">
                     <Clock className="h-4 w-4" />