Created dymanic routing for the job and course page

src/app/dashboard/job-seeker/[id]/job-overview.tsx

@@ -13,33 +13,30 @@ import { IoBriefcaseOutline } from "react-icons/io5";
 import { useState } from "react"; 
 import ApplicationModal from "../components/ApplicationForm";
 import { useParams } from 'next/navigation';
-import { sampleJobs } from '../components/RecentTabBox';
+import { sampleJobs } from "../data";
+
 
 export default function JobSeekerOverview() {
 
   const params = useParams();
   const jobId = params.id as string;
   const [isModalOpen, setIsModalOpen] = useState(false); 
 
+  // If jobId exists, find that specific job, otherwise use the first job
+  const job = jobId 
+  ? sampleJobs.find(job => job.id === jobId) 
+  : sampleJobs[0];
+
+  // If no jobs available at all
+  if (!job) {
+  return <div>No jobs available</div>;
+  }
+
+
   const toggleModal = () => {
     setIsModalOpen((prev) => !prev);
   };
 
-  const jobDetails = {
-    id: jobId,
-    title: "Quality Assurance Manager",
-    company: "SkillNet Incorporated",
-    location: "Lagos, Nigeria",
-    workMode: "Remote", 
-    type: "Remote",
-    posted: "Posted 5 days ago",
-    salary: "250,000 - $300,000 per year",
-    jobType: "Full-time",
-    level: "Senior Level",
-    deadline: "Deadline: 21st January, 2025",
-    description: "" 
-  };
-
   return (
     <div className="max-w-[1256px] mx-auto px-4 sm:px-6  lg:px-10 py-8 flex gap-8">
       {/* Left Column - Job Details */}
@@ -53,10 +50,10 @@ export default function JobSeekerOverview() {
               {/* Company Info */}
               <div>
                 <h1 className="text-[#FCFCFC] font-[600] leading-[28.8px] text-[24px]">
-                  {jobDetails.title}
+                  {job.title}
                 </h1>
                 <p className="text-[#BBBBBB] font-[400] text-[16px] leading-[19.2px]">
-                  {jobDetails.company}
+                  {job.company}
                 </p>
               </div>
               {/* Apply Button */}
@@ -75,12 +72,12 @@ export default function JobSeekerOverview() {
             <div className="flex items-center gap-4 text-[14px] text-[#BBBBBB] font-[400] leading-[16.8px]">
               <span className="flex items-center gap-1">
                 <MapPin className="w-[16px] h-[16px] text-[#BBBBBB]" />
-                {jobDetails.location}
+                {job.location}
               </span>
               <span className="block w-[2px] h-[28px] bg-[#1D1D1C] rounded-[8px]" />
-              <span>{jobDetails.type}</span>
+              <span>{job.type}</span>
               <span className="block w-[2px] h-[28px] bg-[#1D1D1C] rounded-[8px]" />
-              <span>{jobDetails.posted}</span>
+              <span>{job.posted}</span>
             </div>
             {/* Bookmark Button */}
             <div className="flex items-center gap-2">
@@ -95,19 +92,19 @@ export default function JobSeekerOverview() {
           <div className="grid grid-cols-1 gap-2 text-sm mb-[24px] text-[#BBBBBB]">
             <div className="flex gap-4">
               <IoBriefcaseOutline className="w-5 h-5 text-[#696969]" />
-              <p>{jobDetails.jobType}</p>
+              <p>{job.jobType}</p>
             </div>
             <div className="flex gap-2">
               <Banknote className="w-5 h-5 text-[#696969]" />
-              <p>{jobDetails.salary}</p>
+              <p>{job.salary}</p>
             </div>
             <div className="flex gap-2">
               <BarChart className="w-5 h-5 text-[#696969]" />
-              <p>{jobDetails.level}</p>
+              <p>{job.level}</p>
             </div>
             <div className="flex gap-2">
               <Clock className="w-5 h-5 text-[#696969]" />
-              <p>{jobDetails.deadline}</p>
+              <p>{job.deadline}</p>
             </div>
           </div>
         </div>

src/app/dashboard/job-seeker/[id]/page.tsx

@@ -0,0 +1,5 @@
+import JobSeekerOverview from "./job-overview";
+
+export default function JobPage() {
+  return <JobSeekerOverview/>;
+}

src/app/dashboard/job-seeker/components/ApplicationTabs.tsx

@@ -1,14 +1,9 @@
 import React from "react";
 import AllFilters from "./SideAllFilters";
+import { sampleJobs, Job } from "../data";
 
-export interface Job {
-  title: string;
-  company: string;
-  location: string;
-  workMode: string;
-  type: string;
-  level: string;
-  postedTime: string;
+interface ApplicationTabProps {
+  onClick: (jobId: string) => void;
 }
 
 // Clock Icon Component
@@ -52,16 +47,23 @@ const LocationIcon = () => (
 );
 
 // Job Card Component
-const JobCard: React.FC<{ job: Job }> = ({ job }) => (
+const JobCard: React.FC<{ job: Job; onClick: (jobId: string) => void }> = ({ job, onClick  }) => (
   <div className="mb-4 p-5 bg-[#1D1D1C] w-[760px] rounded-lg shadow-md">
-    <div className="flex justify-between items-start mb-2">
+    <div className="flex justify-between items-start mb-2"
+    onClick={() => onClick(job.id)}
+    >
       <div>
         <h3 className="text-[24px] font-semibold text-white mb-2">
           {job.title}
         </h3>
         <p className="text-[#BBBBBB]">{job.company}</p>
       </div>
-      <button className="px-3 py-2 text-sm flex items-center space-x-1 bg-gray-700 text-white rounded bg-inherit border-[#696969] border hover:border-[#D0EFB1] hover:text-[#D0EFB1]">
+      <button className="px-3 py-2 text-sm flex items-center space-x-1 bg-gray-700 text-white rounded bg-inherit border-[#696969] border hover:border-[#D0EFB1] hover:text-[#D0EFB1]"
+       onClick={(e) => {
+        e.stopPropagation(); // Prevent triggering the parent div's onClick
+        onClick(job.id);
+      }}
+      >
         VIEW APPLICATION
       </button>
     </div>
@@ -92,43 +94,47 @@ const JobCard: React.FC<{ job: Job }> = ({ job }) => (
 );
 
 
-const ApplicationTab = () => {
-  const sampleJobs: Job[] = [
-    {
-      title: "Full Stack Developer",
-      company: "SkillNet Incorporated",
-      location: "Lagos, Nigeria",
-      workMode: "Hybrid",
-      type: "Full time",
-      level: "Entry Level",
-      postedTime: "12 hours ago",
-    },
-    {
-      title: "Full Stack Developer",
-      company: "SkillNet Incorporated",
-      location: "Lagos, Nigeria",
-      workMode: "Hybrid",
-      type: "Full time",
-      level: "Entry Level",
-      postedTime: "12 hours ago",
-    },
-    {
-      title: "Full Stack Developer",
-      company: "SkillNet Incorporated",
-      location: "Lagos, Nigeria",
-      workMode: "Hybrid",
-      type: "Full time",
-      level: "Entry Level",
-      postedTime: "12 hours ago",
-    },
-  ];
-
+const ApplicationTab: React.FC<ApplicationTabProps> = ({ onClick }) => {
+
+  // const sampleJobs: Job[] = [
+  //   {
+  //     title: "Full Stack Developer",
+  //     company: "SkillNet Incorporated",
+  //     location: "Lagos, Nigeria",
+  //     workMode: "Hybrid",
+  //     type: "Full time",
+  //     level: "Entry Level",
+  //     postedTime: "12 hours ago",
+  //   },
+  //   {
+  //     title: "Full Stack Developer",
+  //     company: "SkillNet Incorporated",
+  //     location: "Lagos, Nigeria",
+  //     workMode: "Hybrid",
+  //     type: "Full time",
+  //     level: "Entry Level",
+  //     postedTime: "12 hours ago",
+  //   },
+  //   {
+  //     title: "Full Stack Developer",
+  //     company: "SkillNet Incorporated",
+  //     location: "Lagos, Nigeria",
+  //     workMode: "Hybrid",
+  //     type: "Full time",
+  //     level: "Entry Level",
+  //     postedTime: "12 hours ago",
+  //   },
+  // ];
 
   return (
     <div className="mt-4 flex justify-between">
      <div>
       {sampleJobs.map((job, index) => (
-        <JobCard key={index} job={job} />
+         <JobCard 
+         key={index} 
+         job={job} 
+         onClick={onClick} // Pass down the onClick handler from props
+       />
       ))}
     </div>
     <AllFilters />

src/app/dashboard/job-seeker/components/RecentTab.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import RecentTabBox from "./RecentTabBox";
 import AllFilters from "./SideAllFilters";
-import { Job } from "./RecentTabBox";
+import { Job } from "@/app/dashboard/job-seeker/data";
 
 interface RecentTabProps {
   onSaveJob: (job: Job) => void;

src/app/dashboard/job-seeker/components/RecentTabBox.tsx

@@ -1,20 +1,21 @@
 "use client";
 
 import React from "react";
+import { sampleJobs, Job } from "../data";
 
 // This interface can be moved to a shared types file
-export interface Job {
-  id: string;
-  title: string;
-  company: string;
-  location: string;
-  workMode: string;
-  type: string;
-  level: string;
-  description: string;
-  deadline: string;
-  postedTime: string;
-}
+// export interface Job {
+//   id: string;
+//   title: string;
+//   company: string;
+//   location: string;
+//   workMode: string;
+//   type: string;
+//   level: string;
+//   description: string;
+//   deadline: string;
+//   postedTime: string;
+// }
 
 interface RecentTabBoxProps {
   onSaveJob: (job: Job) => void;
@@ -130,47 +131,47 @@ const JobCard: React.FC<{ job: Job; onSaveJob: (job: Job) => void; onJobClick: (
 );
 
 const RecentTabBox: React.FC<RecentTabBoxProps> = ({ onSaveJob, onJobClick }) => {
-  const sampleJobs: Job[] = [
-    {
-      id: '1',
-      title: "Full Stack Developer",
-      company: "SkillNet Incorporated",
-      location: "Lagos, Nigeria",
-      workMode: "Hybrid",
-      type: "Full time",
-      level: "Entry Level",
-      description:
-        "Looking for a FullStack Developer to design, deploy, and maintain web applications, manage servers, ensure seamless user experiences, and optimize performance. Drive innovation in delivering scalable and reliable digital solutions.",
-      deadline: "12th March, 2025",
-      postedTime: "12 hours ago",
-    },
-    {
-      id: '2',
-      title: "Full Stack Developer",
-      company: "SkillNet Incorporated",
-      location: "Lagos, Nigeria",
-      workMode: "Hybrid",
-      type: "Full time",
-      level: "Entry Level",
-      description:
-        "Looking for a FullStack Developer to design, deploy, and maintain web applications, manage servers, ensure seamless user experiences, and optimize performance. Drive innovation in delivering scalable and reliable digital solutions.",
-      deadline: "12th March, 2025",
-      postedTime: "12 hours ago",
-    },
-    {
-      id: '3',
-      title: "Full Stack Developer",
-      company: "SkillNet Incorporated",
-      location: "Lagos, Nigeria",
-      workMode: "Hybrid",
-      type: "Full time",
-      level: "Entry Level",
-      description:
-        "Looking for a FullStack Developer to design, deploy, and maintain web applications, manage servers, ensure seamless user experiences, and optimize performance. Drive innovation in delivering scalable and reliable digital solutions.",
-      deadline: "12th March, 2025",
-      postedTime: "12 hours ago",
-    },
-  ];
+  // const sampleJobs: Job[] = [
+  //   {
+  //     id: '1',
+  //     title: "Full Stack Developer",
+  //     company: "SkillNet Incorporated",
+  //     location: "Lagos, Nigeria",
+  //     workMode: "Hybrid",
+  //     type: "Full time",
+  //     level: "Entry Level",
+  //     description:
+  //       "Looking for a FullStack Developer to design, deploy, and maintain web applications, manage servers, ensure seamless user experiences, and optimize performance. Drive innovation in delivering scalable and reliable digital solutions.",
+  //     deadline: "12th March, 2025",
+  //     postedTime: "12 hours ago",
+  //   },
+  //   {
+  //     id: '2',
+  //     title: "Full Stack Developer",
+  //     company: "SkillNet Incorporated",
+  //     location: "Lagos, Nigeria",
+  //     workMode: "Hybrid",
+  //     type: "Full time",
+  //     level: "Entry Level",
+  //     description:
+  //       "Looking for a FullStack Developer to design, deploy, and maintain web applications, manage servers, ensure seamless user experiences, and optimize performance. Drive innovation in delivering scalable and reliable digital solutions.",
+  //     deadline: "12th March, 2025",
+  //     postedTime: "12 hours ago",
+  //   },
+  //   {
+  //     id: '3',
+  //     title: "Full Stack Developer",
+  //     company: "SkillNet Incorporated",
+  //     location: "Lagos, Nigeria",
+  //     workMode: "Hybrid",
+  //     type: "Full time",
+  //     level: "Entry Level",
+  //     description:
+  //       "Looking for a FullStack Developer to design, deploy, and maintain web applications, manage servers, ensure seamless user experiences, and optimize performance. Drive innovation in delivering scalable and reliable digital solutions.",
+  //     deadline: "12th March, 2025",
+  //     postedTime: "12 hours ago",
+  //   },
+  // ];
   return (
     <div>
       {sampleJobs.map((job, index) => (

src/app/dashboard/job-seeker/components/SavedTab.tsx

@@ -1,11 +1,12 @@
 // SavedTab.tsx
 
 import React from "react";
-import { Job } from "./RecentTabBox";
+import { Job } from "@/app/dashboard/job-seeker/data";
 import AllFilters from "./SideAllFilters";
 
 interface SavedTabProps {
   savedJobs: Job[];
+  onJobClick: (jobId: string) => void;
 }
 
 const ClockIcon = () => (
@@ -64,7 +65,7 @@ const SaveIconFilled = () => (
   </svg>
 );
 
-const SavedTab: React.FC<SavedTabProps> = ({ savedJobs }) => {
+const SavedTab: React.FC<SavedTabProps> = ({ savedJobs,  onJobClick}) => {
   return (
     <div className="mt-4 flex justify-between">
       <div>
@@ -75,6 +76,7 @@ const SavedTab: React.FC<SavedTabProps> = ({ savedJobs }) => {
             <div
               key={index}
               className="mb-6 p-4 bg-[#1D1D1C] w-[760px] rounded-lg"
+              onClick={() => onJobClick(job.id)}
             >
               <div className="flex justify-between items-start mb-2">
                 <div>