royal334 · royal334 · Aug 7, 2026 · Aug 5, 2026 · Aug 5, 2026 · Aug 5, 2026
diff --git a/dev-server.log b/dev-server.log
@@ -0,0 +1,19 @@
+
+> engiportal@0.1.0 dev
+> next dev
+
+⚠ Port 3000 is in use by an unknown process, using available port 3001 instead.
+▲ Next.js 16.2.12 (Turbopack)
+- Local:         http://localhost:3001
+- Network:       http://192.168.19.132:3001
+- Environments: .env
+✓ Ready in 3.0s
+⨯ Another next dev server is already running.
+
+- Local:        http://localhost:3000
+- PID:          18336
+- Dir:          C:\Users\DELL\Desktop\engiportal
+- Log:          .next\dev\logs\next-development.log
+
+Run taskkill /PID 18336 /F to stop it.
+[?25h
diff --git a/package.json b/package.json
@@ -30,9 +30,9 @@
     "posthog-js": "^1.408.2",
     "radix-ui": "^1.4.3",
     "react": "^19.2.3",
+    "react-joyride": "^3.2.0",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.72.0",
-    "react-joyride": "^3.2.0",
     "react-pdf": "^10.3.0",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",

diff --git a/src/app/dashboard/announcements/page.tsx b/src/app/dashboard/announcements/page.tsx
@@ -39,9 +39,9 @@ export default async function AnnouncementsPage() {
             Stay updated with department and university announcements
           </p>
         </div>
-        <Suspense fallback={<div className="flex items-center justify-center py-12"><p className="text-sm text-slate-600 dark:text-slate-400">Loading announcements...</p></div>}>
+        <div data-tour="page-announcements">
           <AnnouncementFeed />
-        </Suspense>
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/dashboard/cgpa/page.tsx b/src/app/dashboard/cgpa/page.tsx
@@ -66,7 +66,7 @@ export default async function CGPAPage() {
             <FileDown className="mr-2 h-4 w-4" />
             Export
           </Button> */}
-          <Link href="/dashboard/cgpa/add-semester">
+          <Link href="/dashboard/cgpa/add-semester" data-tour="page-cgpa">
             <Button>
               <Plus className="mr-2 h-4 w-4" />
               Add Semester

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -11,16 +11,18 @@ import { createClient } from "@/utils/supabase/server";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import DashboardToggle  from '@/components/dashboard/dashboard-toggle';
-import { Settings, User } from "lucide-react"
-import Link from "next/link"
+import { MobileHeaderMenu } from '@/components/dashboard/mobile-header-menu';
+import { OnboardingTour } from "@/components/tour/onboarding-tour";
+import { TourHelpButton } from "@/components/tour/tour-help-button";
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
 
       const supabase = createClient(await cookies());
 
     const { data: { user } } = await supabase.auth.getUser();
-    if (!user) {
-      redirect('/login');
+
+    if(!user){
+      redirect('/login')
     }
 
       // Get user profile to determine account type
@@ -66,19 +68,13 @@ export default async function Layout({ children }: { children: React.ReactNode }
           (<AppSidebar />)
           }
           <SidebarInset>
-            <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4">
-              <div className="flex gap-4 items-center">
-                <SidebarTrigger className="-ml-1" />
-                <DashboardToggle
-                  hasVendor={hasVendor}
-                  isVendorAccount={isVendorAccount}
-                />
-              </div>
-              <div>
-                <Link href="/dashboard/settings">
-                  <Settings className="h-4.5 w-4.5" aria-label="Settings" aria-hidden="true" />
-                </Link>
-              </div>
+            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+              <SidebarTrigger className="-ml-1" />
+              <DashboardToggle 
+                hasVendor={hasVendor} 
+                isVendorAccount={isVendorAccount} 
+              />
+              <TourHelpButton hasVendor={hasVendor} isVendorAccount={isVendorAccount} className="ml-auto size-8" />
             </header>
             <div className="flex flex-1 flex-col gap-4 overflow-x-hidden p-4 pt-0">
               {children}
@@ -91,22 +87,11 @@ export default async function Layout({ children }: { children: React.ReactNode }
       <div className="md:hidden flex flex-col min-h-screen">
         {/* Mobile top header with toggle */}
         <header className="fixed top-0 left-0 right-0 h-16 border-b bg-white dark:bg-slate-950 dark:border-slate-800 z-40 flex items-center px-4 gap-2">
-              <div className="flex justify-between items-center w-full">
-                <DashboardToggle
-                  hasVendor={hasVendor}
-                  isVendorAccount={isVendorAccount}
-                />
-                <div className="flex gap-4 items-center w-full justify-end ">
-                  <Link href="/dashboard/profile">
-                    <User className="h-4.5 w-4.5" aria-label="Profile" aria-hidden="true" />
-                  </Link>
-                  <Link href="/dashboard/settings">
-                    <Settings className="h-4.5 w-4.5" aria-label="Settings" aria-hidden="true" />
-                  </Link>
-                </div>
-              </div>
-
-
+          <DashboardToggle 
+            hasVendor={hasVendor} 
+            isVendorAccount={isVendorAccount} 
+          />
+          <MobileHeaderMenu hasVendor={hasVendor} isVendorAccount={isVendorAccount} />
         </header>
 
         {/* Mobile content area with proper spacing */}
@@ -121,6 +106,12 @@ export default async function Layout({ children }: { children: React.ReactNode }
           <MobileBottomNav isSuperAdmin={isSuperAdmin} />
         )}
       </div>
+
+      <OnboardingTour
+        isVendorView={showVendorSidebar}
+        hasToggle={hasVendor && !isVendorAccount}
+        userId={user.id}
+      />
     </>
   );
 }
diff --git a/src/app/dashboard/materials/page.tsx b/src/app/dashboard/materials/page.tsx
@@ -70,7 +70,7 @@ export default async function MaterialsPage({ searchParams }: PageProps) {
   let savedMaterialIds: string[] | undefined;
 
   if (showSavedOnly) {
-    const { data: savedRows } = await supabase
+    const { data: savedRows } = await supabaseAdmin
       .from("material_saves")
       .select("material_id")
       .eq("user_id", user.id);
@@ -79,15 +79,18 @@ export default async function MaterialsPage({ searchParams }: PageProps) {
       savedRows?.map((row: { material_id: string }) => row.material_id) ?? [];
   }
 
-  const materials = await getMaterials({
-    level,
-    semester,
-    type,
-    search,
-    limit: 50,
-    supabase: supabaseAdmin, // use admin client
-    ids: savedMaterialIds,
-  });
+  const materials =
+    showSavedOnly && !savedMaterialIds?.length
+      ? []
+      : await getMaterials({
+          level,
+          semester,
+          type,
+          search,
+          limit: 50,
+          supabase: supabaseAdmin, // use admin client
+          ids: savedMaterialIds,
+        });
 
   return (
     <div className="space-y-6">
@@ -150,7 +153,8 @@ export default async function MaterialsPage({ searchParams }: PageProps) {
           </div>
         }
       >
-        <MaterialsContent materials={materials} profile={profile} />
+
+          <MaterialsContent materials={materials} profile={profile} />
       </Suspense>
     </div>
   );

diff --git a/src/app/dashboard/notifications/page.tsx b/src/app/dashboard/notifications/page.tsx
@@ -129,7 +129,7 @@ export default function NotificationsPage() {
         </div>
 
         {/* Heading */}
-        <h1 className="text-4xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
+        <h1 className="text-4xl font-bold text-slate-900 tracking-tight dark:text-slate-100"  data-tour="page-notifications">
           Notifications
         </h1>
         <p className="mt-3 text-lg text-slate-500 dark:text-slate-400">

diff --git a/src/app/dashboard/profile/page.tsx b/src/app/dashboard/profile/page.tsx
@@ -76,18 +76,18 @@ export default async function ProfilePage() {
         </Card>
       )}
 
-      {/* Profile Form */}
-      <ProfileForm 
-        profile={profile} 
-        email={user.email!}
-        userId={user.id}
-      />
-
-      {/* Subscription Status */}
-      {/* <SubscriptionCard profile={profile} /> */}
-
-      {/* Security Settings */}
-      <SecurityCard email={user.email!} />
+      <div data-tour="page-profile">
+        {/* Profile Form */}
+        <ProfileForm
+          profile={profile}
+          email={user.email!}
+          userId={user.id}
+        />
+        {/* Subscription Status */}
+        {/* <SubscriptionCard profile={profile} /> */}
+        {/* Security Settings */}
+        <SecurityCard email={user.email!} />
+      </div>
     </div>
   );
 }
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
@@ -38,14 +38,14 @@ export default async function SettingsPage() {
       </div>
 
       <div>
-        <h1 className="text-3xl font-bold">Settings</h1>
+        <h1 className="text-3xl font-bold" >Settings</h1>
         <p className="text-slate-600 dark:text-slate-400">
           Manage your preferences and customize your experience
         </p>
       </div>
 
       {/* Settings Sections */}
-      <div className="space-y-6">
+      <div className="space-y-6" data-tour="page-settings">
         <AppearanceSettings />
 
         <ComingSoonOverlay>

diff --git a/src/app/dashboard/subscription/page.tsx b/src/app/dashboard/subscription/page.tsx
@@ -61,7 +61,7 @@ export default async function SubscriptionPage() {
       </div>
 
       {/* Current Plan */}
-      <Card>
+      <Card data-tour="page-subscription">
         <CardHeader>
           <CardTitle>Current Plan</CardTitle>
         </CardHeader>

diff --git a/src/app/dashboard/vendors/analytics/page.tsx b/src/app/dashboard/vendors/analytics/page.tsx
@@ -37,7 +37,9 @@ export default async function VendorAnalyticsPage() {
       </div>
 
       {/* Analytics Dashboard */}
-      <AnalyticsDashboard vendorId={vendor.id} tier={vendor.subscription_tier} />
+      <div  data-tour="page-analytics">
+        <AnalyticsDashboard vendorId={vendor.id} tier={vendor.subscription_tier} />
+      </div>
     </div>
   );
 }
diff --git a/src/app/dashboard/vendors/page.tsx b/src/app/dashboard/vendors/page.tsx
@@ -9,7 +9,7 @@ import { Store, Plus, Building,Edit } from "lucide-react";
 import Link from "next/link";
 import {
   getCachedVendors,
-  getCachedVendorSearch,
+  getVendorSearch,
   getCachedVendorCategories,
 } from "@/utils/cache";
 
@@ -48,9 +48,9 @@ export default async function VendorsPage({ searchParams }: PageProps) {
   // Categories are static reference data - cached for 3 days
   const categories = await getCachedVendorCategories();
 
-  // Feed cached 60s; searches (30s) get their own faster-revalidating entry
+  // Feed cached 60s; searches run fresh with the authenticated client (RLS)
   const vendors = paramaters.search
-    ? await getCachedVendorSearch({
+    ? await getVendorSearch({
         category: paramaters.category,
         search: paramaters.search,
       })
@@ -107,7 +107,7 @@ export default async function VendorsPage({ searchParams }: PageProps) {
           </Link>
         </Card>
       ) : (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3" data-tour="page-vendors">
           {vendors.map((vendor) => (
             <VendorCard key={vendor.id} vendor={vendor} />
           ))}

diff --git a/src/components/dashboard/DashboardQuickActions.tsx b/src/components/dashboard/DashboardQuickActions.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link';
 
 export function DashboardQuickActions() {
   return (
-    <Card>
+    <Card data-tour="student-actions">
       <CardHeader>
         <h2 className="text-xl font-semibold">Quick Actions</h2>
       </CardHeader>

diff --git a/src/components/dashboard/DashboardQuickStats.tsx b/src/components/dashboard/DashboardQuickStats.tsx
@@ -17,7 +17,7 @@ export function DashboardQuickStats({
   dailyDownloadCount,
 }: DashboardQuickStatsProps) {
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4" data-tour="student-stats">
       <Card className="border-primary-200 bg-primary-50 dark:bg-primary-950/30 dark:border-primary-900/30 transition-all hover:shadow-md">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">

diff --git a/src/components/dashboard/DashboardWelcomeHeader.tsx b/src/components/dashboard/DashboardWelcomeHeader.tsx
@@ -6,7 +6,7 @@ export function DashboardWelcomeHeader({
   const firstName = fullName?.split(" ")[0] || "Student";
 
   return (
-    <div className='mt-4'>
+    <div className='mt-4' data-tour="student-welcome">
       <h1 className="text-2xl md:text-3xl font-bold">Welcome back, {firstName}! 👋</h1>
       <p className="text-muted-foreground">
         Here's what's happening in your academic journey

diff --git a/src/components/dashboard/dashboard-toggle.tsx b/src/components/dashboard/dashboard-toggle.tsx
@@ -54,7 +54,7 @@ export default function DashboardToggle({
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-lg border bg-slate-50 dark:bg-slate-800 p-1">
+    <div className="flex items-center gap-2 rounded-lg border bg-slate-50 dark:bg-slate-800 p-1" data-tour="dashboard-toggle">
       <Button
         variant={!isStudent ? 'ghost' : 'default'}
         size="sm"

diff --git a/src/components/dashboard/mobile-bottom-nav.tsx b/src/components/dashboard/mobile-bottom-nav.tsx
@@ -9,8 +9,6 @@ import {
   BookOpen,
   LayoutDashboard,
   Bell,
-  User,
-  Settings,
   Upload,
   LogOut,
   Store, 
@@ -89,7 +87,7 @@ export function MobileBottomNav({ isSuperAdmin = false }: MobileBottomNavProps)
 
   return (
     <>
-      <nav className="fixed bottom-0 left-0 right-0 border-t bg-white dark:bg-slate-950 dark:border-slate-800 z-50">
+      <nav data-tour="mobile-nav" className="fixed bottom-0 left-0 right-0 border-t bg-white dark:bg-slate-950 dark:border-slate-800 z-50">
         <div className="flex items-center justify-between gap-1 h-16 sm:h-18 max-w-screen-xl mx-auto px-1.5">
           {navItems.map(({ href, icon: Icon, label }) => (
             <Link