Lane Board

'use client';

import { useState } from 'react';
import { LaneBoard, type LaneBoardLane } from '@/components/panelui/lane-board';

interface Change {
  id: string;
  title: string;
  /** How many of the five checks have passed. */
  checks: number;
  /** How long it has been in its lane. */
  waiting: string;
}

/** The changes going into one release, by how far along each is. */
const START: LaneBoardLane<Change>[] = [
  {
    id: 'queued',
    title: 'Queued',
    cards: [
      { id: 'REL-231', title: 'Offline drafts', checks: 0, waiting: '2d' },
      { id: 'REL-238', title: 'Export to CSV', checks: 1, waiting: '5h' },
    ],
  },
  {
    id: 'building',
    title: 'Building',
    cards: [
      { id: 'REL-224', title: 'Faster search', checks: 2, waiting: '1d' },
      { id: 'REL-229', title: 'Invite by link', checks: 3, waiting: '3h' },
      { id: 'REL-233', title: 'Keyboard shortcuts', checks: 2, waiting: '40m' },
      { id: 'REL-236', title: 'Saved filters', checks: 1, waiting: '25m' },
      { id: 'REL-240', title: 'Bulk archive', checks: 0, waiting: '10m' },
    ],
  },
  {
    id: 'review',
    title: 'In review',
    cards: [{ id: 'REL-219', title: 'Audit log', checks: 4, waiting: '6h' }],
  },
  {
    id: 'shipped',
    title: 'Shipped',
    cards: [
      { id: 'REL-207', title: 'Two-step sign in', checks: 5, waiting: '' },
      { id: 'REL-212', title: 'Dark charts', checks: 5, waiting: '' },
    ],
  },
];

export default function LaneBoardRelease() {
  const [lanes, setLanes] = useState(START);

  return (
    <LaneBoard
      lanes={lanes}
      onLanesChange={setLanes}
      label="Release 4.2"
      height="30rem"
      cardName={(change) => change.title}
      renderCard={(change, { lane }) => (
        <>
          <LaneBoard.Title>{change.title}</LaneBoard.Title>
          <LaneBoard.Code>{change.id}</LaneBoard.Code>
          <LaneBoard.Row>
            <LaneBoard.Steps value={change.checks} color="info" label="Checks passed" />
            {lane.id === 'shipped' ? (
              <LaneBoard.Tag color="success">Live</LaneBoard.Tag>
            ) : (
              <LaneBoard.Meta>{change.waiting}</LaneBoard.Meta>
            )}
          </LaneBoard.Row>
        </>
      )}
    />
  );
}

'use client';

import { PlusIcon } from 'lucide-react';
import { useState } from 'react';
import { LaneBoard, type LaneBoardColor, type LaneBoardLane } from '@/components/panelui/lane-board';

type Priority = 'Low' | 'Normal' | 'Urgent';

interface Ticket {
  id: string;
  title: string;
  priority: Priority;
  /** Whose it is, as initials. */
  owner: string;
  /** How many of its four checks have passed. */
  checks: number;
}

const TONE: Record<Priority, LaneBoardColor> = {
  Low: 'primary',
  Normal: 'info',
  Urgent: 'destructive',
};

/** One sprint of a support team. Each lane has a colour, and two have a limit. */
const START: LaneBoardLane<Ticket>[] = [
  {
    id: 'inbox',
    title: 'Inbox',
    color: 'primary',
    cards: [
      { id: 'SUP-481', title: 'Refund not showing', priority: 'Urgent', owner: 'NO', checks: 0 },
      { id: 'SUP-479', title: 'Change the invoice name', priority: 'Low', owner: 'HL', checks: 0 },
    ],
  },
  {
    id: 'working',
    title: 'Working on',
    color: 'info',
    limit: 2,
    cards: [
      { id: 'SUP-472', title: 'Login loop on tablets', priority: 'Urgent', owner: 'TA', checks: 2 },
      { id: 'SUP-476', title: 'Export stops at row 500', priority: 'Normal', owner: 'NO', checks: 1 },
    ],
  },
  {
    id: 'waiting',
    title: 'Waiting on customer',
    color: 'warning',
    limit: 3,
    cards: [{ id: 'SUP-468', title: 'Which plan were you on?', priority: 'Normal', owner: 'HL', checks: 3 }],
  },
  {
    id: 'solved',
    title: 'Solved',
    color: 'success',
    cards: [{ id: 'SUP-461', title: 'Password reset email', priority: 'Low', owner: 'TA', checks: 4 }],
  },
];

