feat(akquise): gefundene Projekte als Eingang vor den Opportunities
Neuer Menuepunkt ueber den Opportunities, mit dem Unterpunkt "Archiv". Die Liste traegt genau die Spalten, die beim Durchgehen zaehlen: Datum, Von, Anbieter, Kanal, Projekttitel, Berater, ein Knopf fuer die Uebernahme und die Symbole fuer Bearbeiten und Loeschen. Eingabe steht ueber der Liste und ist bewusst kein Dialog - Projekte kommen in Serie herein. Nach dem Eintragen bleiben Datum, Anbieter, Kanal und Berater stehen, damit drei Projekte aus einer Mail nicht dreimal dieselben Angaben kosten. Von, Anbieter und Berater schlagen frueher benutzte Werte vor. Was in der Liste keine Spalte hat, aber in der Opportunity vorkommt (Endkunde, Beschreibung, Tagessatz, Laufzeit, Projektpreis, Zeitraum, naechster Schritt, Notizen), klappt darunter auf. Eingang, Archiv und Loeschung ergeben sich aus dem Funddatum - 14 bzw. 90 Tage - und aus converted_at. Es gibt keine Zustandsspalte, die ein Job pflegen muesste und die von der Wirklichkeit abweichen kann. Der Loeschlauf raeumt beim Abruf der Liste, hoechstens einmal pro Stunde; die Abfragen filtern Faelliges ohnehin heraus. Die Uebernahme legt Opportunity und Merker in einer Transaktion an. Anbieter, Von, Kanal, Berater und Link haben in der Opportunity kein Feld und wandern als Herkunftsvermerk in die Notizen. Der Titel wird nur dann zum Link, wenn eine http(s)-Adresse hinterlegt ist: "hays.de/projekt/1" ergaenzt das Backend zu https://, und die Anzeige laesst nichts anderes durch als http und https. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
co-authored by
Claude Opus 5
Claude Opus 5
parent
8741a9ae0c
commit
b8a78f609c
@@ -0,0 +1,245 @@
|
||||
import React from 'react';
|
||||
import { formatEuro, type Acquisition } from '../../types';
|
||||
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/** 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,
|
||||
}) => (
|
||||
<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 isBusy = busyId === entry.id;
|
||||
|
||||
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="max-w-sm px-4 py-3">
|
||||
{link ? (
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={`${entry.title} - öffnet ${link}`}
|
||||
className="inline-flex items-baseline gap-1 text-sm font-bold text-brand-700 underline decoration-brand-300 underline-offset-2 transition hover:text-brand-800 hover:decoration-brand-600"
|
||||
>
|
||||
<span className="truncate">{entry.title}</span>
|
||||
<span aria-hidden>↗</span>
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-sm font-bold text-ink-900">{entry.title}</span>
|
||||
)}
|
||||
{extraParts.length > 0 && (
|
||||
<p className="mt-0.5 truncate text-[11px] text-ink-400">{extraParts.join(' · ')}</p>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-3 text-sm text-ink-700">{entry.consultant || '—'}</td>
|
||||
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => onConvert(entry)}
|
||||
disabled={isBusy}
|
||||
title="Als neue Opportunity in der Phase „Neu“ anlegen. Der Eintrag verschwindet danach aus dieser Liste."
|
||||
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">
|
||||
<button
|
||||
onClick={() => onEdit(entry)}
|
||||
title="Bearbeiten"
|
||||
aria-label={`${entry.title} bearbeiten`}
|
||||
className="rounded-lg p-2 text-ink-400 transition hover:bg-brand-50 hover:text-brand-700"
|
||||
>
|
||||
<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)}
|
||||
title="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"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
Reference in New Issue
Block a user