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" />

supabase/functions/cancel-expired-consulting-orders/index.ts

@@ -16,115 +16,65 @@ serve(async (req: Request): Promise<Response> => {
     const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
     const supabase = createClient(supabaseUrl, supabaseServiceKey);
 
-    console.log("[CANCEL-EXPIRED] Starting check for expired consulting orders");
+    console.log("[CLEANUP-CALENDAR] Starting calendar cleanup for cancelled sessions");
 
-    // Find expired pending consulting orders
+    // Find cancelled consulting sessions with calendar events that haven't been cleaned up
-    const now = new Date().toISOString();
+    const { data: cancelledSessions, error: queryError } = await supabase
-
+      .from("consulting_sessions")
-    // Get orders with consulting_sessions that are pending payment and QR is expired
+      .select("id, calendar_event_id")
-    const { data: expiredOrders, error: queryError } = await supabase
+      .eq("status", "cancelled")
-      .from("orders")
+      .not("calendar_event_id", "is", null);
-      .select(`
-        id,
-        payment_status,
-        qr_expires_at,
-        consulting_sessions (
-          id,
-          topic_category,
-          notes,
-          session_date,
-          start_time,
-          end_time
-        )
-      `)
-      .eq("payment_status", "pending")
-      .lt("qr_expires_at", now)
-      .not("consulting_sessions", "is", null);
 
     if (queryError) {
-      console.error("[CANCEL-EXPIRED] Query error:", queryError);
+      console.error("[CLEANUP-CALENDAR] Query error:", queryError);
       throw queryError;
     }
 
-    if (!expiredOrders || expiredOrders.length === 0) {
+    if (!cancelledSessions || cancelledSessions.length === 0) {
-      console.log("[CANCEL-EXPIRED] No expired orders found");
+      console.log("[CLEANUP-CALENDAR] No cancelled sessions with calendar events found");
       return new Response(
         JSON.stringify({
           success: true,
-          message: "No expired orders to process",
+          message: "No calendar events to clean up",
           processed: 0
         }),
         { headers: { ...corsHeaders, "Content-Type": "application/json" } }
       );
     }
 
-    console.log(`[CANCEL-EXPIRED] Found ${expiredOrders.length} expired orders`);
+    console.log(`[CLEANUP-CALENDAR] Found ${cancelledSessions.length} cancelled sessions with calendar events`);
 
     let processedCount = 0;
 
-    // Process each expired order
+    // Delete calendar events for cancelled sessions
-    for (const order of expiredOrders) {
+    for (const session of cancelledSessions) {
-      console.log(`[CANCEL-EXPIRED] Processing order: ${order.id}`);
-
-      // Update order status to cancelled
-      const { error: updateError } = await supabase
-        .from("orders")
-        .update({ status: "cancelled" })
-        .eq("id", order.id);
-
-      if (updateError) {
-        console.error(`[CANCEL-EXPIRED] Failed to update order ${order.id}:`, updateError);
-        continue;
-      }
-
-      // Cancel all consulting sessions for this order
-      if (order.consulting_sessions && order.consulting_sessions.length > 0) {
-        for (const session of order.consulting_sessions) {
-          // Delete calendar event if exists
       if (session.calendar_event_id) {
         try {
           await supabase.functions.invoke('delete-calendar-event', {
             body: { session_id: session.id }
           });
-              console.log(`[CANCEL-EXPIRED] Deleted calendar event for session: ${session.id}`);
+          console.log(`[CLEANUP-CALENDAR] Deleted calendar event for session: ${session.id}`);
-            } catch (err) {
-              console.log(`[CANCEL-EXPIRED] Failed to delete calendar event: ${err}`);
-              // Continue anyway
-            }
-          }
-
-          // Update session status to cancelled
-          await supabase
-            .from("consulting_sessions")
-            .update({ status: "cancelled" })
-            .eq("id", session.id);
-
-          // Delete or release time slots
-          await supabase
-            .from("consulting_time_slots")
-            .delete()
-            .eq("session_id", session.id);
-
-          console.log(`[CANCEL-EXPIRED] Cancelled session: ${session.id}`);
-        }
-      }
-
           processedCount++;
+        } catch (err) {
+          console.log(`[CLEANUP-CALENDAR] Failed to delete calendar event: ${err}`);
+          // Continue with other events even if one fails
+        }
+      }
     }
 
-    console.log(`[CANCEL-EXPIRED] Successfully processed ${processedCount} orders`);
+    console.log(`[CLEANUP-CALENDAR] Successfully cleaned up ${processedCount} calendar events`);
 
     return new Response(
       JSON.stringify({
         success: true,
-        message: `Successfully cancelled ${processedCount} expired consulting orders`,
+        message: `Successfully cleaned up ${processedCount} calendar events`,
         processed: processedCount
       }),
       { headers: { ...corsHeaders, "Content-Type": "application/json" } }
     );
 
   } catch (error: any) {
-    console.error("[CANCEL-EXPIRED] Error:", error);
+    console.error("[CLEANUP-CALENDAR] Error:", error);
     return new Response(
       JSON.stringify({
         success: false,

supabase/migrations/20241228_remove_pg_cron_job.sql

@@ -0,0 +1,13 @@
+-- ============================================
+-- Remove pg_cron job (migrating to Coolify-only approach)
+-- ============================================
+-- We're moving all cron jobs to Coolify for single source of truth
+
+-- Remove the pg_cron job
+SELECT cron.unschedule('cancel-expired-consulting-orders');
+
+-- Verify it's removed
+SELECT jobname, schedule, command
+FROM cron.job
+WHERE jobname LIKE 'cancel-expired%';
+-- Should return 0 rows

supabase/migrations/20241228_schedule_cancel_expired_orders.sql

@@ -0,0 +1,101 @@
+-- ============================================
+-- SQL Function for Expired Consulting Orders Cleanup
+-- ============================================
+-- This creates a reusable SQL function that can be called from
+-- Coolify Scheduled Tasks to cancel expired consulting orders
+--
+-- NOTE: We use Coolify for ALL cron jobs (single source of truth)
+-- instead of mixing pg_cron and Coolify scheduled tasks
+
+-- Drop existing function if exists (to handle return type change)
+DROP FUNCTION IF EXISTS cancel_expired_consulting_orders_sql();
+
+-- Create SQL function to cancel expired orders
+CREATE OR REPLACE FUNCTION cancel_expired_consulting_orders_sql()
+RETURNS jsonb
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+DECLARE
+  expired_order RECORD;
+  expired_session RECORD;
+  processed_count INTEGER := 0;
+BEGIN
+  -- Log start
+  RAISE NOTICE '[CANCEL-EXPIRED] Starting check for expired consulting orders';
+
+  -- Loop through expired consulting orders
+  FOR expired_order IN
+    SELECT o.id, o.payment_status, o.qr_expires_at
+    FROM orders o
+    INNER JOIN consulting_sessions cs ON cs.order_id = o.id
+    WHERE o.payment_status = 'pending'
+      AND o.qr_expires_at < NOW()
+      AND o.status != 'cancelled'
+  LOOP
+    RAISE NOTICE '[CANCEL-EXPIRED] Processing order: %', expired_order.id;
+
+    -- Update order status to cancelled AND payment status to failed
+    UPDATE orders
+    SET status = 'cancelled',
+        payment_status = 'failed'
+    WHERE id = expired_order.id;
+
+    -- Cancel all consulting sessions for this order
+    FOR expired_session IN
+      SELECT id, calendar_event_id
+      FROM consulting_sessions
+      WHERE order_id = expired_order.id
+        AND status != 'cancelled'
+    LOOP
+      -- Update session status to cancelled
+      UPDATE consulting_sessions
+      SET status = 'cancelled'
+      WHERE id = expired_session.id;
+
+      -- Delete time slots to release them for re-booking
+      DELETE FROM consulting_time_slots
+      WHERE session_id = expired_session.id;
+
+      RAISE NOTICE '[CANCEL-EXPIRED] Cancelled session: %', expired_session.id;
+    END LOOP;
+
+    processed_count := processed_count + 1;
+  END LOOP;
+
+  RAISE NOTICE '[CANCEL-EXPIRED] Successfully processed % expired orders', processed_count;
+
+  RETURN jsonb_build_object(
+    'success', true,
+    'processed', processed_count,
+    'message', format('Successfully cancelled %s expired consulting orders', processed_count)
+  );
+END;
+$$;
+
+-- ============================================
+-- Coolify Scheduled Tasks Configuration
+-- ============================================
+-- Instead of using pg_cron, configure these in Coolify:
+--
+-- Task 1: Database Cleanup (every 10 minutes)
+-- -------------------------------------------
+-- Name: cancel-expired-consulting-orders-db
+-- Command: psql -h supabase-db -U postgres -d postgres -c "SELECT cancel_expired_consulting_orders_sql();"
+-- Frequency: */10 * * * *
+-- Timeout: 30 seconds
+-- Container: supabase-db (or supabase-rest if it has psql client)
+--
+-- Task 2: Calendar Cleanup (every 15 minutes)
+-- -------------------------------------------
+-- Name: cancel-expired-consulting-orders-calendar
+-- Command: curl -X POST http://supabase-edge-functions:8000/functions/v1/cancel-expired-consulting-orders
+-- Frequency: */15 * * * *
+-- Timeout: 30 seconds
+-- Container: supabase-edge-functions
+
+-- ============================================
+-- Manual Testing
+-- ============================================
+-- Test the function directly:
+-- SELECT cancel_expired_consulting_orders_sql();