Yes! Yes! I do

apps/student/app/(main)/jobs/page.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card"
 import { Button } from "@workspace/ui/components/button"
 import { Badge } from "@workspace/ui/components/badge"
@@ -19,33 +22,41 @@ import {
   Users,
   Star,
   CheckCircle,
-  ExternalLink
+  ExternalLink,
+  Loader2,
+  AlertCircle
 } from "lucide-react"
-import { db, jobs, companies } from "@workspace/db"
-import { eq } from "drizzle-orm"
-import JobApplicationModal from "../../components/job-application-modal"
+import { getAvailableJobs } from "../actions"
+import JobApplicationModal from "../../../components/job-application-modal"
 
-async function getJobsData() {
-  try {
-    const availableJobs = await db.query.jobs.findMany({
-      where: eq(jobs.active, true),
-      with: {
-        company: true
-      }
-    });
-
-    return availableJobs;
-  } catch (error) {
-    console.error("Error fetching jobs:", error);
-    return [];
-  }
+interface Job {
+  id: number;
+  title: string;
+  company: {
+    name: string;
+    email: string;
+  };
+  location: string;
+  salary: string;
+  description: string;
+  applicationDeadline: Date;
+  minCGPA: number;
+  active: boolean;
+  link?: string;
 }
 
-export default async function JobsPage() {
-  const jobs = await getJobsData();
+export default function JobsPage() {
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [filteredJobs, setFilteredJobs] = useState<Job[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [locationFilter, setLocationFilter] = useState('all');
+  const [jobTypeFilter, setJobTypeFilter] = useState('all');
+  const [showLoadMore, setShowLoadMore] = useState(false);
 
   // Mock data for demonstration
-  const mockJobs = [
+  const mockJobs: Job[] = [
     {
       id: 1,
       title: "Software Engineer Intern",
@@ -138,7 +149,94 @@ export default async function JobsPage() {
     }
   ];
 
-  const allJobs = [...jobs, ...mockJobs];
+  useEffect(() => {
+    loadJobs();
+  }, []);
+
+  const loadJobs = async () => {
+    try {
+      const result = await getAvailableJobs();
+      if (result.success && result.jobs) {
+        setJobs(result.jobs as any);
+        setFilteredJobs(result.jobs as any);
+      } else {
+        setJobs(mockJobs);
+        setFilteredJobs(mockJobs);
+        setError(result.error || 'Using demo data');
+      }
+    } catch (err) {
+      setJobs(mockJobs);
+      setFilteredJobs(mockJobs);
+      setError('Failed to load jobs, using demo data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    filterJobs();
+  }, [jobs, searchTerm, locationFilter, jobTypeFilter]);
+
+  const filterJobs = () => {
+    let filtered = [...jobs];
+
+    // Search filter
+    if (searchTerm) {
+      filtered = filtered.filter(job => 
+        job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        job.company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        job.description.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Location filter
+    if (locationFilter && locationFilter !== 'all') {
+      filtered = filtered.filter(job => 
+        job.location.toLowerCase().includes(locationFilter.toLowerCase())
+      );
+    }
+
+    // Job type filter (simplified - could be enhanced with job type field)
+    if (jobTypeFilter && jobTypeFilter !== 'all') {
+      filtered = filtered.filter(job => 
+        job.title.toLowerCase().includes(jobTypeFilter.toLowerCase())
+      );
+    }
+
+    setFilteredJobs(filtered);
+    setShowLoadMore(filtered.length > 6);
+  };
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+  };
+
+  const handleLocationFilter = (value: string) => {
+    setLocationFilter(value);
+  };
+
+  const handleJobTypeFilter = (value: string) => {
+    setJobTypeFilter(value);
+  };
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setLocationFilter('all');
+    setJobTypeFilter('all');
+  };
+
+  const displayedJobs = filteredJobs.slice(0, showLoadMore ? 6 : filteredJobs.length);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 flex items-center justify-center">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 animate-spin text-blue-600 mx-auto mb-4" />
+          <p className="text-gray-600">Loading jobs...</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
@@ -147,6 +245,12 @@ export default async function JobsPage() {
         <div className="mb-8">
           <h1 className="text-4xl font-bold text-gray-900 mb-2">Browse Jobs</h1>
           <p className="text-xl text-gray-600">Find the perfect opportunity that matches your skills and aspirations</p>
+          {error && (
+            <div className="mt-4 p-3 bg-yellow-100 text-yellow-700 rounded-lg">
+              <AlertCircle className="w-4 h-4 inline mr-2" />
+              {error}
+            </div>
+          )}
         </div>
 
         {/* Search and Filter Section */}
@@ -159,38 +263,53 @@ export default async function JobsPage() {
                   <Input 
                     placeholder="Search jobs by title, company, or skills..." 
                     className="pl-10"
+                    value={searchTerm}
+                    onChange={(e) => handleSearch(e.target.value)}
                   />
                 </div>
               </div>
               <div>
-                <Select>
+                <Select value={locationFilter} onValueChange={handleLocationFilter}>
                   <SelectTrigger>
                     <SelectValue placeholder="Location" />
                   </SelectTrigger>
                   <SelectContent>
+                    <SelectItem value="all">All Locations</SelectItem>
                     <SelectItem value="remote">Remote</SelectItem>
-                    <SelectItem value="san-francisco">San Francisco</SelectItem>
-                    <SelectItem value="new-york">New York</SelectItem>
+                    <SelectItem value="san francisco">San Francisco</SelectItem>
+                    <SelectItem value="new york">New York</SelectItem>
                     <SelectItem value="seattle">Seattle</SelectItem>
                     <SelectItem value="austin">Austin</SelectItem>
-                    <SelectItem value="los-angeles">Los Angeles</SelectItem>
+                    <SelectItem value="los angeles">Los Angeles</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
               <div>
-                <Select>
+                <Select value={jobTypeFilter} onValueChange={handleJobTypeFilter}>
                   <SelectTrigger>
                     <SelectValue placeholder="Job Type" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="internship">Internship</SelectItem>
-                    <SelectItem value="full-time">Full Time</SelectItem>
-                    <SelectItem value="part-time">Part Time</SelectItem>
-                    <SelectItem value="contract">Contract</SelectItem>
+                    <SelectItem value="all">All Types</SelectItem>
+                    <SelectItem value="intern">Internship</SelectItem>
+                    <SelectItem value="engineer">Engineering</SelectItem>
+                    <SelectItem value="analyst">Analyst</SelectItem>
+                    <SelectItem value="designer">Design</SelectItem>
+                    <SelectItem value="manager">Management</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
             </div>
+            {(searchTerm || (locationFilter && locationFilter !== 'all') || (jobTypeFilter && jobTypeFilter !== 'all')) && (
+              <div className="mt-4 flex items-center gap-2">
+                <Button variant="outline" size="sm" onClick={clearFilters}>
+                  Clear Filters
+                </Button>
+                <span className="text-sm text-gray-500">
+                  {filteredJobs.length} of {jobs.length} jobs
+                </span>
+              </div>
+            )}
           </CardContent>
         </Card>
 
@@ -201,7 +320,7 @@ export default async function JobsPage() {
               <div className="flex items-center justify-between">
                 <div>
                   <p className="text-sm font-medium text-gray-600">Total Jobs</p>
-                  <p className="text-3xl font-bold text-gray-800">{allJobs.length}</p>
+                  <p className="text-3xl font-bold text-gray-800">{jobs.length}</p>
                 </div>
                 <Briefcase className="w-8 h-8 text-blue-600" />
               </div>
@@ -214,7 +333,7 @@ export default async function JobsPage() {
                 <div>
                   <p className="text-sm font-medium text-gray-600">Active Companies</p>
                   <p className="text-3xl font-bold text-gray-800">
-                    {new Set(allJobs.map(job => job.company.name)).size}
+                    {new Set(jobs.map(job => job.company.name)).size}
                   </p>
                 </div>
                 <Building2 className="w-8 h-8 text-green-600" />
@@ -228,7 +347,7 @@ export default async function JobsPage() {
                 <div>
                   <p className="text-sm font-medium text-gray-600">Remote Jobs</p>
                   <p className="text-3xl font-bold text-gray-800">
-                    {allJobs.filter(job => job.location.toLowerCase().includes('remote')).length}
+                    {jobs.filter(job => job.location.toLowerCase().includes('remote')).length}
                   </p>
                 </div>
                 <Users className="w-8 h-8 text-purple-600" />
@@ -251,7 +370,7 @@ export default async function JobsPage() {
 
         {/* Jobs Grid */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {allJobs.map((job) => (
+          {displayedJobs.map((job) => (
             <Card key={job.id} className="group hover:shadow-lg transition-all duration-300 border border-gray-200 bg-white">
               <CardContent className="p-6">
                 <div className="flex items-start justify-between mb-4">
@@ -263,8 +382,8 @@ export default async function JobsPage() {
                       <h3 className="text-lg font-semibold text-gray-900 mb-1 group-hover:text-blue-600 transition-colors">
                         {job.title}
                       </h3>
-                      <p className="text-blue-600 font-medium mb-2">{job.company.name}</p>
-                      <div className="flex items-center gap-4 text-sm text-gray-500">
+                      <p className="text-blue-600 font-medium">{job.company.name}</p>
+                      <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
                         <span className="flex items-center gap-1">
                           <MapPin className="w-4 h-4" />
                           {job.location}
@@ -300,23 +419,23 @@ export default async function JobsPage() {
                   </div>
                 </div>
 
-                                  <div className="flex items-center justify-between">
-                    <div className="flex gap-2">
-                      <JobApplicationModal 
-                        job={job}
-                        studentId={1} // Mock student ID - in real app this would come from auth
-                        resumes={[
-                          { id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" },
-                          { id: 2, title: "Resume_Updated.pdf", link: "/resumes/resume_updated.pdf" }
-                        ]}
-                      />
-                      {job.link && (
-                        <Button size="sm" variant="outline">
-                          <ExternalLink className="w-4 h-4 mr-2" />
-                          View Details
-                        </Button>
-                      )}
-                    </div>
+                <div className="flex items-center justify-between">
+                  <div className="flex gap-2">
+                    <JobApplicationModal 
+                      job={job}
+                      studentId={1} // Mock student ID - in real app this would come from auth
+                      resumes={[
+                        { id: 1, title: "Resume_v2.pdf", link: "/resumes/resume_v2.pdf" },
+                        { id: 2, title: "Resume_Updated.pdf", link: "/resumes/resume_updated.pdf" }
+                      ]}
+                    />
+                    {job.link && (
+                      <Button size="sm" variant="outline">
+                        <ExternalLink className="w-4 h-4 mr-2" />
+                        View Details
+                      </Button>
+                    )}
+                  </div>
                   <div className="flex gap-2">
                     <Button variant="ghost" size="sm">
                       <Eye className="w-4 h-4" />
@@ -332,21 +451,23 @@ export default async function JobsPage() {
         </div>
 
         {/* Load More */}
-        <div className="text-center mt-12">
-          <Button size="lg" variant="outline" className="px-8 py-3">
-            Load More Jobs
-            <ArrowRight className="w-5 h-5 ml-2" />
-          </Button>
-        </div>
+        {showLoadMore && (
+          <div className="text-center mt-12">
+            <Button size="lg" variant="outline" className="px-8 py-3">
+              Load More Jobs
+              <ArrowRight className="w-5 h-5 ml-2" />
+            </Button>
+          </div>
+        )}
 
         {/* Empty State */}
-        {allJobs.length === 0 && (
+        {filteredJobs.length === 0 && (
           <Card className="bg-white shadow-sm">
             <CardContent className="p-12 text-center">
               <Briefcase className="w-16 h-16 text-gray-300 mx-auto mb-4" />
               <h3 className="text-xl font-semibold text-gray-700 mb-2">No jobs found</h3>
               <p className="text-gray-500 mb-6">Try adjusting your search criteria or check back later for new opportunities</p>
-              <Button className="bg-blue-600 hover:bg-blue-700">
+              <Button className="bg-blue-600 hover:bg-blue-700" onClick={clearFilters}>
                 Clear Filters
               </Button>
             </CardContent>