Updaed API

src/components/pages/packages.tsx

@@ -141,18 +141,18 @@ const Packages: React.FC = () => {
     </TableCell>
   </TableRow>
 ) : (
-  Object.entries(packages).map(([pkgName, pkgInfo]) => {
+  packages.map((pkg, i) => {
-    const firstPackage = Object.values(pkgInfo.Packages)[0];
+    const firstPackage = pkg.Packages[0];
     return (
       <TableRow
-        key={pkgName}
+        key={pkg.Name}
         className="md:table-row border-b last:border-b-0"
       >
         <TableCell className="w-full md:w-1/2 py-2 md:py-4">
           <div className="flex flex-col h-full md:h-auto">
             <div className="flex justify-between items-start mb-2 md:mb-0">
               <span className="font-medium truncate mr-2">
-                {pkgName}
+                {pkg.Name}
               </span>
               <span className="text-sm md:hidden truncate">
                 {firstPackage.Status}

src/components/pages/queue.tsx

@@ -144,32 +144,32 @@ const Queue: React.FC = () => {
                       Loading...
                     </TableCell>
                   </TableRow>
-                ) : Object.keys(packages).length === 0 ? (
+                ) : packages.length === 0 ? (
                   <TableRow>
                     <TableCell colSpan={3} className="text-center">
                       No packages found.
                     </TableCell>
                   </TableRow>
                 ) : (
-                  Object.entries(packages).map(([pkgName, pkgInfo]) => {
+                  packages.map((pkg) => {
                     return (
                       <TableRow
-                        key={pkgName}
+                        key={pkg.Source.Name}
                         className="md:table-row border-b last:border-b-0"
                       >
                         <TableCell className="w-full md:w-1/2 py-2 md:py-4">
                           <div className="flex flex-col h-full md:h-auto">
                             <div className="flex justify-between items-start mb-2 md:mb-0">
                               <span className="font-medium truncate mr-2">
-                                {pkgName} - {pkgInfo.Type}
+                                {pkg.Source.Name} - {pkg.Type}
                               </span>
                               <span className="text-sm md:hidden truncate">
-                                {pkgInfo.Status}
+                                {pkg.Status}
                               </span>
                             </div>
                             <div className="md:hidden text-sm text-muted-foreground text-center">
                               <span className="truncate">
-                                {pkgInfo.BuildVersion}
+                                {pkg.BuildVersion}
                               </span>
                             </div>
                           </div>
@@ -177,12 +177,12 @@ const Queue: React.FC = () => {
                         <TableCell className="hidden md:table-cell md:w-1/4 py-4 text-left">
                           <div className="flex flex-col">
                             <span className="truncate">
-                              {pkgInfo.BuildVersion}
+                              {pkg.BuildVersion}
                             </span>
                           </div>
                         </TableCell>
                         <TableCell className="hidden md:table-cell md:w-1/4 py-2 md:py-4 text-left">
-                          <span className="truncate">{pkgInfo.Status}</span>
+                          <span className="truncate">{pkg.Status}</span>
                         </TableCell>
                       </TableRow>
                     );

src/hooks/useQueueData.ts

@@ -34,13 +34,13 @@ interface PackageData {
 
 interface PackagesResponse {
   total: number;
-  packages: Record<string, QueueData>;
+  packages: QueueData[];
 }
 
 const usePackageData = () => {
     const [stats, setStats] = useState<PackageStats | null>(null);
     const [lastUpdated, setLastUpdated] = useState<string>('');
-    const [packages, setQueuePackages] = useState<Record<string, QueueData>>({});
+    const [packages, setQueuePackages] = useState<QueueData[]>([]);
     const [totalCount, setTotalCount] = useState(0);
     const [loading, setLoading] = useState(false);
     const fetchStatsAttempted = useRef(false);
@@ -74,7 +74,7 @@ const usePackageData = () => {
         setQueuePackages(data.packages);
       } catch (error) {
         console.error("Error fetching packages:", error);
-        setQueuePackages({});
+        setQueuePackages([]);
         setTotalCount(0);
       } finally {
         setLoading(false);