update app

index.html

@@ -1376,31 +1376,35 @@
             const totalModels = state.models.length;
             const totalDatasets = state.datasets.length;
             const totalSpaces = state.spaces.length;
+            
             const totalModelDl = state.models.reduce((s, m) => s + getLifetimeDownloads(m), 0);
             const totalDatasetDl = state.datasets.reduce((s, d) => s + getLifetimeDownloads(d), 0);
             const totalLikes = [...state.models, ...state.datasets, ...state.spaces].reduce((s, i) => s + getItemLikes(i), 0);
+            
             const totalDlMonthly = state.models.reduce((s, m) => s + getMonthlyDownloads(m), 0) + state.datasets.reduce((s, d) => s + getMonthlyDownloads(d), 0);
             const totalPrivate = [...state.models, ...state.datasets, ...state.spaces].filter(i => i.private).length;
-            
+
+            let startY = 35;
+
+            // Overview Table
+            const overviewBody = [
+                ['Username', `@${u}`, 'Followers', `${formatNumFull(p?.numFollowers ?? 0)}`],
+                ['Organizations', `${Array.isArray(p?.orgs) ? p.orgs.length : 0}`, 'Total Likes', `${formatNumFull(totalLikes)}`],
+                ['Total Models', `${totalModels} (Dl: ${formatNumFull(totalModelDl)})`, 'Total Datasets', `${totalDatasets} (Dl: ${formatNumFull(totalDatasetDl)})`],
+                ['Total Spaces', `${totalSpaces}`, 'Private Repos', `${totalPrivate}`],
+                ['Downloads (Last 30 Days)', `${formatNumFull(totalDlMonthly)}`, '', '']
+            ];
+
             doc.autoTable({
-                startY: 32,
-                theme: 'plain',
-                body: [
-                    ['Username', `@${u}`],
-                    ['Followers', `${formatNumFull(p?.numFollowers ?? 0)}`],
-                    ['Organizations', `${Array.isArray(p?.orgs) ? p.orgs.length : 0}`],
-                    ['Total Models', `${totalModels} (Downloads: ${formatNumFull(totalModelDl)})`],
-                    ['Total Datasets', `${totalDatasets} (Downloads: ${formatNumFull(totalDatasetDl)})`],
-                    ['Total Spaces', `${totalSpaces}`],
-                    ['Total Likes Received', `${formatNumFull(totalLikes)}`],
-                    ['Downloads Last 30 Days', `${formatNumFull(totalDlMonthly)}`],
-                    ['Total Private Repositories', `${totalPrivate}`]
-                ],
-                styles: { fontSize: 11, cellPadding: 2, textColor: [60, 60, 60] },
-                columnStyles: { 0: { fontStyle: 'bold', cellWidth: 55, textColor: [20, 20, 20] } }
+                startY: startY,
+                head: [['Overview Metric', 'Value', 'Overview Metric', 'Value']],
+                body: overviewBody,
+                theme: 'grid',
+                styles: { fontSize: 10, cellPadding: 3 },
+                headStyles: { fillColor: [31, 41, 55], textColor: [255, 255, 255], fontStyle: 'bold' },
+                alternateRowStyles: { fillColor: [249, 250, 251] }
             });
-            
-            let startY = doc.lastAutoTable.finalY + 10;
+            startY = doc.lastAutoTable.finalY + 10;
 
             const pipelineCounts = {};
             state.models.forEach(m => {
@@ -1415,9 +1419,10 @@
                     startY: startY,
                     head: [['Model Pipeline Tasks', 'Count']],
                     body: sortedPipelines,
-                    theme: 'plain',
-                    headStyles: { fontStyle: 'bold', textColor: [0, 0, 0] },
-                    styles: { fontSize: 10, cellPadding: 2, textColor: [60, 60, 60] },
+                    theme: 'grid',
+                    styles: { fontSize: 9 },
+                    headStyles: { fillColor: [59, 130, 246], textColor: [255, 255, 255], fontStyle: 'bold' },
+                    alternateRowStyles: { fillColor: [243, 244, 246] },
                     tableWidth: 'wrap'
                 });
                 startY = doc.lastAutoTable.finalY + 10;
@@ -1436,9 +1441,10 @@
                         m.createdAt ? new Date(m.createdAt).toLocaleDateString() : '-',
                         m.lastModified ? new Date(m.lastModified).toLocaleDateString() : '-'
                     ]),
-                    theme: 'plain',
-                    headStyles: { fontStyle: 'bold', textColor: [0, 0, 0] },
-                    styles: { fontSize: 10, cellPadding: 3, textColor: [60, 60, 60] }
+                    theme: 'striped',
+                    styles: { fontSize: 9 },
+                    headStyles: { fillColor: [255, 157, 0], textColor: [255, 255, 255], fontStyle: 'bold' },
+                    alternateRowStyles: { fillColor: [255, 247, 237] }
                 });
                 startY = doc.lastAutoTable.finalY + 10;
             }
@@ -1455,9 +1461,10 @@
                         d.createdAt ? new Date(d.createdAt).toLocaleDateString() : '-',
                         d.lastModified ? new Date(d.lastModified).toLocaleDateString() : '-'
                     ]),
-                    theme: 'plain',
-                    headStyles: { fontStyle: 'bold', textColor: [0, 0, 0] },
-                    styles: { fontSize: 10, cellPadding: 3, textColor: [60, 60, 60] }
+                    theme: 'striped',
+                    styles: { fontSize: 9 },
+                    headStyles: { fillColor: [16, 185, 129], textColor: [255, 255, 255], fontStyle: 'bold' },
+                    alternateRowStyles: { fillColor: [236, 253, 245] }
                 });
                 startY = doc.lastAutoTable.finalY + 10;
             }
@@ -1474,9 +1481,10 @@
                         s.createdAt ? new Date(s.createdAt).toLocaleDateString() : '-',
                         s.lastModified ? new Date(s.lastModified).toLocaleDateString() : '-'
                     ]),
-                    theme: 'plain',
-                    headStyles: { fontStyle: 'bold', textColor: [0, 0, 0] },
-                    styles: { fontSize: 10, cellPadding: 3, textColor: [60, 60, 60] }
+                    theme: 'striped',
+                    styles: { fontSize: 9 },
+                    headStyles: { fillColor: [139, 92, 246], textColor: [255, 255, 255], fontStyle: 'bold' },
+                    alternateRowStyles: { fillColor: [245, 243, 255] }
                 });
             }