nice views

src/app/page.tsx

@@ -16,6 +16,8 @@ export default function Home() {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(100);
   const [filterText, setFilterText] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [orderBy, setOrderBy] = useState<'all_children' | 'direct_children'>('all_children');
 
   useEffect(() => {
     async function fetchData() {
@@ -63,6 +65,7 @@ export default function Home() {
       await db.terminate();
 
       setAllModels(data);
+      setIsLoading(false);
     }
     fetchData();
   }, []);
@@ -71,15 +74,28 @@ export default function Home() {
     model.ancestor.toLowerCase().includes(filterText.toLowerCase())
   );
 
-  const totalPages = Math.ceil(filteredModels.length / pageSize);
+  const sortedModels = filteredModels.sort((a, b) => {
+    if (orderBy === 'all_children') {
+      return b.all_children_count - a.all_children_count;
+    } else {
+      return (b.direct_children_count ?? 0) - (a.direct_children_count ?? 0);
+    }
+  });
+
+  const totalPages = Math.ceil(sortedModels.length / pageSize);
 
-  const paginatedModels = filteredModels.slice(
+  const paginatedModels = sortedModels.slice(
     (currentPage - 1) * pageSize,
     currentPage * pageSize
   );
 
+  const handleOrderByClick = (column: 'all_children' | 'direct_children') => {
+    setOrderBy(column);
+    setCurrentPage(1);
+  };
+
   return (
-    <main className="container mx-auto py-8 text-gray-900 dark:text-white">
+    <main className="container mx-auto py-8 bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
       <h1 className="text-4xl font-bold mb-4">All Models</h1>
       <div className="mb-4">
         <input
@@ -87,17 +103,29 @@ export default function Home() {
           placeholder="Filter by model name"
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
-          className="px-4 py-2 border border-gray-300 rounded-md"
+          className="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
         />
       </div>
-      {paginatedModels.length > 0 ? (
+      {isLoading ? (
+        <p>Loading data...</p>
+      ) : paginatedModels.length > 0 ? (
         <>
           <table className="table-auto border-collapse w-full">
             <thead>
               <tr>
                 <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left">Model</th>
-                <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right">Direct Children</th>
-                <th className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right">All Children</th>
+                <th
+                  className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right cursor-pointer"
+                  onClick={() => handleOrderByClick('direct_children')}
+                >
+                  Direct Children {orderBy === 'direct_children' && '▼'}
+                </th>
+                <th
+                  className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-right cursor-pointer"
+                  onClick={() => handleOrderByClick('all_children')}
+                >
+                  All Children {orderBy === 'all_children' && '▼'}
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -110,18 +138,61 @@ export default function Home() {
               ))}
             </tbody>
           </table>
-          <div className="mt-4">
+          <div className="mt-4 flex items-center justify-between">
             <button
               onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
               disabled={currentPage === 1}
-              className="px-4 py-2 bg-blue-500 text-white rounded-md mr-2"
+              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md mr-2"
             >
               Previous
             </button>
+            <div className="flex items-center space-x-2">
+              {currentPage > 1 && (
+                <>
+                  <button
+                    onClick={() => setCurrentPage(1)}
+                    className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
+                  >
+                    1
+                  </button>
+                  {currentPage > 2 && <span className="text-gray-500">...</span>}
+                </>
+              )}
+              {[...Array(5)].map((_, i) => {
+                const page = currentPage + i - 2;
+                if (page >= 1 && page <= totalPages) {
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => setCurrentPage(page)}
+                      className={`px-2 py-1 ${
+                        page === currentPage
+                          ? 'bg-blue-500 dark:bg-blue-600 text-white'
+                          : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
+                      } rounded-md`}
+                    >
+                      {page}
+                    </button>
+                  );
+                }
+                return null;
+              })}
+              {currentPage < totalPages && (
+                <>
+                  {currentPage < totalPages - 1 && <span className="text-gray-500">...</span>}
+                  <button
+                    onClick={() => setCurrentPage(totalPages)}
+                    className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
+                  >
+                    {totalPages}
+                  </button>
+                </>
+              )}
+            </div>
             <button
               onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
               disabled={currentPage === totalPages}
-              className="px-4 py-2 bg-blue-500 text-white rounded-md"
+              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-md"
             >
               Next
             </button>