export default function LaneBoardSprint() {
  const [lanes, setLanes] = useState(START);
  const [made, setMade] = useState(0);

  const add = (laneId: string) => {
    const id = `SUP-${482 + made}`;
    setMade(made + 1);
    setLanes((current) =>
      current.map((lane) =>
        lane.id === laneId
          ? {
              ...lane,
              cards: [...lane.cards, { id, title: 'New ticket', priority: 'Normal', owner: 'NO', checks: 0 }],
            }
          : lane
      )
    );
  };

  return (
    <LaneBoard
      lanes={lanes}
      onLanesChange={setLanes}
      label="Support sprint"
      cardName={(ticket) => ticket.title}
      renderCard={(ticket) => (
        <>
          <div className="flex items-start justify-between gap-3">
            <LaneBoard.Title className="whitespace-normal text-sm leading-snug">
              {ticket.title}
            </LaneBoard.Title>
            <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground">
              {ticket.owner}
            </span>
          </div>
          <LaneBoard.Code className="text-xs">{ticket.id}</LaneBoard.Code>
          <LaneBoard.Row>
            <LaneBoard.Tag color={TONE[ticket.priority]}>{ticket.priority}</LaneBoard.Tag>
            <LaneBoard.Steps value={ticket.checks} max={4} color="success" label="Checks passed" />
          </LaneBoard.Row>
        </>
      )}
      renderLaneFooter={(lane) =>
        lane.id === 'inbox' ? (
          <button
            type="button"
            onClick={() => add(lane.id)}
            className="flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-2xl text-sm text-muted-foreground outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
          >
            <PlusIcon className="size-4" />
            Add a ticket
          </button>
        ) : null
      }
    />
  );
}

'use client';

import { useState } from 'react';
import { LaneBoard, type LaneBoardLane } from '@/components/panelui/lane-board';

interface Task {
  id: string;
  title: string;
  /** How many of its three steps are done. */
  done: number;
}

const START: LaneBoardLane<Task>[] = [
  {
    id: 'todo',
    title: 'To do',
    cards: [
      { id: 'T-14', title: 'Write the migration', done: 1 },
      { id: 'T-17', title: 'Update the runbook', done: 3 },
    ],
  },
  { id: 'doing', title: 'Doing', cards: [{ id: 'T-11', title: 'Rotate the keys', done: 2 }] },
  { id: 'done', title: 'Done', cards: [] },
];

export default function LaneBoardRules() {
  const [lanes, setLanes] = useState(START);
  const [refused, setRefused] = useState<string | null>(null);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <LaneBoard
        lanes={lanes}
        height="18rem"
        // The board proposes and this decides: a task with steps left is not
        // let into Done, by not applying the lanes it was offered.
        onLanesChange={(next) => {
          const unfinished = next
            .find((lane) => lane.id === 'done')
            ?.cards.find((task) => task.done < 3);
          if (unfinished) {
            setRefused(unfinished.title);
            return;
          }
          setRefused(null);
          setLanes(next);
        }}
        cardName={(task) => task.title}
        renderCard={(task) => (
          <>
            <LaneBoard.Title>{task.title}</LaneBoard.Title>
            <LaneBoard.Row>
              <LaneBoard.Steps value={task.done} max={3} color="success" label="Steps done" />
              <LaneBoard.Meta>{task.done}/3</LaneBoard.Meta>
            </LaneBoard.Row>
          </>
        )}
      />
      <p className="min-h-5 text-sm text-muted-foreground" aria-live="polite">
        {refused ? `${refused} still has steps left, so it stays where it was.` : 'Only a task with all three steps done can go to Done.'}
      </p>
    </div>
  );
}