From ee6d36f516d95e5e3f6a37d7bb88d5e341ee7907 Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Tue, 5 May 2026 00:23:39 +0530
Subject: [PATCH] Revert "fix: remove databases reads/writes usage tab and
 clear loaders"

This reverts commit 1f2aab991617f13068f7842346c65d6c13b77c9b.
---
 .../database-[database]/header.svelte         |  6 +++++
 .../usage/[[period]]/+page.svelte             | 23 ++++++++++++++--
 .../usage/[[period]]/+page.ts                 | 16 ++++++++++-
 .../databases/header.svelte                   |  6 +++++
 .../databases/usage/[[period]]/+page.svelte   | 27 +++++++++++++++++--
 .../databases/usage/[[period]]/+page.ts       | 15 ++++++++++-
 6 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
index 7bd3d0756..1d3ded6c0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
@@ -34,6 +34,12 @@
                 event: 'backups',
                 hasChildren: true
             },
+            {
+                href: withPath(baseDatabasePath, '/usage'),
+                title: 'Usage',
+                event: 'usage',
+                hasChildren: true
+            },
             {
                 href: withPath(baseDatabasePath, '/settings'),
                 event: 'settings',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index 3ef899e53..84c6ff2b7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -1,5 +1,24 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
+    import { Container, UsageMultiple } from '$lib/layout';
+
+    export let data;
+
+    $: reads = data.databaseReads;
+    $: readsTotal = data.databaseReadsTotal;
+
+    $: writes = data.databaseWrites;
+    $: writesTotal = data.databaseWritesTotal;
 </script>
 
-<Container></Container>
+<Container databasesMainScreen>
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendNumberFormat="abbreviate"
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts
index 80b1ec6bf..9391c5451 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts
@@ -1,3 +1,17 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { UsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async () => ({});
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(UsageRange, params.period)
+        ? params.period
+        : UsageRange.ThirtyDays;
+
+    return {
+        ...(await sdk.forProject(params.region, params.project).tablesDB.getUsage({
+            databaseId: params.database,
+            range: period
+        }))
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/databases/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/header.svelte
index edaaeb32e..796c86d09 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/header.svelte
@@ -14,6 +14,12 @@
             title: 'Databases',
             event: 'databases',
             hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage',
+            event: 'usage',
+            hasChildren: true
         }
     ];
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
index 3ef899e53..b5b114d9a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte
@@ -1,5 +1,28 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
+    import { Container, UsageMultiple } from '$lib/layout';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: reads = data.databasesReads;
+    $: readsTotal = data.databasesReadsTotal;
+
+    $: writes = data.databasesWrites;
+    $: writesTotal = data.databasesWritesTotal;
 </script>
 
-<Container></Container>
+<Container>
+    <Layout.Stack gap="l">
+        <UsageMultiple
+            title="Reads and writes"
+            showHeader={false}
+            total={[readsTotal, writesTotal]}
+            count={[reads, writes]}
+            legendNumberFormat="abbreviate"
+            legendData={[
+                { name: 'Reads', value: readsTotal },
+                { name: 'Writes', value: writesTotal }
+            ]} />
+    </Layout.Stack>
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts
index 80b1ec6bf..359a5153e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts
@@ -1,3 +1,16 @@
+import { isValueOfStringEnum } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
+import { UsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async () => ({});
+export const load: PageLoad = async ({ params }) => {
+    const period = isValueOfStringEnum(UsageRange, params.period)
+        ? params.period
+        : UsageRange.ThirtyDays;
+
+    return {
+        ...(await sdk
+            .forProject(params.region, params.project)
+            .tablesDB.listUsage({ range: period }))
+    };
+};