Plan card

import { Lozenge } from '@/ui/lozenge';
import { PlanCard, PlanChoice, PlanCount, PlanItem, PlanSection } from '@/ui/plan-card';

// Leave a row out, pick what to do with Owen Hart, then Approve or Deny.
export default function PlanCardImport() {
  const wait = () => new Promise<void>((done) => setTimeout(done, 900));
  return (
    <PlanCard
      className="max-w-130"
      title="Import 3 Companies, 4 Jobs and 212 Candidates"
      sources="Northbridge tracker.xlsx · Shortlists Q3.csv"
      proposedAt="10:42"
      onOpenPlan={() => {}}
      note="1 left out. Undo import takes it back for 14 days."
      onApprove={wait}
      onDeny={wait}
      onUndo={wait}
    >
      <PlanSection>
        <PlanCount label="Companies">2 new · 1 fills empty fields</PlanCount>
        <PlanCount label="Jobs">4 new</PlanCount>
        <PlanCount label="Candidates">198 new · 12 match existing · 2 need you</PlanCount>
      </PlanSection>
      <PlanSection title="New fields">
        <p className="flex flex-wrap items-center gap-050">
          Visa status <span className="text-text-subtle">on Candidates</span>
          <Lozenge>Sponsored</Lozenge>
          <Lozenge>Right to work</Lozenge>
        </p>
      </PlanSection>
      <PlanSection title="Stages">
        <p>
          Sent to client <span className="text-text-subtle">→</span> CV sent
        </p>
        <p className="flex flex-wrap items-center gap-050">
          Final <span className="text-text-subtle">→</span> Interview <Lozenge appearance="warning">Guessed</Lozenge>
        </p>
      </PlanSection>
      <PlanSection title="Candidates">
        <PlanItem name="Maya Chen" status={<Lozenge appearance="success">New</Lozenge>} />
        <PlanItem name="Test Person" defaultIncluded={false} status={<Lozenge appearance="success">New</Lozenge>} />
        <PlanItem name="Owen Hart" description="Looks like Owen Hart at Brightwave, already in Ascern." status={<Lozenge>Matches existing</Lozenge>}>
          <PlanChoice
            label="What to do with Owen Hart"
            defaultValue="link"
            options={[
              ['link', 'Link to existing'],
              ['create', 'Create anyway'],
              ['skip', 'Skip'],
            ]}
          />
        </PlanItem>
        <p className="ps-300 text-text-subtle">And 209 more</p>
      </PlanSection>
      <PlanSection title="Needs you">
        <p className="text-text-subtle">Shortlists Q3.csv row 14: no email or phone, so Ascern can’t tell who this is.</p>
      </PlanSection>
    </PlanCard>
  );
}

import { PlanCard } from '@/ui/plan-card';

// Writing in parts with the row count, then one status line: imported with Undo, denied, expired or failed.
export default function PlanCardOutcomes() {
  const title = 'Import 3 Companies, 4 Jobs and 212 Candidates';
  const none = () => {};
  return (
    <div className="flex w-full max-w-130 flex-col gap-150">
      <PlanCard title={title} status="importing" progress={{ value: 124, max: 219 }} onApprove={none} onDeny={none} />
      <PlanCard title={title} status="imported" onApprove={none} onDeny={none} onUndo={none} />
      <PlanCard title={title} status="denied" onApprove={none} onDeny={none} />
      <PlanCard title={title} status="expired" onApprove={none} onDeny={none} />
      <PlanCard title={title} status="failed" outcome="the tracker changed since Flo read it." onApprove={none} onDeny={none} />
    </div>
  );
}

import { Link } from '@/ui/link';
import { Lozenge } from '@/ui/lozenge';
import { PlanCard, PlanItem, PlanSection } from '@/ui/plan-card';

// Companies that can't be added say why and have no tick box.
export default function PlanCardTargets() {
  const wait = () => new Promise<void>((done) => setTimeout(done, 900));
  return (
    <PlanCard
      className="max-w-130"
      title="Add 3 fintech targets for Northbridge"
      proposedAt="10:42"
      note="2 targets to add. Undo import takes them back for 14 days."
      onApprove={wait}
      onDeny={wait}
    >
      <PlanSection>
        <PlanItem
          name="Brightwave Payments · Tier 1"
          description={
            <>
              Hiring 6 data roles since its Series C in August. Lena Ford · Head of Talent ·{' '}
              <Link href="#lena-ford" external>
                LinkedIn
              </Link>
            </>
          }
          status={<Lozenge appearance="success">New company</Lozenge>}
        />
        <PlanItem name="Lumen Ledger · Tier 2" description="New London platform team." status={<Lozenge appearance="success">New company</Lozenge>} />
        <PlanItem name="Halcyon Bank" blocked="Already a client." status={<Lozenge appearance="danger">Do not contact</Lozenge>} />
      </PlanSection>
    </PlanCard>
  );
}

import { Lozenge } from '@/ui/lozenge';
import { PlanCard, PlanItem, PlanSection } from '@/ui/plan-card';

// Every row left out or blocked: Approve can't be pressed, and the note says why.
export default function PlanCardNothing() {
  const none = () => {};
  return (
    <PlanCard className="max-w-130" title="Add 1 target for Northbridge" note="Nothing left to add." approveDisabled onApprove={none} onDeny={none}>
      <PlanSection>
        <PlanItem name="Halcyon Bank" blocked="Already a target." status={<Lozenge>Already a target</Lozenge>} />
      </PlanSection>
    </PlanCard>
  );
}