feat: Added an next button in the sheet module page

apps/web/src/app/(main)/sheet/[moduleId]/page.tsx

@@ -17,13 +17,21 @@ export default async function SheetModulePage({ params }: PageProps) {
     notFound();
   }
 
+  // Create module info for navigation (without docContent)
+  const modulesInfo = sheetModules.map((m) => ({
+    id: m.id,
+    name: m.name,
+  }));
+
   return (
     <>
       <div className="min-h-screen bg-surface-primary">
         <div className="max-w-4xl mx-auto px-4 py-8 md:px-8">
           <SheetModuleHeader
             moduleName={sheetModule.name}
             docContent={sheetModule.docContent}
+            currentModuleId={moduleId}
+            modules={modulesInfo}
           />
           <article>
             <header className="mb-8">

apps/web/src/components/sheet/SheetModuleHeader.tsx

@@ -1,21 +1,51 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import Link from "next/link";
-import { ArrowLeft, Download, Share2, Check } from "lucide-react";
+import { ArrowLeft, ArrowRight, Download, Share2, Check } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 
+interface ModuleInfo {
+  id: string;
+  name: string;
+}
+
 interface SheetModuleHeaderProps {
   moduleName: string;
   docContent: string;
+  currentModuleId?: string;
+  modules?: ModuleInfo[];
 }
 
 export function SheetModuleHeader({
   moduleName,
   docContent,
+  currentModuleId,
+  modules = [],
 }: SheetModuleHeaderProps) {
   const [copied, setCopied] = useState(false);
 
+  // Compute next module
+  const nextModule = useMemo(() => {
+    if (!currentModuleId || modules.length === 0) return null;
+
+    const sortedModules = [...modules].sort((a, b) => {
+      const aNum = parseInt(a.id.replace("module-", "")) || 0;
+      const bNum = parseInt(b.id.replace("module-", "")) || 0;
+      return aNum - bNum;
+    });
+
+    const currentIndex = sortedModules.findIndex(
+      (m) => m.id === currentModuleId
+    );
+
+    if (currentIndex === -1 || currentIndex >= sortedModules.length - 1) {
+      return null;
+    }
+
+    return sortedModules[currentIndex + 1];
+  }, [currentModuleId, modules]);
+
   const handleShare = async () => {
     try {
       await navigator.clipboard.writeText(window.location.href);
@@ -110,13 +140,24 @@ export function SheetModuleHeader({
 
   return (
     <div className="flex items-center justify-between mb-8">
-      <Link
-        href="/dashboard/sheet"
-        className="inline-flex items-center gap-2 text-brand-purple-light hover:text-brand-purple transition-colors text-sm font-medium"
-      >
-        <ArrowLeft className="w-4 h-4" />
-        Back to Sheet
-      </Link>
+      <div className="flex items-center gap-4">
+        <Link
+          href="/dashboard/sheet"
+          className="inline-flex items-center gap-2 text-brand-purple-light hover:text-brand-purple transition-colors text-sm font-medium"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Sheet
+        </Link>
+        {nextModule && (
+          <Link
+            href={`/sheet/${nextModule.id}`}
+            className="inline-flex items-center gap-2 text-brand-purple-light hover:text-brand-purple transition-colors text-sm font-medium"
+          >
+            Next: {nextModule.name}
+            <ArrowRight className="w-4 h-4" />
+          </Link>
+        )}
+      </div>
 
       <div className="flex items-center gap-2">
         {copied && (