From 937574b336bc272891c083ea9e38d600f1f33e8c Mon Sep 17 00:00:00 2001
From: Raihanullah Shamsi <73234279+Rehan959@users.noreply.github.com>
Date: Wed, 13 May 2026 23:51:02 +0530
Subject: [PATCH 1/2] first attempt

---
 .../src/app/(main)/sheet/[moduleId]/page.tsx  |  8 +++
 .../components/sheet/SheetModuleHeader.tsx    | 57 ++++++++++++++++---
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/(main)/sheet/[moduleId]/page.tsx b/apps/web/src/app/(main)/sheet/[moduleId]/page.tsx
index 8d1704b0..14757d39 100644
--- a/apps/web/src/app/(main)/sheet/[moduleId]/page.tsx
+++ b/apps/web/src/app/(main)/sheet/[moduleId]/page.tsx
@@ -17,6 +17,12 @@ 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">
@@ -24,6 +30,8 @@ export default async function SheetModulePage({ params }: PageProps) {
           <SheetModuleHeader
             moduleName={sheetModule.name}
             docContent={sheetModule.docContent}
+            currentModuleId={moduleId}
+            modules={modulesInfo}
           />
           <article>
             <header className="mb-8">
diff --git a/apps/web/src/components/sheet/SheetModuleHeader.tsx b/apps/web/src/components/sheet/SheetModuleHeader.tsx
index 87552fd4..4a30a252 100644
--- a/apps/web/src/components/sheet/SheetModuleHeader.tsx
+++ b/apps/web/src/components/sheet/SheetModuleHeader.tsx
@@ -2,20 +2,50 @@
 
 import { useState } 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 = (() => {
+    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];
+  })();
+
   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 && (

From 0c90f759dbb5c119d972fc6cdf0c122a7c0c591f Mon Sep 17 00:00:00 2001
From: Raihanullah Shamsi <73234279+Rehan959@users.noreply.github.com>
Date: Thu, 14 May 2026 06:03:11 +0530
Subject: [PATCH 2/2] Added use memo

---
 apps/web/src/components/sheet/SheetModuleHeader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/sheet/SheetModuleHeader.tsx b/apps/web/src/components/sheet/SheetModuleHeader.tsx
index 4a30a252..ffb96e97 100644
--- a/apps/web/src/components/sheet/SheetModuleHeader.tsx
+++ b/apps/web/src/components/sheet/SheetModuleHeader.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import Link from "next/link";
 import { ArrowLeft, ArrowRight, Download, Share2, Check } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -26,7 +26,7 @@ export function SheetModuleHeader({
   const [copied, setCopied] = useState(false);
 
   // Compute next module
-  const nextModule = (() => {
+  const nextModule = useMemo(() => {
     if (!currentModuleId || modules.length === 0) return null;
 
     const sortedModules = [...modules].sort((a, b) => {
@@ -44,7 +44,7 @@ export function SheetModuleHeader({
     }
 
     return sortedModules[currentIndex + 1];
-  })();
+  }, [currentModuleId, modules]);
 
   const handleShare = async () => {
     try {