385 lines
11 KiB
TypeScript
385 lines
11 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
|
import {
|
|
api,
|
|
type FollowUp,
|
|
type PendingNda,
|
|
type Staff,
|
|
type Today as TodayData,
|
|
type Todo,
|
|
} from '../api.js';
|
|
import { DEAL_LABELS, Dialog, Panel, StatusBadge, formatDay } from '../components.js';
|
|
import { TodoRow } from '../workflow.js';
|
|
|
|
const INPUT = 'w-full rounded border border-gray-300 px-2 py-1 text-sm';
|
|
|
|
/** Groups anything with a person attached, for the team tab. */
|
|
function groupBy<T>(rows: T[], name: (row: T) => string): [string, T[]][] {
|
|
const groups = new Map<string, T[]>();
|
|
for (const row of rows) {
|
|
const key = name(row);
|
|
groups.set(key, [...(groups.get(key) ?? []), row]);
|
|
}
|
|
return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
|
|
}
|
|
|
|
export default function Today({
|
|
staff,
|
|
onOpenBuyer,
|
|
onOpenBusiness,
|
|
onChanged,
|
|
}: {
|
|
staff: Staff;
|
|
onOpenBuyer: (id: string) => void;
|
|
onOpenBusiness: (id: string) => void;
|
|
/** Lets the nav badge follow along after every action. */
|
|
onChanged: () => void;
|
|
}) {
|
|
const [team, setTeam] = useState(false);
|
|
const [data, setData] = useState<TodayData | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [followUp, setFollowUp] = useState<FollowUp | null>(null);
|
|
const [ending, setEnding] = useState<FollowUp | null>(null);
|
|
|
|
const load = useCallback(
|
|
() =>
|
|
api
|
|
.today(team ? undefined : staff.id)
|
|
.then((res) => {
|
|
setData(res);
|
|
setError(null);
|
|
})
|
|
.catch((err: Error) => setError(err.message)),
|
|
[team, staff.id],
|
|
);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
async function refresh() {
|
|
await load();
|
|
onChanged();
|
|
}
|
|
|
|
const empty =
|
|
data &&
|
|
data.todos.length === 0 &&
|
|
data.follow_ups.length === 0 &&
|
|
data.pending_ndas.length === 0;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-1">
|
|
{[
|
|
{ label: 'My day', value: false },
|
|
{ label: 'Team', value: true },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.label}
|
|
onClick={() => setTeam(tab.value)}
|
|
className={`rounded px-3 py-1.5 text-sm ${
|
|
team === tab.value
|
|
? 'bg-gray-900 text-white'
|
|
: 'border border-gray-300 bg-white hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{data && (
|
|
<span className="text-sm text-gray-500">
|
|
{data.counts.overdue_todos > 0 && (
|
|
<span className="font-medium text-red-600">{data.counts.overdue_todos} overdue</span>
|
|
)}
|
|
{data.counts.overdue_todos > 0 && ' · '}
|
|
{data.counts.total} item{data.counts.total === 1 ? '' : 's'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
|
|
{empty && (
|
|
<div className="rounded border border-gray-200 bg-white px-4 py-10 text-center text-sm text-gray-500">
|
|
Nothing due. Enjoy your coffee.
|
|
</div>
|
|
)}
|
|
|
|
{data && data.todos.length > 0 && (
|
|
<Panel title="Todos">
|
|
{team ? (
|
|
groupBy(data.todos, (todo) => todo.assigned_to.name).map(([name, todos]) => (
|
|
<div key={name} className="mb-2 last:mb-0">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-gray-500">{name}</p>
|
|
<TodoList todos={todos} onChanged={refresh} open={{ onOpenBuyer, onOpenBusiness }} />
|
|
</div>
|
|
))
|
|
) : (
|
|
<TodoList todos={data.todos} onChanged={refresh} open={{ onOpenBuyer, onOpenBusiness }} />
|
|
)}
|
|
</Panel>
|
|
)}
|
|
|
|
{data && data.follow_ups.length > 0 && (
|
|
<Panel title="Follow-ups due">
|
|
{team ? (
|
|
groupBy(data.follow_ups, (row) => row.created_by_name ?? 'unassigned').map(
|
|
([name, rows]) => (
|
|
<div key={name} className="mb-2 last:mb-0">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-gray-500">{name}</p>
|
|
{rows.map((row) => (
|
|
<FollowUpRow
|
|
key={row.id}
|
|
row={row}
|
|
onOpenBuyer={onOpenBuyer}
|
|
onOpenBusiness={onOpenBusiness}
|
|
onFollowUp={setFollowUp}
|
|
onEnd={setEnding}
|
|
/>
|
|
))}
|
|
</div>
|
|
),
|
|
)
|
|
) : (
|
|
data.follow_ups.map((row) => (
|
|
<FollowUpRow
|
|
key={row.id}
|
|
row={row}
|
|
onOpenBuyer={onOpenBuyer}
|
|
onOpenBusiness={onOpenBusiness}
|
|
onFollowUp={setFollowUp}
|
|
onEnd={setEnding}
|
|
/>
|
|
))
|
|
)}
|
|
</Panel>
|
|
)}
|
|
|
|
{data && data.pending_ndas.length > 0 && (
|
|
<Panel title="NDA signatures pending">
|
|
{data.pending_ndas.map((row) => (
|
|
<PendingNdaRow key={row.id} row={row} team={team} onOpenBuyer={onOpenBuyer} />
|
|
))}
|
|
</Panel>
|
|
)}
|
|
|
|
{followUp && (
|
|
<FollowUpDialog
|
|
row={followUp}
|
|
onClose={() => setFollowUp(null)}
|
|
onDone={() => {
|
|
setFollowUp(null);
|
|
void refresh();
|
|
}}
|
|
/>
|
|
)}
|
|
{ending && (
|
|
<EndDealDialog
|
|
row={ending}
|
|
onClose={() => setEnding(null)}
|
|
onDone={() => {
|
|
setEnding(null);
|
|
void refresh();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TodoList({
|
|
todos,
|
|
onChanged,
|
|
open,
|
|
}: {
|
|
todos: (Todo & { overdue?: boolean })[];
|
|
onChanged: () => void;
|
|
open: { onOpenBuyer: (id: string) => void; onOpenBusiness: (id: string) => void };
|
|
}) {
|
|
return (
|
|
<ul className="flex flex-col">
|
|
{todos.map((todo) => (
|
|
<TodoRow
|
|
key={todo.id}
|
|
todo={todo}
|
|
onChanged={onChanged}
|
|
onOpenContext={(context) => {
|
|
// Deals and rounds live on the buyer page, so that wins when both exist.
|
|
if (context.buyer_id) open.onOpenBuyer(context.buyer_id);
|
|
else if (context.business_id) open.onOpenBusiness(context.business_id);
|
|
}}
|
|
/>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
function FollowUpRow({
|
|
row,
|
|
onOpenBuyer,
|
|
onOpenBusiness,
|
|
onFollowUp,
|
|
onEnd,
|
|
}: {
|
|
row: FollowUp;
|
|
onOpenBuyer: (id: string) => void;
|
|
onOpenBusiness: (id: string) => void;
|
|
onFollowUp: (row: FollowUp) => void;
|
|
onEnd: (row: FollowUp) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2 border-b border-gray-100 py-2 text-sm last:border-0">
|
|
<span className="min-w-0 flex-1">
|
|
<button onClick={() => onOpenBuyer(row.buyer_id)} className="text-blue-600 hover:underline">
|
|
{row.buyer_name}
|
|
</button>{' '}
|
|
about{' '}
|
|
<button
|
|
onClick={() => onOpenBusiness(row.business_id)}
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
{row.business_name}
|
|
</button>
|
|
, info sent <span className="text-gray-500">{formatDay(row.follow_up_at)}</span>
|
|
</span>
|
|
<StatusBadge status={row.status} label={DEAL_LABELS[row.status]} />
|
|
<button
|
|
onClick={() => onFollowUp(row)}
|
|
className="rounded border border-gray-300 bg-white px-2 py-1 text-xs hover:bg-gray-100"
|
|
>
|
|
Follow-up sent…
|
|
</button>
|
|
<button
|
|
onClick={() => onEnd(row)}
|
|
className="rounded border border-gray-300 bg-white px-2 py-1 text-xs hover:bg-gray-100"
|
|
>
|
|
End deal…
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PendingNdaRow({
|
|
row,
|
|
team,
|
|
onOpenBuyer,
|
|
}: {
|
|
row: PendingNda;
|
|
team: boolean;
|
|
onOpenBuyer: (id: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-2 border-b border-gray-100 py-2 text-sm last:border-0">
|
|
<span className="flex-1">
|
|
<button onClick={() => onOpenBuyer(row.buyer_id)} className="text-blue-600 hover:underline">
|
|
{row.buyer_name}
|
|
</button>
|
|
, sent <span className="text-gray-500">{formatDay(row.sent_at)}</span>
|
|
</span>
|
|
{team && <span className="text-xs text-gray-500">{row.created_by_name ?? '—'}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** "Follow-up sent" always writes a note; the choice is whether to keep waiting. */
|
|
function FollowUpDialog({
|
|
row,
|
|
onClose,
|
|
onDone,
|
|
}: {
|
|
row: FollowUp;
|
|
onClose: () => void;
|
|
onDone: () => void;
|
|
}) {
|
|
const [comment, setComment] = useState('');
|
|
const [rearm, setRearm] = useState(true);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function confirm() {
|
|
setBusy(true);
|
|
try {
|
|
await api.followUpSent(row.id, comment, rearm);
|
|
onDone();
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog title="Follow-up sent" confirmLabel="Save" busy={busy} onConfirm={confirm} onCancel={onClose}>
|
|
<p className="mb-2 text-sm text-gray-600">
|
|
{row.buyer_name} about {row.business_name}
|
|
</p>
|
|
<textarea
|
|
rows={3}
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
placeholder="Comment (optional) — saved as a note"
|
|
className={INPUT}
|
|
/>
|
|
<div className="mt-2 flex flex-col gap-1 text-sm">
|
|
{[
|
|
{ value: true, label: 'Wait another 14 days' },
|
|
{ value: false, label: 'Stop waiting' },
|
|
].map((option) => (
|
|
<label key={String(option.value)} className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
checked={rearm === option.value}
|
|
onChange={() => setRearm(option.value)}
|
|
/>
|
|
{option.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
{error && <p className="mt-2 text-sm text-red-600">{error}</p>}
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
/** The normal status change, preset to ENDED. */
|
|
function EndDealDialog({
|
|
row,
|
|
onClose,
|
|
onDone,
|
|
}: {
|
|
row: FollowUp;
|
|
onClose: () => void;
|
|
onDone: () => void;
|
|
}) {
|
|
const [comment, setComment] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function confirm() {
|
|
setBusy(true);
|
|
try {
|
|
await api.setDealStatus(row.id, 'ENDED', comment);
|
|
onDone();
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog title="End deal" confirmLabel="Confirm" busy={busy} onConfirm={confirm} onCancel={onClose}>
|
|
<p className="mb-2 text-sm text-gray-600">
|
|
{row.business_name}: {DEAL_LABELS[row.status]} → {DEAL_LABELS.ENDED}
|
|
</p>
|
|
<textarea
|
|
rows={3}
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
placeholder="Comment (optional) — saved as a note"
|
|
className={INPUT}
|
|
/>
|
|
{error && <p className="mt-2 text-sm text-red-600">{error}</p>}
|
|
</Dialog>
|
|
);
|
|
}
|