talent pool

Author: kanekoshoyu

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.1.5] - 2025-09-20
+### Added
+- talent pool options
+
 ## [0.1.4] - 2025-09-18
 ### Added
 - printable report

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bounteer/page",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/components/Header.astro

@@ -41,6 +41,11 @@ const allPages = [
         class="text-secondary-600 hover:text-accent-600 font-medium transition-colors"
         >Role Fit Index</a
       >
+      <a
+        href="/talent-pool"
+        class="text-secondary-600 hover:text-accent-600 font-medium transition-colors"
+        >Talent Pool</a
+      >
       <a
         href="/contact"
         class="text-secondary-600 hover:text-accent-600 font-medium transition-colors"
@@ -115,6 +120,11 @@ const allPages = [
             class="block px-4 py-2 text-sm text-secondary-700 hover:bg-secondary-100"
             >Role Fit Index</a
           >
+          <a
+            href="/talent-pool"
+            class="block px-4 py-2 text-sm text-secondary-700 hover:bg-secondary-100"
+            >Talent Pool</a
+          >
           <a
             href="/contact"
             class="block px-4 py-2 text-sm text-secondary-700 hover:bg-secondary-100"

src/components/Products.astro

@@ -8,6 +8,7 @@ const stages = [
     subtitle: "Instant, AI-powered JD to CV match analysis.",
     launchDate: "September 2025",
     currentStage: "Beta Release",
+    tagColor: "bg-emerald-100 text-emerald-700",
     features: [
       "Upload CV & paste a job description (multiple formats)",
       "Overall match score with confidence band",
@@ -19,16 +20,36 @@ const stages = [
     buttonLabel: "Try Role Fit Index Now",
     buttonHref: "/role-fit-index",
   },
+  {
+    stage: "Stage 1.5",
+    title: "Bounteer Talent Pool",
+    subtitle:
+      "Opt-in to get discovered by recruiters — showcase your top match scores.",
+    launchDate: "September 2025",
+    currentStage: "Beta Release",
+    tagColor: "bg-blue-100 text-blue-700",
+    features: [
+      "Join a curated directory of top-scoring candidates from RFI",
+      "Showcase your strengths, skills, and high match scores to recruiters",
+      "Control what you share — privacy-first and opt-in only",
+      "Get contacted directly by companies looking for candidates like you",
+      "Stay updated when your profile is viewed or shortlisted",
+      "Boost your visibility by improving your match scores over time",
+    ],
+    buttonLabel: "Join Talent Pool",
+    buttonHref: "/talent-pool",
+  },
   {
     stage: "Stage 2",
     title: "Bounteer Marketplace",
     subtitle: "Quality-first referral bounties with transparent payouts.",
     launchDate: "2026",
     currentStage: "In Development",
+    tagColor: "bg-orange-100 text-orange-700",
     features: [
       "Post roles with tiered bounties & clear acceptance criteria",
       "Verified referrers submit candidates with one link",
-      "Built-in screening powered by Role Fit Index",
+      "Built-in screening powered by RFI",
       "Reputation & anti-spam quality gates",
       "Dashboard for pipeline, payouts, and ROI",
       "Optional escrow & milestone-based releases",
@@ -40,7 +61,7 @@ const stages = [
 ---
 
 <section class="py-12">
-  <div class="container-custom grid md:grid-cols-2 gap-6">
+  <div class="container-custom grid md:grid-cols-3 gap-6">
     {
       stages.map((stage) => (
         <ProductCard
@@ -53,6 +74,7 @@ const stages = [
           features={stage.features}
           buttonLabel={stage.buttonLabel}
           buttonHref={stage.buttonHref}
+          tagColor={stage.tagColor}
         />
       ))
     }

src/components/interactive/ProductCard.tsx

@@ -19,6 +19,7 @@ interface ProductCardProps {
   features: string[];
   buttonLabel: string;
   buttonHref: string;
+  tagColor?: string;
 }
 
 export default function ProductCard({
@@ -30,6 +31,7 @@ export default function ProductCard({
   features,
   buttonLabel,
   buttonHref,
+  tagColor = "bg-emerald-100 text-emerald-700",
 }: ProductCardProps) {
   return (
     <Card className="flex flex-col h-full shadow-md">
@@ -42,7 +44,7 @@ export default function ProductCard({
           </div>
           <Badge
             variant="secondary"
-            className="bg-emerald-100 text-emerald-700"
+            className={tagColor}
           >
             {launchDate}
           </Badge>

src/components/interactive/ReportCard.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Check, X, Download, Shield, LogIn } from "lucide-react";
 import { EXTERNAL } from '@/constant';
 import { getUserProfile, getLoginUrl, type UserProfile } from '@/lib/utils';
+import { Checkbox } from "@/components/ui/checkbox";
 import LoginMask from './LoginMask';
 import PrintableReport from './PrintableReport';
 
@@ -29,6 +30,7 @@ type Report = {
   candidate_advice: string;
   concern_tags: string[];
   date_created: string;
+  opt_in_talent_pool?: boolean;
   submission?: {
     job_description?: {
       id: string;
@@ -64,6 +66,8 @@ export default function ReportCard() {
   const [reportId, setReportId] = useState<string | null>(null);
   const [currentUser, setCurrentUser] = useState<UserProfile | null>(null);
   const [authChecked, setAuthChecked] = useState(false);
+  const [talentPoolOptIn, setTalentPoolOptIn] = useState(false);
+  const [talentPoolSubmitting, setTalentPoolSubmitting] = useState(false);
   const printRef = useRef<HTMLDivElement>(null);
 
   const blacklist = ["Bounteer Production", ""];
@@ -73,6 +77,37 @@ export default function ReportCard() {
     documentTitle: `Role-Fit-Report-${reportId || 'unknown'}`,
   });
 
+  const handleTalentPoolOptIn = async () => {
+    if (!report || !currentUser) return;
+    
+    setTalentPoolSubmitting(true);
+    try {
+      const response = await fetch(`${EXTERNAL.directus_url}/items/role_fit_index_report/${report.id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${EXTERNAL.directus_key}`
+        },
+        body: JSON.stringify({
+          opt_in_talent_pool: talentPoolOptIn
+        })
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to update talent pool preference');
+      }
+      
+      // Show success message
+      alert(talentPoolOptIn ? 'Successfully opted in to Bounteer Talent Pool!' : 'Successfully opted out of Bounteer Talent Pool.');
+      
+    } catch (error) {
+      console.error('Error updating talent pool preference:', error);
+      alert('Failed to update talent pool preference. Please try again.');
+    } finally {
+      setTalentPoolSubmitting(false);
+    }
+  };
+
   const downloadCV = async (fileId: string) => {
     try {
       // First get file info to get the filename
@@ -182,6 +217,11 @@ export default function ReportCard() {
         }
 
         setReport(reportData);
+        
+        // Set talent pool opt-in state from report data
+        if (reportData?.opt_in_talent_pool !== undefined) {
+          setTalentPoolOptIn(reportData.opt_in_talent_pool);
+        }
       } catch (e: any) {
         setError(e.message || "Unexpected error");
       } finally {
@@ -511,6 +551,46 @@ export default function ReportCard() {
           </div>
         </div>
 
+        {/* Talent Pool Opt-in - Only show if role fit index > 75 and user is authenticated */}
+        {report.index > 75 && currentUser && (
+          <div className="border-t pt-6">
+            <h2 className="text-lg font-semibold mb-3">🎯 Join Bounteer Talent Pool</h2>
+            <div className="rounded-lg bg-green-50 border border-green-200 p-5">
+              <div className="flex items-start space-x-3">
+                <Checkbox
+                  id="talentPoolOptIn"
+                  checked={talentPoolOptIn}
+                  onCheckedChange={setTalentPoolOptIn}
+                  className="mt-1"
+                />
+                <div className="flex-1">
+                  <label 
+                    htmlFor="talentPoolOptIn" 
+                    className="font-medium text-green-900 cursor-pointer"
+                  >
+                    Get matched with relevant job opportunities
+                  </label>
+                  <p className="text-sm text-green-700 mt-1">
+                    With a {report.index}/100 Role Fit Index, you're a great candidate! 
+                    Join our talent pool to get matched with hiring partners looking for candidates like you. 
+                    Your profile and report data will only be shared when there's a strong match.
+                  </p>
+                </div>
+              </div>
+              <div className="mt-4 flex justify-end">
+                <Button 
+                  onClick={handleTalentPoolOptIn}
+                  disabled={talentPoolSubmitting}
+                  variant="default"
+                  size="sm"
+                >
+                  {talentPoolSubmitting ? "Saving..." : "Save Preference"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Download Button */}
         <div className="flex justify-center pt-4">
           <Button 

src/components/interactive/UserReportTable.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/table";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { ExternalLink } from "lucide-react";
 import { EXTERNAL } from "@/constant";
 import { getUserProfile, type UserProfile } from "@/lib/utils";
@@ -26,6 +27,7 @@ type ReportRow = {
   index: number;
   weighted_index?: number;
   date_created: string;
+  opt_in_talent_pool?: boolean;
   submission?: {
     id: number;
     cv_file?: string; // Directus file UUID
@@ -198,6 +200,7 @@ export default function UserReportTable({ pageSize = 10 }: Props) {
                   <TableHead className="w-18">RFI</TableHead>
                   <TableHead className="w-18">WRFI</TableHead>
                   <TableHead>Job Description (JD)</TableHead>
+                  <TableHead className="w-32">Talent Pool</TableHead>
                   <TableHead className="w-32">JD Link</TableHead>
                   <TableHead className="w-32">CV Link</TableHead>
                 </TableRow>
@@ -206,7 +209,7 @@ export default function UserReportTable({ pageSize = 10 }: Props) {
                 {pageSlice.length === 0 ? (
                   <TableRow>
                     <TableCell
-                      colSpan={6}
+                      colSpan={7}
                       className="text-center py-8 text-gray-500"
                     >
                       No reports found.
@@ -234,6 +237,23 @@ export default function UserReportTable({ pageSize = 10 }: Props) {
                         <TableCell >{r.index}</TableCell>
                         <TableCell >{r.weighted_index || "—"}</TableCell>
                         <TableCell>{jobName}</TableCell>
+                        <TableCell>
+                          {r.index > 75 ? (
+                            r.opt_in_talent_pool ? (
+                              <Badge variant="default" className="bg-green-100 text-green-800 hover:bg-green-200">
+                                ✓ Opted In
+                              </Badge>
+                            ) : (
+                              <Badge variant="secondary" className="bg-gray-100 text-gray-600">
+                                Not Opted In
+                              </Badge>
+                            )
+                          ) : (
+                            <Badge variant="outline" className="text-gray-400 border-gray-300">
+                              Not Eligible
+                            </Badge>
+                          )}
+                        </TableCell>
                         <TableCell >
                           <Button
                             asChild

src/components/ui/checkbox.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, onCheckedChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onCheckedChange) {
+        onCheckedChange(e.target.checked);
+      }
+    };
+
+    return (
+      <input
+        type="checkbox"
+        className={cn(
+          "h-4 w-4 rounded border border-gray-300 text-primary-600 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:border-primary-600",
+          className
+        )}
+        onChange={handleChange}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

src/pages/role-fit-index/index.astro

@@ -11,9 +11,9 @@ import RoleFitForm from "@/components/interactive/RoleFitIndexForm";
 
   <main>
     <HeroSection
-      title="Get Your Role Fit Index"
+      title="Get Your Bounteer Role Fit Index"
       highlightText="Role Fit Index"
-      description="Instantly analyze how well your CV matches a job description and learn how to improve your CV."
+      description="Bounteer Role Fit Index (RFI) doesn’t just tell you how well you match a job. It shows you exactly what to do next. Get a clear match score, pinpoint your missing skills, and receive concrete upgrade tips to make your CV stand out. See how recruiters might view you, fix weak spots instantly, and boost your chances of landing interviews."
       badge="⚡ AI-Powered Career Matching"
     />