Client Dashboard (Dark)

Okay, I've added a third panel for "Events" below the "Client Contacts" panel. Each event includes the details you specified, with the title styled differently and the fields spaced out. Client Dashboard (Dark)

{/* Added overflow-hidden here */}

{/* Moved overflow-auto here */}

Clients

{/* Removed overflow-auto */} Client A 3 Client B Client C Client D 1 Client E Client F Client G Client H Client I Client J

{/* Prevent header from shrinking */}

Client A

Welcome! Select a client.

{/* This column holds the cards */}

{/* Allow shrinking, set base height */}

Client Info

Details for Client A

Industry: Technology

Account Manager: John Doe

Status: Active

Joined: 2023-01-15

Address: 123 Tech Lane, Silicon Valley, CA 94000

Edit Info

{/* Allow shrinking, set base height */}

Client Contacts

Alice Smith (Primary)
alice.smith@clienta.com | 555-1111
Active
Bob Johnson
bob.j@clienta.com | 555-2222
Inactive
Charlie Brown
charlie@clienta.com | 555-3333
Active

{/* Allow shrinking, set base height */}

Events

Project Kickoff Meeting
60 mins jsmith Jan 15, 2024 10:00 AM

Initial meeting to discuss project scope, goals, and timeline with the client team.
Follow-up Call
30 mins adavis Jan 18, 2024 02:30 PM

Quick call to check on progress and address any immediate questions.
Support Ticket Resolved
5 mins system Jan 19, 2024 09:15 AM

Ticket #12345 regarding login issue has been resolved.
Quarterly Review Prep
120 mins jsmith Jan 20, 2024 01:00 PM

Internal preparation session for the upcoming Q1 review meeting with Client A.

/* Ensure full height layout */ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* Prevent body scrollbars */ } /* Allow sidebar and content panels to scroll independently */ .overflow-auto { overflow-y: auto; } /* Ensure right content area takes remaining height */ .flex-grow-1 { flex-grow: 1; } /* Adjust notification alert padding */ #notification-area .btn-close { padding: 0.5rem 0.5rem; /* Smaller padding for close button */ font-size: 0.8rem; } /* Ensure border adapts to dark theme */ [data-bs-theme="dark"] .border-end { border-color: var(--bs-border-color-translucent) !important; } /* Event Title Style */ .event-title { font-size: 1.05rem; /* Adjusted size */ color: var(--bs-info); /* Use Bootstrap info color variable for visibility */ font-weight: 600; } /* Ensure event message wraps */ .event-message { font-size: 0.85rem; /* Slightly smaller */ color: var(--bs-secondary-color); /* Use appropriate text color variable */ white-space: pre-wrap; /* Allow wrapping */ word-break: break-word; /* Break long words */ margin-top: 0.25rem; /* Add a little space above message */ } /* Adjust spacing within event item top row */ .list-group-item .d-flex small { white-space: nowrap; /* Prevent wrapping of small text elements */ font-size: 0.75rem; /* Make metadata smaller */ flex-shrink: 0; /* Prevent metadata from shrinking too much */ } .list-group-item .d-flex .event-title { flex-grow: 1; /* Allow title to take up space */ margin-right: 1rem; /* Ensure space between title and first metadata */ } /* Ensure cards take up space and scroll */ .card.flex-grow-1 { flex-shrink: 1; /* Allow shrinking */ min-height: 0; /* Override any potential minimum height issues with flexbox */ } .card .card-body.overflow-auto { min-height: 100px; /* Give card bodies a minimum height before scrolling */ } /* Ensure the column containing the cards uses the available space */ .d-flex.flex-column.flex-grow-1.overflow-hidden { min-height: 0; /* Necessary for flex children with overflow */ } document.addEventListener('DOMContentLoaded', function () { const clientLinks = document.querySelectorAll('.list-group-item-action'); // More specific selector const clientNameHeader = document.getElementById('client-name-header'); const notificationArea = document.getElementById('notification-area'); const clientInfoCardBody = document.querySelector('.card:nth-of-type(1) .card-body'); // First card body const clientContactsList = document.querySelector('.card:nth-of-type(2) .card-body ul'); // Second card ul const eventList = document.getElementById('event-list'); // Events list ul // --- Sample Data (Replace with actual data fetching) --- const clientData = { "Client A": { info: { title: "Details for Client A", industry: "Technology", manager: "John Doe", status: "Active", joined: "2023-01-15", address: "123 Tech Lane, Silicon Valley, CA 94000" }, contacts: [ { name: "Alice Smith", role: "Primary", email: "alice.smith@clienta.com", phone: "555-1111", status: "Active" }, { name: "Bob Johnson", role: "", email: "bob.j@clienta.com", phone: "555-2222", status: "Inactive" }, { name: "Charlie Brown", role: "", email: "charlie@clienta.com", phone: "555-3333", status: "Active" } ], events: [ { title: "Project Kickoff Meeting", duration: 60, user: "jsmith", timestamp: "Jan 15, 2024 10:00 AM", message: "Initial meeting to discuss project scope, goals, and timeline with the client team." }, { title: "Follow-up Call", duration: 30, user: "adavis", timestamp: "Jan 18, 2024 02:30 PM", message: "Quick call to check on progress and address any immediate questions." }, { title: "Support Ticket Resolved", duration: 5, user: "system", timestamp: "Jan 19, 2024 09:15 AM", message: "Ticket #12345 regarding login issue has been resolved." }, { title: "Quarterly Review Prep", duration: 120, user: "jsmith", timestamp: "Jan 20, 2024 01:00 PM", message: "Internal preparation session for the upcoming Q1 review meeting with Client A." } ] }, "Client B": { info: { title: "Details for Client B", industry: "Finance", manager: "Jane Roe", status: "Active", joined: "2022-11-01", address: "456 Money Ave, New York, NY 10001" }, contacts: [ { name: "David Lee", role: "Primary", email: "david.lee@clientb.com", phone: "555-4444", status: "Active" } ], events: [ { title: "Onboarding Complete", duration: 10, user: "jroe", timestamp: "Dec 1, 2022 11:00 AM", message: "Client B onboarding process finished." }, { title: "Monthly Check-in", duration: 45, user: "jroe", timestamp: "Jan 22, 2024 03:00 PM", message: "Regular monthly check-in call." } ] }, "Client C": { info: { title: "Details for Client C", industry: "Healthcare", manager: "John Doe", status: "Inactive", joined: "2023-05-20", address: "789 Health Blvd, Chicago, IL 60606" }, contacts: [ { name: "Eva Green", role: "Primary", email: "eva.green@clientc.com", phone: "555-5555", status: "Inactive" } ], events: [ { title: "Contract Signed", duration: 15, user: "jsmith", timestamp: "May 20, 2023 09:30 AM", message: "Initial contract signed." }, { title: "Account Deactivated", duration: 5, user: "system", timestamp: "Dec 31, 2023 05:00 PM", message: "Client account marked as inactive due to contract end." } ] } // Add more clients as needed }; // --- End Sample Data --- function updateClientDetails(clientName) { const data = clientData[clientName] || { info: {}, contacts: [], events: [] }; // Default empty data // Update Header clientNameHeader.textContent = clientName; // Update Notification const notificationContent = notificationArea.querySelector('small'); if (notificationContent) { notificationContent.innerHTML = ` Displaying details for ${clientName}.`; } if (!notificationArea.classList.contains('show')) { notificationArea.classList.add('show'); notificationArea.classList.remove('d-none'); } // Update Client Info Panel clientInfoCardBody.innerHTML = `

