feat(bounty): management dashboard shell + overview (#630)

app/(landing)/organizations/[id]/bounties/[bountyId]/page.tsx

@@ -0,0 +1,18 @@
+import { Metadata } from 'next';
+
+import { AuthGuard } from '@/components/auth';
+import Loading from '@/components/Loading';
+import { generatePageMetadata } from '@/lib/metadata';
+import BountyManagementDashboard from '@/components/organization/bounties/manage/BountyManagementDashboard';
+
+export const metadata: Metadata = generatePageMetadata('bounties');
+
+export default function BountyManagePageRoute() {
+  return (
+    <AuthGuard redirectTo='/auth?mode=signin' fallback={<Loading />}>
+      <div className='mx-auto max-w-6xl px-6 py-8'>
+        <BountyManagementDashboard />
+      </div>
+    </AuthGuard>
+  );
+}

app/(landing)/organizations/[id]/bounties/page.tsx

@@ -234,7 +234,15 @@ export default function OrganizationBountiesPage() {
                   return (
                     <div
                       key={bounty.id}
-                      className='group hover:border-primary/60 hover:shadow-primary/10 relative flex flex-col rounded-2xl border border-zinc-800 bg-zinc-900/30 p-5 shadow-lg transition-all'
+                      className='group hover:border-primary/60 hover:shadow-primary/10 relative flex cursor-pointer flex-col rounded-2xl border border-zinc-800 bg-zinc-900/30 p-5 shadow-lg transition-all'
+                      onClick={() =>
+                        router.push(
+                          `/organizations/${organizationId}/bounties/${bounty.id}`
+                        )
+                      }
+                      tabIndex={0}
+                      role='button'
+                      aria-label={`Manage bounty ${bounty.title || 'Untitled bounty'}`}
                     >
                       <div className='mb-3 flex items-center justify-between'>
                         <Badge

components/bounties/detail/BountyDetail.tsx

@@ -27,6 +27,7 @@ import {
   useMyBountyApplication,
   useMyBountySubmission,
 } from '@/features/bounties';
+import { ordinal } from '@/lib/utils';
 import { BountyEntryCta } from './BountyEntryCta';
 import BountySubmitPanel from './submit/BountySubmitPanel';
 import { DueCountdown } from '../DueCountdown';
@@ -45,12 +46,6 @@ function formatDate(iso: string): string {
   });
 }
 
-const ordinal = (n: number): string => {
-  const s = ['th', 'st', 'nd', 'rd'];
-  const v = n % 100;
-  return `${n}${s[(v - 20) % 10] ?? s[v] ?? s[0]}`;
-};
-
 export default function BountyDetail({ id }: { id: string }) {
   const { data: bounty, isLoading, error } = useBounty(id);
   const { data: myApplication } = useMyBountyApplication(id);

components/bounties/marketplace/BountyCard.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/components/organization/bounties/new/tabs/schemas/scopeSchema';
 import type { BountyPublic } from '@/features/bounties';
 import { DueCountdown } from '../DueCountdown';
+import { bountyStatusClass } from '../statusClass';
 
 /** Plain-language mode label (single claim / competition / application). */
 function modeLabel(b: BountyPublic): string {
@@ -22,22 +23,13 @@ function modeLabel(b: BountyPublic): string {
   return 'Bounty';
 }
 
-const STATUS_CLASS: Record<string, string> = {
-  open: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400',
-  in_progress: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400',
-  completed: 'border-primary/30 bg-primary/10 text-primary',
-  cancelled: 'border-zinc-700 bg-zinc-800/60 text-zinc-300',
-};
-
 export function BountyCard({ bounty }: { bounty: BountyPublic }) {
   const reward = bounty.rewardAmount > 0;
   const isUsdc = bounty.rewardCurrency?.toUpperCase() === 'USDC';
   const categoryLabel = bounty.category
     ? (CATEGORY_LABELS[bounty.category as BountyCategory] ?? bounty.category)
     : null;
-  const statusClass =
-    STATUS_CLASS[bounty.status] ??
-    'border-zinc-700 bg-zinc-800/60 text-zinc-300';
+  const statusClass = bountyStatusClass(bounty.status);
 
   return (
     <Link

components/bounties/statusClass.ts

@@ -0,0 +1,19 @@
+/**
+ * Badge styling for the bounty lifecycle status (lowercase, per the API DTOs).
+ * Shared by the marketplace card and the organizer management dashboard so
+ * both surfaces render the same color for the same status.
+ */
+const STATUS_CLASS: Record<string, string> = {
+  open: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400',
+  in_progress: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400',
+  ready_to_shortlist: 'border-amber-500/30 bg-amber-500/10 text-amber-400',
+  submitted: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+  under_review: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+  completed: 'border-primary/30 bg-primary/10 text-primary',
+  cancelled: 'border-zinc-700 bg-zinc-800/60 text-zinc-300',
+  disputed: 'border-red-500/30 bg-red-500/10 text-red-400',
+};
+
+export function bountyStatusClass(status: string): string {
+  return STATUS_CLASS[status] ?? 'border-zinc-700 bg-zinc-800/60 text-zinc-300';
+}