Lead Funnel

The 6 Columns

Each column represents a stage in your sales pipeline. Leads flow left-to-right as they progress, or drop into Rejected at any point.

Drag-and-Drop

The funnel uses HTML5 drag-and-drop to move leads between columns. When you drop a card into a new column, a server action fires to update the lead status in the database. The UI updates optimistically so there is no visible delay.

• *Grab any lead card and drag it to the target column
• *Drop zones highlight as you hover over a valid column
• *Status updates are persisted immediately via server action
• *Cards show the estimated value, client name, and days in current status

Status Lifecycle

Leads follow a defined lifecycle. While you can drag to any column, the typical happy path flows like this:

// Lead status enum in Prisma schema
enum LeadStatus {
  NEW           // Just added — needs follow-up
  PROPOSAL_SENT // Proposal delivered, waiting for response
  WORKING_ON    // Client accepted, project in progress
  OUTSTANDING   // Invoice sent, awaiting payment
  PAID          // Payment received — done
  REJECTED      // Lead declined or lost
}

Lead-to-Client Conversion

When a lead moves to "Working On", the system checks whether a client record already exists for that email. If not, a new client is automatically created with the lead's contact information and referral source. This ensures every active project has a proper client attached for invoicing and profitability tracking.

// Server action: create a new lead
"use server";

import { prisma } from "@/lib/prisma";

export async function createLead(data: {
  name: string;
  email: string;
  source: string;
  estimatedValue: number;
}) {
  return prisma.lead.create({
    data: {
      ...data,
      status: "NEW",
    },
  });
}