Partner login

Track the buyers you have referred to {RF.name}.

Demonstration screen. The fields do nothing. In the live portal each person sets their own password from an emailed invite, and {RF.short} never sees it.

What Ready Finance gets

A portal for every referral partner, on your address, under your brand. Add partners as they are won, switch one off if a relationship ends.

{RF_INCLUDED.map((f, i) => (

{f}

))}

Cost is not on this page on purpose. Josh will talk it through with Ben directly rather than have a number sit here out of context.

Getting it live

Live in about a week, and most of that is waiting on Ready Finance. We never touch the existing website, we never need a login to it, and nothing is installed into it.

{RF_SETUP.map((s) => (

{s.title}

{s.body}

{s.who}

))}

The questions everyone asks

Can Coastline see what Ashgrove referred?

Never. Each partner sees only the buyers they referred. It is enforced in the database itself, not by hiding things on screen. Switch between partners on the demo board and watch the rows disappear.

Does this replace the CRM?

No. The CRM is where Ready Finance works. This is the window the referral partners look through, so they stop ringing for updates. Whatever is already in place stays.

Our pipeline does not look like this.

The stages are yours to set. The board on this page runs a home loan pipeline; the same product runs an asset finance pipeline for a dealership today, and they share almost no stages.

What about client privacy?

Data is held in Australia, encrypted, and separated per firm at the database level. Partners see only their own referrals. A written data processing agreement is provided before anything goes live.

What if a referral relationship ends?

Switch that portal off. Their access dies immediately and the deals stay on the Ready Finance board.

Can partners lodge referrals through it?

That is next on the build list. Today they watch; shortly they will be able to lodge a referral straight onto the board.

Last updated: {rfWhen(deal.updated)}

Referred by: {partner && } {deal.partnerName}

{rfWhen(n.w)}

{n.t}
{n.by &&
by {n.by}
}

{canEdit && (

Add an update

setNoteText(e.target.value)}
                              placeholder="Valuation came back at contract…" />
                    <button type="submit" className="btn primary deal-btn-sm" disabled={!noteText.trim()}>
                      Add note
                    </button>
                  </form>
                </div>
              )}
            </div>
          </td>
        </tr>
      )}
    </React.Fragment>
  );
}

// ---- one stage group ----------------------------------------------------

