feat(ui): add dashboard page, remove navigation menu from header and add dashboard link to home page

Removes the navigation menu items (Files, Layout Configurations, Imports, API Docs) from the header component to simplify the UI. Adds a conditional dashboard link on the home page that only appears when a user is authenticated.

app/components/header.tsx

@@ -20,33 +20,6 @@ import { DarkModeToggle } from "./dark-mode-toggle";
 import { cn } from "@/lib/utils";
 import React from "react";
 
-const navigationItems = [
-  {
-    title: "Files",
-    href: "/files",
-    description: "Browse and manage your files",
-    icon: Folder,
-  },
-  {
-    title: "Layout Configurations",
-    href: "/layout-configurations",
-    description: "Manage Excel layout configurations",
-    icon: FileText,
-  },
-  {
-    title: "Imports",
-    href: "/imports",
-    description: "Manage data imports",
-    icon: FileText,
-  },
-  {
-    title: "API Docs",
-    href: "/api-docs",
-    description: "View API documentation",
-    icon: FileText,
-  },
-];
-
 const userMenuItems = [
   {
     title: "Profile",
@@ -107,23 +80,6 @@ export default function Header() {
               priority
             />
           </Link>
-
-          <NavigationMenu className="hidden md:flex">
-            <NavigationMenuList>
-              {navigationItems.map((item) => (
-                <NavigationMenuItem key={item.title}>
-                  <NavigationMenuLink
-                    href={item.href}
-                    className={cn(
-                      "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
-                    )}>
-                    <item.icon className="mr-2 h-4 w-4" />
-                    {item.title}
-                  </NavigationMenuLink>
-                </NavigationMenuItem>
-              ))}
-            </NavigationMenuList>
-          </NavigationMenu>
         </div>
 
         <div className="flex items-center gap-4">
@@ -211,16 +167,6 @@ export default function Header() {
                   <span>Home</span>
                 </Link>
 
-                {navigationItems.map((item) => (
-                  <Link
-                    key={item.title}
-                    href={item.href}
-                    className="flex items-center space-x-2">
-                    <item.icon className="h-4 w-4" />
-                    <span>{item.title}</span>
-                  </Link>
-                ))}
-
                 {isAuthenticated ? (
                   <>
                     <div className="border-t pt-4">

app/dashboard/page.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { FileText, Layout, Upload, BookOpen } from 'lucide-react';
+
+interface AppTile {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  href: string;
+  color: string;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+
+  const apps: AppTile[] = [
+    {
+      id: 'files',
+      title: 'Files',
+      description: 'Manage and organize your uploaded files',
+      icon: <FileText className="w-8 h-8" />,
+      href: '/files',
+      color: 'bg-blue-500'
+    },
+    {
+      id: 'layout-configurations',
+      title: 'Layout Configurations',
+      description: 'Create and manage layout configurations',
+      icon: <Layout className="w-8 h-8" />,
+      href: '/layout-configurations',
+      color: 'bg-green-500'
+    },
+    {
+      id: 'imports',
+      title: 'Imports',
+      description: 'Import and manage data from external sources',
+      icon: <Upload className="w-8 h-8" />,
+      href: '/imports',
+      color: 'bg-purple-500'
+    },
+    {
+      id: 'api-docs',
+      title: 'API Documentation',
+      description: 'Explore API endpoints and documentation',
+      icon: <BookOpen className="w-8 h-8" />,
+      href: '/api-docs',
+      color: 'bg-orange-500'
+    }
+  ];
+
+  const handleAppClick = (href: string) => {
+    router.push(href);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            Welcome to Vtorio Dashboard
+          </h1>
+          <p className="text-lg text-gray-600 dark:text-gray-300">
+            Select an application to get started
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+          {apps.map((app) => (
+            <Card
+              key={app.id}
+              className="group cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105 dark:bg-gray-800 dark:border-gray-700"
+              onClick={() => handleAppClick(app.href)}
+            >
+              <CardHeader className="text-center">
+                <div className={`${app.color} w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}>
+                  {app.icon}
+                </div>
+                <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
+                  {app.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-center text-gray-600 dark:text-gray-300">
+                  {app.description}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Click on any application to access its features
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,7 +1,12 @@
 import Image from "next/image";
 import Link from "next/link";
+import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
+import { LayoutGrid } from "lucide-react";
+
+export default async function Home() {
+  const { getUser } = getKindeServerSession();
+  const user = await getUser();
 
-export default function Home() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
@@ -32,6 +37,16 @@ export default function Home() {
             />
             Go to VixFlixOnline
           </Link>
+          
+          {user && (
+            <Link
+              className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+              href="/dashboard"
+            >
+              <LayoutGrid className="w-5 h-5 mr-2" />
+              Dashboard
+            </Link>
+          )}
         </div>
       </main>
     </div>