DbackDan/ibm-role-matrix-navigator
0
1document.addEventListener('DOMContentLoaded', function() {2 // Categories for individuals3 const categories = {4 "Bob": "Procurement",5 "Bob/Shannon": "Finance",6 "Carlos": "Engineering",7 "David S": "Quality",8 "Daniel": "Operations",9 "Daniel/Bob": "Operations/Procurement",10 "Daniel/Carlos": "Operations/Engineering",11 "Daniel/David S": "Operations/Quality",12 "Daniel/Manny R": "Operations/Logistics",13 "Daniel/Nate": "Operations/Purchasing",14 "Daniel/Stacey": "Operations/Finance",15 "David/Carlos": "Quality/Engineering",16 "David S/Carlos": "Quality/Engineering",17 "Esme/Bob": "Legal/Procurement",18 "Magnus": "Scheduling",19 "Manny R": "Logistics",20 "Nate": "Purchasing",21 "Stacey": "Finance",22 "Maint": "Maintenance",23 "HR/Shannon": "Human Resources",24 "Omar/Bob": "Sales/Procurement",25 "Manny S": "Warehouse"26 };27 // Primary Roles Data28 const rolesData = [29 { id: 1, role: "Foxconn PO Interface, Communication", responsible: "Bob", comp: "", category: categories["Bob"] },30 { id: 2, role: "IBM Procurement Request for Information", responsible: "Bob", comp: "", category: categories["Bob"] },31 { id: 3, role: "IBM Quoting (Gustavo)", responsible: "Bob", comp: "", category: categories["Bob"] },32 { id: 4, role: "Foxconn Production Sales Entry & EDI", responsible: "Bob/Shannon", comp: "X", category: categories["Bob/Shannon"] },33 { id: 5, role: "IBM Invoicing all Sites & CSP", responsible: "Bob/Shannon", comp: "X", category: categories["Bob/Shannon"] },34 { id: 6, role: "EC Updates & BOM", responsible: "Carlos", comp: "X", category: categories["Carlos"] },35 { id: 7, role: "IBM Supplier Assurance EC, PCD, Communication", responsible: "Carlos", comp: "X", category: categories["Carlos"] },36 { id: 8, role: "P/N Serialization Tracking Sheet Development", responsible: "Carlos", comp: "X", category: categories["Carlos"] },37 { id: 9, role: "Part Master BOM Maintenance", responsible: "David S", comp: "X", category: categories["David S"] },38 { id: 10, role: "FRU Weekly Open Order Report", responsible: "Daniel", comp: "X", category: categories["Daniel"] },39 { id: 11, role: "IBM FRU Sales Entry & EDI WOI", responsible: "Daniel", comp: "X", category: categories["Daniel"] },40 { id: 12, role: "IBM Inventory Management", responsible: "Daniel", comp: "X", category: categories["Daniel"] },41 { id: 13, role: "IBM Monthly FRU Usage Report", responsible: "Daniel", comp: "", category: categories["Daniel"] },42 { id: 14, role: "IBM WOI FRU & DEV PO Interface, OOR, Communication", responsible: "Daniel", comp: "X", category: categories["Daniel"] },43 { id: 15, role: "Job Creation", responsible: "Daniel", comp: "X", category: categories["Daniel"] },44 { id: 16, role: "Job Releasing to Manufacturing & Assembly", responsible: "Daniel", comp: "X", category: categories["Daniel"] },45 { id: 17, role: "Mfg Time-Phase Management of Jobs", responsible: "Daniel", comp: "X", category: categories["Daniel"] },46 { id: 18, role: "Reconext CSP Interface, Communication", responsible: "Daniel", comp: "X", category: categories["Daniel"] },47 { id: 19, role: "RESILINC Sub supplier Maintenance & Distaster Notification", responsible: "Daniel", comp: "X", category: categories["Daniel"] },48 { id: 20, role: "IBM & Reconext RMA's, DMR's & Tracking", responsible: "Daniel/Bob", comp: "X", category: categories["Daniel/Bob"] },49 { id: 21, role: "Assembly & Testing Process Improvement & changes", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },50 { id: 22, role: "Assembly employee Training & Records", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },51 { id: 23, role: "Country of Origin & Label requirement by Site", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },52 { id: 24, role: "CSP Program Management Diamondback", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },53 { id: 25, role: "Diamondback Programming & Testing", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },54 { id: 26, role: "Engineering Work Instruction update", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },55 { id: 27, role: "IBM Development Lab Request for information", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },56 { id: 28, role: "IBM Development Team Interface & Communication", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },57 { id: 29, role: "Packaging and Label Requirements", responsible: "Daniel/Carlos", comp: "X", category: categories["Daniel/Carlos"] },58 { id: 30, role: "RMR's, DMR's & Tracking *", responsible: "Daniel/David S", comp: "X", category: categories["Daniel/David S"] },59 { id: 31, role: "Packslip/Invoice Creation for shipment", responsible: "Daniel/Manny R", comp: "X", category: categories["Daniel/Manny R"] },60 { id: 32, role: "Shipping Coordination", responsible: "Daniel/Manny R", comp: "X", category: categories["Daniel/Manny R"] },61 { id: 33, role: "Purchasing Time-Phase Management", responsible: "Daniel/Nate", comp: "X", category: categories["Daniel/Nate"] },62 { id: 34, role: "Quarterly Diversity Reporting", responsible: "Daniel/Stacey", comp: "NA", category: categories["Daniel/Stacey"] },63 { id: 35, role: "Conflict Mineral Policy statement (IBM Requires) CEI Policy", responsible: "David S", comp: "NA", category: categories["David S"] },64 { id: 36, role: "Corporate Responsibility Policy Yearly Review (IBM Requires) CEI Policy", responsible: "David S", comp: "X", category: categories["David S"] },65 { id: 37, role: "IBM Quality SQRD, QIN", responsible: "David S", comp: "X", category: categories["David S"] },66 { id: 38, role: "Mfg Production Quality", responsible: "David S", comp: "X", category: categories["David S"] },67 { id: 39, role: "Purchasing Receiving Inspection", responsible: "David S", comp: "X", category: categories["David S"] },68 { id: 40, role: "Quality Foxconn Supplier Tracking", responsible: "David S", comp: "NA", category: categories["David S"] },69 { id: 41, role: "Conflict Mineral Determination & Reporting", responsible: "David S/Carlos", comp: "", category: categories["David S/Carlos"] },70 { id: 42, role: "Foxconn Quality", responsible: "David/Carlos", comp: "", category: categories["David/Carlos"] },71 { id: 43, role: "IBM Product Content Declaration & Determination", responsible: "David S/Carlos", comp: "", category: categories["David S/Carlos"] },72 { id: 44, role: "REACH Compliance and Quarterly Reporting", responsible: "David S/Carlos", comp: "", category: categories["David S/Carlos"] },73 { id: 45, role: "RoHS Compliance", responsible: "David S/Carlos", comp: "X", category: categories["David S/Carlos"] },74 { id: 46, role: "IBM/Foxconn SOW & Contract Relations (Gustavo)", responsible: "Esme/Bob", comp: "X", category: categories["Esme/Bob"] },75 { id: 47, role: "Scheduling Of Manufacturing Jobs", responsible: "Magnus", comp: "X", category: categories["Magnus"] },76 { id: 48, role: "Customs and Shipping", responsible: "Manny R", comp: "X", category: categories["Manny R"] },77 { id: 49, role: "Purchasing", responsible: "Nate", comp: "X", category: categories["Nate"] },78 { id: 50, role: "EIW Monthly Usage & Credit memo issuance", responsible: "Stacey", comp: "X", category: categories["Stacey"] },79 { id: 51, role: "Tariff Reimbnursement", responsible: "Stacey", comp: "", category: categories["Stacey"] },80 { id: 52, role: "Environmental Comp Policy (IBM Requires) CEI Policy", responsible: "David S", comp: "X", category: categories["David S"] }81 ];82// Administrative Programs Data83 const adminData = [84 { id: 1, program: "CEI ADEQ Report 2025", responsible: "Stacey", comp: "X" },85 { id: 2, program: "CEI Annual Fire Extin & Riser Inspect 2025", responsible: "Maint", comp: "X" },86 { id: 3, program: "CEI Back Flow Prevention Test 2025", responsible: "Maint", comp: "X" },87 { id: 4, program: "Business Continuity & Pandemic Plan (IBM Requires) CEI Policy", responsible: "David S", comp: "X" },88 { id: 5, program: "CEI Conflict Mineral Policy 2025", responsible: "David S", comp: "X" },89 { id: 6, program: "CEI Corporate Responsibility Policy 2025", responsible: "David S", comp: "X" },90 { id: 7, program: "CEI CR & EMS 7.0 2025", responsible: "David S", comp: "X" },91 { id: 8, program: "CEI Emergency Contingency Plan 2025", responsible: "David S", comp: "X" },92 { id: 9, program: "CEI Environ Aspect and Disposition 2025", responsible: "Stacey", comp: "X" },93 { id: 10, program: "CEI Environmental Comp Policy 2025", responsible: "David S", comp: "X" },94 { id: 11, program: "CEI Recycle program 2025", responsible: "Stacey", comp: "X" },95 { id: 12, program: "CEI Storm Water Mgt 2025", responsible: "David S", comp: "X" },96 { id: 13, program: "CEI Water Jet Process 2025", responsible: "David S", comp: "X" },97 { id: 14, program: "Environmental Hazardous Waste Inventory Statement 2025", responsible: "Stacey/David", comp: "X" },98 { id: 15, program: "Safety Program Annual Review", responsible: "HR/Shannon", comp: "X" },99 { id: 16, program: "WD Sales Confirmation", responsible: "Omar/Bob", comp: "X" },100 { id: 17, program: "WD Time-Phase and Scheduling", responsible: "Magnus", comp: "X" },101 { id: 18, program: "WD Assembly & Shipping", responsible: "Manny S", comp: "X" },102 { id: 19, program: "WD Inventory", responsible: "Manny S", comp: "X" }103 ];104 // Group roles by responsible person105 const groupedRoles = {};106 rolesData.forEach(role => {107 const responsible = role.responsible;108 if (!groupedRoles[responsible]) {109 groupedRoles[responsible] = [];110 }111 groupedRoles[responsible].push(role);112 });113 114 // Render grouped roles115 const rolesContainer = document.getElementById('roles-container');116 Object.keys(groupedRoles).forEach(responsible => {117 // Create section header118 const sectionHeader = document.createElement('div');119 sectionHeader.className = 'category-header';120 sectionHeader.innerHTML = `121 <h3 class="text-xl font-semibold text-gray-800 mb-2 flex items-center">122 <i data-feather="user" class="mr-2"></i>123 ${responsible}124 </h3>125 `;126 rolesContainer.appendChild(sectionHeader);127 128 // Create cards for this person129 const cardsContainer = document.createElement('div');130 cardsContainer.className = 'grid grid-cols-1 md:grid-cols-2 gap-4 mb-6';131 132 groupedRoles[responsible].forEach(role => {133 const roleCard = document.createElement('custom-role-card');134 roleCard.setAttribute('role', role.role);135 roleCard.setAttribute('responsible', role.responsible);136 roleCard.setAttribute('comp', role.comp || '');137 cardsContainer.appendChild(roleCard);138 });139 140 rolesContainer.appendChild(cardsContainer);141 });142// Render admin programs143 const adminContainer = document.getElementById('admin-container');144 adminData.forEach(program => {145 const roleCard = document.createElement('custom-role-card');146 roleCard.setAttribute('role', program.program);147 roleCard.setAttribute('responsible', program.responsible);148 roleCard.setAttribute('comp', program.comp || '');149adminContainer.appendChild(roleCard);150 });151 152 // Create role distribution chart153 const roleCounts = {};154 rolesData.forEach(role => {155 const category = role.category || 'Other';156 roleCounts[category] = (roleCounts[category] || 0) + 1;157 });158 159 const ctx = document.getElementById('roleChart').getContext('2d');160 new Chart(ctx, {161 type: 'bar',162 data: {163 labels: Object.keys(roleCounts),164 datasets: [{165 label: 'Number of Roles',166 data: Object.values(roleCounts),167 backgroundColor: [168 'rgba(255, 99, 132, 0.7)',169 'rgba(54, 162, 235, 0.7)',170 'rgba(255, 206, 86, 0.7)',171 'rgba(75, 192, 192, 0.7)',172 'rgba(153, 102, 255, 0.7)',173 'rgba(255, 159, 64, 0.7)',174 'rgba(199, 199, 199, 0.7)',175 'rgba(83, 102, 255, 0.7)',176 'rgba(40, 159, 64, 0.7)'177 ],178 borderColor: [179 'rgba(255, 99, 132, 1)',180 'rgba(54, 162, 235, 1)',181 'rgba(255, 206, 86, 1)',182 'rgba(75, 192, 192, 1)',183 'rgba(153, 102, 255, 1)',184 'rgba(255, 159, 64, 1)',185 'rgba(199, 199, 199, 1)',186 'rgba(83, 102, 255, 1)',187 'rgba(40, 159, 64, 1)'188 ],189 borderWidth: 1190 }]191 },192 options: {193 responsive: true,194 maintainAspectRatio: false,195 scales: {196 y: {197 beginAtZero: true,198 ticks: {199 stepSize: 1200 }201 }202 },203 plugins: {204 legend: {205 display: false206 },207 tooltip: {208 callbacks: {209 label: function(context) {210 return `${context.parsed.y} roles`;211 }212 }213 }214 }215 }216 });217// Filter functionality218 document.addEventListener('filterChanged', (e) => {219 const filterValue = e.detail.filter;220 const allRoleCards = document.querySelectorAll('custom-role-card');221 222 allRoleCards.forEach(card => {223 const responsible = card.getAttribute('responsible');224 if (filterValue === 'all' || responsible.includes(filterValue)) {225 card.style.display = 'block';226 } else {227 card.style.display = 'none';228 }229 });230 });231});