UI Polish and Theme Toggle Fix on Top of API Integration

.gitignore

@@ -42,3 +42,5 @@ next-env.d.ts
 # logs
 logs
 *.log
+
+app/(test)

app/(main)/buckets/layout.tsx

@@ -1,51 +1,12 @@
-import { Metadata, Viewport } from "next";
-import dynamic from "next/dynamic";
-import DashboardNavSkeleton from "@/components/custom-ui/skeleton/DashboardNavSkeleton";
+import { Viewport } from "next";
 import BackgroundShape from "@/components/custom-ui/home/BackgroundShape";
+import DashboardNav from "@/components/layout/DashboardNav";
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
 };
 
-export const metadata: Metadata = {
-  title: "Buckets | Nebula S3",
-  description:
-    "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
-  keywords: [
-    "S3 Buckets",
-    "Cloud Storage",
-    "Bucket Management",
-    "Storage Organization",
-    "Cloud Infrastructure",
-    "Data Storage",
-    "Bucket Monitoring",
-    "Storage Analytics",
-  ],
-  authors: [{ name: "Nebula S3 Team" }],
-  robots: "index, follow",
-  openGraph: {
-    type: "website",
-    locale: "en_US",
-    url: "https://nebula-s3.com/buckets",
-    title: "NEBULA S3 BUCKETS",
-    description:
-      "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
-    siteName: "NEBULA S3",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "NEBULA S3 BUCKETS",
-    description:
-      "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
-    creator: "@nebulas3",
-  },
-};
-
-const DashboardNav = dynamic(() => import("@/components/layout/DashboardNav"), {
-  loading: () => <DashboardNavSkeleton />,
-});
-
 export default function BucketsLayout({
   children,
 }: {

app/(main)/buckets/page.tsx

@@ -1,102 +1,45 @@
-"use client";
-
-import { useState, Suspense, useEffect } from "react";
-import dynamic from "next/dynamic";
-import BucketHeaderSkeleton from "@/components/custom-ui/skeleton/bucket-header-skeleton";
-import BucketFiltersSkeleton from "@/components/custom-ui/skeleton/bucket-filters-skeleton";
-import BucketGridSkeleton from "@/components/custom-ui/skeleton/bucket-grid-skeleton";
-
-// Dynamic imports with skeleton loading states
-const BucketHeader = dynamic(
-  () => import("@/components/custom-ui/bucket-component/bucket-header"),
-  {
-    loading: () => <BucketHeaderSkeleton />,
-    ssr: false,
-  }
-);
-
-const BucketFilters = dynamic(
-  () => import("@/components/custom-ui/bucket-component/bucket-filters"),
-  {
-    loading: () => <BucketFiltersSkeleton />,
-    ssr: false,
-  }
-);
-
-const BucketGrid = dynamic(
-  () => import("@/components/custom-ui/bucket-component/bucket-grid"),
-  {
-    loading: () => <BucketGridSkeleton />,
-    ssr: false,
-  }
-);
-
-// Static mock data
-import { mockBuckets } from "@/static/buckets";
-
-export default function BucketsPage() {
-  const [mounted, setMounted] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeFilter, setActiveFilter] = useState<"size" | "date" | null>(
-    null
-  );
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const filteredBuckets = mockBuckets
-    .filter((bucket) =>
-      bucket.bucketName.toLowerCase().includes(searchQuery.toLowerCase())
-    )
-    .sort((a, b) => {
-      if (activeFilter === "size") {
-        const sizeA = parseFloat(a.size);
-        const sizeB = parseFloat(b.size);
-        return sizeB - sizeA;
-      } else if (activeFilter === "date") {
-        return b.createdOn.getTime() - a.createdOn.getTime();
-      }
-      return 0;
-    });
-
-  const handleBucketDelete = (bucketId: string) => {
-    // Implement delete functionality
-    console.log("Delete bucket:", bucketId);
-  };
-
-  if (!mounted) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="space-y-6">
-          <BucketHeaderSkeleton />
-          <BucketFiltersSkeleton />
-          <BucketGridSkeleton />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="space-y-6">
-        <Suspense fallback={<BucketHeaderSkeleton />}>
-          <BucketHeader />
-        </Suspense>
-
-        <Suspense fallback={<BucketFiltersSkeleton />}>
-          <BucketFilters
-            searchTerm={searchQuery}
-            setSearchTerm={setSearchQuery}
-            activeFilter={activeFilter}
-            setActiveFilter={setActiveFilter}
-          />
-        </Suspense>
-
-        <Suspense fallback={<BucketGridSkeleton />}>
-          <BucketGrid buckets={filteredBuckets} onDelete={handleBucketDelete} />
-        </Suspense>
-      </div>
-    </div>
-  );
-}
+import { Metadata } from "next";
+import BucketManagement from "@/components/custom-ui/bucket-component/bucket-management";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+
+export const metadata: Metadata = {
+  title: "Buckets | Nebula S3",
+  description:
+    "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
+  keywords: [
+    "S3 Buckets",
+    "Cloud Storage",
+    "Bucket Management",
+    "Storage Organization",
+    "Cloud Infrastructure",
+    "Data Storage",
+    "Bucket Monitoring",
+    "Storage Analytics",
+  ],
+  authors: [{ name: "Nebula S3 Team" }],
+  robots: "index, follow",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://nebula-s3.com/buckets",
+    title: "NEBULA S3 BUCKETS",
+    description:
+      "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
+    siteName: "NEBULA S3",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NEBULA S3 BUCKETS",
+    description:
+      "Manage and organize your S3 buckets with Nebula S3. Create, monitor, and maintain your cloud storage buckets efficiently.",
+    creator: "@nebulas3",
+  },
+};
+
+export default function BucketsPage() {
+  return (
+    <ErrorBoundary>
+      <BucketManagement />
+    </ErrorBoundary>
+  );
+}