${data.info.title || `Details for ${clientName}`}

Industry: ${data.info.industry || 'N/A'}

Account Manager: ${data.info.manager || 'N/A'}

Status: ${data.info.status || 'N/A'}

Joined: ${data.info.joined || 'N/A'}

Address: ${data.info.address || 'N/A'}

Edit Info `; // Update Client Contacts Panel clientContactsList.innerHTML = ''; // Clear existing contacts if (data.contacts.length > 0) { data.contacts.forEach(contact => { const li = document.createElement('li'); li.className = 'list-group-item d-flex justify-content-between align-items-center'; li.innerHTML = `

${contact.name} ${contact.role ? `(${contact.role})` : ''}
${contact.email || 'N/A'} | ${contact.phone || 'N/A'}

${contact.status} `; clientContactsList.appendChild(li); }); } else { clientContactsList.innerHTML = '

No contacts found.

'; } // Add the "Add Contact" button back if needed (or handle dynamically) const addContactButton = document.createElement('button'); addContactButton.className = 'btn btn-sm btn-outline-primary mt-2'; addContactButton.innerHTML = ' Add Contact'; clientContactsList.parentElement.appendChild(addContactButton); // Append to card-body // Update Events Panel eventList.innerHTML = ''; // Clear existing events if (data.events.length > 0) { data.events.forEach(event => { const li = document.createElement('li'); li.className = 'list-group-item'; li.innerHTML = `

${event.title}

${event.duration} mins ${event.user} ${event.timestamp}

${event.message}

`; eventList.appendChild(li); }); } else { eventList.innerHTML = '

No events found.

'; } } clientLinks.forEach(link => { link.addEventListener('click', function (event) { event.preventDefault(); // Prevent default link behavior // Remove active class from all links clientLinks.forEach(l => l.classList.remove('active')); // Add active class to the clicked link this.classList.add('active'); // Get client name const clientName = this.firstChild.nodeValue.trim(); // Update content panels updateClientDetails(clientName); }); }); // Optional: Handle alert dismissal const alertElement = document.getElementById('notification-area'); if (alertElement) { alertElement.addEventListener('closed.bs.alert', function () { console.log('Notification dismissed.'); // alertElement.classList.add('d-none'); }); } // Initial load (optional - load details for the default active client) const activeClientLink = document.querySelector('.list-group-item-action.active'); if (activeClientLink) { const initialClientName = activeClientLink.firstChild.nodeValue.trim(); updateClientDetails(initialClientName); } else if (clientLinks.length > 0) { // Or load the first client if none are active by default clientLinks[0].click(); } });