project-detail-todo

Project Detail — Task list (interactive)

This file lists small, prioritized fixes for the Project detail page UI (see screenshot). Each item is self-contained: files to edit, acceptance criteria, quick test commands, and an estimated effort. Mark an item as done by changing [ ] to [x] and committing the change.

How to use

  • Edit this file to mark a task done (replace [ ] with [x]).
  • After applying a change locally, run the checks listed under “Quick check” for that task.
  • Commit with a clear message, e.g. git add -A && git commit -m "fix(project): tidy project detail - hide empty fields".

Tasks

-1) Consolidate empty-state placeholders (high)

  • Status: [x]
  • Motivation: The page shows many repeated “Not set” badges and placeholders. Replace these with a single, muted empty-state per logical block (Dates, Team, External Links, Schedule).
  • Files to edit: src/pages/ProjectDetail.vue (primary), src/components/ProjectRow.vue (if duplicated)
  • Change summary: Add small computed flags (e.g. hasDates, hasTeam) and v-if/v-else branches that show either the data or a single muted line like — Not set — or No schedule available.
  • Acceptance criteria: When a project has no start/end/team/links, the page shows a single muted line for each block instead of multiple “Not set” badges.
  • Quick check:
1
2

npx tsc --noEmit
npm test --silent -- --run
  • Estimated effort: 15–30 minutes

-2) Promote project title + move status badge into header (high)

  • Status: [x]
  • Motivation: The title should be prominent and the status badge near it for immediate context.
  • Files to edit: src/pages/ProjectDetail.vue
  • Change summary: Render project name as h1 (or is-size-4 Bulma) and place StatusBadge (or inline badge) top-right of the card header; customer links can be a subtitle under the title.
  • Acceptance criteria: Title is visually primary; status badge appears to the right of the title and has accessible text (not color-only).
  • Quick check: visually inspect dev server or run tests; run typecheck.
  • Estimated effort: 20–40 minutes

-3) Fix label spacing and punctuation (low)

  • Status: [x]
  • Motivation: There are nodes like Dates:Not set that lack spacing.
  • Files to edit: src/pages/ProjectDetail.vue (search for Dates: and similar strings)
  • Change summary: Add a space after colons or render labels and values as separate DOM nodes so CSS controls spacing.
  • Acceptance criteria: All label:value pairs render with a space between label and value.
  • Quick check: npx tsc --noEmit and manual glance in browser.
  • Estimated effort: 5–10 minutes

-4) Disable/hide links when no data (medium)

  • Status: [x]
  • Motivation: The “Schedule” link appears even though there is no schedule; this is confusing.
  • Files to edit: src/pages/ProjectDetail.vue
  • Change summary: Replace anchor with a muted span or button disabled state when the target resource is not present (v-if/v-else). Ensure keyboard focus respects the disabled state.
  • Acceptance criteria: No clickable links that go nowhere; links appear only when data exists.
  • Quick check: manual click test + npm test.
  • Estimated effort: 10–20 minutes

-5) Accessible progress bar (high)

  • Status: [x]
  • Motivation: Progress should expose ARIA attributes and should not show ambiguous “Not set” overlays.
  • Files to edit: src/pages/ProjectDetail.vue or src/components/ProgressBar.vue if present
  • Change summary: If progress is a number, render a div with role="progressbar", aria-valuenow, aria-valuemin="0", aria-valuemax="100" and visible percent text. If progress missing, show muted Progress: — Not set — text instead of a gray bar.
  • Acceptance criteria: Screen readers announce progress; no empty visual bar for missing data.
  • Quick check: npx tsc --noEmit + npm test + manual inspection.
  • Estimated effort: 20–30 minutes

-6) Conditional mini-timeline (medium)

  • Status: [x]
  • Motivation: Show mini-timeline only when start_date is present; otherwise show a short CTA or hint.
  • Files to edit: src/pages/ProjectDetail.vue, src/components/charts/EChart.vue (if option handling needed)
  • Change summary: Wrap timeline component in v-if="hasDates". If no dates, render a small CTA text: No schedule available with guidance.
  • Acceptance criteria: Timeline not rendered for projects missing start_date and end_date; when present, timeline works the same as other pages.
  • Quick check: run tests + visually verify page.
  • Estimated effort: 15–30 minutes

-7) Team avatars & hide empty team (low)

  • Status: [x]
  • Motivation: Use Avatar.vue to show team and hide the Team row when there are no members.
  • Files to edit: src/pages/ProjectDetail.vue, src/components/Avatar.vue
  • Change summary: Render list of Avatar components for project.team. If team empty, show — Not set — (covered by task 1).
  • Acceptance criteria: Avatars visible when team exists, otherwise hidden or single muted placeholder.
  • Quick check: unit test optional; manual visual verification.
  • Estimated effort: 15–30 minutes
  1. External links consolidation (low)
  • Status: [ ]
  • Motivation: The External Links block shows decorative placeholders; consolidate into one clear list or a CTA to add links.
  • Files to edit: src/pages/ProjectDetail.vue
  • Change summary: Render a UL of links when present; otherwise show single muted line with CTA text No external links.
  • Acceptance criteria: External links are shown as anchors when present and otherwise show single muted message.
  • Quick check: manual verification.
  • Estimated effort: 10–20 minutes
  1. Tests & typecheck (always run after edits)
  • Status: [ ]
  • Motivation: Keep changes safe — run typecheck and tests after each patch.
  • Commands to run locally:
1
2

npx tsc --noEmit
npm test --silent -- --run
  • Acceptance criteria: npx tsc --noEmit exits 0 and npm test shows no failing tests.

Marking progress

  • To mark a task done: change the line - Status: [ ] to - Status: [x], save, and commit the change.
  • Example commit command (fish):
1
2

git add docs/project-detail-todo.md src/pages/ProjectDetail.vue
git commit -m "fix(project): tidy ProjectDetail - hide empty fields"

If you want, I can apply the first fix (consolidate empty-state placeholders) now and update this list automatically. Reply with apply 1 to let me patch src/pages/ProjectDetail.vue or no to keep this as a plan only.

Additional suggestions (optional)

  • Consolidate header: show title, status, priority and a compact progress pill in the card header so the most important metadata appears above the fold. (See task 2 + accessible progress.)

  • Improve keyboard accessibility for timeline: make the mini-timeline keyboard-focusable and emit a clear chart-click payload shaped like { id, name, start, end } so other pages can re-use it.

  • Add ProjectDetail edge-case tests: cover projects with no dates, no team, and no external links. Prefer small inline test wrappers (current test approach) until SFC transform issues are resolved in the test environment.

  • Small visual polish: tighten vertical rhythm in the header, reduce tag paddings for compact metadata, and ensure color contrast on status tags (use readableTextColor).

Mark any of the above as done by changing the - [ ] to - [x] and committing.