diff --git a/frontend/index.html b/frontend/index.html
index 22de787..1b8d2d6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -159,6 +159,14 @@
+
+
+
+
@@ -1122,6 +1131,810 @@
newNote.innerHTML = '';
tbButtons.forEach(b=>b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600'));
}
+
+ async function populateManagerInfo(job) {
+ const managerInfoTable = document.getElementById('managerInfoTable');
+ managerInfoTable.innerHTML = '';
+
+ // Row 1: Job Full Name (spans 2 cols), Manager, Job Status
+ const row1 = document.createElement('div');
+ row1.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
+
+ const jobFullNameDiv = document.createElement('div');
+ jobFullNameDiv.className = 'col-span-2';
+ jobFullNameDiv.innerHTML = `Job Full Name
${job.Job_Full_Name || '—'}
`;
+
+ const managerDiv = document.createElement('div');
+ managerDiv.innerHTML = `Manager
${job.Manager || '—'}
`;
+
+ const jobStatusDiv = document.createElement('div');
+ jobStatusDiv.innerHTML = `Job Status
${job.Job_Status || '—'}
`;
+
+ row1.appendChild(jobFullNameDiv);
+ row1.appendChild(managerDiv);
+ row1.appendChild(jobStatusDiv);
+ managerInfoTable.appendChild(row1);
+
+ // Row 2: Job Number, Job Division, Job Type, Scope
+ const row2 = document.createElement('div');
+ row2.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
+
+ const jobNum = document.createElement('div');
+ jobNum.innerHTML = `Job Number
${job.Job_Number || '—'}
`;
+
+ const jobDivision = document.createElement('div');
+ jobDivision.innerHTML = `Job Division
${job.Job_Division || '—'}
`;
+
+ const jobType = document.createElement('div');
+ jobType.innerHTML = `Job Type
${job.Job_Type || '—'}
`;
+
+ const scopeDiv = document.createElement('div');
+ scopeDiv.innerHTML = `Scope
—
`;
+
+ row2.appendChild(jobNum);
+ row2.appendChild(jobDivision);
+ row2.appendChild(jobType);
+ row2.appendChild(scopeDiv);
+ managerInfoTable.appendChild(row2);
+
+ // Row 3: Company/Client, Contact Person, Contact Number, EXT.
+ const row3 = document.createElement('div');
+ row3.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
+
+ const companyClient = document.createElement('div');
+ companyClient.innerHTML = `Company/Client
${job.Company_Client || '—'}
`;
+
+ const contactPerson = document.createElement('div');
+ contactPerson.innerHTML = `Contact Person
${job.Contact_Person || '—'}
`;
+
+ const contactNumber = document.createElement('div');
+ contactNumber.innerHTML = `Contact Number
`;
+ const phoneDiv = document.createElement('div');
+ phoneDiv.className = 'text-center';
+ phoneDiv.style.fontSize = '10px';
+ if(job.Phone_Number && job.Phone_Number.trim() !== ''){
+ const phoneLink = document.createElement('a');
+ const phoneNumber = job.Phone_Number.replace(/\D/g, '');
+ phoneLink.href = `tel:${phoneNumber}`;
+ phoneLink.className = 'text-blue-600 hover:text-blue-800 underline';
+ phoneLink.textContent = job.Phone_Number;
+ phoneDiv.appendChild(phoneLink);
+ } else {
+ phoneDiv.className = 'text-gray-900 text-center';
+ phoneDiv.textContent = '—';
+ }
+ contactNumber.appendChild(phoneDiv);
+
+ const extn = document.createElement('div');
+ extn.innerHTML = `EXT.
—
`;
+
+ row3.appendChild(companyClient);
+ row3.appendChild(contactPerson);
+ row3.appendChild(contactNumber);
+ row3.appendChild(extn);
+ managerInfoTable.appendChild(row3);
+
+ // Row 4: Job Address (spans 2 cols), Map Icons (3rd col), EST Cost (4th col)
+ const row4 = document.createElement('div');
+ row4.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
+
+ // Job Address spanning 2 columns
+ const addressContainer = document.createElement('div');
+ addressContainer.className = 'col-span-2';
+ addressContainer.innerHTML = `Job Address
`;
+ const addressVal = document.createElement('div');
+ addressVal.style.fontSize = '10px';
+ addressVal.className = 'text-gray-900';
+ addressVal.textContent = job.Job_Address || '—';
+ addressContainer.appendChild(addressVal);
+
+ // Map Icons in 3rd column
+ const mapIconsContainer = document.createElement('div');
+ mapIconsContainer.className = 'flex items-end gap-2';
+
+ if(job.Job_Address && job.Job_Address.trim() !== ''){
+ const appleLink = document.createElement('a');
+ const encodedAddress = encodeURIComponent(job.Job_Address);
+ appleLink.href = `https://maps.apple.com/?q=${encodedAddress}`;
+ appleLink.target = '_blank';
+ appleLink.className = 'inline-flex items-center justify-center w-5 h-5 hover:opacity-80 transition-opacity';
+ appleLink.title = 'Open in Apple Maps';
+ appleLink.innerHTML = '';
+ mapIconsContainer.appendChild(appleLink);
+
+ const googleLink = document.createElement('a');
+ googleLink.href = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
+ googleLink.target = '_blank';
+ googleLink.className = 'inline-flex items-center justify-center w-5 h-5 hover:opacity-80 transition-opacity';
+ googleLink.title = 'Open in Google Maps';
+ googleLink.innerHTML = '';
+ mapIconsContainer.appendChild(googleLink);
+ }
+
+ // EST Cost in 4th column (centered)
+ const estimatedCostContainer = document.createElement('div');
+ estimatedCostContainer.innerHTML = `EST Cost
—
`;
+
+ row4.appendChild(addressContainer);
+ row4.appendChild(mapIconsContainer);
+ row4.appendChild(estimatedCostContainer);
+ managerInfoTable.appendChild(row4);
+
+ // Row 5: EST Start Date, Actual Start Date, EST End Date
+ const row5 = document.createElement('div');
+ row5.className = 'grid grid-cols-3 gap-4 pb-3 border-b border-gray-200';
+
+ // Format the start date for both estimated and actual (short format)
+ let startDateFormatted = '—';
+ if(job.Start_Date){
+ try {
+ const date = new Date(job.Start_Date);
+ startDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
+ } catch(e) {
+ startDateFormatted = job.Start_Date;
+ }
+ }
+
+ const estimatedStartDate = document.createElement('div');
+ estimatedStartDate.innerHTML = `EST Start Date
${startDateFormatted}
`;
+
+ const actualStartDate = document.createElement('div');
+ actualStartDate.innerHTML = `Actual Start Date
${startDateFormatted}
`;
+
+ const estimatedEndDate = document.createElement('div');
+ estimatedEndDate.innerHTML = `EST End Date
—
`;
+
+ row5.appendChild(estimatedStartDate);
+ row5.appendChild(actualStartDate);
+ row5.appendChild(estimatedEndDate);
+ managerInfoTable.appendChild(row5);
+
+ // Links Section: Plans, Estimates, Documents & Files
+ if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim() !== ''){
+ try {
+ const files = await fetchJobFiles(job);
+
+ // Categorize files
+ const plans = [];
+ const estimates = [];
+ const documentsAndFiles = [];
+
+ files.forEach(file => {
+ const name = file.name.toLowerCase();
+ if(name.includes('plan') || name.includes('drawing') || name.includes('dwg')) {
+ plans.push(file);
+ } else if(name.includes('estimate') || name.includes('est')) {
+ estimates.push(file);
+ } else {
+ documentsAndFiles.push(file);
+ }
+ });
+
+ // Links Section Container
+ const linksSection = document.createElement('div');
+ linksSection.className = 'mt-4 pb-3 border-b border-gray-200';
+ linksSection.innerHTML = `Links
`;
+
+ const linksGrid = document.createElement('div');
+ linksGrid.className = 'grid grid-cols-3 gap-4';
+
+ // Plans column
+ const plansCol = document.createElement('div');
+ plansCol.innerHTML = `Plans
`;
+ const plansList = document.createElement('div');
+ plansList.className = 'space-y-1';
+ if(plans.length > 0) {
+ plans.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'text-blue-600 hover:text-blue-800 cursor-pointer underline';
+ fileItem.style.fontSize = '10px';
+ fileItem.textContent = file.name;
+ fileItem.onclick = () => openFilePreview(file);
+ plansList.appendChild(fileItem);
+ });
+ } else {
+ plansList.innerHTML = `No plans
`;
+ }
+ plansCol.appendChild(plansList);
+
+ // Estimates column
+ const estimatesCol = document.createElement('div');
+ estimatesCol.innerHTML = `Estimates
`;
+ const estimatesList = document.createElement('div');
+ estimatesList.className = 'space-y-1';
+ if(estimates.length > 0) {
+ estimates.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'text-blue-600 hover:text-blue-800 cursor-pointer underline';
+ fileItem.style.fontSize = '10px';
+ fileItem.textContent = file.name;
+ fileItem.onclick = () => openFilePreview(file);
+ estimatesList.appendChild(fileItem);
+ });
+ } else {
+ estimatesList.innerHTML = `No estimates
`;
+ }
+ estimatesCol.appendChild(estimatesList);
+
+ // Documents & Files column
+ const docsCol = document.createElement('div');
+ docsCol.innerHTML = `Documents & Files
`;
+ const docsList = document.createElement('div');
+ docsList.className = 'space-y-1';
+ if(documentsAndFiles.length > 0) {
+ documentsAndFiles.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'text-blue-600 hover:text-blue-800 cursor-pointer underline';
+ fileItem.style.fontSize = '10px';
+ fileItem.textContent = file.name;
+ fileItem.onclick = () => openFilePreview(file);
+ docsList.appendChild(fileItem);
+ });
+ } else {
+ docsList.innerHTML = `No documents
`;
+ }
+ docsCol.appendChild(docsList);
+
+ linksGrid.appendChild(plansCol);
+ linksGrid.appendChild(estimatesCol);
+ linksGrid.appendChild(docsCol);
+ linksSection.appendChild(linksGrid);
+ managerInfoTable.appendChild(linksSection);
+ } catch(err) {
+ console.log('Error loading files for Manager Info:', err);
+ }
+ }
+
+ // Notes Section with Tabs
+ const notesSection = document.createElement('div');
+ notesSection.className = 'mt-4';
+
+ // Tab buttons
+ const notesTabs = document.createElement('div');
+ notesTabs.className = 'flex gap-2 mb-2';
+
+ const jobNotesTabBtn = document.createElement('button');
+ jobNotesTabBtn.id = 'jobNotesTab';
+ jobNotesTabBtn.className = 'px-3 py-1 font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
+ jobNotesTabBtn.style.fontSize = '8px';
+ jobNotesTabBtn.textContent = 'Notes';
+
+ const managerNotesTabBtn = document.createElement('button');
+ managerNotesTabBtn.id = 'managerNotesTab';
+ managerNotesTabBtn.className = 'px-3 py-1 font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
+ managerNotesTabBtn.style.fontSize = '8px';
+ managerNotesTabBtn.textContent = 'Manager Notes';
+
+ notesTabs.appendChild(jobNotesTabBtn);
+ notesTabs.appendChild(managerNotesTabBtn);
+ notesSection.appendChild(notesTabs);
+
+ // Job Notes Content
+ const jobNotesContent = document.createElement('div');
+ jobNotesContent.id = 'jobNotesContent';
+ jobNotesContent.className = 'notes-tab-content';
+
+ // Display notes first
+ const jobNotesDisplay = document.createElement('div');
+ jobNotesDisplay.className = 'text-gray-600 whitespace-pre-wrap break-words p-2 border border-gray-300 rounded bg-gray-50 min-h-[80px] mb-3';
+ jobNotesDisplay.style.fontSize = '10px';
+ jobNotesDisplay.innerHTML = job.Notes || 'No notes available';
+ jobNotesContent.appendChild(jobNotesDisplay);
+
+ // Add Note button below notes display
+ const addNoteBtn = document.createElement('button');
+ addNoteBtn.className = 'mb-2 px-3 py-1 bg-green-600 text-white rounded font-bold hover:bg-green-700 cursor-pointer';
+ addNoteBtn.style.fontSize = '8px';
+ addNoteBtn.textContent = 'Add A Note';
+ jobNotesContent.appendChild(addNoteBtn);
+
+ // Note editor (collapsed by default)
+ const noteEditor = document.createElement('div');
+ noteEditor.id = 'jobNoteEditor';
+ noteEditor.className = 'hidden mb-3 p-2 border border-gray-300 rounded bg-gray-50';
+ noteEditor.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ jobNotesContent.appendChild(noteEditor);
+
+ // File columns - always create them
+ const fileColumns = document.createElement('div');
+ fileColumns.id = 'jobNotesFileColumns';
+ fileColumns.className = 'grid grid-cols-3 gap-4 mt-3';
+
+ // Initialize with empty state
+ fileColumns.innerHTML = `
+
+
+
Estimates
+
Loading...
+
+
Other Files
+
Loading...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ managerNotesContent.appendChild(managerNoteEditor);
+
+ // File columns for manager notes - always create them
+ const managerFileColumns = document.createElement('div');
+ managerFileColumns.id = 'managerNotesFileColumns';
+ managerFileColumns.className = 'grid grid-cols-3 gap-4 mt-3';
+
+ // Initialize with empty state
+ managerFileColumns.innerHTML = `
+
+
+
Estimates
+
Loading...
+
+
Other Files
+
Loading...
+
Plans
`;
+ const plansList = document.createElement('div');
+ plansList.className = 'space-y-1';
+ if(plans.length > 0) {
+ plans.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
+ fileItem.style.fontSize = '10px';
+
+ // File icon
+ const icon = document.createElement('span');
+ icon.textContent = '📄';
+ fileItem.appendChild(icon);
+
+ const fileName = document.createElement('span');
+ fileName.textContent = file.name;
+ fileName.className = 'truncate';
+ fileItem.appendChild(fileName);
+
+ fileItem.onclick = () => openFilePreview(file);
+ plansList.appendChild(fileItem);
+ });
+ } else {
+ plansList.innerHTML = `No plans
`;
+ }
+ plansCol.appendChild(plansList);
+
+ // Estimates column
+ const estimatesCol = document.createElement('div');
+ estimatesCol.innerHTML = `Estimates
`;
+ const estimatesList = document.createElement('div');
+ estimatesList.className = 'space-y-1';
+ if(estimates.length > 0) {
+ estimates.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
+ fileItem.style.fontSize = '10px';
+
+ // File icon
+ const icon = document.createElement('span');
+ icon.textContent = '📊';
+ fileItem.appendChild(icon);
+
+ const fileName = document.createElement('span');
+ fileName.textContent = file.name;
+ fileName.className = 'truncate';
+ fileItem.appendChild(fileName);
+
+ fileItem.onclick = () => openFilePreview(file);
+ estimatesList.appendChild(fileItem);
+ });
+ } else {
+ estimatesList.innerHTML = `No estimates
`;
+ }
+ estimatesCol.appendChild(estimatesList);
+
+ // Other Files column
+ const otherCol = document.createElement('div');
+ otherCol.innerHTML = `Other Files
`;
+ const otherList = document.createElement('div');
+ otherList.className = 'space-y-1';
+ if(otherFiles.length > 0) {
+ otherFiles.forEach(file => {
+ const fileItem = document.createElement('div');
+ fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
+ fileItem.style.fontSize = '10px';
+
+ // File icon based on extension
+ const ext = file.name.split('.').pop().toLowerCase();
+ const icon = document.createElement('span');
+ if(['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
+ icon.textContent = '🖼️';
+ } else if(['pdf'].includes(ext)) {
+ icon.textContent = '📕';
+ } else if(['doc', 'docx'].includes(ext)) {
+ icon.textContent = '📝';
+ } else {
+ icon.textContent = '📄';
+ }
+ fileItem.appendChild(icon);
+
+ const fileName = document.createElement('span');
+ fileName.textContent = file.name;
+ fileName.className = 'truncate';
+ fileItem.appendChild(fileName);
+
+ fileItem.onclick = () => openFilePreview(file);
+ otherList.appendChild(fileItem);
+ });
+ } else {
+ otherList.innerHTML = `No other files
`;
+ }
+ otherCol.appendChild(otherList);
+
+ container.appendChild(plansCol);
+ container.appendChild(estimatesCol);
+ container.appendChild(otherCol);
+ }
+
const closeModal = ()=>{ detailModal.classList.add('hidden'); renderCards(visibleJobs); };
document.getElementById('btnClose').addEventListener('click',closeModal);
document.getElementById('backBtn').addEventListener('click',closeModal);
@@ -1130,30 +1943,53 @@
function switchTab(tab){
const infoTab = document.getElementById('infoTab');
const notesTab = document.getElementById('notesTab');
+ const managerInfoTab = document.getElementById('managerInfoTab');
const infoContent = document.getElementById('infoContent');
const notesContent = document.getElementById('notesContent');
+ const managerInfoContent = document.getElementById('managerInfoContent');
const infoHeading = document.getElementById('infoHeading');
const notesHeading = document.getElementById('notesHeading');
+ const managerInfoHeading = document.getElementById('managerInfoHeading');
if(tab === 'info'){
infoTab.className = 'px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 -mb-px';
notesTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
+ managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
infoContent.classList.remove('hidden');
notesContent.classList.add('hidden');
+ managerInfoContent.classList.add('hidden');
if(infoHeading) infoHeading.classList.remove('hidden');
if(notesHeading) notesHeading.classList.add('hidden');
- } else {
+ if(managerInfoHeading) managerInfoHeading.classList.add('hidden');
+ } else if(tab === 'notes') {
infoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
notesTab.className = 'px-4 py-2 text-sm font-medium text-orange-600 border-b-2 border-orange-600 -mb-px';
+ managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
infoContent.classList.add('hidden');
notesContent.classList.remove('hidden');
+ managerInfoContent.classList.add('hidden');
if(infoHeading) infoHeading.classList.add('hidden');
if(notesHeading) notesHeading.classList.remove('hidden');
+ if(managerInfoHeading) managerInfoHeading.classList.add('hidden');
+ } else if(tab === 'managerInfo') {
+ infoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
+ notesTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
+ managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-green-600 border-b-2 border-green-600 -mb-px';
+ infoContent.classList.add('hidden');
+ notesContent.classList.add('hidden');
+ managerInfoContent.classList.remove('hidden');
+ if(infoHeading) infoHeading.classList.add('hidden');
+ if(notesHeading) notesHeading.classList.add('hidden');
+ if(managerInfoHeading) managerInfoHeading.classList.remove('hidden');
}
}
document.getElementById('infoTab').addEventListener('click',()=>switchTab('info'));
document.getElementById('notesTab').addEventListener('click',()=>switchTab('notes'));
+ document.getElementById('managerInfoTab').addEventListener('click',()=>{
+ switchTab('managerInfo');
+ populateManagerInfo(currentJob);
+ });
// --- Toolbar ---
let savedSelection = null;