Add ecosystem filtering to opportunities and update posting form

Adds an 'ecosystem' field to opportunities, enabling filtering on the OpportunitiesHub page and inclusion in the OpportunityPostForm. Also resolves a navigation import error in OpportunitiesHub.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: c9ce4106-de8c-4aae-ad20-8c89a4901395
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/aPpJgbb
Replit-Helium-Checkpoint-Created: true

client/api/opportunities.ts

@@ -14,6 +14,7 @@ export interface Opportunity {
   salary_max: number;
   experience_level: string;
   arm_affiliation: string;
+  ecosystem?: string;
   posted_by_id: string;
   aethex_creators: OpportunityPoster;
   status: string;
@@ -40,12 +41,14 @@ export interface CreateOpportunityData {
   salary_max?: number;
   experience_level?: string;
   arm_affiliation: string;
+  ecosystem?: string;
 }
 
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 
 export async function getOpportunities(filters?: {
   arm?: string;
+  ecosystem?: string;
   search?: string;
   jobType?: string;
   experienceLevel?: string;
@@ -55,6 +58,7 @@ export async function getOpportunities(filters?: {
 }): Promise<OpportunitiesResponse> {
   const params = new URLSearchParams();
   if (filters?.arm) params.append("arm", filters.arm);
+  if (filters?.ecosystem) params.append("ecosystem", filters.ecosystem);
   if (filters?.search) params.append("search", filters.search);
   if (filters?.jobType) params.append("jobType", filters.jobType);
   if (filters?.experienceLevel)

client/pages/opportunities/OpportunitiesHub.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -9,7 +9,17 @@ import { OpportunityCard } from "@/components/creator-network/OpportunityCard";
 import { ArmFilter } from "@/components/creator-network/ArmFilter";
 import type { Opportunity } from "@/api/opportunities";
 
+const ECOSYSTEMS = [
+  { value: "all", label: "All" },
+  { value: "roblox", label: "Roblox" },
+  { value: "unity", label: "Unity" },
+  { value: "web", label: "Web" },
+  { value: "audio", label: "Audio" },
+  { value: "design", label: "Design" },
+];
+
 export default function OpportunitiesHub() {
+  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const [opportunities, setOpportunities] = useState<Opportunity[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -17,6 +27,9 @@ export default function OpportunitiesHub() {
   const [selectedArm, setSelectedArm] = useState<string | undefined>(
     searchParams.get("arm") || undefined,
   );
+  const [selectedEcosystem, setSelectedEcosystem] = useState<string>(
+    searchParams.get("ecosystem") || "all",
+  );
   const [page, setPage] = useState(parseInt(searchParams.get("page") || "1"));
   const [totalPages, setTotalPages] = useState(0);
 
@@ -26,6 +39,7 @@ export default function OpportunitiesHub() {
       try {
         const result = await getOpportunities({
           arm: selectedArm,
+          ecosystem: selectedEcosystem !== "all" ? selectedEcosystem : undefined,
           search: search || undefined,
           page,
           limit: 12,
@@ -37,6 +51,7 @@ export default function OpportunitiesHub() {
         // Update URL params
         const params = new URLSearchParams();
         if (selectedArm) params.set("arm", selectedArm);
+        if (selectedEcosystem && selectedEcosystem !== "all") params.set("ecosystem", selectedEcosystem);
         if (search) params.set("search", search);
         if (page > 1) params.set("page", String(page));
         setSearchParams(params);
@@ -49,7 +64,7 @@ export default function OpportunitiesHub() {
     };
 
     fetchOpportunities();
-  }, [selectedArm, search, page, setSearchParams]);
+  }, [selectedArm, selectedEcosystem, search, page, setSearchParams]);
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
@@ -61,6 +76,11 @@ export default function OpportunitiesHub() {
     setPage(1);
   };
 
+  const handleEcosystemChange = (ecosystem: string) => {
+    setSelectedEcosystem(ecosystem);
+    setPage(1);
+  };
+
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
@@ -98,7 +118,7 @@ export default function OpportunitiesHub() {
               </div>
 
               {/* Search Bar */}
-              <form onSubmit={handleSearch} className="max-w-2xl mx-auto">
+              <form onSubmit={handleSearch} className="max-w-2xl mx-auto mb-6">
                 <div className="relative">
                   <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                   <Input
@@ -115,6 +135,25 @@ export default function OpportunitiesHub() {
                   </Button>
                 </div>
               </form>
+
+              {/* Ecosystem Filter Tabs */}
+              <div className="flex flex-wrap justify-center gap-2">
+                {ECOSYSTEMS.map((eco) => (
+                  <Button
+                    key={eco.value}
+                    variant={selectedEcosystem === eco.value ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => handleEcosystemChange(eco.value)}
+                    className={
+                      selectedEcosystem === eco.value
+                        ? "bg-cyan-500 text-black hover:bg-cyan-400"
+                        : "border-slate-600 text-slate-300 hover:bg-slate-800"
+                    }
+                  >
+                    {eco.label}
+                  </Button>
+                ))}
+              </div>
             </div>
           </section>
 
@@ -151,6 +190,7 @@ export default function OpportunitiesHub() {
                         onClick={() => {
                           setSearch("");
                           setSelectedArm(undefined);
+                          setSelectedEcosystem("all");
                           setPage(1);
                         }}
                         variant="outline"

client/pages/opportunities/OpportunityPostForm.tsx

@@ -37,6 +37,15 @@ const ARMS = [
   { value: "nexus", label: "Nexus (Talent Marketplace)" },
 ];
 
+const ECOSYSTEMS = [
+  { value: "roblox", label: "Roblox" },
+  { value: "unity", label: "Unity" },
+  { value: "web", label: "Web Development" },
+  { value: "audio", label: "Audio / Music" },
+  { value: "design", label: "Design / Art" },
+  { value: "other", label: "Other" },
+];
+
 export default function OpportunityPostForm() {
   const navigate = useNavigate();
   const { user } = useAuth();
@@ -52,6 +61,7 @@ export default function OpportunityPostForm() {
     salary_max: undefined,
     experience_level: "Mid",
     arm_affiliation: "nexus",
+    ecosystem: "web",
   });
 
   if (!user) {
@@ -267,6 +277,30 @@ export default function OpportunityPostForm() {
                       )}
                     </div>
 
+                    {/* Ecosystem */}
+                    <div className="space-y-2">
+                      <label className="block text-sm font-medium text-white">
+                        Ecosystem / Platform
+                      </label>
+                      <Select
+                        value={formData.ecosystem || "web"}
+                        onValueChange={(value) =>
+                          setFormData({ ...formData, ecosystem: value })
+                        }
+                      >
+                        <SelectTrigger className="bg-slate-800 border-slate-600 text-white">
+                          <SelectValue placeholder="Select ecosystem" />
+                        </SelectTrigger>
+                        <SelectContent className="bg-slate-800 border-slate-600 text-white">
+                          {ECOSYSTEMS.map((eco) => (
+                            <SelectItem key={eco.value} value={eco.value}>
+                              {eco.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
                     {/* Job Type */}
                     <div className="space-y-2">
                       <label className="block text-sm font-medium text-white">