From 79e1bd82fc195e3dcee83f7c0f13ed2068e3f34c Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 27 Dec 2025 23:47:53 +0700
Subject: [PATCH] fix: consulting slots display and auth reload redirect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Group consulting slots by date in admin order detail modal
- Show time range from first slot start to last slot end
- Display session count badge for multi-slot orders
- Fix page reload redirecting to main page by ensuring loading state
  is properly synchronized with Supabase session initialization
- Add mounted flag to prevent state updates after unmount

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/hooks/useAuth.tsx           |  45 +++++---
 src/pages/admin/AdminOrders.tsx | 179 ++++++++++++++++++--------------
 2 files changed, 131 insertions(+), 93 deletions(-)

diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
index 69d1371..da3bc3c 100644
--- a/src/hooks/useAuth.tsx
+++ b/src/hooks/useAuth.tsx
@@ -21,31 +21,46 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [isAdmin, setIsAdmin] = useState(false);
 
   useEffect(() => {
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        setSession(session);
-        setUser(session?.user ?? null);
-        
-        if (session?.user) {
-          setTimeout(() => {
-            checkAdminRole(session.user.id);
-          }, 0);
-        } else {
-          setIsAdmin(false);
-        }
-      }
-    );
+    let mounted = true;
 
+    // First, get the initial session
     supabase.auth.getSession().then(({ data: { session } }) => {
+      if (!mounted) return;
+
       setSession(session);
       setUser(session?.user ?? null);
+
       if (session?.user) {
         checkAdminRole(session.user.id);
       }
+
+      // Only set loading to false after initial session is loaded
       setLoading(false);
     });
 
-    return () => subscription.unsubscribe();
+    // Then listen for auth state changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        if (!mounted) return;
+
+        setSession(session);
+        setUser(session?.user ?? null);
+
+        if (session?.user) {
+          checkAdminRole(session.user.id);
+        } else {
+          setIsAdmin(false);
+        }
+
+        // Ensure loading is false after auth state changes
+        setLoading(false);
+      }
+    );
+
+    return () => {
+      mounted = false;
+      subscription.unsubscribe();
+    };
   }, []);
 
   const checkAdminRole = async (userId: string) => {
diff --git a/src/pages/admin/AdminOrders.tsx b/src/pages/admin/AdminOrders.tsx
index cd5210b..b09a9d2 100644
--- a/src/pages/admin/AdminOrders.tsx
+++ b/src/pages/admin/AdminOrders.tsx
@@ -508,87 +508,110 @@ export default function AdminOrders() {
                   </div>
                 )}
 
