Sascha WolfandClaude Opus 5
3e76a73f2e
Bisher verschwand ein Fund mit der Uebernahme aus Eingang und Archiv. Beim Durchgehen blieb damit offen, ob er schon angefasst wurde. Jetzt bleibt der Eintrag stehen und zeigt statt "Opportunity" den blauen Knopf "Uebernommen" mit Haken; ein Klick springt zur Opportunity. Dafuer entscheidet nicht mehr IS_OPEN ueber die Listen, sondern die neuen Regeln IN_INBOX und RETURNED: ein Rueckfaeller (Opportunity im Papierkorb oder geloescht) gehoert weiter ins Archiv, alles andere bleibt in seiner Liste. Zaehler und Menuezahl folgen derselben Regel. IS_OPEN bleibt fuer den Loeschlauf: was zu einer lebenden Opportunity gehoert, wird nicht weggeraeumt. Solange die Opportunity lebt, sind Bearbeiten, Loeschen und "Zurueck in die Akquise" am Eintrag gesperrt - er ist ihr Herkunftsnachweis, und der Rueckweg von der Opportunity braucht ihn. Das Loeschen weist auch das Backend ab, nicht nur die Oberflaeche. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
345 lines
16 KiB
TypeScript
345 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { formatEuro, splitConsultants, type Acquisition } from '../../types';
|
|
import { ConsultantList } from './acquisitionUi';
|
|
|
|
/*
|
|
* Die Liste der gefundenen Projekte. Genau die Spalten, die beim Durchgehen
|
|
* zaehlen - alles Weitere steht im Formular und in der Opportunity.
|
|
*
|
|
* Der Titel ist ein Link, sobald einer hinterlegt ist. Ohne Link bleibt er
|
|
* einfacher Text: ein Link, der nirgends hinfuehrt, ist schlimmer als keiner.
|
|
*/
|
|
|
|
export type AcquisitionSortKey = 'found_at' | 'sender' | 'provider' | 'channel' | 'title' | 'consultant';
|
|
|
|
export interface AcquisitionSortConfig {
|
|
key: AcquisitionSortKey;
|
|
direction: 'asc' | 'desc';
|
|
}
|
|
|
|
interface AcquisitionTableProps {
|
|
entries: Acquisition[];
|
|
sortConfig: AcquisitionSortConfig;
|
|
onSort: (key: AcquisitionSortKey) => void;
|
|
editingId: number | null;
|
|
busyId: number | null;
|
|
onEdit: (entry: Acquisition) => void;
|
|
onDelete: (entry: Acquisition) => void;
|
|
onConvert: (entry: Acquisition) => void;
|
|
/** Sprung zur bereits angelegten Opportunity. */
|
|
onOpenOpportunity: (entry: Acquisition) => void;
|
|
/** Nur im Archiv gesetzt - im Eingang gibt es nichts zurueckzuholen. */
|
|
onReopen?: (entry: Acquisition) => void;
|
|
}
|
|
|
|
const COLUMNS: { key: AcquisitionSortKey | null; label: string; className?: string }[] = [
|
|
{ key: 'found_at', label: 'Datum' },
|
|
{ key: 'sender', label: 'Von' },
|
|
{ key: 'provider', label: 'Anbieter' },
|
|
{ key: 'channel', label: 'Kanal' },
|
|
{ key: 'title', label: 'Projekttitel' },
|
|
{ key: 'consultant', label: 'Berater' },
|
|
{ key: null, label: 'Opportunity' },
|
|
{ key: null, label: '', className: 'text-right' },
|
|
];
|
|
|
|
/** Farbe je Kanal, damit sich die Liste beim Durchsehen sortiert anfuehlt. */
|
|
const CHANNEL_STYLES: Record<string, string> = {
|
|
Mail: 'bg-sky-50 text-sky-700 border-sky-200',
|
|
Telefon: 'bg-amber-50 text-amber-700 border-amber-200',
|
|
Portal: 'bg-violet-50 text-violet-700 border-violet-200',
|
|
LinkedIn: 'bg-blue-50 text-blue-700 border-blue-200',
|
|
XING: 'bg-teal-50 text-teal-700 border-teal-200',
|
|
Empfehlung: 'bg-brand-50 text-brand-700 border-brand-200',
|
|
Sonstiges: 'bg-ink-100 text-ink-600 border-ink-200',
|
|
};
|
|
|
|
/** Kurzform des Funddatums plus Alter in Tagen als Titelhinweis. */
|
|
function formatFound(value: string): { label: string; title: string } {
|
|
const date = new Date(`${value.slice(0, 10)}T00:00:00`);
|
|
if (Number.isNaN(date.getTime())) return { label: '—', title: '' };
|
|
|
|
const days = Math.round((Date.now() - date.getTime()) / 86_400_000);
|
|
const age = days <= 0 ? 'heute' : days === 1 ? 'vor 1 Tag' : `vor ${days} Tagen`;
|
|
return {
|
|
label: date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }),
|
|
title: `Gefunden ${age}`,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Nur absolute http- und https-Adressen werden zum Link. Das Backend legt
|
|
* ohnehin nur solche ab; die Pruefung hier faengt Altbestand und Eintraege ab,
|
|
* die auf anderem Weg in die Tabelle gekommen sind. "hays.de/projekt/1" wuerde
|
|
* der Browser sonst als Pfad innerhalb des CRM auflegen und ins Leere fuehren.
|
|
*/
|
|
function safeLink(value: string | null): string | null {
|
|
if (!value) return null;
|
|
return /^https?:\/\//i.test(value) ? value : null;
|
|
}
|
|
|
|
/**
|
|
* Uebernommen und die Opportunity lebt noch. Ein Rueckfaeller (Opportunity im
|
|
* Papierkorb oder geloescht) zaehlt nicht dazu - der darf erneut uebernommen
|
|
* werden und bekommt deshalb wieder den normalen Knopf.
|
|
*/
|
|
function isConverted(entry: Acquisition): boolean {
|
|
return entry.converted_at !== null && !entry.opportunity_gone;
|
|
}
|
|
|
|
/**
|
|
* Kennzeichen fuer eine Bewerbung, die ins Archiv zurueckgefallen ist: sie war
|
|
* schon eine Opportunity, und die ist weg. Ohne den Hinweis stuende sie
|
|
* unerklaerlich im Archiv.
|
|
*/
|
|
function returnedNote(entry: Acquisition): string | null {
|
|
if (entry.converted_at === null || isConverted(entry)) return null;
|
|
if (entry.opportunity_deleted_at) return 'Opportunity im Papierkorb';
|
|
return 'Opportunity gelöscht';
|
|
}
|
|
|
|
/** Kurze Zusammenfassung der Angaben, die keine eigene Spalte haben. */
|
|
function extras(entry: Acquisition): string[] {
|
|
const parts: string[] = [];
|
|
if (entry.company) parts.push(entry.company);
|
|
if (entry.fixed_price !== null) parts.push(`${formatEuro(entry.fixed_price)} Festpreis`);
|
|
else if (entry.daily_rate !== null) parts.push(`${formatEuro(entry.daily_rate)}/Tag`);
|
|
if (entry.duration_days !== null) parts.push(`${entry.duration_days} PT`);
|
|
return parts;
|
|
}
|
|
|
|
const SortIcon: React.FC<{ active: boolean; direction: 'asc' | 'desc' }> = ({ active, direction }) => (
|
|
<svg
|
|
className={`h-3 w-3 shrink-0 transition ${active ? 'text-brand-600' : 'text-ink-300'} ${
|
|
active && direction === 'asc' ? 'rotate-180' : ''
|
|
}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
);
|
|
|
|
export const AcquisitionTable: React.FC<AcquisitionTableProps> = ({
|
|
entries,
|
|
sortConfig,
|
|
onSort,
|
|
editingId,
|
|
busyId,
|
|
onEdit,
|
|
onDelete,
|
|
onConvert,
|
|
onOpenOpportunity,
|
|
onReopen,
|
|
}) => (
|
|
<div className="overflow-hidden rounded-2xl border border-ink-200 bg-surface shadow-card">
|
|
<div className="scrollbar-slim overflow-x-auto">
|
|
<table className="w-full min-w-[1000px] text-left">
|
|
<thead className="border-b border-ink-200 bg-ink-50">
|
|
<tr>
|
|
{COLUMNS.map((column) => (
|
|
<th
|
|
key={column.label || 'aktionen'}
|
|
className={`px-4 py-3 text-[10px] font-extrabold uppercase tracking-wider text-ink-500 ${
|
|
column.className ?? ''
|
|
}`}
|
|
>
|
|
{column.key ? (
|
|
<button
|
|
onClick={() => onSort(column.key!)}
|
|
className="flex items-center gap-1.5 transition hover:text-brand-700"
|
|
>
|
|
{column.label}
|
|
<SortIcon active={sortConfig.key === column.key} direction={sortConfig.direction} />
|
|
</button>
|
|
) : (
|
|
column.label
|
|
)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody className="divide-y divide-ink-100">
|
|
{entries.map((entry) => {
|
|
const found = formatFound(entry.found_at);
|
|
const link = safeLink(entry.link);
|
|
const extraParts = extras(entry);
|
|
const returned = returnedNote(entry);
|
|
const isBusy = busyId === entry.id;
|
|
const converted = isConverted(entry);
|
|
// Entscheidet nur die Beschriftung: bei mehreren Beratern entsteht
|
|
// beim Uebernehmen je Berater eine Opportunity.
|
|
const consultantCount = splitConsultants(entry.consultant).length;
|
|
|
|
return (
|
|
<tr
|
|
key={entry.id}
|
|
className={`transition ${editingId === entry.id ? 'bg-brand-50' : 'hover:bg-ink-50'}`}
|
|
>
|
|
<td className="whitespace-nowrap px-4 py-3 text-sm tabular-nums text-ink-700" title={found.title}>
|
|
{found.label}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-ink-700">{entry.sender || '—'}</td>
|
|
<td className="px-4 py-3 text-sm font-bold text-ink-800">{entry.provider || '—'}</td>
|
|
<td className="px-4 py-3">
|
|
{entry.channel ? (
|
|
<span
|
|
className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider ${
|
|
CHANNEL_STYLES[entry.channel] ?? CHANNEL_STYLES.Sonstiges
|
|
}`}
|
|
>
|
|
{entry.channel}
|
|
</span>
|
|
) : (
|
|
<span className="text-sm text-ink-400">—</span>
|
|
)}
|
|
</td>
|
|
|
|
<td className="w-[28rem] max-w-[28rem] px-4 py-3 align-top">
|
|
{link ? (
|
|
<a
|
|
href={link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title={`${entry.title} - öffnet ${link}`}
|
|
className="text-sm font-bold text-brand-700 underline decoration-brand-300 underline-offset-2 transition hover:text-brand-800 hover:decoration-brand-600 wrap-anywhere"
|
|
>
|
|
{entry.title}
|
|
<span aria-hidden className="ml-1 whitespace-nowrap">↗</span>
|
|
</a>
|
|
) : (
|
|
<span className="text-sm font-bold text-ink-900 wrap-anywhere">{entry.title}</span>
|
|
)}
|
|
{extraParts.length > 0 && (
|
|
<p className="mt-0.5 text-[11px] text-ink-400 wrap-anywhere">{extraParts.join(' · ')}</p>
|
|
)}
|
|
{returned && (
|
|
<span
|
|
title={
|
|
entry.opportunity_deleted_at
|
|
? 'Diese Bewerbung war schon eine Opportunity. Die liegt im Papierkorb - wird sie dort zurückgeholt, verschwindet dieser Eintrag wieder.'
|
|
: 'Diese Bewerbung war schon eine Opportunity. Die ist endgültig gelöscht, deshalb steht die Bewerbung wieder hier.'
|
|
}
|
|
className="mt-1 inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-amber-700"
|
|
>
|
|
{returned}
|
|
</span>
|
|
)}
|
|
</td>
|
|
|
|
<td className="px-4 py-3 text-sm text-ink-700">
|
|
<ConsultantList value={entry.consultant} />
|
|
</td>
|
|
|
|
<td className="px-4 py-3">
|
|
{/*
|
|
Ein uebernommener Eintrag bleibt in der Liste stehen - der
|
|
Knopf wird blau und fuehrt zur angelegten Opportunity.
|
|
*/}
|
|
{converted ? (
|
|
<button
|
|
onClick={() => onOpenOpportunity(entry)}
|
|
title={
|
|
entry.opportunity_title
|
|
? `Übernommen: „${entry.opportunity_title}“ öffnen`
|
|
: 'Übernommen - Opportunity öffnen'
|
|
}
|
|
className="flex items-center gap-1.5 whitespace-nowrap rounded-xl bg-blue-600 px-3 py-1.5 text-xs font-bold text-white shadow-card transition hover:bg-blue-700"
|
|
>
|
|
Übernommen
|
|
<svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.6} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => onConvert(entry)}
|
|
disabled={isBusy}
|
|
title={
|
|
consultantCount > 1
|
|
? `Je Berater eine Opportunity in der Phase „Erstgespräch Berater“ anlegen - ${consultantCount} insgesamt. Der Eintrag bleibt stehen und ist danach als übernommen gekennzeichnet.`
|
|
: 'Als neue Opportunity in der Phase „Erstgespräch Berater“ anlegen. Der Eintrag bleibt stehen und ist danach als übernommen gekennzeichnet.'
|
|
}
|
|
className="flex items-center gap-1.5 whitespace-nowrap rounded-xl bg-brand-500 px-3 py-1.5 text-xs font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-50"
|
|
>
|
|
<svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
{isBusy ? 'Lege an...' : 'Opportunity'}
|
|
</button>
|
|
)}
|
|
</td>
|
|
|
|
<td className="whitespace-nowrap px-4 py-3 text-right">
|
|
<div className="inline-flex gap-1">
|
|
{onReopen && !converted && (
|
|
<button
|
|
onClick={() => onReopen(entry)}
|
|
disabled={isBusy}
|
|
title="Zurück in die Akquise: der Eintrag bekommt das heutige Datum und steht wieder im Eingang."
|
|
aria-label={`${entry.title} zurück in die Akquise`}
|
|
className="rounded-lg p-2 text-ink-400 transition hover:bg-brand-50 hover:text-brand-700 disabled:opacity-50"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 10h10a5 5 0 010 10h-3M3 10l4-4M3 10l4 4"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => onEdit(entry)}
|
|
disabled={converted}
|
|
title={
|
|
converted
|
|
? 'Übernommen - gepflegt wird jetzt in der Opportunity.'
|
|
: 'Bearbeiten'
|
|
}
|
|
aria-label={`${entry.title} bearbeiten`}
|
|
className="rounded-lg p-2 text-ink-400 transition hover:bg-brand-50 hover:text-brand-700 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ink-400"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete(entry)}
|
|
disabled={converted}
|
|
title={
|
|
converted
|
|
? 'Übernommen - der Eintrag gehört zur Opportunity und bleibt als Herkunftsnachweis stehen.'
|
|
: 'Löschen'
|
|
}
|
|
aria-label={`${entry.title} löschen`}
|
|
className="rounded-lg p-2 text-ink-400 transition hover:bg-red-50 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ink-400"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|