Jobs dashboard

client/src/App.jsx

@@ -22,6 +22,7 @@ import NotFound from './assets/components/subcomponents/NotFound';
 import ThemeContext from './assets/context/ThemeContext';
 import useAuth from './auth/useAuth';
 import { ProfileProvider } from './assets/context/ProfileContext';
+import JobsMain from './assets/components/Jobs/JobsMain';
 
 function App() {
 
@@ -57,6 +58,7 @@ function App() {
                 <Route path='/blogs' element={<Posts />} />
                 <Route path='/network' element={<Network />} />
                 <Route path='/tester' element={<TesterComponent />} />
+                <Route path='/jobs' element={<JobsMain />} />
               </Route>
             </Route>
           </Route>

client/src/assets/components/Jobs/JobDescriptions.jsx

@@ -0,0 +1,109 @@
+import React ,{ useState,useEffect } from "react";
+
+const dummyjob_desc = {
+    icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+    jobTitle: "Backend Developer",
+    companyName: "Google",
+    postedAt: "",
+    location: "Bangaluru , India (Onsite)",
+    tags: 'remote,fulltime,java,node,python,react,angular,remote,fulltime,java,node,python,react,angular,remote,fulltime,java,node,python,react,angular',
+    aboutJob: '',//suppose to be an html document
+    budgetRange: '',
+    postedBy: { //populated by user id suppose to be hr
+        name: '',
+        icon: ''
+    },
+    companyDetails: {
+        companyName: "Google",
+        noOfEmployeers: 300,
+        noOfFollowers: 9039,
+        type: "Software products",
+        descriptions: "Google LLC is an American multinational corporation and technology company focusing on online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, consumer electronics, and artificial intelligence."
+    }
+}
+const JobDescriptions = ({job}) => {
+    //detecting mobile or desktop to display the back button
+   // const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
+    const [back,setBack] = useState(false)
+    // React.useEffect(() => {
+    //     const handleResize = () => setIsMobile(window.innerWidth<768)
+    //     window.addEventListener("resize",handleResize);
+    //     handleResize();
+    //      if(isMobile) setBack(false)
+    //     return ()=>window.addEventListener("resize",handleResize)
+
+    // })
+    const BackButton=()=>{
+       return <button className="p-2 w-40 bg-primary text-white rounded-full md:hidden ">BACK</button>
+    }
+    if(!job) return <div className="w-full h-full flex items-center justify-center">Please select a job...</div>; 
+    return (
+        <div className="grid p-5 gap-y-6"> {/* Increased gap-y to 6 for better spacing */}
+            {/* {isMobile && back ? <BackButton/> : null} Show Back button only on mobile and if back is true */}
+            {/* Company icon and name */}
+            {/* <BackButton/> */}
+            <div className="top-details flex flex-row gap-2 items-center">
+                <img src={dummyjob_desc.icon} className="h-[40px] w-[40px]" />
+                <p className="m-0 font-bold">{dummyjob_desc.companyName}</p>
+            </div>
+
+            <div className="job-title">
+                <p className="font-bold font-roboto text-3xl m-0">{dummyjob_desc.jobTitle}</p>
+            </div>
+
+            <div className="loc-time">
+                <p className="m-0">{dummyjob_desc.location} - {dummyjob_desc.postedAt}</p>
+            </div>
+
+            {/* apply and save */}
+            <div className="btn-grp flex flex-row gap-2">
+                <button className="p-2 w-40 bg-primary text-white rounded-full">Apply</button>
+                <button className="p-2 w-40 bg-primary text-white rounded-full">Save</button>
+            </div>
+
+            <div className="pills">
+                <div className="flex flex-wrap gap-2"> {/* Changed to flex-wrap for better tag handling */}
+                    {dummyjob_desc.tags.split(",").map((x) => (
+                        <span className="bg-blue-100 text-white font-medium px-2.5 py-0.5 rounded-full dark:bg-white dark:text-black">{x}</span>
+                    ))}
+                </div>
+            </div>
+
+            <div className="about-section">
+                <p className="text-3xl font-semibold mb-4">About the Job</p> {/* Added mb-4 */}
+                <p className="text-lg m-0"> {/* Added m-0 */}
+                    {dummyjob_desc.jobDescription}
+                </p>
+            </div>
+
+            <div className="about-company">
+                {/* Heading */}
+                <p className="text-2xl font-semibold mb-4">About Company</p> {/* Added mb-4 */}
+
+                {/* Company Details Row */}
+                <div className="companydetails flex flex-row items-center justify-between w-full mb-4"> {/* Added mb-4 */}
+                    {/* Left: Icon + Company Name */}
+                    <div className="flex flex-row items-center space-x-4">
+                        <img
+                            src={dummyjob_desc.icon}
+                            alt="Company Icon"
+                            className="h-20 w-20 object-contain"
+                        />
+                        <p className="text-3xl m-0">{dummyjob_desc.companyDetails.companyName}</p>
+                    </div>
+
+                    {/* Right: Follow Button */}
+                    <button className="p-2 w-40 bg-primary text-white rounded-full">
+                        Follow
+                    </button>
+                </div>
+
+                <div className="about-company text-lg">
+                    <p className="m-0">{dummyjob_desc.companyDetails.descriptions}</p> {/* Added m-0 */}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default JobDescriptions;

client/src/assets/components/Jobs/JobList.jsx

@@ -0,0 +1,152 @@
+const jobs = [
+    {
+        _id: "93",
+        icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+        jobTitle: "Node.js Developer",
+        companyName: "Microsoft",
+        postedAt: "6/4/2025",
+        location: "Hyderabad, India (Hybrid)",
+    },
+    {
+        _id: "94",
+        icon: "",
+        jobTitle: "Senior Backend Engineer",
+        companyName: "Amazon",
+        postedAt: "6/4/2025",
+        location: "Chennai, India (Remote)",
+    },
+    {
+        _id: "95",
+        icon: "",
+        jobTitle: "Software Engineer - Backend",
+        companyName: "Flipkart",
+        postedAt: "6/4/2025",
+        location: "Bengaluru, India (Onsite)",
+    },
+    {
+        _id: "95",
+        icon: "",
+        jobTitle: "Backend Developer",
+        companyName: "Infosys",
+        postedAt: "6/4/2025",
+        location: "Pune, India (Hybrid)",
+    },
+    {
+        _id: "96",
+        icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+        jobTitle: "Backend Developer",
+        companyName: "Google",
+        postedAt: "",
+        location: "Bangaluru , India (Onsite)",
+    },
+    {
+        _id: "93",
+        icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+        jobTitle: "Node.js Developer",
+        companyName: "Microsoft",
+        postedAt: "6/4/2025",
+        location: "Hyderabad, India (Hybrid)",
+    },
+    {
+        _id: "94",
+        icon: "",
+        jobTitle: "Senior Backend Engineer",
+        companyName: "Amazon",
+        postedAt: "6/4/2025",
+        location: "Chennai, India (Remote)",
+    },
+    {
+        _id: "95",
+        icon: "",
+        jobTitle: "Software Engineer - Backend",
+        companyName: "Flipkart",
+        postedAt: "6/4/2025",
+        location: "Bengaluru, India (Onsite)",
+    },
+    {
+        _id: "95",
+        icon: "",
+        jobTitle: "Backend Developer",
+        companyName: "Infosys",
+        postedAt: "6/4/2025",
+        location: "Pune, India (Hybrid)",
+    },
+    {
+        _id: "96",
+        icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+        jobTitle: "Backend Developer",
+        companyName: "Google",
+        postedAt: "",
+        location: "Bangaluru , India (Onsite)",
+    },
+    {
+        _id: "93",
+        icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+        jobTitle: "Node.js Developer",
+        companyName: "Microsoft",
+        postedAt: "6/4/2025",
+        location: "Hyderabad, India (Hybrid)",
+    },
+    {
+        _id: "94",
+        icon: "",
+        jobTitle: "Senior Backend Engineer",
+        companyName: "Amazon",
+        postedAt: "6/4/2025",
+        location: "Chennai, India (Remote)",
+    },
+    {
+        _id: "95",
+        icon: "",
+        jobTitle: "Software Engineer - Backend",
+        companyName: "Flipkart",
+        postedAt: "6/4/2025",
+        location: "Bengaluru, India (Onsite)",
+    },
+    {
+        _id: "95",
+        icon: "",
+        jobTitle: "Backend Developer",
+        companyName: "Infosys",
+        postedAt: "6/4/2025",
+        location: "Pune, India (Hybrid)",
+    },
+    {
+        _id: "96",
+        icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000",
+        jobTitle: "Backend Developer",
+        companyName: "Google",
+        postedAt: "",
+        location: "Bangaluru , India (Onsite)",
+    }
+]
+
+
+const JobList = ({onJobSelect}) => {
+    return (
+        <div className="">
+            {/* List container */}
+            <ul className="space-y-2 bg-base-100">
+                {jobs.map((x) => (
+                    <li key={x._id} onClick={()=>onJobSelect(x)} className="flex gap-3 shadow-md p-2">
+                        <div className="left">
+                            <img
+                                src={x.icon}
+                                alt="Job icon"
+                                className="w-[60px] h-[60px]"
+                            />
+                        </div>
+                        <div className="rights flex flex-col">
+                            <span className="name font-semibold">{x.jobTitle}</span>
+                            <span className="time text-[12px]">{x.companyName}</span>
+                            <span className="time text-[12px]">{x.postedAt}</span>
+                            <span className="time text-[12px]">{x.location}</span>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default JobList;

client/src/assets/components/Jobs/JobsMain.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import JobDescriptions from "./JobDescriptions";
+import JobList from "./JobList";
+import { IoArrowBackOutline } from "react-icons/io5";
+
+const JobsMain = () => {
+  const [selectedJob, setSelectedJob] = useState(null);
+
+  return (
+    <div className="w-[95%] mx-auto mt-5 h-[500px]"> {/* <-- Add h-[720px] here */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-1 h-full">
+        {/* Job List: Hidden on mobile when a job is selected, visible otherwise */}
+        <div
+          className={`joblist bg-base-100 w-full md:col-span-4 rounded-md shadow-md p-4 overflow-y-auto h-full ${selectedJob ? "hidden md:block" : "block"
+            }`}
+        >
+          <JobList onJobSelect={setSelectedJob} />
+        </div>
+
+        {/* Job Description: Visible on mobile when a job is selected, always visible on larger screens */}
+        <div
+          className={`jobdesc bg-base-100 w-full md:col-span-8 rounded-md shadow-md p-4 overflow-y-auto h-full ${selectedJob ? "block" : "hidden md:block"
+            }`}
+        >
+          {selectedJob && (
+            <button
+              className="mb-4 text-blue-500 underline md:hidden flex items-center gap-2"
+              onClick={() => setSelectedJob(null)}
+            >
+              <IoArrowBackOutline /> back
+            </button>
+          )}
+          <JobDescriptions job={selectedJob} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JobsMain;

client/src/assets/components/layout/NavBar.jsx

@@ -70,7 +70,7 @@ const NavBar = ({ avatar, username }) => {
                     {/* <li><NavLink to='/tester' className="flex items-center"><span className="text-2xl text-primary"><HiNewspaper /></span>Tester</NavLink></li> */}
                     <li><NavLink to='/blogs' className="flex items-center"><span className="text-2xl text-primary"><HiNewspaper /></span>Blogs</NavLink></li>
                     <li><NavLink to='/network' className="flex items-center"><span className="text-2xl text-primary"><IoMdPeople /></span>Network</NavLink></li>
-                    <li><NavLink to='' className="flex items-center"><span className="text-2xl text-primary"><GiSuitcase /></span>Jobs</NavLink></li>
+                    <li><NavLink to='/jobs' className="flex items-center"><span className="text-2xl text-primary"><GiSuitcase /></span>Jobs</NavLink></li>
                 </ul>
             </div>