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,90 @@
+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 = () => {
+    return (
+        <div className="grid p-5 gap-y-6"> {/* Increased gap-y to 6 for better spacing */}
+    {/* Company icon and name */}
+    <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,180 @@
+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 = () => {
+    return (
+        // <div className="bg-base-100 w-[100%] mx-auto rounded-md shadow-md">
+        //         {/* List container */}
+        //         {jobs.map((x)=>(
+        //             <ul className="space-y-2 bg-base-100">  {/* Adds spacing between list items */}
+        //             {/* List item */}
+        //             <li className="flex gap-3 shadow-md p-2">
+        //                 <div className="left">
+        //                     <img
+        //                         src={x.icon}
+        //                         alt="https://img.icons8.com/?size=100&id=4pNZwCiLSsRv&format=png&color=000000"
+        //                         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>
+
+        //             {/* You can add more list items here */}
+        //         </ul>
+
+        //         ))}
+
+
+        // </div>
+        <div className="">
+            {/* List container */}
+            <ul className="space-y-2 bg-base-100">
+                {jobs.map((x) => (
+                    <li key={x.id} 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,23 @@
+import JobDescriptions from "./JobDescriptions";
+import JobList from "./JobList";
+
+const JobsMain = () => {
+    return (
+        <div className="w-[95%] mx-auto mt-5">
+            {/* Single grid container with 12 columns */}
+
+            {/* 4 left and 8 at right in  */}
+            <div className="grid grid-cols-12 gap-1">
+                <div className="joblist bg-base-100 w-[100%] mx-auto col-span-4 rounded-md shadow-md p-4 overflow-y-auto h-[720px]">
+                    <JobList/>
+                </div>
+                <div className=" bg-base-100 w-[100%] mx-auto rounded-md shadow-md jobdesc  col-span-8  p-4 overflow-y-auto h-[720px]">
+                {/* job title ,company icon ,job location , description , about us , responsibility , requiremnet , offers , location, message from hr */}
+                    <JobDescriptions/>
+                </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>