gitadmin/INSIGHT-MVP
1
0
Fork 0
mirror of http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git synced 2026-06-25 03:26:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(crm): Kontaktdaten-Card zeigt alle Allgemein-Felder konstant

Browse source 
E-Mail, Telefon, Mobil, LinkedIn, Unternehmen, Position, Abteilung
werden immer angezeigt — leere Felder mit '—' Platzhalter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Reitz 2026-03-12 20:45:01 +01:00
parent bff4419c27
commit b746fc987d
2 changed files with 71 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/frontend/src/crm/contacts/ContactDetailPage.module.css
View file

@ -176,6 +176,11 @@
word-break: break-word; word-break: break-word;
} }
.empty {
color: var(--color-text-muted);
opacity: 0.5;
}
/* ---- Address row (full-width below infoColumns) ---- */ /* ---- Address row (full-width below infoColumns) ---- */
.addressRow { .addressRow {
margin-top: 1rem; margin-top: 1rem;

165
packages/frontend/src/crm/contacts/ContactDetailPage.tsx
View file

@ -206,61 +206,51 @@ export function ContactDetailPage() {
<div className={styles.card}> <div className={styles.card}>
<h2 className={styles.cardTitle}>Kontaktdaten</h2> <h2 className={styles.cardTitle}>Kontaktdaten</h2>
{/* Two sub-columns */} {/* Two sub-columns — always show all Allgemein fields */}
<div className={styles.infoColumns}> <div className={styles.infoColumns}>
{/* Left: communication */} {/* Left: Kommunikation */}
<div className={styles.infoGrid}> <div className={styles.infoGrid}>
{contact.email && ( <span className={styles.infoLabel}>E-Mail</span>
<> <span className={styles.infoValue}>
<span className={styles.infoLabel}>E-Mail</span> {contact.email ? (
<span className={styles.infoValue}> <a href={`mailto:${contact.email}`} style={{ color: 'var(--color-primary)' }}>
<a {contact.email}
href={`mailto:${contact.email}`} </a>
style={{ color: 'var(--color-primary)' }} ) : <span className={styles.empty}>—</span>}
> </span>
{contact.email}
</a> <span className={styles.infoLabel}>Telefon</span>
</span> <span className={styles.infoValue}>
</> {contact.phone ?? <span className={styles.empty}>—</span>}
)} </span>
{contact.phone && (
<> <span className={styles.infoLabel}>Mobil</span>
<span className={styles.infoLabel}>Telefon</span> <span className={styles.infoValue}>
<span className={styles.infoValue}>{contact.phone}</span> {contact.mobile ? (
</> <a href={`tel:${contact.mobile}`} style={{ color: 'var(--color-primary)' }}>
)} {contact.mobile}
{contact.mobile && ( </a>
<> ) : <span className={styles.empty}>—</span>}
<span className={styles.infoLabel}>Mobil</span> </span>
<span className={styles.infoValue}>
<a <span className={styles.infoLabel}>LinkedIn</span>
href={`tel:${contact.mobile}`} <span className={styles.infoValue}>
style={{ color: 'var(--color-primary)' }} {contact.linkedinUrl ? (
> <a
{contact.mobile} href={contact.linkedinUrl}
</a> target="_blank"
</span> rel="noopener noreferrer"
</> style={{ color: 'var(--color-primary)' }}
)} >
{contact.linkedinUrl && ( <LinkedInIcon />
<> {contact.linkedinUrl.replace(
<span className={styles.infoLabel}>LinkedIn</span> /^https?:\/\/(www\.)?linkedin\.com\/in\//,
<span className={styles.infoValue}> '',
<a )}
href={contact.linkedinUrl} </a>
target="_blank" ) : <span className={styles.empty}>—</span>}
rel="noopener noreferrer" </span>
style={{ color: 'var(--color-primary)' }}
>
<LinkedInIcon />
{contact.linkedinUrl.replace(
/^https?:\/\/(www\.)?linkedin\.com\/in\//,
'',
)}
</a>
</span>
</>
)}
{contact.website && ( {contact.website && (
<> <>
<span className={styles.infoLabel}>Website</span> <span className={styles.infoLabel}>Website</span>
@ -278,12 +268,12 @@ export function ContactDetailPage() {
)} )}
</div> </div>
{/* Right: context */} {/* Right: Kontext */}
<div className={styles.infoGrid}> <div className={styles.infoGrid}>
{contact.company && ( <span className={styles.infoLabel}>Unternehmen</span>
<> <span className={styles.infoValue}>
<span className={styles.infoLabel}>Unternehmen</span> {contact.company ? (
<span className={styles.infoValue}> <>
<Link <Link
to={`/crm/companies/${contact.company.id}`} to={`/crm/companies/${contact.company.id}`}
style={{ color: 'var(--color-primary)' }} style={{ color: 'var(--color-primary)' }}
@ -291,35 +281,24 @@ export function ContactDetailPage() {
{contact.company.name} {contact.company.name}
</Link> </Link>
{contact.company.industry && ( {contact.company.industry && (
<span <span style={{ color: 'var(--color-text-muted)', marginLeft: '0.5rem', fontSize: '0.8125rem' }}>
style={{
color: 'var(--color-text-muted)',
marginLeft: '0.5rem',
fontSize: '0.8125rem',
}}
>
({contact.company.industry}) ({contact.company.industry})
</span> </span>
)} )}
</span> </>
</> ) : <span className={styles.empty}>—</span>}
)} </span>
{contact.position && (
<> <span className={styles.infoLabel}>Position</span>
<span className={styles.infoLabel}>Position</span> <span className={styles.infoValue}>
<span className={styles.infoValue}> {contact.position ?? <span className={styles.empty}>—</span>}
{contact.position} </span>
</span>
</> <span className={styles.infoLabel}>Abteilung</span>
)} <span className={styles.infoValue}>
{contact.department && ( {contact.department ?? <span className={styles.empty}>—</span>}
<> </span>
<span className={styles.infoLabel}>Abteilung</span>
<span className={styles.infoValue}>
{contact.department}
</span>
</>
)}
{contact.birthday && ( {contact.birthday && (
<> <>
<span className={styles.infoLabel}>Geburtsdatum</span> <span className={styles.infoLabel}>Geburtsdatum</span>
@ -341,12 +320,7 @@ export function ContactDetailPage() {
<span className={styles.infoLabel}>Status</span> <span className={styles.infoLabel}>Status</span>
<span <span
className={styles.infoValue} className={styles.infoValue}
style={{ style={{ color: contact.status === 'BLOCKED' ? '#991b1b' : 'var(--color-text-muted)' }}
color:
contact.status === 'BLOCKED'
? '#991b1b'
: 'var(--color-text-muted)',
}}
> >
{ENTITY_STATUS_LABELS[contact.status] ?? contact.status} {ENTITY_STATUS_LABELS[contact.status] ?? contact.status}
</span> </span>
@ -361,16 +335,9 @@ export function ContactDetailPage() {
<div className={styles.infoGrid}> <div className={styles.infoGrid}>
<span className={styles.infoLabel}>Adresse</span> <span className={styles.infoLabel}>Adresse</span>
<span className={styles.infoValue}> <span className={styles.infoValue}>
{contact.street && ( {contact.street && <>{contact.street}<br /></>}
<>
{contact.street}
<br />
</>
)}
{contact.zip} {contact.city} {contact.zip} {contact.city}
{contact.country && contact.country !== 'DE' && ( {contact.country && contact.country !== 'DE' && <>, {contact.country}</>}
<>, {contact.country}</>
)}
</span> </span>
</div> </div>
</div> </div>