Refactor UI imports and update component paths

Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.

components/layout/home-navbar.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/common/button";
+import { LogIn } from "lucide-react";
+import { useState } from "react";
+
+export function HomeNavbar() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <header className="py-4 px-6 md:px-10 flex items-center justify-between border-b border-gray-800 bg-black text-white">
+      <div className="flex items-center gap-2">
+        <span className="font-bold text-2xl">Ember</span>
+      </div>
+      <nav className="hidden md:flex gap-6 items-center">
+        <Link href="#features" className="text-sm text-gray-400 hover:text-white transition-colors">
+          Features
+        </Link>
+        <Link href="#benefits" className="text-sm text-gray-400 hover:text-white transition-colors">
+          Benefits
+        </Link>
+        <Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">
+          <Button variant="ghost" className="text-gray-400 hover:text-white hover:bg-gray-900">
+            <LogIn className="h-4 w-4 mr-2" />
+            Log In
+          </Button>
+        </Link>
+        <Link href="/dashboard">
+          <Button className="bg-indigo-600 hover:bg-indigo-700 text-white border-0">Get Started</Button>
+        </Link>
+      </nav>
+      <div className="md:hidden">
+        <Button variant="ghost" size="icon" onClick={() => setMenuOpen(!menuOpen)} className="text-white hover:bg-gray-900">
+          <span className="sr-only">Toggle menu</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </Button>
+      </div>
+
+      {/* Mobile menu */}
+      {menuOpen && (
+        <div className="md:hidden absolute top-16 left-0 right-0 bg-[#1C1C1C] border-b border-gray-800 p-4 z-50">
+          <div className="flex flex-col gap-4">
+            <Link
+              href="#features"
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
+              onClick={() => setMenuOpen(false)}
+            >
+              Features
+            </Link>
+            <Link
+              href="#benefits"
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
+              onClick={() => setMenuOpen(false)}
+            >
+              Benefits
+            </Link>
+            <Link
+              href="/auth/login"
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
+              onClick={() => setMenuOpen(false)}
+            >
+              Log In
+            </Link>
+            <Link
+              href="/dashboard"
+              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
+              onClick={() => setMenuOpen(false)}
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}

components/layout/sidebar.tsx

@@ -5,12 +5,12 @@ import Link from "next/link"
 import { useRouter, usePathname } from "next/navigation"
 import { ShoppingCart, LogOut, Shield } from "lucide-react"
 import { NavItem } from "./nav-item"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/common/button"
 import { sidebarConfig } from "@/config/sidebar"
 import { adminSidebarConfig } from "@/config/admin-sidebar"
 import { logoutUser } from "@/lib/utils/auth"
 import { toast } from "sonner"
-import { useUser } from "@/hooks/useUser"
+import { useUser } from "@/lib/hooks/useUser"
 
 const Sidebar: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -119,3 +119,5 @@ const Sidebar: React.FC = () => {
 
 export default Sidebar
 
+
+

components/layout/theme-switcher.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/common/button";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Required for server-side rendering
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <Button
+      variant="ghost" 
+      size="icon"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="ml-2"
+    >
+      {theme === "dark" ? (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+      )}
+    </Button>
+  );
+} 

components/layout/theme-toggle.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = React.useState(false)
+  const { theme, setTheme } = useTheme()
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="relative p-2 hover:bg-gray-100 dark:hover:bg-[#1F1F23] rounded-full transition-colors"
+    >
+      <Sun className="h-5 w-5 text-gray-600 dark:text-gray-300 transition-all dark:hidden" />
+      <Moon className="h-5 w-5 text-gray-600 dark:text-gray-300 transition-all hidden dark:block" />
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  )
+}
+