lighten dark background, add more info to resources table

src/app/[orgId]/settings/sites/components/SitesTable.tsx

@@ -24,8 +24,8 @@ export type SiteRow = {
     id: number;
     nice: string;
     name: string;
-    mbIn: number;
-    mbOut: number;
+    mbIn: string;
+    mbOut: string;
     orgId: string;
 };
 

src/app/[orgId]/settings/sites/page.tsx

@@ -15,20 +15,30 @@ export default async function SitesPage(props: SitesPageProps) {
     try {
         const res = await internal.get<AxiosResponse<ListSitesResponse>>(
             `/org/${params.orgId}/sites`,
-            await authCookieHeader()
+            await authCookieHeader(),
         );
         sites = res.data.data.sites;
     } catch (e) {
         console.error("Error fetching sites", e);
     }
 
+    function formatSize(mb: number): string {
+        if (mb >= 1024 * 1024) {
+            return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
+        } else if (mb >= 1024) {
+            return `${(mb / 1024).toFixed(2)} GB`;
+        } else {
+            return `${mb.toFixed(2)} MB`;
+        }
+    }
+
     const siteRows: SiteRow[] = sites.map((site) => {
         return {
             name: site.name,
             id: site.siteId,
             nice: site.niceId.toString(),
-            mbIn: site.megabytesIn || 0,
-            mbOut: site.megabytesOut || 0,
+            mbIn: formatSize(site.megabytesIn || 0),
+            mbOut: formatSize(site.megabytesOut || 0),
             orgId: params.orgId,
         };
     });