fix: consulting slots display and auth reload redirect

- 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

@@ -21,31 +21,46 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [isAdmin, setIsAdmin] = useState(false);
 
   useEffect(() => {
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+    let mounted = true;
-      (event, session) => {
-        setSession(session);
-        setUser(session?.user ?? null);
-        
-        if (session?.user) {
-          setTimeout(() => {
-            checkAdminRole(session.user.id);
-          }, 0);
-        } else {
-          setIsAdmin(false);
-        }
-      }
-    );
 
+    // 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) => {

src/pages/admin/AdminOrders.tsx

@@ -508,29 +508,50 @@ export default function AdminOrders() {
                   </div>
                 )}
 
-                {/* Consulting Slots */}
+                {/* Consulting Slots - Grouped by Date */}
-                {consultingSlots.length > 0 && (
+                {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-2">
+                      <div className="space-y-3">
-                      {consultingSlots.map((slot) => (
+                        {Object.entries(slotsByDate).map(([date, slots]) => {
-                        <div key={slot.id} className="border-2 border-border rounded-lg p-3 bg-background">
+                          const firstSlot = slots[0];
-                          <div className="flex items-start justify-between gap-3 mb-2">
+                          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={slot.status === "confirmed" ? "default" : "secondary"} className="text-xs">
+                                    <Badge variant={firstSlot.status === "confirmed" ? "default" : "secondary"} className="text-xs">
-                                  {slot.status === "confirmed" ? "Terkonfirmasi" : slot.status}
+                                      {firstSlot.status === "confirmed" ? "Terkonfirmasi" : firstSlot.status}
                                     </Badge>
-                                {slot.topic_category && (
+                                    {firstSlot.topic_category && (
                                       <Badge variant="outline" className="text-xs">
-                                    {slot.topic_category}
+                                        {firstSlot.topic_category}
+                                      </Badge>
+                                    )}
+                                    {slots.length > 1 && (
+                                      <Badge variant="outline" className="text-xs">
+                                        {slots.length} sesi
                                       </Badge>
                                     )}
                                     {/* Meet Link Status */}
-                                {slot.meet_link ? (
+                                    {allSlotsHaveMeetLink ? (
                                       <Badge variant="outline" className="text-xs gap-1 border-green-500 text-green-700">
                                         <CheckCircle className="w-3 h-3" />
                                         Meet Link Ready
@@ -543,7 +564,7 @@ export default function AdminOrders() {
                                     )}
                                   </div>
                                   <p className="text-sm font-medium">
-                                {new Date(slot.date).toLocaleDateString("id-ID", {
+                                    {new Date(date).toLocaleDateString("id-ID", {
                                       weekday: "short",
                                       day: "numeric",
                                       month: "short",
@@ -551,19 +572,19 @@ export default function AdminOrders() {
                                     })}
                                   </p>
                                   <p className="text-xs text-muted-foreground">
-                                {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)} WIB
+                                    {firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)} WIB
                                   </p>
-                              {slot.notes && (
+                                  {firstSlot.notes && (
                                     <p className="text-xs text-muted-foreground mt-1 italic">
-                                  Catatan: {slot.notes}
+                                      Catatan: {firstSlot.notes}
                                     </p>
                                   )}
                                 </div>
                                 <div className="flex gap-2">
-                              {slot.meet_link && (
+                                  {meetLink && (
                                     <Button asChild variant="outline" size="sm" className="gap-1">
                                       <a
-                                    href={slot.meet_link}
+                                        href={meetLink}
                                         target="_blank"
                                         rel="noopener noreferrer"
                                       >
@@ -576,19 +597,21 @@ export default function AdminOrders() {
                                   <Button
                                     variant="outline"
                                     size="sm"
-                                onClick={() => openMeetLinkDialog(slot.id, slot.meet_link)}
+                                    onClick={() => openMeetLinkDialog(firstSlot.id, meetLink)}
                                     className="gap-1"
                                   >
                                     <LinkIcon className="w-3 h-3" />
-                                {slot.meet_link ? "Update" : "Buat"} Link
+                                    {meetLink ? "Update" : "Buat"} Link
                                   </Button>
                                 </div>
                               </div>
                             </div>
-                      ))}
+                          );
+                        })}
                       </div>
                     </div>
-                )}
+                  );
+                })()}
 
                 <div className="flex flex-col sm:flex-row gap-2 pt-4">
                   {canRefundOrder(selectedOrder.payment_status, selectedOrder.refunded_at) && (