add clearing filters & no results page

frontend/src/app/jobs/page.tsx

@@ -9,6 +9,7 @@ import JobPagination from "@/components/jobs/job-pagination";
 import { Suspense } from "react";
 import Loading from "@/app/loading";
 import HeadingText from "@/components/layout/heading-text";
+import NoResults from "@/components/ui/no-results";
 
 export default async function JobsPage({
   searchParams,
@@ -27,22 +28,26 @@ export default async function JobsPage({
       <SearchBar />
       <FilterSection _totalJobs={total} />
 
-      <Suspense fallback={<Loading />}>
-        <div className="mt-4 flex flex-col lg:flex-row gap-2">
-          <div className="w-full lg:w-[35%]">
-            <div className="overflow-y-auto pr-2 no-scrollbar h-[calc(100vh-330px)]">
-              <JobList jobs={jobs} />
-              <JobPagination />
+      {total <= 0 ? (
+        <NoResults />
+      ) : (
+        <Suspense fallback={<Loading />}>
+          <div className="mt-4 flex flex-col lg:flex-row gap-2">
+            <div className="w-full lg:w-[35%]">
+              <div className="overflow-y-auto pr-2 no-scrollbar h-[calc(100vh-330px)]">
+                <JobList jobs={jobs} />
+                <JobPagination />
+              </div>
             </div>
-          </div>
 
-          <div className="hidden lg:block lg:w-[65%]">
-            <div className="overflow-y-auto h-[calc(100vh-330px)]">
-              <JobDetails />
+            <div className="hidden lg:block lg:w-[65%]">
+              <div className="overflow-y-auto h-[calc(100vh-330px)]">
+                <JobDetails />
+              </div>
             </div>
           </div>
-        </div>
-      </Suspense>
+        </Suspense>
+      )}
     </div>
   );
 }

frontend/src/components/jobs/filters/dropdown-filter.tsx

@@ -12,7 +12,6 @@ import { IconChevronDown } from "@tabler/icons-react";
 import { useFilterContext } from "@/context/filter/filter-context";
 import { JobFilters } from "@/types/filters";
 import { formatCapString, getPluralLabel } from "@/lib/utils";
-import { useSearchParams } from "next/navigation";
 
 interface DropdownFilterProps {
   label: string;
@@ -34,15 +33,11 @@ export default function DropdownFilter({
   const [localSelected, setLocalSelected] = useState<string[]>(
     (filters.filters[filterKey] as string[]) || [],
   );
-  const searchParams = useSearchParams();
 
-  // Sync with URL on mount
+  // Sync when filters change
   useEffect(() => {
-    const urlValues = searchParams.getAll(`${filterKey}[]`);
-    if (urlValues.length > 0) {
-      setLocalSelected(urlValues);
-    }
-  }, [searchParams, filterKey]);
+    setLocalSelected((filters.filters[filterKey] as string[]) || []);
+  }, [filters.filters, filterKey]);
 
   // Updates locally selected value & filters
   const handleValueSelect = (value: string) => {

frontend/src/components/ui/no-results.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+// frontend/src/components/ui/no-results.tsx
+import { Button, Text } from "@mantine/core";
+import { IconInboxOff } from "@tabler/icons-react";
+import { useFilterContext } from "@/context/filter/filter-context";
+
+export default function NoResults() {
+  const { clearFilters } = useFilterContext();
+
+  return (
+    <div className="flex flex-col items-center justify-center h-[50vh] space-y-4 px-4">
+      <IconInboxOff size={64} className="text-gray-400" />
+      <Text size="xl" fw={600} ta="center">
+        No jobs found
+      </Text>
+      <Text size="sm" c="dimmed" ta="center" className="max-w-md">
+        We couldn&#39;t find any jobs matching your current filters. Try
+        adjusting your search criteria.
+      </Text>
+      <Button onClick={clearFilters} variant="light" size="md" radius="md">
+        Clear All Filters
+      </Button>
+    </div>
+  );
+}

frontend/src/context/filter/filter-context.tsx

@@ -13,6 +13,7 @@ interface FilterContextType {
   totalJobs: number;
   setTotalJobs: (totalJobs: number) => void;
   isLoading: boolean;
+  clearFilters: () => void;
 }
 
 export const FilterContext = createContext<FilterContextType | undefined>(

frontend/src/context/filter/filter-provider.tsx

@@ -51,6 +51,14 @@ export function FilterProvider({ children }: { children: ReactNode }) {
     }
     setSelectedJobInternal(job);
   };
+
+  const clearFilters = () => {
+    setIsLoading(true);
+    setFilters(emptyFilterState);
+    setSelectedJob(null);
+    router.push("/jobs");
+  };
+
   return (
     <FilterContext.Provider
       value={{
@@ -61,6 +69,7 @@ export function FilterProvider({ children }: { children: ReactNode }) {
         setTotalJobs,
         updateFilters,
         setSelectedJob,
+        clearFilters,
       }}
     >
       {children}