/* Backentra — Core pipeline page. The one path everything hangs off: a lead becomes a scheduled job and the job becomes an invoice, without retyping. Content mirrors guidelines/features/core-pipeline.card.html so the site and the design system agree. window.BackentraPipeline */ const CP = window.BackentraDesignSystem_93cf3a; const { Button: CBtn, Icon: CIcon } = CP; const ccontainer = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" }; const ceyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" }; const CP_STAGES = [ { n: 1, icon: "target", title: "Lead", tag: ["Can arrive automatically", "accent"], body: "Someone gets in touch. A phone call, a form, a Local Services lead, a referral, or an office member typing it in. Where it came from is captured now, so nobody reconstructs it later.", caught: ["Contact and property address", "What they are asking for", "Where the lead came from", "Who owns it"] }, { n: 2, icon: "calendar-check", title: "Estimate appointment", tag: ["Skippable", "info"], body: "Someone goes out to look. The appointment lands on the calendar against the lead, assigned to an estimator, and the client is told. Work priced from a photo or a phone call skips this entirely.", caught: ["Date, time and who is going", "Travel and the surrounding day", "Site notes and photos"] }, { n: 3, icon: "file-signature", title: "Proposal and approval", tag: null, body: "The work gets priced and sent for signature. Line items come off the service catalogue, tax applies, and the client opens it on their phone, reads the scope and terms, and signs in the portal. Approval is what turns priced work into real work.", caught: ["Line items, quantities, rates", "Materials and labour", "Scope, terms, deposit", "Signature and timestamp"] }, { n: 4, icon: "calendar-clock", title: "Scheduled job", tag: ["Assisted", "accent"], body: "Approved work lands in the schedule queue and gets a date and a crew. Your own scheduling rules are applied here, so a recommended date arrives with the reasoning attached rather than as a black box.", caught: ["Date, window, duration", "Crew and equipment assigned", "Route position for the day"] }, { n: 5, icon: "receipt", title: "Invoice sent", tag: null, body: "The invoice is built from the approved proposal plus whatever changed on site, and goes out. No one rebuilds it from a notepad, because the priced work and the recorded work are already on the record.", caught: ["Amount, terms, due date", "What changed from the proposal", "Sent, viewed, chased"] }, { n: 6, icon: "circle-check", title: "Payment received", tag: null, done: true, body: "Paid by card or ACH, reconciled against the invoice. This is where the record closes, and where job costing becomes real: revenue against the hours and materials the work actually used.", caught: ["Amount and method", "Date received", "True job cost against revenue"] }, ]; const CP_CARRY = ["client", "property address", "contact preferences", "source", "scope of work", "line items", "price", "photos", "notes", "assigned crew", "hours", "materials", "signature"]; const CP_WHERE = [ ["Lead", "Full intake and assignment", "Quick intake", "Request work"], ["Estimate appointment", "Book, reschedule, assign", "See it, drive to it", "See the booked time"], ["Proposal and approval", "Price, send, track", "Build and send on site", "Read and sign"], ["Scheduled job", "Queue, rules, crews", "See the day", "See the date"], ["Invoice sent", "Build, send, chase", "Send from the field", "Receive and read"], ["Payment received", "Reconcile and report", "Take payment on site", "Pay it"], ]; /* Each pipeline stage, and the actions that carry the record through it. */ const CP_MAP = [ ["Lead", ["Collect the lead"]], ["Estimate appointment", ["Book the estimate appointment", "Go to the appointment"]], ["Proposal and approval", ["Submit the proposal", "Receive the approval"]], ["Scheduled job", ["Schedule the job", "Complete the job"]], ["Invoice sent", ["Send out the invoice"]], ["Payment received", ["Collect the payment"]], ]; const CP_TAG = { accent: ["var(--orange-50)", "var(--orange-700)"], info: ["var(--info-soft)", "var(--info)"] }; function PipelinePage({ onNav, onJoin }) { React.useEffect(() => { window.BackentraSetMeta && window.BackentraSetMeta({ path: "/how-it-works", title: "How It Works — Backentra", description: "A lead becomes a scheduled job and the job becomes an invoice, without anyone retyping it. The six stages that carry a job from first call to paid.", }); }, []); return (
Features · Core pipeline

One record, from the first call to paid.

A lead becomes a scheduled job, and the job becomes an invoice, without anyone retyping it. That is the whole idea, and everything else in Backentra hangs off it.

}>Join the list
{/* the spine */}
The six stages

How the work moves.

Not every job goes through all six. Small work is often priced without a site visit, and repeat work goes straight to scheduling. It is a spine, not a gate.

{CP_STAGES.map((s, i) => (
{s.n} {i < CP_STAGES.length - 1 && }

{s.title}

{s.tag && {s.tag[0]}}

{s.body}

{s.caught.map((c) => ( {c} ))}
))}
{/* pipeline beside workflow */}
Pipeline and workflow

Two different things, side by side.

A pipeline stage is a state the record sits in. A workflow step is an action someone takes to move it. Reporting runs on the left column. Daily work happens in the right one.

Pipeline stage · a state
Workflow · what someone does
{CP_MAP.map(([stage, steps], i) => (
{i + 1} {stage}
{steps.map((st) => (
{st}
))}
))}

Nine actions, six states. Two stages take two actions to clear, which is exactly where work stalls and why the two are worth tracking separately.

{/* what carries */}
Entered once

Nobody retypes any of this.

Each of these is captured at the earliest stage that knows it, and carries the rest of the way. That is the specific thing that makes the pipeline worth having.

{CP_CARRY.map((c) => ( {c} ))}
{/* where each stage lives */}
Across the surfaces

The same pipeline, wherever you are.

The office does everything. The field app is deliberately narrower, built for the day of work. Clients see only their own side.

{["Stage", "Web app", "Mobile app", "Client portal"].map((h) => ( ))} {CP_WHERE.map((row, i) => ( {row.slice(1).map((v, j) => )} ))}
{h}
{row[0]}{v}
{/* honest note + cta */}
Still being built

This is the pipeline we are building, not a product you can use today. Stages, screens and behavior are all subject to change before launch, and we will say plainly what is ready when we get there.

Want to see it when it's ready?

Founding members get walked through it before anyone else.

}>Join the list
); } window.BackentraPipeline = PipelinePage;