Styling Fixes

src/components/pages/home.tsx

@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
 
+interface CountResponse {
+  lastUpdateTime: string;
+  counts: PackageStats;
+}
+
 interface PackageStats {
   stale: number;
   missing: number;
@@ -18,16 +23,21 @@ const Home: React.FC = () => {
     const fetchStats = async () => {
       try {
         const response = await fetch('/api/counts');
-        const data: PackageStats = await response.json();
+        const data: CountResponse = await response.json();
-        setStats(data);
+        const counts = data.counts;
-        setLastUpdated(new Date().toLocaleString('en-GB', {
+        setStats(counts);
+        const dt = new Date(data.lastUpdateTime);
+        const dateLocale = dt.toLocaleDateString(navigator.language, {
           day: '2-digit',
           month: '2-digit',
           year: 'numeric',
+        });
+        const timeLocale = dt.toLocaleTimeString(navigator.language, {
           hour: '2-digit',
-          minute: '2-digit',
+          minute: '2-digit'
-          second: '2-digit'
+        });
-        }));
+
+        setLastUpdated(`${timeLocale} on ${dateLocale}`);
       } catch (error) {
         console.error('Failed to fetch stats:', error);
       }

src/components/pages/packages.tsx

@@ -38,17 +38,8 @@ interface Package {
   };
 }
 
-interface CountsData {
-  stale: number;
-  missing: number;
-  built: number;
-  error: number;
-  queued: number;
-  building: number;
-}
-
 const Packages: React.FC = () => {
-  const { getParam } = useSearchParams();
+  const { getParam, setParam } = useSearchParams();
   const [packages, setPackages] = useState<Package[]>([]);
   const [totalCount, setTotalCount] = useState(0);
   const [currentPage, setCurrentPage] = useState(
@@ -65,21 +56,12 @@ const Packages: React.FC = () => {
   }, [isMobile]);
 
   useEffect(() => {
-    fetchTotalCount();
     fetchPackages();
+    setParam("page", currentPage.toString());
+    setParam("search", search);
+    setParam("filter", filter);
   }, [currentPage, search, filter, pageSize]);
 
-  const fetchTotalCount = async () => {
-    try {
-      const response = await fetch("/api/counts");
-      const data: CountsData = await response.json();
-      const total = Object.values(data).reduce((acc, curr) => acc + curr, 0);
-      setTotalCount(total);
-    } catch (error) {
-      console.error("Error fetching total count:", error);
-      setTotalCount(0); // Set to 0 if there's an error
-    }
-  };
 
   const fetchPackages = async () => {
     setLoading(true);
@@ -89,8 +71,10 @@ const Packages: React.FC = () => {
         `/api/packages?page=${currentPage}&pageSize=${pageSize}&search=${search}&filter=${filterParam}`
       );
       const data = await response.json();
-      setPackages(Object.values(data));
+      setTotalCount(data.total);
+      setPackages(Object.values(data.packages));
     } catch (error) {
+      setTotalCount(0);
       console.error("Error fetching packages:", error);
     } finally {
       setLoading(false);
@@ -98,13 +82,24 @@ const Packages: React.FC = () => {
   };
 
   const handleFilterChange = (value: string) => {
-    setFilter(value === "All" ? "" : value);
+    const newFilter = value === "All" ? "" : value;
+    setFilter(newFilter);
     setCurrentPage(1);
+    setParam("filter", newFilter);
+    setParam("page", "1");
   };
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value);
+    const newSearch = e.target.value;
+    setSearch(newSearch);
     setCurrentPage(1);
+    setParam("search", newSearch);
+    setParam("page", "1");
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    setParam("page", page.toString());
   };
 
   const totalPages = Math.ceil(totalCount / pageSize);
@@ -145,11 +140,11 @@ const Packages: React.FC = () => {
         </div>
       </div>
 
-      {/* Table */}
+{/* Table */}
-      <div className="flex-grow overflow-hidden">
+<div className="flex-grow overflow-hidden">
   <div className="container mx-0 px-0 h-full">
     <div className="h-full">
-            <Table className="">
+      <Table className="w-full">
         <TableHeader className="top-0 bg-background z-10 hidden md:table-header-group">
           <TableRow>
             <TableHead className="w-1/2 text-left">Name</TableHead>
@@ -170,29 +165,25 @@ const Packages: React.FC = () => {
               return (
                 <TableRow
                   key={pkg.Name}
-                        className="flex justify-between flex-row md:table-row"
+                  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 justify-center">
+                    <div className="flex flex-col h-full md:h-auto">
-                            <div className="font-medium truncate md:text-left flex flex-row justify-between">
+                      <div className="flex justify-between items-start mb-2 md:mb-0">
-                              <div className="flex w-1/2">{pkg.Name}</div>
+                        <span className="font-medium truncate mr-2">{pkg.Name}</span>
-                              <div className="md:hidden flex w/2">
+                        <span className="text-sm md:hidden truncate">{firstPackage.Status}</span>
-                                {firstPackage.Status}
                       </div>
-                            </div>
+                      <div className="md:hidden text-sm text-muted-foreground text-center">
-                            <div className="md:hidden text-sm text-muted-foreground truncate">
+                        <span className="truncate">{firstPackage.Version}</span>
-                              {firstPackage.Version}
                         {firstPackage.NewVersion && (
-                                <> → {firstPackage.NewVersion}</>
+                          <span className="truncate block">→ {firstPackage.NewVersion}</span>
                         )}
                       </div>
                     </div>
                   </TableCell>
-                        <TableCell className="hidden md:table-cell md:w-1/4 py-4 md:text-left">
+                  <TableCell className="hidden md:table-cell md:w-1/4 py-4 text-left">
                     <div className="flex flex-col">
-                            <div className="text-foreground truncate">
+                      <span className="truncate">{firstPackage.Version}</span>
-                              {firstPackage.Version}
-                            </div>
                       {firstPackage.NewVersion && (
                         <span className="text-sm text-muted-foreground truncate">
                           → {firstPackage.NewVersion}
@@ -200,8 +191,8 @@ const Packages: React.FC = () => {
                       )}
                     </div>
                   </TableCell>
-                        <TableCell className="hidden md:block md:w-1/4 py-2 md:py-4 text-right md:text-left">
+                  <TableCell className="hidden md:table-cell md:w-1/4 py-2 md:py-4 text-left">
-                          {firstPackage.Status}
+                    <span className="truncate">{firstPackage.Status}</span>
                   </TableCell>
                 </TableRow>
               );
@@ -211,40 +202,39 @@ const Packages: React.FC = () => {
       </Table>
     </div>
   </div>
-      </div>
+</div>
 
-      {/* Sticky Footer with Pagination */}
+{/* Sticky Footer with Pagination */}
-      <div className="sticky bottom-0 w-full bg-background border-t border-border py-4">
+<div className="sticky bottom-0 w-full bg-background border-t border-border py-4">
-        <div className="container mx-auto">
+  <div className="container mx-auto px-2">
     <Pagination>
-            <PaginationContent>
+      <PaginationContent className="flex flex-wrap justify-center items-center gap-1">
         <PaginationItem>
           <PaginationPrevious
             size="default"
-                  onClick={() =>
+            onClick={() => handlePageChange(Math.max(currentPage - 1, 1))}
-                    setCurrentPage((prev) => Math.max(prev - 1, 1))
-                  }
           />
         </PaginationItem>
 
-              {currentPage > 1 && (
+        {currentPage > 2 && (
-                <PaginationItem>
+          <PaginationItem className="hidden sm:inline-block">
-                  <PaginationLink
+            <PaginationLink size="default" onClick={() => handlePageChange(1)}>
-                    size="default"
-                    onClick={() => setCurrentPage(1)}
-                  >
               1
             </PaginationLink>
           </PaginationItem>
         )}
 
-              {currentPage > 3 && <PaginationEllipsis />}
+        {currentPage > 3 && (
+          <PaginationItem className="hidden sm:inline-flex items-center">
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
 
-              {currentPage > 2 && (
+        {currentPage > 1 && (
           <PaginationItem>
             <PaginationLink
               size="default"
-                    onClick={() => setCurrentPage(currentPage - 1)}
+              onClick={() => handlePageChange(currentPage - 1)}
             >
               {currentPage - 1}
             </PaginationLink>
@@ -257,24 +247,28 @@ const Packages: React.FC = () => {
           </PaginationLink>
         </PaginationItem>
 
-              {currentPage < totalPages - 1 && (
+        {currentPage < totalPages && (
           <PaginationItem>
             <PaginationLink
               size="default"
-                    onClick={() => setCurrentPage(currentPage + 1)}
+              onClick={() => handlePageChange(currentPage + 1)}
             >
               {currentPage + 1}
             </PaginationLink>
           </PaginationItem>
         )}
 
-              {currentPage < totalPages - 2 && <PaginationEllipsis />}
+        {currentPage < totalPages - 2 && (
+          <PaginationItem className="hidden sm:inline-flex items-center">
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
 
-              {currentPage < totalPages && (
+        {currentPage < totalPages - 1 && (
-                <PaginationItem>
+          <PaginationItem className="hidden sm:inline-block">
             <PaginationLink
               size="default"
-                    onClick={() => setCurrentPage(totalPages)}
+              onClick={() => handlePageChange(totalPages)}
             >
               {totalPages}
             </PaginationLink>
@@ -284,15 +278,13 @@ const Packages: React.FC = () => {
         <PaginationItem>
           <PaginationNext
             size="default"
-                  onClick={() =>
+            onClick={() => handlePageChange(Math.min(currentPage + 1, totalPages))}
-                    setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-                  }
           />
         </PaginationItem>
       </PaginationContent>
     </Pagination>
   </div>
-      </div>
+</div>
     </div>
   );
 };