Fix bugs and add enhancements

app/courses/[courseId]/layout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import Link from "next/link";
 import { getAuthUser } from "@/lib/auth";
+import CourseBreadcrumb from "@/components/navigation/CourseBreadCrumb";
 
 export default async function CourseLayout({
   children,
@@ -13,30 +14,20 @@ export default async function CourseLayout({
   const isAdmin = user?.organisation?.role === "admin";
   const { courseId } = await params;
 
-  const response = {
-    id: courseId,
-    name: "Sample Course",
-  };
   return (
     <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
-      <nav className="text-sm mb-4">
-        <Link href="/courses" className="text-purple-600 hover:underline">
-          Go to All Courses
-        </Link>
-        {/* <span className="mx-2">/</span>
-        <span className="font-medium">{response.name}</span> */}
-      </nav>
+      <CourseBreadcrumb courseId={courseId} />
 
       {isAdmin && (
         <div className="text-right mb-6 space-x-2">
           <Link
-            href={`/courses/${response.id}/edit`}
+            href={`/courses/${courseId}/edit`}
             className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
           >
             Edit Course Details
           </Link>
           <Link
-            href={`/courses/${response.id}/modules/new`}
+            href={`/courses/${courseId}/modules/new`}
             className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
           >
             Add new module

app/courses/[courseId]/modules/[moduleId]/page.tsx

@@ -10,10 +10,16 @@ export default async function ModulePage({
   const user = await getAuthUser();
   const isAdmin = user?.organisation?.role === "admin";
   const { courseId, moduleId } = await params;
+  const isAiEnabled = user?.organisation?.ai_enabled;
 
   return (
     <div className="max-w-3xl mx-auto bg-white p-6 rounded">
-      <ModuleDetail courseId={courseId} moduleId={moduleId} isAdmin={isAdmin} />
+      <ModuleDetail
+        courseId={courseId}
+        moduleId={moduleId}
+        isAdmin={isAdmin}
+        isAiEnabled={isAiEnabled}
+      />
     </div>
   );
 }

app/page.tsx

@@ -7,20 +7,54 @@ export default async function Home() {
   if (user) {
     redirect("/dashboard");
   }
+
   return (
     <div className="min-h-screen flex flex-col">
-      <div className="flex-1 flex flex-col items-center justify-center p-8 bg-white">
-        <h1 className="text-5xl font-bold text-purple-900 mb-6">SKILLSTACK</h1>
-        <div className="bg-purple-200 rounded-full px-6 py-2 mb-8">
-          <Link href="/auth" className="text-purple-800">
+      <div className="flex-1 flex flex-col items-center justify-center p-8">
+        <h1 className="text-5xl font-bold text-purple-900 mb-4">SKILLSTACK</h1>
+        <p className="text-xl text-gray-700 mb-6 text-center max-w-xl">
+          A corporate learning platform to organize courses for your team,
+          complete with AI chatbot support.
+        </p>
+        <div className="flex space-x-4 mb-10">
+          <Link
+            href="/auth"
+            className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg shadow-md"
+          >
             Get Started
           </Link>
         </div>
 
-        <div className="grid grid-cols-2 gap-4 w-full max-w-2xl">
-          <div className="bg-gray-300 h-32"></div>
-          <div className="bg-gray-300 h-48"></div>
+        <div
+          id="features"
+          className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl"
+        >
+          <div className="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm">
+            <h3 className="text-lg font-semibold mb-2">Course Management</h3>
+            <p className="text-center text-gray-600">
+              Create, organize, and assign courses tailored to your
+              organization’s needs.
+            </p>
+          </div>
+          <div className="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm">
+            <h3 className="text-lg font-semibold mb-2">Employee Learning</h3>
+            <p className="text-center text-gray-600">
+              Empower employees with structured learning paths and progress
+              tracking.
+            </p>
+          </div>
+          <div className="flex flex-col items-center p-6 bg-white rounded-xl shadow-sm">
+            <h3 className="text-lg font-semibold mb-2">AI Chatbot Support</h3>
+            <p className="text-center text-gray-600">
+              Get instant help and guidance through our built-in AI chatbot
+              assistant.
+            </p>
+          </div>
         </div>
+
+        <p className="mt-8 text-center text-gray-500">
+          More features coming soon!
+        </p>
       </div>
     </div>
   );

app/roadmap/page.tsx

@@ -12,6 +12,12 @@ export default function RoadmapPage() {
   const [selectedRoadmap, setSelectedRoadmap] = useState<Roadmap | null>(null);
   const [loading, setLoading] = useState(true);
 
+  let isAiEnabled = user?.organisation?.ai_enabled;
+
+  if (isAiEnabled === undefined) {
+    isAiEnabled = false;
+  }
+
   if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
@@ -137,6 +143,7 @@ export default function RoadmapPage() {
       onDelete={deleteRoadmap}
       onCreateNew={createNewRoadmap}
       onAutoGenerate={autoGenerateRoadmap}
+      isAiEnabled={isAiEnabled}
     />
   );
 }

components/SideNav.tsx

@@ -43,6 +43,8 @@ export default function SideNav() {
   const avatarUrl = `https://avatar.iran.liara.run/username?username=${firstName}+${lastName}&background=f4d9b2&color=FF9800`;
   const [imgSrc, setImgSrc] = useState(avatarUrl);
 
+  const isAiEnabled = user.organisation?.ai_enabled;
+
   return (
     <aside className="sticky top-0 w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between overflow-y-auto">
       <div>
@@ -57,40 +59,45 @@ export default function SideNav() {
         </Link>
 
         <nav className="mt-6 px-4 space-y-6">
-          {menuSections.map((section) => (
-            <div key={section.heading}>
-              <p className="text-xs uppercase text-gray-400 tracking-wide px-2 mb-2">
-                {section.heading}
-              </p>
-              <ul className="space-y-1">
-                {section.items.map(({ label, href, icon: Icon }) => {
-                  const isActive = path === href;
-                  return (
-                    <li key={href}>
-                      <Link
-                        href={href}
-                        className={`flex items-center px-2 py-2 rounded-md transition-colors
-                          ${
-                            isActive
-                              ? "bg-purple-100 text-purple-700"
-                              : "text-gray-700 hover:bg-gray-100 hover:text-purple-600"
-                          }`}
-                      >
-                        <Icon
-                          className={`h-5 w-5 flex-shrink-0 ${
-                            isActive ? "text-purple-600" : "text-gray-400"
-                          }`}
-                        />
-                        <span className="ml-3 text-sm font-medium">
-                          {label}
-                        </span>
-                      </Link>
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          ))}
+          {menuSections.map((section) => {
+            const filteredItems = section.items.filter(
+              (item) => item.label !== "Chat History" || isAiEnabled
+            );
+            return (
+              <div key={section.heading}>
+                <p className="text-xs uppercase text-gray-400 tracking-wide px-2 mb-2">
+                  {section.heading}
+                </p>
+                <ul className="space-y-1">
+                  {filteredItems.map(({ label, href, icon: Icon }) => {
+                    const isActive = path === href;
+                    return (
+                      <li key={href}>
+                        <Link
+                          href={href}
+                          className={`flex items-center px-2 py-2 rounded-md transition-colors
+                            ${
+                              isActive
+                                ? "bg-purple-100 text-purple-700"
+                                : "text-gray-700 hover:bg-gray-100 hover:text-purple-600"
+                            }`}
+                        >
+                          <Icon
+                            className={`h-5 w-5 flex-shrink-0 {
+                              isActive ? "text-purple-600" : "text-gray-400"
+                            }`}
+                          />
+                          <span className="ml-3 text-sm font-medium">
+                            {label}
+                          </span>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            );
+          })}
         </nav>
       </div>
 

components/auth/signup/SignupForm.tsx

@@ -22,6 +22,11 @@ export default function SignupForm() {
       setError("Passwords do not match");
       return;
     }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters long");
+      return;
+    }
     setLoading(true);
     try {
       const res = await fetch("/api/signup", {
@@ -119,6 +124,9 @@ export default function SignupForm() {
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
             required
           />
+          <p className="text-xs text-gray-500 mt-1">
+            Password must be at least 8 characters long
+          </p>
         </div>
 
         <div>