Refactor ride credit sorting UI

src/components/profile/RideCreditsManager.tsx

@@ -158,6 +158,23 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
     }
   };
 
+  const handleReorder = async (creditId: string, newPosition: number) => {
+    try {
+      const { error } = await supabase.rpc('reorder_ride_credit', {
+        p_credit_id: creditId,
+        p_new_position: newPosition
+      });
+      
+      if (error) throw error;
+      
+      // Refetch to get accurate sort_order values
+      await fetchCredits();
+    } catch (error) {
+      console.error('Error reordering credit:', error);
+      throw error;
+    }
+  };
+
   const handleDragEnd = async (event: DragEndEvent) => {
     const { active, over } = event;
     
@@ -173,19 +190,9 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
     setCredits(newCredits);
     
     try {
-      // Call RPC to persist the change
-      const { error } = await supabase.rpc('reorder_ride_credit', {
-        p_credit_id: String(active.id),
-        p_new_position: newIndex + 1
-      });
-      
-      if (error) throw error;
-      
-      // Refetch to get accurate sort_order values
-      fetchCredits();
+      await handleReorder(String(active.id), newIndex + 1);
       toast.success('Order updated');
     } catch (error) {
-      console.error('Error reordering credit:', error);
       toast.error(getErrorMessage(error));
       // Revert on error
       fetchCredits();
@@ -340,9 +347,11 @@ export function RideCreditsManager({ userId }: RideCreditsManagerProps) {
                   key={credit.id}
                   credit={credit}
                   position={index + 1}
+                  maxPosition={credits.length}
                   viewMode={viewMode}
                   onUpdate={handleCreditUpdated}
                   onDelete={() => handleCreditDeleted(credit.id)}
+                  onReorder={handleReorder}
                 />
               ))}
             </div>