Merge pull request #5 from Learnathon-By-Geeky-Solutions/ismail

post related ui components created

Author: CodeWithIsmail

frontend/src/components/LatestPosts.jsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import PostCard from './PostCard'; // Assuming PostCard is imported from your code
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+const LatestJobPosts = () => {
+  const [latestJobs, setLatestJobs] = useState([]);
+  const {user} = useAuth();
+  // Define animation variants
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.2, delayChildren: 0.4 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: 'easeOut' } }
+  };
+  const userType = user?.userType;
+
+
+  useEffect(() => {
+    const fetchLatestJobs = async () => {
+      try {
+        const response = await fetch('http://localhost:3500/post/getAllPosts');
+        const data = await response.json();
+        let filteredData = data;
+        
+        // If current user is a Company, filter to show only their own job posts
+        if (userType === 'Company') {
+          filteredData = data.filter(job => job.user.name === user.name);
+        }
+        const latest = filteredData.sort((a,b)=>new Date(b.createdAt)-new Date(a.createdAt)).slice(0,6);
+        if (response.ok) {
+          setLatestJobs(latest);
+        } else {
+          console.error('Error fetching latest job posts:', data.error);
+        }
+      } catch (error) {
+        console.error('Error fetching job posts:', error);
+      }
+    };
+
+    fetchLatestJobs();
+  }, [user]);
+
+  return (
+    <section className="container mx-auto py-12">
+      <motion.h2
+        className="text-3xl font-semibold text-center mb-4"
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: 'easeOut' }}
+      >
+        Latest Job Posts
+      </motion.h2>
+
+      {/* Stunning HR line */}
+      <motion.hr
+        initial={{ width: "0%" }}
+        animate={{ width: "19%" }}
+        transition={{ duration: 1, ease: "easeInOut" }}
+        className="border-t-2 border-purple-600 mx-auto mb-8"
+      />
+
+      <motion.div
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        {latestJobs.length > 0 ? (
+          latestJobs.map((job) => (
+            <motion.div
+              key={job.id}
+              variants={itemVariants}
+            >
+              <PostCard
+                title={job.title}
+                location={job.location}
+                position={job.position}
+                companyName={job.user.name}
+                salaryRange={job.salary}
+                experience={job.experience}
+                skills={job.requiredSkills.map((skill) => skill.skill.name).join(', ')}
+                jobPostId={job.id}
+                deadline={job.deadline}
+              />
+            </motion.div>
+          ))
+        ) : (
+          <p className="text-center text-gray-500">No latest job posts available.</p>
+        )}
+      </motion.div>
+
+      <motion.div
+        className="text-center mt-12"
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
+      >
+        <Link to="/posts" className="bg-[rgb(97,27,248)] text-white py-3 px-6 rounded-lg hover:bg-[rgb(62,7,181)] transition-colors">
+          See More
+        </Link>
+      </motion.div>
+    </section>
+  );
+};
+
+export default LatestJobPosts;

frontend/src/components/OfferCard.jsx

@@ -0,0 +1,164 @@
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import useConversation from '../zustand/useConversation';
+import { useState } from 'react';
+import { 
+  Download, 
+  CheckCircle, 
+  XCircle, 
+  Clock, 
+  Building, 
+  User, 
+  FileText 
+} from 'lucide-react';
+
+const OfferCard = ({ offer, newStatus }) => {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [status, setStatus] = useState(offer.status);
+  const cvPath = offer.offerLetterPath.split("/").pop();
+  console.log(offer)
+  const handleStatusChange = async (newStatus) => {
+    try {
+      // First, update the status of the offer
+      const res = await fetch(`http://localhost:3500/offer/updateStatus/${offer.offerId}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ status: newStatus })
+      });
+
+      if (res.ok) {
+        setStatus(newStatus);
+
+        // If status is "Accepted", call the hire API to create a hiring record
+        if (newStatus === 'Accepted') {
+          const hireRes = await fetch('http://localhost:3500/hiring/hire', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              jobSeekerId: offer.jobSeekerId, // assuming `user.id` is the job seeker ID
+              companyId: offer.companyId, // assuming `offer.company.id` is the company ID
+            }),
+          });
+
+          if (!hireRes.ok) {
+            console.error("Failed to create hiring record");
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Failed to update status", error);
+    }
+  };
+
+  const getStatusDetails = (currentStatus) => {
+    switch (currentStatus) {
+      case 'Pending':
+        return {
+          icon: <Clock className="w-5 h-5 text-amber-500" />,
+          bgColor: 'bg-amber-50',
+          textColor: 'text-amber-600'
+        };
+      case 'Accepted':
+        return {
+          icon: <CheckCircle className="w-5 h-5 text-emerald-500" />,
+          bgColor: 'bg-emerald-50',
+          textColor: 'text-emerald-600'
+        };
+      case 'Rejected':
+        return {
+          icon: <XCircle className="w-5 h-5 text-rose-500" />,
+          bgColor: 'bg-rose-50',
+          textColor: 'text-rose-600'
+        };
+      default:
+        return {
+          icon: null,
+          bgColor: 'bg-gray-50',
+          textColor: 'text-gray-600'
+        };
+    }
+  };
+
+  const statusDetails = getStatusDetails(status);
+
+  return (
+    <div className="bg-white rounded-3xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-violet-100 to-indigo-100 text-gray-800 p-6">
+        <div className="flex justify-between items-start">
+          <div className="flex items-center space-x-4">
+            <Building className="w-8 h-8 text-violet-500" />
+            <div>
+              <h4 className="text-2xl font-bold mb-1 tracking-wide">{offer.company.name}</h4>
+              <div className="flex items-center space-x-2 text-sm text-gray-600">
+                <User className="w-4 h-4" />
+                <span>{offer.application.jobPost.position}</span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center space-x-2">
+            {statusDetails.icon}
+            <span className={`px-3 py-1 rounded-full text-xs font-medium ${statusDetails.bgColor} ${statusDetails.textColor}`}>
+              {status}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Card Body */}
+      <div className="p-6">
+        <div className="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4">
+          {/* Download Offer Letter Button */}
+          <a
+            href={`http://localhost:3500/apply/download/${cvPath}`}
+            download
+            className="
+              w-full sm:w-auto flex items-center justify-center 
+              px-6 py-3 
+              bg-violet-100 
+              text-violet-700 
+              rounded-full 
+              hover:bg-violet-200 
+              transition duration-300 
+              space-x-2 
+              group
+            "
+          >
+            <FileText className="w-5 h-5" />
+            <span>Download Offer Letter</span>
+          </a>
+
+          {/* Status Change Dropdown for Job Seeker */}
+          {user.userType === 'JobSeeker' && (
+            <select
+              className="
+                w-full sm:w-auto
+                px-6 py-3 
+                bg-violet-100 
+                text-violet-700 
+                rounded-full 
+                focus:outline-none 
+                focus:ring-2 
+                focus:ring-offset-2 
+                focus:ring-violet-300
+              "
+              value={status}
+              onChange={(e) => handleStatusChange(e.target.value)}
+            >
+              <option value="Pending">Pending</option>
+              <option value="Accepted">Accepted</option>
+              <option value="Rejected">Rejected</option>
+            </select>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OfferCard;