feat: refactor dashboard and account pages to utilize new layout components, enhancing structure and loading states

components/layout/index.ts

@@ -0,0 +1,4 @@
+export { PageLayout } from "./page-layout";
+export { LoadingState } from "./loading-state";
+export { PageHeader } from "./page-header";
+

components/layout/loading-state.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Sidebar } from "@/components/dashboard/sidebar";
+import { RefreshCw } from "lucide-react";
+
+export function LoadingState() {
+  return (
+    <div className="flex h-screen">
+      <Sidebar />
+      <main className="flex-1 flex items-center justify-center">
+        <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
+      </main>
+    </div>
+  );
+}
+

components/layout/page-header.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ReactNode } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  rightContent?: ReactNode;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  rightContent,
+}: PageHeaderProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+        {description && (
+          <p className="text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {rightContent}
+      {actions && <div className="flex gap-2">{actions}</div>}
+    </div>
+  );
+}
+

components/layout/page-layout.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Sidebar } from "@/components/dashboard/sidebar";
+import { ReactNode } from "react";
+
+interface PageLayoutProps {
+  children: ReactNode;
+}
+
+export function PageLayout({ children }: PageLayoutProps) {
+  return (
+    <div className="flex h-screen bg-background">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        <div className="p-6 space-y-6">{children}</div>
+      </main>
+    </div>
+  );
+}
+