From ffe12a9e85d6a996f86de3e1ce391f62855dadff Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 5 Mar 2026 17:08:19 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20applicant=20dashboard=20=E2=80=94=20tea?=
 =?UTF-8?q?m=20cards,=20editable=20description,=20feedback=20visibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace flat team names list with proper cards showing roles and badges
- Hide TeamMembers from metadata display, remove Withdraw from header
- Add inline-editable project description (admin-toggleable setting)
- Move applicant feedback visibility from per-round config to admin settings
- Support EVALUATION, LIVE_FINAL, DELIBERATION round types in feedback
- Backwards-compatible: falls back to old per-round config if no settings exist
- Add observer team tab toggle and 10 new SystemSettings seed entries

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 prisma/seed.ts                               |   1 +
 src/app/(applicant)/applicant/page.tsx       | 172 ++++++++++++++-----
 src/components/settings/settings-content.tsx |  10 ++
 src/server/routers/applicant.ts              | 129 +++++++++++---
 src/server/routers/settings.ts               |   2 +
 5 files changed, 247 insertions(+), 67 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 8496807..2ec3d3d 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -927,6 +927,7 @@ async function main() {
     { key: 'applicant_show_livefinal_scores', value: 'false', type: SettingType.BOOLEAN, category: SettingCategory.ANALYTICS, description: 'Show individual jury scores from live finals' },
     { key: 'applicant_show_deliberation_feedback', value: 'false', type: SettingType.BOOLEAN, category: SettingCategory.ANALYTICS, description: 'Show deliberation results to applicants' },
     { key: 'applicant_hide_feedback_from_rejected', value: 'false', type: SettingType.BOOLEAN, category: SettingCategory.ANALYTICS, description: 'Hide feedback from rejected projects' },
+    { key: 'applicant_allow_description_edit', value: 'false', type: SettingType.BOOLEAN, category: SettingCategory.ANALYTICS, description: 'Allow applicants to edit their project description' },
   ]
   for (const s of visibilitySettings) {
     await prisma.systemSettings.upsert({
diff --git a/src/app/(applicant)/applicant/page.tsx b/src/app/(applicant)/applicant/page.tsx
index b585089..5b67cde 100644
--- a/src/app/(applicant)/applicant/page.tsx
+++ b/src/app/(applicant)/applicant/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
 import type { Route } from 'next'
@@ -13,9 +14,8 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { StatusTracker } from '@/components/shared/status-tracker'
+import { Textarea } from '@/components/ui/textarea'
 import { CompetitionTimelineSidebar } from '@/components/applicant/competition-timeline'
-import { WithdrawButton } from '@/components/applicant/withdraw-button'
 import { MentoringRequestCard } from '@/components/applicant/mentoring-request-card'
 import { AnimatedCard } from '@/components/shared/animated-container'
 import { ProjectLogoUpload } from '@/components/shared/project-logo-upload'
@@ -31,7 +31,12 @@ import {
   Star,
   AlertCircle,
   Pencil,
+  Loader2,
+  Check,
+  X,
+  UserCircle,
 } from 'lucide-react'
+import { toast } from 'sonner'
 
 const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive' | 'warning'> = {
   DRAFT: 'secondary',
@@ -44,6 +49,9 @@ const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destru
   REJECTED: 'destructive',
 }
 
+// Keys to hide from the metadata display (shown elsewhere or internal)
+const HIDDEN_METADATA_KEYS = new Set(['TeamMembers', 'teammembers', 'team_members'])
+
 export default function ApplicantDashboardPage() {
   const { data: session, status: sessionStatus } = useSession()
   const isAuthenticated = sessionStatus === 'authenticated'
@@ -65,6 +73,10 @@ export default function ApplicantDashboardPage() {
     enabled: isAuthenticated,
   })
 
+  const { data: flags } = trpc.settings.getFeatureFlags.useQuery(undefined, {
+    enabled: isAuthenticated,
+  })
+
   if (sessionStatus === 'loading' || (isAuthenticated && isLoading)) {
     return (
       <div className="space-y-6">
@@ -118,10 +130,11 @@ export default function ApplicantDashboardPage() {
   const programYear = project.program?.year
   const programName = project.program?.name
   const totalEvaluations = evaluations?.reduce((sum, r) => sum + r.evaluationCount, 0) ?? 0
+  const canEditDescription = flags?.applicantAllowDescriptionEdit && !isRejected
 
   return (
     <div className="space-y-6">
-      {/* Header */}
+      {/* Header — no withdraw button here */}
       <div className="flex items-start justify-between flex-wrap gap-4">
         <div className="flex items-center gap-4">
           {/* Project logo — clickable for any team member to change */}
@@ -163,9 +176,6 @@ export default function ApplicantDashboardPage() {
             </p>
           </div>
         </div>
-        {project.isTeamLead && currentStatus !== 'REJECTED' && (currentStatus as string) !== 'WINNER' && (
-          <WithdrawButton projectId={project.id} />
-        )}
       </div>
 
       <div className="grid gap-6 lg:grid-cols-3">
@@ -184,12 +194,19 @@ export default function ApplicantDashboardPage() {
                   <p>{project.teamName}</p>
                 </div>
               )}
-              {project.description && (
+              {/* Description — editable if admin allows */}
+              {project.description && !canEditDescription && (
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Description</p>
                   <p className="whitespace-pre-wrap">{project.description}</p>
                 </div>
               )}
+              {canEditDescription && (
+                <EditableDescription
+                  projectId={project.id}
+                  initialDescription={project.description || ''}
+                />
+              )}
               {project.tags && project.tags.length > 0 && (
                 <div>
                   <p className="text-sm font-medium text-muted-foreground mb-2">Tags</p>
@@ -203,22 +220,27 @@ export default function ApplicantDashboardPage() {
                 </div>
               )}
 
-              {/* Metadata */}
-              {project.metadataJson && Object.keys(project.metadataJson as Record<string, unknown>).length > 0 && (
-                <div className="border-t pt-4 mt-4">
-                  <p className="text-sm font-medium text-muted-foreground mb-3">Additional Information</p>
-                  <dl className="space-y-2">
-                    {Object.entries(project.metadataJson as Record<string, unknown>).map(([key, value]) => (
-                      <div key={key} className="flex justify-between">
-                        <dt className="text-sm text-muted-foreground capitalize">
-                          {key.replace(/_/g, ' ')}
-                        </dt>
-                        <dd className="text-sm font-medium">{String(value)}</dd>
-                      </div>
-                    ))}
-                  </dl>
-                </div>
-              )}
+              {/* Metadata — filter out team members (shown in sidebar) */}
+              {project.metadataJson && (() => {
+                const entries = Object.entries(project.metadataJson as Record<string, unknown>)
+                  .filter(([key]) => !HIDDEN_METADATA_KEYS.has(key))
+                if (entries.length === 0) return null
+                return (
+                  <div className="border-t pt-4 mt-4">
+                    <p className="text-sm font-medium text-muted-foreground mb-3">Additional Information</p>
+                    <dl className="space-y-2">
+                      {entries.map(([key, value]) => (
+                        <div key={key} className="flex justify-between gap-4">
+                          <dt className="text-sm text-muted-foreground capitalize shrink-0">
+                            {key.replace(/_/g, ' ')}
+                          </dt>
+                          <dd className="text-sm font-medium text-right">{String(value)}</dd>
+                        </div>
+                      ))}
+                    </dl>
+                  </div>
+                )
+              })()}
 
               {/* Meta info row */}
               <div className="flex flex-wrap gap-4 text-sm text-muted-foreground border-t pt-4 mt-4">
@@ -338,7 +360,7 @@ export default function ApplicantDashboardPage() {
 
         {/* Sidebar */}
         <div className="space-y-6">
-          {/* Competition timeline or status tracker */}
+          {/* Competition timeline */}
           <AnimatedCard index={3}>
           <Card>
             <CardHeader>
@@ -350,7 +372,7 @@ export default function ApplicantDashboardPage() {
           </Card>
           </AnimatedCard>
 
-          {/* Mentoring Request Card — show when there's an active MENTORING round */}
+          {/* Mentoring Request Card */}
           {project.isTeamLead && openRounds.filter((r) => r.roundType === 'MENTORING').map((mentoringRound) => (
             <AnimatedCard key={mentoringRound.id} index={4}>
               <MentoringRequestCard
@@ -378,17 +400,21 @@ export default function ApplicantDashboardPage() {
                     </Button>
                   </div>
                 </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground">
-                    {totalEvaluations} evaluation{totalEvaluations !== 1 ? 's' : ''} available from{' '}
-                    {evaluations?.length ?? 0} round{(evaluations?.length ?? 0) !== 1 ? 's' : ''}.
-                  </p>
+                <CardContent className="space-y-2">
+                  {evaluations?.map((round) => (
+                    <div key={round.roundId} className="flex items-center justify-between text-sm rounded-lg border p-2.5">
+                      <span className="font-medium">{round.roundName}</span>
+                      <Badge variant="secondary" className="text-xs">
+                        {round.evaluationCount} review{round.evaluationCount !== 1 ? 's' : ''}
+                      </Badge>
+                    </div>
+                  ))}
                 </CardContent>
               </Card>
             </AnimatedCard>
           )}
 
-          {/* Team overview */}
+          {/* Team overview — proper cards */}
           <AnimatedCard index={5}>
           <Card>
             <CardHeader>
@@ -404,27 +430,25 @@ export default function ApplicantDashboardPage() {
                 </Button>
               </div>
             </CardHeader>
-            <CardContent className="space-y-3">
+            <CardContent className="space-y-2">
               {project.teamMembers.length > 0 ? (
                 project.teamMembers.slice(0, 5).map((member) => (
-                  <div key={member.id} className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
+                  <div key={member.id} className="flex items-center gap-3 rounded-lg border p-2.5">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted shrink-0">
                       {member.role === 'LEAD' ? (
-                        <Crown className="h-4 w-4 text-yellow-500" />
+                        <Crown className="h-4 w-4 text-amber-500" />
                       ) : (
-                        <span className="text-xs font-medium">
-                          {member.user.name?.charAt(0).toUpperCase() || '?'}
-                        </span>
+                        <UserCircle className="h-4 w-4 text-muted-foreground" />
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium truncate">
                         {member.user.name || member.user.email}
                       </p>
-                      <p className="text-xs text-muted-foreground">
-                        {member.role === 'LEAD' ? 'Team Lead' : member.role === 'ADVISOR' ? 'Advisor' : 'Member'}
-                      </p>
                     </div>
+                    <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0">
+                      {member.role === 'LEAD' ? 'Lead' : member.role === 'ADVISOR' ? 'Advisor' : 'Member'}
+                    </Badge>
                   </div>
                 ))
               ) : (
@@ -494,3 +518,69 @@ export default function ApplicantDashboardPage() {
     </div>
   )
 }
+
+function EditableDescription({ projectId, initialDescription }: { projectId: string; initialDescription: string }) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [description, setDescription] = useState(initialDescription)
+  const utils = trpc.useUtils()
+
+  const mutation = trpc.applicant.updateDescription.useMutation({
+    onSuccess: () => {
+      utils.applicant.getMyDashboard.invalidate()
+      setIsEditing(false)
+      toast.success('Description updated')
+    },
+    onError: (e) => toast.error(e.message),
+  })
+
+  const handleSave = () => {
+    mutation.mutate({ projectId, description })
+  }
+
+  const handleCancel = () => {
+    setDescription(initialDescription)
+    setIsEditing(false)
+  }
+
+  if (!isEditing) {
+    return (
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <p className="text-sm font-medium text-muted-foreground">Description</p>
+          <Button variant="ghost" size="sm" className="h-6 px-2 text-xs gap-1" onClick={() => setIsEditing(true)}>
+            <Pencil className="h-3 w-3" />
+            Edit
+          </Button>
+        </div>
+        <p className="whitespace-pre-wrap">{initialDescription || <span className="text-muted-foreground italic">No description yet. Click Edit to add one.</span>}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <p className="text-sm font-medium text-muted-foreground mb-1">Description</p>
+      <Textarea
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        rows={6}
+        className="mb-2"
+        disabled={mutation.isPending}
+      />
+      <div className="flex items-center gap-2 justify-end">
+        <Button variant="ghost" size="sm" onClick={handleCancel} disabled={mutation.isPending}>
+          <X className="h-3.5 w-3.5 mr-1" />
+          Cancel
+        </Button>
+        <Button size="sm" onClick={handleSave} disabled={mutation.isPending}>
+          {mutation.isPending ? (
+            <Loader2 className="h-3.5 w-3.5 mr-1 animate-spin" />
+          ) : (
+            <Check className="h-3.5 w-3.5 mr-1" />
+          )}
+          Save
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/settings/settings-content.tsx b/src/components/settings/settings-content.tsx
index e059bc2..5f5bde3 100644
--- a/src/components/settings/settings-content.tsx
+++ b/src/components/settings/settings-content.tsx
@@ -154,6 +154,7 @@ export function SettingsContent({ initialSettings, isSuperAdmin = true }: Settin
     'applicant_show_livefinal_scores',
     'applicant_show_deliberation_feedback',
     'applicant_hide_feedback_from_rejected',
+    'applicant_allow_description_edit',
   ])
 
   const auditSecuritySettings = getSettingsByKeys([
@@ -854,6 +855,15 @@ function AnalyticsSettingsSection({ settings }: { settings: Record<string, strin
           value={settings.applicant_hide_feedback_from_rejected || 'false'}
         />
       </div>
+      <div className="border-t pt-4 space-y-3">
+        <Label className="text-sm font-medium">Applicant Editing</Label>
+        <SettingToggle
+          label="Allow Description Editing"
+          description="Let applicants edit their project description from the dashboard"
+          settingKey="applicant_allow_description_edit"
+          value={settings.applicant_allow_description_edit || 'false'}
+        />
+      </div>
       <div className="border-t pt-4 space-y-3">
         <Label className="text-sm font-medium">PDF Reports</Label>
         <SettingToggle
diff --git a/src/server/routers/applicant.ts b/src/server/routers/applicant.ts
index 71ee2e7..ecc9422 100644
--- a/src/server/routers/applicant.ts
+++ b/src/server/routers/applicant.ts
@@ -1514,35 +1514,78 @@ export const applicantRouter = router({
     // Check if mentor is assigned
     const hasMentor = !!project.mentorAssignment
 
-    // Check if there are EVALUATION rounds (CLOSED/ARCHIVED) with applicantVisibility.enabled
-    // Only consider rounds the project actually participated in (award track filtering)
+    // Check if feedback is available — first check admin settings, then fall back to per-round config
     let hasEvaluationRounds = false
     if (project.programId) {
-      const projectRoundIds = new Set(
-        (await ctx.prisma.projectRoundState.findMany({
-          where: { projectId: project.id },
-          select: { roundId: true },
-        })).map((prs) => prs.roundId)
-      )
-
-      const closedEvalRounds = projectRoundIds.size > 0
-        ? await ctx.prisma.round.findMany({
-            where: {
-              competition: { programId: project.programId },
-              roundType: 'EVALUATION',
-              status: { in: ['ROUND_CLOSED', 'ROUND_ARCHIVED'] },
-              id: { in: [...projectRoundIds] },
-            },
-            select: { configJson: true },
-          })
-        : []
-      const navProjectRejected = await isProjectRejected(ctx.prisma, project.id)
-      hasEvaluationRounds = closedEvalRounds.some((r) => {
-        const parsed = EvaluationConfigSchema.safeParse(r.configJson)
-        if (!parsed.success || !parsed.data.applicantVisibility.enabled) return false
-        if (parsed.data.applicantVisibility.hideFromRejected && navProjectRejected) return false
-        return true
+      // Check admin settings first
+      const adminFlags = await ctx.prisma.systemSettings.findMany({
+        where: { key: { in: [
+          'applicant_show_evaluation_feedback',
+          'applicant_show_livefinal_feedback',
+          'applicant_show_deliberation_feedback',
+          'applicant_hide_feedback_from_rejected',
+        ] } },
       })
+      const adminMap = new Map(adminFlags.map((s) => [s.key, s.value]))
+      const adminSettingsExist = adminFlags.length > 0
+
+      const navProjectRejected = await isProjectRejected(ctx.prisma, project.id)
+
+      if (adminSettingsExist) {
+        // Use admin settings
+        if (adminMap.get('applicant_hide_feedback_from_rejected') === 'true' && navProjectRejected) {
+          hasEvaluationRounds = false
+        } else {
+          const anyEnabled = adminMap.get('applicant_show_evaluation_feedback') === 'true'
+            || adminMap.get('applicant_show_livefinal_feedback') === 'true'
+            || adminMap.get('applicant_show_deliberation_feedback') === 'true'
+          if (anyEnabled) {
+            const enabledTypes: RoundType[] = []
+            if (adminMap.get('applicant_show_evaluation_feedback') === 'true') enabledTypes.push('EVALUATION')
+            if (adminMap.get('applicant_show_livefinal_feedback') === 'true') enabledTypes.push('LIVE_FINAL')
+            if (adminMap.get('applicant_show_deliberation_feedback') === 'true') enabledTypes.push('DELIBERATION')
+
+            const projectRoundIds = (await ctx.prisma.projectRoundState.findMany({
+              where: { projectId: project.id },
+              select: { roundId: true },
+            })).map((prs) => prs.roundId)
+
+            hasEvaluationRounds = projectRoundIds.length > 0 && await ctx.prisma.round.count({
+              where: {
+                competition: { programId: project.programId },
+                roundType: { in: enabledTypes },
+                status: { in: ['ROUND_CLOSED', 'ROUND_ARCHIVED'] },
+                id: { in: projectRoundIds },
+              },
+            }) > 0
+          }
+        }
+      } else {
+        // Fall back to old per-round config
+        const projectRoundIds = new Set(
+          (await ctx.prisma.projectRoundState.findMany({
+            where: { projectId: project.id },
+            select: { roundId: true },
+          })).map((prs) => prs.roundId)
+        )
+        const closedEvalRounds = projectRoundIds.size > 0
+          ? await ctx.prisma.round.findMany({
+              where: {
+                competition: { programId: project.programId },
+                roundType: 'EVALUATION',
+                status: { in: ['ROUND_CLOSED', 'ROUND_ARCHIVED'] },
+                id: { in: [...projectRoundIds] },
+              },
+              select: { configJson: true },
+            })
+          : []
+        hasEvaluationRounds = closedEvalRounds.some((r) => {
+          const parsed = EvaluationConfigSchema.safeParse(r.configJson)
+          if (!parsed.success || !parsed.data.applicantVisibility.enabled) return false
+          if (parsed.data.applicantVisibility.hideFromRejected && navProjectRejected) return false
+          return true
+        })
+      }
     }
 
     return { hasMentor, hasEvaluationRounds }
@@ -2518,6 +2561,40 @@ export const applicantRouter = router({
       return { success: true, requesting: input.requesting }
     }),
 
+  updateDescription: protectedProcedure
+    .input(z.object({
+      projectId: z.string(),
+      description: z.string().max(10000),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      if (ctx.user.role !== 'APPLICANT') {
+        throw new TRPCError({ code: 'FORBIDDEN', message: 'Only applicants can update descriptions' })
+      }
+
+      // Check admin setting
+      const setting = await ctx.prisma.systemSettings.findUnique({
+        where: { key: 'applicant_allow_description_edit' },
+      })
+      if (setting?.value !== 'true') {
+        throw new TRPCError({ code: 'FORBIDDEN', message: 'Description editing is currently disabled' })
+      }
+
+      // Verify membership
+      const member = await ctx.prisma.teamMember.findFirst({
+        where: { projectId: input.projectId, userId: ctx.user.id },
+      })
+      if (!member) {
+        throw new TRPCError({ code: 'NOT_FOUND', message: 'Project not found' })
+      }
+
+      await ctx.prisma.project.update({
+        where: { id: input.projectId },
+        data: { description: input.description },
+      })
+
+      return { success: true }
+    }),
+
   withdrawFromCompetition: protectedProcedure
     .input(z.object({ projectId: z.string() }))
     .mutation(async ({ ctx, input }) => {
diff --git a/src/server/routers/settings.ts b/src/server/routers/settings.ts
index 24d1d0c..292652c 100644
--- a/src/server/routers/settings.ts
+++ b/src/server/routers/settings.ts
@@ -52,6 +52,7 @@ export const settingsRouter = router({
       'applicant_show_livefinal_feedback', 'applicant_show_livefinal_scores',
       'applicant_show_deliberation_feedback',
       'applicant_hide_feedback_from_rejected',
+      'applicant_allow_description_edit',
     ]
     const settings = await ctx.prisma.systemSettings.findMany({
       where: { key: { in: keys } },
@@ -77,6 +78,7 @@ export const settingsRouter = router({
         deliberationEnabled: flag('applicant_show_deliberation_feedback'),
         hideFromRejected: flag('applicant_hide_feedback_from_rejected'),
       },
+      applicantAllowDescriptionEdit: flag('applicant_allow_description_edit'),
     }
   }),