function RfGroup({ stage, deals, collapsed, onToggleGroup, openIds, onToggleRow, ...rowProps }) {
  const tone = rfTone(stage);
  const headingId = `rf-group-${stage.replace(/\s+/g, '-').toLowerCase()}`;

return (
    <section className="board-group" aria-labelledby={headingId}>
      <h2 className={`board-group-head tone-${tone}`}>
        <button type="button" className="board-group-btn" id={headingId}
                aria-expanded={!collapsed} onClick={() => onToggleGroup(stage)}>
          <span className="board-caret" aria-hidden="true">{collapsed ? '▸' : '▾'}</span>
          <span className="board-group-name">{stage}</span>
          <span className="board-group-count">{deals.length}</span>
        </button>
      </h2>

{!collapsed && (
        <div className="board-table-wrap">
          <table className="board-table">
            <thead>
              <tr>
                <th scope="col" className="board-cell-vehicle">{RF.itemLabel}</th>
                <th scope="col" className="board-cell-name">{RF.customerLabel}</th>
                <th scope="col" className="board-cell-phone">Phone</th>
                <th scope="col" className="board-cell-note">Latest note</th>
                <th scope="col" className="board-cell-status">Status</th>
              </tr>
            </thead>
            <tbody>
              {deals.map((d) => (
                <RfRow key={d.id} deal={d} {...rowProps}
                       open={openIds.has(d.id)} onToggle={() => onToggleRow(d.id)} />
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  );
}

// ---- page ---------------------------------------------------------------

function ReadyFinanceDemoPage() {
  rfNoIndex();

const [mode, setMode] = useStateRf('board');          // 'board' | 'login' | 'how'
  const [viewer, setViewer] = useStateRf('staff');
  const [overrides, setOverrides] = useStateRf({});     // dealId -> { stage, notes, updated }
  const [openIds, setOpenIds] = useStateRf(() => new Set());
  const [collapsed, setCollapsed] = useStateRf(() => new Set());

useEffectRf(() => {
    document.title = `Referral Partner Portal · ${RF.name} demo`;
  }, []);

const reset = () => {
    setOverrides({});
    setOpenIds(new Set());
  };

// Seed data merged with anything changed during the demo.
  const allDeals = useMemoRf(() => RF_DEALS.map((d) => {
    const o = overrides[d.id] || {};
    const partner = RF_PARTNERS.find((p) => p.id === d.partner);
    return {
      ...d,
      stage: o.stage || d.stage,
      notes: o.notes || d.notes,
      updated: o.updated || d.updated,
      partnerName: partner ? partner.name : '',
    };
  }), [overrides]);

const isStaff = viewer === 'staff';
  const activePartner = isStaff ? null : RF_PARTNERS.find((p) => p.id === viewer);

// The whole point of the demo. A partner sees only their own referrals, and
  // the count in the scope line makes the other rows' absence explicit rather
  // than something Ben has to take on faith.
  const visible = isStaff ? allDeals : allDeals.filter((d) => d.partner === viewer);

const toggleRow = (id) => setOpenIds((prev) => {
    const next = new Set(prev);
    if (next.has(id)) next.delete(id); else next.add(id);
    return next;
  });

const toggleGroup = (stage) => setCollapsed((prev) => {
    const next = new Set(prev);
    if (next.has(stage)) next.delete(stage); else next.add(stage);
    return next;
  });

// Stage changes write their own history entry, exactly as the live product
  // does. It is the detail that makes the demo feel real rather than clickable.
  const changeStage = (id, stage) => {
    const deal = allDeals.find((d) => d.id === id);
    if (!deal || deal.stage === stage) return;
    const entry = {
      t: `Stage changed from "${deal.stage}" to "${stage}".`,
      w: new Date().toISOString(),
      by: 'You (demo)',
    };
    setOverrides((prev) => ({
      ...prev,
      [id]: { stage, notes: [entry, ...deal.notes], updated: entry.w },
    }));
  };

// Signing in on the mock lands on a partner's read-only board, which is the
  // view the login screen implies. Which partner is not chosen on that screen
  // (see RfLoginMock); Josh switches between them from the demo bar.
  const enterAsPartner = () => {
    setViewer(RF_PARTNERS[0].id);
    setMode('board');
  };

const dirty = Object.keys(overrides).length > 0;

return (
    <div className="deal-shell pd-shell rf-shell" style={{ '--pd-accent': RF.accent }}>
      <RfDemoBar
        viewer={viewer}
        onViewer={setViewer}
        onReset={reset}
        dirty={dirty}
        mode={mode}
        onMode={setMode}
      />

{mode === 'login' && (
        <div className="deal-page">
          <RfLoginMock onEnter={enterAsPartner} />
        </div>
      )}

{mode === 'how' && (
        <div className="deal-page">
          <RfHowItWorks />
          <footer className="pd-foot">
            <p className="pd-foot-credit">
              Referral Partner Portal · built by{' '}
              <a href="https://brokenmind.com.au" target="_blank" rel="noopener noreferrer">BrokenMind Software</a>
            </p>
          </footer>
        </div>
      )}

{mode === 'board' && (
      <React.Fragment>
      <div className="pd-note">
        <strong>{RF.name}.</strong> Home loans. Agents, buyers advocates,
        conveyancers and accountants watch the buyers they sent through.
      </div>

<div className="deal-page">
        {/* Their branding on their own address. This header is the answer to
            "so it sits on my website?" */}
        <header className="pd-brandbar rf-brandbar">
          <div className="pd-brand">
            <img src={RF.logo} alt={RF.name} className="rf-brand-logo" />
            <span className="rf-brand-domain">{RF.domain}</span>
          </div>
          <div className="pd-whoami">
            {isStaff ? (
              <React.Fragment>
                <span className="deal-role">Ready Finance staff</span>
                <span className="pd-whoami-sub">Full access · all referral partners</span>
              </React.Fragment>
            ) : (
              // Co-branded: Ready Finance's portal, but the agency looking at
              // it sees itself in the corner.
              <div className="rf-whoami-partner">
                <RfAgencyMark partner={activePartner} />
                <span className="rf-whoami-text">
                  <span className="deal-role">{activePartner.name}</span>
                  <span className="pd-whoami-sub">
                    Signed in as {activePartner.signedInAs} · {activePartner.kind} · view only
                  </span>
                </span>
              </div>
            )}
          </div>
        </header>

<div className="pd-scope">
          {isStaff ? (
            <React.Fragment>
              Showing <strong>all {allDeals.length} buyers</strong> across{' '}
              <strong>{RF_PARTNERS.length} referral partners</strong>. Change a stage or add a
              note and the partner sees it immediately.
            </React.Fragment>
          ) : (
            <React.Fragment>
              Showing <strong>{visible.length} of {allDeals.length} buyers</strong>. {activePartner.name}{' '}
              can only ever see the {visible.length} they referred. The other{' '}
              {allDeals.length - visible.length} belong to different partners and are invisible here.
            </React.Fragment>
          )}
        </div>

{grouped.length === 0 ? (
          <p className="deal-empty">No buyers on this board yet.</p>
        ) : (
          grouped.map(({ stage, rows }) => (
            <RfGroup
              key={stage}
              stage={stage}
              deals={rows}
              collapsed={collapsed.has(stage)}
              onToggleGroup={toggleGroup}
              openIds={openIds}
              onToggleRow={toggleRow}
              canEdit={isStaff}
              onStage={changeStage}
              onNote={addNote}
            />
          ))
        )}

<footer className="pd-foot">
          <p>
            Demonstration only. Every applicant, property, phone number and note
            on this page is invented. No real customer information is stored or
            displayed. The Ready Finance logo is used with permission for this
            demonstration.
          </p>
          <p className="pd-foot-credit">
            Referral Partner Portal · built by{' '}
            <a href="https://brokenmind.com.au" target="_blank" rel="noopener noreferrer">BrokenMind Software</a>
          </p>
        </footer>
      </div>
      </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { ReadyFinanceDemoPage });