add sorting for comission levels

src/app/ui/referral-page/commission-levels.tsx

@@ -2,24 +2,69 @@
 
 import { useQuery } from '@tanstack/react-query';
 import { fetchReferralsLevels, fetchReferralUserStats } from '@/app/actions/referralsActions';
-import { useEffect } from 'react';
+
+interface ReferralLevel {
+	name: string;
+	id: string;
+	next: string | null;
+	share: number;
+	maxInvitee: number;
+	minInvitee: number;
+}
+
+interface ReferralsData {
+	referrals: ReferralLevel[];
+}
 
 export default function CommissionLevels() {
+
 	const {
 		data: referralsLevels,
 		isLoading,
 		isError,
 		error
-	} = useQuery({
+	} = useQuery<ReferralsData, Error, ReferralLevel[]>({
 		queryKey: ['referralsLevels'],
-		queryFn: () => {
+		queryFn: () => fetchReferralsLevels(),
-			return fetchReferralsLevels();
-		},
 		select: (data) => {
 			if (data?.referrals) {
-				return data?.referrals
+				const itemsMap = new Map<string, ReferralLevel>();
+				data.referrals.forEach(item => {
+					itemsMap.set(item.id, item);
+				});
+
+				const referencedIds = new Set(
+					data.referrals
+						.map(item => item.next)
+						.filter((next): next is string => next !== null)
+				);
+
+				const firstItem = data.referrals.find(item => !referencedIds.has(item.id));
+
+				if (!firstItem) {
+					return [];
+				}
+
+				const sortedReferrals: ReferralLevel[] = [];
+				let currentItem = firstItem;
+
+				while (currentItem) {
+					sortedReferrals.push(currentItem);
+
+					if (currentItem.next === null) {
+						break;
+					}
+
+					currentItem = itemsMap.get(currentItem.next)!;
+
+					if (sortedReferrals.includes(currentItem)) {
+						break;
+					}
+				}
+
+				return sortedReferrals;
 			} else {
-				return []
+				return [];
 			}
 		}
 	});
@@ -76,13 +121,7 @@ export default function CommissionLevels() {
 			</h3>
 			<div className="commission-levels">
 				{
-					referralsLevels.map((item: {
+					referralsLevels.map((item: ReferralLevel) => {
-						id: string,
-						share: string,
-						name: string,
-						minInvitee: number,
-						maxInvitee: number
-					}) => {
 						return (
 							<div
 								className={