From b746fc987d1c2beb90e6a470ca575875db5a30b9 Mon Sep 17 00:00:00 2001
From: Thomas Reitz <T.Reitz@xinion.de>
Date: Thu, 12 Mar 2026 20:45:01 +0100
Subject: [PATCH] fix(crm): Kontaktdaten-Card zeigt alle Allgemein-Felder
 konstant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../crm/contacts/ContactDetailPage.module.css |   5 +
 .../src/crm/contacts/ContactDetailPage.tsx    | 165 +++++++-----------
 2 files changed, 71 insertions(+), 99 deletions(-)

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