fix: better dashboard

Author: izadoesdev

apps/api/src/agent/processor.ts

@@ -1,3 +1,5 @@
+import type { User } from '@databuddy/auth';
+import type { Website } from '@databuddy/shared';
 import { handleChartResponse } from './handlers/chart-handler';
 import { handleMetricResponse } from './handlers/metric-handler';
 import { comprehensiveUnifiedPrompt } from './prompts/agent';
@@ -20,8 +22,8 @@ export interface AssistantRequest {
 }
 
 export interface AssistantContext {
-	user: any;
-	website: any;
+	user: User;
+	website: Website;
 	debugInfo: Record<string, unknown>;
 }
 

apps/dashboard/app/(main)/layout.tsx

@@ -3,22 +3,29 @@ import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { Sidebar } from '@/components/layout/sidebar';
 
-export default async function MainLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
+async function AuthGuard({ children }: { children: React.ReactNode }) {
 	const session = await auth.api.getSession({ headers: await headers() });
 	if (!session) {
 		redirect('/login');
 	}
+	return <>{children}</>;
+}
 
+export default function MainLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
 	return (
-		<div className="h-screen overflow-hidden text-foreground">
-			<Sidebar />
-			<div className="relative h-screen pt-16 md:pl-72">
-				<div className="h-[calc(100vh-4rem)] overflow-y-scroll">{children}</div>
+		<AuthGuard>
+			<div className="h-screen overflow-hidden text-foreground">
+				<Sidebar />
+				<div className="relative h-screen pt-16 md:pl-64">
+					<div className="h-[calc(100vh-4rem)] overflow-y-scroll">
+						{children}
+					</div>
+				</div>
 			</div>
-		</div>
+		</AuthGuard>
 	);
 }

apps/dashboard/components/layout/sidebar.tsx

@@ -19,6 +19,12 @@ import { WebsiteHeader } from './navigation/website-header';
 import { OrganizationSelector } from './organization-selector';
 import { TopHeader } from './top-header';
 
+type NavigationConfig = {
+	navigation: typeof mainNavigation;
+	header: React.ReactNode;
+	currentWebsiteId?: string | null;
+};
+
 export function Sidebar() {
 	const pathname = usePathname();
 	const [isMobileOpen, setIsMobileOpen] = useState(false);
@@ -48,73 +54,39 @@ export function Sidebar() {
 		return () => document.removeEventListener('keydown', handleKeyDown);
 	}, [isMobileOpen, closeSidebar]);
 
-	const renderNavigation = () => {
+	const getNavigationConfig = (): NavigationConfig => {
 		if (isWebsite) {
-			return (
-				<div className="space-y-4">
-					<WebsiteHeader website={currentWebsite} />
-					{websiteNavigation.map((section) => (
-						<NavigationSection
-							currentWebsiteId={websiteId}
-							items={section.items}
-							key={section.title}
-							pathname={pathname}
-							title={section.title}
-						/>
-					))}
-				</div>
-			);
+			return {
+				navigation: websiteNavigation,
+				header: <WebsiteHeader website={currentWebsite} />,
+				currentWebsiteId: websiteId,
+			};
 		}
 
 		if (isDemo) {
-			return (
-				<div className="space-y-4">
-					<WebsiteHeader website={currentWebsite} />
-					{demoNavigation.map((section) => (
-						<NavigationSection
-							currentWebsiteId={websiteId}
-							items={section.items}
-							key={section.title}
-							pathname={pathname}
-							title={section.title}
-						/>
-					))}
-				</div>
-			);
+			return {
+				navigation: demoNavigation,
+				header: <WebsiteHeader website={currentWebsite} />,
+				currentWebsiteId: websiteId,
+			};
 		}
 
 		if (isSandbox) {
-			return (
-				<div className="space-y-4">
-					<SandboxHeader />
-					{sandboxNavigation.map((section) => (
-						<NavigationSection
-							currentWebsiteId="sandbox"
-							items={section.items}
-							key={section.title}
-							pathname={pathname}
-							title={section.title}
-						/>
-					))}
-				</div>
-			);
+			return {
+				navigation: sandboxNavigation,
+				header: <SandboxHeader />,
+				currentWebsiteId: 'sandbox',
+			};
 		}
 
-		return (
-			<div className="space-y-4">
-				<OrganizationSelector />
-				{mainNavigation.map((section) => (
-					<NavigationSection
-						items={section.items}
-						key={section.title}
-						pathname={pathname}
-						title={section.title}
-					/>
-				))}
-			</div>
-		);
+		return {
+			navigation: mainNavigation,
+			header: <OrganizationSelector />,
+		};
 	};
 
+	const { navigation, header, currentWebsiteId } = getNavigationConfig();
+
 	return (
 		<>
 			<TopHeader setMobileOpen={() => setIsMobileOpen(true)} />
@@ -124,6 +96,8 @@ export function Sidebar() {
 					className="fixed inset-0 z-30 bg-black/20 md:hidden"
 					onClick={closeSidebar}
 					onKeyDown={closeSidebar}
+					role="button"
+					tabIndex={0}
 				/>
 			)}
 
@@ -145,7 +119,18 @@ export function Sidebar() {
 				</Button>
 
 				<ScrollArea className="h-[calc(100vh-4rem)]">
-					<div className="select-none space-y-4 p-3">{renderNavigation()}</div>
+					<div className="select-none space-y-4 p-3">
+						{header}
+						{navigation.map((section) => (
+							<NavigationSection
+								currentWebsiteId={currentWebsiteId}
+								items={section.items}
+								key={section.title}
+								pathname={pathname}
+								title={section.title}
+							/>
+						))}
+					</div>
 				</ScrollArea>
 			</div>
 		</>