-                {/* Consulting Slots */}
-                {consultingSlots.length > 0 && (
-                  <div className="border-t border-border pt-4">
-                    <p className="font-medium mb-3 flex items-center gap-2">
-                      <Video className="w-4 h-4" />
-                      Jadwal Konsultasi
-                    </p>
-                    <div className="space-y-2">
-                      {consultingSlots.map((slot) => (
-                        <div key={slot.id} className="border-2 border-border rounded-lg p-3 bg-background">
-                          <div className="flex items-start justify-between gap-3 mb-2">
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2 mb-1 flex-wrap">
-                                <Badge variant={slot.status === "confirmed" ? "default" : "secondary"} className="text-xs">
-                                  {slot.status === "confirmed" ? "Terkonfirmasi" : slot.status}
-                                </Badge>
-                                {slot.topic_category && (
-                                  <Badge variant="outline" className="text-xs">
-                                    {slot.topic_category}
-                                  </Badge>
-                                )}
-                                {/* Meet Link Status */}
-                                {slot.meet_link ? (
-                                  <Badge variant="outline" className="text-xs gap-1 border-green-500 text-green-700">
-                                    <CheckCircle className="w-3 h-3" />
-                                    Meet Link Ready
-                                  </Badge>
-                                ) : (
-                                  <Badge variant="outline" className="text-xs gap-1 border-amber-500 text-amber-700">
-                                    <AlertTriangle className="w-3 h-3" />
-                                    Belum ada Meet Link
-                                  </Badge>
-                                )}
-                              </div>
-                              <p className="text-sm font-medium">
-                                {new Date(slot.date).toLocaleDateString("id-ID", {
-                                  weekday: "short",
-                                  day: "numeric",
-                                  month: "short",
-                                  year: "numeric"
-                                })}
-                              </p>
-                              <p className="text-xs text-muted-foreground">
-                                {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)} WIB
-                              </p>
-                              {slot.notes && (
-                                <p className="text-xs text-muted-foreground mt-1 italic">
-                                  Catatan: {slot.notes}
-                                </p>
-                              )}
-                            </div>
-                            <div className="flex gap-2">
-                              {slot.meet_link && (
-                                <Button asChild variant="outline" size="sm" className="gap-1">
-                                  <a
-                                    href={slot.meet_link}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
+                {/* Consulting Slots - Grouped by Date */}
+                {consultingSlots.length > 0 && (() => {
+                  // Group slots by date
+                  const slotsByDate = consultingSlots.reduce((acc, slot) => {
+                    if (!acc[slot.date]) {
+                      acc[slot.date] = [];
+                    }
+                    acc[slot.date].push(slot);
+                    return acc;
+                  }, {} as Record<string, typeof consultingSlots>);
+
+                  return (
+                    <div className="border-t border-border pt-4">
+                      <p className="font-medium mb-3 flex items-center gap-2">
+                        <Video className="w-4 h-4" />
+                        Jadwal Konsultasi
+                      </p>
+                      <div className="space-y-3">
+                        {Object.entries(slotsByDate).map(([date, slots]) => {
+                          const firstSlot = slots[0];
+                          const lastSlot = slots[slots.length - 1];
+                          const allSlotsHaveMeetLink = slots.every(s => s.meet_link);
+                          const meetLink = firstSlot.meet_link;
+
+                          return (
+                            <div key={date} className="border-2 border-border rounded-lg p-3 bg-background">
+                              <div className="flex items-start justify-between gap-3">
+                                <div className="flex-1">
+                                  <div className="flex items-center gap-2 mb-1 flex-wrap">
+                                    <Badge variant={firstSlot.status === "confirmed" ? "default" : "secondary"} className="text-xs">
+                                      {firstSlot.status === "confirmed" ? "Terkonfirmasi" : firstSlot.status}
+                                    </Badge>
+                                    {firstSlot.topic_category && (
+                                      <Badge variant="outline" className="text-xs">
+                                        {firstSlot.topic_category}
+                                      </Badge>
+                                    )}
+                                    {slots.length > 1 && (
+                                      <Badge variant="outline" className="text-xs">
+                                        {slots.length} sesi
+                                      </Badge>
+                                    )}
+                                    {/* Meet Link Status */}
+                                    {allSlotsHaveMeetLink ? (
+                                      <Badge variant="outline" className="text-xs gap-1 border-green-500 text-green-700">
+                                        <CheckCircle className="w-3 h-3" />
+                                        Meet Link Ready
+                                      </Badge>
+                                    ) : (
+                                      <Badge variant="outline" className="text-xs gap-1 border-amber-500 text-amber-700">
+                                        <AlertTriangle className="w-3 h-3" />
+                                        Belum ada Meet Link
+                                      </Badge>
+                                    )}
+                                  </div>
+                                  <p className="text-sm font-medium">
+                                    {new Date(date).toLocaleDateString("id-ID", {
+                                      weekday: "short",
+                                      day: "numeric",
+                                      month: "short",
+                                      year: "numeric"
+                                    })}
+                                  </p>
+                                  <p className="text-xs text-muted-foreground">
+                                    {firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)} WIB
+                                  </p>
+                                  {firstSlot.notes && (
+                                    <p className="text-xs text-muted-foreground mt-1 italic">
+                                      Catatan: {firstSlot.notes}
+                                    </p>
+                                  )}
+                                </div>
+                                <div className="flex gap-2">
+                                  {meetLink && (
+                                    <Button asChild variant="outline" size="sm" className="gap-1">
+                                      <a
+                                        href={meetLink}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                      >
+                                        <Video className="w-3 h-3" />
+                                        Meet
+                                        <ExternalLink className="w-3 h-3" />
+                                      </a>
+                                    </Button>
+                                  )}
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => openMeetLinkDialog(firstSlot.id, meetLink)}
+                                    className="gap-1"
                                   >
-                                    <Video className="w-3 h-3" />
-                                    Meet
-                                    <ExternalLink className="w-3 h-3" />
-                                  </a>
-                                </Button>
-                              )}
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                onClick={() => openMeetLinkDialog(slot.id, slot.meet_link)}
-                                className="gap-1"
-                              >
-                                <LinkIcon className="w-3 h-3" />
-                                {slot.meet_link ? "Update" : "Buat"} Link
-                              </Button>
+                                    <LinkIcon className="w-3 h-3" />
+                                    {meetLink ? "Update" : "Buat"} Link
+                                  </Button>
+                                </div>
+                              </div>
                             </div>
-                          </div>
-                        </div>
-                      ))}
+                          );
+                        })}
+                      </div>
                     </div>
-                  </div>
-                )}
+                  );
+                })()}
 
                 <div className="flex flex-col sm:flex-row gap-2 pt-4">
                   {canRefundOrder(selectedOrder.payment_status, selectedOrder.refunded_at) && (