[oluwarantimini]

Problem

#129 was closed, but every dashboard form still writes out the same field markup by hand:

<label className="flex flex-col gap-1 text-sm">
  Label text
  <input … className="rounded-md border border-border bg-surface px-3 py-2" />
  <span className="text-xs text-muted">hint</span>
</label>

This pattern was repeated 17 times across app/dashboard/page.tsx (create organization), app/dashboard/organizations/[id]/page.tsx (create event) and app/dashboard/events/[id]/page.tsx (add ticket type, issue ticket). Any styling or accessibility change had to be made in 17 places, and the copies were already starting to drift.

What changed

1. feat(ui): new src/components/form-field.tsx

Export	Renders
FormField({ label, children })	the wrapping <label className="flex flex-col gap-1 text-sm"> with the label text, so clicking the text still focuses the control
Input	<input> with the shared control classes; any extra className (e.g. w-28, font-mono text-xs) is appended
Select	<select> with the same shared classes
FieldHint({ id?, children })	the muted text-xs text-muted helper text; id keeps aria-describedby working (e.g. slug-help)
FIELD_CONTROL_CLASS	the shared class string, for any future control

2. refactor(dashboard): all three dashboard pages use them

All 17 fields were converted (4 + 7 + 6). Nothing changes for users: the same DOM structure, the same classes, the same props (required, pattern, onInvalid/onInput custom validity, aria-describedby, inputMode, min/max/step) and the same hints. Field-specific error spans, such as the slug error, stay where they were inside the field. Net change on the pages: −98 / +71 lines.

Done-when check

The dashboard forms use the shared components. grep -rn "<label\|<input\|<select" src/app/dashboard returns nothing.

Verification

• npx tsc --noEmit: no errors in app/dashboard or form-field.tsx.
• npx eslint src/app/dashboard src/components/form-field.tsx: clean.
• npx vitest run: 21 files, 84 tests, all pass, including app/dashboard/page.test.ts.
  Closes Extract shared form field components for dashboard forms #302
  Closes Extract a shared status badge component #303
  Closes Extract a shared industry select component #304
  Closes Extract useRequireAuth into a hook #305

[drips-wave]

@oluwarantimini Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[netlify]

❌ Deploy Preview for stellartickets failed.

Name	Link
🔨 Latest commit	9fa11e6
🔍 Latest deploy log	https://app.netlify.com/projects/stellartickets/deploys/6ad10db58bc8ef6d1befe0d8