app/(main)/dashboard/layout.tsx

@@ -1,46 +1,13 @@
-import { Metadata, Viewport } from "next";
-import dynamic from "next/dynamic";
-import DashboardNavSkeleton from "@/components/custom-ui/skeleton/DashboardNavSkeleton";
+import { Viewport } from "next";
 import BackgroundShape from "@/components/custom-ui/home/BackgroundShape";
 import Footer from "@/components/layout/Footer";
+import DashboardNav from "@/components/layout/DashboardNav";
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
 };
 
-export const metadata: Metadata = {
-  title: "DASHBOARD | NEBULA S3",
-  description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
-  keywords: [
-    "S3",
-    "Storage",
-    "Dashboard",
-    "Cloud Storage",
-    "Bucket Management",
-  ],
-  authors: [{ name: "Nebula S3 Team" }],
-  robots: "index, follow",
-  openGraph: {
-    type: "website",
-    locale: "en_US",
-    url: "https://nebula-s3.com/dashboard",
-    title: "NEBULA S3 DASHBOARD",
-    description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
-    siteName: "NEBULA S3",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "NEBULA S3 DASHBOARD",
-    description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
-    creator: "@nebulas3",
-  },
-};
-
-const DashboardNav = dynamic(() => import("@/components/layout/DashboardNav"), {
-  loading: () => <DashboardNavSkeleton />,
-});
-
 export default function DashboardLayout({
   children,
 }: {

app/(main)/dashboard/page.tsx

@@ -1,15 +1,42 @@
+import { Metadata } from "next";
 import { Suspense } from "react";
 import DashboardSkeleton from "@/components/custom-ui/skeleton/DashboardSkeleton";
 import DashboardContent from "@/components/custom-ui/dashboard/DashboardContent";
 
+export const metadata: Metadata = {
+  title: "Dashboard | Nebula S3",
+  description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
+  keywords: [
+    "S3",
+    "Storage", 
+    "Dashboard",
+    "Cloud Storage",
+    "Bucket Management",
+  ],
+  authors: [{ name: "Nebula S3 Team" }],
+  robots: "index, follow",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://nebula-s3.com/dashboard",
+    title: "NEBULA S3 DASHBOARD",
+    description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
+    siteName: "NEBULA S3",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "NEBULA S3 DASHBOARD",
+    description: "Manage your S3 buckets and objects with Nebula S3 dashboard",
+    creator: "@nebulas3",
+  },
+};
+
 export default function DashboardPage() {
   return (
-    <>
-      <main className="container mx-auto p-6 min-h-[calc(100vh-9rem)]">
-        <Suspense fallback={<DashboardSkeleton />}>
-          <DashboardContent />
-        </Suspense>
-      </main>
-    </>
+    <main className="container mx-auto p-6 min-h-[calc(100vh-9rem)]">
+      <Suspense fallback={<DashboardSkeleton />}>
+        <DashboardContent />
+      </Suspense>
+    </main>
   );
 }