feat: add Vercel deployment dashboard widget plugin

[srjaykikani]

Summary

• Add new Payload CMS plugin @jhb.software/payload-vercel-dashboard-widget for monitoring Vercel deployments
• Dashboard widget showing current production deployment status with color-coded pills
• One-click deployment trigger button
• Multi-language support (English and German)
• Configurable widget min/max width
• Graceful error handling with user-friendly messages

Features

• Active Deployment: Shows the last ready deployment with timestamp and status
• Latest Deployment: Shows in-progress builds when different from active
• Trigger Deploy: Button to trigger new production deployments
• Status Pills: Color-coded status (Ready=green, Building=yellow, Error=red)

Configuration

vercelDashboardPlugin({
  vercel: {
    apiToken: process.env.VERCEL_API_TOKEN!,
    projectId: process.env.VERCEL_PROJECT_ID!,
    teamId: process.env.VERCEL_TEAM_ID, // Optional
  },
  widget: {
    minWidth: 'medium',
    maxWidth: 'full',
  },
})

Test plan

• Widget displays deployment info correctly
• Error states handled gracefully
• Trigger deployment button works
• Multi-language translations work
• Build passes with no errors
• Lint passes with no warnings

Closes jhb-dev/jay-jens-payload#55

[jhb-dev]

Thanks @srjaykikani. Looks good so far. I made some minor adjustments.

I am currently experimenting with a better way to trigger the frontend deployments. Once I am done with that, I will commit it to this PR and merge it.

[srjaykikani]

Thanks You!

[jhb-dev]

Please upgrade this to the latest Payload version (but not Next.js 16.2 yet) and addres the comment about the redeploy logic.

[jhb-dev]

I would like to change the redeploy logic to do the following:

• fetch the deployment ID of the latest production deployment
• redeploy it

e.g.:

    // Find the latest READY production deployment to redeploy
    const { deployments } = await vercel.getDeployments({
      projectId,
      teamId,
      target: 'production',
      state: 'READY',
      limit: 1,
    })

    const latestDeployment = deployments.at(0)
    if (!latestDeployment) {
      return Response.json({ error: 'No READY production deployment found to redeploy' }, { status: 404 })
    }

    const deployment = await vercel.redeploy({
      deploymentId: latestDeployment.uid,
      name: projectId,
      target: 'production',
      teamId,
    })

[srjaykikani]

Addressed the requested changes:

• upgraded the widget package and dev app to the latest compatible Payload version (3.80.0) while keeping Next.js on the supported 15.x line (15.4.11)
• changed the redeploy flow to fetch the latest READY production deployment and redeploy that deployment instead of creating a new deployment from project metadata
• refreshed the dashboard status flow so the widget reads live deployment state correctly after redeploys