feat: add bucket details fetching and improve bucket card display

- Introduced a new hook, `useBucketDetails`, to fetch detailed information for a specific bucket.
- Updated `BucketCard` component to utilize the new hook, displaying detailed usage and object counts when available.
- Enhanced the `OverviewTab` component to handle null values gracefully, ensuring a consistent user experience when displaying bucket data.

src/pages/buckets/components/bucket-card.tsx

@@ -2,12 +2,19 @@ import { Bucket } from "../types";
 import { ArchiveIcon, ChartPie, ChartScatter } from "lucide-react";
 import { readableBytes } from "@/lib/utils";
 import Button from "@/components/ui/button";
+import { useBucketDetails } from "../hooks";
 
 type Props = {
   data: Bucket & { aliases: string[] };
 };
 
 const BucketCard = ({ data }: Props) => {
+  const { data: bucketDetails } = useBucketDetails(data.id);
+
+  // Use detailed data if available, otherwise fall back to basic data
+  const bytes = bucketDetails?.bytes ?? data.bytes;
+  const objects = bucketDetails?.objects ?? data.objects;
+
   return (
     <div className="card card-body p-6">
       <div className="grid grid-cols-2 items-start gap-4 p-2 pb-0">
@@ -25,7 +32,7 @@ const BucketCard = ({ data }: Props) => {
             Usage
           </p>
           <p className="text-xl font-medium mt-1">
-            {readableBytes(data.bytes)}
+            {bytes != null ? readableBytes(bytes) : "n/a"}
           </p>
         </div>
 
@@ -34,7 +41,9 @@ const BucketCard = ({ data }: Props) => {
             <ChartScatter className="inline" size={16} />
             Objects
           </p>
-          <p className="text-xl font-medium mt-1">{data.objects}</p>
+          <p className="text-xl font-medium mt-1">
+            {objects != null ? objects.toLocaleString() : "n/a"}
+          </p>
         </div>
       </div>
 

src/pages/buckets/hooks.ts

@@ -4,7 +4,7 @@ import {
   UseMutationOptions,
   useQuery,
 } from "@tanstack/react-query";
-import { GetBucketRes } from "./types";
+import { GetBucketRes, Bucket } from "./types";
 import { CreateBucketSchema } from "./schema";
 
 export const useBuckets = () => {
@@ -14,6 +14,14 @@ export const useBuckets = () => {
   });
 };
 
+export const useBucketDetails = (id?: string | null) => {
+  return useQuery({
+    queryKey: ["bucket-details", id],
+    queryFn: () => api.get<Bucket>("/v2/GetBucketInfo", { params: { id } }),
+    enabled: !!id,
+  });
+};
+
 export const useCreateBucket = (
   options?: UseMutationOptions<unknown, Error, CreateBucketSchema>
 ) => {

src/pages/buckets/manage/overview/overview-tab.tsx

@@ -28,7 +28,7 @@ const OverviewTab = () => {
             <div className="flex-1">
               <p className="text-sm flex items-center gap-1">Storage</p>
               <p className="text-2xl font-medium">
-                {readableBytes(data?.bytes)}
+                {data?.bytes != null ? readableBytes(data.bytes) : "n/a"}
               </p>
             </div>
           </div>
@@ -37,7 +37,9 @@ const OverviewTab = () => {
             <ChartScatter className="mt-1" size={20} />
             <div className="flex-1">
               <p className="text-sm flex items-center gap-1">Objects</p>
-              <p className="text-2xl font-medium">{data?.objects}</p>
+              <p className="text-2xl font-medium">
+                {data?.objects != null ? data.objects.toLocaleString() : "n/a"}
+              </p>
             </div>
           </div>
         </div>