Lesson 5.3 · 55 minLead card and notes

What you will have

The student has a lead card at /admin/leads/<id> showing everything known about one lead, with editable contact fields, notes that record author and time, and one-click buttons to call, email or open a messenger chat.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 4 — Building the card

Build the lead card at /admin/leads/<id>, replacing the placeholder.

Purpose: when the owner opens a lead, everything known about that person is
on one page, and contacting them takes one click.

Context: docs/crm-spec.md, the admin layout and lead list from the previous
lesson, the lead_notes table from the migrations.

The page has these sections, built as separate parts because later lessons
add status history, tasks, traffic source and a score to this page:
1. Header: the lead's name, the status badge (display only for now), and a
   link back to the list that returns to the same filters and page.
2. Contact: name, email, phone, with an Edit button. Editing validates on
   the server with the same rules the public form uses, and shows a clear
   error next to the field when a value is invalid.
3. Actions: "Call" (a tel: link), "Email" (a mailto: link) and "WhatsApp"
   (a click-to-chat link to the lead's number). Check the current official
   WhatsApp documentation for the link format rather than relying on memory,
   and tell me what you found. Hide any button whose data is missing.
4. Message: the original message, read-only, with line breaks preserved.
5. Source and dates: created date and time in the business time zone,
   created_via, and the stored source fields (utm_source, utm_medium,
   utm_campaign, referrer, landing_page). When they are empty, show
   "Source not recorded".
6. Notes: a text box and an "Add note" button; below it all notes for this
   lead, newest first, each with its author (the signed-in user's email)
   and time. Notes cannot be edited or deleted. An empty note cannot be
   saved. Show a friendly line when there are no notes yet.

Constraints: every read and write happens on the server for the signed-in
owner only. Opening an id that does not exist shows a "lead not found" page
with a link to the list, not an error. Text typed into notes must be shown
as plain text, never interpreted as HTML. No new libraries without asking.

Before you report, verify in a real browser using the browser connection;
when the login page appears, wait while I sign in myself. Check and report
on each: open a sample lead from the list; add a note, reload the page and
confirm the note is still there with author and time; edit the phone number,
reload and confirm the new value; try to save an invalid email and confirm
it is refused with a message; confirm a lead without a phone shows no Call
or WhatsApp button; open /admin/leads/ with a made-up id and confirm the
not-found page; look at the card at phone width. Then query the database
and confirm the note row and the edited phone are stored. Run the build.
Say plainly what you could not verify.

Do along

1. Pause after Part 3. Decide which messenger your customers use. In the prompt from Part 4, replace WhatsApp with your choice, or list two. For Telegram, tell Claude the documented format is t.me/+<phone number>.
2. Pause at the prompt in Part 4. Run the prompt. Sign in yourself when the browser asks.
3. After Part 5, open three sample leads and add a note to each, as if you had just called them.
4. Edit a contact field on one lead. Try an invalid value on another.
5. Put your own phone number on one sample lead and test Call and the messenger button from your phone. Change it back afterwards, or leave it — the lead is a sample.
6. Open the Supabase table view and find your notes and your edit.
7. Do the "Check your work" steps, then run the commit and tag commands that end the lesson.

Check your work

1. Open any lead from /admin/leads. Expected: name, contact details, message, a Source section and a Notes section.
2. Add a note, then reload the page. Expected: the note is still there, with your email and the time.
3. Open lead_notes in the Supabase table view. Expected: a row with your note's text.
4. Edit the phone number, save, reload. Expected: the new number on the card, and the same new number in the leads table.
5. Enter an invalid email and save. Expected: refused, with a message; the old email remains after reload.
6. Open a lead without a phone number. Expected: no Call or messenger button.
7. Tap Call on a phone. Expected: the dialler opens with the number.
8. Click "Back to list". Expected: the list with your earlier filters and page.

Common problems

• The note disappears after reload. → It was added to the screen but the save failed or never ran. → "Notes vanish on reload. Check the save on the server, show me the error, fix it, and verify by reloading in the browser and by querying lead_notes."
• Saving returns a permission error. → The write does not carry the owner's session, so Row Level Security blocks it. → "Writing to lead_notes is denied. Compare with how the lead list reads data and with the policies from the 5.1 migration."
• The time on a note is hours off. → Displayed in a different time zone. → "Show note times in the business time zone from docs/crm-spec.md."
• The messenger button opens an error page. → The number is not in the format the messenger expects, usually a missing country code. → Check the number on the lead; then tell Claude which default country code to add for numbers written without one.
• Call does nothing on a desktop computer. → No calling app is set up there. → Test on a phone; this is expected.
• Line breaks in the message are lost. → "Preserve line breaks in the message, still as plain text."

Homework

About 25 minutes, on your own, after the lesson. No later lesson depends on it.

1. A shape for your notes. Decide the three lines every note of yours should contain, for example: what was said, what they want, what you promised. Then add a note in that shape to five more sample leads, inventing a believable call for each. Deliverable: a section "How I write notes" in docs/crm-habits.md (your own notes; create it if missing), and the five notes. Done when: someone reading only the newest note on each of the five leads could tell what to do next.
2. Your first messages. Write by hand the first email and the first messenger message you would send to a new lead: under 60 words each, with a gap for the name and for what they asked about. Deliverable: a section "First messages" in the same file. Done when: each text can be read aloud in under 20 seconds and ends with one clear question or next step.
3. Would it survive a real call? Open one sample lead's card and imagine that person phones you now. Write down anything you looked for and could not find. Compare the list with "Out of scope" in docs/crm-spec.md before asking Claude for anything. Deliverable: the list, in the same file. Done when: each item is marked "already there", "out of scope" or "ask later".

If a task changed files in the project, commit and push without a tag.

Save your work

git add -A
git commit -m "Lesson 5.3: lead card with editable contact fields, notes and one-click actions"
git tag lesson-5.3
git push
git push --tags