From 9db3a1f310090a75f87a3011e579b18b65f3459f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 29 Jan 2025 19:57:58 +0530
Subject: [PATCH] update: hide project breakdown if the metric doesn't exist
 for it.

---
 src/lib/sdk/billing.ts                        |   2 +
 .../usage/[[invoice]]/+page.svelte            |  32 ++--
 .../usage/[[invoice]]/ProjectBreakdown.svelte | 166 +++++++++---------
 3 files changed, 103 insertions(+), 97 deletions(-)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 32e65b6a1..9428f3032 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -198,6 +198,8 @@ export type OrganizationUsage = {
         storage: number;
         executions: number;
         bandwidth: number;
+        databasesReads: number;
+        databasesWrites: number;
         users: number;
         authPhoneTotal: number;
         authPhoneEstimate: number;
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index d4b23112a..27a59f68e 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -28,7 +28,7 @@
         : (data?.currentInvoice?.plan ?? $organization?.billingPlan);
     const plan = data?.plan ?? undefined;
 
-    $: project = (data.organizationUsage as OrganizationUsage).projects;
+    $: projects = (data.organizationUsage as OrganizationUsage).projects;
 
     $: legendData = [
         { name: 'Reads', value: data.organizationUsage.databasesReadsTotal },
@@ -129,8 +129,8 @@
                             }
                         ]} />
                 </div>
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="bandwidth" {data} />
+                {#if projects?.length > 0}
+                    <ProjectBreakdown {projects} metric="bandwidth" {data} />
                 {/if}
             {:else}
                 <Card isDashed>
@@ -181,8 +181,8 @@
                             }
                         ]} />
                 </div>
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="users" {data} />
+                {#if projects?.length > 0}
+                    <ProjectBreakdown {projects} metric="users" {data} />
                 {/if}
             {:else}
                 <Card isDashed>
@@ -239,10 +239,10 @@
 
                 <Legend {legendData} />
 
-                {#if project?.length > 0}
+                {#if projects?.length > 0}
                     <ProjectBreakdown
                         {data}
-                        projects={project}
+                        {projects}
                         databaseOperationMetric={['databasesReads', 'databasesWrites']} />
                 {/if}
             {:else}
@@ -298,9 +298,10 @@
                             }
                         ]} />
                 </div>
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="executions" {data} />
-                {/if}
+                {#if projects?.length > 0}<ProjectBreakdown
+                        {projects}
+                        metric="executions"
+                        {data} />{/if}
             {:else}
                 <Card isDashed>
                     <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
@@ -368,9 +369,10 @@
                     progressValue={bytesToSize(current, 'GB')}
                     progressMax={max}
                     progressBarData={progressBarStorageDate} />
-                {#if project?.length > 0}
-                    <ProjectBreakdown projects={project} metric="storage" {data} />
-                {/if}
+                {#if projects?.length > 0}<ProjectBreakdown
+                        {projects}
+                        metric="storage"
+                        {data} />{/if}
             {:else}
                 <Card isDashed>
                     <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
@@ -478,9 +480,9 @@
                     </p>
                 </div>
 
-                {#if project?.length > 0}
+                {#if projects?.length > 0}
                     <ProjectBreakdown
-                        projects={project}
+                        {projects}
                         metric="authPhoneTotal"
                         estimate="authPhoneEstimate"
                         {data} />
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
index 7bd50227c..ca31412f4 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -111,90 +111,92 @@
     });
 </script>
 
-<Collapsible>
-    <CollapsibleItem>
-        <svelte:fragment slot="title">Project breakdown</svelte:fragment>
-        <TableScroll dense noStyles noMargin style="table-layout: auto">
-            <TableHeader>
-                <TableCellHead>Project</TableCellHead>
-                {#if databaseOperationMetric}
-                    <TableCellHead>Reads</TableCellHead>
-                    <TableCellHead>Writes</TableCellHead>
-                {:else}
-                    <TableCellHead>{getMetricTitle(metric)}</TableCellHead>
-                {/if}
-
-                {#if estimate}
-                    <TableCellHead>Estimated cost</TableCellHead>
-                {/if}
-                {#if $canSeeProjects}
-                    <TableCellHead />
-                {/if}
-            </TableHeader>
-            <TableBody>
-                {#each groupByProject(metric, estimate, databaseOperationMetric).sort((a, b) => {
-                    const aValue = a.usage ?? a.databasesReads ?? 0;
-                    const bValue = b.usage ?? b.databasesReads ?? 0;
-                    return bValue - aValue;
-                }) as project}
-                    {#if !$canSeeProjects}
-                        <TableRow>
-                            <TableCell title="Project">
-                                {data.projectNames[project.projectId]?.name ?? 'Unknown'}
-                            </TableCell>
-                            {#if databaseOperationMetric}
-                                <TableCell title="Reads">
-                                    {format(project.databasesReads ?? 0)}
-                                </TableCell>
-                                <TableCell title="Writes">
-                                    {format(project.databasesWrites ?? 0)}
-                                </TableCell>
-                            {:else}
-                                <TableCell>
-                                    {format(project.usage)}
-                                </TableCell>
-                            {/if}
-
-                            {#if project.estimate}
-                                <TableCell title="Estimated cost">
-                                    {formatCurrency(project.estimate)}
-                                </TableCell>
-                            {/if}
-                        </TableRow>
+{#if projects.some((project) => project[metric]) || projects.some( (project) => databaseOperationMetric?.some((metric) => project[metric]) )}
+    <Collapsible>
+        <CollapsibleItem>
+            <svelte:fragment slot="title">Project breakdown</svelte:fragment>
+            <TableScroll dense noStyles noMargin style="table-layout: auto">
+                <TableHeader>
+                    <TableCellHead>Project</TableCellHead>
+                    {#if databaseOperationMetric}
+                        <TableCellHead>Reads</TableCellHead>
+                        <TableCellHead>Writes</TableCellHead>
                     {:else}
-                        <TableRowLink href={getProjectUsageLink(project.projectId)}>
-                            <TableCell title="Project">
-                                {data.projectNames[project.projectId]?.name ?? 'Unknown'}
-                            </TableCell>
-                            {#if databaseOperationMetric}
-                                <TableCell title="Reads">
-                                    {format(project.databasesReads ?? 0)}
-                                </TableCell>
-                                <TableCell title="Writes">
-                                    {format(project.databasesWrites ?? 0)}
-                                </TableCell>
-                            {:else}
-                                <TableCell>
-                                    {format(project.usage)}
-                                </TableCell>
-                            {/if}
-
-                            {#if project.estimate}
-                                <TableCell title="Estimated cost">
-                                    {formatCurrency(project.estimate)}
-                                </TableCell>
-                            {/if}
-                            <TableCell right={true}>
-                                <span
-                                    class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
-                            </TableCell>
-                        </TableRowLink>
+                        <TableCellHead>{getMetricTitle(metric)}</TableCellHead>
                     {/if}
-                {/each}
-            </TableBody>
-        </TableScroll>
-    </CollapsibleItem>
-</Collapsible>
+
+                    {#if estimate}
+                        <TableCellHead>Estimated cost</TableCellHead>
+                    {/if}
+                    {#if $canSeeProjects}
+                        <TableCellHead />
+                    {/if}
+                </TableHeader>
+                <TableBody>
+                    {#each groupByProject(metric, estimate, databaseOperationMetric).sort( (a, b) => {
+                            const aValue = a.usage ?? a.databasesReads ?? 0;
+                            const bValue = b.usage ?? b.databasesReads ?? 0;
+                            return bValue - aValue;
+                        } ) as project}
+                        {#if !$canSeeProjects}
+                            <TableRow>
+                                <TableCell title="Project">
+                                    {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                                </TableCell>
+                                {#if databaseOperationMetric}
+                                    <TableCell title="Reads">
+                                        {format(project.databasesReads ?? 0)}
+                                    </TableCell>
+                                    <TableCell title="Writes">
+                                        {format(project.databasesWrites ?? 0)}
+                                    </TableCell>
+                                {:else}
+                                    <TableCell>
+                                        {format(project.usage)}
+                                    </TableCell>
+                                {/if}
+
+                                {#if project.estimate}
+                                    <TableCell title="Estimated cost">
+                                        {formatCurrency(project.estimate)}
+                                    </TableCell>
+                                {/if}
+                            </TableRow>
+                        {:else}
+                            <TableRowLink href={getProjectUsageLink(project.projectId)}>
+                                <TableCell title="Project">
+                                    {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                                </TableCell>
+                                {#if databaseOperationMetric}
+                                    <TableCell title="Reads">
+                                        {format(project.databasesReads ?? 0)}
+                                    </TableCell>
+                                    <TableCell title="Writes">
+                                        {format(project.databasesWrites ?? 0)}
+                                    </TableCell>
+                                {:else}
+                                    <TableCell>
+                                        {format(project.usage)}
+                                    </TableCell>
+                                {/if}
+
+                                {#if project.estimate}
+                                    <TableCell title="Estimated cost">
+                                        {formatCurrency(project.estimate)}
+                                    </TableCell>
+                                {/if}
+                                <TableCell right={true}>
+                                    <span
+                                        class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
+                                </TableCell>
+                            </TableRowLink>
+                        {/if}
+                    {/each}
+                </TableBody>
+            </TableScroll>
+        </CollapsibleItem>
+    </Collapsible>
+{/if}
 
 <style>
     .ignore-icon-rotate {